JSK Weekly - March 16, 2023

A Practical Guide to Progressive Enhancement in 2023

Previously, we discussed the fact that JavaScript likely fails on about 3% of all visits to your website, and how this gradually draws down your users' "reservoir of goodwill." I made some big claims about progressive enhancement - in particular, that it's a form of technical credit that will make your website effectively unbreakable for no additional cost, but that will give you a lot of long-term benefits.

Authored by: Bit

jQuery 3.6.4 Released: Selector Forgiveness

If you've been following along with recent jQuery releases, we have been working on how to address the recent addition of some new selectors in browsers, especially :has.

Authored by: jQuery

Ecommerce store with Next.js, Medusa and Stripe

Learn how to build a complete commerce site using Next.js, Medusa, and Stripe, and deploy the site using Vercel.

Authored by: Medusa

Redux & State Management Basics

Let's make sharing state easy! Redux is a state management library that is used to manage the state of an application. It provides a predictable and centralized way to manage the state of an application, making it easier to debug and reason about.

Authored by: Bit

Why Next.js and Nuxt.js Are Becoming Popular

Next.js is a free and open-source framework developed based on React.js. Nuxt.js is also a free and open-source front-end framework, but it was created based on Vue.js. However, Next and Nuxt have way more capabilities than React, Vue.js, and other frameworks. Therefore, they are getting more popular among web developers all the time. Both technologies make it easier for developers to create various web apps, but each has its own set of best practices and is designed to cater to different business objectives.

Authored by: Syncfusion

How to Review Code and Not Be a Bad Guy

Code Review is a process of checking and analyzing the code of a task by the developer before its release. Code Review is performed not by the person who did the task, but by other team members or others involved.

Authored by: JavaScript In Plain English

Say Goodbye to Messy Code: Proven Strategies for Organizing Your JavaScript 🧩

I've spent countless hours as a front-end web developer writing, testing, and refining JavaScript code. Nothing is more frustrating than having to navigate a poorly structured codebase in order to find the source of an issue or make changes to an existing feature. It can feel like looking for a needle in a haystack.

Authored by: Frontend Weekly

7 Fantastic JavaScript Projects To Check Out Right Now

These tools and frameworks provide a wide variety of features or provide insight into future JavaScript development trends. Native app development strongly typed full-stack development, a drop-in...

Authored by: Pinjari Rehan

How to Write Simpler JavaScript Code

As developers, writing clean and maintainable code is the goal. But sometimes, this is hard to achieve when we have a large and bulky codebase that can become complex and difficult to manage. One way to avoid this is to simplify your code. This can help improve its readability, efficiency,

Authored by: t_koded

Say Goodbye to 7 Bad JavaScript Practices

