JSK Weekly - 7th March, 2024

The year 2024 got Robin Wieruch excited about React's ecosystem again. Despite the various challenges and dramas (the biggest one of them moving React to the server with React Server Components) we had last year, there are emerging React trends that everyone should have on their watchlist. Check out "React Trends in 2024" for his list of exciting React trends for 2024.

Other popular stories include "Top 8 JavaScript Libraries for Data Visualization in 2023" on Syncfusion, "Mocking/stubbing the Date and timers (setTimeout) in Node.js tests with built-in node:test MockTimers" and "Building a Reusable Infinite Scroll Component With React" on Bits and Pieces


General

JSR: Second Look - David Bushell - Freelance Web Design (UK)

The one where I try out a fancy new JavaScript repository (again)

Authored by: David Bushell

Direnv setup for multiple git/GitHub, npm and AWS accounts/credentials · Code with Hugo

In this post, we’ll look at how to configure direnv to manage multiple git, GitHub, npm and AWS accounts and credentials on a single machine.

Authored by: Hugo Di Francesco

jQuery 4.0.0 BETA!

jQuery: The Write Less, Do More, JavaScript Library

Authored by: jQuery

Anomaly detection in time series data with ChatGPT

The problem is simple to state, but in reality, and especially at scale, it's pretty difficult to do. For the example I'm using throughout this article, we are gonna look at a specific series of...

Authored by: JavaScript Kicks


JavaScript

How to use the Fullscreen API in JavaScript

How do you run a game created for the web in fullscreen? In this quick tutorial, you'll see how to display a game or any other HTML element in fullscreen, how to exit fullscreen, and how to make a nice fullscreen toggle button in SVG. Recently I published a long

Authored by: Hunor Márton Borbély

How to Access Properties from an Array of Objects in JavaScript

When you're working with JavaScript applications, it's common to work with arrays, nested arrays, and an array of objects. But a lot of beginners sometimes struggle with knowing how to access properties from these different data structures. In this article, we will discuss how to access properties from a variety

Authored by: Jessica Wilkins

JavaScript Iterables vs Iterators

Discover JavaScript iterables & iterators for efficient data handling, enhancing code readability & performance. Master these concepts for cleaner, scalable JavaScript development.

Authored by: Bit

JavaScript SOLID Principles: How to Write Maintainable Code

SOLID principles are a set of software designs introduced by Robert C. “Uncle Bob” Martin. These principles guide developers in building robust, maintainable applications while minimizing the cost of changes.

Authored by: Syncfusion

JavaScript Map Method - Syntax and Code Examples

JavaScript's map method, introduced in ECMAScript 5, is a fundamental tool for array manipulation and transformation. This method is versatile and simple, and has become a staple in modern JavaScript programming. In this article, we'll explore the map method's syntax and its wide array of applications, ranging from basic

Authored by: JavaScript Kicks

How to Use the Greater Than and Less Than Operators in JavaScript

In your JavaScript programs, you'll often need to compare two values to see if one is greater than or less than the other. This is where the greater than and less than operators come in handy. In this article, we'll look at how to use these operators in greater detail

Authored by: Jessica Wilkins

Take Your JavaScript Skills to the Next Level with Closure Scope

JavaScript closures allow enclosing scopes to persist variables even after execution contexts expire. This lexical scope retention unlocks powerful techniques for creating reusable and encapsulated...

Authored by: JavaScript Kicks

JavaScript Proxies and How Useful They Can Be

JavaScript contains many features and paradigms that most developers never use. I'm going to argue that Proxy is one of them. Let's see how we can create a Proxy object and what we can do with it A...

Authored by: In Plain English


TypeScript

My experience learning Rust as a TypeScript developer

Like many developers, I began my career in programming by focusing on web technologies. I believe this is a great place to start and JavaScript, the language of the internet and a lot besides, is an...

Authored by: Bret Cameron

Generating Licence Keys with TypeScript - I Like Kill Nerds

I'm always looking for fun little coding challenges that are not full projects, and I thought I would do a fun little licence key generator using Typescript. Step 1: Setting Up the Project First, create a new directory for your project and navigate into it using your terminal.

