2020 has been a tough, frail year. Last week, I joined many people who were laid off. Still I’m grateful for the good things that came out like Dreamland and CI with GitHub Actions for Ember Apps.
With GitHub Actions, I cut down CI runtimes for work projects to 3-4 minutes (with lower variance and more tests since March). I also noticed more and more Ember projects switching to GitHub Actions so I felt like a pioneer.
Today, I want to patch my original post and cover 3 new topics:
I will assume that you read Part 1 and are familiar with my workflow therein. Towards the end, you can find new workflow templates for Ember addons and apps.
Hacktoberfest is coming up. If you’re new to open source contribution and unsure how to help, may I suggest refactoring code? You can provide a fresh perspective to unclear code and discover ways to leave it better than you found.
There are 3 refactoring techniques that I often practice:
Rename things
Remove nests
Extract functions
Knowing how to apply just these 3 can get you far. I’ll explain what they mean and how I used them (or should have used them) in projects.
A few months ago, my team and I introduced ember-fill-up to our apps. It worked well but we noticed something strange. Percy snapshots that were taken at a mobile width would show ember-fill-up using the desktop breakpoint. They didn’t match what we were seeing on our browsers.
For a while, we ignored this issue because our CSS wasn’t great. We performed some tricks with flex and position that could have affected Percy snapshots. Guess what happened when we switched to grid and improved the document flow. We still saw incorrect Percy snapshots.
On Friday, I published my first addon. It’s called ember-container-query. Becoming an addon author was one of my goals for 2020, so I’m especially proud of it and hope that you will find a good use.
Container queries aren’t new in Ember. My addon is based on Chad Carbert’s ember-fill-up from 2019. That, in turn, credits Andrey Mikhaylov’s ember-element-query from 2017. I even found a blog post from 2015, by Greg Babiars!
Simplicity is what makes ember-container-query different from the previous tries. I combined 2 atomic solutions (modifiers, introduced in Ember Octane) to arrive at the atomic solution to container queries.
Because I practiced code composition and provided the minimum necessary API, the benefits are twofold. I have fewer code to maintain, while you have a choice to build your code on top of my addon or another with a similar API.
Testing is the second differentiator. With every code change, the CI checks that my addon and demo app work no matter the window size. Testing multiple windows is kinda important for container queries.
To my knowledge, no Ember app or addon has tried testing multiple windows and publicly released their solution. In the next article, I will go over how you can update the default test setup to achieve this feat.
Lately I’ve been working on Ember Music, an app that I can use as a playground to test addons and ideas in Ember. When I need to write a blog post, I can reach for this app instead of designing a new one each time. Since the app will grow over time, I wanted to introduce continuous integration (CI) and continuous deployment early.
Heroku Dashboard makes deploying code on GitHub simple. From the Deploy tab, you select GitHub, find your repo, then check “Wait for CI to pass before deploy.”
Heroku makes deploying code on GitHub simple.
For continuous integration, I tried out GitHub Actions since it is free (there are limits to minutes and storage for private repos) and my code is on GitHub. I also wanted to find an alternative to Codeship Pro that I use for work. One app has about 150 tests, but CI time wildly varies between 3 and 15 minutes. Because ten minutes is how long CI took for a larger app that I had worked on, I haven’t been content.
With GitHub Actions, I was able to make a workflow that did everything I want:
In this blog post, I will share my workflow because there is a high chance that you, too, want to solve the problems listed above. Rather than dumping the entire workflow on you, I will start with a simple one and let it organically grow. Throughout, I will assume that you use yarn to manage packages. If you use npm, please check the GitHub Gist at the end to see the differences.
crunchingnumbers(a)live 
You must be logged in to post a comment.