All Javascript posts
Understanding StructuredClone: The Modern Way to Deep Copy In JavaScript
Updated on · 5 min read|Learn how structuredClone() provides a native, reliable way to create deep copies in JavaScript, its advantages over traditional methods, and its limitations.
Faster String Sorting with Intl.Collator
Updated on · 2 min read|Improve your application's locale-aware string sorting by replacing repetitive `String.localeCompare` calls with a single, reusable `Intl.Collator` instance for faster, more efficient comparisons.
Mastering JavaScript Array Sorting: Array.prototype.sort() with Examples
Updated on · 8 min read|Explore the Array.prototype.sort() method in JavaScript, learning how to handle various sorting scenarios, combine multiple sorting criteria, and manage limitations and caveats for effective array sorting in your applications.
Immutable Array Operations In JavaScript: Introducing toSorted, toSpliced, and toReversed
Updated on · 6 min read|This blog post explores the new immutable array methods, such as Array.prototype.toSorted, Array.prototype.toSpliced, and Array.prototype.toReversed.
Higher-Order Functions In JavaScript
Updated on · 6 min read|Higher-order functions are a powerful feature in JavaScript that enable the abstraction of control flows and data operations. This article explores the concept of higher-order functions, providing examples of their use in everyday coding.
Beyond Console.log: Debugging Techniques In JavaScript
Updated on · 6 min read|Learn about alternative debugging techniques in JavaScript that can help you become a more efficient and effective developer.
Getting Started with Template Literals In JavaScript
Updated on · 8 min read|Template literals in JavaScript have reshaped the creation and usage of strings. This article provides an overview of template literals, explores advanced usage and features, discusses real-world applications, and outlines best practices for their effective use.
Add Dynamic Sitemap to Next.js Website Using Pages or App Directory
Updated on · 6 min read|In this post we will explore how to add a dynamic sitemap to a Next.js website using both the 'pages' and 'app' directories. A sitemap is a file that lists all the pages of a website and helps search engines understand the structure of the site. By the end of this post, you will have a fully functional dynamic sitemap for your Next.js website.
Understanding Controlled vs Uncontrolled Components In React
Updated on · 7 min read|Controlled and uncontrolled components are fundamental concepts in React. This post explains the differences between the two and provides guidelines for choosing the right approach for various scenarios in React applications. We'll also explore how to transition between the two types of components and provide code examples to illustrate the concepts.
Advanced String Manipulation with Tagged Templates In JavaScript
Updated on · 5 min read|In this blog post, we will explore the basics of template literals and various use cases where they prove to be particularly useful. Then we'll dive into a more advanced form called tagged templates, which provide even greater control over string construction. By the end of this post, you'll have a solid understanding of how to leverage tagged templates for advanced string manipulation in your JavaScript code.
Diacritic-insensitive String Comparison In JavaScript
Updated on · 5 min read|This post discusses the diacritic-insensitive string comparisons in JavaScript. Learn how to enhance your array filtering by normalizing strings, understand the nuances of Unicode characters, and explore practical considerations and potential performance impacts of this approach.
Mocking the Window Object In Jest Tests
Updated on · 7 min read|In this article, we'll explore the best practices for mocking the window object in Jest, using a simple function that retrieves a language code from a page URL as an example.
What Is NaN: A Deeper Dive Into JavaScript's Implementation of the IEEE-754 Floating Point Standard
Updated on · 6 min read|NaN, or 'Not a Number', is a special value in JavaScript and TypeScript (as well as many other programming languages) that represents an undefined or unrepresentable value resulting from an arithmetic operation. It is often used as a placeholder for a missing numerical value or as a way to signify an error. However, what is the type of NaN in JavaScript?
Productivity Benefits of Integrating ChatGPT Into the Front-End Development Process
Updated on · 8 min read|Boost your web development productivity with ChatGPT. Learn how to leverage its features for code generation, debugging, optimization, and more in TypeScript and JavaScript projects.
Display Warning for Unsaved Form Data on Page Exit
Updated on · 6 min read|This article shows how to implement a FormPrompt component that alerts users when they attempt to leave a page with unsaved changes. It discusses handling such scenarios using pure JavaScript with the beforeunload event, as well as React-specific solutions using the Prompt component in React Router v5 and the useBeforeUnload and unstable_useBlocker hooks in React Router v6.
The Most Common Mistakes When Using React
Updated on · 12 min read|Discover common React mistakes that developers make when using hooks, managing state, and rendering components. Learn how to identify and fix these mistakes to improve your application's performance and maintainability.
Removing Duplicates with Map In JavaScript
Updated on · 5 min read|Removing duplicate items from an array using Set is a common practice in JavaScript. However, what's less well-known is that the Map data structure can also be used for this purpose. The reason is that Map maintains key uniqueness, which means that there can't be more than one key-value pair with the same key.
Simplifying Code with Maps In JavaScript and React
Updated on · 6 min read|The Map data structure is a relatively lesser-known addition of ES6 to the JavaScript language. It offers several advantages over objects, particularly when it comes to storing collections of key-value pairs. One interesting use case of Map is simplifying React components that render different JSX based on frequently changing state variables.
Speed Up Your React Developer Workflow with Plop.js Code Generators
Updated on · 8 min read|As React developers, we often find ourselves setting up new components, connecting them with the existing infrastructure, or scaffolding applications. That's a lot of repetitive manual work, which even though doesn't happen that often, can be quite tedious and frankly, boring. Fortunately, there is a solution that can help us to automate this process and save time: JavaScript code generators.