All Javascript posts

  • Drag-and-Drop File Upload Component with React and TypeScript

    Drag-and-Drop File Upload Component with React and TypeScript

    Updated on · 4 min read

    In this tutorial we'll walk through the steps required to build such a component in React, using TypeScript for additional type safety and robustness. The unique aspect of our approach is that we won't rely on any external libraries, giving you the fundamental knowledge and freedom to create and customize a file upload solution that fits your specific needs.


  • TypeScript Template Literal Types: Practical Use-Cases for Improved Code Quality

    TypeScript Template Literal Types: Practical Use-Cases for Improved Code Quality

    Updated on · 5 min read

    Explore practical use-cases of TypeScript template literal types to enhance code safety and maintainability. Learn to leverage advanced type features for more expressive, robust, and easy-to-manage applications.


  • Beyond Console.log: Debugging Techniques In JavaScript

    Beyond Console.log: Debugging Techniques In JavaScript

    Updated on · 6 min read

    This blog post aims to offer an array of alternatives to the frequently used `console.log` debugging strategy in JavaScript. While `console.log` is a valuable tool in a developer's arsenal, it's not always the most efficient or comprehensive method for identifying and resolving bugs in your code. Broadening your debugging toolkit can significantly streamline your debugging process, making coding more efficient.


  • Advanced String Manipulation with Tagged Templates In JavaScript

    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

    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

    Mocking the Window Object In Jest Tests

    Updated on · 6 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.


  • Add a Dynamic Sitemap to Next.js 13 Website Using Pages or App Directory

    Add a Dynamic Sitemap to Next.js 13 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 13 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 13 website.


  • What Is NaN: A Deeper Dive Into JavaScript's Implementation of the IEEE-754 Floating Point Standard

    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?


  • Mastering JavaScript Array Sorting: Array.prototype.sort() with Examples

    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.


  • Productivity Benefits of Integrating ChatGPT Into the Front-End Development Process

    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

    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

    The Most Common Mistakes When Using React

    Updated on · 11 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.


  • React Hook Form: Working with Multipart Form Data and File Uploads

    React Hook Form: Working with Multipart Form Data and File Uploads

    Updated on · 6 min read

    Learn how to handle file uploads and multipart form data in React applications using React Hook Form. This tutorial demonstrates adding file input fields, working with FormData API, and submitting form data.


  • Managing Forms with React Hook Form

    Managing Forms with React Hook Form

    Updated on · 9 min read

    Working with forms in React is notoriously difficult, particularly when there are dynamic fields involved. There exist several libraries that make the whole process easier. One such library is React Hook Form. In this post, we talk about the basics of React Hook Form and learn how to use it to simplify form management in your React applications.


  • Removing Duplicates with Map In JavaScript

    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

    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

    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.


Back to all posts