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"
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?"
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 …
Continue reading "CSS Image Carousel, Part 2"
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"
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"
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"
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"
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 …
Continue reading "Three ways to load lazily"
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. …
Continue reading "Data URLs"
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 …
Continue reading "Fixing JWS.app: The “Superfeed” (Part 1)"