The Ember Times - Issue No. 189

👋 Emberistas! 🐹

RFC: Asset Import Spec, ember-element-query v4, EmberFest 2021 - best of both worlds, Glimmer cheatsheet, and Glimmer Apollo v0.4.0.

---

✍️ RFC: Asset Import Spec

Edward Faulkner (@ef4) proposed a new RFC which defines the standard semantics for what it means to depend on files that are not JavaScript or CSS, like images, fonts, and other media. The ecosystem today mostly relies on broccoli-asset-rev which is a Broccoli plugin that adds fingerprint checksums and CDN URLs to your assets. The RFC argues that the broccoli-asset-rev plugin does not take advantage of the newer capabilities we have in ember-auto-import and embroider. The proposed pull-based design lets code declare what assets it needs and then not worry about how those assets will get delivered is safer and easier to change in the future.

import myImage from './hello.png';

class extends Component {
  myImage = myImage
}

<img src={{this.myImage}} />

If this is something you are interested in, please read and discuss the Asset Import Spec RFC on GitHub!

---

✨ ember-element-query v4

Andrey Mikhaylov (@lolmaus) announced the release of ember-element-query v4, a complete rewrite for Octane with a new convenient API.

Element queries are a technique to do responsive transformations based on the element's own size, rather than the viewport size. You can implement reusable responsive components with encapsulated styles, that are decoupled from their parent context. Such components will realign their content depending on how much space is available to them.

For example, if you put a responsive component into a tight sidebar, it will align its content vertically. When the sidebar expands, the component will realign horizontally, in order to efficiently use available space. Check out Element Queries, And How You Can Use Them Today on Smashing Magazine to learn more.

Historically, ember-element-query was the first Ember addon to offer element queries out of the box, but back then it used an inefficient implementation and was written in the now-outdated Classic Ember paradigm. It served as one of inspirations for Chad Carbert's (@chadian) ember-fill-up. Announced at EmberFest 2019 as a proof-of-concept, ember-fill-up saw no updates and was discontinued.

The first element query addon to be released with feature completeness, full test coverage and lasting support was Isaac Lee's (@ijlee2) ember-container-query, featured in The Ember Times #153. The re-release of ember-element-query followed suit with a subjectively more convenient, opinionated API, backed by modern, efficient ResizeObserver under the hood. @ijlee2 provided kind support, criticism and generously shared the demo app with @lolmaus's ember-element-query.

Check out the detailed README and give the addon a spin!

---

🏛️ EmberFest 2021 - best of both worlds

Next week, after a year of absence because of COVID, EmberFest is back. On the 30th of September and the 1st of October, Emberistas will gather digitally and on-site in Rome to hear awesome Ember talks.

There will be well-known EmberConf/Fest speakers like Melanie Sumner (@MelSumner) and Edward Faulkner (@ef4), as well as first-time speakers like Bartlomiej Dudzik (@BobrImperator), Jenny Judova (@JennyJudova), and Zoë Bijl (@ZoeBijl). The line-up is super diverse and interesting for all Ember enthusiasts.

Remote tickets are still available. A few on-site tickets too, if you plan on arriving at the last minute. We hope you enjoy EmberFest wherever you decide to join.

---

⚡️ Glimmer Cheatsheet

If you've ever found the Ember Octane vs Ember Classic Cheat Sheet cheatsheet helpful, and you're also interested in Glimmer.js, you might want to check out the in-progress and exciting, but unofficial, Glimmer Cheatsheet that NullVoxPopuli (@NullVoxPopuli) recently started to put together.

So far only part of the templates page has been written, but if you're interested in contributing there is a rough outline and placeholder i18n to help get you started.

Take a look at the GitHub repo or the deployed app for more!

---

📈 Glimmer Apollo v0.4.0

Josemar Luedke (@josemarluedke) recently released a new v0.4.0 of Glimmer Apollo that includes support for subscriptions! 🔥

If you haven't checked out Glimmer Apollo and you would like to make use of Apollo to access GraphQL data in your Glimmer or Ember app, you should take a look at this exciting project and give the docs a read.

---

👏 Contributors' corner

This week we'd like to thank Davide Ferrero (@davideferre), Chris Krycho (@chriskrycho), Alex Kanunnikov (@lifeart), Ben Tidy (@tben), Andreas Minnich (@enspandi), @StephanH90, @NullVoxPopuli, Jeff Keen (@jkeen), Nathaniel Furniss (@nlfurniss), Ruslan Hrabovyi (@ro0gr), Robert Wagner (@rwwagner90), James Herdman (@jherdman), @colenso, Bryan Mishkin (@bmish), Chris Ng (@chrisrng), Scott Newcomer (@snewcomer), Anne-Greeth Schot-van Herwijnen (@MinThaMie), Robert Jackson (@rwjblue), Isaac Lee (@ijlee2), Giles Thompson (@gilest), Kirill Shaplyko (@Baltazore), Charles Fries (@charlesfries), Ricardo Mendes (@locks), Jacob (@jfdnc), Katie Gengler (@kategengler), Jen Weber (@jenweber), Max Fierke (@maxfierke), Raido Kuli (@raido), Amy Lam (@amyrlam), Sylvain Mina (@sly7-7), Darius Dzien (@ddzz), Jared Galanis (@jaredgalanis), and Nathanaël Dekeister (@ndekeister-us) for their contributions to Ember and related repositories! 💖

---

🤓 Connect with us

---

That's another wrap! ✨

Be kind,

Chris Ng, Anne-Greeth Schot-van Herwijnen, Jared Galanis, Amy Lam, and the Learning Team