JSK Weekly - January 23, 2019

This week we recommend you to start with a question: "Tiny Components: What Can Go Wrong?" and seek for an answer with Scott Domes. Discover how using the Single Responsibility Principle can help you to build better apps.

Next story will mostly be interesting for React developers, but others may learn a lot from it as well. Explore "How to Build a React Progressive Web Application (PWA)" by Chidume Nnamdi.

We can recommend another interesting article for React developers that would like to experiment with TypeScript, "Why and How to use TypeScript in your React App?" by Mahesh Haldar.

Finally, Aurelia developers will definitely enjoy "Creating Your Own Javascript Decorators in Aurelia" by Dwayne.


Tiny Components: What Can Go Wrong?

Using the Single Responsibility Principle to build better apps The advantage of the component system in React (and view libraries like it) is that your UI gets split into small, digestible, reusable chunks. Each component is usually compact (100-200 lines), a size which is easy for other developers to understand and modify.

Authored by: Scott Domes

How to Build a React Progressive Web Application (PWA)

A deep, comprehensive guide with live code examples If you aren't talking about PWAs you are seriously missing out. PWAs in recent years has grown to be the most adopted optimization trick in the software industry. Not only optimization benefits but a plethora lot of goodies: Progressive enhancement: It works for every user no matter the browser choice of the user.

Authored by: Chidume Nnamdi

How to rewrite a callback function in Promise form and async/await form in JavaScript

Originally published at coreycleary.me. This is a cross-post from my content bl...

Authored by: Corey Cleary

The world beyond React, Vue & Angular

If you're into web development I'm betting that you've heard or read something like "React vs Vue vs Angular" comparison. It's just so common that you can't get around it. These MVC frameworks and UI libraries have become so popular that you can compare them to the jQuery level of popularity from a couple of years ago.

Authored by: areknawo

The benefits and origins of Server Side Rendering

Note: This article was originally written for my personal blog. I am republishing it here for the DEV community. Server side rendering, abbreviated to SSR, is a commonly misunderstood concept. What is it, and why should you bother learning it? I hope to answer those questions with a story on the origins of server side rendering.

Authored by: Sunny Singh ⚡️


Data Structures in JavaScript - Part 2

A Two-Part Series on How to Build Data Structures in JavaScript In the first part of this 2 part series on Data Structures in JavaScript, we took a look at some of the basic JavaScript data structures such as Queues, Priority Queues, and Stacks.

Authored by: Rajat S ⌨️


Why and How to use TypeScript in your React App?

Long back when I read about Typescript, I did not welcome it with open arms. I really did not want to explore one more new layer in Javascript world. I will not get surprised if you share that you also got the same feeling about TypeScript. TypeScript is the missing part of Javascript.

Authored by: Mahesh Haldar

Use TypeScript With Cypress

How to write end-to-end tests in Cypress.io is a question that comes up again and again. Here is what you need to do step by step if you are using WebPack already. If you don't want to follow step

Authored by: Gleb Bahmutov


Creating SVG Icon Components And SVG Icon Sprites In Angular 7.2.0

Ben Nadel explores the creation of a simple component-based SVG icon system in Angular 7.2.0. This approach uses the Webpack loader, "svg-sprite-loader", to automatically extract and embed an SVG Sprite which is then referenced by his AppIconComponent to create dynamic SVG icons.

Authored by: Ben Nadel

Autoplaying inline videos on iPhone iOS 10 using Angular

Starting with iOS 10, Safari on mobile (iPhone and iPad) started allowing developers to autoplay videos inline provided the video you are trying to play meets certain conditions. Before that, your video would not auto play inline, and when it would play, it would play full screen only.

Authored by: Abou Kone


Building A ToDo App in React with Firebase and Redux

In order to be deemed as a capable developer, you need to be able to manipulate the data of any app that you are building. This means that you need to know how to write some data into your app...

Authored by: Rajat S ⌨️

Email Confirmation with React

Collect an email to confirm, send the user a link and then update the database to confirm when the user clicks the link. To be able to pull it off we are going to need to wire up a full stack MERN...

Authored by: Bit

React Hooks in 5 Minutes!

A direct API to methods we access on Component class instances. This means we don't need classes to create stateful components 🎉 A big sell for hooks is how we can extract, share and test that stateful logic. You may be familiar with Higher Order Components and props.

Authored by: codeburst.io

How to use HTML5 form validations with React

You're probably getting tired of reinventing the wheel like me whose always coding a validation check in each field whether it follows the correct format like emails, or whether first and last names have values in it. What's worse when you're using React and you're just a first-timer in the ecosystem, you have the tendency to think of form validations the React way.

Authored by: Sonny R. Recio

React Interactable: Mobile Gestures for the Web

Let's talk about user interactions with the UI, specifically about mobile ones: Dragging, swapping, pinching gestures are natural in mobile apps nowadays. It's not trivial to handle them well, but they really make UIs outstand when done right. With react-native we gained an abstraction layer that allows us to tackle the problem with the same code for iOS and Android.

Authored by: Bit

Interactive Text Animation with React Hooks

I was intrigued after watching Peter Tichy's video tutorial in which he recreates the interactive animation of this website. I decided to build the same but with the hot new tech like React Hooks, CSS custom properties, clip-path and CSS Modules.

Authored by: Aditya Agarwal


