JSK Weekly - July 11, 2018

Let's start this week with being good. In order to do that, we need to know what's evil. For that, we recommend a short but inspired article "Evil JavaScript" by Ben McCormick. Ben teaches us what we can bud shouldn't do in JavaScript.

Another great article this week is "Get Better Type Checking in JavaScript with the Maybe Type" by Gilad Shoham. You can learn what Maybe Type is and how you can use it to your advantage.

Angular devs can check out "How Angular Resolves Dynamic Components" by Chidume Nnamdi while React developers can learn a few things about pointer events from Indrek Lasn in his article "Pointer events with React — The why, how, what?".

Finally, we have one announcement. Ember 3.2 was Released. Congrats!


Evil JavaScript

Ben McCormick's blog on JavaScript and Web Development

Authored by: Ben McCormick

Get Better Type Checking in JavaScript with the Maybe Type

The dynamic typing in JavaScript makes it incredibly flexible. But, this flexibility can act as a double edged sword. When values have the potential to change, JavaScript will give you runtime errors in your code or some crazy bugs that will take forever to track down because of type coercion.

Authored by: Bit

Managing Complex Waiting Experiences on Web UIs

Waiting is not a concept we like. We are usually stressed at every point where "waiting" touches our lives. And on the internet, "waiting" can be much more complicated than we thought it would be. But apparently there is a long time we will have to "wait" until the tech guys solve the "speed" problem.

Authored by: Fatih Kadir Akın

Understanding The Underlying Processes of JavaScript's Closures And Scope Chain

When developers start exploring the JavaScript programming language, the concept of Scope and Closures can be expected to be a hurdle to their progress. The reason behind this behavior is the complexity of the other concepts that lie under the hood of this feature in JavaScript. However, a

Authored by: Scotch Development

Web Components in 2018

For many front-end developers, components have become a central concept in their development workflow. Components provide a robust model for architecting and scaling complex applications, allowing for composition from smaller and simpler encapsulated parts.

Authored by: SitePen


Playing with Javascript Promises: A Comprehensive Approach

"Write down the syntax for promises on this sheet of paper", is enough to give nightmares to a lot of junior and even mid-level javascript developers. I have seen people going blank and sit for minutes together trying to put their mind around creating a simple promise and a callback.

Authored by: codeburst.io

Tagged template literals in ES2018

The first thing that was added to ES2018 was an improvement to a great feature called tagged template literals and it extends the templating that we already talked about in ES6. I never got around to working with this feature too much so this improvement to tagged template literals is a great opportunity to talk about the original feature.

Authored by: DiscoverSDK

Javascript Arrays: How to count poperty values (including unique property values)

Well, it's something that creates a new array out of the existing array. As an example, if we have an array like: Now we have an array of surnames. We can count at this point but the amount of values...

Authored by: Umar Taufiq (Awan)


Redux 4 + TypeScript 2.9: A type-safe approach

An updated version of my type-safe guide to Redux, now compatible with Redux 4 + TypeScript 2.9.

Authored by: ️

TypeScript 2.8: Per-File JSX Factories

TypeScript 2.8 allows you to specify JSX factory names on a per-file basis. Previously, you could only specify the JSX factory name via the --jsxFactory compiler option. This setting applies to each JSX file in the entire project. Now, you can override the project-wide --jsxFactory setting by adding a special @jsx comment to the beginning of the file.

Authored by: Marius Schulz

Implementing Observer pattern on Typescript

As we've seen in the previous article, design patterns are a way of standardizing resources implementations into our applications. We've seen that as problems keeps the same, we can keep the same approach for solving it. Today, we gonna dive into Observer pattern.

Authored by: codeburst.io


How Angular Resolves Dynamic Components

Dynamic components are one of the core concepts introduced in Angular, they enable developers to dynamically render a component's view during runtime. This article explains how the ComponentFactoryResolver class resolves a ComponentFactory. Why should we know this?

Authored by: Chidume Nnamdi

