JSK Weekly - May 14, 2020

It's the middle of May and many countries are easing their way out of lock down. A welcome countdown for most! Hopefully everyone has been keeping busy, whether learning new things, brushing up on best practices or just simply staving off the boredom!

The developer community is never really short of things to do, but in case you're feeling boredom setting in, have a look at Daan's list of "7 Things to Build When You Feel Bored as a Programmer" to learn new things and improve your skills! Or perhaps Sifat Moonjerin's "30 Must-Know Topics In JavaScript" will inspire your inner ninja! If Libraries are your thing, Amy J. Andrews unpacks some animation libraries in "7 JavaScript Animation Libraries You Can Use Right Now to Surprise Your Users" while Mahdhi Rezvi shows us 5 libraries to work with Strings in "5 String Manipulation Libraries for JavaScript" on the Bits and Pieces blog.


Supporting the Developer Community: Our Response to COVID-19

We understand that many of us have been severely impacted by the COVID-19 crisis and will continue to feel the impact for some time to come.

Authored by: Syncfusion

Monitor Visual Changes in Websites with Puppeteer and Resemble JS

npm i puppeteer fs resemblejs mz const puppeteer = require('puppeteer'); const fs = require('fs'); const compareImages = require("resemblejs/compareImages"); const fsz = require("mz/fs"); const siteName = 'nameOfSite';// I used a popular movie download site Create a folder named screenshots in the project root. This is where our screenshots will be saved.

Authored by: Bit

7 Things to Build When You Feel Bored as a Programmer

You've probably been thinking about an exciting and fun side project that you could work on. Although you want to build something, you're not really sure about what to build. As a result of this, you feel bored.

Authored by: gitconnected

How and Why You Should Avoid CORS in Single Page Apps

Over the past decade, Single Page Apps have become the norm technology to build web apps. Today, frameworks like Angular, Vue, and libraries like React dominates the frontend development, providing the underlying platform for these apps. The good news is, it serves the frontend and backend APIs from a single domain.

Authored by: Bit

How to render React app using Express server in Node.js

There are some requirements where we need to access some files in browser but If you are using Express.js in Node.js which runs on the server side, the files are not available automatically. To get that working we need to make some code changes. So let's do that.

Authored by: gitconnected

Online Store with Svelte - Domenik Reitzne on Real Talk Javascript #83

Craig and John talk with Domenik Reitzner about Svelte. Can you write less code and build boilerplate-free components using HTML, CSS, and Javascript? What about the lack of cli? What is it really like developing with Svelte and why might someone not want to use Svelte?

Authored by: John Papa


Discovering JavaScript: Three Objects New Developers Must Know

I have been a Java developer looking to add JavaScript to my stack and wish to become a JavaScript rockstar before end of 2020. I have been learning JavaScript in-depth. However, I have always known JavaScript. Albeit minimally, I can write JavaScript inside tag and manipulate the DOM.

Authored by: Bit

A Visual Guide to References in JavaScript

Have you ever changed a variable, expecting that the change would be isolated to just that one variable... and it wasn't? Have you noticed that changes to variables inside a function will sometimes be contained to the function, but other times will spill out and cause weird bugs?

Authored by: Dave Ceddia

Dynamic Imports in JavaScript

Back in the day, RequireJS was a popular library that provided module system in JavaScript. It was an implementation of AMD (Asynchronous Module Definition). The library helped with organization of...

Authored by: V Keerti Kotaru

How to Use Object Destructuring in JavaScript

The object destructuring is a great JavaScript feature that lets you extract properties from objects clearly and concisely. What's better, object destructuring can extract more than one property in one statement, can access properties from nested objects, and can set a default value if the property doesn't exist.

Authored by: Dmitri Pavlutin

JavaScript Variable Best Practices

Giving a good name to your variable is crucial. How you name your variables will decide the future of your application codebase. It will dictate how easy it is: To understand your code To navigate it To maintain it So what we can do to genuinely improve naming?

Authored by: Arthur Frank

How to Create Native Drag and Drop Functionality in JavaScript

Drag and drop functionality is a common feature. It creates a more intuitive user flow by letting users grab and drop objects to places where they want them to be. There are countless of JavaScript libraries out there just for this purpose. Include one for...

Authored by: Ferenc Almasi

30 Must-Know Topics In JavaScript

Do you know how to use if-else, for loops, and functions in JavaScript?You do? Great. Because the following 30 topics will make you a JavaScript Ninja! Array.splice() method can be used to modify an existing array by adding new elements or by replacing existing elements. It takes three parameters.

Authored by: gitconnected

JavaScript Design Patterns: The Adapter Pattern

This is the first article in a series I am planning to make about Design Patterns in JavaScript. This time we are going to dive into Adapter pattern. Which is one of the simplest but really powerful and underestimated patterns out-there.

Authored by: Arthur Frank

JavaScript Best Practices - Declaring and Using Variables

JavaScript is a very forgiving language. It's easy to write code that runs but has issues in it. In this article, we'll look at best practices for declaring and using JavaScript variables. In JavaScript, if strict mode is off, then we can implicitly declare variables.

Authored by: John Au-Yeung

📖 JS Must-Read. Which JavaScript Books you should read

