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)"
I have never been fond of the footer on JWS.app but I’ve been unsure what to use, there. After addressing the elements at the top of the page, it makes sense to turn our attention to the very bottom of the page. Considering how much we have leveraged Bulma so far, it also makes sense …
Continue reading "Fixing JWS.app: Turning our attention to the footer"
Previously, we have looked at the navigation bar, the hero image, and the combination of the two. I figured that next natural step is to look at how to style the content on the page. I want to add some sort of visually pleasing container and Bulma‘s box class seems to be a good option. …
Continue reading "Fixing JWS.app: Styling the content on the page"
Previously, we looked at using Bulma to improve the nav bar and we looked at ways we could improve the hero image. I figured that this week, we would combine the two. See the Pen JWS.app – Hero with Nav by Joe Steinbring (@steinbring) on CodePen. I kind of like this look but the nav …
Continue reading "Fixing JWS.app: What if we merged the nav bar with the hero image?"
Last week, we looked at more ways to tweak the nav bar on JWS.app. This week, I figured that we would move down to the hero image. The current hero image is dynamically generated based upon a subset of images on photos.jws.app. It doesn’t look great, though. See the Pen JWS.app – Hero (Before) by Joe Steinbring …
Continue reading "Fixing JWS.app: The Hero Image"
Last week, we looked at two ways to fix the nav on JWS.app. For the first option, we simply added an additional header that displays when the screen width gets narrow enough. For the second option, we introduced a hamburger menu. This week, let’s look at two new options. The first of this week’s options …
Continue reading "Fixing JWS.app: The Nav Bar (Part 2)"