JSK Weekly - August 05, 2020

It's August, normally the busiest time of year for tourism. Since most can't travel, let's get busy doing other things! How about learning about making copies of arrays? Sergey Stadnik shows us how in "How to make a copy of an array in JavaScript."

In a few other "How To's" Olusola Samuel talks about Prop Drilling in "How To Avoid Prop Drilling in React Using Component Composition", Louise Findlay goes with full stack in "How to Develop and Deploy Your First Full-Stack Web App Using A Static Site and Node.js", Hermes Builds Tokens in "How to Build a Token Server for Agora Applications using NodeJS" and finally, Rumesh Eranga Hapuarachchi takes us step-by-step through "How to Develop Microfrontends Using React: Step by Step Guide" on Bits and Pieces.


General

Create simple POS with React.js, Node.js, and MongoDB #10: CRUD Supplier

Defenition: POS - "Point of Sale". At the point of sale, the merchant calculates the amount owed by the customer, indicates that amount, may prepare an invoice for the customer (which may be a cash register printout), and indicates the options for the customer to make payment.

Authored by: Soshace for Developers

Introducing TinaCMS: a Next.js CMS Integration Tutorial

In a rush? Skip to technical tutorial or live demo. "Jamstack is great for developers, but it's too tech-savvy to get my clients on board." I can't count the number of times we've heard this comment from devs. In all fairness, it was true of the Jamstack in 2015.

Authored by: Snipcart

A Look at What's New in Chrome DevTools in 2020

I'm excited to share some of the newer features in Chrome DevTools with you. There's a brief introduction below, and then we'll cover many of the new DevTools features. We'll also look at what's happening in some other browsers. I keep up with this stuff, as I create Dev Tips, the largest collection of DevTools tips you'll find online!

Authored by: CSS-Tricks

5 Ways Service Workers Reshape Modern Web Apps

Service workers offer many exciting capabilities to modern web apps. These go well beyond the traditional limits of a simple JavaScript running in the browser. These workers run in the background and carry out tasks that do not need any user interaction.

Authored by: Bit

Avoid These 5 Common API Integration Mistakes

