In this article we are going to take a look at an Ember.js addon called ember-csz which provides template helpers for csz, a Runtime CSS-Modules with SASS like pre-processing. This is based on a talk I gave recently at ESNextConf. I just wanted to experiment the same with Ember.js and it came out well. I liked it very much the idea of keeping your styles as part of your component.js just like how the React community uses other awesome CSS-in-JS solutions like Styled Components and Emotion.

In this tutorial, we will see how to setup automated code coverage metrics collection for your Ember addons using Coveralls and Github Actions. Why Code coverage? In simple terms, code coverage is the fraction or percentage of code paths executed by some test or test suite of a program. It is generally measured by a tool which executes the test and logs the lines of code, the test “touches” while running.

In this article, we are going to take a glimpse at the ember-codemods-telemetry-helpers package and how it helps to create more advanced codemods for Ember.js. If you want a more in-depth introduction to codemods, you can checkout this post detailing the why’s and how’s of codemods. Telemetry for layman First we will take a look at what Telemetry is all about. According to Wikipedia, Telemetry is the collection of measurements or other data at remote or inaccessible points and their automatic transmission to receiving equipment for monitoring.

Nobody can predict the future, but everybody can wish for something in it. It could be for the benefit and interest of one person or a community as a whole. I am putting down my thoughts and wishes for Ember.js as both a consumer of the framework itself and producer of the supporting tools and addons for the same. The best way to predict the future is to invent it.

Everything one can expect in Ember Octane A few days ago, Tom Dale opened the Ember 2018 Roadmap RFC that set the goals for Ember in 2018. The RFC consisted of three major goals like: Improve communication and streamline decision-making, and empower new leaders. Finish the major initiatives that have already been started. Ship a new edition, Ember Octane, focused on performance and productivity. In this article we will focus on Ember Octane which is primarily targeted to improve performance of Ember applications for low-end devices and the like.

Creating Connection-aware Ember Media Components In this article, we will take a look at creating Ember Components serving media content such as images and videos based on the network bandwidth of the users. For this, we will make use of the Network Information API provided by the browsers. Currently, the only browser that supports this api is Chrome, soon we are expecting that all the browsers will start supporting the network information api.

An Elementary Guide to Ember Build Performance When we talk about build performance, it is important to understand that there are several build phases: Cold build Warm build Rebuild Cold build Cold build is the build which happens when you boot your app up for the first time. This build is the slowest because the cache is not yet populated and the application is booting for the first time.

Table of Contents How to create an accessible checkbox component in Ember? Class diagram Component Interface Template Component Github Demo How to create an accessible checkbox component in Ember? In this tutorial we will see how to create an accessible checkbox component in Ember based on the WAI-ARIA authoring practices. A checkbox allows the user to toggle between two choices – checked and not checked.

Table of Contents 1. How to create an accessible slider component in Ember? 1.1. Class diagram 1.2. Component Interface 1.3. aria-slider -> template 1.4. aria-slider -> component 1.5. aria-slider-thumb -> component 1.6. Source Code 1.7. Demo 1.8. References  1 How to create an accessible slider component in Ember? In this tutorial we will see how to create an accessible slider component in Ember based on the WAI-ARIA authoring practices.