My colleagues always think my code is stinking code, but I think they don't appreciate my art... Oh my goodness! Would you like me to be your colleague? I cleared all from a webpage with just one line of code, isn't it awesome? document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`)) oh!

Authored by: fatfish

Image Perspective Distortion with JavaScript and HTML Canvas

Perspective distortion in programming involves altering the appearance of an object and its surroundings to make it appear as if it was viewed from a different perspective than the standard focal length. This effect is achieved by manipulating the coordinates of the image pixels, resulting in an image that simulates 3D space, depth, and distance.

Authored by: Bit

JavaScript - How to fix the .innerHTML is not a function error

In this tutorial, we are going to learn about how to fix the .innerHTML is not a function error in JavaScript. In JavaScript, the innerHTML property is used to render the html or text inside the other html tags. for example el.innerHTML = "hello".

Authored by: Sai gowtham

Conditionally Add Property to an Object in JavaScript

Basically, this is a very common operation:We need to add a new property to an object based on some boolean condition. Typically, we will all do something like this: But, here is the different idea where we want to add all the properties which depends on the condition inside the object literal (during the object creation).

Authored by: JavaScript In Plain English

QANplatform publishing docs for JavaScript smart contracts

The new era of smart contracts by QANplatform has arrived. The QAN Virtual Machine (QVM) allows developers to write smart contracts in any programming language. This is a breakthrough for the whole blockchain ecosystem since most blockchain platforms are only compatible with the Ethereum smart contract language, Solidity.

Launching in 2023, QANplatform will be the first quantum-resistant Layer 1 hybrid blockchain platform where developers can write smart contracts in any programming language. Before the official private and public blockchain launch, QAN is publishing some puzzle pieces of its upcoming technology, such as the QVM, where developers can test the multi-language smart contract feature on the Ethereum Sepolia Testnet as a Layer 2 smart contract execution engine.

Following the Go (Golang) smart contract sample release, QANplatform is releasing the documentation and the first smart contract sample for the most used programming language worldwide, JavaScript (JS).

Authored by: QANplatform

Circular Reference Error in JavaScript - Meaning and How to Fix It

Have you ever encountered a "circular reference" error when working with JSON? In this tutorial, I'll explain what this error means as well as how to fix it. This error, in my experience, occurs when you try to convert an object with circular references to JSON. You may have experienced

Authored by: Dillion Megida 🚀

Mastering JavaScript: A Guide to Essential Concepts for New and Experienced Web Developers

JavaScript is a programming language that is widely used in web development. It's an essential tool for creating interactive and dynamic websites that offer an engaging user experience. As an experienced web developer, you already know the basics of JavaScript. But do you know the top JavaScript concepts that can take your web development skills to the next level?

Authored by: Deepanshu Tiwari

How to Generate Colors in JavaScript

In this article, we'll use build a random color generator in JavaScript. Along the way, we will explore general topics in programming like functions and randomization. We will build a project called Change The Background Color to illustrate these concepts. You can see the demo here [http://rufai.github.io/buildingx/random_bg_color.html]. In

Authored by: Rufai 🤗 🏃🚴

Events in JavaScript - A Beginner's Guide

Events in JavaScript are actions or occurrences that happen within the browser window, such as a button being clicked, a page finishing loading, or a key being pressed. These events can trigger JavaScript code to run, allowing developers to create interactive and dynamic web pages.

Authored by: JavaScript In Plain English

Tips for Mastering TypeScript Generics

Generics can fit in every way to make your code abstract. In the above example, you can see data property is giving an error, it is because data is implicitly getting assigned any . In the TypeScript world any is considered a very big mistake, how can we fix this 🤔.

Authored by: Vikas Kumar

How To Clean Up Your TypeScript Code With Optional Chaining - Upmostly

Optional chaining is a powerful feature introduced in TypeScript 3.7. It lets you safely access properties and methods of an object without having to worry about the object being null or undefined. This can help prevent runtime errors and make code more concise and readable.

Authored by: Upmostly

Why Typescript is Better than JavaScript for Team Projects

Boost your team's productivity with TypeScript: Exploring the benefits of using TypeScript for team projects.

Authored by: Bit

Typescript overview

As a frontend developer who mostly worked with frameworks in Javascript, I got to use Typescript to provide a type system. In the beginning, I always felt like I was using typescript without knowing deeply. After gaining solid knowledge about it and developing a couple of things using only Typescript helps me a lot in feeling comfortable using it.

Authored by: Frontend Weekly

How to Make a Responsive Header for Your React Site with Antd

In this tutorial, we will learn how to create a responsive horizontal menu using the Antd component library. Antd is a React UI library that provides a range of high-quality components out of the box. It is incredibly easy to use and provides a clean and modern look to your application.

Authored by: Bit

Building a Custom React Hook for Data Fetching: A Beginner to Intermediate Guide

As a front-end developer, I often need to make API calls to retrieve data from an API endpoint. While working with React, I found myself writing similar code repeatedly to handle fetching and updating data. This led me to create a custom hook that encapsulates this logic and can be reused across multiple components.

Authored by: Bit

5 Mistakes I Made When Starting My First React Project

You know what it's like to pick up a new language or framework. Sometimes there's great documentation to help you find your way through it. But even the best

Authored by: CSS-Tricks

Top ReactJS Features Every Developer Should Know About

Prior to Facebook's introduction of ReactJS, most developers were obliged to undertake a great deal of writing in order to take advantage of the many technologies available, such as Angular, Node...

Authored by: Frontend Weekly

How to Build a React App - A Walkthrough of the Many Different Ways

Hi everyone! In this article we're going to take a look at some of the many ways you can build a React application these days. We'll compare their main characteristics, along with their pros and cons. We'll start by explaining what React is and what improvements it brought over the

Authored by: German Cocca

How to Build a React App with RTK-QUERY

It is impossible to be a Front end developer working with React and not heard about redux in your life. Most companies are using redux in their codebase and knowing the basic concepts of it has become one of the essences of being a Frontender.

Authored by: بلانکو

How to React to User and Browser Actions with JavaScript

When a user clicks a button on a webpage, the user expects the page to respond to their action and do something: play the game, buy the product, display a message, and so on. In this tutorial, we walk through how to use JavaScript to react to user or browser

Authored by: Deborah Kurata

Building Complex Forms In Vue

Did you know that creating a complex form can be progressively enhanced using some Vue features like the v-for and the v-model? In this article, Olufunke shares some basic Vue core features that are super useful when building out the complex form in your day-to-day Vue usage.

Authored by: Smashing Magazine

Create a CLI Chatbot with the ChatGTP API and Node.js

ChatGPT has taken the world by storm and this week OpenAI released the ChatGPT API. I've spent some time playing with ChatGPT in the browser, but the best way to really get on board with these new capabilities is to try building something with it. With the API available, now is that time.

Authored by: Phil Nash

Step-by-Step Guide to Implementing OAuth2 in a Node.js Application

OAuth2 is an authorization framework that allows applications to access a user's resources stored in another application without the need to share the user's credentials. In this blog post, we will go through the process of implementing OAuth2 in a Node.js application.

Authored by: Bit

🎨Node.js with Multiple Design Patterns

We use design patterns in Node.js because they provide a set of proven solutions to common problems or challenges in software development. Here are some reasons why we use design patterns in Node.js: Reusability: Design patterns allow us to encapsulate complex logic and functionality in a reusable and modular way, which can save us time and effort when building applications.

Authored by: Bit

Your Testing Questions Answered

Q and A from the recent podcast PodRocket episode. Recently I had an honor of participating in an episode of PodRocket podcast. It was the first ever "PodRocket Mailbag" episode where 3 panelists answered testing questions emailed to the podcast. With me at the recording were Debbie O'Brien and Kent C.

Authored by: Gleb Bahmutov