JSK Weekly - December 12, 2018

Good news for Angular developers this week. After a dry season for Angular articles, we finally have some great ones. Our top recommendation is "Metaprogramming, Higher-Order Components and Mixins with Angular Ivy" by Victor Savkin.

React.js developers will enjoy "React 16 Lifecycle Methods: How and When to Use Them" by Scott Domes.

We have an excellent article for one more not so often covered topic, TypeScript. Go ahead and discover "So What’s New in Typescript 3.2?" by Nwose Lotanna.

Learning design patterns and expanding your understanding of this topic is always beneficial. That's why we recommend "Keep it Simple with the Strategy Design Pattern" by Chidume Nnamdi.

Finally, you might want to look into Jonathan Saring's presentation of "6 JavaScript User Authentication Libraries for 2019".


Keep it Simple with the Strategy Design Pattern

Object-oriented programming is a programming paradigm that revolves around using objects and declaration of Classes to provide simple and reusable design to our program. According to Wikipedia: "Object-oriented programming (OOP) is a programming paradigm based on the concept of "objects", which may contain data, in the form of fields, often known as attributes; and code, in the form of procedures, often known as methods."

Authored by: Chidume Nnamdi

Functional middleware

How to use Maybe Monad to make your server middleware a little bit easier to reason about. I had an Express server that was processing events from a payment system. For example, if a subscription was changed by the user, the payment system would send an event, which my server would process.

Authored by: Gleb Bahmutov

PWA vs Hybrid App vs Native: Choosing the Right Mobile App

Recently there's been much fuss about Native Apps vs. PWAs vs. Hybrid Apps and so on. This discussion includes more then one option for featuring your application to mobile users, and involves a lot...

Authored by: Bit

The power of abstraction

If someone had asked me "what is the number 1, absolutely most important concept in all of software development?" I would answer it using one word: "abstraction". Abstraction is all about reducing an idea to its absolute essence. Let's look at an example: take the activity of running.

Authored by: Arik


Understanding Mixins in JavaScript

Learn how mixins really work and how to apply them In this article, we will look deep into the heart of mixins to learn what they are and to know when to apply them.

Authored by: Chidume Nnamdi

thank u, next: an introduction to linked lists

In this post, we are going to be talking about the linked list data structure in the language of "thank u, next" by Ariana Grande. If you haven't watched the piece of art that is the music video for the song, please pause and do so before we begin.

Authored by: Ali Spittel 💁

Difference between state and State

Today we will try to solve the ambiguity in the concept of state, highlighting the differences in the two main notions about it.

Authored by: Caio Ferreira


So What's New in Typescript 3.2?

Typescript is an open-source, strongly-typed, object-oriented compiled language developed and maintained by Microsoft. It is basically JavaScript on steroids (it is a super-set of javascript) with static typing options. It is designed for the development of large and scalable applications that compiles to JavaScript.

Authored by: Bit

How to Use TypeScript to Build a Node API with Express

Like it or not, JavaScript has been helping developers power the Internet since 1995. In that time, JavaScript usage has grown from small user experience enhancements to complex full-stack applications using Node.js on the server and one of many frameworks on the client such as Angular, React, or Vue.

Authored by: SitePoint

Hello Create React App (CRA)- TypeScript

As of the October 2018, 2.1.0 release, CRA introduced TypeScript support. While I have always managed a custom-built build solution (i.e., webpack configuration), I have, more recently, been...

Authored by: codeburst.io


Metaprogramming, Higher-Order Components and Mixins with Angular Ivy

Everyone in the Angular community is excited about the approaching release of Ivy - the new Angular renderer. Ivy makes Angular faster. Ivy tree shakes better (the hello world Angular app built with it is under 4k). Ivy simplifies the generated code making Angular easier to debug.

Authored by: Victor Savkin

Angular Console

Here at Narwhal (Nrwl), we've been working with the Angular team over the last 3 months to build a new developer tool that is now becoming widely adopted. It's called Angular Console. As the lead designer/front-end architect, the Angular team invited me to write on the official blog in order to communicate what Angular Console is and what it means for the Angular community going forward.

Authored by: Angular

Progressive Web Apps with Angular: Part 2 - Lazy Loading

To explore how to add lazy loading functionality to an Angular app, this article will go through the process of building a relatively small application called Tour of Thrones. An API of Ice and Fire (an unofficial, community-built API for Game of Thrones) will be used to list houses from the book series and provide information about them.

Authored by: Houssein Djirdeh

Using The "Definite Assignment Assertion" To Define Required Input Bindings In Angular 7.1.1

Ben Nadel looks at the "Definite Assignment Assertion" introduced in TypeScript 2.7. This assertion makes it possible to declare input bindings as "required" on an Angular Directive without having to fully initialize the internal class property. This makes the code easier to work with; and, expresses better intent in the code.

Authored by: Ben Nadel

Using A "Drag Shield" To Block Mouse Events During A Drag-And-Drop Workflow In Angular 7.1.2

Ben Nadel demonstrates how he uses a "drag shield" to act as an "event sink" during a drag-and-drop operation in his Angular 7.1.2 application. The drag shield gets rendered over the entire viewport during the drag operation so as to prevent mouse events from hitting lower-level DOM elements.

Authored by: Ben Nadel


React 16 Lifecycle Methods: How and When to Use Them

As alluded to above, lifecycle methods are a last resort. They're to be used in special cases, when other fallbacks like rearranging your components or moving your state around won't work. Lifecycle methods (with the exception of constructor) are hard to reason about. They add complexity to your app.

Authored by: Scott Domes

Compound Components in React Using the Context API

Compound components in React allow you to create components with some form of connected state that's managed amongst themselves. A good example is the Form component in Semantic UI React. To see how we can implement compound components in a real-life React application, we'll build a compound (multi-part) form for login and sign up.

