Posts

,

15 Blogs Every Javascript Developer Should Follow in 2020

I’ve been following the most interesting JavaScript blogs quite for a while now (this is a part of my job running https://weekendjs.com/). There are many of them. More than you might think. There are blogs started more than ten years ago, and there are relatively new ones. Some bloggers are JavaScript superstars, and others are regular engineers like you and me. Some blogs are focused on a particular ecosystem (say Angular or React, or Vue), while others are rather general.

The exciting thing is that the number of good blogs with really robust material keeps growing from one year to another. It is a promising trend, which hopefully will continue.

A few words about who makes it into the list: only the bloggers who write relatively often (at least once per month). Those are all personal blogs, not hubs, companies, etc. And of course, the main metric is the quality of the material.

OK, enough words. Please welcome, in no particular order, the top 15 blogs a JavaScript developer should follow in 2018.

2ality

The author of the “Exploring ES6” book, Dr. Axel Rauschmayer is long known for his deep and comprehensive articles. They are always well-structured and tend to cover the topics in every detail. Usually he writes about ES6/7/8 features and how to use it, but recently, for example, he did a series of articles on ReasonML, which is a hot new JS-transpilable language from Facebook.

David Walsh

David Walsh is an engineer who works at Mozilla from Madison, Wisconsin. David writes regularly (several times per month). His posts are about web development in general. Usually, these are small, understandable pieces for a broad audience on JavaScript’s new features, Node, and more.

Reginald Braithwaite

Reginald “raganwald” Braithwaite, is the author of brilliant “JavaScript Allongé,” one of my favorite JavaScript books. If you haven’t read it, go ahead and do it. Seriously, it’s a pure pleasure, I promise. As you might expect, he writes a lot on functional-related topics. His articles are probably not for beginners and instead aimed at a more experienced audience.

Michael Herman

Michael Herman is a developer and public speaker. He writes about a lot of stuff such as Python, Docker, etc. Technically, I could leave him out of this list. But his write-ups on JavaScript and related material are extremely practical and helpful, so I just can’t leave out his brilliant blog.

Addy Osmani

I’m not sure I need to introduce Addy Osmani. He is a Chrome core developer, a web performance evangelist, and a public speaker. You probably use libraries he has written on a daily basis; just check his GitHub. He also wrote the very popular “Learning JavaScript Design Patterns” book. In his blog though, he writes a lot on Progressive Apps and is one of the core contributors to the concept.

Ponyfoo

This one is easily recognizable by the iconic pixelated image of a unicorn. The author writes lots about new ECMAScript features, in particular modules, and is (as you might expect) in the middle of writing a book about modules.

Dave Ceddia

Dave’s first post dates back to 2015. And it was about Angular 2 (yeah, can you believe it? Time runs so fast). In 2017, though, it seems as if he changed his preferred framework and started writing more on React. He’s also an author of a lovely little book called “Pure React” which is aimed at starters.

Todd Motto

Speaking of Angular, it’s surprisingly difficult to find robust material on the topic. It’s understandable, perhaps, since React seems to be a lot more fun to write about. Well, at least we have this guy. Todd writes a lot on connected topics (TypeScript, NGRX), speaks at the conferences and also does courses. He’s easily the best individual Angular blogger out there.

Tyler McGinnis

Tyler McGinnis is the author of many thorough React courses. So, as you might expect, he also writes a lot about React both Web and Native. His blog also contains a lot of video materials, which are a joy to watch.

John Papa

John Papa is a developer advocate, public speaker, and of course, a blogger. He also authored several courses on for Pluralsight. He used to write a lot on Angular, especially Angular 1, but it seems he’s more into Vue now. If you’re interested in this React alternative you should follow this guy.

Valentino G.

This guy writes a lot of different topics, including Django and Node. Most often he writes about React and friends.

Ben Nadel

I didn’t know about this one until recently, but now it’s easily one of my favorite JavaScript blogs. My favorite part is that he writes a lot about UX and its intersections with JavaScript. Highly recommend it!

Bram Van Damme

It’s interesting that lots of bloggers are from Europe. Like Bram, who is an engineer from Belgium. He writes about JavaScript and also more in general about the web and web development.

Ivan Akulov

Ivan writes about React and Webpack, and also in general about different optimizations you’ll need to do as a web developer. His write-ups are highly practical, and may not suit the beginners.

Robin Wieruch

Robin works in Berlin. He writes a lot (and quite often) about React and friends. But also (and that’s what makes him interesting) he writes about stuff like AI and machine learning. There aren’t a lot of places where you can read articles like “A Web Developer’s Guide to Machine Learning in Javascript” or “Neural Networks in Javascript.” If you’re interested in those topics, you definitely need to follow Robin.

I hope you liked this list. Now go ahead and add them to your preferred RSS reader as I did and enjoy the perpetual flow of the best articles from the JavaScript world!

, , , , ,

Where Did Vue.js Come From?

Vue.js’s popularity has been climbing pretty fast. It has about 3/4 the number of stars on Github as React, and more than double the stars of Angular. The watchers and forks are also pretty comparable. And the while Vue.js hasn’t nearly caught up yet, you can see a definite trend of relatively rapid growth on Google Trends that is comparable to the growth of React and Angular earlier in their lives.

graph

Angular is still on top, but Vue.js is rising quickly

There needs to be a reason that Vue.js is growing rapidly, especially when the JavaScript framework ecosystem is already filled with plenty of great frameworks. Vue.js doesn’t truly offer anything that other frameworks don’t already have, but it does bring together features from other frameworks in a unique way that may be a better combination. Which of these features did Vue.js glean from other frameworks, and from which ones?

Component-Based

“Component-based” means that the framework is based around creating, composing, and nesting user interface building blocks called components. These components encapsulate everything to do with themselves rather than moving the logic out to a controller or something similar. Components go beyond view objects because they because they can be used directly in the templates as if they were HTML elements:

 

Some Title

Hello

 

React is likely the primary source of inspiration for Vue.js in this area, though you could argue that Polymer and/or Web Components should be considered the inspiration here. I lean toward React primarily because Polymer is designed to actually create custom elements to be used directly in the HTML, whereas React and Vue.js use their components as if they were custom elements only in their templates (JSX in React’s case) and use the rendering engines and template compilers to only give the browser HTML elements that it already knows.

In the end, though, it doesn’t really matter who the idea was stolen from. What matters is that the declarative nature component-based systems are far simpler to use and compose than the imperative, old-school views and sub-views that came with Backbone.js and similar MV* frameworks.

Directives

Directives are a means of control flow and DOM manipulation that are built into the templates and look like HTML attributes. For example:

    • {{ item.message }}

 

 

The v-for attributes is a directive that loops through items so they can all be displayed in li elements. Angular and Aurelia do very similar things. In Angular it would look like this:

    • {{ item.message }}

 

 

And Aurelia looks like this:

    • ${ item.message }

 

 

If you don’t have this kind of control capability embedded in the template syntax, the code becomes more difficult to read because you need to switch back and forth between the template syntax and the JavaScript’s syntax. Once again, the code is becoming more declarative instead of imperative.

Single, HTML-Based Component File

I wrote an article entirely about Vue’s Single File Components and the benefits they provide. It turns out, though, that Vue.js wasn’t the originator of this idea, at least not entirely. Vue.js stole this from Polymer/Web Components. Right on Polymer’s home page, halfway down the page you’ll find an example that looks remarkably similar to a Vue.js Single File Component:

<dom-module id="contact-card">
  <style>...</style>
  <template>
    <content></content>
    <iron-icon icon="star" hidden$="{{!starred}}"></iron-icon>
  </template>
  <script>
    Polymer({
      is: 'contact-card',
      properties: {
        starred: Boolean
      }
    });
  </script>
</dom-module>

Of course, Vue.js goes beyond this by allowing you to use alternative languages for the CSS (Sass, Less, Stylus, CSS Modules), HTML (Pug), and JavaScript (TypeScript, CoffeeScript) due to the required build step. The combination of all of these languages and technologies into a single file may be one of the greatest features for component-based frameworks due to being able to congregate everything related to the component into a single file for better maintenance.

Limited Functionality for Greater Flexibility

Vue.js in and of itself is focused around rendering reactive and interactive user interfaces. It offers little in the way of structure or architecture. This is completely on purpose and it follows pretty much the same pattern as React in this regard. Like React, it lets other libraries handle the extra functionality, such as routing and more advanced, centralized state management. Unlike React, though, Vue.js provides officially supported libraries for some of these things, rather than leaving them up to third parties.

By removing this functionality from the core framework, you get a smaller file size and the flexibility to use other libraries if you want to. The trade-offs are that there are more choices to make and there isn’t necessarily 1 right way to do something because everyone is using something different. By officially supporting vuex and vue-router, though, these trade-offs are mitigated.

Conclusion

Everything is based off of something that already exists, and Vue.js is definitely no exception. Despite having nothing new, though, Vue.js’s growth and popularity most likely came about because it stole and combined many of the best concepts from the other frameworks out there and kept out many of the things that cause headaches for developers.

, , , ,

Comparing Angular 1 & Angular 2 Through Building a Pomodoro Timer

Modern web development offers an incredible variety of tools, libraries, and frameworks to build web sites/applications. As of 2016, jQuery, React, Angular, and Vue are the most popular front-end libraries/frameworks in use. They can all be used to build and accomplish similar things, but in different ways. What are the advantages/disadvantages of each? How does each approach vary? What do the new tools of React, Vue, and Angular 2 offer that Angular 1, jQuery, and vanilla JS didn’t?

In part 1 of the series, we saw the similarities and differences between javascript and jQuery while building the same pomodoro app and we also discussed the advantages and disadvantages of each. In part 2 of the series, we will see how to use angular 1 and angular 2 to build the same pomodoro timer and we will discuss the difference in approaches taken by the two frameworks.

Explore Angular Courses

What is a pomodoro timer?

The pomodoro timer is an easy-to-use productivity method. Using this method, you work in 25 minute spurts with 5 minute breaks in between. Many people find it helpful for helping them focus and work on tasks during the day.

pomodoro timer

Project Overview

In this tutorial, first we will create a pomodoro timer using Angular 1. Then, we will re-create the same pomodoro timer using Angular 2.

Here is how the final version of pomodoro timer built using Angular 1 looks like :

See the Pen Pomodoro Timer : : Angular1.5 by Raj Gupta (@rajdgreat007) on CodePen.

Here is how the final version of pomodoro timer built using Angular 2 looks like :

See the Pen Pomodoro Timer : : Angular2 by Raj Gupta (@rajdgreat007) on CodePen.

Our pomodoro timer shows minutes, seconds, and gives simple control buttons. It’s a simple timer but can give enormous productivity gains if used right.

Building the Pomodoro Timer : Angular 1

Let’s first write the html code to create various elements of the pomodoro timer.

<div id="pomodoro-app">
<div id="container">
<div id="timer">
<div id="time">{{toDoubleDigit(minutes)}}
:
{{toDoubleDigit(seconds)}}</div>
<div id="filler"></div>
</div>
<div id="buttons"><button id="work">Work</button>
<button id="shortBreak">Short Break</button>
<button id="longBreak">Long Break</button>
<button id="stop">Stop</button></div>
</div>
</div>

Angular 1 has MVC(Model, View, Controller)/MVVM(Model, View, ViewModel) architecture. The model represents data (eg. javascript objects) of the application. The view is how we can display the data to user. Since Angular 1 supports two way data binding, any change in the model will automatically update the view and vice versa. The controller consists of the code that controls the interaction between model and view.

By setting ng-app=“pomodoroApp”, we are marking the corresponding div (with id pomodoro-app) as the root element of the Angular application. “pomodoroApp” is the name of the angular module that we will define later in javascript code. By setting ng-controller=“pomodoroController”, we are attaching a controller function (will be defined later) to the view. The controller function will consist of variables and functions needed for the view. ng-click defines the function (defined in controller) that will be executed when the corresponding button is being clicked. We will be using a background filler that will keep increasing as time progresses.

Let’s apply css to the above markup.

#container{
border:1px solid #333;
border-radius :20px;
width:400px;
margin:20px auto;
padding:20px;
text-align:center;
background : #333;
}

