JSK Weekly - December 04, 2019

Before everyone starts easing into holiday mode, now would be a great time to take the 2019 State of Javascript survey! If you'd like to know what's new this year, check out Sacha Greif's article on freeCodeCamp, "What's New In The 2019 State of JavaScript Survey". Then have a look at Facundo Corradini's "Web layouts like it’s 2020" and Aditya Prakash's "Top JavaScript Frameworks to learn in 2020" to get ahead before the new year rings in.

Looking to simplify web development? Francis Cote shows us how Snipcart has mastered the Vue.js framework in the last few months in "How Vue Components Work (& How They Simplify Web Development)" and John Au-Yeung takes us through the ins and outs of Parallax Scrolling in "How To Add Parallax Scrolling to Your Vue.js App."


Web layouts like it's 2020 Blog

If you ever get the feeling that designers and developers are from different worlds, you should have seen what it was like 10 or 20 years ago. In the early days of the internet, we were building websites while trying to figure out what a website was and how it should work.

Authored by: LogRocket

Build a GraphQL + React App with TypeScript

Create a React app from scratch using TypeScript that calls the SpaceX GraphQL API GraphQL and TypeScript have both exploded in adoption, and when the two are combined with React, they create the ideal developer experience.

Authored by: Trey Huffine

How to Setup a JS Monorepo Like a Professional

I have traditionally hated ESLint, Babel, Prettier, and the like. Don't get me wrong, they are fantastic tools; it's simply a nightmare to navigate setting up a new project with a conglomeration of...

Authored by: gitconnected

ES6 Generators in JavaScript, a Real-World Use Case

Developers have difficulty understanding when to use generators - learn how to integrate them by understanding this real-world use case. I don't mind admitting that since Generators were introduced, I've had a hard...

Authored by: gitconnected

Updating your existing apps for accessibility Blog

The web has an ever-growing user base, and more activities than ever are centered around web applications. It's important for developers and product managers to build interfaces that are applicable to not only a lot of use cases, but a wide range of abilities as well.

Authored by: LogRocket

Jank-free page loading with media aspect ratios Blog

Responsive webpages often rearrange content while loading. This can lead to considerable frustration for users when the text they are reading is suddenly moved off-screen. In this article, we'll look at several new and existing ways to solve this performance problem.

Authored by: LogRocket

What is globalThis, and why should you start using it? Blog

The JavaScript language is increasingly used in a wide variety of environments. In addition to the web browser, which is the most common type of host environment for JavaScript, you can run JavaScript programs in servers, smartphones, and even robotic hardware. Each environment has its own object model and provides a different syntax to access the global object.

Authored by: LogRocket


What's New In The 2019 State of JavaScript Survey

