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.

Table of Contents Inline Temp Motivation Mechanics Declare the temp as const if it isn’t already, and compile. Find all references to the temp and replace them with the right-hand side of the assignment. Compile and test after each change. Remove the declaration and the assignment of the temp. Compile and test. Inline Temp You have a temp that is assigned to once with a simple expression, and the temp is getting in the way of other refactorings.

In this article we take a look at one of the refactoring techniques named as Inline Function originally known as Inline Method. We will see how to apply these techniques in Javascript code since the original methodology is language agnostic. This is second in the series of articles exploring various refactoring techniques by Martin Fowler.  Table of Contents Javascript Refactoring Series: Inline Function Motivation Mechanics Check that the function is not polymorphic Find all calls to the function Replace each call with the function body.

In this article we take a look at one of the refactoring techniques named as Extract Function originally known as Extract Method. We will see how to apply these techniques in Javascript code since the original methodology is language agnostic. This is first in the series of articles exploring various refactoring techniques by Martin Fowler. Table of Contents Extract Function (aka Extract Method) Motivation Example: No local variables Example: Using Local Variables Example: Reassigning a Local Variable Extract Function (aka Extract Method) You have a code fragment that can be grouped together.

The loop is the typical way of processing collections, but with the greater adoption of first-class functions in Javascript the collection pipeline is an appealing alternative. In this article we look at refactoring loops to collection pipelines with a small example. Table of Contents Refactoring a simple loop into a pipeline in Javascript Defining our Author data type Simple and plain For loop Using ES5 forEach Using a Collection Pipeline Refactor - Moving filter before map Refactor - Combine filters Reference Credits Refactoring a simple loop into a pipeline in Javascript The loop is the typical way of processing collections, but with the greater adoption of first-class functions in Javascript the collection pipeline is an appealing alternative.

Cohesion is the measure of strength of the association of elements within a module. Modules whose elements are strongly and genuinely related to each other are desired. A module should be highly cohesive. Table of Contents 1. Do you care about Cohesion in Javascript Functions? 1.1. Functional Cohesion 1.1.1. Sequential Cohesion 1.1.2. Communicational Cohesion 1.1.3. Temporal Cohesion 1.2. Sequential Cohesion 1.3. Communicational Cohesion 1.4. Temporal Cohesion 1.

In this article i will show you how to use the js2-refactor tool in Spacemacs which is a community built version of Emacs using Space key as the leader key. Table of Contents 1. Refactor your Javascript like a Pro with js2-refactor 1.1. Installation - Emacs 1.2. Installation - Spacemacs 1.3. Usage 1.4. Refactorings 1.4.1. js2r-expand-array 1.4.2. js2r-expand-object 1.4.3. js2r-expand-function 1.4.4. js2r-extract-function 1.4.5. js2r-extract-method 1.4.6. js2r-extract-var 1.4.7. js2r-contract-array 1.

In this tutorial, we will be building a Wikipedia search engine using RxJS Table of Contents 1. Build a Wikipedia search engine using RxJS 1.1. What is RxJs? 1.2. HTML markup for the search box 1.3. Capturing the keyup events in search box 1.4. Throttle the input events 1.5. Get only distinct values by eliminating other characters 1.6. Querying Wikipedia 1.7. Subscribe to the event stream 1.8. Links 1 Build a Wikipedia search engine using RxJS 1.

This tutorial is the second part of our previous tutorial where we built a simple registration form using Cycle.js. In this part, we will introduce some basic concepts for building Cycle.js like seeds, intents and state. Table of Contents 1. Cycle.js tutorial: Registration Form - Part 2 1.1. About Cycle.js 1.2. Create the application boilerplate 1.3. Defining the state update function 1.4. Defining seeds for the application state 1.