JSK Weekly - March 27, 2019

This week we have some very good vanilla JavaScript articles. The one that we liked the most is a practical guide on "How to Remove Duplicates from an Array in JavaScript" by Maciej Cieślar.

TypeScript is an increasingly hot topic. That's why we can recommend to check out "How to think and type in TypeScript" by "Areknawo".

React developers will most certainly enjoy exploring how to "Improve Performance in React Class Components using React.PureComponent" with Chidume Nnamdi while Vue folks can look at "Useful Vue Admin Templates for 2019" by Anastasia Ovchynnikova.


Adding Search to Your Site with JavaScript

Static website generators like Gatsby and Jekyll are popular because they allow the creation of complex, templated pages that can be hosted anywhere. But the awesome simplicity of website generators is also limiting. Search is particularly hard. How do you allow users to search when you have no server functions and no database?

Authored by: David Walsh

How to Create Stunning, Interactive Bar Charts Using JavaScript

We take a look at how to use an open source JavaScript library to get started with making basic data visualizations with the widely popular JavaScript language.

Authored by: DZone


How to Remove Duplicates from an Array in JavaScript

Recently in one of my projects I had to remove duplicates from an array. Instead of looking up a npm package that could do it for me I chose to implement it myself. Here's what I learned about this seemingly straightforward task.

Authored by: Bit

JavaScript Fundamentals: Understanding Events

The interaction of JavaScript with HTML is handled through events. Events are actions that occur when either the user or the browser itself manipulates the page. Some common events that occur with websites, are page loads, button clicks, key presses, hovers, form submissions, window resizing, to name but a few.

Authored by: Tim Robards

Understanding Event Emitters

Consider, a DOM Event: const button = document.querySelector("button"); button.addEventListener("click", (event) => /* do something with the event */) We added a listener to a button click. We've subscribed to an event being emitted and we fire a callback when it does. Every time we click that button, that event is emitted and our callback fires with the event.

Authored by: CSS-Tricks

Customize objects coercion in JavaScript

JavaScript, unlike other programming languages, doesn't allow operators overloading. What it allows us to do is to modify the primitive value in which an object is transformed. This is because when an object is coerced, the result is, and must be, a primitive value.

Authored by: JFieldEffectT

Understanding Public and Private Fields in JavaScript Class

Adding some privacy to the JS class? Let's explore that in this post... Somethings should always be left private. That's nothing said of when using classes in JS. But in recent times, proposals have come up to add some privacy to the JS class. We will explore that in this post.

Authored by: Bit


How to think and type in TypeScript

A while ago I've written a on learning TypeScript. There, I discussed different types, syntax and more with a detailed description for each. But naturally, there's more to learning a programming language that just a raw syntax. You need to know how things interact with each other, how you should properly utilize them, and what are the best practices to follow.

Authored by: areknawo

A Step Towards Compiling TypeScript

One of my past times is writing compilers, they're just fun to work on. One of those projects I've been working for a couple of months now is a TypeScript to native compiler. Now just to be absolutely clear here, by native I do mean actually native as in native AOT (ahead-of-time compilation) to machine code and not as another buzzword for yet another JavaScript framework.

Authored by: Casper Beyer

Typescript tutorials: webpack typescript Configuration

In this Typescript tutorial two technologies webpack typescript we will try to use them together from scratch Step 1: npm initialization first, we will need a project which is empty yes totally empty then we will first initialize npm in there as we will be requiring some of the dependencies

Authored by: Neeraj

TypeScript 2.9: Passing Generics to JSX Elements

