JSK Weekly - July 14, 2021

Did you know that we can incorporate augmented reality concepts into web applications to create video games? Well we can! Janaka talks us through "Augmented Reality for Web: Latest from BabylonJS" on Bits and Pieces.

In other news, Raymond Camden reveals more Jamstack hosting options in "Jamstack Hosting Solutions: Challengers to the Throne" on Snipcart.


Augmented Reality for Web: Latest from BabylonJS

Did you know that we can incorporate augmented reality concepts into web applications to create video games? We can do this using BabylonJS. Besides, it is an open-source real-time 3D engine using a...

Authored by: Bit

How to Improve Your Website's Page Load Speed

If you have ever experienced a slow-loading website, you understand how page speed can impact user experience. No one wants to wait 10 seconds - or even more - to access the information they are looking for. Pages that load fast have better user retention and lower bounce rates, and win users' trust faster.

Authored by: Prerender.io

Jamstack Hosting Platforms: The Underdogs - Snipcart

New to the Jamstack? Read this first. When it comes to Jamstack hosting, two names typically come to mind - Netlify and Vercel. Both companies have made a name for themselves in the Jamstack community for providing amazing features and services tailored to developers working in the space.

Authored by: Snipcart

BFF Pattern - Dos and Don'ts

Your application may have two or more microservices (e.g., Customer, User, Order, etc.) and a few frontends serving different purposes. When I say a few frontends, it does not only mean a public-facing interface. For example, an application with varying requirements for frontend could be as follows: Desktop Application Mobile Application Third-party Services/APIs How do we structure our BFF to serve all these?

Authored by: Bit

Are You Going to be Replaced by Code-Generating AI?

Github has been shaping the way software developers work for a while already, focused mainly on the way they do version control of their code, and how they share their work with others.

Authored by: Bit

Middleware for the Async Flow in Redux

Proper state management is vital for any React application. And still, Redux is dominating this space. And that's where the Redux middleware comes into play. In this article, I will explore these...

Authored by: Bit

Fix Seeing "0" in Your JSX Code

The early days of the web felt like the wild west when it came to coding practices -- just make it work. Then we became enlightened to better practices, separating HTML from CSS and JavaScript. Then came React and JSX, where we combine JavaScript, HTML, and even CSS with Styled Components -- what an elegant mess we've made!

Authored by: David Walsh

2021 is Still a Great Year to Start Programming

More than a half of this year has already passed, and you are still not sure if it is a good idea to start programming in 2021? I'll give you some great and exciting economic insights into why 2021 is a great year to start programming.

Authored by: Coding Flashlight

How to Secure JWT in a Single-Page Application

Before moving to JWT in cookie, let's see about what is a cookie and its major attributes. A cookie is another storage option available in a browser which has an expire time. A cookie also has some useful attributes to secure it from cross-site scripting (XSS) attacks.

Authored by: Nilanth ⚡


JavaScript Operators - The Ternary Operator

The ternary operator, as the name implies, requires three operands. The ternary operator statement includes a condition, which is evaluated. The conditional statement is followed by a question mark. Upon evaluation, the operator will execute the code before the colon if the result of the condition is true and the code after the colon if the result of the condition is false.

Authored by: Robert Laws

What is a JavaScript Object? Key Value Pairs and Dot Notation Explained

Objects are one of the most valuable things you can learn in Javascript. You can use them to take your programs to the next level. An object is a collection of data - or key value pairs - which consist of variables and functions that you can access using dot notation.

Authored by: freeCodeCamp.org

JavaScript Interview Prep Cheatsheet - Ace Your Coding Interviews with These Concepts

I've carefully gone through over 50 resources, I've been through 10 JavaScript interviews, and I've landed a job at a unicorn startup. And throughout this entire process, I started to see a pattern in the most frequently asked JS interview questions.

Authored by: Rajat Gupta

The Importance of Integrity Checks in JavaScript

SRI is a security feature that allows browsers to check the resources they fetch. It will make sure that the code is never loaded if the source has been manipulated. It enables developers to identify whether the third-party resource they are loading has been tampered with by verifying its integrity code.

Authored by: Bit

How to Format Dates in JavaScript with One Line of Code

For a long time, I've used libraries like Date-fns whenever I need to format dates in JavaScript. But it gets really weird whenever I do this in small projects that require simple date formats which JavaScript offers by default. I discovered that most developers do this a lot. And I

Authored by: freeCodeCamp.org

JavaScript - How to Control the Program Flow

An important concept in JavaScript is the block statement, which is used extensively throughout programs. Block statements are used to group statements, expressions, and declarations within logical containers. They are particularly useful in conditional statements, loops, and exception handling statements. A block is created by enclosing the code within an opening and closing curly braces.

Authored by: Robert Laws


The Command Pattern in TypeScript — Encapsulating Logic to Increase Maintainability

