The goal of this post is to discover how we can style an HTML select element with CSS. You may know that styling this element is kind of weird and we the most approachable way is the use of other html elements and CSS techniques. Let's dig into it!

This is the last post on the implementation of a Tailwind, Svelte and Astro header for mobile. We'll focus on making the interactions more human-centric by using transitions, and important feature we need to add on any Web application, so they can perceive it more real.

Welcome to the third part of this tutorial series. In this post, we'll continue enhancing our demo application, refactoring our state management to Svelte stores.

In part 1, we implemented a responsive Navbar using Svelte as an island in an Astro application. Parts of the UI (implemented with Tailwind) are off, though. In this post, we're going to fix those design details to enhance our demo.

This series are tutorials on how to create a simple Tailwind mobile header in Astro with the particularity of using a Svelte Island. This is a good example on how to combine these technologies to solve such a common problem we can find in many implementations.

The before and after pseudo elements in CSS are used to insert content before and after an element's content. We can resource to them instead of adding more html code to get to the results we need. In this post we're going to go deeper into these pseudo-elements and apply them in different applications.

This will be a journey to learn about the different commands we can use to create a SVG Path with code. Of course, it will be a basic guide to help you understand better the output graphics of a drawing tool like Illustrator or Inkscape to work more comfortably with them in animations and other applications.

In a previous blog post we explored SVG ClipPath and ways to animate the compositions we can build with that awesome technique. Now it's time to learn about SVG masks and animations that use this awesome technique.

SVGs have many secrets available to building awesome things for the Internet, such as the use of Clip Paths, and yes, we can animate them. Let's learn how to create new effects on objects using clip paths and add motion to them!

Drawing an SVG path is an amazing animation technique that is used to enhance User Interfaces. We're going to decompose this technique into its different parts and learn its internal mechanisms using Green Sock Animation Platform (GSAP)

This is going to be a short, but interesting one. We're going to learn how to get a random number in Javascript and even how to get that number between a range, for example, 100 and 200. You will find this post useful for any code you write in the future that needs random numbers.

A very convenient way to add icons to our UI implementations is to use shapecatcher.com. We will discover how to generate and include ASCII icons with this great tool.

Have you wondered how people with disabilities get to interact with the browser when they may not be able to see the graphical features? In this post, we'll discover what the Accessibility tree is, and how Assistive technologies use it to expose the interface features to people with disabilities.

In this post, we'll learn about the WCAG specification, what is aimed at, its importance for accessibility assessments, and finally, we'll conclude if it guarantees having a thorough accessible experience for our audience.

In this post, I'll showcase an alternative method for conditionally rendering Astro components based on props in web pages. Rather than using conditional statements, I'll demonstrate a different approach that avoids them while achieving the desired outcome.

Sometimes you might have a requirement for a Website to make images appear while scrolling. In this post, I'll show you an implementation with Javascript Intersection Observer

Let's create an Astro contact form that uses Svelte Kit to let the users enter their information and send it to an API route that handles the email delivery via Nodemailer.