JSK Weekly - November 13, 2019

Heading steadily towards 2020, it's a good time to start planning ahead to keep up with the Jones's and also keeping up with what has worked for others in 2019. Shifa Martin discusses their top JS framework, as voted by over 450 developers in "The Top JavaScript Frameworks For Front-End Development in 2020" on freeCodeCamp, while Dan Halperin gives us a leg up to stay ahead of the curve in "Master UX with React in 2020: Four Ways to Upgrade Your React App User Experience" on gitconnected.

If you'd like to become more familiar with design systems, bits and pieces has you covered this week with both Jonathan Saring taking us through how to gain true adoption for your design system by developers, and everyone else in "Getting Adoption for Design Systems — A Practical Guide" and Eden Ella showing how to build a design system as a side-effect of your everyday work in "How to Gradually Build a Design System."

LogRocket has covered so many React angles this week from Ebenezer Don's "RxJS with React Hooks for state management" and Karthik Kalyanaraman's "A deep dive into React Fiber internals" to Paramanantham Harrison's "The complete guide to building inline editable UI in React", to name just a few.


Getting Adoption for Design Systems - A Practical Guide

The truth is that designer-developer collaboration has always been a pain point. And not just designers; product managers, marketers and everyone else should also be included in the visual aspects of the development process. This is a key part of what we're doing at Bit's collaborative component platform, which gave us the opportunity to learn (and share) a lot about this topic.

Authored by: Bit

Rethinking frontend APM - LogRocket Blog

The center of gravity of the modern application stack is shifting toward the frontend. Demand for rich and performant user interfaces, highly scalable infrastructure, and increased developer productivity has led product and engineering teams to deploy new application architectures.

Authored by: LogRocket

How to Gradually Build a Design System

