JSK Weekly - September 20, 2017
This week has been really hectic with lots of new content and stories. If you are into performance optimization (and you should be, at least from time to time), check out "Building the DOM faster", by Milica Mihajlija. Milica takes a look at the order of HTML parsing, CSS causing re-rendering, preloading, defer, async, etc.
Do you write CSS inside your JavaScript? Kevin Ball criticizes the increasing urge to do it and shares some best practices for writing and maintaining CSS. Make sure you check it out.
We have great stories for all of the "big three" frameworks - Angular, React and Vue. One not to miss is "A React And Preact Progressive Web App Performance Case Study: Treebo" by Addy Osmani. It's an excellent overview of a Progressive Web App built by Treebo hotels in India.
Finally, it is now possible to use native ES modules in Node. js 8. 5. 0. It requires a . mjs extension and you have to enable it via command line flag. Dr. Alex Rauschmayer gives you more details.
JavaScript Book
VIŠE O KNJIZI
General
Building the DOM faster: speculative parsing, async, defer and preload
In 2017, the toolbox for making sure your web page loads fast includes everything from minification and asset optimization to caching, CDNs, code splitting and tree shaking. However, you can get big performance boosts with just a few keywords and mindful code structuring, even if you're not yet familiar with the concepts above and you're not sure how to get started.
Authored by: Mozilla Hacks
CSS in JS is like replacing a broken screwdriver with your favorite hammer.
There's a ton of interest these days in 'CSS in JS'. The premise is simple: CSS operates in a global namespace, which can result in undesirable side effects, spaghetti code, and extremely difficult to maintain codebases. JavaScript used to do this, and we fixed it by encapsulating everything in modules and using tools like webpack to stitch everything together.
Authored by: Kevin Ball
Writing Clean Code
Writing code that just works is one thing - writing clean code is a whole new level. There is a saying, "Any fool can write code that a computer can understand. Good programmers write code that humans can understand," and it makes perfect sense.
Authored by: Codementor
How JavaScript linters cause bugs
I was doing code review for a coworker yesterday, and it soon became obvious that he used a linter and that the linter gave him a bright idea: use strict comparisons.
Authored by: Swizec
JavaScript
Finally the Promise. prototype. finally() is available
Since the Promises were added in JavaScript, one of the biggest concerns was the absence of an ability to easily apply some code after the Promise is fulfilled (after both success and reject actions).
Authored by: Sergey Gospodarets
Currying in JavaScript
Currying is a technique of evaluating function with multiple arguments, into sequence of function with single argument. In other words, when a function, instead of taking all arguments at one time, takes the first one and return a new function that takes the second one and returns a new function which takes the third one, and so forth, until all arguments have been fulfilled.
Authored by: codeburst. io
JavaScript Quickie- What is Type Coercion?
Type Coercion can be confusing at first - get all the details here Defined: Type coercion is the conversion of values to an equivalent type. Does that make sense? Probably not. The important thing to remember is that type coercion is all about converting a value from one type to another.
Authored by: Brandon Morelli
The difference between var, const, and let in Javascript is. . .
I was recently chatting with a friend while we were on a hike, and we started to discuss the differences between var, const, and let in Javascript. We talked about the what, how, and when to use each. And from that discussion, this post was born. . .
Authored by: Reuben Nahouraii
Part 2: Var vs Const vs Let
This article is Part 2 for the Series "Modern ES6+ Javascript for those who know only a little about that old Javascript. " Traditionally, the way variable declarations work has been that weird part of programming in JavaScript. Variables creation depend on how you declare them, and ES6 offers options to make controlling scope easier.
Authored by: Harry Manchanda ?゚ヌᄈ
Angular. js
Lazy Loading in Angular v2+
Application performance is an important part of web development. We always want our users to have the quickest and most performant experience when they visit our apps. Lazy loading is one of the features we can add to our app to improve performance. What exactly is lazy loading?
Authored by: Chris Sevilleja
Angular Server-side rendering using Angular-CLI
An step-by-step guide to add server-side rendering (Universal) support to Angular 4 Applications using Angular CLI
Authored by: Mohammad Kermani
Using Web Components With Angular
Angular is an application framework favored by many in the JavaScript community. Angular provides a library for building encapsulated components, dependency injection, a templating language with data binding, an application router built on observables, and a command line interface that lowers the ba. . .
Authored by: SitePen
Changing The Hash With The Location Service In Angular 4. 4. 0-RC. 0
Ben Nadel demonstrates how to change the hash (or fragment) value of the Location using the location. go() method in Angular's Location service. This is not clear in the documentation and requires a bit of squinting to digest.
Authored by: Ben Nadel
This One Tweak Improved my Angular Code
I made a tweak to my Angular code process over the last month or so that has resulted in greater productivity in my development environment and fewer bugs. Now, I didn't make this change because I thought it would improve my productivity. At least that wasn't the primary reason.
Authored by: Dave Bush
Protecting Angular v2+ Routes with CanActivate/CanActivateChild Guards
Protecting routes is something that has to happen in any app with authentication. There will be sections of your applications that you don't want certain users to get to. We'll be looking at a simple example of how to use Angular router guards to protect an area of our site.
Authored by: Chris Sevilleja
React. js
Treebo: A React And Preact Progressive Web App Performance Case Study
Treebo is India's top rated budget hotel chain, operating in a segment of the travel industry worth $20 billion. They recently shipped a new Progressive Web App as their default mobile experience, initially using React and eventually switching to Preact in production.
Authored by: Addy Osmani
Exploring New Features in React 16
In this post, we're going to learn how to create a music player using some of the new features in React 16. In implementing this music player, we're going to learn about some of the changes in React 16.
Authored by: Sophia Shoemaker ?
How to Learn React: Everything You Need to Get Started
No matter where you are on your journey, the best React content you need is here - take a look and dive in!
Authored by: Adam Roberts
React + Dataviz
There is a natural connection between Data Visualization (dataviz) and SVG. SVG is a graphics format based on geometry and geometry is exactly what is needed to visually display data in compelling and accurate ways. SVG has got the "visualization" part, but SVG is more declarative than programmatic.
Authored by: Chris Coyier
Firebase + React : Optimizing For The Real World
I started off to build a small web app that showcases the career paths of developers. As I love the approach React takes for the DOM, it was my only choice of framework. For the data part, I decided to use Google's Firebase. So the structure was simple.
Authored by: Varun A P
Kea - High level abstraction between React and Redux
Redux took the React world by a storm when it was introduced. The simple idea provided a guideline for the community and "solved" state management for a lot of different kinds of applications. That said, Redux comes with a certain amount of wiring.
Authored by: SurviveJS
Aurelia. js
5 techniques used by Aurelia to promote great code quality
Let's start with a fact: You can write bad code in good frameworks and bad code in good frameworks. But, frameworks can do things to encourage certain styles of development that lead to better code quality.
Authored by: Sean Hunter
Vue. js
Extending VueJS Components
Do you have components in your Vue app that share similar options, or even template markup? It'd be a good idea to create a base component with the common options and markup, and then extend the base component to create sub components.
Authored by: Anthony Gore
Vue. js communication Part 2: parent-child components
Many Vue. js app components will probably have some sort of parent-child relationship. In this part of the series I aim to talk about common patterns as well as anti-patterns that you should avoid. If you follow the basic structure you should be safe for the future.
Authored by: Christian Gambardella
Why You Should Avoid Vue. js DOM Templates
It's a common practice for a Vue app to use the DOM as its template. This practice comes with a few catches, however, that make it an undesirable choice. In this article, I'll explain the issues and offer some alternatives.
Authored by: Anthony Gore
How to Create Filters in Vue. js with Examples
Similar to AngularJS, Vue. js has its way of transforming data and applying filters to it, but you must keep in mind that filters don't transform the original data, they only change the output and return a filtered version of it.
Authored by: Rachid Laasri
[2 minutes Maggi] Hello World App in Vue. js
Vue. js is a progressive framework for building user interfaces. This is lean, this is fast, and unlike frameworks like React and Angular, it's straightforward to get started. Here we will build a simple Hello World app, and it will just take 2 minutes for the whole process.
Authored by: Harry Manchanda ?゚ヌᄈ
4 Ways To Boost Your Vue. js App With Webpack
A Vue. js expert goes over several different ways that web developers can use Webpack to enhance their Vue. js application, like code splitting and optimization.
Authored by: Anthony Gore
Ember. js
Awesome Ember Addons
I've jumped back into the Ember world after a long hiatus for a client project recently, and I'm really enjoying being back. Ember shares many similarities with Rails, has a fantastic community of passionate people, and the folks behind the framework are the open source maintainers I've come to respect the most.
Authored by: Matt Gowie
Node. js
Using ES modules natively in Node. js
Starting with version 8. 5. 0, Node. js supports ES modules natively, behind a command line option. Most of the credit for this new functionality goes to Bradley Farias. This blog post explains the details.
Authored by: Axel Rauschmayer
How To Combine a NodeJS Back End with a ReactJS Front End App.
In this post, I want to show how you can build the front and back end of a website using NodeJS for the back end. We'll use node to create endpoints, and set up a database in JSON format.
Authored by: Ethan Jarrell
Node. Js Vs PHP : Battle of Supremacy & survival
Before we jump on to the battle of Node. js Vs PHP, firstly we need to understand why this has been a talk for a while now in the developers community, specially for the backend developers. This all started with the unparalleled increase in the users demand for smartphone apps.
Authored by: #PramodChandrayan
Managing Complex Data Structures in NodeJS
When starting a new project, the question of how to properly organize your data is usually one of the first problems to solve. Let's say that need to store data of users. Using Mongo, and storing the data as collections, we have a couple of options.
Authored by: Ethan Jarrell
Libraries and Tools
JavaScript Linting Tools Comparison
Linting is the process of running a program that will analyse code for potential errors or identifying bad coding practices. Here I present a brief comparison of 3 most widely used JavaScript linting libraries specially while using with React.
Authored by: codeburst. io
Functional Programming
From imperative to functional JavaScript
Functional programming is an awesome tool to have in your arsenal, since it will at least: Reduce the amount of mutations ; Make the code base easier to test; Composition and changes are made easier; You can apply it right now in your code base since it's just a programming paradigm (a set of rules).
Authored by: Diogo Santos
Other
Web Push Notifications with Firebase (Video Series)
When I attended Google Developers Days Europe a couple of weeks ago, I was introduced to Firebase's new Cloud Functions feature. Firebase Cloud Functions allow us to write server-side code without the need to create and manage our own backend, and the functions we create can be as simple or complex as we need them to be.
Authored by: Ire Aderinokun
What's coming in Meteor 1. 6 - Meteor Blog
Now that Meteor 1. 5. 2 has been released, it's time to look forward to our next major release: Meteor 1. 6. Given all the improvements that are coming, it was tempting to stamp this release as "Meteor 2. 0," but that would suggest there must be lots of breaking changes, and that upgrading is likely to be a difficult chore.
Authored by: Meteor
Coping with Stateful Code
In this article we will: Learn why stateful packages challenge stability See an example of a stateful package Identify CanJS's stateful packages Provide strategies that minimize the problems with stateful packages With the elimination of side effects, it becomes possible to use multiple versions of the same package within the same application.
Authored by: Justin Meyer
The Problems with Redux: Are MobX and Realm going to put and end to it
First off, I don't hate Redux. It was made by very smart people to ease the problem of managing state inside single page apps. And it does solve it. You can use Redux to break state down from the high level right down to what each component needs to know about.
Authored by: Quantum Mob
ORIGINAL