When I start studying programming I spend a lot of time reading or watching content from various ways to make sure, I have relevant content and practical exercises. I try looking to see how well the content meets a few criteria below: Popular Technology One of the main things for me.

Authored by: Frontend Weekly


Switch guard in Typescript -  How to make sure all possible cases are handled

Let's say we are implementing the delivery part of an app. The user can choose between 2 delivery modes : normal (delivery in 48h) fast (delivery in 24h) The resulting type is the following Here is what the code could look like somewhere in the app Now, what if we add a new delivery mode, express, so the user can be delivered in 2 hours?

Authored by: Antoine Prudhomme


Designing Scalable Angular Apps: Pages, Containers and Views

Angular is one of the popular front-end frameworks for building single-page applications. Working with more than a dozen Angular projects, one common pitfall I have seen is that the focus for unit tests dries up over time.

Authored by: Bit

Top 5 Best Practices for Angular App Security - Code Handbook

Image Source Angular is a popular framework for app development, but its security standards can be tricky to understand. To ensure your applications are secure, you need to familiarize yourself with the most common security vulnerabilities and the latest security ...

Authored by: codehandbook

Using Expando DOM Properties In Angular 9.1.6

Ben Nadel looks at how you can use "expando" properties in an Angular 9.1.6 application in the case where you need to map an HTML DOM (Document Object Model) element to an in-memory value when the standard view-model approach is not sufficient.

Authored by: Ben Nadel


React Philosophy For Beginners

I read an article published recently in April 2020 where a developer wrote about what she wished she knew about React before embarking on a React Native project. In conclusion, the writer was despondent. I read accompanying responses and it was replete with comments like React looks weird, it's a hassle and a lot more frustrations.

Authored by: Bit

React Router And SPA's Made Easy

I will walk us though the Home and Widgets Components which, when done, will create a full client-side routable, single page application. But I am going to leave it to you, for practice, to add the Wudgets Component. It is the same as the Widgets. I will, however, include all the final code.

Authored by: Gravity Well

Simple Recursive Navigation in React

Cool, now that that is out of the way let's look at what our navigation data could look like that may benefit from recursion. Take note of the shape of the objects in the links array. We'll call each object a link.

Authored by: bautistaaa

Polling in React using the useInterval Custom Hook

Why am I telling you about webhooks in a post about polling? Well, it's something to keep in mind when you're building a solution for a problem that's potentially solved by both techniques. It may very well be that you don't actually have an option and polling is the only available solution but if that's not the case, you should at least consider webhooks.

Authored by: Bit


Level Up Aurelia Store With pluck and distinctUntilChanged - I Like Kill Nerds

Aurelia Store is a powerful state management library for your Aurelia applications, but behind-the-scenes it merely wraps the powerful RxJS observable library. This means you can use a plethora of RxJS methods to change how Aurelia Store works. Problem: Aurelia Store will fire all state subscribers regardless of change Whenever your state changes, all listeners [...]

Authored by: Dwayne Charrington


More Ways to a Templates to Vue Components

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps. In this article, we'll look at how to add templates to a Vue app, including render functions, JSX, and single-file components. Render functions return elements that are rendered by Vue.

Authored by: John Au-Yeung


How to Set Up a Private NPM Registry Locally

For this article, we will be using verdaccio to setup local NPM registry. Verdaccio is the lightweight opensource private NPM proxy registry with an active open source community. We can use other npm registries, but we choose verdaccio because of the following reasons - Open Source: It is an opensource lightweight npm registry with an active development community.

Authored by: Bit

Interactive Screen with Node.js

Sending FB style reactions through the socket - Realtime! - How to beat your boredom with JS libraries : NodeJS , Socket IO and ReactJS ? COVID-19 is BAD. With total cases breaking 1 million, including death toll surged past 60,000 globally, nations are subsequently applying circuit breakers to citizens' daily routines and this slows down productivity.

Authored by: Frontend Weekly

Node.js: Understanding the File System Module

Node's File System Module fs allows us to play with files in the operating system. So, what it can help me to do? any type of CRUD operation (Create, Read, Update & Delete) on the system. Creating log files, saving timely weather data from api after a set interval of time, and much more.

Authored by: Swetank Raj ⚡#DevFestKol

Returning Promises with Promisfy in Node.js

In this tutorial, I'll introduce you to the Promisify utility available in the Util Package of Node.js. In a nutshell, Promisify is an event callback utility that helps developers write code that returns a promise (more on this later). Before we proceed, here are some of the pre-requisites you may need to follow this tutorial: Basic understanding of Node.js.

Authored by: Bit

Libraries and Tools

5 String Manipulation Libraries for JavaScript

Working with strings can be a cumbersome task as there are many different use cases. For example, a simple task like converting a string to camel case can require several lines of code to achieve the...

Authored by: Bit

7 JavaScript Animation Libraries You Can Use Right Now

You know, the first moments to hold users' feet are very important. A boring, poor website can make users jump out of it right away. The first time I used Lottie was for an Android project. Later I...

Authored by: Zone of Freedom

Functional Programming

More Javascript Functional Programming Features

JavaScript is an easy to learn programming language. It also uses lots of functional programming features that make our lives easier. In this article, we'll look at some functional programming features of JavaScript, including functors and pure functions. A functor is something that can be mapped over.

Authored by: John Au-Yeung