The Ember Times - Issue No. 141

– By Anne-Greeth Schot-van Herwijnen, Preston Sego, Jared Galanis, Isaac Lee, Chris Ng, Jesse Jordan, Erik Rothoff, Amy Lam

👋 Emberistas! 🐹

Yehuda's Octane Tutorial 🔥, a quick tip for refactoring your templates 📑, dive into angle and curly bracket invocations 🔍, easier porting of websites with Percy ✨, Feeder Corona Dashboard 📰, track JavaScript's built-in classes 💯, Ember autostash modifier 💾, read about how to use a ember-template-lint rule from an addon ✅, decorator positioning now enforceable ↕️, and last, but not least, stand alone EmberConf 2020 videos are out 🎥!

Yehuda's Octane tutorial 🔥

There's an awesome new Octane tutorial in town 🤠 and it's written by none other than our very own Yehuda Katz (@wycats)!!!

In the tutorial you'll build the schedule page for a conference like EmberConf. It feels like just the right thing to build after our amazing virtual EmberConf 💙💚💛💜🧡.

The first part in this tutorial, Let's Go, begins with something that not all JavaScript tutorials cover, HTML and CSS, using CSS Grid and Flex. You'll learn how to go from mocks to a deployed app in very little time.

The second part of the tutorial, Components, is also out and it covers refactoring out some of the HTML duplication. It's a great introduction to how you can use components and lists to reduce repetition.

So far there are 7 posts planned:

  • Let's Go
  • Components
  • Pulling Out Data
  • Airtable Time
  • Cleaning Things Up
  • Adding More Pages
  • Polishing: Server-Side Rendering, Prerendering and Code Splitting

So be on the look out 👀 for more in this very helpful new series!

A quick tip for refactoring your templates 📑

Abhilash L Ramesh (@abhilashlr) wrote a small and clear blog post with actionable tips to make your Ember templates cleaner. So if you have complex if-else logic in your template that you would like to make clearer, this blog post could help you out.

He also added some extra bonus tips, but no spoilers here, head to the blog post to check them out!

Ember templates: classic vs. angle bracket syntaxes 🔍

From Yehuda and Abhilash's blog posts, you got to see a bit of how templates work. But we've got one additional resource for you!

@0xADADA and Dan Freeman (@dfreeman) did a deep-dive into classic and angle bracket invocations. Please have a look to learn how these invocations handle attributes and arguments differently.

Tech stack modernisation without breaking things with Percy ✨

You might already be a regular visitor of the Ember Guides. But did you know, that the #1 learning site for Ember developers used to be powered with Ruby and Middleman? After plenty of contributions by many different community members, the app has been modernised with an Ember tech stack to make it much easier for new contributors to work on the project!

You might not have noticed the switch of tech stacks under the hood of the Ember Guides, and this is exactly how it should be! Want to learn more about how this was done? Be sure to read Chris Manson's (@mansona) latest blog post about the process behind the seamless Emberification of the Guides (and the Ember website): it highlights how the visual regression testing tool Percy can help developers to bootstrap their efforts of porting a website to a new tech stack without breaking it.

You can read the full blog post on the simplabs blog.

Feeder Corona Dashboard 📰

Feeder built a COVID-19 aka Corona Dashboard in Ember, but for incoming news on the subject such as news media, government updates, research, social media, and travel advice. Check it out here: feeder.co/reader/corona.

Feeder is a news manager that tracks any online source you choose and bundles it into an easy-to-digest reading experience. The Corona Dashboard is built using Feeder's regular stack that ingests public RSS feeds and filters on a set of keywords.

Erik Rothoff Andersson (@erkie) shares Feeder's experience with Ember with the Times:

We started at Ember 2.10 and are now at Ember 3.14 and counting. It's so cool that the upgrades help to educate us how to become better developers. One striking thing is the a11y template linting rules that promote best practices. I had no idea about those things, but now I do! So thanks Ember.

We've used pods since the start, but I got tripped up by all the tabs in Atom being called component.js, or template.hbs, which is why I developed the Atom addon Ember tabs. Was really happy when scrolling through ember-cli docs one day and found it mentioned here. So far I haven't kept up to date with the module unification, but it seems promising!

TypeScript is the single biggest innovation in many years, and the ember-cli-typescript addon has been an amazing bridge. It's great to see that a lot of Ember internal packages are now written entirely with TypeScript.

