JSK Weekly - July 29, 2020

We are officially into the second half of 2020, the most bizarre year to date for many of us. While the world is testing humans, we're testing systems! This week, Alen Vlahovljak shows us how to make less error-prone software in "10 Testing Tips for Developers."

If you're looking for a little awesome in your life, check out Ashutosh Singh's "10 Awesome JavaScript Libraries You Should Try Out in 2020" and Nathan Sebhastian is revolutionizing micro frontends on Bits and Pieces in "Revolutionizing Micro Frontends with Webpack 5, Module Federation and Bit."


Revolutionizing Micro Frontends with Webpack 5, Module Federation and Bit

The upcoming Webpack 5 will bring lots of goodies to improve both developer experience and build time, but none of them is as ground-breaking as the new Module Federation. Up until today, the implementation of micro front-end strategy seems to only bring increased complexity and inconsistent performance where the bad outweighs the good.

Authored by: Bit

Syncfusion Blazor Components are Blazor WebAssembly 3.2.0 Compatible!

A feast for all Blazor developers in the world! It's time to play with the highly anticipated, production-ready Blazor WebAssembly 3.2.0! Blazor WebAssembly is officially production-ready after several preview releases. In this blog, we are going to discuss: The highlights of Blazor WebAssembly. S

Authored by: Syncfusion

Why Cypress?

Doing E2E tests is hard. What's the point of even using CypressYes, writing end-to-end tests is hard ... because the existing tools were built for testing static sites and could not deal well with

Authored by: Gleb Bahmutov

5 Service Worker Caching Strategies for Your Next PWA App

There are ways or strategies we can use in Service Workers to respond to "fetch" events. These strategies determine how the Service worker will resp ond with a response to a fetch event based on the type of event request. This strategy checks for the response in the cache.

Authored by: Bit

Improving google page-speed score using code-splitting

Now there are 2 techniques to do code-splitting:-1. At component level: To split your component's code into multiple bundles. Sometimes your entire page/view's code is quite big and complex to be delivered in 1 big chunk so you could cut it short into multiple bundles.Though using this technique is a bit risky in itself as we have to take care of the number of network requests we are making to fetch bundles.

Authored by: Bit


What does the `new` keyword do "under the hood" in JavaScript?

A tweet that I stumbled upon on my Twitter feed recently that made me smile, and got me excited to test my recent learnings in JavaScript. For the past couple of months I have been pushing hard to master JavaScript as much as possible.

Authored by: qasim

Understanding Variables, Scope, and Hoisting in JavaScript

Variables are one of the fundamental blocks of any programming language, the way each language defines how we declare and interact with variables can make or break a programming language. Thus any developer needs to understand how to effectively work with variables, their rules, and particularities.

Authored by: livecodestream

The addEventListener() Method - JavaScript Event Listener Example Code

The JavaScript addEventListener() method allows you to set up functions to be called when a specified event happens, such as when a user clicks a button. This tutorial shows you how you can implement addEventListener() in your code. Events are actions that happen when the user or browser manipulates a page.

Authored by: Joe Liang

3 Ways to Shallow Clone Objects in JavaScript (w/ bonuses)

In this post, you'll find 3 easy ways to perform shallow clone (aka copy) of objects in JavaScript. As a bonus, I'm going to show how you can also update, add, or remove properties in place on the clone. That's useful when you want to perform an update on the object in an immutable manner.

Authored by: Dmitri Pavlutin

Data Structures You Should Know as a JavaScript Developer

If you need to handle a list of tasks that need to be executed in order of creation, you can take advantage of the inner workings of Queues. These are very basic structures in which you can insert elements into and take them out following the FIFO approach: First In First Out.

Authored by: Bit


Javascript/Typescript Web Application Generator

ScaffoldHub is a web app generator that enables you to generate React, Angular, or Vue + NodeJS + SQL, MongoDB apps. You model the entities, relationships, fields, and validations, and ScaffoldHub generates the source code for you.

Authored by: Felipe Lima


Looking At Different Click-To-Edit Implementations In Angular 9.1.12

At InVision, one of the user experience (UX) patterns that we employ from time-to-time is the "click-to-edit" interaction. This is where the user clicks on a piece of plain-text and, by doing so, enables an "edit form" for said text in the same screen location.

Authored by: Ben Nadel


Ways to optimize React applications

Developing applications that are fast and efficient has always been the goal of every developer out there. Most of the job when working towards achieving the goals above gets done by frameworks and libraries like React, Angular, etc.

