Tag Archives: CSS

Adding dark mode to your web app

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 except IE and Edge.  Now, it is supported by Edge as well.  Like I mentioned last week, Internet Explorer is being EOLed on June 15, 2022, so it might not matter anymore that this doesn’t work with IE. Continue reading Adding dark mode to your web app

CSS Sprites

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 the number of assets that are loaded.  When I went looking for an example to show, I found a project on github that uses CSS sprites to show international flags.  Let’s take a looks at it.

See the Pen
CSS Sprites – Part 1
by Joe Steinbring (@steinbring)
on CodePen.

As you can see, this method sets the image as the background for the element and then uses a defined height and width and a background-position value in order to determine what part of the image to display.  The only downside of the above example is that you need to include more content than you probably need.

So, let’s try to do this from scratch.  I took a 54kb picture of my cat and a 63kb image of my dogs and combined them into a 763kb image that contains both pictures (somehow going WAY over the sizes of the individual images).

See the Pen
CSS Sprites – Part 2
by Joe Steinbring (@steinbring)
on CodePen.

As you can see above, implementation is fairly straightforward.  In fact, there is a web app that you can use to determine the coordinates necessary and generate your CSS classes.

Have a question, comment, etc?  Feel free to drop a comment, below.

 

[ Cover photo by Anthony Tran on Unsplash ]

Playing with WebRTC: Taking still photos

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 earlier this year where I used CSS filters to modify SVG images and I figured that there could be something there.

See the Pen
JavaScript Photo Booth – Part 2
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, you start with a live preview of yourself.  When you click on you, it takes a photo of you and adds filters to a 2×2 grid of the picture.  When you click on the grid, it brings you back to the live preview.

Have a question, comment, etc?  Feel free to drop a comment, below.

Playing with more tabular data

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 Steinbring (@steinbring)
on CodePen.

Now, we have 200 records instead of just 10.  So far, we aren’t dealing with anything that we haven’t covered before, though.  Let’s see if we can add pagination, now.

See the Pen
Table Pagination – Example 2
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, we added a little “Page X of Y” control to the upper right-hand corner of the page and computed values of paginatedResults, numberOfResults, and lastPage to drive the thing.  There are also values for currentPage and resultsPerPage.  The problem is that if you can’t divide numberOfResults evenly by resultsPerPage, stuff breaks.  Also, if you filter your results, you will get a RangeError: Invalid array length error (because the number of results changes).

So, how do we fix it?  Let’s start by simplifying the example.

See the Pen
Table Pagination – Example 3
by Joe Steinbring (@steinbring)
on CodePen.

In this example, I removed the sorting and querying bits to make what’s going on a little more clear.  I then changed the resultsPerPage from 20 to 15.  With the same 200 results from the api, that makes the number of pages 13.333333.  If we wrap the formula in Math.ceil(), that should round the result up to 14, allowing you to properly show that final page of results.  It should also deal with that RangeError: Invalid array length error.

Let’s bring back in the sorting and querying, now.

See the Pen
Table Pagination – Example 4
by Joe Steinbring (@steinbring)
on CodePen.

Now that pagination is working, I need to find something else to better this table.  Have a suggestion?  Feel free to drop it in the comments, below.

 

[ Cover photo by Markus Spiske on Unsplash ]

Playing with 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 have a simple HTML table using tr:nth-child(even) {background-color: #AAC4FF;} to zebra stripe the rows.  It is readable but what if you want to add more municipalities or you want to update the numbers for the 2020 census?  We could put the data into a JavaScript array and use Vue to display it.

See the Pen
Table Zebra Striping – Example 2
by Joe Steinbring (@steinbring)
on CodePen.

You will notice that in addition to using Vue.js to display the data, I also changed the zebra striping to tbody tr:nth-child(odd) { background-color: #AAC4FF; }, so that odd columns are highlighted instead of even columns.  I added tbody before the CSS rule so that the header isn’t included, too.  So, let’s add sorting now that the data is in an array of structs.

See the Pen
Table Sorting
by Joe Steinbring (@steinbring)
on CodePen.

In the second demo, we bound the rows directly to the array.  In this new demo, we are binding to a computed value.  When you click on a column heading, it changes the value of the order and orderBy variables.  The sortedArray computed value then uses the array and order variables to figure out how to display the values to the page.  The next logical step is to add a search box for filtering the data.

See the Pen
Table Filtering
by Joe Steinbring (@steinbring)
on CodePen.

For the above demo, we are adding query and queryBy variables in addition to a queriedResults computed value.

Now, let’s look at a quick, less that useful option for zebra striping the data.

See the Pen
Table Zebra Striping – Example 3
by Joe Steinbring (@steinbring)
on CodePen.

Let me be clear that I do not recommend doing this.  The earlier examples are much better but this is something that can be done.  Since the data is available in JavaScript and we are using Vue.js for the app, we can use v-bind:class to zebra stripe the table.  All you need to do is modify the loop to expose the index of the array and do a modulo operation on the index value.  It is more complicated and a bit unnecessary but kind of neat.

Have a suggestion for where to go from here?

 

[ Cover photo by Mika Baumeister on Unsplash ]

Block vs inline vs inline-block

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
Block element example
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, there are 4 inner divs contained within 1 outer div.

So, what about inline?  According to w3schools, an inline element does not start on a new line and it only takes up as much width as necessary.

See the Pen
Inline element example
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, there are still 4 inner divs contained within 1 outer div but you’ll notice that it no longer fills 100% of the width.  Instead, it just uses the space that it needs for the content.

So, what about inline-block?  According to w3schools, compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.  Also, compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

See the Pen
Inline-block element example
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, the 4 inner divs still only fill the space that they need to fill but now you can see more of the outer div’s border and there is a right margin to the inner divs.

 

So, let’s try adding padding and margins to the three examples.

 

Block:

See the Pen
Block element example 2
by Joe Steinbring (@steinbring)
on CodePen.

 

Inline:

See the Pen
Inline element example 2
by Joe Steinbring (@steinbring)
on CodePen.

 

Inline-block:

See the Pen
Inline-block element example 2
by Joe Steinbring (@steinbring)
on CodePen.

 

So, to recap a bit …

 

Block elements:

  • Force a line break after the element
  • Is 100% width if it isn’t defined otherwise

Inline elements:

  • Allows elements to sit to their right and left
  • Does not respect widths and heights
  • Does respect right and left margins and padding but not top and bottom

Inline-block elements:

  • Allows elements to sit to their right and left
  • Does respect widths and heights
  • Does respect top and bottom margins and padding

 

Have a question, comment, etc?  Feel free to drop a comment, below.

 

[ Cover photo by William Warby 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 ]