The Ember Times - Issue No. 211

– By Anne-Greeth Schot-van Herwijnen

πŸ‘‹ Emberistas! 🐹

EmberConf 2024 videos πŸ—½, Live coding WarpDrive 🌌, Ember Europe Q2 πŸ‡ͺπŸ‡Ί, Games with Ember πŸ‘Ύ, New addons & libraries 🎊, Updated addons 🌟, EmberData v5.3.x πŸ“¦, Security fix for ember-cli-polyfill-io πŸ”“, read up on template tag & named blocks in the guides 🧱

πŸ—½ EmberConf 2024 videos

We enjoyed an energizing EmberConf on the 31st of May in New York City. If you missed the conference or want to watch specific talks back, you can check out the playlist on YouTube.

🌌 Live Coding at EmberConf 2024: WarpDrive Legacy Relationships Support

Join us as we dive into the exciting world of WarpDrive (previously known as EmberData) live from New York City! Despite the hustle and bustle, we're tackling some critical updates and sharing our progress with you. Apologies for the background noise, we couldn't find a quiet spot, but the energy of the city is all part of the experience. Stay tuned for insights, discussions, and a peek into our development process in this vibrant atmosphere!

πŸ‡ͺπŸ‡Ί Ember Europe remote event - 18th of July

Join a group of enthousiastic Emberistas for an informative and inspiring fully remote meet-up. On the 18th of July, Ember Europe will host their Q2 event. On the program are Chris Manson (@mansona) & Marco Otte-Witte to inform you about the Embroider Initiative and what's next, after that Alex (@void-mAlex) will tell us about <template>template</template>πŸͺžs and to close it off there is the mingling part of the event!

πŸ‘Ύ Games built with Ember

Are you looking for a few minutes to distract yourself from all work challenges, check out the LinkedIn games. They are built with Ember and are fun to solve!

🎊 New addons & libraries

  • ember-flash-notifications is a new addon that brings flash messages using the native Popover API. This means it works across all latest browsers, but might not work for older devices or browsers.
  • [ember-awesome-icons] is just like the previous addon created by Alexei Panov (@alexeipanov) and allows you to easily create components for free FontAwesome icons. This way you don't need to include all the icons in your bundle. Just the icons you need, fast as HTML and highly customizable with CSS, and SVG powers!
  • ember-phosphor-icons created by Ignace Maes (@IgnaceMaes) to give you access to the phosphor icon set. The addon has TypeScript & Glint support. When used with Embroider it gives you all the benefits of tree shaking to keep your bundle size small.
  • form-data-utils is now its own thing and has been extracted from ember-primitives. It's a utility function for extracting the FormData as an object from the native <form> element, allowing more ergonomic usage of default forms and fields. You can check out the example in the documentation.
  • ember-codemod-remove-inject-as-service created by Isaac Lee (@ijlee2) helps you to standardize how you inject service. Replace inject with service, ! with declare in TS files, and remove private and readonly keywords in TS files. You can use service since Ember 4.1 and inject is planned to be deprecated in Ember v6.
  • ember-engines-router-service created by Michael Villander (@villander) provides an API for authoring a Router service when using ember-engines. You will have the full RouterService API inside each engine. That means you can use APIs such as transitionTo and isActive, plus the new "external routing" APIs such as transitionToExternal and isActiveExternal which help link externalRoutes together.
  • ember-addon-v2-scanner created by Ignace Maes (@IgnaceMaes) is a CLI tool to scan your Ember project for addons that have a v2 version available. Just run npx ember-addon-v2-scanner@latest and check out the results!