Authored by: CSS-Tricks

Build a Login/Auth App with the MERN Stack - Part 3 (React Components)

Read Part 1: Creating our Backend In Part 1, we Initialized our backend using npm and install necessary packages Set up a MongoDB database using mLab Set up a server with Node.js and Express Created a database schema to define a User for registration and login purposes Set up three

Authored by: Bit

Async & Await in Reactjs – ES7 – Why use it?

Throughout all of my React projects, I find myself using Async & Await for every external data request. In this post, I want to highlight the general benefits of using this syntax while also demonstrating how I use it in Reactjs.

Authored by: JSdiaries

How to link Social Logins with Firebase in React

A Firebase React tutorial on how to link social logins with each other under one account. The example covers linking Google, Facebook, Twitter and email/password sign in methods ...

Authored by: Robin Wieruch

React's Render Props technique in 3 Minutes

A technique for sharing logic between components. Components accept a prop that returns a function responsible for rendering something. This allows our component to focus on other logic. For those in camp TL;DR, scroll down for a demo 👍 Handle some or all the rendering logic for a component.

Authored by: codeburst.io


Vue Development In 2019: What You Need To Know

If you're new to Vue development, you've probably heard a lot of jargon terms thrown around like single-page apps, async components, server-side rendering, and so on. You've might also have heard of tools and libraries that are commonly mentioned alongside Vue like Vuex, Webpack, Vue CLI, and Nuxt.

Authored by: Anthony Gore

Creating a Block Editor with Markdown and Vue.js

Editing blocks of content is highly popular these days. WordPress is one of the last kids on the block, other content management systems like AEM or Magnolia follow the concept of content components since more than a decade now.

Authored by: Sebastian Schürmanns

Mixins and custom functions to enhance your Vue applications

If you are a Vue lover (like me) and are looking for a way to extend your Vue application, you have come to the right place. Vue mixins and directives are a powerful combination and a great way to add more reusable functions across parts of your application.

Authored by: Chris Nwamba


How to Create and Verify JWTs with Node

This article was originally published on the Okta developer blog. Thank you for supporting the partners who make SitePoint possible. Authentication on the internet has evolved quite a bit over the years. There are many ways to do it, but what worked well enough in the 90s doesn't quite cut it today.

Authored by: OktaDev

How to build blazing fast REST APIs with Node.js, MongoDB, Fastify and Swagger

Presumably no web developer is a stranger to REST APIs and the challenges that architecting an effective and efficient API solution brings. These challenges include: Speed (API Response Times) Documentation (Clear concise documents, describing the API) Architecture and Sustainability (Maintainable and expandable codebase) In this tutorial we are going to address all of the above using a combination of Node.js, MongoDB, Fastify and Swagger.

Authored by: Siegfried Grimbeek

How to protect your Node.js applications from malicious dependencies

You have probably heard about a recent incident where a popular npm package, event-stream , included malicious code that could have affected thousands of apps (or more!). Hopefully, the attack was tailored to affect only a specific project. The original author of the library was the victim of a social engineering attack and a malicious hacker gained publishing permissions.

Authored by: LogRocket

Libraries and Tools

6 JavaScript User Authentication Libraries for 2019

"Build me a user-authentication in two weeks!"- Useful ways to get the job done, quick and simple. "Build me a user-authentication system in two weeks" is a common phrase among R&D teams these days. For various reasons, this task has always been one of those things left for a single developer in the team to sort out.

Authored by: Bit

Interactive Repulsion Effect with Three.js

A tutorial on how to recreate the interactive repulsion effect of grid items seen in BestServedBold's Dribbble shot "Holographic-Interactions". This tutorial is going to demonstrate how to build an interesting repulsion effect for a grid of elements using three.js and TweenMax (GSAP). The effect is a recreation of BestServedBold's Dribbble shot Holographic-Interactions.

Authored by: Codrops


3 Methods for Hands-free Continuous Testing

In order to strike the perfect balance between speed and quality, teams that hope to achieve Continuous Integration and Continuous Delivery must also implement Continuous Testing. This is often easier said than done.

Authored by: CrossBrowserTesting


Lazy load images with zero Javascript

There are so many posts about lazy loading images, I will not bring anything new to the table. But if you are new to web platform here are some quick and easy techniques to make web pages faster. I understand that there are websites that will have lots of images by their nature.

Authored by: Seven Bridges

Progressive Web Apps: The Case for PWAs

by Published in Jason Grigsby State of the Web Now that you know what a progressive web app is, you're probably wondering if your organization would benefit from one. To determine if it makes sense for your organization, ask yourself two questions: Does your organization have a website?

Authored by: A List Apart

How freeCodeCamp.org uses the JAMstack + a single API server to help millions of people learn to code every month

Hey dev.to peeps - long-time lurker, first-time poster. freeCodeCamp.org is now helping millions of people learn to code every month, and we're doing this using a single API server. The rest of the platform is handled by CDNs and other glorious services. This is a new architecture called the JAMstack, which stands for JavaScript, APIs, Markup.

Authored by: Quincy Larson

JavaScript "Light Bulb" Moments: Tricky Comparison

Introduction I was recently debugging a strange issue in javascript which was somehow always happening for 2 digits numbers. This short post is the outcome of the learning process I went through in that debugging. I'll start with a bit of code. "7" > "6" - true"55" > "6" - false So the first one makes sense.

Authored by: Bit

What is the Shadow DOM?

A couple of weeks ago, I wrote an article on what exactly the DOM is. To recap, the Document Object Model is a representation of an HTML document. It is used by browsers to determine what to render on the page, and by Javascript programs to modify the content, structure,

Authored by: Ire Aderinokun