#timer{
color:#f00;
font-size:50px;
margin:10px auto;
border : 5px solid red;
border-radius:50%;
width:200px;
height:200px;
overflow:hidden;
position:relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:default;
}

#time{
margin-top:70px;
z-index : 1;
position:relative;
}

/*
filler width is set to 200px (i.e. equal to width of the timer) so that it completely covers the timer in background. The height is initially set to 0px and it increases as timer progresses to give background fill effect.
*/

#filler{
background : #ddffcc;
height: 0px;
width: 200px;
position:absolute;
bottom:0;
}

#buttons button {
background:#4da6ff;
border:none;
color:#fff;
cursor:pointer;
padding:5px;
width:90px;
margin:10px auto;
font-size:14px;
height : 50px;
border-radius : 50px;
}

#buttons button#shortBreak{
background : #0c0;
}

#buttons button#longBreak{
background : #080;
}

#buttons button#stop{
background : #f00;
}

Now, let’s make the pomodoro app functional by adding the following javascript :

var app = angular.module("pomodoroApp", []);
/* Define a module named pomodoroApp*/

/* Defind the angular component*/
app.component('pomodoroComp', {
bindings: {},
templateUrl: '/componentGrid.html',
controller : ['$interval',function(interval){

var self = this;
self.started = false;
/* 
started variable stores the state of the timer. If it is true, it means that some task (work, short break, long break) is going on with pomodoro timer. If it is false, it means that the pomodoro is not yet started or it is stopped (by clicking stop button)
*/

self.minutes = 25;
/*
minutes variable stores current minute which is displayed in the pomodoro. 
*/

self.seconds = 0;
/*
seconds variable stores current second which is displayed in the pomodoro.
*/

self.fillerIncrement = 200/(self.minutes*60);
/*
fillerIncrement variable stores the value by which fillerHeight should increase.
*/

self.fillerHeight = 0; 
/*
fillerHeight variable stores the height of the background filler. Initially it is set to 0. As soon as a pomodoro task starts, its height starts increasing (by a value which is stored in fillerIncrement variable) and it keeps increasing till that particular task ends. On click of stop button, it is again set to 0.

*/


/*
resetVariables function will be called for each of the actions (work, Short Break, Long Break, Stop) to set the value of variables to values corresponding to that particular action
*/

self.resetVariables = function(mins, secs, started){
self.minutes = mins;
self.seconds = secs;
self.started = started;
self.fillerIncrement = 200/(self.minutes*60);
self.fillerHeight = 0;
}

/* handler to be called when user clicks ‘Work’ button */
self.startWork = function(){
self.resetVariables(25, 0, true);
};

/* handler to be called when user clicks ‘Short Break’ button */
self.startShortBreak = function(){
self.resetVariables(5, 0, true);
};

/* handler to be called when user clicks ‘Long Break’ button */
self.startLongBreak = function(){
self.resetVariables(15, 0, true);
};

/* handler to be called when user clicks ‘Stop’ button */
self.stopTimer = function(){
self.resetVariables(25, 0, false);
};

self.timerComplete = function(){
self.started = false;
};

/*
intervalCallback function is called each second, updates the values of minutes and seconds variables and reflect the updates in timer
*/
self.intervalCallback = function(){ 
if(!self.started) return false;
if(self.seconds == 0) {
if(self.minutes == 0) {
self.timerComplete();
return;
}
self.seconds = 59;
self.minutes--;
} else {
self.seconds--;
}

self.fillerHeight += self.fillerIncrement;
};

/* 
toDoubleDigit function converts a number to double digit. If num is single digit (0-9), it is prepended with a ‘0’ and resulting string is returned. If num is double digit, it is returned as such. This function is needed as we want to display ’05’ instead of ‘5’ in timer 
*/
self.toDoubleDigit = function(num){
return num < 10 ? '0' + parseInt(num,10) : num;
};


/*
Init method initializes the timer using $interval function such that a callback function (intervalCallback) is called after every second
*/

self.$onInit = function(){
self.interval = interval( self.intervalCallback, 1000);
/*
$onInit is automatically called when component is initialized. interval variable stores the reference id of the currently running interval. If we need to clear the interval, we will need this variable. Although in the demo, we are not clearing the interval, it’s always a good idea to clear the interval at some point.
*/


};

}]
});