Authored by: Soshace for Developers

React: 50 shades of state

React: 50 shades of state / We all know that one of the most challenging task in software development is state management. This is especially true for the JavaScript world. There are thousands of articles on this topic and so I decided to write another one 😁.

Authored by: Krasimir Tsonev

React UI tutorial - Building Instagram video player using HTML and CSS Flex

React tutorial - Build Instagram video player using ReactJS and Flex system of CSS. The main intention of this video is to show how to build video functionality like the Instagram website's video player without any external libraries. You will also learn the best practices in HTML, CSS, flex system, and organizing a react project.

Authored by: Coding is Love

A Web Developer's Roadmap to Learning React Native

While I was working as a web developer and using Javascript, Jquery and making a lot of Ajax calls using get and post methods from frontend I came to learn about React Native (or RN)and how it helps in building iOS and Android apps with the single code base and how developers from the web who use javascript on daily basis can easily start working on React Native.

Authored by: Bit


Building Desktop Apps With Electron And Vue

In this tutorial, Timi Omoyeni explains what you need to keep in mind when building a desktop application with Vue.js using the Vue CLI Plugin Electron Builder.

Authored by: Smashing Magazine

Build a Bootstrap 4 & Vue App

Bootstrap 4 continues to be the most popular framework for creating web apps. It's a shame that the jQuery dependency makes it less powerful than it could be! Fortunately, it's fairly easy to swap jQuery for Vue to make a far simpler and more flexible development experience.

Authored by: Vue.js Developers


A Hands on Guide to Event Loops, Child Processes, and Worker Threads in Node.Js

What makes Node.js so performant and scalable? Why is Node the technology of choice for so many companies? In this article, we will answer these questions and look at some of the advanced concepts that make Node.js unique. We will discuss: 1. Event Loops ➰ 2. Concurrency Models 🚈 3.

Authored by: freeCodeCamp.org

10 Tips for Building a Node.js RESTful API

Building an API is a rewarding way to allow data to flow between apps and create compelling functionality in your latest project without having to start from scratch. Newcomers to the world of APIs will definitely need a little advice and guidance to make sure that their fledgling efforts are a success.

Authored by: Bit

Libraries and Tools

10 Awesome JavaScript Libraries You Should Try Out in 2020

JavaScript is one of the most popular languages on the web. Even though it was initially developed just for web pages, it has seen exponential growth in the past two decades. Now, JavaScript is capable of doing almost anything and works on several platforms and devices including IoT.


Publish Your First Node Library Using NPM

If you are a Node.js developer, using npm packages won't be a new concept to you. From complex npm packages like express to simple packages, npm hosts a large number of Node.js libraries that simplify the workload of Node developers. But have you ever thought about publishing a Node library of your own to help fellow developers?

Authored by: livecodestream

Best React-like JSX UI libraries in 2020

Discovering some of unique and amazing, React-inspired and JSX-driven UI libraries! 🥰 #ReactJS #PreactJS #HyperappJS #CrankJS #SolidJS #JavaScript #TypeScript #WebDevelopment #TS #JS #HTML #JSX

Authored by: areknawo

Top 5 React Table Libraries

GitHub: https://github.com/mbrn/material-table This is one of the most used React Table libraries with more than 2,300 stars on GitHub. One of the reasons for its popularity is its Material styled UI. It provides many individual components that allow it to be customized and used in any complex application.

Authored by: Bit

8 Performance Analysis Tools for Front-End Development

You can have the most beautiful and engaging website in the world, if it does not load quickly on the browser, people would tend to skip it. Although there are many performance rules out there, at the end of the day, it all comes down to load time.

Authored by: Bit


Why doesn't Webpacker use my test config when I run Rails tests?

When running Rails system or integration tests, you might be surprised to learn that Webpacker will load your development webpack config. What's the deal?

Authored by: Ross Kaffenberger

10 Testing Tips for Developers

I have seen once an unusual way of code commenting. At first, it looks silly, but it can make sense. The only guy was maintaining that whole system... He separated code comments from code. He moved all his code comments into a separated folder called docs.

Authored by: JavaScript in Plain English

Functional Programming

JavaScript: Arrow Functions and Destructuring for Object Transformation

Arrow functions and destructuring are two powerful features of JavaScript. When used in combination, they present a cool pattern that I like to call object transformation. The point is to write a simple function to change the structure of a given object, while keeping (some of) the attribute values.

Authored by: Sergei