Angular NGXS Tutorial With Example From Scratch

Angular NGXS Tutorial With Example From Scratch is the today's leading topic. We have covered the Angular NgRx Store pattern in this blog, and now it is time for an alternative to this library called Angular NGXS. Ngxs is a different approach to Angular state management. The official documentation for NGXS library is here.

Authored by: KrunalDLathiya

Collecting Route Params Across All Router Segments In Angular 6.0.7

Ben Nadel demonstrates how to collect all path parameters into a single collection inside of the Angular Router. This implementation creates a RxJS BehaviorSubject that can be subscribed to; and is updated after each NavigationEnd event.

Authored by: Ben Nadel

Use Angular and NativeScript to Build a Web and Mobile Application

Angular has been around for a few years now and since its release it has been useful when creating many different categories of applications, including web as well as mobile. The problem, at least for me, has always been that the experience for creating these various applications has been inconsi

Authored by: Scotch Development

Accessing Parent Route Params Via paramsInheritanceStrategy In Angular 6.0.7

Ben Nadel looks at the "paramsInheritanceStrategy" configuration option of the Angular Router in Angular 6.0.7. This option, when set to "always", will allow a route segment's params object to include the params of its parents (ie, descendant route segments). This makes it trivial for a given view to access the param values of its parent view (assuming no naming collisions).

Authored by: Ben Nadel


Pointer events with React - The why, how, what?

What are pointer events? Pointer events provide a unified way of handling all input events. Back in the good old days we only had a mouse and listening for events was simple. The web content assumed the user's pointing device will be a mouse.

Authored by: Indrek Lasn

A guide to React onClick event handlers

Event handlers are used to determine what action is to be taken whenever an event is fired. This could be a mouse click or a change in a text input. In React apps, events are written in the camelCase format, that means the onclick event will be written as onClick in a React app.

Authored by: LogRocket

Stateful Peanut Butter and SVG-elly: A React + D3 Tutorial

React is, right at this moment, taking over front end development in a way that, to me at least, is pretty exciting. Tomorrow, that may not be true, but the number of codebases that rely heavily on...

Authored by: codeburst.io

Nesting and overriding new React Context API

Declarative routing for React View the docs here Migrating from 2.x/3.x? This repository is a monorepo that we manage using Lerna. That means that we actually publish several packages to npm from the same codebase, including: react-router is developed and maintained by React Training and many amazing contributors.

Authored by: Andrew Luca 🇲🇩

The True Delight of React's Error and Warning Messages

There is this fascinating idea that hasn't left me for years now, that software developers, with all their prejudices, biases, and humanness in general, shape the world around us. Think about it. Software, just like music, is an intangible good.

Authored by: Omar Alshaker


How To Create Hover Animation In Vuejs

In this example, I have taught How To Create Hover Animation In Vuejs. In this tutorial, we do not use any CSS frameworks. We use CSS3 properties to accomplish the goal. Apply animation effect on hover in Vue.js is very easy. We create a simple card with text and image.

Authored by: KrunalDLathiya

Making a 3D facing widget

Welcome to the Widget of the Week series, where I take gifs or videos of awesome UI/UX components, and bring them to life with code. This time we are going to create a 3D widget that "looks" at the cursor as we move it through the screen.

Authored by: Eder Díaz

Vue Authentication And Route Handling Using Vue-router

Vue is a progressive Javascript framework that makes building frontend applications easy. Coupled with vue-router, we can build high performance applications with complete dynamic routes. Vue-router is an efficient tool and can handle authentication in our Vue application seamlessly. In this tutorial, we will look at using vue-router to handle authentication and access control for different parts of our application.

Authored by: Scotch Development


Building API with Express.js and Hadron

Together with folks at Brainhub, we have developed a tool, with some of magic that dependency injection provides, to make it more enjoyable and easy to implement CRUD API. Hadron is a lightweight, open-source framework that can be used with some tools like Express.js (at the moment, Express is the only supported web framework) and database management tools like TypeORM.