Inside the view, we are using {{toDoubleDigit(minutes)}} to display current minutes in double digits. It is bound to $scope.minutes variable in controller. Thus, as soon as the value of $scope.minutes changes, the changed value is immediately reflected in the view. Same thing happens for seconds and filler height display.

Building the Pomodoro Timer : Angular 2

Now we’re going to build this exact same app using Angular 2.

Angular 2 uses the concept of components which could be considered as Angular 1 directives that are associated with their own template. Let’s go ahead and create the pomodoro app using Angular 2 component. For Angular 2, the angular team has chosen TypeScript over JavaScript. Typescript is a superset of JavaScript and created by Microsoft. So, we will be writing code in TypeScript for the pomodoro app.

html :

Loading…

Note : The following external javascript libraries are required to be added to the page (For the demo, they are already added in copepan settings):

https://npmcdn.com/core-js/client/shim.min.js
//cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.8/Reflect.min.js
//cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.37/system.js
//code.angularjs.org/2.0.0-beta.0/Rx.umd.js
//code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js
//code.angularjs.org/2.0.0-beta.0/angular2-all.umd.dev.js
**typescript :**

/* Import Component object from ng.core */
const {Component} = ng.core;

/* Import Bootstrap object from ng.platform.browser */
const {bootstrap} = ng.platform.browser;