Design patterns are there to keep us from reinventing the wheel, algorithmically speaking, that is. They provide us with a template of how to best structure our code and how each component should communicate with each other. And the command pattern is no exception, giving us a way to encapsulate part of our logic while decoupling from the rest of the project. This is by far, one of my favorite design patterns and this is why I wanted to cover it here.

Authored by: Bit


Angular Notification Service with Subject and Observable

Notification service is one of the most common services in every application.It allows the users to receive live information that is relevant to them. I will demonstrate an implementation for notification service that uses RXJS subject and observable. But first, why do we need subject? And why observable?

Authored by: JavaScript In Plain English


4 Methods to Add Conditional Attributes to React Components

Today, conditional attributes are widely used with React to provide dynamic behaviors. But, most developers are not aware of all the methods that can be used to implement them. So, in this article, I will discuss different methods and best practices of using conditional attributes or props with React.

Authored by: Bit

5 JavaScript Tips to Improve Your React Code

Let's look at five JavaScript tips you can use today to instantly improve your React applications. Because React is a JavaScript library, any improvements that we make in our JavaScript skills will directly improve the applications that we build with React. For this reason, I've put together a number of

Authored by: freeCodeCamp.org

How to: React Table with Search

In this tutorial, I want to show you how to use React Table Library with a feature. In the previous example, you have already installed React Table Library to create a table component. Now, we will enable users to search data in the table.

Authored by: Robin Wieruch

15 Custom Hooks to Make your React Component Lightweight

Here are the 15 custom hooks to make your React component lightweight React hooks is the trending word in the React community. I hope every React developer knows what hooks are. In simple words, hooks give the advantage to use lifecycle methods in functional components and also encourages us to write functional components.

Authored by: Nilanth ⚡

Freelance React Developer Checklist

As a freelance React developer, I work with a lot of clients on their React projects these days. Every time I get a request in my inbox, I usually reply with the same email template which I call the freelance checklist for React developers.

Authored by: Robin Wieruch

Understanding Memoization & the useMemo React Hook

Within React's lifecycle of a component, the component is re-rendered when an update is made. This occurs if differences (aka difs) between React's virtual DOM and the in-browser DOM are detected, in which case the components that contain difs (and any child components of those components) are re-rendered in-browser.

Authored by: Denali Balser

What's New in React 18? Concurrency, Batching, the Transition API and More

Hey everyone! In this article, I'm going to show you what's new in the latest of version of React - React 18 - in under 8 minutes.

Authored by: Akash is 𝕓𝕦𝕚𝕝𝕕𝕚𝕟𝕘

Advanced Dependency Injection in React

Dependency injection is a pattern that reduces hardcoded dependencies. It promotes composability by enabling one dependency to be replaced by another of the same type. This article will evaluate the...

Authored by: Bit


Tools And Practices To Speed Up The Vue.js Development Process

Even though Vue.js claims to have an approachable minimalist framework that can be incrementally adaptable, it can be a little bit overwhelming when starting as a Vue.js newbie. In this article, we're looking at ways to make writing Vue.js a breeze.

Authored by: Smashing Magazine


Skeleton for Node.js Apps Written in TypeScript

Boilerplate codes are repetitive codes required to be included in the application with little to no change by the program/framework and contribute nothing to the logic of the application. Also, we...

Authored by: Santosh Shinde

Building a Command Line Tool with Nodejs and Fauna

Command line tools are one of the most popular applications we have today. We use command line tools every day, and they range from git, npm or yarn. Command line tools are very fast and useful for automating applications and workflows. We will be building a command line tool with Node.js and Fauna for our database in this post.

Authored by: CSS-Tricks

Libraries and Tools

Enable Tree Shaking to Optimize Your React Component Libraries with Webpack

An important part of building component libraries with React is making sure they are lightweight and optimized. For example, I use Lodash a lot in my applications. I only use a handful of the...

Authored by: JavaScript In Plain English

5 React Libraries Every Project Should Use in 2021

There are literally 100s of great React libraries to choose from, but which libraries do you need most for your React projects? In this article, we're going to break down five libraries you need for your React projects. Each of them will cover virtually every major tool you need, plus

Authored by: freeCodeCamp.org


Running Automated Tests for a Server-Based Application

As a web developer, you want to ensure that the application you are delivering is stable and that it will not behave unexpectedly when used by any user or consumed by other applications. To perform this check manually would be time-consuming, especially if we have an extensive application that is continuously changing and updating.

Authored by: Georgian Stan

Testing A Web App Using The Keyboard Only

How to test a TodoMVC using Cypress using only the keyboard to confirm the app is accessible. Let's take a good TodoMVC example made with accessability features included, as every app should have. One of the aspects we need to confirm in our tests is that the user can fully interact with the app without using a mouse.

Authored by: Gleb Bahmutov