We render a lot of components on screen, so performance has been something we've invested a lot of time in. Switching to Glimmer components for high volume components we were able to reduce render times on hotspots by ~20%.

We enjoyed learning about Ember at Feeder and hope that you find the Corona Dashboard useful in these hectic times! 💛

tracked-built-ins v1 released! 💯

At his EmberConf talk, "Autotracking: Reactivity and State in Modern Ember," Chris Garrett (@pzuraq) announced a new addon to help you track JavaScript's built-in classes.

With tracked-built-ins, your app can automatically react to changes in Objects, Arrays, Maps, Sets, WeakMaps, and WeakSets.

import { tracked } from 'tracked-built-ins';

class Foo {
  @tracked value = 123;

  obj = tracked({});
  arr = tracked([]);
  map = tracked(Map);
  set = tracked(Set);
  weakMap = tracked(WeakMap);
  weakSet = tracked(WeakSet);
}

Give it a try today! Your feedback will help improve autotracking in Ember. 💞

Ember autostash modifier 💾

New modifier alert 🚨! Preston Sego (@NullVoxPopuli) has created ember-autostash-modifier that stashes changes, binds those changes to a key, and restores those changes based on that key!

This modifier is useful for chat apps, where you'd want to persist incomplete messages on a contact's page while the user navigates between other contacts before finishing and submitting a message, or where you want to bind component data based on the URL. Check out this demo of the modifier in action.

It's so nice to see the eco-system of Ember modifiers continue to grow 😀, we can't wait to see what the awesome folks in the Ember community come up with next!

Blog post: ember-template-lint rule from addon ✅

Mehul Kar (@mehulkar) wrote a blog post on how to ship and use an ember-template-lint rule from an addon.

First up, the Plugin API provides an overview on the ember-template-lint plugin system including where to add them or it can be the root of the repo as the blog shows. In order to test your template lint rule, the blog post outlines how to use Jest and configure it to run tests in the node-tests directory. Finally, in order to use the plugin in an app we would need to add the plugin and enable the lint rule in .template-lintrc.js (like the example below).

module.exports = {
  plugins: ['my-addon-name/template-lint-plugin'],
  rules: {
    'the-rule-name': true
  }
}

To follow the detailed steps please read the full blog post and have a powerful way to encourage a certain way of programing today!

Achieve consistent decorator positioning with a new eslint plugin ↕️

Ever had to put up with inconsistent decorator positions in pull requests, because there wasn't a lint rule for that? Now there is! 🎉 eslint-plugin-decorator-position provides some configuration with some recommended defaults to help your project achieve that last bit of consistency.

Stand alone EmberConf 2020 videos are out 🎥

If you missed part or all of the ✨✨amazing EmberConf 2020 ✨✨, now's your chance to catch up on all the great talks à la carte! While the live streams have been available since the days they were streamed, now you can watch them as stand alone talks.

If you want to re-live some of the best moments, or watch them for the first time, you can find the complete library of videos 📼 available for your viewing pleasure on YouTube. Be sure not to miss the BonusConf sessions which are included in this list!

Again, don't forget to check out all the related resources for the talks in the conference notes by Alex DiLiberto (@alexdiliberto).

Also one more reminder! We have a request for those of you who attended EmberConf 2020:

Tell us about someone new that you got to chat with at the virtual conf!

Let us know about your answer to this question either by tweeting us via Twitter using the hashtag #EmberConFriends or as a message on the Ember Discord in the #support-ember-times channel. We will raffle an exclusive EmberConf retro sticker set among all story writers by April 6, 2020. We're looking forward to hear from you and happy catching up on virtual EmberConf!

Contributors' corner 👏

This week we'd like to thank @pzuraq, @locks, @rwjblue, @btecu, @kratiahuja, @Gaurav0, @kturney, @chancancode, @leondmello, @zapalagrzegorz, @monitron, @MelSumner, @jtappa, @brentzc, @skaterdav85, @NullVoxPopuli, @rajasegar and @xg-wang for their contributions to Ember and related repositories! 💖

Got a question? Ask readers' questions! 🤓

Office Hours Tomster Mascot

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,

Anne-Greeth van Herwijnen, Preston Sego, Jared Galanis, Isaac Lee, Chris Ng, Jessica Jordan, Erik Rothoff, Amy Lam and the Learning Team