JSK Weekly - March 13, 2019

Unit testing is an essential part of software development. This is why it's always good to learn more on this topic. This week Eric Elliott presented us with a great article "Unit Testing React Components" which will most delight the React developers.

Another great React article that we can recommend is "Get “Hooked” on React Hooks" by Rajat S.

Finally, we warmly recommend an excellent "Introduction to Web Workers" by Chidume Nnamdi. You will get a hands-on deep dive into web workers: Build complex apps without losing performance.


Introduction to Web Workers

Web Workers provides an API where we can run a JS code in another thread other than the main thread of script runs in. When we run CPU intensive op in the main thread, we will be greeted by the familiar "unresponsive" script dialog.

Authored by: Bit

Keeping it simple with the JavaScript console

Logging to the console isn't just for beginners. If something simple solves a complex problem, don't make it harder than it needs to be.

Authored by: Casper Beyer

How to secure a REST API using JWT

REST APIs are great because they are logically simple, they don't keep complex states in memory, they deal with resources (instead of dealing with loose, unconnected functions) making their entire business logic cohesive. I really like them, and since you are reading this, I'm guessing you do too.

Authored by: Fernando Doglio


JavaScript Performance Pitfalls in V8

The compilers built into V8 - both the TurboFan optimizing compiler and the Ignition bytecode generator - are so-called method JITs, meaning the unit of compilation is always a method, aka a function in JavaScript speak.

Authored by: Pony Foo

Deep Dive into JavaScript's Array Map Method

An extensive walkthrough for JavaScript developers who want to get to know the Array's Map Method to transform data. You will learn about the Callback Function's Arguments, usages of Map with other Array Methods, and ...

Authored by: Robin Wieruch


useTypescript - A Complete Guide to React Hooks and TypeScript

React v16.8 introduced Hooks which provide the ability to extract state and the React lifecycle into functions that can be utilized across components in your app, making it easy to share logic. Hooks have been met with excitement and rapid adoption, and the React team even imagines them replacing class components eventually.

Authored by: Trey Huffine

Node.js TypeScript #5. Writable streams, pipes, and the process streams

1. Node.js TypeScript #1. Modules, process arguments, basics of the File System2. Node.js TypeScript #2. The synchronous nature of the EventEmitter3. Node.js TypeScript #3. Explaining the Buffer4. Node.js TypeScript #4. Paused and flowing modes of a readable stream5. Node.js TypeScript #5. Writable streams, pipes, and the process streamsIn this article, we continue covering streams, since they ...

Authored by: Marcin Wanago

TypeScript introduction part III - generics & stuff

Here, we are continuing the grand TypeScript introduction. If you haven't already, be sure to check out and for getting started with TS and knowing what's going on in this tutorial. 😉 In this article, we're going to finally explore generics, some complex types and declaration files.

Authored by: areknawo

ArraySort in typescript

In this Typescript tutorial, we will see How we can sort arrays in typescript in a typed manner by the end of this small Typescript tutorial, you will know How array sort works in typescript Use of readonly array sort function return type case sensitive sortings Comparer function How array sort works in typescript Let us see how we can sort an array in typescript.

Authored by: Neeraj


Using Pure Pipes To Generate NgFor TrackBy Identity Functions For Mixed Collections In Angular 7.2.7

Ben Nadel updates his previous TrackByPropertyPipe experiment to allow for multiple properties to be used when generating consistent object identity across an NgFor collection in Angular 7.2.7. This update should obviate the need to ever create a concrete NgForTrackBy function in his Angular components.

Authored by: Ben Nadel

Using Pure Pipes To Generate NgFor TrackBy Identity Functions In Angular 7.2.7

Ben Nadel reflects on the ease-of-use provided by the "track by" expression in AngularJS; and, attempts to re-create some of that magic using pure Pipes in Angular 7.2.7. With a pure Pipe, we can create a higher-order-function (HOF) that generates a "track by" function that uses a specific property as the track-by expression.

Authored by: Ben Nadel


Get "Hooked" on React Hooks

useContext Hook This hook is a little different than the other two basic hooks. While the useState and useEffect hooks allow us to handle the app's state and replace the 3 lifecycle methods, the useContext hook is used to make things a little nicer for us.

Authored by: Bit

Build a Reusable Accordion Component with React and Bit

Accordions allow you to break down the large section of any content, such as FAQs, into smaller chunks. A user can view the sections one by one, improving user-experience and helping users focus on the right info at the right time. Here's the output of this component.

Authored by: Bit

Using React Loadable for Code Splitting by Components and Routes