/* Component decorator is used to add metadata to the typescript class*/
@Component({
/*
selector defines the name of the tag which is used to add the component on html page
*/
selector : 'pomodoro-app',

/*
styles defines the css associated with the component
*/
styles : [`
#container{
border:1px solid #333;
border-radius :20px;
width:400px;
margin:20px auto;
padding:20px;
text-align:center;
background : #333;
}

#timer{
color:#f00;
font-size:50px;
margin:10px auto;
border : 5px solid red;
border-radius:50%;
width:200px;
height:200px;
overflow:hidden;
position:relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:default;
}

#time{
margin-top:70px;
z-index : 1;
position:relative;
}

#filler{
background : #ddffcc;
height: 0px;
width: 200px;
position:absolute;
bottom:0;
}

#buttons button {
background:#4da6ff;
border:none;
color:#fff;
cursor:pointer;
padding:5px;
width:90px;
margin:10px auto;
font-size:14px;
height : 50px;
border-radius : 50px;
}

#buttons button#shortBreak{
background : #0c0;
}

#buttons button#longBreak{
background : #080;
}

#buttons button#stop{
background : #f00;
}

`],

/*
template defines the markup associated with the component
*/
template : `

{{toDoubleDigit(minutes)}}
:
{{toDoubleDigit(seconds)}}
 
Work
Short Break
Long Break
Stop
`
})