TypeScript 2.9 added the ability to specify type arguments for generic JSX elements. This means we can now write the following component in a TSX file: function Form() { // ...

Authored by: Marius Schulz


Some Real-World Experimenting With The Runtime Abstraction For State Management In Angular 7.2.7

Ben Nadel shares a real-world exploration of the Runtime Abstraction concept that he is formulating around state-management in a Single-Page Application using Angular 7.2.7. The Runtime Abstraction hides state-management choices, doesn't have superfluous code, and make state mutations really easy to reason about.

Authored by: Ben Nadel

I'm Going To Stop Worrying About Tightly-Coupled DOM Access In Angular 7.2.7

Ben Nadel has reached a tipping point in his pursuit of an "absolute" separation of concerns. And, realizes that while adding some direct DOM-access in his Angular 7.2.7 Components does create tighter coupling, it does so at the pleasure of increased readability and ease-of-maintenance.

Authored by: Ben Nadel

Scrolling An Overflow-Container Back To The Top On Content Change In Angular 7.2.7

Ben Nadel looks at a common use-case in a Single-Page Application (SPA): having to scroll an overflow-container back to the top of its scroll-offset when its content changes. This can be done by reaching directly into the DOM (Document Object Model) and calling the container's .scrollTo() method.

Authored by: Ben Nadel


Improve Performance in React Class Components using React.PureComponent

At the release of React v16.6, it heralded great advancements on how we use Reactjs. One of the great additions to React v16.6 is the React.PureComponent class. In this post, we will look in depth at what React.PureComponent and the goodies it brings us. Read on. Tip: Building with components?

Authored by: Bit

A guide to useState in React

useState is a hook that allows you to have state variables in functional components. There are two types of components in React, class and functional components. Class components are ES6 classes that extend from React.Component and can have state and lifecycle methods: Functional components are functions that just accept arguments as the properties of the component and return valid JSX: As you can see, there are no state or lifecycle methods.

Authored by: Esteban Herrera

Creating Forms In React With Formik And Yup

Forms are a very important part of any application. Forms are used everywhere from login to search.

Authored by: Bit

Powering Up React Development With Nx

The most common way to start a React project is to use the official Create React App. There are a few other starter kits, and their main focus is on getting developers up and running quickly.

Authored by: Victor Savkin

Patterns for data fetching in React

React is great at displaying your data in a hierarchical component view. But how do your components get the data? There are many ways to go about it, each with their own pros and cons. In this article, I'll cover all the major ways to do so with hands-on examples, as well as their various alternatives.

Authored by: LogRocket

Creating A Social Follow Component in React

On almost every website, you're going to watch to share your Social Media accounts for visitors to follow. In this article, we are going to create a Social Follow component in React! For a deeper dive, check out Using Font Awesome 5 with React!

Authored by: Scotch Development

Writing Your Own Custom Hooks!

It's a scary world out there and please don't tell me you are planning to survive this React World just with the help of classes (of course you can but it will be painful). Hooks are the new trend in...

Authored by: Bit


Top Vue admin Templates in 2019

A few years ago you only had a few options choosing an admin template: these were React, Angular and plain HTML5. Surely today these templates are still big on the market. Last year, though, the Vue.js framework has become very popular, and because of this we now have lots of good admin templates.

Authored by: Bit

Build Responsive Cross Platform Vue Apps with Quasar Framework and GraphQL

Build responsive SPAs, SSR Apps, PWAs, Hybrid Mobile / Electron Apps using a single codebase with Quasar Framework powered by Vue.js and GraphQL APIs over postgres using Hasura GraphQL Engine. Instant setup. Tutorial/boilerplate 👉 quasar-framework-vue-graphql Quasar Framework Quasar Framework is a high performance full frontend stack allowing developers to maintain a single codebase to build different types of apps (SPA, SSR, Hybdrid etc).

Authored by: Praveen Durairaj

Build a Vue.js SPA on Top of Headless WordPress

In a rush? Skip to technical tutorial or live demo I can't believe I'm about to write about WordPress again. I'm only (half) kidding, as the last time I played around the WP REST API, I thought it was actually pretty dope!

Authored by: Snipcart

Google Picker With Vue

Last week we saw a general File Uploader with Vue. Now let's see how we can pick a file from Google Drive. Initial Setup with Google Go to https://console.developers.google.com. Create a project. After creating your project it will be listed, click on the project you created. You would see this dialog box.

Authored by: Karthik_B

Renaming src Folder of a Vue CLI 3 Project

I'm Anthony Gore and I'm here to teach you Vue.js! Through my books, online courses, and social media, my aim is to turn you into a Vue.js expert. I'm a Vue Community Partner, curator of the weekly Vue.js Developers Newsletter, and the creator of Vue.js Developers.

Authored by: Anthony Gore


How to Build and Deploy a Cloud Native Node.js App in 15 minutes

The goal of this tutorial is to show how you can turn a simple Hello World Node.js app into an application running on Kubernetes with all the best-practices applied. The tutorial shows you how to use the assets and tools provided by CloudNativeJS in order to build an enterprise-grade application, turn it into a Docker container image and then deploy that image easily on Kubernetes.

Authored by: RisingStack

A complete guide to threads in Node.js

With the addition of worker threads, fields like AI and machine learning can now synchronously execute complex operations in Node.js. Learn how.

Authored by: Maciej Cieślar

An introduction to the hapi Node.js Framework

The great thing about the Node.js ecosystem is the fact that if you're looking to create an application, there's most likely a module/framework that can help with that! In this article, we'll be creating a basic REST API with hapi.js. You may also be interested in API Development and Routing with Node.js and Express!

Authored by: Alligator

Node.js TypeScript #7. Creating a server and receiving requests

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 streams6. Node.js TypeScript #6.

Authored by: Marcin Wanago


Top 5 Frontend Development Megatrends

It can feel overwhelming to be a web developer. Constantly trying to keep up, learning new frameworks, learning new language features, sometimes learning entire new languages. It's no wonder that front-end developers are often stressed out of their minds.

Authored by: Kevin Ball

My Opinionated git Cheat Sheet

Ben Nadel creates a git cheat sheet for himself so that he can refer to it when he forgets how to execute certain git use cases. This git cheat sheet will also serve as a repository of the git information that he gathers over time.

Authored by: Ben Nadel

Experimenting with the Streams API

I am always looking for ways to build faster, slicker web pages. Where applicable, I'll use great new browser features such as service workers, HTTP/2 and improved compression, just to name a few. But what if I told you there was a way to build even faster web

Authored by: Dean Hume

Build a Decentralized Web Chat in 15 Minutes

In this 15 minute tutorial we're going to build a simple decentralized chat application which runs entirely in a web browser. All you will need is a text editor, a web browser, and a basic knowledge of how to save HTML files and open them in the browser.

Authored by: David Walsh