What’s the problem?

My macbook is often in the “charging” state but is actually not charging,
and sometimes I just forget to plug in my charger 🤦. This causes my laptop to run out of battery while I’m playing video games such as League of Legends or Steam games 😭. Unfortunately this has happened multiple times…

How do we solve this?

Of course, the answer is let’s code something to solve this. So we’ve created a script that’s always monitoring the battery level since we definitely can’t trust the charging symbol in the mac’s user interface. We’ll make my laptop say “battery is draining” if the battery is not increasing, and “charger is not plugged in” if I didn’t even plug in my charger.

After coding this up, we just need to run one command to make sure that our battery is always being checked when we are gaming:

nohup ./batteryd.py -a Steam|LeagueClient >/dev/null 2>&1 &

Where’s your code?

We had to google to figure out how to:

1. Get the battery stats from the computer, and determine if the battery is charging or not,
2. Determine if an application is running or not because I only want to this script to check the battery if I’m gaming,
3. Get the laptop to talk to us.

Code is at https://github.com/nickwu241/battery-checker or see the gist below:

What’s next?

Next up on #SummerSideProjects is a surprise so subscribe to Nick Codes on YouTube or follow nickwu241 on Github to be the first to the fun 😉 #newyearnewnick

I tried Flutter recently, it’s super enjoyable, productive and intuitive! 😄 I’ll discuss where Flutter shines and why I like it by showing you an Instagram clone I built.

What is Flutter❓

It’s a mobile framework for creating Android and iOS applications.

You write code once using the Dart programming language and ship it to both the App Store and Google Play Store, similar to React Native. Its main selling points are fast development, expressive user interface (UI), and native performance.

Creating Instagroot — Instagram clone for Groot 🌴

I only focused on creating the UI and interactions for the Home Feed, take a look at what it looks like below 👻

I took a top-down approach when building Instagroot:

1. Break down the components and create the layout for them.
2. Tackle big components one at a time: StoriesBar, PostWidget, and CommentWidget.
3. Implement the details for smaller components, for example: avatars have a gradient border if a user has a new story.
4. Create the interactions/animations such as liking a post, double tapping to like a post, commenting, and liking comments.

Why I like using Flutter 😍

Composable, intuitive, and fun

To create user interfaces in Flutter, you compose many “widgets” (components) together. To me it’s super intuitive and fun!

I created Instagroot using the Row, Column, Stack, and ListView widgets for layout. Then using the Padding widget to add spacing where needed.

For example, take a look at the UI and corresponding code for the “photo details” section:

Simple and useful built-in widgets

Flutter has many built-in widgets that implement common UI components such as a Scaffold (consisting of the AppBar and BottomNavigationBar), CircularAvatar, IconButton, Icon, and many more.

Highly customizable widgets

If the built-in widgets alone aren’t cutting it, you can create your custom widgets using some built-in widgets and lower level APIs which give you more fine grain control of pixels. Alternatively, you can find widgets from the nice Flutter community.

For Instagroot, I implemented custom widgets for the avatars with a gradient border, heart animation when a photo is double tapped, photo carousel dots, and heart button for liking comments:

Awesome Tooling

It’s easy to setup Flutter and start coding using VSCode which feels more lightweight compared to using Android Studio and Xcode. Notable features include:

• Inspect Widget for figuring out where a UI element is in the hierarchy and the corresponding code for creating it.
• Code Assist for quickly refactoring widgets such as adding Padding to a widget.
• Hot Reload so UI changes in your code will be reflected on the emulator or physical device in milliseconds.

Conclusion

Flutter’s fun, easy to use, and I’m pretty productive creating mobile applications using it. You should definitely give it a shot if you haven’t already.

Thanks everyone for reading and hope you all enjoyed it! ✌️

📱 Try the app on Google Play Store

❤️ See the full code on GitHub

Next up: I’ll be writing blog posts and posting videos on how to create specific Flutter widgets! 😄

🌈 Find me on Instagram
🐙 Follow me on GitHub
⭐ Let’s connect on LinkedIn
🐦 Follow me on Twitter

Life at Shopify 🦄

Amazing culture & coworkers 🏄🏻

I absolutely loved the work culture! Shopify cares a lot about personal growth and gives teams/individuals a lot of autonomy. This means there are many opportunities for personal growth and making an impact, so you’re in control of how much you want to get out of the internship.

Shopifolks are friendly, open-minded, fun, passionate about the product, and always willing to help one another. I enjoyed surrounding myself with curious people that have strong technical backgrounds and are constantly looking for ways to improve the status quo (both full-timers and interns). Shout out to my mentors/team for knowing so much, supporting me, explaining their decisions, and being a funny bunch.

Challenging work 👷

I liked the work I was doing and the technology I was working on so I was excited to go to work everyday.