Building an app may seem as simple as learning to code; however, building an app also involves API integration. And what better way to ensure good integration without struggling with it on your own (especially if you're a novice app developer) than hiring a good third-party API.

Authored by: Bit

How I Build Scalable Modern Web Applications for Real Users

This post details the languages, libraries, and tools that I'm using to build Skilled.dev , a platform to prepare developers to succeed in coding interviews. UX + Performance + Scalable + Customizable My decisions focus on automating parts of the process that would prevent me from doing what I want to do - building a product that provides a ton of value to my users.

Authored by: Trey Huffine


JavaScript

Javascript tutorial - animated Julia fractal

You can code this colorful, real-time animated fractal in only 32 lines of Javascript code! We'll use the Julia fractal. If you're not interested in the mathematical details, feel free to skip the gray section below.

Authored by: JavaScript Kicks

How to make a copy of an array in JavaScript

Making copies of arrays in JavaScript is not as straightforward as it seems. It certainly not as easy as b = a. Let's look at an example: let a = [1, 2, 3] const b = a console.log( a === a) --- a is array of [ 1, 2, 3 ] b is array of [ 1, 2, 3 ] Is a equal b?

Authored by: Mad Devs

Importance of using JavaScript Telemetry for Single Page Apps

We typically configure Telemetry and Monitoring for the backend code and infrastructure. It is crucial to capture these data to understand how our environment functions and to trace when something...

Authored by: Bit

Polymorphism in JavaScript | Zell Liew

For the longest time, I thought that "Polymorphing" was about converting something into sheep (thanks to Warcraft). The sheep image stuck with me and made it hard to understand exactly what Polymorphism is. Today I want to explore what Polymorphism actually is.

Authored by: Zell Liew

What do async and await really mean?

async...await syntax only appeared in JavaScript recently - it was introduced in ECMAScript 2017. However, it still remains a bit of mystery. Most articles I read state that async…await is syntactic sugar over JavaScript promises. But what does that mean exactly? Are async and await two parts of the same syntax, or they are two separate things?

Authored by: Sergey Stadnik


TypeScript

Is TypeScript the future of web development?

I've already talked about how much I love TypeScript in some of my previous posts. It allows me to be more productive, but most importantly - it improves my development experience. Basing on the recent trends, TypeScript NPM download stats, and the general "buzz" around it, I'd say a great many people agree with my opinion.

Authored by: areknawo

Learn Typescript in 15 minutes

After reading this article you will know more than enough typescript to start writing production applications, assuming you already know javascript. This article is framework agnostic and covers the core of the language. This can be used as a Typescript quick starter or a quick refresher.

Authored by: Bikram Sutar


Angular

Understanding Angular Http Interceptors

Let's start adding some code to our files, add to the Http service a get method that is going to fire an Http request to the server. Now let's implements the intercept method in auth.interceptor file.

Authored by: Frontend Weekly


React

How To Avoid Prop Drilling in React Using Component Composition

Prop Drilling is the process by which you pass data from one part of the React Component tree to another by going through other parts that do not need the data but only help in passing it around. Imagine someone living in Lagos, Nigeria placing an order on Amazon for a package.

Authored by: JavaScript in Plain English

How to Develop Microfrontends Using React: Step by Step Guide

With the advancements of microservices, large applications have benefited in several ways. It helps to efficiently develop, deploy, and scale individual pieces of the application backend. Still, many realized that similar challenges exist for the frontend as well. That is where we typically start decomposing the frontend monolith into microfrontends.

Authored by: Bit

How and Why You Should Use React Query

One of the challenges we face when building an application with React is determining a code pattern for fetching data from the server. The most common way to handle data fetching in React is to use the global state as a mechanism to determine the current status of the fetch operation.

Authored by: Bit

React Lesson 15: Checking Homework progress from Lesson 14

Hey everyone, this is the 15th and the last lesson of this React course and I hope you had fun learning along with me. Today, we are going to cover homework from Lesson 14 and add comment API to load comments.

Authored by: Soshace for Developers

6 Top GraphQL Clients for 2020

We'll be looking at some of the top GraphQL clients for 2020. Before getting started, it is essential that you have a basic understanding of GraphQL and its server-side and client-side applications...

Authored by: Bit

Build a Full Stack App using GraphQL as Backend API (Part 3)

This is the final part of the series of building a Full Stack application using GraphQL API. Check out part one HERE and part two HERE if in case you have missed it. In the last part, we have created...

Authored by: gitconnected

Using ES Modules with Dynamic Imports to Implement Micro Frontends

Technologies always follow two main principles: An iterative evolution to leverage what was invented beforehand to come up with something better, and a reinvention of old concepts using the iterative advancements. An example of this is cloud computing. The old concept is time-sharing of larger, shared resources among dedicated subscriptions.

Authored by: Bit


Node.js

How to Develop and Deploy Your First Full-Stack Web App Using A Static Site and Node.js

This tutorial will show you how to convert a static website that uses HTML, CSS and JavaScript (JS) to a dynamic one using MongoDB, Express, Static HTML, CSS, JS, and Node.js. Our tech stack will be similar to the popular MEAN/MERN stack (MongoDB, Express, Angular or React, and NodeJS).

Authored by: Louise Findlay

How to Build a Token Server for Agora Applications using NodeJS

Security within video chat applications is a hot topic at the moment. As remote working and virtual events become more prolific, the need for security will increase. Within the Agora Platform, one layer of security comes in the form of token authentication.

Authored by: Hermes Frangoudis


Libraries and Tools

Under the hood webpack: core library behind the event-driven architecture

Webpack architecture is heavily based on events. Each webpack plugin is basically a set of listeners hooked on different events during compilation phases. Under the hood, webpack uses a library called tapable to encapsulate "publish-subscribe" implementation. Tapable provides different "hooks" classes ( SyncBailHook, AsyncParallelHook, etc.) to "hook" on events with some extra rich functionality (e.g.

Authored by: Bohdan Liashenko


Functional Programming

How 'Fragments' can help with your Web Development

No one asks why we need possibility to write functions, it's obvious and very helpful thing in programming. Functions help to make reusable code, it gives better modularity for your application. Why not to use the same thing in templates of components, nowadays many frameworks provide possibility to include a child component inside of a component.

Authored by: JavaScript in Plain English

Promise.allSettled

The Promise object has many useful functions like all, resolve, reject, and race - stuff we use all the time. One function that many don't know about is Promise.allSettled, a function that fires when all promises in an array are settled, regardless of whether any of the promises are resolved or rejected.

Authored by: David Walsh





0 comments