Snowpack is a post-install tool. It runs after npm install, and it essentially exists to convert your npm packages (in your “nodemodules/” directory) into JS files that run in the browser without a bundler (written to a “webmodules/” directory). Creating a sample app In this tutorial we are going to create a simple demo app which is going to make use of a library called finance. We are going to create an app to calculate simple interest from principal, rate and time.

In this article, we are going to take a look at a tool called JARVIS which will profoundly transform the way how you write codemods. This is a continuation post for AST Finder which is a tool to generate an api to find AST nodes automatically from source code. If you want to know more about codemods, their building blocks and how they work, please check out this detailed post about codemods.

In this article, we are going to take a look at a tool called ‘AST Finder’ which will significantly improve the developer experience for writing codemods. This is a continuation post for AST Builder which is a tool to generate AST nodes automatically from source code. If you want to know more about codemods, their building blocks and how they work, please check out this detailed post about codemods. What? AST Finder is actually a playground for finding AST nodes using source code.

In this article, we are going to take a look at a tool called ‘AST Builder’ which will significantly improve the developer experience for writing codemods. Codemod is a tool/library to assist you with large-scale codebase refactors that can be partially automated but still require human oversight and occasional intervention. Codemod was developed at Facebook and released as open source. If you want to know more about codemods, their building blocks and how they work, please check out this detailed post about codemods.

In this article, we take a look at Codemods, a tool for making sweeping changes across your code with ease and effectiveness. Codemods are invented by a team of developers from Facebook to assist large-scale migrations in code-base, and we are going to take a deep look into a particular codemod tool called jscodeshift. Refactoring Before we dive into the codemod tools like jscodeshift, we need to understand why we need to do large-scale refactorings and what is really meant by refactoring.

A Refreshing Guide to Object.freeze in Javascript by Dr.Victor Fries What killed the dinosaurs? The Ice Age! In JavaScript, objects are used to store keyed collections of various data and more complex entities. Objects penetrate almost every aspect of the JavaScript language. The object might be accessed as global or passed as an argument. Functions that have access to the object can modify the object, whether intentionally or accidentally. To prevent modification of our objects, one of the techniques is to use Object.

Arguing for the sake of arguments in JavaScript This article deals with some intricacies revolving around the arguments object, a magical and mysterious creature residing in the functional realms of the Javascript world, which can be summoned anytime in your code by the programming wizards without any spells, incantations or sorcery. The arguments object is an Array-like object corresponding to the arguments passed to a function. It is a local variable available within all (non-arrow) functions.

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.