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 found myself trying to figure out how to do an interface consisting of a series of cards that slide off to the side as you finish them. Let’s start by looking at the sample app before the addition of the sliding magic.
Continue reading "Sliding transitions, using Vue and Bulma"
Almost two years ago, I looked at how to use prefers-color-scheme to add “dark mode” to a website. It isn’t exactly a difficult change to make, so I figured that we could take this week to add it to the State Parks App. The last time we looked at this, it was supported by everything …
Continue reading "Adding dark mode to your web app"
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"
CSS sprites is a method where you take multiple images and combine them into one single image so that you can use to reduce the number of assets that are loaded when someone visits the webpage. I don’t think that it does anything for the total download size of the images but it does reduce …
Continue reading "CSS Sprites"
This is going to be a pretty quick post. I was playing with an MDN Tutorial on WebRTC and started wondering what I could do with it. Here’s how the basic functionality works: See the Pen JavaScript Photo Booth – Part 1 by Joe Steinbring (@steinbring) on CodePen. So, I was thinking about the post …
Continue reading "Playing with WebRTC: Taking still photos"
Previously, we looked at ways to display tabular data on a webpage. Let’s pick up where we left off, but with more data. The last time, the data was hard-coded into an array. This time, let’s use Axios to load some fake data from JSONPlaceholder. See the Pen Table Pagination – Example 1 by Joe …
Continue reading "Playing with more tabular data"
So, you need to show tabular data on a webpage and make it as digestible as possible? For demo purposes, we are going to look at the top 10 most populous municipalities in Wisconsin. See the Pen Table Zebra Striping – Example 1 by Joe Steinbring (@steinbring) on CodePen. In the above example, we just …
Continue reading "Playing with tabular data"
I’m not sure that this concept is universally understood. I figured that it is time to take a swing at it. According to w3schools, a block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). See the Pen …
Continue reading "Block vs inline vs inline-block"
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)"