The Ember Times - Issue No. 128

Happy Friday the 13th 👻, Emberistas! 🐹

Updates for the Octane/Classic Ember Cheat Sheet 🎮, check out the new accessible controls for ember-sortable 🎛️, introduce adaptive loading to your app with Ember Device 📶, a new testing codemod from Freshworks 🎉, and more DecEmber 📆 updates!

New Release of the Octane vs Classic Cheat Sheet 🎮

Ember's first edition, Ember Octane, is around the corner. And did you already know that you can find all the cheat codes you will ever need to master your move from classic Ember apps to Octane ones in this official cheat sheet? It compares many of the APIs, patterns and best practices that you might already be familiar with from the classic Ember world to the new paradigms used in Octane applications.

In the past weeks plenty of community members worked on getting the cheat sheet ready for the upcoming launch of Ember Octane. Recently, they added information on how the Data Down, Actions Up pattern compares between classic and Octane apps, template co-location, how to migrate when using Mixins and much more. Check out the cheat sheet today!

Last, but not least, we would like to not only thank those who worked on the latest update of the Ember Octane vs Classic Cheat Sheet, but also everyone else who made this valuable learning resource a reality previously: a huge thank you 💖 goes to the contributors Jen Weber (@jenweber), Melanie Sumner (@MelSumner), Venus Ang (@venusang), Rajasegar Chandran (@rajasegar-c), David Baker (@acorncom), Peter Wagenet (@wagenet), Robert Wagner (@rwwagner90), Chris Garrett (@pzuraq), Eli Flanagan (@efx) and L. Preston Sego III (@NullVoxPopuli)!

Want to contribute to the cheat sheet yourself? Check out the project on Github and chat with other contributors on the #dev-ember-learning channel on the Ember Discord!

Accessible Controls for ember-sortable 🎛️

Yicheng (Jerry) Gong (@ygongdev) wrote a blog post that documented the process on how we now have accessible controls for ember-sortable, an open source drag and drop list sort Ember addon.

Unfortunately there was not a well-defined standard for making accessible drag and drop controls from organizations such as the WCAG. He turned to Andrew A Lee (@drewlee) who created a comprehensive list on what accessible features should be expected on a drag and drop utility and even a CodePen demo. These accessible controls have now landed as part of the 2.0.0 release of the ember-sortable addon. Check out the accessible controls at the demo page today!

As part of this work, ember-sortable is now part of adopted-ember-addons, which is a GitHub org where community members can find a new home for their Ember addon. Moreover, ember-sortable was also highlighted on DecEmber Day 1!

Introduce Adaptive Loading to Your App with Ember Device 📶

With Ember Device, you can progressively deliver rich content and powerful web experiences. Thanks to Gokul Kathirvel (@gokatz), you can provide as much value to users with low-end devices as to users with high-end devices. 💯

Ember Device provides a device service so that you can gauge a user's device and network to decide what content to show.

{{#let this.device.networkStatus.effectiveConnectionType as |effectiveType|}}
  {{#if (eq effectiveType "slow-2g")}}
    <ImageLoader @resolution="low" />

  {{else if (eq effectiveType "2g")}}
    <ImageLoader @resolution="mid" />

  {{else if (eq effectiveType "3g")}}
    <ImageLoader @resolution="high" />

  {{else if (eq effectiveType "4g")}}
    <VideoLoader />

  <!-- Fallback -->
  {{else}}
    <ImageLoader @resolution="mid" />

  {{/if}}
{{/let}}

To learn more about adaptive loading, we encourage you to check out Ember Device's documentation and Sivasubramanyam A (@astronomersiva)'s blog post!

A New Testing Codemod from Freshworks 🎉

mocha-to-qunit, the latest codemod from Freshworks, helps you migrate a production test suite from Mocha to QUnit. We encourage you to try it out and contribute back to the project!

You can find all codemods by Freshworks on their GitHub repo.

DecEmber: An Addon a Day 📆

DecEmber is going strong, highlighting a new addon each day until the calendar turns! Check out the latest DecEmber posts, covering addons such as ember-auto-import, ember-cli-sass, and ember-simple-auth.

Contributors' Corner 👏

This week we'd like to thank @rwjblue, @Gaurav0, @runspired, @dmuneras, @locks, @psbanka, @ctjhoa, @samselikoff, @abel-n, @lolmaus, @acorncom, @amyrlam, @pzuraq, @jenweber, @chancancode, @stefanpenner, @Turbo87 for their contributions to Ember and related repositories! 💖

Got a Question? Ask Readers' Questions! 🤓

Wondering about something related to Ember, Ember Data, Glimmer, or addons in the Ember ecosystem, but don't know where to ask? Readers’ Questions are just for you!

Submit your own short and sweet question under bit.ly/ask-ember-core. And don’t worry, there are no silly questions, we appreciate them all - promise! 🤞

#embertimes 📰

Want to write for the Ember Times? Have a suggestion for next week's issue? Join us at #support-ember-times on the Ember Community Discord or ping us @embertimes on Twitter.

Keep on top of what's been going on in Emberland this week by subscribing to our e-mail newsletter! You can also find our posts on the Ember blog.

That's another wrap! ✨

Be kind,

Chris Ng, Isaac Lee, Jessica Jordan, Amy Lam and the Learning Team