🌟 Addon updates

  • ember-qunit v8.1.0 now ships with a theme config option that allows you to use the qunit-theme-ember to give your tests a real EmberJS look.
  • ember-a11y-refocus v4.1.0 provides some dependency updates, updated documentation (in the README), and a new flag called excludeAllQueryParams, an optional flag that will allow you to opt completely out of route evaluation (for transition announcements or focus management) if query params are involved. The new feature will allow some older apps to use the addon while they refactor code to allow them to simply use the addon w/o any customizations.
  • ember-can v5 converts the addon to v2 and it now supports TypeScript!
  • ember-string v4 converts the addon to v2.
  • ember-intl v7.x has entered a new era with its 7.x series. This new major brings you a minimized API (to improve onboarding and project maintainability), provides native types for improved TS and Glint support and adds better documentation. To upgrade check out the migration guide.
  • To support your developer experience you can use the Ember Language Server VSCode extention. The latest update supports template-lint configs in mjs format. Are you still using lifeart.vscode-ember-unstable then you can migrate to embertooling.vscode-ember.
  • NullVoxPopuli/eslint-configs v4 are Preston Sego (@NullVoxPopuli)'s preferred ESLint configs for all their projects. They use only overrides so that they're easy to maintain and update. Version 4 now supports gjs and gts out of the box.
  • ember-sortable v5.1.0 adds the feature that allows you to create a sortable list that works with a grid. Items can be moved up, down, right, or left within the same list.

πŸ“¦ EmberData v5.3.x

We are happy to inform you about this massive improvement that shipped to EmberData. Since v5.3.4:

  • It ships fully as v2-addons,
  • All packages ship native types,
  • Mirror packages are now available for 5.3,
  • A new cli tool has been added to help you quickly configure your 4.x project for typescript,
  • ember-inflector and @ember/string are no longer project dependencies.

Dive into the details of the latest release now.

πŸ”“ Security fix for ember-cli-polyfill-io

Delivering polyfills from polyfill.io has turned into a service provider attack against users of your apps. An update to ember-cli-polyfill will be released to fix this. You can also right now change your config by changing the src for polyfill-io config in ember-cli-build.js to https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js. Also make sure you need this dependency, removing it removes the risk completely!

πŸ“š Documentation on Template Tag Format

The Ember guides now include extensive information about our <template> tag format. The template tag format is a powerful, new way to write components in Ember. It's a single-file format that combines the component's JavaScript and Glimmer template code. The <template> tag keeps a clear separation between the template language and the JavaScript around it. If you want to know more about this, check out the documentation.

🧱 Documentation on Named Blocks

If you want to yield content to different spots in the same component, you can use named blocks. However, our guides were lacking information on how to do this. Thanks to Shirin Boomi (@Shishouille) you can now learn how to use it and make the most of yielding information throughout your components.

πŸ‘ Contributors' corner

This week we'd like to thank Aaron Chambers (@achambers), @NullVoxPopuli, Scott Ball (@scotttball), David Taylor (@davidtaylorhq), Dave Laird (@kiwiupover), Isaac Lee (@ijlee2), Bert De Block (@bertdeblock), Krystan HuffMenne (@gitKrystan), Kelly Selden (@kellyselden), Ignace Maes (@IgnaceMaes), Brad Overton (@Techn1x), Sergey Astapov (@SergeAstapov), Edward Faulkner (@ef4), Rich Glazerman (@richgt), Leonora (@Herover), Chris Ng (@chrisrng), Vedant Singhania (@raspberri05), @Rashmi-N-Sahoo, Arun Pragadeeswar (@ArunPragadeeswar007), Jared Galanis (@jaredgalanis), Adam WoΕΊny (@wozny1989), Chris Thoburn (@runspired), Mehul Kiran Chaudhari (@MehulKChaudhari), Anne-Greeth Schot-van Herwijnen (@MinThaMie), Kirill Shaplyko (@Baltazore), Chris Manson (@mansona), Adam Barney (@cabarney), Patrick Pircher (@patricklx), Dean Levinson (@deanylev), Markus Sanin (@mkszepp), Simon Ihmig (@simonihmig), Lucas Hill (@LucasHill), Marine Dunstetter (@BlueCutOfficial), and Katie Gengler (@kategengler) for their contributions to Ember and related repositories! πŸ’–

πŸ€“ Connect with us

Office Hours Tomster Mascot

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,

the Learning Team