The Ember Occasions – Situation No. 162

👋 Emberistas! 🐹

Replace from the Accessibility Working Group 🙌,
syntax highlighting in markdown with ember-showdown-prism 🔦,
testing your Mirage.js setup 🧪,
and final, however not least, learn the proposed {{id}} helper RFC 🆔.

In March 2020, a gaggle of Ember builders shaped the Accessibility (A11y) Strike Staff, now referred to as the Ember A11y Working Group. The group wished to deal with the problems that have been outlined in RFC #595: Technical A11y Points in New Ember Apps.

This week, Melanie Sumner (@MelSumner) revealed an official weblog publish to supply a standing replace. We encourage you to learn the weblog publish. Accessible apps are for everybody and the discussions, RFCs, and addons began by the A11y Strike Staff could affect your app improvement.

As all the time, we give an enormous shout-out to all neighborhood members who participated within the A11y Strike Staff. 💜

Chris Manson (@mansona) launched the primary working model of ember-showdown-prism this week. This drop-in addon routinely provides Prism syntax highlighting to Markdown code blocks in case you are utilizing showdown.

This addon provides two distinctive options on prime of the prism and showdown options. Firstly, when you present a data-filename attribute, it’ll add this identify to your code block together with the file kind. You’ve in all probability seen this earlier than within the Ember Guides. Secondly, line numbers are added to the code block and are additionally clickable which provide you with sharable hyperlinks in case you are utilizing Fastboot or prember.

Chris extracted the code from the guides, and with the assistance of Nick Schot (@nickschot) managed to offer you this cool addon with these superior options.

Take a look at the demo and the GitHub repo and add some cool code blocks to your weblog or documentation!

Steve Szczecina (@steveszc) proposed including a built-in {{id}} helper for producing distinctive IDs. This helper serves as a substitute for elementId, which is on the market in basic elements however not in Glimmer elements or route templates. Moreover, it powers frequent use circumstances comparable to:

• Associating label and enter parts utilizing the label’s for attribute and the enter’s id attribute.
• Utilizing WAI-ARIA attributes to enhance accessibility (e.g. aria-labelledby, aria-controls)
• Integrating third occasion libraries that connect themselves to DOM parts utilizing DOM IDs (e.g. maps, calendars, jQuery plugins)

The proposed {{id}} helper may be invoked in 2 methods: with none argument or with a for argument.

When no arguments are handed, it’ll return a brand new distinctive ID string for each invocation. This invocation fashion would often be paired with a let block.

{}
  <label for={{emailId}}>E mail handle</label>
  <enter id={{emailId}} kind="electronic mail" />
{{/let}}

<label for="{{id for=this}}-email">E mail handle</label>
<enter id="{{id for=this}}-email" kind="electronic mail" />

For extra data on why we’d like the {{id}} helper, please take a look at RFC #659. Remember to present your suggestions by including an emoji response or leaving a remark!

In case you’re a Mirage.js person, you might have considered trying to check out Tobias Bieniek’s (@turbo87) new weblog publish on the simplabs weblog that discusses testing your Mirage setup. 🎉

If in case you have used Mirage in your testing atmosphere, you know the way highly effective it may be. The publish covers a distinct kind of check involving Mirage – checks that check your Mirage API. 🤯 As Tobias factors out, true end-to-end testing may be pricey in time and complexity. One method to obtain an analogous assurance that your mocked API is returning outcomes much like your actual API is to check it.

You will additionally discover a number of useful examples of the way you would possibly go about attaining a set of checks that check your Mirage responses. In case you’re a Mirage person you actually ought to go give the publish a learn.

This week we would wish to thank Aaron Renoir (@arenoir), Amy Lam (@amyrlam), Bryan Mishkin (@bmish), Chris Ng (@chrisrng), Isaac Lee (@ijlee2), Jared Galanis (@jaredgalanis), gguri4549 (@kookyungmin), Kris Selden (@krisselden), Melanie Sumner (@MelSumner), Anne-Greeth van Herwijnen (@MinThaMie), Chris Garrett (@pzuraq), Raido Kuli (@raido), Robert Jackson (@rwjblue), Scott Newcomer (@snewcomer) 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 personal quick and candy query underneath bit.ly/ask-ember-core. And don’t fear, there aren’t any foolish questions, we respect all of them – promise! 🤞

Need to write for the Ember Occasions? Have a suggestion for subsequent week’s subject? Be a part of us at #support-ember-times on the Ember Group 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 too can discover our posts on the Ember weblog.

P.S. Our subsequent subject will probably be in two weeks. See you then!

That is one other wrap! ✨

Be sort,

Anne-Greeth van Herwijnen, Chris Ng, Isaac Lee, Amy Lam, Jared Galanis and the Studying Staff