JSK Weekly - May 04, 2022

JSNation Conference 2022

Evan You, Kyle Simpson, Addy Osmani, Sarah Drasner – these are just a few of the many speakers coming to this year’s JSNation, a 2-day conference focusing exclusively on JavaScript development. Discover the future of JS and get connected to its stellar crowd!

The format of the event will be hybrid. The first day, June 16, will be streamed from the Amsterdam venue. The second day, June 20, 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: JSNation Conference 🗓 June 16 & 20

Ecommerce Integration for Ghost in 10 Minutes

Turning your Ghost blog into an eCommerce might be challenging. Read this to learn how to add a shopping cart to your blog in less than 10 minutes.

Authored by: Snipcart

How to Create and Publish a Package to NPM Registry

In this tutorial, we will see how to create, test, and publish our own npm package. But why does anyone want to publish the npm package? As developers, we use many npm packages that other developers have published. These npm packages improve our development cycle and save a lot of time.

Authored by: Sahil

Just Redux: The Complete Guide

Hey! 👋 If yоu're а React develорer оr аsрiring tо beсоme оne, I аm sure yоu might hаve соme асrоss Redux by nоw. Mаybe yоu рrоbаbly knоw whаt Redux is, mаybe yоu dоn't. Mаybe yоu hаve been using it fоr quite а while but yоu dоn't fully understаnd it.

Authored by: JavaScript In Plain English

What is Memoization? How and When to Memoize in JavaScript and React

Hi everyone! In this article we will talk about memoization, an optimization technique that can help make heavy computation processes more efficient. We will start by talking about what memoization is and when it's best to implement it. Later on we will give practical examples for JavaScript and React. Table

Authored by: German Cocca

Let's not forget that JQuery is Ta'veren

There's a term from Robert Jordan's famous book series, The Wheel of Time that references how certain people have the ability to influence the the world. It's dubbed Ta'veren. This is a story of not forgetting one such Ta'veren moment in the evolution of the Web.

Authored by: John Papa

How to Make a Contact Form with Nodemailer

If you have a portfolio without a contact form, I'll suggest you work on it or ask your developer to work on it. I didn't realize how easy it is to make a functional contact form until I recently created one here.

Authored by: JavaScript In Plain English

What is Fetch API in JavaScript and How Does It Work?

JavaScript's Fetch API is a powerful and easy-to-use alternative to the old AJAX and jQuery. By using Fetch API, you have an easy-to-use API and get rid of the bloated and undesirable jQuery code, making the applications lighter in comparison. In this article, we'll be discussing how to implement and use the Fetch API.

Authored by: Parag Mahale

An Introduction to Service Workers in JavaScript

A brief overview of Service Workers in JavaScript.

Authored by: JavaScript In Plain English

7 JavaScript One-Liners to Save Your Day

Math.random() returns a random number between 0 and 1. So if it happens to give you a number less than 0.5 then you get a negative number and if it's over that then you get a positive. The reason 0.5...

Authored by: Bit

What are Template Literals in JavaScript

In the ES6 version of JavaScript, template literals were introduced. Before ES6 if we had a variable that we wanted to use within our strings we would have to do something like the following example.

Authored by: codecupdev

Create Objects Using Object Constructors in JavaScript

A while ago I wrote an article introducing object literals. JavaScript provides another way to create objects and this is called object constructor notation. We can start by simply creating an object. In the above image, we create a blank object which is assigned to the variable house.

Authored by: codecupdev

How the TypeScript NonNullable Type Works

The NonNullable type is a utility type in TypeScript that creates a new type, whilst removing all null or undefined elements. It lets us take existing types, and modify them so they are more suitable in certain situations. Let's look at how it works. This article covers custom types.

Authored by: Johnny

How the TypeScript Parameters Type Works

The TypeScript Parameters Type is used to take the parameters or arguments of a function and create a new type based on them. It is quite useful when we know that the input of a Function conforms to a certain type, and we want to replicate that.

Authored by: Johnny

Pass the Value from One Screen Component to Another in React Native Expo Apps

