DEV Community: The Ember Times

The Ember Times - Issue No. 190

The Ember Times — Sat, 09 Oct 2021 00:52:43 +0000

👋 Emberistas! 🐹

It's October...and that means it's time for Hacktoberfest! Also, try out the first beta release of Ember 4.0 today, plus a release of ember-popperjs

🎃 Hacktoberfest

Hacktoberfest is an annual, worldwide celebration organized by DigitalOcean and sponsored by many companies that use open source software. Many Ember projects are participating this year! If you complete the challenge,
you can get a prize!

To participate:

Sign up anytime between October 1 and October 31.
Make 4 approved Pull Requests to public repositories on GitHub that have the hacktoberfest topic. Take a moment to learn about what goes into an "approved" Pull request.
If you are among the first 50,000 developers who complete the challenge, you get a prize. This year, you can select between a T-shirt and a tree planted in your name.
Join the #hacktoberfest channel in the Ember Community Discord to collaborate with other participants!

Ember projects you can help out with

Are you wondering what to work on?

There are 100 and counting Ember projects participating! Here's a list of recently updated issues in those repositories.

Ember 4.0 is coming up, and so one area of need is to help addon maintainers upgrade to version 3.28 and resolve deprecations. Even if addon authors do not have issues open for this work, you can open one and offer to help.

You can also visit Ember's Help Wanted to find good issues to work on. The Ember Learning Team and others are curating some super beginner-friendly issues. In Help Wanted, you can find these issues, along with more intermediate and advanced issues. If you want to help, comment on an issue to let others know that you are working on it. If the issue you want to work on is taken, try asking if the other volunteers would like to collaborate!

Connect with other participants

Join the #hacktoberfest channel in the Ember Community Discord to connect with other developers. You can find a buddy to pair with, a mentor to guide you, or toss around ideas.

If you are someone who is willing to help mentor new contributors, please let us know in #hacktoberfest on Discord. Addon maintainers are welcome to post issues they need help with too!

Additionally, there are several more groups within the Ember Community Discord where you can find others to collaborate with. There are Discord channels for women, LGBTQ+, and people of color. If you belong to one of those groups, you can ask to join in the #discord-server-admin channel.

✨ Ember 4.0.0-beta.1 released

On October 4, the first beta of Ember 4.0 has been released. It contains improvements to documentation as well as a few new features:

