Looking back, the recent Bootstrap vs Bulma post left me wondering why you really need either. Two years ago, I did a post on what CSS Grid is and I figured that you can consider this to be an continuation of that. Continue reading Styling a webform with CSS Grid
Tag Archives: HTML
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 HTML but I’m sure that you can do that with a little CSS and JavaScript.
[ Cover Photo by Mariia Zakatiura on Unsplash ]
CSS Image Carousel, Part 2
Recently, I was talking about how a random tweet got me thinking about CSS image carousels and at the end of that post, I mentioned that the second version of the image carousel would allow you to link to individual slides. I figured that it was time to show how to do that.
See the Pen
Simple CSS-Only Image Carousel – 2 by Joe Steinbring (@steinbring)
on CodePen.
The above pen is just like the one from last week, except an unordered list, a little CSS to turn it into a menu bar, and some links.
Have any questions, comments, etc? Feel free to drop a comment, below.
[ Cover photo by insung yoon on Unsplash ]
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 CSS. pic.twitter.com/PLIyTaXZkV
— Pratham (@Prathkum) February 10, 2022
It turned out that I needed a few more than two lines of CSS, but it was still somewhat simple. 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 Solorzano on Unsplash ]
How to use border-radius to round the corners of inputs, buttons, and divs
Making your forms look less “straight out of the box” is sometimes just as simple as adding a border-radius to things. In this quick post, I figured that I would show the power of it. Continue reading How to use border-radius to round the corners of inputs, buttons, and divs
How to add text on-top of an image
I am slightly surprised that I haven’t done a post on this, yet. My intention with this blog post is to simply show how to layer text on-top of an image. Continue reading How to add text on-top of an image
Three ways to load lazily
Lazy loading is a method for optimizing a website by loading images (or iframes) on demand. If properly implemented, the browser should load the images that are at the top of the page first and wait to load the rest until the user starts to scroll down the page. This is something that is relatively easy to implement but more difficult to test. While writing the examples for this post, I opened the browser console, switched to the network tab, and watched the images load. If you want the effect to be more pronounced, you can throttle the speed of your network connection but it didn’t help to much in my case. Continue reading Three ways to load lazily
Data URLs
Last week, we talked about CSS sprites and a large benefit of it was that the user didn’t need to retrieve as many image files from the server. This week, we are going to look at how to not need to retrieve ANY image files from the server. The method is something called data URLs. I used this concept five years ago with my TNO encryption demo. Let’s take a look at a quick demo.
See the Pen
Data URLs – Part 1 by Joe Steinbring (@steinbring)
on CodePen.
In the simple demo above, I base64 encoded a JPEG file and just included the full content of the file (using the data:[<mime type>][;charset=<charset>][;base64],<encoded data> syntax). Let’s looks at one more example.
See the Pen
Data URLs – Part 2 by Joe Steinbring (@steinbring)
on CodePen.
This one works the same basic way but instead of using a JPEG file, I’m using a PNG file.
So, why use this method? The big reason is to have one fewer asset to load into the page. You are still requiring the client to download the same amount of stuff but it is via one HTTP request instead of two. I have also seen people use this method to more easily include graphics in HTML email messages.
Easy enough, right? 🙂 Have a question, comment, etc? Feel free to leave a comment.
[ Cover photo by Joshua Sortino on Unsplash ]
Fixing JWS.app: The “Superfeed” (Part 1)
One of the goals for JWS.app was for it to pull in activity from a bunch of sources and update itself. That is the reason why I created the “superfeed”. Let’s start by looking at its current state.
See the Pen
JWS.app – Superfeed (Before) by Joe Steinbring (@steinbring)
on CodePen.
Getting the content from the photo blog, the blog, dev, github, and the two tumblr blogs and interleaving the content was tricky enough. When it came to displaying the updates, I just used an unordered list in version 1. I couldn’t immediately think of an alternative. In previous weeks, we have leveraged Bulma. I figured that we could use it again.
See the Pen
JWS.app – Superfeed (After – Option 1) by Joe Steinbring (@steinbring)
on CodePen.
The above example uses Bulma‘s Media Objects. This look is similar to what you see with things like twitter. It feels like a lot of waste, so let’s try another option.
See the Pen
JWS.app – Superfeed (After – Option 2) by Joe Steinbring (@steinbring)
on CodePen.
This might be my favorite option, so far. This example uses Bulma‘s Cards. My goals were for long-form posts (like this) to be more prominent and to do something mildly similar to Microsoft’s Metro design language.
I am not completely sure if the Bulma Card solution is best option or not but I do think that there is a next step to this. Previously, we looked at the Notifications API and that got me thinking about incorporating push notifications. I might need to add some sort of Modal (to have something to link to), though.
[ Cover photo by AbsolutVision on Unsplash ]