Container Queries: Cross-Resolution Testing

Failure to test is why I started to work on ember-container-query.

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.

Continue reading “Container Queries: Cross-Resolution Testing”

Container Queries: Adaptive Images

A powerful application of container queries is adaptive images. It’s about striking the balance between displaying an image that looks good (the larger the better) and one that loads fast (the smaller the better).

Currently, we are limited to srcset, which selects the optimal image based on the global screen size. This may work for splash images that cover the whole width, but what about images that we show in a partial area?

Continue reading “Container Queries: Adaptive Images”

Container Queries: Reimagined

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.

In the meantime, I encourage you to learn what container queries can do for you and get inspiration from my demo app. The code is publicly available on GitHub.

Prototyping Apps with Ember Octane: Behind the Scenes

On Saturday, I presented Ember Octane to Austin Code Mentorship. I had been hesitant about organizing the workshop (what if no one shows up?). Thankfully, 6 people joined for the whole session, while some more stopped by. In one hour, we prototyped an e-commerce app where a user can view products before making a purchase decision.

Products page for an e-commerce app

This post primarily serves as a retro doc for myself, but also welcomes two audiences. If you are new to Ember and can follow a tutorial without guidance, you can skip to the end. There, you will find instructions and links to the base and finished projects. If you want to run a workshop or onboard a developer, what follows next is for you.

Continue reading “Prototyping Apps with Ember Octane: Behind the Scenes”

Rewriting Apps in Ember Octane

Last Friday, Ember 3.15 was dubbed the Octane edition. To see how easy (and fun) writing an Octane app is, I spent the weekend rewriting my apps Ember Animated (v3.8) and Lights Out (v2.18). Let me share what I learned.

If you have tutorials and demo apps, I encourage you to rewrite them in Octane. You can publish both versions to help everyone understand how the programming model in Ember has evolved over time.

Continue reading “Rewriting Apps in Ember Octane”