The Ember Times - Issue No. 145

👋 Emberistas! 🐹

Ember Styleguide 4.0.0 release 🔥, autotracking case study with TrackedMap 🐾🗺, simple drag and drop in Ember Octane 🐺, meet 2 developers who became Ember developers 🎉, and last, but not least, watch the new EmberMap video on the {{fn}} helper 📺!

---

Ember Styleguide 4.0.0 release 🔥

A new Ember Styleguide release was cut today 🛳 and it represents a massive amount of work by a number of contributors over the last year: 372 commits, 719 files and 13 contributors to be exact! 😱 Check out the app here on the web as well.

To see any of the individual changes, please look at the pre-release versions in the changelog. The changes are too many to capture here, but here are a few of the high level overviews:

• Remove ember-cli-addon docs in favor of field-guide for better SEO
• Remove components that are not actively being used in any project
• Implement base styles that are common across all of the Ember websites
• Implement common CSS helpers for things that don't need a dedicated component
• Upgrade most of the remaining components to Glimmer components
• Streamline the CSS build pipeline to remove duplicate CSS and improve its Lighthouse score

Chris Manson (@mansona), Mel Sumner (@MelSumner), Florian Pichler (@pichfl) and so many more deserve huge props 🙌🙌🙌 for this milestone release that will support development in all the Ember web properties! 🎉

---

Autotracking case study with TrackedMap 🐹

In the latest edition of his blog post series on autotracking in Ember Octane, Ember Core team member Chris Garrett (@pzuraq) gives us insight into an interesting case study to explore the new reactivity model in Ember Octane even further. He outlines how to build a TrackedMap - an autotracked version of JavaScript's built-in Map class - and why building and using such a class will improve the developer ergonomics and performance of our Ember apps.

Curious to learn more? Read the full post on @pzuraq's blog!

And by the way: Even though the case study is also a detailed guide on how to develop your own TrackedMap, you don't have to build it yourself, to be able to use this awesome feature in your Ember app. Check out @pzuraq's community addons tracked-built-ins or tracked-maps-and-sets to autotrack Maps today!

---

Simple drag and drop in Ember Octane 🐺

In his tutorial, Simple Drag and Drop in Ember Octane, Ember developer Derek Gavey (@dgavey) gives you a straightforward Ember Octane way of making an HTML drag and drop interface for your site. The code is minimal and you can extend it to meet your needs.

The secret? You can use modifiers to simplify adding drag events. Derek breaks everything down for you and explains each step.

I think articles like this will help you build your developer skillset. There is a lot of useful info in Derek Gavey's piece. We look forward to reading his next article on how to make a sortable list!

---

Migré de Svelte a EmberJS y fue para bien 🎉

Say hello to Francisco Quintero (@cesc1989). Francisco is a software engineer who recently migrated his app Intrati from Svelte to Ember Octane in 16 days! In both cases, a friend recommended the framework and he learned by reading documentation, writing tests, and coding by trial-and-error.

In the blog post, Francisco shares what he liked and what he found to be difficult to do in Svelte and Ember. He also shares the notes that he compiled while learning Ember. We encourage you to read them to understand more what using Ember can be like for a new developer.

(Both Francisco's blog post and notes are written in Spanish. If you're not familiar with the language, you can use Google Translate or another translation software.)

---

Todo app tutorial in Ember Octane for those who know React 🎉

Next, please welcome Jenny Judova (@JennyJudova). Jenny is a UI engineer who has experience with React and began to learn Ember for her current job.

In the blog post, Jenny explains step-by-step how to create a Todo app and relates Ember Octane code to what you might see done in React. She finds that it's easier to learn a new language when it's compared to something you already know, even if the comparisons may not be perfect.

If you are interested in learning more about solving the Todo problem in Ember and React, please check out the blog post!

---

EmberMap: The {{fn}} Helper 📺

This edition of EmberMap’s What’s New in Ember series discusses the fn or function helper – Ember's conceptual shift in binding actions at the source, rather than at the invocation site.

The fn helper which has been available since Ember 3.11, provides a way to pass arguments to actions. While this may be something Ember already provided for a long time, the EmberMap video goes through the nuisance of how the fn helper provides added functionality by binding the this context and currying the arguments passed. For example, it allows you to pass parameters along to functions in your templates:

<!-- Before -->
<button {{action 'handleClick' 123}}>Click Me!</button>
<MyComponent @onClick={{action 'handleClick' 123}} />

<!-- After -->
<button {{on "click" (fn this.handleClick 123)}}>Click Me!</button>
<MyComponent @onClick={{fn this.handleClick 123}} />

Check out the full EmberMap video and try using the fn helper in your app today!

---

Contributors' corner 👏

This week we'd like to thank @locks, @rwjblue, @runspired, @rwwagner90, @nummi, @Turbo87, @pzuraq, @Gaurav0, @alexeykostevich, @mansona, @sandstrom, @rajasegar, @skaterdav85, @bantic, @RajaSK05, @chiragpat and @rahilvora for their contributions to Ember and related repositories! 💖

---

Got a question? Ask readers' questions! 🤓

---

#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,

Chris Ng, Matthew Roderick, Jared Galanis, Isaac Lee, Jessica Jordan, Amy Lam and the Learning Team