Creating Your Own Javascript Decorators in Aurelia - I Like Kill Nerds

Decorators are currently a stage 2 proposal in Javascript and they allow you to decorate classes, class properties and methods. If you have worked with Aurelia for longer than 5 minutes or other frameworks such as Angular, you will already be familiar with them. At the core of a decorator, it is a function that ...

Authored by: Dwayne Charrington


Query A GraphQL API With Vue.js And Axios

I've written quite a bit of content around developing a GraphQL API with various programming technologies such as Node.js, Golang, and Java. Heck, I even wrote an eBook on the subject titled, Web Services for the JavaScript Developer. However, I haven't really produced any content around interacting with those APIs using modern frameworks and client facing technologies, only cURL and Postman.

Authored by: Nic Raboy

Experiment: Using Service Barrels As A De Facto Dependency-Injection Container In Vue.js 2.5.22

Ben Nadel considers the topics of Dependency-Injection (DI) and Inversion of Control (IoC) in a Vue.js application. And, explores the use of a "service barrel" to create a de facto Dependency-Injection container that allows for more flexible services with much lower coupling.

Authored by: Ben Nadel


Node.js Logging Tutorial

Logging is an important part of supporting the complete application life cycle. From creation to debugging to planning new features, logs support us all the way. By analyzing the data in the logs, we can glean insights, resolve bugs much quicker, and detect problems early as they happen.

Authored by: Stackify

Node.js multithreading: What are Worker Threads and why do they matter?

Since the release of Node.js v10.5.0 there's a new worker_threads module available. What exactly is this new worker thread module and why do we need it? In this post, we will talk about the historical reasons concurrency is implemented in JavaScript and Node.js, the problems we might find, current solutions and the future of parallel processing with worker threads.

Authored by: Alberto Gimeno🍺

Build Your First Router in Node with Express

This article was originally published on the Okta developer blog. Thank you for supporting the partners who make SitePoint possible. If you've done any web development with Node in the last few years, you've probably used Express. Even if you haven't used it directly, many frameworks meant to make web development even simpler are still built on Express.

Authored by: SitePoint

Libraries and Tools

Pagination with Sequelize explained

When dealing with a lot of records it is essential to create a way in which clients can specify how many they wish to obtain exactly. Returning records in chunks as opposed to dumping it all at once saves a lot of bandwidth and processing power.

Authored by: Maciej Cieślar

How to Use Chrome Dev Tools to Find Performance Bottlenecks

As one advances through a Software Development career, concerns beyond simply writing code that works arise. In the world of web development, it becomes pertinent to not only build functional software but to also make them highly performant such that they are able to seamlessly deliver the desired experience while utilizing minimal resources.

Authored by: Scotch Development

Making Movies With amCharts

In this article, I want to show off the flexibility and real power of amCharts 4. We're going to learn how to combine multiple charts that run together with animations that form a movie experience.

Authored by: Antanas Marcelionis

Top 21 JavaScript And CSS Libraries

Everyone, no matter whether they are a fresher or experienced in the domain of UI development and UX design, have at some point became familiar with JavaScript & CSS libraries, around their time in...

Authored by: Sarah Elson

Interactive Particles with Three.js

A tutorial on how to draw a large number of particles with Three.js and make them interactive. This tutorial is going to demonstrate how to draw a large number of particles with Three.js and an efficient way to make them react to mouse and touch input using shaders and an off-screen texture.

Authored by: bruno imbrizi


Write Snapshots testing without Jest

azu Jan 19 ・2 min readJest is useful tool for snapshot testing. Snapshot testing is used in many library. For example, prettier use snapshot testings. I want to write snapshots testing without Jest. In such a case, I often use following template code. For example, following code work on Mocha.

Authored by: The Practical Dev


Build a Simple Web App with Express, Angular, and GraphQL

This article was originally published on the Okta developer blog. Thank you for supporting the partners who make SitePoint possible. During the past 10 years or so, the concept of REST APIs for web services has become the bread and butter for most web developers. Recently a new concept has emerged, GraphQL.

Authored by: SitePoint

How to use Firebase Realtime Database in React

A React with Firebase tutorial on how to work with Firebase's realtime database in React. Learn about the get, create, update and remove operations, how to enable pagination and how to order your list of data, and how fo associate items with each other ...

Authored by: Robin Wieruch

How to Migrate to Gulp.js 4.0

Despite competition from webpack and Parcel, Gulp.js remains one of the most popular JavaScript task runners. Gulp.js is configured using code which makes it a versatile, general-purpose option. As well as the usual transpiling, bundling and live reloading, Gulp.js could analyze a database, render a static site, push a Git commit, and post a Slack message with a single command.

Authored by: Craig Buckler

Interactive Command-line Prompts with Inquirer.js

Recently I was reviewing a sample project at work for a potential engineering candidate and was completely blown away by the prompt I was presented with from the command-line script. I was given a list of items to pick from and was able to arrow through them (as well as use j and k) and it was just magnificent.

Authored by: Alligator

Types of relationships with Postgres & TypeORM. TypeScript Express #8

Today we continue using Postgres with Express and Typescript. Since Postgres is a relational database, relationships are an essential part of working with it, and we cover it today. To handle it we use TypeORM. The code for the tutorial is in the express-typescript repository in the postgres branch.

Authored by: Marcin Wanago