Add addons.exclude and addons.include options (implements RFC #639)
Add pnpm support to ember install command
Default ember new and ember addon to use GitHub Actions (implements RFC #696)
Update app and addon blueprints to use ember-auto-import@v2

For more information about the 4.0.0-beta.1 release, you can visit the release page on GitHub. We encourage you try it out and provide feedback.

🎉 Release of ember-popperjs

NullVoxPopuli (@NullVoxPopuli) released v1.0.0 of ember-popperjs which provides a single <PopperJS> component with with APIs to create popover, tooltips, and more!

The addon provides 2 modifiers: {{trigger}} which sets up the target element for the popover element to position itself to – and {{popover}} which attaches to the element that is the container of the popover content. There are also placement and options attributes which can be applied to customize the <PopperJS> behaviour.

<PopperJS as |trigger popover|>
  <button {{trigger}} {{on "click" this.yourClickHandler}}>
    {{yield to="trigger"}}
  </button>

  {{#if this.yourVisibilityIndicator}}
    <div {{popover}}>
      This is a popover!
      {{yield to="default"}}
    </div>
  {{/if}}
</PopperJS>

Note that PopperJS does not provide styles for making a popover nor does it provide click handlers for showing and hiding the popover. Try it out today, it’s available on GitHub!

👏 Contributors' corner

This week we'd like to thank Edward Faulkner (@ef4), Lyle Frost (@lfrost), James Herdman (@jherdman), Jacob (@jfdnc), Darius Dzien (@ddzz), Amy Lam (@amyrlam), Sergey Astapov (@SergeAstapov), Jen Weber (@jenweber), Godfrey Chan (@chancancode), Bryan Mishkin (@bmish), Robert Jackson (@rwjblue), Chris Ng (@chrisrng), Robert Wagner (@rwwagner90), Bert De Block (@bertdeblock), Aoife Hannigan (@aoifehannigan), Pat O'Callaghan (@patocallaghan), Ricardo Mendes (@locks), Tim (@fozy81), Cyrille (@dcyriller), @NullVoxPopuli, Nicolas Lepage (@nlepage), Nathaniel Furniss (@nlfurniss), Tobias Bieniek (@Turbo87), Chris Krycho (@chriskrycho), and Isaac Lee (@ijlee2) for their contributions to Ember and related repositories! 💖

🤓 Connect with us

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! 🤞

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. See you in two weeks!

That's another wrap! ✨

Be kind,

Jen Weber, Isaac Lee, Chris Ng, Amy Lam, and the Learning Team

The Ember Times - Issue No. 189

The Ember Times — Sat, 25 Sep 2021 04:29:32 +0000

👋 Emberistas! 🐹

RFC: Asset Import Spec, ember-element-query v4, EmberFest 2021 - best of both worlds, Glimmer cheatsheet, and Glimmer Apollo v0.4.0.

✍️ RFC: Asset Import Spec

Edward Faulkner (@ef4) proposed a new RFC which defines the standard semantics for what it means to depend on files that are not JavaScript or CSS, like images, fonts, and other media. The ecosystem today mostly relies on broccoli-asset-rev which is a Broccoli plugin that adds fingerprint checksums and CDN URLs to your assets. The RFC argues that the broccoli-asset-rev plugin does not take advantage of the newer capabilities we have in ember-auto-import and embroider. The proposed pull-based design lets code declare what assets it needs and then not worry about how those assets will get delivered is safer and easier to change in the future.

import myImage from './hello.png';

class extends Component {
  myImage = myImage
}

<img src={{this.myImage}} />

If this is something you are interested in, please read and discuss the Asset Import Spec RFC on GitHub!

✨ ember-element-query v4

Andrey Mikhaylov (@lolmaus) announced the release of ember-element-query v4, a complete rewrite for Octane with a new convenient API.

Element queries are a technique to do responsive transformations based on the element's own size, rather than the viewport size. You can implement reusable responsive components with encapsulated styles, that are decoupled from their parent context. Such components will realign their content depending on how much space is available to them.

For example, if you put a responsive component into a tight sidebar, it will align its content vertically. When the sidebar expands, the component will realign horizontally, in order to efficiently use available space. Check out Element Queries, And How You Can Use Them Today on Smashing Magazine to learn more.

Historically, ember-element-query was the first Ember addon to offer element queries out of the box, but back then it used an inefficient implementation and was written in the now-outdated Classic Ember paradigm. It served as one of inspirations for Chad Carbert's (@chadian) ember-fill-up. Announced at EmberFest 2019 as a proof-of-concept, ember-fill-up saw no updates and was discontinued.

The first element query addon to be released with feature completeness, full test coverage and lasting support was Isaac Lee's (@ijlee2) ember-container-query, featured in The Ember Times #153. The re-release of ember-element-query followed suit with a subjectively more convenient, opinionated API, backed by modern, efficient ResizeObserver under the hood. @ijlee2 provided kind support, criticism and generously shared the demo app with @lolmaus's ember-element-query.

Check out the detailed README and give the addon a spin!

🏛️ EmberFest 2021 - best of both worlds

Next week, after a year of absence because of COVID, EmberFest is back. On the 30th of September and the 1st of October, Emberistas will gather digitally and on-site in Rome to hear awesome Ember talks.

There will be well-known EmberConf/Fest speakers like Melanie Sumner (@MelSumner) and Edward Faulkner (@ef4), as well as first-time speakers like Bartlomiej Dudzik (@BobrImperator), Jenny Judova (@JennyJudova), and Zoë Bijl (@ZoeBijl). The line-up is super diverse and interesting for all Ember enthusiasts.

Remote tickets are still available. A few on-site tickets too, if you plan on arriving at the last minute. We hope you enjoy EmberFest wherever you decide to join.

⚡️ Glimmer Cheatsheet

If you've ever found the Ember Octane vs Ember Classic Cheat Sheet cheatsheet helpful, and you're also interested in Glimmer.js, you might want to check out the in-progress and exciting, but unofficial, Glimmer Cheatsheet that NullVoxPopuli (@NullVoxPopuli) recently started to put together.

So far only part of the templates page has been written, but if you're interested in contributing there is a rough outline and placeholder i18n to help get you started.

Take a look at the GitHub repo or the deployed app for more!

📈 Glimmer Apollo v0.4.0

Josemar Luedke (@josemarluedke) recently released a new v0.4.0 of Glimmer Apollo that includes support for subscriptions! 🔥

If you haven't checked out Glimmer Apollo and you would like to make use of Apollo to access GraphQL data in your Glimmer or Ember app, you should take a look at this exciting project and give the docs a read.

👏 Contributors' corner

This week we'd like to thank Davide Ferrero (@davideferre), Chris Krycho (@chriskrycho), Alex Kanunnikov (@lifeart), Ben Tidy (@tben), Andreas Minnich (@enspandi), @StephanH90, @NullVoxPopuli, Jeff Keen (@jkeen), Nathaniel Furniss (@nlfurniss), Ruslan Hrabovyi (@ro0gr), Robert Wagner (@rwwagner90), James Herdman (@jherdman), @colenso, Bryan Mishkin (@bmish), Chris Ng (@chrisrng), Scott Newcomer (@snewcomer), Anne-Greeth Schot-van Herwijnen (@MinThaMie), Robert Jackson (@rwjblue), Isaac Lee (@ijlee2), Giles Thompson (@gilest), Kirill Shaplyko (@Baltazore), Charles Fries (@charlesfries), Ricardo Mendes (@locks), Jacob (@jfdnc), Katie Gengler (@kategengler), Jen Weber (@jenweber), Max Fierke (@maxfierke), Raido Kuli (@raido), Amy Lam (@amyrlam), Sylvain Mina (@sly7-7), Darius Dzien (@ddzz), Jared Galanis (@jaredgalanis), and Nathanaël Dekeister (@ndekeister-us) for their contributions to Ember and related repositories! 💖

🤓 Connect with us

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! 🤞

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. See you in two weeks!

That's another wrap! ✨

Be kind,

Chris Ng, Anne-Greeth Schot-van Herwijnen, Jared Galanis, Amy Lam, and the Learning Team

The Ember Times - Issue No. 188

The Ember Times — Sat, 11 Sep 2021 03:21:25 +0000

👋 Emberistas! 🐹

Ember 3.28 and 4.0 Beta Released, open source contributors wanted for Ember v4, reactively handle audio in Octane with ember-stereo, and Twitter thread: Ember is data-first.

🎉 Ember 3.28 and 4.0 Beta Released

After 3.5 years and 28 minor releases, Ember 3.28 marks the end of the project's 3.x series. To ensure a smooth upgrade path going into the 4.x series, 3.28 has been declared an LTS (Long Term Support) candidate. In six weeks, the latest patch version of 3.28 will be promoted to be the latest LTS release and replace 3.24-LTS.

We're also announcing the start of the Ember 4.0 beta cycle for all sub-projects. Following the process set in previous major versions, Ember 4.0's beta introduces no new features. Instead, it removes support for deprecated public APIs. We encourage our community (especially addon authors) to help test beta builds and report any bugs before they are published as a stable release in six weeks' time. We also encourage everyone to help maintainers resolve deprecations in their favorite addons. The ember-try addon is a great way to continuously test your projects against the latest Ember releases.

Developers who want to prepare for the upcoming 4.0 version of Ember should work to resolve all deprecation warnings in their apps and addons while using Ember 3.28. An app or addon with no deprecation warnings on Ember 3.28 should be able to upgrade from Ember 4.0 without making significant changes outside of the dependency versions.

You can read more about Ember's plans for 4.0 in The Road to Ember 4.0. Please visit Ember 3.28 and 4.0 Beta Released for the rest of the post, including details on Ember.js, Ember Data, and Ember CLI. Many thanks to Matthew Beale (@mixonic), Jen Weber (@jenweber), and Isaac Lee (@ijlee2) for the excellent and informative writeup!

📣 Open source contributors wanted for Ember v4

Do you have some time to help out with shipping Ember v4? 🔥 The Learning Team is preparing docs and guides, and we need your brainpower and writing skills!

Help wanted to complete this month:

The most pressing issue is the deprecation guides, please start here if you have bandwidth and comment to claim a subtask of the issue. GitHub issue: Write missing deprecation guides
Look through the API docs and remove references to classic syntax. We only want to show Octane style examples in v4. GitHub issue: [Documentation] Epic - remove classic examples from API docs for Ember 4

In addition to commenting on the GitHub issues, we can also chat on #dev-ember-learning on Discord.

🎵 Reactively handle audios in Octane with `ember-stereo`

Since 2016, Jeff Keen (@jkeen) helped develop the open-source ember-hifi for the New York Public Radio.

Jeff recently released its modern, reactive successor ember-stereo. He has worked hard on making audio manipulation simple and providing extensive examples. We encourage you to have a look!

Out of the box, you will be provided with:

stereo service: It manages loading and playing sounds, making sure that only one sound plays at a time, setting volume, and providing system-level events that your application can tie into.
Template helpers, which can perform an action on, or retrieve information from, a sound or url string—something entirely new from how ember-hifi did things!
A couple of modifiers, to help control volume and position
setupStereoTest(), to help write tests

🐦 Twitter thread: Ember is data-first

Michael Bodnarchuk (@DavertMik) wrote a Twitter thread on how tracked properties in Glimmer components help you build data-oriented components.

Michael mentions that in React you write hooks to update the component's state, while in Ember the component's state is tied to the data. This data first approach makes it so we can pass the reacting class to the root component and we do not need to change any child components to make it work.

Read the full Twitter thread and let us know if you have any thoughts about it too!

👏 Contributors' corner

This week we'd like to thank Thomas Wang (@xg-wang), Kelly Selden (@kellyselden), Isaac Lee (@ijlee2), Igor Terzic (@igorT), Katie Gengler (@kategengler), Charles Fries (@charlesfries), @NullVoxPopuli, Esquith Allen (@esquith), Bryan Mishkin (@bmish), Chris Ng (@chrisrng), Chris Carini (@ChrisCarini), Sylvain MINA (@sly7-7), Chris Manson (@mansona), Amy Lam (@amyrlam), Robert Wagner (@rwwagner90), Ricardo Mendes (@locks), Alex Kanunnikov (@lifeart), Simon Ihmig (@simonihmig), Gabriela Larregle (@Glarregle), Jen Weber (@jenweber), Anne-Greeth Schot-van Herwijnen (@MinThaMie), Jonas Brusman (@himynameisjonas), Robert Jackson (@rwjblue), Stefan Penner (@stefanpenner), Nathanaël Dekeister (@ndekeister-us), Brenden Palmer (@brendenpalmer), and Giles Thompson (@gilest) for their contributions to Ember and related repositories! 💖

🤓 Connect with us

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! 🤞

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. See you in two weeks!

That's another wrap! ✨

Be kind,

Chris Ng, Isaac Lee, Amy Lam, and the Learning Team

The Ember Times - Issue No. 187

The Ember Times — Sat, 28 Aug 2021 05:21:36 +0000

👋 Emberistas! 🐹

Release: ember-engines-router-service, ember-scroll-modifier and ember-user-activity updates, and Coding with the Dead on Twitch.

⚙️ Release: ember-engines-router-service

Michael Villander (@villander) released the ember-engines-router-service addon which provides the Router service for ember-engines.

The addon gives you access to the RouterService API inside each engine. This allows you to inject the router service as usual to your component within an engine and use APIs such as transitionTo and even transitionToExternal which help link externalRoutes together.

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from ‘@ember/object’;

export default class SomeComponent extends Component {
  @service router;

  @action
  transitionToHome() {
    this.router.transitionToExternal('other.route');
  }

  @action
  transitionToAdmin() {
    this.router.transitionTo('admin.route');
  }
}

To learn more, try it out today in your application or read the Engine Linking RFC for more documentation.

🚀 Ember-scroll-modifier and ember-user-activity updates

Jordan Hawker (@elwayman02) announced updates to two of his add-ons.

ember-scroll-modifiers got a minor update to add an amazing test helper to make it easier to test usage of the scroll-into-view modifier in your code.

ember-user-activity got a major update, with the release over version 6.0.0. This version drops support for Ember 3.16 and IE11. Not only does it drop support, but it enables the use in Ember 4.0 🥳!

📺 Coding with the Dead on Twitch

Studio Remote: Coding with the Dead is a Twitch series from Columbia University Libraries. Moacir P. de Sá Pereira (@muziejus) is your host, live streaming coding in Ember! In the most recent episode, Moacir works on wandertext, an open source app to create and share semantically rich geospatial datasets. The app is currently under heavy development! It's neat that viewers can follow along with the code, project management via GitHub issues, debugging, spelunking through addons, and more!

// Detect dark theme var iframe = document.getElementById('tweet-1427725501112717319-730'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1427725501112717319&theme=dark" }

Moacir is typically scheduled for Tuesday afternoons at 3pm ET on Twitch. Follow CULStudio on Twitch and check out the schedule to tune in live or async!

👏 Contributors' corner

This week we'd like to thank Steve Calvert (@scalvert), Chris Carini (@ChrisCarini), Isaac Lee (@ijlee2), Suchita Doshi (@suchitadoshi1987), Thomas Wang (@xg-wang), @aniketh-deepsource, Ray Cohen (@raycohen), Amy Lam (@amyrlam), Hermione Granger (@hermionethebrightone), Stefan Penner (@stefanpenner), Bj Tecu (@btecu), Kelly Selden (@kellyselden), Giles Thompson (@gilest), Tolulope Oluwadamilare Olusakin (@Oluwadamilareolusakin), Nathaniel Furniss (@nlfurniss), @rajakvk, Harshith Venkatesh (@harshith-venkatesh), Jen Weber (@jenweber), Bert De Block (@bertdeblock), Bryan Mishkin (@bmish), Igor Terzic (@igorT), Bas Kamer (@basz), Ricardo Mendes (@locks), Anne-Greeth Schot-van Herwijnen (@MinThaMie), Chris Manson (@mansona), Scott Newcomer (@snewcomer), Chris Ng (@chrisrng), and Katie Gengler (@kategengler) for their contributions to Ember and related repositories! 💖

🤓 Connect with us

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! 🤞

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. See you in two weeks!

That's another wrap! ✨

Be kind,

Anne-Greeth Schot-van Herwijnen, Chris Ng, Amy Lam, and the Learning Team

The Ember Times - Issue No. 186

The Ember Times — Tue, 17 Aug 2021 05:32:24 +0000

👋 Emberistas! 🐹

Read the blog post on Avoiding Lifecycle in Components, announcing Glimmer Apollo, new release for ember-responsive-image, and code in public: Ember dev streaming on Twitch.

Blog post: Avoiding Lifecycle in Components ✍️

NullVoxPopuli (@NullVoxPopuli) published a blog post on Avoiding Lifecycle in Components, namely the lifecycle hooks that come with ember-render-modifiers.

For some context, ember-render-modifiers was created from RFC 415: Render Element Modifiers which introduced three new generic element modifiers: {{did-insert}}, {{did-update}}, and {{will-destroy}}. The caveat however was that these modifiers were meant for quickly migrating away from classic Ember components to Glimmer components, because they largely allow you to use the same lifecycle hook methods you've already written while attaching them to these modifiers.

The blog outlines several possibilities to avoid using these modifiers:

Creating your own custom modifier when behavior is tied to a particular DOM node or DOM tree
Starting Ember 3.25, using a local modifier which is only referenced within your component
Using useFunction from ember-resources to lazily load data instead of doing it in did-insert or did-update modifiers
Handling destruction using registerDestructor from @ember/destroyable or using willDestroy directly from the Glimmer lifecycle hook

Read more about the different strategies to avoiding lifecycle in components at the Avoiding Lifecycle in Components blog post!

Announcing Glimmer Apollo 🎉

Josemar Luedke (@josemarluedke) shared Glimmer Apollo on Twitter, a new addon that integrates GraphQL in your Ember and Glimmer apps with a declarative API to query, mutate, and access GraphQL data.

For background, GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. Apollo Client is a popular, declarative data-fetching library for GraphQL. Glimmer Apollo uses the concept of Resources to enable the integration of Glimmer's autotracking system with Apollo Client. The library is also reactive: queries are automatically re-executed when arguments change. The UI reflects any changes when cache data has been updated.

Glimmer Apollo is written in TypeScript, allowing APIs to specify the shape of the result data and variables. TypeScript also has friendly IntelliSense while coding. Glimmer Apollo is also an Embroider native addon (v2) and integrates with FastBoot (server-side rendering). 💯

`ember-responsive-image` v3 release 🖼

Optimising image size and formats to improve performance can get complicated, but the ember-responsive-image addon has your back! Now you have even more reason to take advantage of its abilities following the annoucement by Simon Ihmig (@simonihmig) of version 3. This release provides support for Cloudinary and imgix image CDNs, further enriching a full set of functionality for re-sizing images and optimizing image loading times across all browsers. Go check it out.

Code in public: Ember development streaming on Twitch 📹

Chris Manson (@mansona) of the Ember Learning Team continues to livestream open source Ember development on Twitch! Check out the channel at twitch.tv/real_ate and give it a follow! In the most recent stream, Chris does some coding work on MelSumner/a11y-automation, then switches gears to empress/field-guide. Catch the next episode live every Thursday from 10:30-13:00 (GMT+2)!

Contributors' corner 👏

This week we'd like to thank Swaraj Rajpure (@swarajpure), Amy Lam (@amyrlam), Scott Newcomer (@snewcomer), Melanie Sumner (@MelSumner), Suchita Doshi (@suchitadoshi1987), Ricardo Mendes (@locks), Chris Manson (@mansona), Stefan Penner (@stefanpenner), Godfrey Chan (@chancancode), Chris Ng (@chrisrng), Jen Weber (@jenweber), Giles Thompson (@gilest), Katie Gengler (@kategengler), Jared Galanis (@jaredgalanis), Robert Jackson (@rwjblue), Dan Gebhardt (@dgeb), Nathaniel Furniss (@nlfurniss), Igor Terzic (@igorT), Thomas Wang (@xg-wang), Brenden Palmer (@brendenpalmer), Isaac Lee (@ijlee2), Steve Calvert (@scalvert), and Jessy Jordan (@jayjayjpg) for their contributions to Ember and related repositories! 💖

Connect with us 🤓

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! 🤞

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. See you in two weeks!

That's another wrap! ✨

Be kind,

Tim Foster, Chris Ng, Amy Lam, and the Learning Team

The Ember Times - Issue No. 185

The Ember Times — Sat, 31 Jul 2021 02:54:03 +0000

👋 Emberistas! 🐹

New Educative course, using Ember with XState, let codemods upgrade your app & deal with jQuery, Ember.js: The Good Parts, new release of ember-deep-tracked, why blueprints are cool.

Developing Robust Ember.js Applications course on Educative 🆕

Based on the popular book, Rock and Roll with Ember.js, Educative has a new (paid) course, Developing Robust Ember.js Applications by Balint Erdi (@balinterdi). Balint chose to partner with Educative because their courses are interactive: there are quizzes and coding challenges at the end of most chapters, which will help reinforce understanding and learning.

Takeaway skills:

Understand how Ember.js works in web applications
Help the user understand how the different building blocks, including components, routing, and services, make everything work in Ember.js
Learn how to use Ember CLI
Learn how to completely develop and Ember.js application

We look forward to giving the course a spin!

Using Ember with XState ❎

Over the past year, the frontend team at iManage Closing Folders has been experimenting with state machines and Ember. What is a state machine? From Understanding State Machines on freeCodeCamp, a state machine will read a series of inputs. When it reads an input, it will switch to a different state. Each state specifies which state to switch to, for a given input.

In the post Using EmberJS with XState, Emerson Lackey (@Emerson) discusses the benefits and drawbacks of state machines. For example, state machines provide a framework-agnostic way of defining presentational state. State machines eliminate emergent states in favor or explicit states. For example, if you have two boolean states on a component, isSaving and isError, you actually have four states to consider.

Emerson walks through an example of how to use XState and Ember to implement a signup form. We appreciate the detailed code walkthrough, and agree that the state visualizations are definitely awesome! In addition to the writeup, check out the accompanying full source of emberjs-state-example on GitHub.

Let codemods upgrade your app and deal with jQuery 🤖

Another must-read tutorial for anyone who is building and maintaining Ember applications is coming your way:

In her article "Remodeling an Ember App - Codemods and jQuery" Ember core team member Jen Weber (@jenweber) teaches you where to find codemods and how to use them for upgrades of your Ember app. Additionally, you will learn how you can make your app exclude the jQuery dependency automatically to save a few extra kilobytes on your builds!

Read the full article here (or alternatively on dev.to) and if this tutorial helped you with your own upgrade, be sure to share your experience on the post announcement!

Ember.js | The Good Parts 👍

Sarbbottam Bandyopadhyay (@sarbbottam), who has been developing Ember apps since mid-2017, once shared the challenges that he had faced with Ember.js.

This week, Sarbbottam gave an update to describe his newfound developer productivity and happiness, thanks to Ember Octane. Titled Ember.js | The Good Parts, the blog post provides several code examples of a before-and-after. It also describes how a change in syntax and new features (small adjustments) can mean a big improvement to developer experience.

We encourage you to check out Sarbbottam's blog post!

Release of ember-deep-tracked 🎉

NullVoxPopuli (@NullVoxPopuli) published ember-deep-tracked which is a prototype of "deep tracking" for Ember.

To try it out, you need to annotate the object using a decorator similar to tracked.

import { tracked } from 'ember-deep-tracked';
import Component from '@glimmer/component';

export default class Foo extends Component {
  @tracked obj = { bar: 2 };
}

In the example above when the object obj,bar updates using {{this.obj.bar}} will also update since it is deeply tracked.

Note the addon is not recommended for performance sensitive situations such as rendering a table from a large data set where updates to that data set are frequent. This is because without updates there will be an increase in initial render time.

Why Blueprints are Cool 😎

If you've been using Ember for any length of time you almost certainly have come to appreciate the robust generators that ember-cli provides. Ember's first-in-class generators can cut down on development time by reducing the need to write boilerplate and reducing the risk of errors in setting up your code.

If you've been wondering about how those generators get set up and how you can create your own, then you're in luck! There's a super helpful ✨✨new article✨✨ by our very own Jessy Jordan (@jayjayjpg) on how you can write your own blueprints to customize generator commands for use in setting up tests files in Ember 🔥🔥🔥.

The article walks us through the process from top to bottom on how blueprints drive the built-in Ember generators for setting up tests, and how we can create our own blueprints for customizing this setup and make automating this part of writing tests a snap.

By following the thorough explanations provided in the article you can get started writing your own blueprints in no time!

Contributors' corner 👏

This week we'd like to thank Matthew Beale (@mixonic), Chris Manson (@mansona), Faith Or (@faith-or), Haden (@hadenpf), Chris Garrett (@pzuraq), Stefan Penner (@stefanpenner), Nathaniel Furniss (@nlfurniss), Robert Jackson (@rwjblue), Igor Terzic (@igorT), Jordan Hawker (@elwayman02), Simon Ihmig (@simonihmig), Francesco Novy (@mydea), Amy Lam (@amyrlam), Roberto Sequeira (@robertosequeira), Jared Galanis (@jaredgalanis), Sergey Astapov (@SergeAstapov), Matt Doyle (@hellomattio), Jessy Jordan (@jayjayjpg), Max Z (@MrChocolatine), Godfrey Chan (@chancancode), Harshith Venkatesh (@harshith-venkatesh), Hank Majoros (@hmajoros), and James Herdman (@jherdman) for their contributions to Ember and related repositories! 💖

Connect with us 🤓

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! 🤞

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. See you in two weeks!

That's another wrap! ✨

Be kind,

Jesse Jordan, Isaac Lee, Chris Ng, Jared Galanis, Amy Lam, and the Learning Team

The Ember Times - Issue No. 184

The Ember Times — Sat, 17 Jul 2021 04:12:09 +0000

👋 Emberistas! 🐹

The Road to Ember 4.0, introducing a11y-disabled-modifier, Emberliners talks, and get your update for ember-engines 0.8.18.

The Road to Ember 4.0 🛣

Matthew Beale (@mixonic) from the Ember Core Framework and Steering Committee teams, writes about The Road to Ember 4.0 on the official Ember blog.

Announcing Ember 4.0: Ember 4.0 will be released around September 20th. Ember 4.4 will be the first LTS candidate of the 4.x series.
Whats in a 4.0?: As a major version of Ember, there are no new features. This sections discusses the removal of deprecated APIs. For example, Ember.Logger is removed in favor of native console APIs. Also, sendAction is removed in favor of calling closure actions like any other callback.
Planning your upgrade to 4.0: Consider using the ember-cli-deprecation-workflow addon as part of your upgrade process.
Contributing to Ember 4.0: Join us on Discord in the #dev-ember-js, #dev-ember-data, #dev-ember-cli, or #dev-ember-learning channels to find out how you can contribute.

Please check out the detailed post in full for more details on how you can prepare for your upgrade!

We're looking forward to working with the community on Ember 4.0 and on the opportunities beyond it. As always we appreciate your support, your trust, and our common partnership.

Introducing the a11y-disabled-modifier Modifier 💚

Inspired by the CSSTricks blog post on Making Disabled Buttons More Inclusive, Chris Krycho (@chriskrycho) created the a11y-disabled-modifier addon.

The blog post argues against the disabled attribute in <button> in favor of the aria-disabled attribute since it does not prevent clicking and focusing on the button which is useful when you are navigating the site using the Tab key.

This modifier implements accessible and usable button-disabling by adding aria-disabled="true" to the target element when the when named argument is truthy. It will also stop any clicks on the button from propagating and ensures form submission does not trigger.

<form {{on "submit" this.submit}}>
  <label>some text: <input type='text' /></label>
  <button type='submit' {{disabled when=this.isInvalid}}>submit</button>
</form>

Try it out today by running ember install a11y-disabled-modifier on your Ember app!

Ember Berlin Meetup with 4 talks 📽

Four amazing talks from our friends at Emberliners meetups are now available for binge watching!

First up, is Embroider: from zero to route splitting in 3.5 weeks by Ben Demboski (@bendemboski) which explores what it takes to update a large desktop Ember app to use Embroider.
Agathe Badia (@Agathebadia) shows her fascinating work on creating a Colorblindness emulator with Ember, an A11y project.
Francesco Novy (@mydea) presents You could get used to this: Managing GraphQL data - a great primer on GraphQL in Ember.
Lastly, Michael Klein (@levelbossmike) and Clemens Mueller (@pangratz) discuss On the development of reactive systems with Ember.js, providing an insightful view on approaching Ember development as a reactive system using ember-statecharts addon.

These talks give a great snapshot lots of exciting developments happening around the Ember community 💗.

ember-engines v0.8.18 is out! 🎉

If you're already using ember-engines or plan on using it, be sure to upgrade your dependency!

The latest patch release of ember-engines not only includes bug fixes for older Ember apps, but also several build fixes and new deprecation warnings to help up you keep your application up-to-date.

A huge thank you goes to Travis Hoover (@thoov), Bert De Block (@bertdeblock), Michael Villander (@villander) and Robert Jackson (@rwjblue) for their work on the project!

Check out the full list of recent updates in the following changelogs:

Contributors' corner 👏

This week we'd like to thank Nathaniel Furniss (@nlfurniss), Ricardo Mendes (@locks), Chris Ng (@chrisrng), Isaac Lee (@ijlee2), Steve Calvert (@scalvert), Matthew Beale (@mixonic), Tim (@fozy81), Sergey Astapov (@SergeAstapov), Chris Manson (@mansona), @tcouloumy, Kenneth Larsen (@kennethlarsen), Jesse Jordan (@jayjayjpg), Amy Lam (@amyrlam), and Matthew Edwards (@wondersloth) for their contributions to Ember and related repositories! 💖

Connect with us 🤓

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! 🤞

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. See you in two weeks!

That's another wrap! ✨

Be kind,

Chris Ng, Jesse Jordan, Tim Foster, Amy Lam, and the Learning Team

The Ember Times - Issue No. 183

The Ember Times — Fri, 02 Jul 2021 01:19:37 +0000

👋 Emberistas! 🐹

New release of Unstable Ember Language Server, share code snippets on Twitter using Ember, the difference between ember serve and npm run start, and an addon roundup!

Release of uELS v2.0.16 ✅

Unstable Ember Language Server is a fully featured fork of Ember Language Server. While the name says unstable it actually has been stable and ready to use for day-to-day development!

Thanks to both Alex LaFroscia (@alexlafroscia) and Alex Kanunnikov (@lifeart) for new version release which provides:

Support workspace/didChangeConfiguration event
Improved startup speed by delaying template tokenization
Autocomplete now use global registry and file change events, not fs lookup, but we still do fs lookup on project initialization
Added template-lint severity support
Improved template-linting speed

Try out uELS today by installing over Open VSX or Visual Studio Marketplace!

Share code snippets on Twitter using Ember 🐦

Do you want to share demos, gifs, or code snippets on Twitter? Try limber.glimdown.com from @NullVoxPopuli, built with Ember! Code snippets on limber.glimdown.com can be copied as text or images.

NullVoxPopuli

@nullvoxpopuli

Want to make demos / gifs / snippets for twitter using #EmberJS?

Try limber.glimdown.com

#JavaScript #TypeScript #XState #Playground #Demo #WebDev

15:33 PM - 09 Jun 2021

The difference between ember serve and npm run start 🖥

Jesse Jordan (@jayjayjpg) blogged about some subtle differences between npm run start and ember serve, inspired by this question on StackOverflow. Even when using nvm, there can be some dependency gotchas with globally installed packages. Check out Jesse's dev.to post for more info.

Addon roundup 🌐

Using empress-blog? If you're not familiar with it, empress-blog is the fully-functional, SEO friendly static site implementation of a blog system built on Ember. Check out Michal Bryxí (@MichalBryxi)'s bite-sized blog posts posts on how to set up Mixpanel tracking events in empress-blog and how to add a tag page to your empress-blog main menu.
Want to migrate your Ember projects to Tailwind CSS, but don't know where to start? Rajasegar Chandran (@rajasegar) created the ember-tailwind-codemod addon to make your migrations less painful. Give it a spin on your repos and check out the README for contribution ideas.
Rajasegar Chandran (@rajasegar) created another new addon, ember-plantuml, which allows you to visualize your Ember components and models via PlantUML. You can also download the UML diagrams as SVG files. Look forward to trying it out, seems promising for visual learners!

Contributors' corner 👏

This week we'd like to thank Tim (@fozy81), Jaco Joubert (@jacojoubert), Sara Cope (@saracope), James Herdman (@jherdman), Chris Ng (@chrisrng), Isaac Lee (@ijlee2), Hanna (she/her) (@hannakim91), Jared Galanis (@jaredgalanis), Prakash Choudhary (@prakashchoudhary07), Chris Garrett (@pzuraq), Dave Laird (@kiwiupover), Giles Thompson (@gilest), Amy Lam (@amyrlam), Anne-Greeth van Herwijnen (@MinThaMie), Esquith Allen (@esquith), Luke Ingalls (@lukeingalls), Robert Wagner (@rwwagner90), Ankush Dharkar (@ankushdharkar), Chris Krycho (@chriskrycho), Chirag Patel (@chiragpat), Sumit Dhanania (@sumitd94), and Chris Manson (@mansona) for their contributions to Ember and related repositories! 💖

Connect with us 🤓

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! 🤞

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. See you in two weeks!

That's another wrap! ✨

Be kind,

Chris Ng, Amy Lam, and the Learning Team

The Ember Times - Issue No. 182

The Ember Times — Sat, 19 Jun 2021 04:53:36 +0000

👋 Emberistas! 🐹

Using the in-element helper, migrating Controllers to top-level Components, Ember Upgrade Sprints, Ember development on Twitch, and remodeling an Ember App Part 2.

Using the in-element helper ⛳

Faith Or (@faith-or) wrote a blog post on how they migrated from ember-wormhole to the built-in in-element helper introduced in Ember 3.20.

Ember Wormhole is an addon that renders a child view somewhere else in the DOM outside of the component.

The in-element helper renders its block content outside of the regular flow, into a DOM element given by its destinationElement positional argument.

Common use cases for both include when a piece of UI is a logical child of a component but needs to render somewhere else such as a loading screen, a modal, tooltip or even a dropdown. The differences between the two are slight. Faith goes into more detail in the blog post.

There are 3 main takeaways.

in-element needs the destination to exist before we use it, while ember-wormhole does not.
With in-element, when the destination element changes, the content is re-rendered completely.
By default, the in-element helper will replace all the contents of the destination element. (You will need to configure it not to using insertBefore=null.)

Read the full blog post on LinkedIn and check out the demo on GitHub!

Migrating Controllers to top-level Components in Ember 📖

In this blog post, Juan Manuel Azambuja (@juanazam) shows a real world example of how to replace your template contents with a single top-level component. The top-level component can then take on a similar role as the controller.

Juan presents a few tricks as well as a useful discussion of using ember-modifiers addon to solve updating issues. The blog sums up the advantages and disadvantages of the top-level approach, and cautions that the framework doesn't fully support this solution without some compromises.

Ember Upgrade Sprints 🆕

A key ingredient of app development is maintenance. Without refactoring code and upgrading dependencies often, our development cycle can slow down and we may fail to meet compliance. When you have a couple of apps to maintain, upgrading Ember may not be a big problem. What can you do when you have many apps to maintain and work with many other people?

In Ember Upgrade Sprints, Steve Tyler (@stevetyler) provides a few tips for upgrading apps with every LTS release (Long-Term Support). In addition, Steve shares some challenges that you may face and how you can orient your teams' sprints.

For more information, we encourage you to check out the blog post. What are some of your insights and resources for upgrading Ember apps and addons? Please share them with the community!

Ember development on Twitch.tv 📺

Chris Manson (@mansona) has started to stream Ember development on Twitch. In engaging Twitch streams Chris shows how he does maintenance and development in the Ember ecosystem. Every stream has a nice table of contents and time boxed periods where Chris works on a certain topic.

Every Thursday at 10:30 - 13:00 (GMT+2), you can join Chris on an adventure through contributing in Open Source, chat with other Ember enthusiasts and get inspired to contribute yourself.

Remodeling an Ember App Part 2 🐹

Part 2 of Jen Weber's (@jenweber) ✨fantastic✨ new series on bringing an older Ember app up-to-date with Octane and a modern Ember Data strategy is out now!

In part 2, Jen covers some testing and debugging strategies that Chris Thoburn (@runspired) shared and are particularly helpful when upgrading an Ember application.

From approaches to how to optimize running the tests suite to approaches on how to deal with linting errors to better understanding application test failures, there is a ton of great content in the post that developers of any experience level could learn from.

Be sure to continue to watch for additional posts with more great content as this series continues!

Contributors' corner 👏

This week we'd like to thank Sumit Dhanania (@sumitd94), Francesco Novy (@mydea), Hanna (she/her) (@hannakim91), Scott Newcomer (@snewcomer), Anne-Greeth van Herwijnen (@MinThaMie), Amy Lam (@amyrlam), Godfrey Chan (@chancancode), Esquith Allen (@esquith), Jared Galanis (@jaredgalanis), Camille TJHOA (@ctjhoa), Robert Jackson (@rwjblue), @sandstrom, Isaac Lee (@ijlee2), Dave Laird (@kiwiupover), Nathaniel Furniss (@nlfurniss), Chris Ng (@chrisrng), Kelly Selden (@kellyselden), Giles Thompson (@gilest), Sander Melnikov (@sandydoo), Steve Calvert (@scalvert), Stefan Penner (@stefanpenner), James Herdman (@jherdman), Matthew Beale (@mixonic), Simon Ihmig (@simonihmig), Jaco Joubert (@jacojoubert), Bryan Mishkin (@bmish), Charles Fries (@charlesfries), Cory Forsyth (@bantic), Chirag Patel (@chiragpat), Cyrille David (@dcyriller), Katie Gengler (@kategengler), Prakash Choudhary (@prakashchoudhary07), Ankush Dharkar (@ankushdharkar), Chris Manson (@mansona), Robert Wagner (@rwwagner90), Tim (@fozy81), Tobias Bieniek (@Turbo87), and Sara Cope (@saracope) for their contributions to Ember and related repositories! 💖

Connect with us 🤓

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! 🤞

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. See you in two weeks!

That's another wrap! ✨

Be kind,

Tim Foster, Anne-Greeth van Herwijnen, Chris Ng, Isaac Lee, Jared Galanis, Amy Lam, and the Learning Team

The Ember Times - Issue No. 181

The Ember Times — Sat, 05 Jun 2021 04:52:22 +0000

👋 Emberistas! 🐹

EmberFest, remodeling an Ember app, Ember CLI history, ember-auto-import, web bundling, ember-concurrency release, Ember Data roundup, rwjblue podcast, and keeping a clean git history.

EmberFest 2021 is happening! 🏛️

Mark your calendars for September 30th – October 1st of 2021 – EmberFest will be back as a hybrid on-site/virtual event! EmberFest is the European Community Ember Conference. The location will be a secret until ticket sales are open so stay tuned.

The EmberFest team is confident that this year’s conference can happen in person. At the same time, they realize that some people can’t or might not want to travel yet, so for the first time, EmberFest is going hybrid: there will be both on-site and remote tickets for a livestream available. Early bird tickets will start on June 11, 2021.

If you’re interested in seeing what it’s like, check out the last EmberFest conference in 2019, which was in Copenhagen!

Ember CLI history, ember-auto-import, web bundling & more 🌎

Chris Krycho (@chriskrycho) recently got together with some LinkedIn colleagues, Dave Combs (@davecombs) and Richard Conrad (@grconrad), to chat about the history of Ember CLI, ember-auto-import, web bundling and more.

If you've been looking to learn more about how these things came into being and developed over time, including how they have had impact on the development of modern build tools like Embroider, then you may want to go check out the super interesting video.

If you haven't had enough Krycho 😄 and have some more time on your hands, you might also want to go checkout a package that Chris recently published called ember-simple-track-helper which essentially provides an equivalence for React's useState hook for Ember and Glimmer template only components.

Ember Data happenings 👀

In a prior issue, we mentioned that Ember.js celebrated it's 10th birthday! However, Ember Data's first commits in GitHub were ~15 years ago. The commit history started in SproutCore, which later morphed into Ember.js and Ember Data. Check out Chris Thoburn (@runspired)'s's talk on Ember Data from Ember Fest 2019 for more background!

In more Ember Data news, v4.0 is coming! Open Ember Data Request For Comments (RFCs) will target 5.0, and approved RFC's will be enabled in 4.1 at the soonest.

RFC #475 calls for modernizing the PromiseManyArray. The RFC intends to deprecate reading, mutating or operating on an async hasMany relationship before resolving its value in the application's JavaScript code. Rendering an async hasMany in a template will continue to work as expected. Check out the rendered RFC and comment if you have any feedback!

Remodeling an Ember app blog series 📖

In an exciting new series of new blog posts Ember Learning core team member Jen Weber (@jenweber) is covering the process of bringing an older Ember app up-to-date with Octane and a modern Ember Data strategy.

In the process of writing the posts Jen is pairing with Ember Data core team member, Chris Thoburn (@runspired), so there should be lots of great content to look forward to in the coming days.

The first post, which is available now, lays the ground work for what Jen and Chris will be working on, and includes lists of how to approach overhauling an Ember app, some debugging strategies you might take and more. You can find the first introductory blog post here on Jen's blog.

ember-concurrency 2.1.0 release 🐹

In case you hadn't noticed, Max Fierke (@maxfierke) recently released version 2.1.0 of ember-concurrency! This release includes a public API for Yieldables. Yieldables let you hook into the low-level execution logic of an ember-concurrency task and provide a new way to instrument TaskInstances by providing a safe mechanism to implement custom waiters, hooks, introspection, and other operations from application code.

ember-concurrency 2.1.0 also fixes an important bug where task state updates could be applied out of order in some situations.

If you have been looking to access the internals of ember-concurrency that allow it to go beyond what Promises are capable of, this release might be of interest to you.

A new episode of Web, Whiskey & Whatnot 🔈

There's a new episode of the Ember-related podcast Web, Whiskey & Whatnot out 🎉! This episode features none other than Robert Jackson (@rwjblue). The Ship Shape gang and rwjblue discuss a bit about how rwjblue got involved in contributing to Ember.js, a bit about the web and, yes, a bit about whiskey.

Go checkout the episode wherever you listen to podcasts!

Keeping a clean git history 🖋

Ember Learning core team member Chris Manson (@mansona) has published a super helpful new blog post about one of the developer fundamentals that we all should know about, how to keep a clean git history.

Chris talks about the importance of keeping a tidy git history and provides some excellent tips and workflows on how one might go about doing that. There is also an in-depth working example of some challenges that come up when managing your commits and how you can use visual tools like Fork to achieve a higher level of mastery over your git history.

Head on over to the Simplabs blog to check out the post and learn how to clean up your git history!

Contributors' corner 👏

This week we'd like to thank Hanna (she/her) (@hannakim91), Brenden Palmer (@brendenpalmer), Chris Manson (@mansona), Chris Ng (@chrisrng), Isaac Lee (@ijlee2), Robert Wagner (@rwwagner90), Sam Van Campenhout (@Windvis), Bj Tecu (@btecu), Michal Bryxí (@MichalBryxi), Robert Jackson (@rwjblue), Bryan Mishkin (@bmish), Chris Garrett (@pzuraq), Godfrey Chan (@chancancode), Josh Lindsay (@j000shDotCom), David Tang (@skaterdav85), Matthew Beale (@mixonic), Anne-Greeth van Herwijnen (@MinThaMie), Stefan Penner (@stefanpenner), Tyler (@runnerboy22), Olga Torkhanova (@helgablazhkun), Scott Newcomer (@snewcomer), Anass OUMIRI (@aoumiri), Chris Thoburn (@runspired), Jordan Hawker (@elwayman02), Luke Melia (@lukemelia), Katie Gengler (@kategengler), @NullVoxPopuli, and Jared Galanis (@jaredgalanis) for their contributions to Ember and related repositories! 💖

Connect with us 🤓

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! 🤞

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. See you in two weeks!

That's another wrap! ✨

Be kind,

Chris Ng, Jared Galanis, Amy Lam, and the Learning Team

The Ember Times - Issue No. 180

The Ember Times — Sat, 22 May 2021 05:28:06 +0000

👋 Emberistas! 🐹

Ember's 10 year anniversary, Prettier for Handlebars support, Embroider in 3.5 weeks, GAAD pledge, quickstart to authentication, built with Ember: Fleetbase, and new and shiny add-ons ✨

Happy 10 year anniversary, Ember.js! 🎉

// Detect dark theme var iframe = document.getElementById('tweet-1393240918258499589-644'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1393240918258499589&theme=dark" }

Many thanks to Natasha Fel and Andrey Fel (@andreyfel) for sharing their photos from Ember Nizhny Novgorod's Meetup, which featured a celebratory Nizhny Novgorod Tomster cake for Ember's big anniversary! Check out more photos from the meetup here.

Prettier for Handlebars support 🙌

Prettier can now officially format HTML templates with Handlebars (HBS) in the newly released version 2.3.0. Thank you to Cyrille David (@dcyriller) for pushing this initiative, which started in 2017, through the finish line.

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and reprinting it with its own rules that take the maximum line length into account, wrapping code when necessary. This removes all bikeshedding on what rules we should have or shouldn’t have and instead provides one standard for everyone to use by default.

In order to keep your project aligned with Prettier’s formatting we can use the Ember Template Lint plugin: ember-template-lint-plugin-prettier. This plugin defines a single rule that rule will compare your code with Prettier's output.

So try it out today by using the glimmer parser for Prettier!

Embroider: from zero to route splitting in 3.5 weeks 📝

If you have been part of the Ember community for a while now and have read The Ember Times' last issue, you have probably heard about Embroider. This project is currently at version 0.41.0 and usable in Ember projects.

Ben Demboski (@bendemboski) wrote this blog about how he implemented Embroider in a commercial, ember-electron app.

Ben's blog post explains in detail the app and the process used to make the app use Embroider. All the hard things he ran into, such as ES6 module compliance and third-party add-ons. Luckily, after 3.5 weeks, Ben achieved tree-shaking and code splitting across routes. So if you want to start taking advantage of what Embroider has to offer, this post is a great place to start.

If you read the blog, start with this project yourself and look for a place to get more help, check out the #dev-embroider channel on Ember.JS Discord.

Ember takes the GAAD Pledge 😍

Melanie Sumner (@MelSumner) authored a blog post in conjuction with this week's Global Accessibility Awareness Day (GAAD) to announce that Ember has taken the GAAD pledge to make accessibility a core value of our framework.

Be sure to read the post to learn more about what Ember has done so far in its efforts for “accessibility by default” , what accessibilty-related work is in the pipeline, and how you can get involved if you're interesting in contributing to Ember a11y efforts!

Ember Simple Auth video 📽

Are you looking for a friendly, step by step guide to adding authentication to your Ember app? Look no further than the Ember Simple Auth Quickstart video published by Simplabs. This video provides helpful introduction to this popular authentication/authorization Ember addon. Marco Otte-Witte (@marcoow) explains this tricky part of app development using the latest Ember Octane syntax.

Built with Ember: Fleetbase 🚀

Fleetbase is a new logistics platform built with Ember by co-founders Ronald A. Richardson (@roncodes) and Shiv Thakker (@shivthakker). Fleetbase is an API-first logistics platform for developers and businesses. Customers can design, build, customize and control their logistics operations and experience using their APIs and console. Based in Singapore, Fleetbase has a mission to tech enable traditional businesses.

Check out Fleetbase on ProductHunt!

New shiny addons ✨

The Ember addon ecosystem is always expanding and we love to keep you up to date with all of them. So here is a summarized list of the latest addons made by the community for the community.

ember-bem-helpers: BEM helpers for Ember.js applications
ember-breadcrumb-trail: Minimalistic but very flexible breadcrumb management solution for Ember applications.
ember-url-hash-polyfill: Support for in/inter page linking / scrolling with hashes in EmberJS
ember-cli-custom-properties: Adds support for CSS custom properties (variables) to components
ember-statechart-component: Statecharts as components. No classes. Pure declarative state transitions.
ember-command: An implementation of the command design pattern for #emberjs

Contributors' corner 👏

This week we'd like to thank Chris Garrett (@pzuraq), Bryan Mishkin (@bmish), Lucy Lin (@lin-ll), Robert Jackson (@rwjblue), @bgantzler, Andrew Kirwin (@amk221), Tim (@fozy81), Tyler (@runnerboy22), Tom Chen (@thomascchen), _pvy (@prasannavijayan), Steven Pham (@spham92), Chris Manson (@mansona), Ricardo Mendes (@locks), Chris Ng (@chrisrng), Jen Weber (@jenweber), Daniel Múnera Sánchez (@dmuneras), Hanna (she/her) (@hannakim91), Scott Newcomer (@snewcomer), Amy Lam (@amyrlam), Robert Wagner (@rwwagner90), Melanie Sumner (@MelSumner), Nathaniel Furniss (@nlfurniss), Chirag Patel (@chiragpat), Luke Melia (@lukemelia), David Baker (@acorncom), Godfrey Chan (@chancancode), Luc Boissaye (@ombr), Brenden Palmer (@brendenpalmer), Isaac Lee (@ijlee2), Chris Thoburn (@runspired), Sylvain MINA (@sly7-7), Anne-Greeth van Herwijnen (@MinThaMie), Igor Terzic (@igorT), Steve Calvert (@scalvert), Daniel Jalkut (@danielpunkass), Fardeen Panjwani (@wise-introvert), and Jonas Metzener (@anehx) for their contributions to Ember and related repositories! 💖

Connect with us 🤓

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! 🤞

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. See you in two weeks!

That's another wrap! ✨

Be kind,

Tim Foster, Chris Ng, Anne-Greeth van Herwijnen, Amy Lam, and the Learning Team

The Ember Times - Issue No. 179

The Ember Times — Sat, 08 May 2021 06:35:57 +0000

👋 Emberistas! 🐹

Global Accessibility Awareness Day, Readers' Question: Embroider status update, @use with Ember Apollo Client, and how JS frameworks solved the problem of rendering fast.

May 20th is Global Accessibility Awareness Day 💟

Global Accessibility Awareness Day, an awareness day focusing on digital access and inclusion for the more than one billion people with disabilities and impairments, will be celebrated on May 20, 2021. Here are some suggestions from Melanie Sumner (@MelSumner) on how you can get involved in some accessibility (a11y) related open source projects!

Help convert ember-component-patterns from Gitbook to an Ember app
Help with a11y-automation.dev which is a project to track a11y automation
Check out the help wanted page for issues in the ember-a11y GitHub organization
Help write some a11y-related linting rules for ember-template-lint

For more ideas please check out the Global Accessibility Awareness Day (GAAD) website!

Readers' Question: What’s the current status of the Embroider project? 🧵

What's the current status of the Embroider project? Embroider is nearing a 1.0 release. Embroider has been a long time coming, and the future is looking bright. Several large, heavily-tested Ember apps are already shipping to production with Embroider! The official cutover point will be when Ember CLI starts generating new apps with Embroider by default. 🙌 Embroider won't be turned on in the next Ember CLI 3.27 release, but the Enable Embroider Request for Comments (RFC) was opened up today by Travis Hoover (@thoov). Check it out!

If you're not familiar with Embroider, Embroider is a new build pipeline that will provide a way to compile Ember apps into spec-compliant, modern JavaScript. Using Embroider will make it easier to take advantage of code splitting and tree shaking in your app.

There are some risks if you choose to use Embroider in production today. You're likely to discover that some Ember addons don't work or will break your build. Right now, Embroider's own configuration options are subject to change, so you'll need to read the CHANGELOG.md to check for any gotchas when updating Embroider packages in your app.

The Community Adoption section of the RFC highlights that Embroider has created a testing package for addon authors to consume in their ember-try scenarios to verify their addons work under Embroider. A meta issue will be created tracking the Top 100 addons according to Ember Observer.

In case you missed it, Embroider was mentioned at virtual EmberConf 2021:

Keynote Part 2 AKA "Platform State of the Union" by Godfrey Chan (@chancancode) had an Embroider highlight, starting here.
In the Fun Fast Tools for Serious Work talk, Edward Faulkner (@ef4) describes the Embroider vision and what it can unlock!

Ember Apollo Client + `@use` 💡

In a new app, Chris Miller (@chrismllr) got to try out ember-apollo-client, a GraphQL client for Ember apps. 🧡

Chris summarized his learning in the article Ember Apollo Client + @use. The article concerns the following question:

Ember provides a few possible ways to fetch data. Which way do we follow with ember-apollo-client in the equation?

Towards the end, Chris shows how to use the @use API (from ember-could-get-used-to-this) to wrap ember-apollo-client methods. This solution may apply to other data-fetching APIs, such as Ember Data.

Interested in learning more? Check out Ember Apollo Client + @use today!

A Comparison of Rendering Engines of React, Angular, and Ember 🌐

Eine große Überraschung from Jeldrik Hanschke (@jelhan): The May issue of iX, a computer magazine from Germany, features the article Die Rendering-Engines von React, Angular und Ember im Vergleich.

The article is written for developers at all levels. Jeldrik provides a naive rendering engine to motivate the performance problems that it will encounter. Afterwards, you will get to learn how computer science helped create rendering engines that are performant.

How do React, Angular, and Ember turn your single-page application code into what the user sees? What are the strengths and weaknesses in their approach? If you want to learn more about rendering engines, we encourage you to check out Jeldrik's article in iX! (Note: This article is in German, but can be translated by a browser such as Google Chrome. You'll need to sign up on Heise.de to read, but there is a free trial period.)

Contributors' corner 👏

This week we'd like to thank Bas Kamer (@basz), Nathaniel Furniss (@nlfurniss), Isaac Lee (@ijlee2), Jen Weber (@jenweber), Chad Hietala (@chadhietala), Chris Ng (@chrisrng), Esquith Allen (@esquith), Steven Pham (@spham92), Bj Tecu (@btecu), Ryan Mark (@tylerturdenpants), Chris Manson (@mansona), Amy Lam (@amyrlam), Srihari (@srih4ri), Giles Thompson (@gilest), Brenden Palmer (@brendenpalmer), Andrew Kirwin (@amk221), Chris Thoburn (@runspired), Ben Demboski (@bendemboski), and Chris Garrett (@pzuraq) for their contributions to Ember and related repositories! 💖

Connect with us 🤓

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! 🤞

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. See you in two weeks!

That's another wrap! ✨

Be kind,

Chris Ng, Isaac Lee, Amy Lam, and the Learning Team