The type of work depends on your team and roadmaps but there’s a high chance you’ll be tackling tough and impactful problems with mentorship!

Fun office 💚

Shopify’s Ottawa office at 150 Elgin Street is full of personality ❤️ It has around 10 floors and each floor has its own unique theme with various cute spots to work, eat, drink, relax, or play. If you’re ever in Ottawa, I’d recommend taking an office tour.

I liked that work is flexible because the important part is getting your work done & making an impact. I’d often play foosball, table tennis, Mario Kart, Zelda, pinball, or some other games after work or when I need a break 😄

Shout out to the amazing culinary team at the Ottawa office! They always make a variety of yummy food. Breakfast and lunch are provided & there are constantly treats at random times averaging once a week or two, they serve all sorts of goodies such as ice cream, waffles, poutine, sliders. Offices are stocked with snacks and drinks too 😉

I worked in Ottawa but Shopify has offices in Toronto, Montreal, Waterloo and around the world (San Fransisco, Berlin). You can check out https://www.shopify.com/careers/locations.

Cool events ✌️

Over my 8 months, I went to 3 internal summits/conferences (one company-wide, one for production engineering, one for RnD), 2 intern retreats, 2 internal hackathons where my team won one of them, other team building/celebrating activities, and lots of talks! There are many opportunities to learn, have fun, see what’s happening around the company, meet new people, and eat good food.

Life outside the office ⛄

Living by myself & being close to other interns 🔥

I’m from Vancouver BC and this was my first time living by myself. It’s great to be independent and I had a lot of time for myself. Interns coming out of the city were all housed at the same building so it was easy to get together to play board games, video games, go out for fun, or chill! Throughout the year, I learned many new board games, got decent at foosball, but not so good at table tennis still… 😆

Being a tourist ✈️

Going to hackathons 🤖

For those that know me, you’ll know how much I like these! On the east coast, there are many more hackathons to attend compared to Vancouver. Extra fun that I won prizes from some these too 😛 Check out some of my hacks.

What I worked on 🚀

This section is semi-technical.

• Created a Ruby on Rails 🚈 application to visualize deployments, resources, and access permissions for data projects under Shopify’s Google Cloud infrastructure. This app also runs health checks to enforce good practices and offers an interface to create service accounts, request permissions, etc.
• Created a process for a faster way to analyze audit logs in case of (potential) security breaches. The goal was to get answers to questions such as “who accessed this resource” under an hour for 1000+ TB of event logs ⭐️
• Developed a Scala service to replicate production SQL queries against our data cluster onto a test data cluster. This allowed us to “test” our SQL query engine version upgrades (PrestoDB) in case new versions break backward compatibility or come with huge performance degradations.
• Built a macOS application to abstract away using the command line for connecting to data services. This is good for folks unfamiliar with the command line but probably not too useful at the current moment 😆
• Experimented with using Google Stackdriver and their APIs to leverage the monitoring/alerting offered by Google’s ecosystem. Documented my exploration including pros & cons and some quirks of Stackdriver.
• Developed a command line interface to look at current status of services, deploy services, scale up/down when needed.
• Optimized some Dockerfiles to get faster build times, thus higher developer productivity 🙏

Over the work term, I used Python, Ruby (Rails), Swift (macOS), Scala, a bit of Java, a bit of Go, systemd, Google Cloud Platform, Kafka, PrestoDB, Mode, Datadog, Splunk. It was my first time using most of these technologies as I only had previous experience with Python, Go, Java, AWS. So I definitely learned a lot on the job!

Tips for the Internship Applications 💪

Disclaimer: These are all my own opinions and experiences, the process may have changed and I am not representing Shopify in any way. Use this information at your own discretion.

Shopify opens up applications roughly 4 months in advance for all 3 terms: fall, winter, summer. Check out https://www.shopify.com/careers/interns for deets.

1. Spend time on the application and do the extra credit if there are extra credits for the challenge. Most of them involves creating an app.
2. Create a unique cover letter that expresses your interests, passions, and your own personality, they do read these! This is important because interns TYPICALLY don’t have as much experience as full-timers, so it’s your passion, desire to learn, problem solving, and communication that counts!
3. For the life story interview, be ready to talk about yourself, your interests, how you got to where you are today, why are you interested in the role, why are you passionate about what you’re passionate about. This’ll be with a recruiter.
4. For the technical interview, the first half is talking about a project you bring. You should know your project well and ideally worked on most of it, it can be a school project. You’ll talk about your project and demo it, then the interviewers will ask you questions along the way, it’s a technical discussion back and forth. They might ask you how you would change your app if there’re new requirements. You should be ready to justify your technical decisions such as choosing the tech stack, datastore, data structures, algorithms, and anything else that’s specific/applicable to your project (UX flow, routing, selecting 3rd party APIs, deployment process, caching mechanism, etc).
5. My whole technical interview was going over my project but I think for 2019 and onwards, the second half should be going over your application challenge you completed. I would say the same tips apply— know what you did and why 😃