class AppComponent{
/*
All the variables and functions below have same meaning as described in Angular 1 pomodoro code.
*/
constructor(){
this.started = false;
this.minutes = 25;
this.seconds = 0;
this.fillerIncrement = 200/(this.minutes*60);
this.fillerHeight = 0;
this.init();
}
resetVariables(mins, secs, started){
this.minutes = mins;
this.seconds = secs;
this.started = started;
this.fillerIncrement = 200/(this.minutes*60);
this.fillerHeight = 0;
}
startWork(){
this.resetVariables(25, 0, true);
};
startShortBreak(){
this.resetVariables(5, 0, true);
};
startLongBreak(){
this.resetVariables(15, 0, true);
};
stopTimer(){
this.resetVariables(25, 0, false);
};
timerComplete(){
this.started = false;
}
intervalCallback(){
if(!this.started) return false;
if(this.seconds == 0) {
if(this.minutes == 0) {
this.timerComplete();
return;
}
this.seconds = 59;
this.minutes--;
} else {
this.seconds--;
}
this.fillerHeight += this.fillerIncrement;
};
toDoubleDigit(num){
return num < 10 ? '0' + parseInt(num,10) : num;
};
init(){
self = this;
this.interval = setInterval( function(){
self.intervalCallback.apply(self);
}, 1000);
};
}