Hello, Native developers! My name is Rohit Kumar Thakur. I generally write about React Native, Django, Data Science, Machine Learning, and Python. Let's suppose you have two screens, Screen A and Screen B. In this article, I am going to show you how to pass the value information from one screen component to another using react-navigation.

Authored by: Rohit Thakur

Angular Change Detection is No Longer a Black Box

Hello there, Angular! I'll be responsible for updating the business model, while you'll be responsible for changing the view. Sounds great? No? Why not treat the CD (Change Detection) as if it were a black box and rely on Angular to do that for us? 1.

Authored by: JavaScript In Plain English

Masonry Layouts with Angular

Masonry layouts, commonly called the "Pinterest layout" due to Pinterest's effective implementation of it, are a visually-appealing way to display a collection of items of different heights/widths. It's most commonly used to display images of varying dimensions in a way that is visually interesting and doesn't waste space.

Authored by: JavaScript In Plain English

Use Enums for Better Angular Apps

Enums are a way of defining variables that may have a value of one out of only a few constants. They are perfect for state-driven design, strong-typing function parameters, and showing intent in your code. They should definitely have a place in your Angular app.

Authored by: JavaScript In Plain English

How we Use Design Tokens in React

Based on this incredible article by my teammates Sunil Sandhu and Nitsan Cohen. Check it out to play with our real code examples and more. At Bit we build everything in a composable way, in components. For Frontend, this means we use Bit to turn our own components in React into Lego pieces we can develop, version, and compose into apps and products.

Authored by: Bit

How to Test Your React Hooks Like a Pro

I've been working daily with React for more than 4 years now. I've been going through the class components and had to get used to the new hook system. Even though their arrival was more of a blessing than a curse, testing them was a new learning curve.

Authored by: Rémy Villulles

How To Start Using Context in My React Application? - Upmostly

Context is an alternative way to share data across the components in React applications. In a simple React application, the data is passed from top to bottom via props. As the application grows in scope and features it becomes increasingly difficult and annoying to be constantly passing down the props.

Authored by: Upmostly

React Build Counter using useReducer Hook Tutorial

React js counter using the useReducer hook example. In this post, we will learn how to create a simple counter component using the advanced React useReducer hook. We won't be using any third-party plugin to build the counter feature in React. Instead, we will build this tiny functionality using a simple React hook.

Authored by: Digamber Singh

Top 5 Features of Vue.js Devtools to Enhance Your Development Strategies

Vue.js Devtools made a huge impact on the Vue.js ecosystem. One of the most significant and unique features is the ability to time travel, which is a shift between states that allows you to debug Vue apps quickly.

Authored by: Syncfusion

Why I Left Vue.js for React

As a front-end developer having commercial experience with Vue.js, I've got something to say about the disadvantages of this framework. I've spent a lot of time with Vue.js commercially but now, after Vue 3 was released, I just think it's almost impossible to get good experiences with this framework.

Authored by: JavaScript In Plain English

Easing Your Way Into Back-end Development with Node.js

Getting into back-end development is not easy if you’re coming from a different area within the software industry. Arguably, it’s potentially easier to get started directly on the back-end than having done something else first, and then moving here. Why? Because you’ll have the bias from your previous experience contradicting or even clashing against some of the processes that happen in the back-end.

Authored by: Bit

How the Lack of Internal State Makes Your Classes Easier to Test and Refactor

You likely often hear that test-driven development (TDD) or just writing tests can make your code better. It's hard to say whether this is true unless you have seen the impact of writing unit tests on code before. Let's take a look at this effect with a simple example: moving an internal state of a class to a dependency.

Authored by: Marcin Wosinek

Send Data To The Cypress Test

The application can provide more information to the test runner for more meaningful end-to-end tests. Imagine an application where the user fills a form. The application takes the form, cleans up the entered data, and sends the form to the backend API.

Authored by: Gleb Bahmutov

How to Use Functions in Objects in ES6 JavaScript

We can add functions to our objects and when we do this we call them methods. Let's briefly recap what a method is. JavaScript has what is called a set of standard built-in objects. These extend the capabilities of the language to help us to work with it.

Authored by: codecupdev