We just opened the 2019 State of JavaScript survey [http://survey.stateofjs.com/?source=fcc]. Go take it [http://survey.stateofjs.com/?source=fcc] if you haven't done so already! It's now the fourth time we're doing this survey, and each time we take a deep look at our big YAML file containing all our questions to see what stays and what goes.

Authored by: freeCodeCamp.org

A Common JavaScript Interview Question Asked By Google & Amazon

I have seen this question asked by Google, Amazon and even smaller tech companies to weed out JS developers. Interviewers are asking this type of question to really test your knowledge of important JavaScript concepts. By answering this question correctly, you can display your understanding of block scope, closures, anon functions, and Immediately Invoked Function Expressions (IIFE).

Authored by: JavaScript in Plain English

Top JavaScript Frameworks to learn in 2020

As quick as it was here, 2019 is going away. Today I will be discussing the top JavaScript frameworks to learn in 2020 to take your game to a whole another level The programming scenario is ever-changing, and that is true for JavaScript as well.

Authored by: JavaScript in Plain English

Handy JavaScript Array Tips

JavaScript, like any other programming language, has many handy tricks that let us write our programs more easily. In this article, we will look at how to do different things that involve arrays, like checking if an object is an array and combining arrays.

Authored by: John Au-Yeung

Let's Clean Up: Ugly Try-Catches in JavaScript!

We've all been there. We have all used await on async methods, forgetting to wrap them in try-catch just to be told off about an Unhandled Error 😱 But it's not just these aysnc methods that might throw.

Authored by: Colum Ferry

What's new in GSAP 3 Blog

GreenSock has been around for more than a decade, making it one of the oldest JavaScript animation libraries. It works anywhere JavaScript runs and animates both DOM elements and JavaScript objects while maintaining its performance. GreenSock is backward-compatible, framework-agnostic and easy for developers across all skill levels to pick up.

Authored by: LogRocket

Async/Await: The Simplicity of Writing Asynchronous JavaScript

One of the defining qualities of JavaScript is that it is synchronous. It is single-threaded, meaning that at any one time only one block of JavaScript code on a page can be executed, and each line is executed one after the other. Seems simple enough, right?

Authored by: Bryn Bennett


Blogged Answers: Learning and Using TypeScript as an App Dev and a Library Maintainer

2019 has been the first year where I really learned and began to understand TypeScript. I feel that my experience as both a Redux maintainer and an application developer has given me some potentially interesting insights and opinions on learning and using TypeScript, and I'd like to share those thoughts.

Authored by: Mark Erikson


3 Steps to Creating Dynamic Views in Angular

Before we can insert a view, we would have to first know how to create one. Angular supports two types of views, namely host views and embedded views. This is the view that we use most frequently and are probably most familiar with.

Authored by: JavaScript in Plain English

How to Use Custom Pipes in Angular

So, let's write some code and try to demonstrate how to use a couple of custom pipes: Filter pipe; takes an array as input and returns a subset of that array based on the term enter in a search input. Sort\orderBy pipe; takes an array as input and returns a sorted subset of that array.

Authored by: Bit

Game Development with Angular: How to Build Your Own Tetris Clone

This is the first of (hopefully) many parts on game development with Angular. The first part will give you some background on the project I'm working on. A few months ago, my wife was complaining that she could not find a good Tetris version for Xbox. "You are a software developer", she said.

Authored by: Mathias Raacke

Create Ionic 4/Angular 8 HTTP Service - positronX.io

A complete step by step Ionic 4 HTTP tutorial, In this tutorial, we will learn how to create Ionic 4/Angular 8 Service using HTTP & HttpClientModule and communicate with remote server using REST API. As we know, most of the applications render data from the remote server like YouTube has to fetch videos and display ...

Authored by: Digamber Singh


Handling React Forms and Validation with Formik and Yup

Handling and managing forms in React apps are too much of a hassle. There are many different libraries out there, but they do much more than you actually want. Here comes Formik to the rescue...

Authored by: Bit

Rendering sibling elements in React using Fragments Blog

React Fragments solve the issue of rendering a sibling element with no parent, and there's a useful shorthand syntax for them that you may not know.

Authored by: LogRocket

Experimental React: Using Suspense for data fetching Blog

If you're a React developer, by now you've most likely heard of Concurrent Mode. If you're still wondering what that is, you're in the right place. The React docs do a really good job of explaining it, but I'll summarize it here.

Authored by: LogRocket


How Vue Components Work (& How They Simplify Web Development)

In a rush? Skip to Vue component examples. With the latest version of our shopping cart built on top of Vue.js, I think it's fair to say we've mastered this framework in the last few months. And we still love it as much as the first day.

Authored by: Snipcart

Animating Vue with GreenSock Blog

The average cognitive load capacity of humans (the amount of information a person can process in an instant) is seven plus or minus two units of information, and the amount of information in the working memory lasts around 10 seconds.

Authored by: LogRocket

How To Add Parallax Scrolling to Your Vue.js App

Parallax scrolling is the effect where the background image scrolls slower than the elements in the foreground, creating an illusion of depth of the page. Websites often use this for informational pages, where you have some text in the foreground and an image in the background that scrolls more slowly to create a more interesting experience for the user.

Authored by: John Au-Yeung

Bootstrap Vue Introduction

How do you use Bootstrap with Vue? In this video I discuss what I did to get both working together!

Authored by: Erik Hanchett


How To Set Up Scheduled MongoDB Backups with a Bit of Node.js

With a couple of dependencies and some JavaScript, you can set up automatic backups on your servers for your MongoDB instances. This tutorial describes the process of setting up automatic backups for MongoDB using Node.js. Before we dive into this two-step process, you need a couple of prerequisites.

Authored by: gitconnected

The best unit testing frameworks for Node.js Blog

In this post, we will compare some of the most popular and widely used frameworks used when working with Node; Jasmine, Jest, AVA, and Karma.

Authored by: LogRocket

Know yarn before learning Node.js

I want to learn Node.js because I've heard it is so simple to set up it as a server. Like anyone else, I start by doing a search for "Node.js Tutorial" on Google. I frankly have to say the tutorial...

Authored by: Elye Project

Streams, Piping, and Their Error Handling in Node.js

A writable stream is a stream of data that is created to write some streaming data. For example, creating a write stream to write a text file for some streaming data. Let's consider the following example for creating a writable stream in Node.js. I am using TypeScript instead of JavaScript.

Authored by: JavaScript in Plain English

Node Event Emitters - For Beginners and Experts

Everything you need to know about event emitters in Node.js The core of NodeJS is event-driven programming. In NodeJS, we achieve event-driven programming with the event-emitter class. In this article, we'll discuss everything about the event-emitter class. The following are the topics that I'll be covering in this article.

Authored by: gitconnected

Libraries and Tools

6 best React component libraries by category

Love it or hate it, React is undoubtedly one of, if not the most popular front-end JavaScript framework right now, and that's unlikely to change for the foreseeable future. But, the framework can't do much on its own.

Authored by: areknawo

The complete guide to building a smart data table in React Blog

Table UIs are very common in web products because they're one of the easiest way to organize complex data in the UI. Many companies use data tables to show complex reports. Some common use cases for table UIs include displaying data for finance reports, sports leaderboards, and pricing and comparison pages.

Authored by: LogRocket

5 Ways to Improve UI Consistency

Useful developer workflows and tools for maintaining UI consistency across screens and apps. Building a consistent UI/UX is more than just doing things the right way. It creates a consistent and predictable experience for your users, which in turn feels trust in navigating and interacting with your applications.

Authored by: Bit

Do you need GraphQL with Django? Blog

Read up on the advantages of using GraphQL with Django and see how GraphQL's powerful and extensive features compare to Rest API.

Authored by: LogRocket


Basics of Testing JavaScript with Jest

In this article, we will be talking about testing our code in JavaScript. We will then proceed with the explanation through Q&A's as I hope this approach would be better than writing a long story. Let's dive in without wasting much time. It's as simple as the name suggests.

Authored by: Bit

Reusing JavaScript Tests

Writing tests is hard. 😤Why do we need them in the first place? 🤔 Code defines a set of instructions to perform a specific operation. Consider this function as performing the well-defined mathematical operation y = a + b.Assuming the developer understands the underlying principles, he can write this correct implementation in machine code: However, noise from human error, system constraints, or other bugs may damage the code: This is where tests come in.

Authored by: Bit

Static vs Dynamic Type Checking in React

Learn what is type-checking and when it's best to use each of its two forms. The question of dynamic vs static data type checking in the world of JavaScript (and thus React) has been around for years now. And honestly, I don't see a way for it to be finally resolved without taking external factors into account.

Authored by: Bit