Building a design system as a side-effect of your everyday work A design system is an evolving single source of truth for individuals and teams that are taking part in building products grouped under a single brand or visual language (It doesn't get more abstract than that 🙂).

Authored by: Bit

Building a real-time data streaming app with Apache Kafka Blog

Most large tech companies get data from their users in various ways, and most of the time, this data comes in raw form. In an intelligible and usable format, data can help drive business needs. The challenge is to process and, if necessary, transform or clean the data to make sense of it.

Authored by: LogRocket


Console cheat sheet for JavaScript developers

You can open console by using: Chrome → Ctrl Shift J (on Windows) or Ctrl Option J (on Mac) Safari →Option-Cmd-C The console object provides access to the browser's debugging console. The console object present in the global scope. Outputs a message(variable) to the web console.

Authored by: jagathish

Handling null and undefined in JavaScript

One aspect of JavaScript development that many developers struggle with is dealing with optional values. What are the best strategies to minimize errors caused by values that could be null, undefined, or otherwise uninitialized at runtime? Some languages have built-in affordances for those circumstances.

Authored by: Eric Elliott

The tale of three dots in Javascript

Once upon a time, there was a significant upgrade to the Javascript language called ES6/ES2015. It introduced many different new features. One of them was the three consecutive dots that we can write in front of any compatible container (objects, arrays, strings, sets, maps).

Authored by: Soós Gábor

Dynamic Pagination Rendering with pure JavaScript 🚀

I have shared my experiences with creating sortable dynamic data tables. Now, I want to share another experimental story about dynamic pagination rendering. I had to build a pagination module in a project. I examined lots of pagination libraries but these were so over-engineered compared to the product team's requirements.

Authored by: Murat Doğan 🚀

JavaScript: Keep it simple! (Part 2)

JavaScript is now a more versatile framework than what it used to be. I am excited to write my second article on JavaScript. You can find the first article of this series here - This article requires you to know the basics of JavaScript, I hope you enjoy reading it.

Authored by: Sanksshep Mahendra

JavaScript Fundamentals: An Introduction to REST APIs

REpresentational State T ransfer (REST) is an architectural style that handles the client-server relationship, with the purpose of aiming for speed and performance by using re-usable components. REST as a technology was introduced into the world in a 2000 doctoral dissertation by Roy Fielding.

Authored by: Tim Robards

Techniques for instantiating classes

In this blog post, we examine several approaches for creating instances of classes: Constructors, factory functions, etc. We do so by solving one concrete problem several times. The focus in this post is on classes, which is why alternatives to classes are ignored.

Authored by: Axel Rauschmayer


How TypeScript 3.7 Improves Code Quality

In this article I'll go over a few key highlights from the recent release of TypeScript 3.7. I'll be looking at things through the lens of how they impact software and code quality, because let's face it - that's kind of my jam. I've been following TypeScript releases for some time now.

Authored by: Matt Eland

Publishing Typings to DefinitelyTyped

Typescript is a great addition to JavaScript. Unfortunately, not every JS package has definitions for TypeScript.

Authored by: Max Boguslavsky


Adaptive Components & Parent-Driven Behavior in Angular

It takes time to fully grasp concepts such as dumb/smart/stateful/stateless components, unidirectional data flow, content projection, views and DOM manipulation, and dependency injection in Angular. All that and probably some further information is necessary to build a consistent, scalable, and flexible component architecture.

Authored by: L. Arman Özak

Angular 9 Routing Tutorial - Sending & Getting Routes Parameters

In this Angular 9 Routing tutorial, we will learn how to set parameters to routes along with that we will also look at how to access or get parameters from the route using ActivatedRoute's snapshot and paramMap method. In the first step, we will learn how to create routes and set parameters in the routes ...

Authored by: Digamber Singh


The 5 best React Native eCommerce templates of 2019

Establishing online store, e-commerce websites and applications have been a growing trend in the modern world. Due to the utmost feasibility and efficiency of customer attraction from digital or online marketing, online stores and e-commerce sites are growing rapidly.

Authored by: TheBestDevlist

Cleaning up the DOM with ForwardRef in React Blog

Ref forwarding in React is a feature that lets components pass down ("forward") refs to their children. It gives the child component a reference to a DOM element created by its parent component. This then allows the child to read and modify that element anywhere it is being used.

Authored by: LogRocket

A deep dive into React Fiber internals Blog

Ever wondered what happens when you call ReactDOM.render( , document.getElementById('root'))? We know that ReactDOM builds up the DOM tree under the hood and renders the application on the screen. But how does React actually build the DOM tree? And how does it update the tree when the app's state changes?

Authored by: LogRocket

RxJS with React Hooks for state management Blog

In this article, we'll cover the basics of RxJS and how to integrate it with React applications using React Hooks for state management. We'll do this by building a demo chat application. Our chat application will have three components that will communicate with each other through RxJS.

Authored by: LogRocket

The complete guide to building inline editable UI in React Blog

UI for web applications are becoming increasingly complex by the day. With more powerful client side libraries, we can push the limits of UX through UI experimentation. One of these experiments involves inline editable UI. Most modern web apps have inline editable UI.

Authored by: LogRocket

Master UX with React in 2020: Four Ways to Upgrade Your React App User Experience

If your application gives the user a good feeling, they are more likely to continue using it. 2020 is right around the corner, which means more React apps are coming to the market.

Authored by: gitconnected

Building a responsive camera component with React Hooks Blog

I was recently tasked with building a front-end camera component that allows users to upload images of their identification cards to a back-end service. In this post, I'll demonstrate how I created the component by explaining how to configure a live media stream, capture a snapshot with React Hooks, and style and position the elements using styled-components.

Authored by: LogRocket


Storing The Last Dispatched Action In Aurelia Store - I Like Kill Nerds

Another day, another Aurelia Store tip/hack. Recently, I encountered an interesting situation where I wanted to know when a specific action has fired, being able to check for it within my state subscriptions. Now, it is highly likely there is a better way to do this.

Authored by: Dwayne Charrington


Emitting Component Custom Events - VueJS Tutorial

An important part of any Vue application is to take full advantage of Vue's reactivity to pass data around an app. However, sometimes this may sometimes get a little confusing when it comes to handling multiple components, inheritance, and a bunch of other problems that always come up in development.

Authored by: matt maribojoc 🇵🇭

How to build applications with Vue's composition API Blog

Vue's flexible and lightweight nature makes it really awesome for developers who quickly want to scaffold small and medium scale applications. However, Vue's current API has certain limitations when it comes to maintaining growing applications. This is because the API organizes code by component options ( Vue's got a lot of them) instead of logical concerns.

Authored by: LogRocket

Handling Dynamic Routes with Vue Router

Nobody will remember the url, http://yourwebsite.com/product/item-advxv12323-asdfa123 - so let's convert it to something nicer. While Vue Router is pretty straightforward, a problem that I've frequently found myself facing while building different applications is the idea of trying to make prettier paths for pages. This article assumes you already know the basics of Vue Router.

Authored by: matt maribojoc 🇵🇭

How to use the new composition API in Vue

Composition API is most commonly discussed and new feature syntax of the next major version release of Vue. It's a completely new approach in making our logic reusable and organize our codebase.

Authored by: Ishan Manandhar


How to Build a Simple Video Converter with Node.js

Videos are an incredibly popular medium for sharing information, but in the past, converting videos has always been a problem for people. With FFMPEG, this can now be solved easily. FFMPEG is a...

Authored by: John Au-Yeung

Querying SQL Server with Node.js

I will assume you have node.js installed but if not, it can be downloaded here. We will start off by setting up our node.js Web Server and testing it. Then add similar code as before to Connect to and Query our SQL Server Database. We will use the Minimalist Web Server framework for node.js, Express .

Authored by: Gravity Well

Build a Password Field for the Terminal using Nodejs

How to build a reusable password field for the command line interface You're probably familiar with the popular password field that shows up whenever you want to push your local repo to remote using Git Bash. It prompts for a password, and whenever you type, nothing is displayed on the terminal.

Authored by: Bit

Libraries and Tools

3 Ways to Build Your Own React Component Library

Component libraries are great resources when it comes to developing React-based applications. They allow you to logically group your components in a way that lets others in your team explore them and pick & choose the ones they need.

Authored by: Bit

List of Top JavaScript Frameworks 2020 For Front-End Developers

Front-end developers might know this game already: you say or type "top JavaScript frameworks 2019" on Google you easily get so many JavaScript frameworks to choose. Always there are more choices for JavaScript frameworks. It is always a tough challenge to simplify this choice of a JavaScript framework for front-end development.

Authored by: freeCodeCamp.org


Unit Tests for Random Functions

Shotgun is video series that lets you ride shotgun with me while I tackle real programming challenges for real apps and libraries. The videos are only available to members of EricElliottJS.com , but I'm journaling the adventures here. One of the challenges you'll face when you use TDD long enough is the question: "How do I test random functions?"

Authored by: Eric Elliott

Unit testing Node.js applications using Mocha, Chai, and Sinon Blog

In this article, we will look at how to use Mocha for testing, Chai for assertions and Sinon for mocks, spies, and stubs.

Authored by: LogRocket

TDD with React Test Renderer Blog

It's no secret that Enzyme has become the de facto standard for React components testing, but there are other good options around. For example: React Test Renderer. I personally like Test Renderer because of the way it works-it renders React components into pure JavaScript objects that are easy to use and understand.

Authored by: LogRocket

JavaScript waitForTime

I write a lot of tests for new features within Firefox DevTools. We have hundreds of "mochitests" which open the browser and perform synthetic actions like clicking, typing, and other user actions. I've previously written about waitForever which essentially halts following actions without locking the browser.

Authored by: David Walsh