Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add writeup on in-element and named blocks #656

Merged
merged 7 commits into from
May 23, 2020
13 changes: 13 additions & 0 deletions source/2020-05-22-the-ember-times-issue-149.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ responsive: true
"My Experience with Ember.js" video series 🎥,
Ember Engines acceptance testing guides 📝,
Check out the new EmberMap video on Tracked Properties 👣,
Polyfills for in-element and named blocks 🚀,
Setting up Coveralls for your Ember Addons 💪,
Ember in COVID-19 Research 🔬📖🐹,
Global Accessibility Awareness Day Ember Blog Post 📖🐹,
Expand Down Expand Up @@ -78,6 +79,18 @@ Check out the [full video on EmberMap](https://embermap.com/topics/what-s-new-in

---

## [Polyfills for in-element and named blocks 🚀](https://github.com/ember-polyfills)

Right now you can get a **sneak peek** in [canary](https://emberjs.com/releases/canary/) of [public API {{in-element}}](https://github.com/emberjs/rfcs/blob/master/text/0287-promote-in-element-to-public-api.md) and [yieldable named blocks](https://github.com/emberjs/rfcs/blob/master/text/0460-yieldable-named-blocks.md).

What is `{{in-element}}`? Sometimes developers need to render content outside of the regular HTML flow. This concept is also called "portals". Components like dropdowns and modals use this technique to render stuff close to the root of the page, so as to bypass CSS overflow rules. (Some apps that are embedded into static pages even use this technique to update parts of the page outside the app itself.)

Since it was a common use case, Glimmer baked `{{-in-element}}` into the VM, but as part of the private (or intimate) API. With the passing of the [RFC](https://github.com/emberjs/rfcs/blob/master/text/0287-promote-in-element-to-public-api.md), it's going public, perhaps in Ember 3.20. So if you've been using `{{-in-element}}`, you should switch to the [`{{in-element}}` polyfill](https://github.com/ember-polyfills/ember-in-element-polyfill) instead, like [Krystan HuffMenne (@gitKrystan)](https://github.com/gitKrystan) did for these couple of addons: [ember-cli-head](https://github.com/ronco/ember-cli-head/pull/71) and [ember-maybe-in-element]( https://github.com/DockYard/ember-maybe-in-element/pull/25).

The [yieldable named blocks RFC](https://github.com/emberjs/rfcs/blob/master/text/0460-yieldable-named-blocks.md) makes it possible to pass one block or more to a component for customization. Check out the new [ember-named-blocks-polyfill](https://github.com/ember-polyfills/ember-named-blocks-polyfill) to take advantage of this feature now.

---

## [Setting up Coveralls for your Ember Addons 💪](http://hangaroundtheweb.com/2020/05/setting-up-coveralls-for-your-ember-addons/)

[Rajasegar Chandran (@rajasegar)](https://github.com/rajasegar/) blogs about setting up Coveralls for your Ember Addons. He explains how to setup [ember-cli-code-coverage](https://github.com/kategengler/ember-cli-code-coverage) and [Coveralls](https://coveralls.io/) for your repositories. Coveralls help you deliver code confidently by showing which parts of your code aren’t covered by your test suite. You can also learn how to use these techniques and make it part of your workflow using Github Actions.
Expand Down