The Ember Times - Issue No. 149

May 22, 2020 – By Matthew Roderick, Chris Ng, Amy Lam, Abhilash LR, Jared Galanis, Jesse Jordan

🏄‍♂️ Emberistas! 🐹

Ember Engines acceptance testing guides 📝, check out the new EmberMap video on Tracked Properties 👣, polyfills for in-element and named blocks 🚀, setting up Coveralls for your Ember addons 💪, Ember in COVID-19 research 🔬📖🐹, Global Accessibility Awareness Day Ember blog post 📖🐹, "My Experience with Ember.js" video series 🎥, and last, but not least, read the prettiest RFC in Emberland 💅!

Ember Engines acceptance testing guides & Octane 📝

Michael Villander (@villander) and team have fleshed out docs about the acceptance test story in the Ember Engines ecosystem, touching on some bleeding-edge cases. Also, the entire doc examples were migrated to Ember Octane! Visit the official site to see Ember Engines' new acceptance testing guides. Many thanks to Dan Gebhardt (@dgeb), Gabriel Csapo (@gabrielcsapo) and Thomas Gossmann (@gossi) for their reviews and tips!

Using Ember Engines? Chat about it in the #ember-engines channel on the Ember Discord.

EmberMap: Tracked Properties 👣

A new EmberMap video covers Tracked Properties – a new way to access and mutate state in Ember with vanilla JavaScript.

While we have been able to use native ES5 getters for accessing properties (this.isOpen), we still had to rely on calling this.set to mutate state. Tracked properties allow us to drop using this.set and instead use native setters (this.isOpen = true;) by annotating the properties we want to track.

Classic syntax:

import { tracked } from "@glimmer/tracking";

export default Component.extend({
  isOpen: tracked({ value: false }),
});

Octane syntax:

import { tracked } from '@glimmer/tracking';

class Person {
  @tracked firstName;
  @tracked lastName;

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

Tracked properties also allow us to use native JavaScript getters as a replacement for computed properties by having dependent keys tracked. So try it out today in your app and vastly simplify the programming model by moving closer to native JavaScript language constructs.

Check out the full video on EmberMap!

Polyfills for in-element and named blocks 🚀

Right now you can get a sneak peek in canary of public API {{in-element}} and yieldable named blocks.

What is {{in-element}}? Sometimes developers need to render content outside of the regular HTML flow. This concept is also called "portals". Components like dropdowns and modals use this technique to render stuff close to the root of the page, so as to bypass CSS overflow rules. (Some apps that are embedded into static pages even use this technique to update parts of the page outside the app itself.)

Since it was a common use case, Glimmer baked {{-in-element}} into the VM, but as part of the private (or intimate) API. With the passing of the RFC, it's going public, perhaps in Ember 3.20. So if you've been using {{-in-element}}, you should switch to the {{in-element}} polyfill instead, like Krystan HuffMenne (@gitKrystan) did for these couple of addons: ember-cli-head and ember-maybe-in-element.

The yieldable named blocks RFC makes it possible to pass one block or more to a component for customization. Check out the new ember-named-blocks-polyfill to take advantage of this feature now!

Setting up Coveralls for your Ember addons 💪

Rajasegar Chandran (@rajasegar) blogs about setting up Coveralls for your Ember addons. He explains how to setup ember-cli-code-coverage and Coveralls for your repositories. Coveralls help you deliver code confidently by showing which parts of your code aren’t covered by your test suite. You can also learn how to use these techniques and make it part of your workflow using Github Actions.

Check out the blog post!

Ember in COVID-19 research 🔬📖🐹

Johns Hopkins University (JHU) has announced new COVID-19 related features available in their Public Access Submission System (PASS).

PASS (which is built using Ember.js on the frontend!), is a platform to assist researchers 🔬🧪📖 in complying with the access policies of their funders and institutions and is created by the Sheridan Libraries at JHU, in collaboration with the Harvard University Office for Scholarly Communication and the MIT Libraries.

As a recent article at JHU's news center the Hub has pointed out, "Through modifications to the Public Access Submission System (PASS), faculty or their proxies can now submit articles flagged specifically for [the] JHU COVID-19 collection."

It is so encouraging to see yet another example of Ember being used in applications that support important research for public good. 😍🐹

Global Accessibility Awareness Day Ember blog post 📖🐹

Did you know that May 21st was Global Accessibility Awareness Day? Well now you know 😃!

You may not have seen the recent blog post commemorating the occasion and discussing accessibility in Ember. 🎉 The post includes lots of great information about how the community, the Ember core team and Ember's A11y Strike Team are working to support an accessible web. 💙💚💛💜

You should head on over to the blog post for more details on what you can do to get involved or how to make your Ember applications more accessible.

If you have accessibility related questions you can head on over to the community Discord chat in the #topic-a11y channel, and get answers and help right away.

Or, if you're interested in getting involved in Ember's A11y Strike Team, checkout the #st-a11y channel on Discord, and let us know! The meetings are also open to anyone who wants to attend.

Big shout out to Mel Sumner (@MelSumner) for putting all that valuable accessiblity-related information together!

"My Experience with Ember.js" video series 🎥

Cal Woolgar (@calWoolgar) has kicked off a new video series "My Experience with Ember.js", where he breaks down the basics of Ember.

The first video What is Ember.js? explains the Handlebars templating language and how it separates your JavaScript from HTML. Cal also touches on ember-cli, and how it enabled you to create a new application easily.

Cal aims to make his videos short and sweet 🍭 so that someone learning can reference something in bite-sized pieces. Look forward to what's next from Cal! 👏

The prettiest Ember RFC 💅

By default, ember-cli already provides developers with plenty of tools and settings for linting and formatting of app code via eslint and ember-template-lint. But what if you could come to an agreement on some of the most significant bike-shedding disputes in your team once and for all, including discussions about tabs vs. spaces or the need for the newline at the end of a file?

In the Request for Comments (RFC) we get to have a peek into the possible, even prettier future for Ember codebases already! The proposal suggests to add Prettier - a multi-language, opiniated code-formatter - to Ember apps generated from ember-cli's app and addon blueprints.

Want to learn more about how this could help you and your team to collaborate on your code even better? Then be sure to give the original RFC a read soon, as it entered the Final Comment Period (FCP) recently. And don't forget to post your questions and suggestions in the comments below the RFC PR, pretty please!

That's another wrap! ✨

Be kind,

Matthew Roderick, Chris Ng, Amy Lam, Abhilash LR, Jared Galanis, Jessica Jordan and the Learning Team