Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The Ember Times No. 141 - March 27th 2020 #578

Merged
merged 36 commits into from
Mar 28, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
75aa77c
Set up new issue
amyrlam Mar 21, 2020
a6e5f0b
Adds Ember Autostash Modifier
jaredgalanis Mar 27, 2020
5809e40
Adds Yehuda's Octane Tutorial Blog Posts
jaredgalanis Mar 27, 2020
7d61546
add missing intro
jaredgalanis Mar 27, 2020
fd425bd
Update 2020-03-27-the-ember-times-issue-141.md
MinThaMie Mar 27, 2020
9938cd2
Adds Stand Alone EmberConf 2020 Videos
jaredgalanis Mar 27, 2020
9522958
Update source/2020-03-27-the-ember-times-issue-141.md
MinThaMie Mar 27, 2020
23af963
add decorator position blurb
NullVoxPopuli Mar 27, 2020
bc07ce4
add myself as author
NullVoxPopuli Mar 27, 2020
5cd0341
you would think i'd have learned my lesson by now
jaredgalanis Mar 27, 2020
0bd3e02
One to many spaces :D
MinThaMie Mar 27, 2020
bed334c
change location of name
NullVoxPopuli Mar 27, 2020
e3206f2
read the instructions, Jared
jaredgalanis Mar 27, 2020
7fa87c2
Merge pull request #582 from ember-learn/refactor-template-write-up
jaredgalanis Mar 27, 2020
d890594
Merge branch 'blog/embertimes-141' into add-yehuda-blog-tutorial
jaredgalanis Mar 27, 2020
28655d1
Merge pull request #581 from ember-learn/add-yehuda-blog-tutorial
jaredgalanis Mar 27, 2020
53c76f5
Merge branch 'blog/embertimes-141' into ember-conf-videos
jaredgalanis Mar 27, 2020
a53eac7
Merge pull request #583 from ember-learn/ember-conf-videos
jaredgalanis Mar 27, 2020
69f4661
Merge branch 'blog/embertimes-141' into ember-autostash-modifier
jaredgalanis Mar 27, 2020
320ae37
Merge pull request #580 from ember-learn/ember-autostash-modifier
jaredgalanis Mar 27, 2020
5265e6e
Merge branch 'blog/embertimes-141' into decorator-position
NullVoxPopuli Mar 27, 2020
f566976
Merge pull request #584 from NullVoxPopuli/decorator-position
ijlee2 Mar 27, 2020
71179d5
Covered the v1 release of tracked-built-ins
ijlee2 Mar 27, 2020
d650942
Update source/2020-03-27-the-ember-times-issue-141.md
ijlee2 Mar 27, 2020
1b591b3
Merge pull request #585 from ijlee2/blog/embertimes-141
ijlee2 Mar 27, 2020
3feee5f
blog(embertimes141): blogpost ember template lint (#586)
chrisrng Mar 27, 2020
3f21332
Covered blog post on classic vs. angle bracket invocation
ijlee2 Mar 27, 2020
08c4960
Update source/2020-03-27-the-ember-times-issue-141.md
ijlee2 Mar 27, 2020
33a8a34
Merge pull request #587 from ijlee2/blog/embertimes-141
ijlee2 Mar 27, 2020
fa5923f
blog(embertimes#141): writeup on @mansona s blog post about site porting
jayjayjpg Mar 27, 2020
26b2a45
blog(embertimes#141): add contributors
jayjayjpg Mar 27, 2020
cf076e4
blog(embertimes#141): copy edits
jayjayjpg Mar 27, 2020
718d857
Merge pull request #588 from jessica-jordan/embertimes-jj4
jayjayjpg Mar 27, 2020
a70261b
Update 2020-03-27-the-ember-times-issue-141.md
amyrlam Mar 28, 2020
a7c3430
Change order of issue
amyrlam Mar 28, 2020
b3e1da7
final-ish edits
amyrlam Mar 28, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion source/2020-03-20-the-ember-times-issue-140.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: The Ember Times - Issue No. 140
author: Chris Ng, Jessica Jordan, Isaac Lee, Amy Lam
tags: Recent Posts, Newsletter, Ember.js Times, Ember Times, 2020
tags: Newsletter, Ember.js Times, Ember Times, 2020
alias : "blog/2020/03/20-the-ember-times-issue-140.html"
responsive: true
---
Expand Down
207 changes: 207 additions & 0 deletions source/2020-03-27-the-ember-times-issue-141.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
---
title: The Ember Times - Issue No. 141
author: Anne-Greeth van Herwijnen, Preston Sego, Jared Galanis, Isaac Lee, Chris Ng, Jessica Jordan, Erik Rothoff, Amy Lam
tags: Recent Posts, Newsletter, Ember.js Times, Ember Times, 2020
alias : "blog/2020/03/27-the-ember-times-issue-141.html"
responsive: true
---

πŸ‘‹ 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 πŸŽ₯!

READMORE

---

## [Yehuda's Octane tutorial πŸ”₯](https://yehudakatz.com/2020/03/25/ember-octane-lets-go/)

There's an awesome new Octane tutorial in town 🀠 and it's written by none other than our very own [Yehuda Katz (@wycats)](https://github.com/wycats)!!!

<!-- alex ignore just-->
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](https://yehudakatz.com/2020/03/25/ember-octane-lets-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](https://yehudakatz.com/2020/03/26/ember-octane-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](https://yehudakatz.com/2020/03/25/ember-octane-lets-go/)
- [Components](https://yehudakatz.com/2020/03/26/ember-octane-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 πŸ“‘](https://abhilashlr.in/ember-refactor-templates)

[Abhilash L Ramesh (@abhilashlr)](https://github.com/abhilashlr) wrote a small and clear [blog post](https://abhilashlr.in/ember-refactor-templates) 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](https://abhilashlr.in/ember-refactor-templates) to check them out!

---

## [Ember templates: classic vs. angle bracket syntaxes πŸ”](https://0xadada.pub/2020/03/20/ember-emplates-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](https://github.com/0xadada) and [Dan Freeman (@dfreeman)](https://github.com/dfreeman) did a [deep-dive into classic and angle bracket invocations](https://0xadada.pub/2020/03/20/ember-emplates-classic-vs-angle-bracket-syntaxes/). Please have a look to learn how these invocations handle attributes and arguments differently.

---

## [Tech stack modernisation without breaking things with Percy ✨](https://simplabs.com/blog/2020/03/27/porting-a-site-to-ember-with-percy/)

<!--alex ignore middleman-middlewoman-->
You might already be a regular visitor of the [Ember Guides](https://guides.emberjs.com/release/).
But did you know, that the **#1 learning site for Ember developers** used to be powered [with Ruby and Middleman](https://github.com/emberjs/guides)? After plenty of contributions by many different community members, the app [has been modernised with an Ember tech stack](https://blog.emberjs.com/2018/05/25/the-emberjs-times-issue-48.html) to make it much easier for new contributors to work on the [project](https://github.com/ember-learn/guides-source)!

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)](https://github.com/mansona) latest [blog post](https://simplabs.com/blog/2020/03/27/porting-a-site-to-ember-with-percy/) about the process behind the seamless **Emberification of the Guides** (and the Ember website): it highlights how the visual regression testing tool [Percy](https://percy.io/) 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](https://simplabs.com/blog/2020/03/27/porting-a-site-to-ember-with-percy/).

---

## [Feeder Corona Dashboard πŸ“°](https://feeder.co/reader/corona)

[Feeder](https://feeder.co/) 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](https://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)](https://github.com/erkie) from Feeder shares their 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 for 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](https://atom.io/packages/ember-tabs). Was really happy when scrolling through ember-cli docs one day and found it mentioned [here](https://ember-cli.com/user-guide/#atom). 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](https://github.com/emberjs/ember.js/tree/master/packages/@ember/-internals/glimmer) 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! πŸ’―](https://twitter.com/pzuraq/status/1240069037364633600)

At his EmberConf talk, "[Autotracking: Reactivity and State in Modern Ember](https://www.youtube.com/watch?v=HDBSU2HCLbU&list=PL4eq2DPpyBbkC03mdzlyej6tcbEqrZK8N)," [Chris Garrett (@pzuraq)](https://github.com/pzuraq) announced a new addon to help you track JavaScript's built-in classes.

With [tracked-built-ins](https://github.com/pzuraq/tracked-built-ins), your app can automatically react to changes in Objects, Arrays, Maps, Sets, WeakMaps, and WeakSets.

```javascript
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](https://github.com/pzuraq/tracked-built-ins)! Your feedback will help improve autotracking in Ember. πŸ’ž

---

## [Ember autostash modifier πŸ’Ύ](https://twitter.com/nullvoxpopuli/status/1239325059656933376)

New modifier alert 🚨! [Preston Sego (@NullVoxPopuli)](https://github.com/NullVoxPopuli) has created [`ember-autostash-modifier`](https://github.com/NullVoxPopuli/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](https://nullvoxpopuli.github.io/ember-autostash-modifier/1) 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 βœ…](https://mehulkar.com/blog/2020/03/ember-template-lint-rule-from-addon/)

[Mehul Kar (@mehulkar)](https://github.com/mehulkar) wrote a [blog post](https://mehulkar.com/blog/2020/03/ember-template-lint-rule-from-addon/) on how to ship and use an [ember-template-lint](https://github.com/ember-template-lint/ember-template-lint) rule from an addon.

First up, the [Plugin API](https://github.com/ember-template-lint/ember-template-lint/blob/v2.4.1/docs/plugins.md) 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](https://jestjs.io/) 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).

```js
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](https://mehulkar.com/blog/2020/03/ember-template-lint-rule-from-addon/) and have a [powerful way to encourage a certain way of programing](https://twitter.com/mehulkar/status/1240020900960825345) today!

---

## [Achieve consistent decorator positioning with a new eslint plugin ↕️](https://github.com/NullVoxPopuli/eslint-plugin-decorator-position)

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](https://github.com/NullVoxPopuli/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 πŸŽ₯](https://www.youtube.com/playlist?list=PL4eq2DPpyBbkC03mdzlyej6tcbEqrZK8N)

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](https://www.youtube.com/playlist?list=PL4eq2DPpyBbkC03mdzlyej6tcbEqrZK8N). 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](https://twitter.com/alex_diliberto/status/1240449629612892161) by [Alex DiLiberto (@alexdiliberto)](https://github.com/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](https://twitter.com/embertimes) using the **hashtag #EmberConFriends** or as a message on the [Ember Discord](https://discordapp.com/invite/emberjs) 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 πŸ‘](https://guides.emberjs.com/release/contributing/repositories/)

<p>This week we'd like to thank <a href="https://github.com/pzuraq" target="gh-user">@pzuraq</a>, <a href="https://github.com/locks" target="gh-user">@locks</a>, <a href="https://github.com/rwjblue" target="gh-user">@rwjblue</a>, <a href="https://github.com/btecu" target="gh-user">@btecu</a>, <a href="https://github.com/kratiahuja" target="gh-user">@kratiahuja</a>, <a href="https://github.com/Gaurav0" target="gh-user">@Gaurav0</a>, <a href="https://github.com/kturney" target="gh-user">@kturney</a>, <a href="https://github.com/chancancode" target="gh-user">@chancancode</a>, <a href="https://github.com/leondmello" target="gh-user">@leondmello</a>, <a href="https://github.com/zapalagrzegorz" target="gh-user">@zapalagrzegorz</a>, <a href="https://github.com/monitron" target="gh-user">@monitron</a>, <a href="https://github.com/MelSumner" target="gh-user">@MelSumner</a>, <a href="https://github.com/jtappa" target="gh-user">@jtappa</a>, <a href="https://github.com/brentzc" target="gh-user">@brentzc</a>, <a href="https://github.com/skaterdav85" target="gh-user">@skaterdav85</a>, <a href="https://github.com/NullVoxPopuli" target="gh-user">@NullVoxPopuli</a>, <a href="https://github.com/rajasegar" target="gh-user">@rajasegar</a> and <a href="https://github.com/xg-wang" target="gh-user">@xg-wang</a> for their contributions to Ember and related repositories! πŸ’–</p>

---

## [Got a question? Ask readers' questions! πŸ€“](https://docs.google.com/forms/d/e/1FAIpQLScqu7Lw_9cIkRtAiXKitgkAo4xX_pV1pdCfMJgIr6Py1V-9Og/viewform)

<div class="blog-row">
<img class="float-right small transparent padded" alt="Office Hours Tomster Mascot" title="Readers' Questions" src="/images/tomsters/officehours.png" />

<p>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!</p>

<p><strong>Submit your own</strong> short and sweet <strong>question</strong> under <a href="https://bit.ly/ask-ember-core" target="rq">bit.ly/ask-ember-core</a>. And don’t worry, there are no silly questions, we appreciate them all - promise! 🀞</p>
</div>

---

## [#embertimes πŸ“°](https://blog.emberjs.com/tags/newsletter.html)

Want to write for the Ember Times? Have a suggestion for next week's issue? Join us at [#support-ember-times](https://discordapp.com/channels/480462759797063690/485450546887786506) on the [Ember Community Discord](https://discordapp.com/invite/zT3asNS) or ping us [@embertimes](https://twitter.com/embertimes) on Twitter.

Keep on top of what's been going on in Emberland this week by subscribing to our [e-mail newsletter](https://the-emberjs-times.ongoodbits.com/)! You can also find our posts on the [Ember blog](https://emberjs.com/blog/tags/newsletter.html).

---

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