Authored by: Brainhub.eu

Node.js Backend Development - Global Objects

In the previous article we learned about sending static files to the browser . We are learning Node.js very fast by building up an application and a micro framework of our own. Before we continue further, we also need to learn about the Global Objects available in Node.js so that we can use them where necessary and make our life easier.

Authored by: DiscoverSDK

Build and Understand a Simple Node.js Website with User Authentication

Building websites with user authentication and management (login, registration, password reset, etc.), can be a huge pain. As a developer there are a million little things you need to worry about: Storing the users in your database Making sure you have the right user attributes defined Forcing users to be logged in to view a page Building registration and login forms Creating password reset workflows that email users a link Verifying new users when they sign up via email Etc...

Authored by: Scotch Development

Node.js REPL in Depth

REPL stands for read-eval-print-loop, or just an interactive session (usually in your terminal), where you can enter some expression and immediately evaluate it, seeing the result. After evaluating, the whole flow repeats, and it works until you exit the process. So, R stands for reading your command, E stands for evaluating it, P stands for printing the result of the execution, and L means to run the whole process again, “in the loop”.

Authored by: bloomca

Libraries and Tools

Ember.js: Ember 3.2 Released

Ember.js helps developers be more productive out of the box. Designed with developer ergonomics in mind, its friendly APIs help you get your job done-fast.

Authored by: EmberJS

Build an E-Commerce Progressive Web App with GatsbyJS

What is a progressive web application? Why build one? This post walks you through a detailed PWA example, where we use Gatsby to create a quick e-commerce PWA. Code snippets, repo, and live demo included!

Authored by: Snipcart

Performance Auditing: A Firefox Developer Tools Deep Dive

In this article, we'll cover Firefox Web Developer Tools ("DevTools") - a set of tools designed to help developers inspect, debug, profile and optimize the performance of websites and web applications. We'll particularly look at the tools related to performance, but we'll also see how to get started using DevTools in general, and learn about some useful settings.

Authored by: Ahmad Mohamed

8 Node.js Web Socket Libraries For 2018

Node.js Javascript web socket libraries servers and tools for 2018 to create real time server browser communication. Discover socket.io, ws, node.js websocket, feather, sockjs, socketcluster and more

Authored by: Bit


Example of Moving Towards Integration Testing

Through a simple yet illustrative example, we explore the idea of replacing blindly seeking test coverage with unit tests with strategic integration tests. The motivation of this article is born out of frustration at recently writing a lot of boilerplate unit tests in a front end project that didn't feel very useful.

Authored by: codeburst.io


How to get CSS values in JavaScript

CSS alone is not enough sometimes. You might need to control your CSS values with JavaScript. But how do you get CSS values in JavaScript? Turns out, there are two possible ways, depending on whether you're trying to get inline styles or computed styles.

Authored by: Codementor

CSS Grid in IE: CSS Grid and the New Autoprefixer

In Part 1 of this series, I debunked a few misconceptions that many people have around the Internet Explorer (IE) implementation of CSS grid. This article builds on that knowledge. It would be best to go back and read that article first if you haven't already.

Authored by: Daniel Tonon

CSS transitions 101: let's animate a toggle button icon

Learn how to create a morphing animation on a toggle button using CSS transitions.

Authored by: LogRocket

Build an Electron + Next.js app in 3 steps

Fix almost all bugs Upgrade to [email protected]^2.0.4 Upgrade to [email protected] Smaller dependencies Easy cli like nextron init test-app To create , just run the command below: You can use examples/* sample apps as templating. To create the example/with-typescript app, run the command below: $ nextron init --template with-typescript Run npm run dev, and nextron automatically launches the electron app.

Authored by: Yoshihide Shiono

Building Text-to-Speech Apps for the Web

Having interacted with several apps over the years, there is a very high chance that you have interacted with apps that provide some form of voice experience. It could be an app with text-to-speech functionality like reading your text messages or notifications aloud.

Authored by: Scotch Development