Ember Times-Issue 141


👋 Humanitarian! 🐹

Yehuda’s Octane tutorial🔥, quick tips for refactoring templates📑, in-depth study of corner and curly brace calls🔍, use Percy to more easily port the website✨, Feeder Corona dashboard📰, tracking JavaScript built-in classes💯, Ember automatic storage modifier 💾, read about how to use ember-template-lint rules from plugin✅, decorator positioning can now be enforced↕️, and last but not least, the independent EmberConf 2020 video has been released🎥!


There is a great new Octane tutorial in town🤠, it was written by ourselves Yehuda Katz (@wycats)! ! !

In this tutorial, you will build a schedule page for meetings such as EmberConf. After our amazing virtual EmberConf 💙💚💛💜🧡, it feels like the right thing.

The first part of this tutorial, Let’s go, Starting from the content not covered by all JavaScript tutorials, HTML and CSS, using CSS Grid and Flex. You will learn how to go from simulation to deployed application in a very short time.

The second part of the tutorial, Component, Is also out, it covers refactoring out some HTML repetitions. It is a good introduction to how to use components and lists to reduce duplication.

So far, 7 positions are planned to be released:

  • Let’s go
  • Component
  • Pull data
  • Airworthiness time
  • Clean things up
  • Add more pages
  • Optimization: server-side rendering, pre-rendering and code splitting

So please pay attention to more information 👀 in this very useful new series!


Abhilash L Ramesh (@abhilashlr) Wrote a small and clear Blog post Provide actionable tips to make your Ember templates cleaner.So if you have complicated if-else If you want to be clearer about the logic in the template, this blog post can help you.

He also added some additional bonus tips, but no spoiler Here, go to Blog post Check it out!


From Yehuda and Abhilash’s blog posts, you can learn how some templates work. But we provide you with an additional resource!

@ 0xADADA with Dan Freeman (@dfreeman) Made a In-depth study of classic and angle bracket calls. Please review to understand how these calls handle attributes and parameters in different ways.


You may already be a frequent visitor to the site Ember guide. But did you know? #1 learning site for Ember developers Used to be powered With Ruby and Middleman? After a lot of contributions from many different community members, the application Has been modernized with Ember technology stack Make it easier for new contributors project!

You may not have noticed the technology stack switch under the hood of the Ember guide, and this is exactly how it should be! Want to learn more about how this is done?Please be sure to read Chris Manson (@mansona) Newest Blog post About the process behind seamless Ashes of the guide (And Ember website): It highlights how visual regression testing tools Percy It can help developers guide their efforts to port the site to a new technology stack without destroying the site.

You can read the full blog post On the simlabs blog.


Feeder Established 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 can track any online resource you choose and bundle it into an easy-to-understand reading experience. The Corona dashboard is built using Feeder’s regular stack, which ingests public RSS feeds and filters on a set of keywords.

Eric Rotov Anderson (@erkie) Share the experience of Feeder and Ember with Times:

We started with Ember 2.10, now it is Ember 3.14 and it is still increasing. Upgrades help educate us on how to become better developers, which is really cool. One notable thing is the a11y template linting rule that promotes best practices. I don’t know these things, but now I know! So thank you Ember.

We have used pods from the beginning, but I tripped over all the tabs in Atom being called component.js, Or template.hbsAnd that’s why I developed Atom plug-in Ember tag. One day I scrolled through the ember-cli documentation and I found it was really nice to mention Here. So far, I have not kept up with the latest situation of module unification, but it looks promising!

TypeScript is the biggest innovation in years, and the ember-cli-typescript plug-in is a great bridge.Nice to see a lot Ember internal bag It is now written entirely in TypeScript.

We render a lot of components on the screen, so performance has always been something we invest a lot of time in. By switching a large number of components to Glimmer components, we were able to reduce the rendering time of hotspots by about 20%.

We are very happy to learn about Ember on Feeder, and hope you find the Corona dashboard useful during these busy times! 💛


In his EmberConf speech, “Auto tracking: Reactivity and status in the modern Ember,” Chris Garrett (@pzuraq) Announcing a new plugin to help you keep track of JavaScript’s built-in classes.

with Tracking built-in plugins, Your application can automatically react to changes in objects, arrays, maps, collections, 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);
}

Try it today! Your feedback will help improve automatic tracking in Ember. 💞


New modifier alert🚨! Preston Sego (@NullVoxPopuli) created ember-autostash-modifier Hide the changes, bind them to a key, and restore these changes based on that key!

This modifier is useful for chat applications, where you want to keep unfinished messages on the contact page, and the user navigates between other contacts before completing and submitting the message, or you want to bind component data based on the URL.see this Demo The role of the modifier.

It’s great to see the Ember modifier ecosystem continues to evolve 😀, and we can’t wait to see what those great people in the Ember community will come up with next!


Mehul Kar (@mehulkar) Wrote a Blog post About how to ship and use Embers template lint Rules from plugins.

First of all, the Plugin API has summarized ember-template-lint The plugin system, including where to add them, or it can be the root directory of the repository where the blog is displayed.To test your template lint rules, a blog post outlines how to use Yes And configure it to be in node-tests table of Contents.Finally, in order to use the plugin in the application, we need to add the plugin and enable lint rules .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 Full blog post And have a A powerful way to encourage a certain way of programming Nowadays!


Had to endure The position of the decorator in the pull request is inconsistent because there is no lint rule?
right now Have! 🎉 eslint-plugin-decorator-position
Provide some configurations with some recommended default values ​​to help your project achieve the last point of consistency.


If you missed part or all ✨✨Amazing EmberConf 2020 ✨✨, now you have the opportunity to learn about all the wonderful single-point speeches! Although live broadcasts have been available since the date of the live broadcast, you can now watch them as independent lectures.

If you want to relive some of the best moments, or watch them for the first time, you can find a complete video library📼 for you to watch YouTube. Don’t miss the BonusConf conferences included in this list!

Again, don’t forget to check all relevant resources to Minutes of the meeting after Alex DiLiberto (@alexdiliberto).

One more reminder!We have a requirement for people attending the meeting EmberConf 2020:

Tell us the new people you have to chat in a virtual meeting!

Tell us your answer to this question in the following way Tweet us via Twitter use Tag #EmberConFriends Or as a message Man disharmony inside #support-ember-times channel.We will exclusive draw EmberConf Retro Sticker Set Be one of all story authors by April 6, 2020. We look forward to hearing from you and are happy to catch up with the virtual EmberConf!


This week we want to thank @pzuraq, @lock, @rwjblue, @btecu, @kratiahuja, @Gaurav0, @kturney, @chancancode, @leondmello, @zapalagrzegorz, @monitron, @梅尔sumner, @jtappa, @brentzc, @skaterdav85, @NullVoxPopuli, @rajasegar with @xg-wang Thanks for their contributions to Ember and related repositories! 💖


Want to know about Ember, Ember Data, Glimmer, or plugins in the Ember ecosystem, but don’t know where to consult? Readers’ questions are only answered for you!

Submit your own Short and sweet problem under bit.ly/ask-ember-coreDon’t worry, there are no stupid questions, we thank them-guaranteed! 🤞


Want to write for Ember Times? Any suggestions for next week’s problem?join us #support-ember-times in Ember community discord Or ping us @embertimes On Twitter.

Subscribe to our channel to get the latest news from Emberland this week Email newsletter!You can also find our posts in the following locations People Blog.


That is another package! ✨

Be kind,

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



Leave a Reply

Your email address will not be published. Required fields are marked *