JSK Weekly - May 11, 2022

Arrays, Explained in 3 Minutes

Arrays are one of the most commonly used data structures, and probably one of the first data structures most software engineers learn about. *An array is a type of data structure that stores a collection of elements. Each element in the array has a specific index that can be used to access it.

Authored by: Senn R.

Data Structures and Algorithms: Memoization

In my long and winding journey to break into the tech world, I have encountered many different variations of interviews involving data structures and algorithms. Many companies are still using coding assessments with DSA questions as their first step to weeding out applicants so I've spent time studying varying types of questions and methods of solving them.

Authored by: John Troutman

7 Best Programming Languages to Learn in 2022

A list of the best programming languages to learn as a developer in 2022. Programming, in general, even primitive ones has been around since 1883. It is such an important skill in today's world that you just need to learn.

Authored by: melatonin

How to Add a Copy Button to Code Snippets on Gatsby

I constantly write about code and share code snippets in my blog posts and copy-pasting code is an essential skill for software engineers, and since selecting a text and then pressing CTRL + C then CTRL + V is a lot of work, so I decided to add a copy button to all my code snippets to facilitate the life of all my fellow software engineers.

Authored by: JavaScript In Plain English

Handling "this" with call(), apply() and bind()

So in the previous blog post, we looked at how the this keyword works in JavaScript. Every function gets the this keyword automatically and the way it works is that anytime a function is invoked, the keyword points to the current execution context. So its value will depend upon the way the function is invoked.

Authored by: JavaScript In Plain English

5 Best Lerna Alternatives

As of April 2022 LernaJS is no longer maintained. Created by Henry Zhu, Lerna's goal was to automate the workflow of creating and publishing multiple packages for the same javascript repository. That is to say, not to build a "monolith" in the traditional since of the words where multiple applications or services are developed, built, and deployed in the same repository.

Authored by: Jonathan Saring

Why is "5"- 5 = 0 but "5" + 5 = "55" in JavaScript?

The binary + operator is generally used to add two numbers, when both of the operands are just numbers it will give the sum(quite obvious) But when one of the operands is a string then the + acts as a string concatenation operator.

Authored by: Bit

How to Build a Progress Bar in JavaScript Using a Linear Gauge

The Syncfusion JavaScript Linear Gauge control is primarily used to show gauge-ish values like temperatures, quantities, speed—numbers on a linear scale across a range. In this sample, we wanted to see if we could make a package delivery timeline or progress bar. The finished sample is in GitHub.

Authored by: Syncfusion

How to Destructure an Array in JavaScript

Array destructuring is an efficient way to extract multiple values from data that's stored in an array. In this tutorial we'll learn about array destructuring. We'll go over examples to learn the ins and outs of how array destructuring works. I've also created a video of this tutorial: Let's

Authored by: Madison Kanna

The triple dot syntax (...) in JavaScript: rest vs. spread

In JavaScript, the same syntax - triple dots (...) - is used for two different mechanisms: Rest syntax is for receiving data. Spreading is for sending data. This blog post examines how these mechanisms work and why they are not operators.

Authored by: Axel Rauschmayer

JavaScript Prototypes and Inheritance - and Why They Say Everything in JS is an Object

Hi everyone! In this short article we're going to talk about prototypal inheritance in JavaScript, and what are the implications of it. Table of Contents * Intro * How to access a prototype's properties and methods in JavaScript * The prototype chain * A prototype-based language

Authored by: German Cocca

Caveat When Using Umbrella JS With Template Elements In JavaScript

The other day, when generating PDF document signatures with html2canvas, I was using a element to stamp-out DOM-element clones within my JavaScript application. Those clones were each subsequently wrapped in an Umbrella JS instance for easy DOM-manipulation. However, I ran into some quirkiness if I tried to .appendTo() the clone to the document body before I was done manipulating it.

Authored by: Ben Nadel

Typescript Shorts: Module Augmentation

Hello everyone, In this blog post, we are going to learn about a concept in TypeScript which is called module augmentation. Don't freak out seeing the name of the concept. It is just a fancy name for a simple explanation which we are about to see later in the post.

Authored by: karthikeyan

What are Directives in Angular?

Directives are one of the most important concepts in Angular, In this section, we will see what is a directive and its types and how to create our own directives Directives are classes that add new behavior or modify the existing behavior to the elements in the template.

Authored by: Bit

First Look at Standalone Components: Angular Beyond NgModules

The great Angular team has released two RFCs about it already, and with the latest next release of Angular 14, specifically CLI 14.0.0-next.12 and Core 14.0.0-next.15, we get a real look at what is coming next. When you generate a new project using: npx @angular/cli@next new ng14 it still feels the same, same interactive questions, the same project structure is created with AppModule.

Authored by: JavaScript In Plain English

What are Directives in Angular?

Directives are one of the most important concepts in Angular, In this section, we will see what is a directive and its types and how to create our own directives Directives are classes that add new behavior or modify the existing behavior to the elements in the template.

Authored by: Bit

React Frequently Asked Questions

Updating the DOM and repainting the UI is expensive, so React uses a virtual representation of the real DOM, kept in memory and synced with the real DOM, to optimize the changes needed and improve the performance of the application. Whenever the UI is updated with new elements, a new virtual DOM is created to represent the new tree.

Authored by: Bit

React Summit 2022

Ken Wheeler, Tejas Kumar, Sara Vieira, Tanner Linsley – these are just a few of the names coming to this year’s React Summit, the biggest React conference worldwide. Discover the future of the React and meet thousands of front-end and full-stack engineers!

The format of the event will be hybrid. The first day, June 17, will be streamed from the Amsterdam venue. The second day, June 21, and numerous free workshops will be streamed to the global audience online.

Would you like to participate? Get 10% off on remote & in-person tickets with our discount code JSKICKS.

Authored by: React Summit 🗓 June 17 & 21

React "as" Prop

You may have noticed the "as" prop when working with modern UI component libraries. Essentially the "as" prop allows you to replace rendered HTML elements in a React component from the outside by passing them in as props: Usually it is called "as" prop, however, one can see it also as "component", "element", "variant" prop -- or a combination of two of them.

Authored by: Robin Wieruch

Design Tokens in a React Component Design System - The Right Way

Design tokens help to solve two of the biggest problems in Design Systems and application development today. The first is designer and developer collaboration. This is a HUGE problem as the two speak completely different languages; one speaks Figma, and the other speaks code.

Authored by: Jonathan Saring

How React Renders a Component on Screen

One of the most important features of React is components. Components are said to be the building blocks of a React app, they let you break up the user interface into separate pieces that can then be reused and handled independently. A React component can be either "stateful" or "stateless."

Authored by: Bit

The most famous companies that currently use Vue.js in 2022

We at SECL Group have a long history of working with front-end libraries of all sorts. With every project bringing us unique challenges, we've always taken our time to pick the right tool for the job, taking into account the tasks at hand and the client's expectations about future growth.

Authored by: Frontend Weekly

Release Angular libraries with lerna & commitizen

In this tutorial, we'll learn how to streamline Angular library releases with commit conventions and commitizen. Let's suppose, we want to release Angular libraries to npm to be able import them inside our Angular applications. We also want to to release the library separately from the application.

Authored by: Ahmed Bouchefra

A Quick React Component Test

Confirm the onClick handler is executed when clicking on the button component. I laid My Vision for Component Tests in Cypress in Cypress a long time ago. The first public presentation about End-to-End + Component test combination was made in the presentation The Shape Of Testing Pyramid at AssertJS in February of 2018, ughh 4 years ago.

Authored by: Gleb Bahmutov