Tutorials, rants, & ramblings about web development.
-
Centering a Div Vertically and Horizontally in CSS
Centering content within a div is a common requirement in web design, whether it’s aligning text, images, or entire containers. Let’s explore several modern CSS methods to achieve this using flexbox, CSS grid, and other techniques. Method 1: Using Flexbox Flexbox is a powerful layout model that simplifies centering elements both vertically and horizontally with…
-
MongoDB vs PostgreSQL: A Comparative Analysis
In the world of databases, MongoDB and PostgreSQL stand out as two popular choices, each with its unique features, strengths, and use cases. This blog post delves into a detailed comparison of these two databases to help you make an informed decision for your next project. MongoDB MongoDB is a NoSQL database that stores data…
-
Understanding Fluid Font Sizes in Web Design
Introduction In the ever-evolving landscape of web design, ensuring your site looks great on all devices is crucial. One essential aspect of responsive design is fluid font sizes. Fluid font sizes adjust dynamically based on the viewport, providing a seamless reading experience across devices. In this post, we’ll explore the concept of fluid font sizes,…
-
@tailwindcss/forms tutorial: effortlessly style your forms
When building web applications, the styling of forms often proves to be a challenge. With the vast range of input types and variations, creating a consistent look can be tedious. Thankfully, the creators of TailwindCSS introduced @tailwindcss/forms – a plugin specifically designed to give a head-start in form styling. In this @tailwindcss/forms tutorial, we will…
-
Tailwind CSS plugins: The ultimate list!
If you’re already familiar with Tailwind CSS you have to check out all the cool Tailwind CSS plugins in this list. Tailwind CSS has rapidly gained traction as a utility-first CSS framework that enables developers to craft custom designs without leaving their HTML files. Its core philosophy is to provide utility classes to facilitate rapid…
-
Low highlight css text effect with vanilla css
This is a really simple tutorial on how to create a low highlight css text effect with vanilla css. The trick here is to use the background-image css property rather than a background-color. First, let’s assume we have an h1 tag. We need to wrap each word or group of words that we want to…
-
Using Tailwind CSS in WordPress blocks
In my previous post, I stated that I have a reignited love for Tailwind CSS. I felt this way after using “normal” CSS again while developing custom blocks in WordPress. It was a frustrating experience which made me realise; I friggin love Tailwind CSS. In this post, I’m going to show you one possible method…
-
Tailwind CSS: my love has been reignited ❤️
I have to admit, I hated Tailwind CSS at first. I’m pretty sure that my hatred for it lost me one of the contracting jobs I was gunning for. “Do you really want to use Tailwind CSS? Because I hate it with a passion. You may as well just use inline styles!”. Needless to say…
-
Recursion explained in React JS (with example)
First of all, let’s ask ourselves the most obvious question what is recursion? What is recursion? To put it simply, a recursive function is a function that calls itself. That’s it. Literally, it’s that simple. But then the question may be, why would we even want a function that calls itself? Or.. What’s the point…