Founder of Codú - The web developer community! I've worked in nearly every corner of technology businesses: Lead Developer, Software Architect, Product Manager, CTO, and now happily a Founder.
Here's the process of generating and running database migrations with Supabase.
Do you need QR codes in your app? The "qrcode.react" library is probably the easiest way to add them.
Sometimes you need to bypass type-checking during builds (we all get lazy sometimes).
The srcset attribute is the modern solution for serving different image sizes based on the user's device. Here's how you use it:
Let's explore how to create custom snippets that will boost your productivity.
Tailwind CSS makes implementing child elements straightforward through its group and group-hover utilities.
Canceling asynchronous operations in JavaScript has historically been challenging. Not anymore thanks to AbortController API and its companion, AbortSignal.
This guide covers different methods for linking to locations in Google Maps and Apple Maps.
Here's my simple implementation of a clean and reusable debounce hook:
This series of articles covers the basics, from building practical applications to explaining core concepts in depth.
Layout shifts caused by the appearance of scrollbars can be a frustrating user experience issue. Here's how to fix it:
It's no secret that Docker Desktop is a memory hog... If you are on Mac, I recently found a good alternative (that might save your memory)
If you struggled with setting up multiple font weights like me (with next/og), I am writing this guide for you.
This release introduces some nice upgrades designed to boost developer productivity, improve performance, and increase compatibility with modern JS.
This guide walks you through how I created a custom avatar generator that produces unique, colorful avatars based on a user's name.
We'll dive into the testing world, focusing on using Jest, a popular JavaScript testing framework, to ensure our Node.js applications work as expected.
Now, we're leaping forward by creating a basic web server. This is where I think Node.js truly shines, enabling us to build scalable web apps.
Now, we'll create a more practical CLI task manager that demonstrates the use of key Node.js features and some of the built-in modules we learned about.
this article, we'll explore some of the useful built-in modules that you might find useful in your projects.
Modules allow you to organize your code into reusable pieces. In this section, we'll explore how modules work in Node.js.
Command-line interface (CLI) tools are programs designed for use from a text interface, such as a shell or terminal.
Most people transition from using JavaScript in the browser to Node.js. It's important to understand the differences between these two environments.
This section will explore the concept of non-blocking operations and explain why it's so useful.
In this section, we'll walk through setting up Node.js on your system with NVM.
Node.js is an open-source, cross-platform JavaScript runtime environment that executes JavaScript code outside a web browser.
I've been building a new events platform lately. I implemented something earlier today: the ability to add an event to Google Calendar.
I've come to appreciate the power and simplicity of URL parameters for state management.
Today, I will share some techniques for optimizing your Node.js applications. We will start with some simple techniques and gradually increase the heat.
What I initially thought was a quick page refresh turned out to be an unexpected scroll behavior. Fortunately, I found an easy fix.
While it's not a new feature, I don't think many people know about it. VS Code profiles have become very helpful to me since I discovered them.
Let's create a simple social media platform similar to Reddit or X, where users can create posts, like or downvote posts, and comment on them.
Today, we will explore another useful relational database concept: compound keys.
As your application grows and evolves, so too must your database structure. We handle these changes with "migrations."
Today, we will explore some of PostgreSQL's more advanced features, including how, when, and why to use them.
Today, we're exploring a crucial concept in database management: ACID properties and transactions.
This article will dive deep into the world of database indexing and performance optimization.
Today, we will explore more advanced SQL concepts: Subqueries, Aggregates with GROUP BY, and Common Table Expressions (CTEs).
This article will explore foreign keys in more detail and how to use "joins" to work with data across multiple tables.
Today, we are exploring the different data types we can use. By the end of the article, you should have some confidence in picking the right data types.
It's time to dive deeper into SQL by querying and filtering data. These skills are essential for extracting meaningful information from your databases.
Our previous article introduced a practice scenario for building a simple social media application database. Here's how I solved it:
In our previous article, we explored the fundamental concepts of relational databases. Now, we'll see how these concepts come to life through SQL.
This chapter will introduce you to the core concepts that form the foundation of relational database systems.
It's time to get our hands dirty and set up PostgreSQL on your computer! Don't worry if you've never installed database software before.
Now that we've explored databases and their importance, let's focus on PostgreSQL, the database system we'll be using throughout this series.
Have you ever wondered how all this information is stored, organized, and retrieved so quickly?
"Regions" allow developers to organize and collapse sections of their code.
Scrum and Kanban are the two most popular project management techniques in business today. This article tries to teach you both:
The ability to instantly reflect changes in a database to all connected clients makes things feel sophisticated. Thankfully, Supabase makes this easy.
ECMAScript 2022 (ES13) made some nice updates to class definitions, making them easier to use.
There's more to the new .env support than I noticed originally.
I needed to run Bash scripts from within my Node.js app. Now that I know how, I think it could be handy for many things. Here's how to do it:
I use the REST Client extension to speed up my workflow and save HTTP requests. Here's how:
In this article, we'll work with Hono and Bun to create an API to learn how to build with Hono.
Here's a quick guide on setting up Prettier in your project so you and your team can enjoy these benefits.
Git provides tools to help you recover from most situations. This section will cover some common issues and how to resolve them.
It's time to explore some tools and integrations that you can also use to change how you work with Git.
Now that you've mastered the basics of Git, it's time to explore some of its more powerful features.
It's time to refine your skills with some best practices. These guidelines help maintain a clean, efficient, and professional Git workflow.
Now that we've covered the basics of Git and remote repositories, it's time to dive deeper into collaborative workflows.
Now, it's time to take our Git skills to the next level by learning about remote repositories so you get your code off your local machine.
Now, we will explore one of Git's most powerful features: branching. We will also learn how to merge these branches back together.
By the end of this section, you'll have Git installed on your computer and your first Git repository set up. Excited? Let's dive in!
Before we dive into Git specifics, let's talk about version control and why it's a game-changer for developers, especially when working in teams.
Let's create something fun: presigned URLs to upload files directly to Amazon S3 buckets.
Need to create neat, clean URLs for your articles or blog posts? Today, we're diving into slugification (yes, that's a word now).
I've been tinkering as usual and thought I'd share a cool little script I created—a read-time calculator that works with HTML and Markdown.
Ready to take your Server Actions game to the next level? Let's dive into next-safe-action and see how it can make your life easier (and your code safer)!
So you've been wreaking havoc in your Supabase database and have decided the best option is to nuke it... Here's how you can do it. Step 1: Get the Supaba
I recently needed to use a Zod schema that also had some image requirements, so let me share how I made a fairly robust image check:
Ever wanted to show your users a sneak peek of their image before they upload it? Here's how:
Here's my personal content creation toolkit. I'll walk you through the gear that helps me create high-quality content from software to hardware.
There's a new CSS feature in town named field-sizing: content.
It took a few weeks, but finally, I've gotten my first draft of the JavaScript course I've been working on. You can start working through it for free today!
It's time to put everything we've learned into practice with a fun final project: building a simple Blackjack game using the Deck of Cards API.
Let's introduce you to some powerful tools that can speed up and make your development process more efficient.
As you've been coding, you've probably noticed that your JavaScript files can get lengthy and complex. This is where modules come in handy.
JavaScript has many useful features that make coding easier. One of the features I find useful is destructuring.
Now, let's dive deeper into more advanced asynchronous programming concepts, focusing on promises.
Asynchronous behavior is crucial for handling operations that take time, such as fetching data from a server, reading files, or waiting for a user action.
Building on our understanding of asynchronous JavaScript and promises, let's explore how we can use JavaScript APIs to fetch data from APIs.
Each of these methods allows you to perform specific actions on the elements of an array, making your code cleaner and more readable.
Loops are like a shortcut in programming. They let you do the same thing over and over without writing a bunch of repetitive code.
In this section, we'll start adding logic to your applications so you can make decisions based on different conditions.
Let's dive deeper into event handling with another concept: Event Bubbling. Essential for understanding how events propagate through the DOM.
Event listeners help us make web pages interactive. They allow your code to respond to user actions such as clicks, double clicks, or touch events.
Let's dive into an important concept in JavaScript: scope. Scope is all about where your variables and functions can be accessed in your code.
Functions are a fundamental concept in JavaScript that allows you to group code into reusable blocks.
Objects are data types in JavaScript that allow data to be stored in key-value pairs. Let's learn about them in this chapter.
Strings are used frequently in JavaScript, so we should examine them in more detail to get a much better grasp of using them.
Arrays are a fundamental data structure in JavaScript that allows you to store multiple values in a single variable.
Variables are a key concept in programming as they allow us to store, retrieve, and manipulate data. Learn how to use them in JavaScript.
Expressions in JavaScript are combinations of values, operators, and variables that produce a result. Let's see them in action:
Operators in JavaScript are special symbols used to perform operations on values. Let’s learn how to use them:
In JavaScript, primitive data types are the most basic types of data. Here are the five primary primitive data types in JavaScript:
The Document Object Model (DOM) is a programming interface provided by browsers that represents the structure of an HTML document as a tree of nodes.
JavaScript, or as you’ll often see it referenced as “JS," is a versatile and powerful programming language used primarily for web development.
This tool is designed to help you better understand the DOM tree structure in your HTML documents.
Want to learn CSS? You can start working through it for free today!
In this capstone project, you will apply what you've learned to style a simple news feed website.
CSS variables, also known as "custom properties", allow you to store values you can reuse throughout your CSS.
CSS transforms allow you to manipulate an element's appearance by rotating, scaling, skewing, or translating it.
CSS filters are powerful tools that allow you to apply graphical effects like blurring, color shifting, and shadowing to elements. Let's see how:
This chapter will guide you through the various background properties and how to use them effectively.
This chapter will guide you through the basics of typography and fonts in CSS.
This chapter will introduce you to some of the most common CSS units, including px, em, rem, percentages, and a few more.
CSS provides several ways to define colors, including color names, hexadecimal (hex) values, RGB/RGBA, HSL/HSLa values.
In this chapter, we will introduce you to CSS transitions and animations, which will allow you to bring your web pages to life!
Media queries allow you to apply CSS styles based on various conditions, such as screen size, resolution, orientation, etc.
This chapter will introduce the CSS Grid layout model, another powerful and flexible way to design responsive web layouts with CSS.
This chapter will explore the Flexbox layout model, one of the most powerful and flexible ways to create page layouts.
Another bunch of book recommendations for web developers that will prepare you for more senior roles.
In this section, you will understand how to use floats to create various layouts, which will help you make some more professional-looking web pages.
The Display property and the Box Model are two essential concepts for understanding how elements are shown on a webpage.
Helpful tools allow you to apply styles to elements based on their state or position and style specific elements.
These concepts are essential for understanding how CSS rules are applied and how conflicts between different rules are resolved.
There are three main ways to apply CSS to your HTML documents: inline styles, style tags within the HTML file, and external CSS stylesheets.
Selectors are a fundamental part of CSS as they determine which HTML elements you want to style. We will look at what they are and how to use them.
The basics of CSS, including what it is, how it works with HTML, and why it's beneficial. We will also look at the syntax and common properties in CSS.
In this capstone project, you will apply what you've learned to create a simple news feed website.
In this section, we'll explore the overall structure of an HTML document and use Visual Studio Code (VSCode) to create and manage our files.
Now that you've learned about HTML tags, attributes, inputs, and comments, it's time to combine these elements and create your very first web page.
In this article, I'll share with you a step-by-step process for setting up VSCode on Mac or Windows:
Now that we've covered some essential HTML tags, it's time to introduce another crucial concept: HTML Attributes.
Let's explore some of the most commonly used HTML tags. These tags will help you structure and format your content effectively.
Welcome to your first steps in learning HTML! In this article, we'll focus on understanding the fundamental concept of HTML: tags.
An operating system (or, as you'll often see it called an "OS") is a software program that manages a computer's hardware and software resources.
Over the next few weeks (or potentially months), I'll dedicate my efforts to creating content specifically for beginners. Here's why:
While most people use tools like ChatGPT, many users prefer running LLM models locally for data privacy, cost efficiency, and offline accessibility.
Encoding ensures the URL is valid and can be safely sent over the internet. It's really easy, thanks to JavaScript. Here's how:
TheObject.seal() method prevents new properties from being added to an object. However, it still lets you modify the existing properties of the object.
Parsing documents like PDFs can be a real pain. Thankfully, LlamaIndex has you covered with LlamaParseReader and LlamaCloud.
Next.js doesn't play nicely out of the box with LlamaIndex, so this guide might help.
LlamaIndex not working in your Next.js project? This might fix it.
If you've ever committed changes in Git and realized you forgot to include a file, don't worry, you're not alone...
When displaying lists of data, you have a few options, but two of the most common components are ScrollView and FlatList. Learn more about them here:
Don't worry—you're not alone. Here's a straightforward guide on how I fixed this issue, which was more of a confusing error message than an actual bug.
Access to accurate type definitions is crucial to writing effective TS code. TSDocs has made this easier than ever!
The Next.js 15 Release Candidate (RC) is out, providing early access to new features and improvements before the stable release. The BIG update is that th
Supabase (as usual) makes this process simple with built-in support for email OTPs. Here’s How:
Pop-up elements often require detecting clicks outside these elements to close them. Let's create a reusable hook to handle this!
Managing global variables and objects across different environments (like browsers and Node.js) can be tricky in JavaScript.
Introduced in ES2021 (ECMAScript 2021). This article explores what Promise.any() is, how it works, and why it is useful.
Node-Cron is a task scheduler for Node.js, based on the popular cron syntax used in Unix-like systems. Here's how to use it:
DNS is important to our daily internet use because it acts as the internet's address book. Here are the record types and what they are used for:
The Network Information API provides details about a device's current network connection. Let's see how to use it:
TypeScript 5.5 beta is available and brings a fantastic feature to help developers catch common errors in regular expressions: regex syntax checking.
To check the running jobs in pg_cron, you can query the cron.job table. Here's how:
I recently needed Cron jobs for a project and was, as usual, happily surprised by how easy Supabase made it.
We will create the JavaScript utility that converts a given number of milliseconds into an object containing days, hours, minutes, seconds, milliseconds...
As a fun way to learn how your code executes, a great extension to add to your VSCode setup is Quokka.js. Here's how to set it up:
The satisfies keyword provides a declarative way to check if a value conforms to a specific type without altering the code's runtime behavior.
The most common way to shuffle an array in JavaScript is by using the Fisher-Yates shuffle algorithm. Here's how you can implement it:
JavaScript's String.raw() is a built-in method that provides a way to work with template literals in their raw form. Here's how to use it:
In this article, we'll look at a simple way to zip files in a Node.js application using a library called Archiver.
I like to hide the generic information in the terminal. This can be easily achieved by editing shell configuration files like .bashrc or .zshrc. Here's how:
Using the break statement in JavaScript, you can break out of loops. This immediately stops the loop, which can be useful in certain scenarios. Here's how:
CSS filters are a set of functions that can modify an element's rendering before it is displayed on the screen. Here's what they do:
Destructuring nested objects in JavaScript is a handy trick. It's a technique that allows you to extract specific pieces of data from deeply nested objects.
Creating shortcuts in Git using aliases can make your Git workflow easier by adding new custom commands. Here’s how:
Tailwind offers a very useful peer modifier, which is a utility for controlling the styles of one element based on the state of another.
You can use the built-in npm pkg command to modify the type field in your package.json directly via the command line. Here's how:
Since our last event, I've received many messages asking, "Where can I buy the Death by JavaScript T-shirts?"
Docker has built-in support for environment (.env) files, which is handy for managing configuration settings that must be passed into containers.
In this short cheat sheet, I'll cover all the jargon and basics you'll need to know as a developer:
Do the Tailwind colors not fit your brand? Well, it's easy to fix! We just need to extend the default configuration, particularly the color palette.
Need to rename a file? Node.js provides a built-in module, fs, for managing file systems, including renaming files. Let's see how:
Node.js 22 has just been released! Here's a super short look at some of the highlights:
Adding days to a date in JavaScript is fairly easy using the Date object. You can update a date using the .setDate() method. Here's how:
Yesterday, I gave a mentoring session and got recommendations from the group on all the resources people use (and recommend) to prepare for interviews.
Need to combine properties from two or more objects into a single object? Merging objects in JavaScript is a common requirement. Here's how:
Here's how you can get the entire URL of the page you are on with JS and some other interesting tricks with window.location.
Comparing two dates in JavaScript is a fundamental task that can be achieved using the Date object. This guide will walk you through the simplest way.
In this short guide we will use the String.prototype.replace() method with a global regular expression or another approach using the replaceAll() method.
Here’s a quick guide, including examples for single and multiple-item removal of specific items in an array in JavaScript.
Often, you'll see people create their functions to generate a random string to use as an ID. But did you know JS has a built-in function to create a UUID?
This short guide will walk you through the process of using pg_dump to back up your PostgreSQL database.
I've found that using objects to handle multiple parameters in functions offers several advantages, making code more flexible, readable, and maintainable.
Here are 2 ways you can redirect to a new URL using JavaScript:
Need to make your Node.js script wait for a "Yes" or "No" before moving forward? Here's an easy way to do it using Node.js's built-in readline module.
This capability comes from the child_process module, which provides various methods to spawn child processes. Here's how:
JavaScript's `Intl.NumberFormat` object offers a simple way to format currency values according to different international standards. Here's how:
Let's look at how you can explicitly define the return type of a Promise.
If you are building simple or prefer not to use external libraries, you can still read from and write to spreadsheets by treating them as CSV files:
Do you think you could learn to swim without getting into the water? Of course not! So don't get trapped in a cycle of reading articles and watching videos.
Naming your git branches is important for smooth team collaboration and project management. Here are some best practices to get you started:
Do you find yourself constantly getting messages popping up every time you hit . as you type on VSCode, and you have finally had enough? Here's the fix:
This article will give you the basics of JavaScript Maps, including their advantages and scenarios where they might be best.
Drizzle just added a new $onUpdate function in v0.30.5. The $onUpdate function allows database fields to update automatically.
You might have used sites with a sidebar that doesn't move even when you scroll. Here's a straightforward way to achieve this using just HTML and CSS.
You might have heard the term "RAG" being thrown around and wanted to learn more. This article will explain what it is and why you might want to use one.
Thanks to the expo-speech library, we can easily add text-to-speech to our apps. Here's how:
Node.js has introduced a new feature to easily style your console text! Here's how you use it:
Learn how to pass parameters to different pages in your Expo application using the Link component.
This article will show you how to access Tailwind configuration values in your JavaScript code with a Tailwind helper.
MongoDB user? Then, bookmark this post for later. 🔖 It's a cheat sheet of all the basics you'll need when using MongoDB:
On the URL object, we can access a method called canParse() (URL.canParse()) that lets us check that a given URL is valid. Here's how:
Sharing these tips to hopefully help you avoid burnout and have a long and happy future in coding.
In this article, we'll explore several options for generated IDs, explain what they are, their benefits and drawbacks, and share the advantages:
If you are coming from the web, you might have expected a disabled prop. But, in React Native we use the editable property. Here's how:
A solution to the bug in Expo: "Xcode must be fully installed before you can continue".
We often need to sort lists of data by their date. We'll use the sort() function to do this. Here's a simple guide:
Here's how you can create and run migrations for your PostgreSQL databases with Drizzle:
Drizzle takes a few steps to set up. But don't worry; follow this article, and you'll be up and running:
The process.exit() method terminates the Node.js process immediately. You can optionally pass an exit code. Here's how:
Something a little aesthetically pleasing today. Did you know you can smooth the blink and cursor movement in VSCode:
Zod offers two ways to parse your data to check for errors: ".parse" and ".safeParse". So what's the difference?
This one just came up on my feed, and I didn't realize I could read the entire book online for FREE!
inset is simply shorthand for top, left, right, and bottom to position your elements. Here's how to use it:
This simple guide will show you why and how to derive your application state from URLs in React.js.
One of Zod's powerful features is the ability to perform custom validations using the refine method. This allows you to add custom validation logic:
Recently, Vercel started a way to add notifications and even turn off applications if your app spend hits a certain amount. Here's where you find it:
To have your commits verified on GitHub, which shows a "Verified" badge next to your commits, you will need to set up your GPG key. Here's how:
Here's how to show only hours and minutes, omitting seconds and other information.
Two common commands to do this are npm install and npm ci. They might seem similar, but they have different purposes and behaviors. Let's look at them:
You might have used git merge, pull, and rebase in Git. Ever wonder what's the difference? Let's break these down into simple terms:
Since PlanetScale killed its free tier, here are free alternatives to try or if you want to migrate away from PlanetScale:
Want to see why we are using Sendy.co to send our newsletter? Read on:
Renaming imports in JavaScript can be particularly useful when you need to avoid naming conflicts or when you want to make your code more readable. See how:
SQL Injection is a security problem that takes advantage of how an application talks to its database to run SQL commands it shouldn't. Learn more:
Learn how to remove accents (diacritical marks) from letters in JavaScript without removing the letters themselves.
Well, there's this classic head-scratcher where if you add 0.1 and 0.2, the answer isn't exactly 0.3. Yup, you read that right. Let's learn why:
Turning an image into a data URI string with Node.js involves a few steps but can be solved pretty easily. Let's learn how:
React 19 is on the horizon, and here's a short article to explain everything you need to know about the update:
I often use Docker Compose for quickly managing databases while developing apps. Here's how to get started with PostgreSQL:
Need to remove a property from an object? One of the simplest is combining object destructuring and the rest operator. Let's learn how:
Migrations are needed to update your database as your application evolves. Prisma offers a simple way to manage migrations. Here's how:
Want AI reviews on your code? Here's what I used for Codú:
Sonner is an easy way to add toast messages to your React.js application to enhance the user experience by providing immediate feedback.
Simply put, keyof grabs the keys from an object type and makes a union type out of them. Now let's look at why you might need it:
Do you need to generate your schema.prisma, but your migration folder is out of sync, or have you nuked it (I know I have)?
The root app/error.js boundary does not catch errors thrown in the root /app, so how do you handle it? Let's look at the global-error file that solves this!
So, you're messing around with your schema and running a migration using Prisma and realized you need to undo it? No worries, I've got you covered.
A good seed file in Prisma is a solid foundation for your project. This article will show you how to create and run a seed file to populate your data.
MySQL vs MariaDB! Two big names when managing databases. Both are super popular and used by many enterprise companies. So what's the difference?
Quick tip today! If you need to find all of the versions of a specific package on npm, here's a one-liner you can run in your terminal:
Check out this collection of React.js animations you can copy and paste into your projects for FREE!
Let's quickly examine something that often confuses people new to JavaScript: null and undefined.
When working with JavaScript objects, it's common to need to check if a specific key exists within them. JavaScript offers several ways to do this:
Discover 10 CLI tools I use, each with their unique functionalities, these tools can help you enhance your terminal and boost your productivity.
I wanted to expand on why I think you should study every day before your working day begins.
In this article, we will look at how to add a new parameter, set permissions for our Lambda, and use the data in CDK with TypeScript.
If you need to find out what tables you have in your PostgreSQL database, especially if they're in the "public" schema, here's a quick way to do it:
If you've been playing around with AWS CDK and now need to clean up by deleting a stack, you're in the right place.
Using the AWS Cloud Development Kit (CDK), you can create scheduled events with EventBridge and Lambda functions to run your functions regularly.
Optional chaining (?.) is a feature in JavaScript that lets you safely access nested object properties, even if an intermediate property doesn't exist.
Ever wondered why there is a big type in JavaScript and when to use it? Let's explore how and why:
This term might sound complex, but I'm here to simplify it and surprise you by showing you how you might already be familiar with it.
Private properties in JavaScript classes are only accessible from within the class that defines them. Let's learn how:
Starting a new coding project or feature can be exciting, but jumping in too quickly is easy without proper planning. Here is my personal checklist:
One frustrating thing about the sort() method is that it mutates the array you call it on. There is a simple fix with the new toSorted() method:
In this article, we'll dive deep into a very useful utility type - Extract.
In this short article, you'll learn how to use JavaScript to determine which operating system (OS) a user is running on their device.
structuredClone is a JavaScript function that makes deep cloning easy! Let's look learn how to use it:
Over the years, I've interviewed many people, and one thing is for sure - it's impossible to hire well without an excellent candidate pipeline.
“I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times.” - Bruce Lee
In this article, we'll learn how to read text from a file using Node.js.
Most people are looking for career hacks or shortcuts. In this article, I'll share my thoughts on why I think career growth is more like a marathon.
In this short article, we will look at how you can implement autofocusing of inputs in React:
With Resend, sending emails via the API is very simple, and in this article, we will learn how:
With dedication and patience, anyone can create an amazing and unique online community! Let me share my tips on how you can create your space online.
In Next.js, using path parameters (or "path params") allows you to create dynamic content for the pages in your web applications. Let's learn how to do it!
When working with SQL databases, knowing how your queries are executed can help us optimize queries. This is where the `EXPLAIN ANALYZE` command comes in:
The `only-of-type` pseudo-class is lesser-known but can be useful in CSS. Let’s dive into a more detailed example to understand its functionality better.
Create a pull request template! In this article, we will create a template with which a contributor can edit on every Pull Request they open.
Greet new contributors to your open-source project with this GitHub Action. A quick and easy way to welcome new contributors.
This article should save you time from separating the good from the bad. Here are five-ish websites where you can find great icons:
When it comes to maintaining high-quality code, two tools often come into play: ESLint and Prettier. But each has its role to play.
Are you a Tailwind CSS fan but get annoyed when your class attributes look like your sock drawer exploded? Learn how to format your code with Prettier.
If you're diving into React and looking for cool headless UI libraries, I have a treat for you. Let's explore some awesome tools that will help you out:
This short article will guide you through finding and clearing your AWS CLI credentials in simple steps.
One question I get often is, "How the heck do you come up with content ideas"? And you won't believe my one simple trick! Whenever I search for a solutio
Recently I needed to use pull_request_target instead of pull_request. Choosing the right one is crucial for both functionality and security. Learn why:
Sometimes, developers might need to skip these hooks for various reasons like quick fixes or testing. Here's how you can do it:
This article will show you how to add Fathom Analytics to your Next.js application using the new app router. Let's go!
NonNullable ensures your variables aren't `null` or `undefined`, a common source of bugs in JavaScript-based applications. Learn how in this article:
A password strength checker helps ensure that users create strong, hard-to-guess passwords. In this tutorial, we'll build a simple password strength checker
In this short article, I'll go over some of the basics and more advanced topics in Day.js so you can see it in action and start using it in your projects:
The CSS ::marker pseudo-element selector offers a straightforward way to customize list markers. Let us learn how:
Creating a character counter for an input field is helpful, especially for text areas where you want to limit the number of characters. Learn how.
Tailwind CSS Line Clamp is a handy feature that lets you control the number of lines shown in a text block. Here's a quick guide on how:
Cleaning up these branches is often necessary, but you might want to keep certain branches intact, like the "main" or "develop" branch. Read to learn how.
In TypeScript, Readonly is a utility type that makes all properties of an object read-only. Want to learn how? Read this article!
The hype about AI tools raises questions about their potential or usefulness in coding productivity. I've started using it myself, here's what I think.
These books include insights into algorithms, clean coding, product management, and more. Take your career to new heights with the knowledge in these books!
Learn how to find and update your node modules with npm easily. This article will make it easy to find and update your packages. Let's dive in:
A robots.txt file is crucial for managing search engine crawlers and optimizing website visibility in search results. Learn to create and utilize one here.
Generate a Next.js sitemap and optimize your Next.js apps for SEO. Learn how to create a sitemap, understand its importance, and validate it for better SEO!
Discover the power of the double tilde ~~ operator in Javascript. Learn how it rounds down numbers, converts strings to numbers and more.
Learn how writing improves your learning. Strengthen your problem-solving skills, memory retention, and the ability to break down complex concepts.
You might encounter a situation where you need to check if an object is empty, meaning it doesn't have any properties or keys. Here's how.
Sometimes, we need to adjust the length of a string by adding characters to its beginning or end. This is where padStart() and padEnd() come into play.
useId is a React Hook for generating unique IDs. I find this useful when you might reach for an extra library or code snippet to create unique IDs.
React Canary has rolled out two significant features that developers should be eager to explore: Server Actions and Client Actions.
Object.entries() is a method that gives you an array of pairs (another array) from an object. Each pair consists of its key and its associated value.
Today, we're learning about Object.values(). Don't worry; it’ll be light and easy. Let's go!
In mathematics, exponentiation is a way to multiply a number by itself a certain number of times. Learn how to use it in JavaScript with this article.
Here's a simple guide on how to view commits on a branch and a few tips.
window.confirm() is a simple way to show a pop-up dialog to the user, asking them a yes/no question. Learn how to use it here!
One “hack” I don’t think enough people take advantage of is hanging around places where businesses seek help. Learn why in this article:
The debugger keyword in JavaScript allows you to pause the execution of your code so you can inspect its current state in a debugger tool. Let's learn how.
A simple trick to make you a much better developer. Read this article to find out why.
In this article, I'll try to convince you to choose steady growth over intense bursts of learning.
When we query with Prisma, we get types out of the box, but what if you want to get just the type of query to reference elsewhere?
Here's a simple guide on how to set values in the SSM Parameter Store using the AWS Command Line Interface (CLI).
In this article, we will go over removing a file from git history using git-filter-branch.
Did you know that instead of having static values, you can use variables to make your styles dynamic?
Today, we will dive into a concise and neat way to perform conditional (if-else like) operations in your JavaScript code using the "ternary operator".
Let’s dive into the Logical OR Assignment operator (||=). This operator will be your new best friend if you love writing concise and clear code.
In this article, I'll try to convince you that you might be closer than you think to a Senior Developer role.
InnerWhat? Since I usually get confused glances when I use this word, I wanted to write a short intro to InnerSource to understand the buzzword.
Want to control the proportions of your boxes in CSS? Say hello to the aspect-ratio property. What's the Big Deal? The aspect-ratio property allows you
Trying to use SVGs in your Next.js project? In this article, we will get you setup with SVGR.
In this article, I want to list ten more APIs you might find fun to play with.
If you are getting the "EACCES: permission denied" error while installing the 'code' path in VS Code, here's how I fixed it.
In this article, let's learn how to use Template Literal Types in TypeScript.
Node v20.6.0 added the new --env-file flag which might mean we no longer need to use dotenv! Check out how in this article.
Once you start using async/await it can be hard to return to the alternatives... It makes your code look like synchronous code, which is easier to read an
This article will explore the basics of JavaScript classes, why they are useful, and how to create and use them effectively.
Bun is a new JavaScript runtime built from scratch to serve the modern JavaScript ecosystem. Here's why I'm excited and how you can get started.
This article is meant to be a beginner-friendly guide where we'll break down two of the most essential terms: documents and collections.
In this article, we will show you how to set up your database connection to MongoDB with a NextJS application.
So, you've scored a live tech test, and now you are hit with a mix of excitement and fear. Let's dive into how you can start preparing!
Adding this configuration to your JavaScript projects can create helpful path mappings that will make long relative imports disappear.
In this article, instead of talking only about technical topics, I'll list the top five habits that I believe can significantly impact your coding career
The difference between PNPM and other package managers lies in how they store dependencies. Read this article the learn what the differences are.
We can fix the distorted branch that you've created.
I turned 32 over the weekend and wanted to take some time to reflect on things that have served me well so far in life.
Today, we'll explore the "as const" assertion and how it can be used to add even more type safety to our TypeScript code!
Learn how to use fs.writeFile() to easily save text to files in Node.js.
In today's short article, we're looking at the text-wrap: balance CSS property: what it is, why you'd use it, and how to use it.
If you're a TypeScript user, you've undoubtedly encountered your fair share of errors. Let's make them easier to understand!
@supports is a straightforward way of checking if a browser supports something in CSS and conditionally renders styles. Learn more in this article.
Are you taking full advantage of what VS Code has to offer? Check out these 20 shortcuts to speed up your workflow.
Today we will look at a simple but valuable HTML tag that I rarely see used: the <abbr> element.
If you're diving into modern JavaScript development, you might come across the term npx. Let's learn about it in this article:
When things go horribly wrong in your code, console.log can only get you so far. I often use the debugger statement in normal JavaScript apps to inspect,
In Node version 18.11+ you no longer need to use Nodemon for development! Learn why in this article.
This article will guide you through setting up a TypeScript project, allowing you to start reaping these benefits immediately and testing out TypeScript.
In this article, we'll dive deep into a useful but something I rarely see used utility type - Required<Type>.
In this article, we'll dive deep into a useful and frequently used utility type - Omit<Type, Keys>
In this article, we'll dive deep into a useful and frequently used utility type - Pick.
In this article, we'll dive deep into a useful and frequently used utility type - Partial<T>.
I have "prefers dark mode" enabled in my settings, so I often get a pleasant dark experience on many sites. But how do you quickly test this?
The Geolocation API allows users to give their location to web applications. In this article, we will write a simple script to fetch the users' coordinates.
The PropertyKey is a global alias type in TypeScript that can be a string, number, or symbol.
Learn the right way to enforce empty objects in TypeScript. Let's create an empty object Type in TypeScript.
One useful TypeScript utility type for React is ComponentProps. It can help you quickly generate all your types for your React components.
Read-only types are a handy tool in TypeScript, allowing us to ensure that certain values stay unchanged after their initial assignment. Let's learn more.
Discriminated Unions are a TypeScript feature that facilitates expressing a value that could be one out of multiple possible types.
Inverting colors in CSS is achieved using the filter property, specifically, the invert() function. Let's see how:
The :not() selector in CSS is a pseudo-class that lets you select and style elements that do not match a specific condition. Let's learn how to use it!
But what exactly does a Principal Engineer do? And how does one become one?
A link to a recent appearance with MongoDB. We discussed my work in Marsh McLennan as the Leader of InnerSource and building the Codú community!
Don't want search engines to find a page? We can use HTML metatags, specifically the Noindex and Nofollow tags, to achieve this. Learn more in this article!
Let's delve into two major software categories – open source and proprietary – to jargon bust and determine their benefits, drawbacks, and applications.
In this short article, we'll explore how to convert an image into a Data URI string in Node.js.
Executing a shell command with Node.js is straightforward and can be done using the built-in `child_process` module.
Today, we're focusing on a topic that often puzzles beginners: Immediately Invoked Function Expressions, or IIFEs (pronounced "iffy").
Are you trying to pick your first programming language? Here's why I think you should pick JavaScript.
One ESLint rule I usually add to my teams' codebases is the 'complexity' setting to enforce cleaner, more maintainable code.
We often wait for things like data to load before running the next piece of code. Promises are JavaScript's way of handling waiting. Learn more...
A typical scenario you might come across while using Git is the need to change a commit message after it's been committed.
Need to handle a double-click event? React makes it easy! Here's how:
Here is a quick guide on deleting a Docker volume from the terminal.
A quick guide on how to delete a Docker container from the terminal.
In this article, we'll explore why creating content can be a game-changer for web developers and where you can get those brilliant ideas to get you started.
Music helps me focus. Here's my usual rotation of playlists, depending on my mood.
Want to limit line breaks to a single line? Here's how with a a .replace function and a simple regex.
A JWT is a compact, URL-safe format for representing "claims" (fancy speak for data or data) that can be shared between two parties.
Setup AWS AI coding tool "CodeWhisperer" in VSCode! A FREE AI coding tool to boost your productivity.
Wondering how to remove a folder/directory on Linux or Mac permanently from your terminal?
ES2023 brings many nice new features, but today I want to cover the most useful things to my workflow: toSorted(), toReversed() and toSpliced()
"If a man knows not which port he sails, no wind is favorable" - Seneca
My short rant on how networking is like gardening.
My favorite Tailwind Libraries/Kits in a single post for you to try. You'll be building faster than ever.
You'll often find it helpful to be able to generate UUIDs in JavaScript for use in your apps. Learn how to do it with the built-in Web Crypto API
This short article will look at the differences between "any" and "unknown" types in TypeScript.
Kanban is a work management methodology originating from Toyota's production lines. Let's see how you can apply it to your workflows today!
Supabase refers to itself as "an open source Firebase alternative". This article is a quick intro to Supabase.
Want a simple CSS reset for your projects? Here's how I start my projects...
I read a while back that baroque music can enhance focus. Is it true?
Introduction to React.js section 8! Learn to style your applications using CSS modules. This is how we can scope styles to specific components.
Introduction to React.js section 7! The last big concept I want to introduce in this series is how to use the useEffect Hook.
Introduction to React.js section 6! In this section, we learn all about events in React. Events represent the user's interactions.
Introduction to React.js section 5! Props are essential to React as it allows us to pass data to our components and make our components more reusable.
Introduction to React.js section 4! State is essential to React as it allows us to add memory to our components and easily add interactivity.
Introduction to React.js section 3! JSX is a syntax extension for JavaScript that allows developers to write HTML-like code within their JavaScript code.
Introduction to React.js for beginners! This is the second article in a series to teach you React so that you can start with JavaScript's favorite library.
Introduction to React.js for beginners! This is the first article in a series to teach you React so that you can start with JavaScript's favorite library.
There are many techniques for writing clean code but keeping Pull Requests (PRs) under 300 lines of code is an easy way to improve.
Check out these fantastic places to learn something new.
This article is an overview of the most common HTTP status codes and their meanings.
The best way to learn is by doing. Here are 5 CSS games that will take your skills to the next level!
In this article, I will share my experience with the AWS Community Builders program and provide some guidance on how you can apply to join this great group.
Intl.RelativeTimeFormat - This is particularly useful when displaying timestamps, time remaining, or time elapsed in a user-friendly way.
The Array.at() is a newer feature (ES2022) that makes accessing elements in an array easier, especially when dealing with negative indices.
JavaScript makes it easy to install packages and dependencies into our apps. Now how do I find the unused packages?
This article will show you how to get started with Vite and create a React.js app to start building with.
In this article, we'll explore the basics of using the Notification API.
In this short article, we will explore how to omit specific properties from a type using TypeScript's Omit utility type.
As professional code hackers, we like to ensure we are typing as little as possible. Here are some shorthand npm commands that I regularly use.
In this article, you'll learn about Nullish Coalescing and explore its applications in JavaScript.
We have all been there. Starting with some great intentions, we somehow get the opposite effect.
Prisma has detected that this project was built on Vercel, which caches dependencies. This leads to an outdated Prisma Client because Prisma's auto-gener...
Next.js 13 introduced new & improved font optimization. Here's a quick guide on getting up and going.
There are so many places to get terrible photos that I wanted to do the hard work for you and keep a short list of the great ones.
Some of the most successful people in business and technology have made a habit of dedicating at least one hour of their day to learning.
A CODEOWNERS file is a text file used to define code owners for specific files or directories in a GitHub repository.
:focus-within is a helpful pseudo-selector in CSS. In this short article, I'll give you an example of how to use it.
The CSS text-transform property is used to specify text capitalization in an element.
Sometimes you would like to suggest some options to users as they type something into an input. Achieve it easily with a datalist tag!
In this article, we'll introduce you to Nano and provide some basic tips on how to use it for web development tasks.
In this short article, we will guide you through creating a download link in HTML.
This article will explore setting a fallback image using just HTML (and a bit of inline JS).
In this tutorial, we will focus on speech synthesis, creating a simple JavaScript Text-to-Speech application using the Web Speech API.
So many people see a dream job, a life, a dream girl or a guy, and before they even get close, they say, "no, that's not for me; that's for other people."
Learn how to optimize and transform images in Node.js with Sharp. Improve website performance by resizing, converting formats, and compressing images.
Create stunning README docs with this simple tool.
Healthy habits are crucial to living a long, healthy, and fulfilling life. Here's my guide on making it easy (with a bonus tip).
I am always excited to share insights about lesser-known yet powerful APIs in the modern web ecosystem. Today, we'll dive into the Page Visibility API.
This article will guide you through creating alias commands in the terminal, allowing you to work more efficiently and effectively.
In this article, we will introduce you to 10 CSS generators every web designer and frontend developer should have in their toolkit.
ESM is used in most modern web applications, so it's crucial to understand how to leverage their potential in Node.js.
Here's a short guide on uninstalling/remove packages with npm or Yarn so you can keep your package.json clean. 🧽
This tutorial will demonstrate how to set up and use AWS SES with Nodemailer in a Node.js project to send emails.
If you are struggling to understand why and how your layouts are working, this is one of my favorite little snippets to add to the base CSS file.
Direct messaging people to solve problems might seem efficient, but here's why you should stop.
In this post, I will share with you some settings in Visual Studio Code that have helped speed up my workflow.
Learn all of the most used React Hooks in this playlist on the Codú YouTube channel!
I got this error yesterday and panicked...
Delve into the world of PostgreSQL data types, exploring the different options of data types and when to use them.
Sometimes we have data with weird names or semantics that we'd rather not use. Here's a straightforward way to rename these variables while destructuring.
Destructuring is a powerful feature in JavaScript that allows developers to extract data from arrays or objects and assign it to variables in a concise way.
A common interview question is "Swap the variable values." But we can solve this easily with a destructuring trick.
Capitalizing the first letter of a string is a common task in programming. Here are a few ways to solve it with JavaScript.
Learn how to get the return type from a Promise in TypeScript. Discover the power of the Awaited utility type.
I've been reading product books for years, and here are my top 5 favorites (for now).
In this post, we will look at a super-easy way to check if the user is connected to the internet and detect if they lose connection or reconnect.
Sometimes, I forget the last branch name with how many branches I jump between. Here's a simple way to switch to your previous branch in Git.
This list gives you a free way to earn some new coding knowledge with YouTube!
In this super short article, learn how to create 3 different functions that return all of the unique values in an array.
Well, you are reading this on a community-built platform, so let's chat about why coding communities are a great way to advance in your career.
We hear the terms "method" and "function" often used interchangeably in JavaScript. But what's the difference?
How do you get good at coding? How do you get good at art? How do you get good at anything?
Semantic versioning is a system to help developers, project managers, and consumers have a universal way of understanding the release process.
Stop google and other search engines from crawling your load-balanced applications. It's easier than you think. 🦾
Interested in learning the tools I use to create my video and audio content? Check out the things I'm currently using.
A small showcase of some of the useful underused things you can do with npm to boost your productivity.
Learn how to make your apps faster by dynamically loading required files as required rather than one big bundle.
Trying to alter or view your Git configuration? Well, this simple guide is for you.
At first glance, direct messaging (DMs) may seem like an efficient way to communicate at work. But is it?
Need some ideas for things to build and practice your web dev push-ups? Check out these 10 APIs that might inspire your next project.
Learn how to easily change values into booleans with as little as 2 characters.
Since I've been maintaining the Codú platforms codebase, I often have to checkout PRs locally, and I know it confused me when I started, so hope this helps!
React Query does many clever things to make data fetching optimal, but how do I stop network requests from auto-failing while offline?
The internet is a treasure trove! Here is a short post just listing off some free resources you can use to keep learning without spending a penny.
Explain Serverless to me like I'm a 5-year-old. Well, here's how I'd explain it to that curious forty-something-year-old with a mind of a 5-year-old.
We will look at 26 different string methods in this article. Want to learn some new tricks and skills? Here are some fun string methods to learn!
Let's streamline your Node Version Control effortlessly with Volta. Improve your web development workflow and enhance productivity with Volta today!
Become a Console Commander! The console object has a lot more inside it than just a .log method that could make your life easier when debugging in JS.
Giving a f*ck might save you time! This tool makes me laugh and makes me faster with the command line tools, so it's a win-win.
I've been asked in our community Discord for some writing tips, so I hope this list might help boost your skills and confidence.
A very warm welcome from Niall (the founder of Codú) and the very first post on codu.co.