In a bid to have web applications serve needs for different types of users, it's likely that more code is required than it would be for one type of user so the app can handle and adapt to different scenarios and use cases, which lead to new features and functionalities.

Authored by: CSS-Tricks

A Complete React Redux Tutorial for 2019

Trying to understand Redux, it's really confusing how it all works. So much terminology! Actions, reducers, action creators, middleware, pure functions, immutability, thunks... How does it all fit together with React to make a working app? You can spend hours reading blogs and trying to sift through complex "real world" apps trying to piece it together.

Authored by: Dave Ceddia

A Complete Guide to useEffect

You wrote a few components with Hooks. Maybe even a small app. You're mostly satisfied. You're comfortable with the API and picked up a few tricks along the way. You even made some custom Hooks to extract repetitive logic (300 lines gone!) and showed it off to your colleagues.

Authored by: Dan Abramov


So What's New in Vue 2.6?

Just days ago, Vue turned 5 and the team released the newest version 2.6 to celebrate. In this article, we shall take a quick look at the new and shiny things that shipped with this new version and some important changes. Slots can be seen as a crucial mechanism that helps to compose flexible components in Vue.

Authored by: Bit

VS Code 1.32: Autocomplete in Vue Templates

The VS Code 1.32 February update is out now and with it comes some great new features for Vue users. Let's run through the list of features that are in the new 1.32 update: Color themes without reloading: Install and apply new theme extensions without reloading.

Authored by: Scotch Development


A Practical Guide to Building a Node.js Service on an AWS S3 bucket

Node.js has been in the market for quite some time, as a Javascript developer, it is only fair that you learn how it works by now. Contrary to popular frontend developer's belief, Node.js is not a...

Authored by: Bit

Libraries and Tools

Building a Universal Application with Nuxt.js and Django

The advent of modern JavaScript libraries such as React.js and Vue.js has transmogrified Front-end web development for the better. These libraries ship with wonderful features including SPA (Single Page Applications) which is basically the dynamic loading of the content in web pages without a full reload to the browser.

Authored by: Scotch Development

Why GraphQL is the key to staying out of technical debt

GraphQL (not to be confused with GraphDB or Open Graph or even an actual graph) is a remarkably creative solution to a relatively common problem: How do you enable front end developers to access backend data in exactly the way they need it? Quick example: We want to display a list of products on a web page.

Authored by: Burke H✪lland

console.log() Faster with Turbo Console Log

I've recently been live-coding on Twitch and the thing that I've loved about it is all the users in the chat that are helping me out by giving me their own tips and tricks. In our most recent stream, we started talking about my VS Code exten

Authored by: Scotch Development

GraphQL in Depth: What, Why, and How

I love popcorn. As I'm writing this, I'm snacking on a bowl of multi-colored kernels, lightly seasoned with Flavacol (hint: this is the movie theater's secret) and I'm feeling a twinge of hubris in my eye... "I should start a popcorn company..." Well, that's a terrible idea, Ryan!

Authored by: JavaScript Kicks


Unit Testing React Components

Unit testing is a great discipline which can lead to 40%-80% reductions in production bug density. Unit testing also has several other important benefits: Improves your application architecture and maintainability. Leads to better APIs and composability by focusing developers on the developer experience (API) before implementation details.

Authored by: Eric Elliott

How to use jest-emotion and react-testing-library to Test Emotion Component Styling

There are times where an animation can only be achieved by a component always being rendered. This could drive important business logic, however there may not be an easy way to test this when paired with a CSS-in-JS library like Emotion.

Authored by: Code Daily


Ember.js: Coming Soon in Ember Octane - Part 4: Modifiers

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

TypeScript vs PureScript

There are many ways to skin a cat, and for each one there is a statically typed language that compiles to JavaScript. Among the most known we have TypeScript (TS), PureScript (PS), Elm, Reason, Flow and Dart. But why are there so many? Why do they exist and what is their rationale?

Authored by: LogRocket

Make your dull forms "Interactive"

Forms are always the primary way of interacting with developers, designers and users for collecting information. We always interact with such forms in our day to day whether it is for user login/signup, collecting feedbacks or making payment online. Well, That's important, It is really required to make them interactive.

Authored by: Bit

10 Things I Learned About Web Development

1. Everything starts with URLs. Whatever's in the URL, should be reflected on the page, and vice versa. Are you updating the state? Update the URL first, and derive the new state from there. You'll get lots of things for free: browser navigation, reproducible errors, easier reporting.

Authored by: Dario Gieselaar