Posts

In this blog post, we will explore different ways to apply styling to DOM elements dynamically using plain JavaScript. Whether you need to change the color, border, or any other CSS property of an element, we’ve got you covered. Adding and Removing Classes One of the cleanest approaches to styling elements is by using classes in your CSS. To apply or remove classes from an element, you can utilize the classList property along with its add() and remove() methods....

Lists are an essential component of many web pages. Fortunately, CSS provides several properties to style and customize them. In this blog post, we will explore some of the key properties that you can utilize to enhance the visual appearance of your lists. list-style-type The list-style-type property allows you to set a predefined marker for your list items. By default, browsers use the bulleted list style (disc). However, you can easily change this by assigning a different value to list-style-type....

Swapping two elements in an array may seem challenging, but it’s actually quite simple in JavaScript. In this article, we will explore two methods to accomplish this task. Method 1: Using a Temporary Variable Let’s assume we have an array a with five elements: ['a', 'b', 'c', 'e', 'd']. Our goal is to swap the element at index 4 ('d') with the element at index 3 ('e'). To achieve this, we can follow these steps:...

In PostgreSQL, switching between databases using the psql tool is a simple process. By default, you are always connected to one active database within psql. This active database is the one you initially connected to. To switch to a different database, you can use the \connect command, or \c. Here’s an example: \connect mydatabase In the above command, mydatabase is the name of the database you want to switch to. Once executed, PostgreSQL will close the connection to the previous database and connect you to the specified one....

Taking a screenshot using Puppeteer is a simple process. Once you have created the Puppeteer page object, you can use the screenshot() method to save a screenshot of the page. Here is an example of how to save a screenshot as screenshot.jpg: const page = await browser.newPage(); await page.screenshot({ path: 'screenshot.jpg' }); To capture the entire page, you can add the fullPage option to the screenshot() method: await page.screenshot({ path: 'screenshot....

If you’re developing your own npm package, it’s important to test it locally before publishing. This is especially useful when you want to modularize your project and reuse specific functionality. To demonstrate, let’s say I have a package called flaviocopes-common-database. I’ve given it a unique namespace by prefixing it with flaviocopes-. Inside the package directory, I’ve added a package.json file that includes the module name and its dependencies: { "name": "flaviocopes-common-database", "version": "1....

Today, I encountered a situation where I needed to determine if an object was empty in JavaScript. However, straightforward comparisons using the equality operator (===) won’t work because JavaScript objects are compared by reference, not by contents. In order to effectively check if an object is empty, we can utilize the built-in method Object.keys() and an additional check on the object’s constructor. Here’s an example solution: const obj = {}; if (Object....

I have multiple websites hosted on Netlify, and one of my favorite features is Netlify Functions. This feature allows me to add a JavaScript file with an exported function to handle requests to a specific URL. I use these functions for various purposes, such as visualizing internal data or performing operations that connect different tools I use for my business. If you want to learn more about Netlify Functions, you can check out my Netlify Functions tutorial....

If you have a website and need to track file downloads, you may be wondering how to do it. Initially, I thought my only option was to use URL shorteners that provided statistics, as I was building a static site without a backend. However, I wasn’t particularly excited about that solution. Then, I discovered that Plausible can track file downloads, and it’s surprisingly simple to implement. All you need to do is replace the default script with a modified one that lists the file extensions you want to track....

At some point in your journey to learning a new skill or programming language, there comes a realization: You possess the knowledge necessary to embark on the project you have in mind. You don’t need to be a JavaScript expert to build an application. Mastering the basics and having the determination to overcome challenges is all it takes. Having a personal project that you deeply care about becomes the ultimate motivation to overcome the inevitable stumbling blocks along the way....