/* Bootstrapping the component */
bootstrap(AppComponent, []);

The Angular team has made a lot of changes in Angular 2. It would not be an anomaly to say that they completely revamped the framework and build it from scratch. The reason for doing so many changes was to remove the bad parts of Angular 1 and to take advantage of new features of ECMAScript6 (the new version of JavaScript). Let’s explore the most prominent changes made in Angular 2 and reason behind them.

Controller and scope are completely eliminated from Angular 2. Angular 2 is more focused towards Component based development and object orientation (because of typescript). Web applications nowadays have become too complex. Angular team chose to use web components in Angular 2 because other than providing encapsulation and reusability, web components manages the complexity of the application by providing isolation. Every component is independent of other components and can be used as such by simply importing it on a page. Each component has its own template and styles that will apply only to that particular component. It means that the css will not bleed out of the component. The same is not possible with Angular 1 as the CSS is applied on page level. We can even create custom elements with Angular 2 that could be reused as such or could be extended by other users.

As mentioned earlier, Angular 2 team has chosen typescript for writing code in Angular 2 . The choice is inspired from following facts :

  1. Typescript easily integrates with most of the already existing javascript libraries and existing javascript code. So, we need not worry about legacy code.
  2. Using typescript adds lot of advantages to the framework which includes optional static typing and support for object oriented features like inheritance and interfaces. Static typing allows the type checking during the compilation. An interface define a set of functionality as a contract. When the interface is implemented, all the members of the interface must be implemented. Traditional javascript support prototype-based inheritance which is not completely object oriented. Typescript supports object oriented class based inheritance which goes pretty well with other object oriented features.
  3. Typescript adds type support to javascript. It means that the bugs that are caused by false assumption of a variable being of certain type can be detected while compilation. The same is not possible with javascript as it is dynamically typed.
  4. Typescript is far better than core javascript in managing the complexity of large projects.

Angular 1 implements two-way data binding by dirty-checking method and use watchers to watch the model/view for changes. Higher number of data bindings means higher number of watchers and hence higher performance degradation. Angular 2 doesn’t come with built in two-way data binding, although even in Angular 2, we can create directives that support two-way data binding. Angular 2 primarily uses unidirectional tree based change detection which boosts performance. Although we are not using two way data binding in Angular 1 pomodoro app, its worth mentioning that it is considered to be one of the bad parts of Angular 1 and thus it is removed from Angular 2.

Explore Angular Courses

Because of the optimisations mentioned above, Angular 2 is considered to be 5 times faster as compared to Angular 1 (as per ng-conf [https://ti.to/ng-conf/2016/en]).

In Angular 1, the bootstrapping of the app could be done by using ng-app or by calling the bootstrap function. In Angular 2, it can only be done by calling the bootstrap method.

Angular 1 uses $interval which is Angular’s wrapper for window.setIntervalfunction. As specified in code, the callback function is executed after every 1000 ms. Intervals created by $interval service must be explicitly destroyed because they are not destroyed automatically after the controller scope is destroyed. $interval is not available in Angular 2, thus we can either use javascript’s setInterval orObservable.interval method of Angular 2.

Conclusion

We created two pomodoro apps, one using Angular 1 and other using Angular 2. The app built using Angular 2 carries the advantages of web components and shadow DOM and is also free from the performance degradation caused due to two-way data binding of Angular 1.

Bonus

Here is this pomodoro app done in React

See the Pen Pomodoro Timer : React by Raj Gupta (@rajdgreat007) on CodePen.

Here is this pomodoro app done in Vue

See the Pen Pomodoro Timer : : Vue by Raj Gupta (@rajdgreat007) on CodePen.

Explore Angular Courses