Authored by: Dwayne Charrington


Angular

Understanding Dependency Injection and Services in Angular

Building complex, modular Angular applications requires a solid understanding of dependency injection (DI) and services. These cornerstone features work hand-in-hand to deliver flexibility, maintainability, and testability to your Angular project.

Authored by: Bit

Getting Started with an Angular App in 2024

Build a composable Angular application in 2024 with Bit to break free from the giant frontend monolith to ensure your apps scale well and is maintainable.

Authored by: Bit

Understanding the Basics of Angular

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It provides developers with tools and design patterns to build large-scale...

Authored by: In Plain English

The Essential Difference Between Constructor and ngOnInit in Angular

When working with Angular, you may have come across the terms "Constructor" and "ngOnInit." While they both play important roles in the component lifecycle, understanding the key differences between...

Authored by: JavaScript Kicks


React

React Trends in 2024

React Trends in 2024 which should be on your watchlist. A walkthrough of the state of React ...

Authored by: Robin Wieruch

Application Shell for React Micro Frontends

An application shell is the "container" that integrates micro frontends together. It provides the layout, navigation, global state, and other common elements shared across the MFEs. An app shell sets...

Authored by: Bit

Extensive React Boilerplate to kickstart a new frontend project

How much time do we typically spend on project setup? We're talking about configuring installed libraries and writing boilerplate code to structure and implement best practices for achieving optimal...

Authored by: JavaScript Kicks

10 React Best Practises I've Learned From Code Reviews

Learn about component modularity, single responsibility principle, avoiding unnecessary re-renders, utilizing prop types and TypeScript, favoring functional components, avoiding prop drilling, implementing error boundaries, code splitting for performance, ensuring accessibility, and the importance of documentation.

Authored by: Bit

Launch a React App in a Docker Environment

This article will walk you through the process of launching a React app that utilizes Syncfusion React components in a Docker environment.

Authored by: Syncfusion

Building a Reusable Infinite Scroll Component With React

How To Build A Reusable Infinite Scroll Component In React?

Authored by: Bit

React Compound Components: A Modern Guide to Simplifying Complex UIs

React compound components have significantly shaped the landscape of front-end development since React's introduction in 2013. Emerging organically within the React community, this pattern addresses...

Authored by: Frontend Weekly


Vue

Vue Cheatsheet: Your Comprehensive Vue.js Companion 📗

An interactive cheatsheet of Vue, Vue Router, and Pinia. 🎊 The only Vue CheatSheet you will ever need whether you are using Vue, Vue Router & Pinia in your Vue project.

Authored by: JavaScript Kicks

Getting Started with a Vue.js App in 2024

Build a composable Vue.js application with automated CI/CD based deployments to Netlify

Authored by: Bit


Node.js

How To Install Node.js And NPM On Windows and Mac

Installing NODEJS and NPM can be a challenging task without the proper guide and steps to achieve but that narrative changes once you are provided with the right directives to follow. This is exactly...

Authored by: In Plain English


Libraries and Tools

Top 8 JavaScript Libraries for Data Visualization in 2023

Data visualization is a crucial part of modern web applications. With various visualization techniques, everyone tries to make their application unique and appealing to users. As developers, knowing how to deliver these customer needs is essential.

Authored by: Syncfusion

6 Free Libraries to Create Tooltips in JavaScript

A tooltip is a little pop-up text window that appears when a user moves the pointer over a UI element. Tooltips allow users to view more information about an element without clicking it.

Authored by: Syncfusion


Testing

Mocking/stubbing the Date and timers (setTimeout) in Node.js tests with built-in `node:test` MockTimers · Code with Hugo

MockTimers is an experimental class in the node:test

Authored by: Hugo Di Francesco

Test Native `fetch` in Node.js with Undici interception and mock utils · Code with Hugo

Node.js 18+ has a built-in fetch available, where prior versions had to use libraries such a node-fetch , axios ,

Authored by: Hugo Di Francesco





0 comments