Learning Tailwind: Borders, Shapes and Backgrounds

A few weeks ago, I started a series where I planned to cover Tailwind to the best of my ability.  Over the years, I have used Bootstrap and Bulma a heck of a lot but I wanted to branch out a little.  Today’s post is going to cover borders, shapes, and backgrounds.  Let’s get started.

Continue reading "Learning Tailwind: Borders, Shapes and Backgrounds"

How to use regex and vue to validate form input

I haven’t talked about regular expressions much on this blog and that is mainly because I don’t feel like I understand the topic enough.  We are going to work on that, today.  Regular expressions (or regex) are patterns used to match character combinations in strings.  There are regex strings to test for valid phone numbers, …

Continue reading "How to use regex and vue to validate form input"

Three ways to create a modal dialog

Today, we are going to look at three ways to add a modal dialog to your app.  The first option just uses CSS and JavaScript (no special libraries).  The second option uses Bootstrap (a topic that I haven’t touched in a few years).  The third and final option uses Bulma.  I looked back at my …

Continue reading "Three ways to create a modal dialog"

Did you know that the blockquote element has a cite attribute?

This is going to be a fairly quick post.  I was reading some developer documentation recently and noticed that the blockquote element in HTML has an attribute for citing the source for that blockquote. See the Pen Blockquote Cite by Joe Steinbring (@steinbring) on CodePen. It doesn’t seem to surface that citation in the rendered …

Continue reading "Did you know that the blockquote element has a cite attribute?"

Two ways to make a pure CSS image carousel

Recently, I was doom-scrolling twitter when I came across a tweet that claimed that you can build an image carousel using just two lines of CSS.  I liked the tweet and then thought to myself “I can’t sleep, right now.  Why not try it out?” CSS Tip 💡 Create image Carousel using two lines of …

Continue reading "Two ways to make a pure CSS image carousel"

Create an accordion without any CSS or JavaScript

Did you know that you can not only create an accordion without writing any CSS or JavaScript but it also works in all modern web browsers?  Using the details and summary elements, it is pretty easy, too. See the Pen Pure HTML Accordion by Joe Steinbring (@steinbring) on CodePen.   [ Cover photo by Charlie …

Continue reading "Create an accordion without any CSS or JavaScript"

Where art thou: Converting addresses to latitude and longitude.

Previously, we have covered how to identify where the user is, based upon navigator.geolocation and based upon their IP address (there are definitely ways to make IP-based geolocation suck less).  I figured that in today’s post, we would look at how to go from an arbitrary physical location (zip code or city name) to latitude …

Continue reading "Where art thou: Converting addresses to latitude and longitude."