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 π₯!
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.
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!
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.
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! π
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!
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).
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.
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!
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!
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! π€