The Ember Occasions – Difficulty No. 211

👋 Emberistas! 🐹

EmberConf 2024 movies 🗽, Dwell coding WarpDrive 🌌, Ember Europe Q2 🇪🇺, Video games with Ember 👾, New addons & libraries 🎊, Up to date addons 🌟, EmberData v5.3.x 📦, Safety repair for ember-cli-polyfill-io 🔓, learn up on template tag & named blocks within the guides 🧱

We loved an energizing EmberConf on the thirty first of Could in New York Metropolis. If you happen to missed the convention or need to watch particular talks again, you possibly can try the playlist on YouTube.

Be a part of us as we dive into the thrilling world of WarpDrive (beforehand often called EmberData) reside from New York Metropolis! Regardless of the hustle and bustle, we’re tackling some essential updates and sharing our progress with you. Apologies for the background noise, we could not discover a quiet spot, however the power of town is all a part of the expertise. Keep tuned for insights, discussions, and a peek into our growth course of on this vibrant environment!

Be a part of a gaggle of enthousiastic Emberistas for an informative and provoking absolutely distant meet-up. On the 18th of July, Ember Europe will host their Q2 occasion. On this system are Chris Manson (@mansona) & Marco Otte-Witte to tell you in regards to the Embroider Initiative and what’s subsequent, after that Alex (@void-mAlex) will inform us about <template>template</template>🪞s and to shut it off there may be the mingling a part of the occasion!

Are you searching for a couple of minutes to distract your self from all work challenges, try the LinkedIn video games. They’re constructed with Ember and are enjoyable to resolve!

🎊 New addons & libraries

• ember-flash-notifications is a brand new addon that brings flash messages utilizing the native Popover API. This implies it really works throughout all newest browsers, however won’t work for older units or browsers.
• [ember-awesome-icons] is rather like the earlier addon created by Alexei Panov (@alexeipanov) and lets you simply create parts at no cost FontAwesome icons. This fashion you needn’t embrace all of the icons in your bundle. Simply the icons you want, quick as HTML and extremely customizable with CSS, and SVG powers!
• ember-phosphor-icons created by Ignace Maes (@IgnaceMaes) to offer you entry to the phosphor icon set. The addon has TypeScript & Glint assist. When used with Embroider it offers you all the advantages of tree shaking to maintain your bundle dimension small.
• form-data-utils is now its personal factor and has been extracted from ember-primitives. It is a utility operate for extracting the FormData as an object from the native <type> component, permitting extra ergonomic utilization of default kinds and fields. You may try the instance within the documentation.
• ember-codemod-remove-inject-as-service created by Isaac Lee (@ijlee2) lets you standardize the way you inject service. Exchange inject with service, ! with declare in TS recordsdata, and take away non-public and readonly key phrases in TS recordsdata. You should use service since Ember 4.1 and inject is deliberate to be deprecated in Ember v6.
• ember-engines-router-service created by Michael Villander (@villander) supplies an API for authoring a Router service when utilizing ember-engines. You should have the total RouterService API inside every engine. Which means you need to use APIs similar to transitionTo and isActive, plus the brand new “exterior routing” APIs similar to transitionToExternal and isActiveExternal which assist hyperlink externalRoutes collectively.
• ember-addon-v2-scanner created by Ignace Maes (@IgnaceMaes) is a CLI device to scan your Ember undertaking for addons which have a v2 model out there. Simply run npx ember-addon-v2-scanner@newest and take a look at the outcomes!

🌟 Addon updates

• ember-qunit v8.1.0 now ships with a theme config possibility that lets you use the qunit-theme-ember to offer your assessments an actual EmberJS look.
• ember-a11y-refocus v4.1.0 supplies some dependency updates, up to date documentation (within the README), and a brand new flag referred to as excludeAllQueryParams, an optionally available flag that may can help you choose fully out of route analysis (for transition bulletins or focus administration) if question params are concerned. The brand new characteristic will permit some older apps to make use of the addon whereas they refactor code to permit them to easily use the addon w/o any customizations.
• ember-can v5 converts the addon to v2 and it now helps TypeScript!
• ember-string v4 converts the addon to v2.
• ember-intl v7.x has entered a brand new period with its 7.x collection. This new main brings you a minimized API (to enhance onboarding and undertaking maintainability), supplies native varieties for improved TS and Glint assist and provides higher documentation. To improve try the migration information.
• To assist your developer expertise you need to use the Ember Language Server VSCode extention. The most recent replace helps template-lint configs in mjs format. Are you continue to utilizing lifeart.vscode-ember-unstable then you possibly can migrate to embertooling.vscode-ember.
• NullVoxPopuli/eslint-configs v4 are Preston Sego (@NullVoxPopuli)‘s most popular ESLint configs for all their tasks. They use solely overrides so that they are straightforward to take care of and replace. Model 4 now helps gjs and gts out of the field.
• ember-sortable v5.1.0 provides the characteristic that lets you create a sortable listing that works with a grid. Gadgets might be moved up, down, proper, or left inside the similar listing.

We’re comfortable to tell you about this large enchancment that shipped to EmberData. Since v5.3.4:

• It ships absolutely as v2-addons,
• All packages ship native varieties,
• Mirror packages are actually out there for five.3,
• A brand new cli device has been added that can assist you rapidly configure your 4.x undertaking for typescript,
• ember-inflector and @ember/string are now not undertaking dependencies.

Dive into the small print of the newest launch now.

Delivering polyfills from polyfill.io has changed into a service supplier assault in opposition to customers of your apps. An replace to ember-cli-polyfill can be launched to repair this. You can too proper now change your config by altering the src for polyfill-io config in ember-cli-build.js to https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js. Additionally ensure you want this dependency, eradicating it removes the danger fully!

The Ember guides now embrace intensive details about our <template> tag format. The template tag format is a robust, new solution to write parts in Ember. It is a single-file format that mixes the element’s JavaScript and Glimmer template code. The <template> tag retains a transparent separation between the template language and the JavaScript round it. If you wish to know extra about this, try the documentation.

If you wish to yield content material to completely different spots in the identical element, you need to use named blocks. Nonetheless, our guides had been missing info on how to do that. Due to Shirin Boomi (@Shishouille) now you can discover ways to use it and profit from yielding info all through your parts.

This week we would prefer 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), Wealthy 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 his or her contributions to Ember and associated repositories! 💖

Questioning about one thing associated to Ember, Ember Knowledge, Glimmer, or addons within the Ember ecosystem, however do not know the place to ask? Readers’ Questions are only for you!

Submit your individual brief and candy query underneath bit.ly/ask-ember-core. And don’t fear, there are not any foolish questions, we recognize all of them – promise! 🤞

Wish to write for the Ember Occasions? Have a suggestion for subsequent week’s situation? Be a part of us at #support-ember-times on the Ember Neighborhood Discord or ping us @embertimes on Twitter.

Carry on prime of what is been happening in Emberland this week by subscribing to our e-mail e-newsletter! You can too discover our posts on the Ember weblog. See you in two weeks!

That is one other wrap! ✨

Be form,

the Studying Staff