If you came for the tips, I hope this helps and feel free to message me with more specific questions.

Thanks for reading! 😍

Show some love and give this post a 👏 or 50 if you liked it 😉

Feel free to reach out to me on Instagram, LinkedIn, Twitter about my experiences at Shopify, the interview process, feedback on my post, or pretty much anything!

🌈 Find me on Instagram
🐙 Follow me on GitHub
⭐ Let’s connect on LinkedIn
🐦 Follow me on Twitter

More Technical Posts from Nick

• Web Scraping with Python — Part 1
• Creating an Instagram clone with Flutter 😱

In Part 1, I’ll show my steps for scraping a website with an example. For instance, I want to create a random quote generator, so first I need a list of quotes — web scraping to the rescue! 🙌

It’ll be helpful to have a basic knowledge of HTML and Python for following along. My example uses Python 3 and requires requests and bs4.

1. Find a website you’re interested in scraping

I googled “famous quotes” and the first result was http://www.keepinspiring.me/famous-quotes/.

2. Inspect the HTML to find patterns for extraction

After navigating to the website, I right clicked the section I was interested in and clicked “Inspect” to show the HTML structure. See below:

Then I usually open up a few more of the HTML elements, and skim through the whole document to get a sense of the structure.

3. Use Python to extract from the HTML document

We’ll use BeautifulSoup to parse the HTML and select elements we’re interested in and just print the output for a start:

After running the program (view the script output at https://gist.github.com/nickwu241/3d9ec7eb46608d4b88164f8e0f9e7ede), we get 108 quotes as expected since the post title is “108 famous quotes on life, love, and success”. But some of the output is unexpected, e.g. quotes[64] is empty and quotes[107] has extra text after the quote.

4. Refine the Python script

We can refine our Python script by inspecting the page and correcting our assumptions about the HTML structure until we’re happy with the results!

In this example, let’s fix the empty quotes[64] first:

This is just an empty div, probably a mistake from keepingspiring.me, a fix is to ignore empty divs.

Next, we can fix quotes[107] by just taking the first line of text.

Finally, we can clean up the text content before storing it, i.e. splitting the string into quote, author and removing all quotations & dashes.

View the script output file at: https://gist.github.com/nickwu241/8b3227005d80cdfb6ff2388ccb6faf77

5. Use the data

Now we can use the data for our applications, analysis, etc.

For me, I created a simple random quote generator using Flask and deployed it on Heroku:

• Goody Quotes
• nickwu241/quotes

BONUS TIPS FOR PROTOTYPING

Most the time will be inspecting the HTML and tweaking your program so:

• get familiar with the BeautifulSoup interface, the docs and Stack Overflow are good: https://www.crummy.com/software/BeautifulSoup/bs4/doc/
• download the URLs locally to be nice to the server and quicken your iteration cycle
• start simple and have the program crash instead of failing silently when your assumptions are incorrect

Closing

And that’s it for this part to keep this post short, thank you for reading! 😄 Give this post a 👏 or two if you enjoyed it and let me know what you think, what type of data you’re interested in scraping, and what other types of blog posts you’re interested in reading next! See you next time! 😉

🌈 Find me on Instagram
🐙 Follow me on GitHub
⭐ Let’s connect on LinkedIn
🐦 Follow me on Twitter

<script src="https://gist.github.com/nickwu241/8f0c4c95aa68fe969dcebddd456b6752.js"></script>

But including this in a Vue component template results in:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

Oh no! To fix this, we will include the Gist statically by grabbing the HTML/CSS produced by the Javascript code and make it a Vue component.

Steps to embed a Gist in Vue

Run this command to generate the Gist component Gist.vue, replacing <USERNAME> and <GIST_ID>:

python <(curl https://raw.githubusercontent.com/nickwu241/vue-static-gist-example/master/to_gist_comp.py) <USERNAME>/<GIST_ID> 

For the curious, this command executes the Python script below.

Now just register the component like any other Vue component:

Here’s what alive example looks like:

• Live Example: https://nickwu241.github.io/vue-static-gist-example
• Example Source: https://github.com/nickwu241/vue-static-gist-example

Thanks for reading, 👏 if this helped you out! Check out some of my other posts and see you next time :)

🌈 Find me on Instagram
🐙 Follow me on GitHub
⭐ Let’s connect on LinkedIn
🐦 Follow me on Twitter

My other blog posts

• Web Scraping with Python — Part 1
• My Internship at Shopify ❤️
• Creating an Instagram clone with Flutter 😱