Grab Bag - Flexbox Somersaults and Debounce vs Throttle and Photoshop Batch Edit

May 24, 2020

So many things I’ve learned while working on a project!

Flexbox doesn’t have justify-self

You can align items any way you want to as a group, but you can’t control them individually on the justify axis, in the same way you can the align axis. For example, I had a column of 5 items and wanted the first 4 to be at the top together (justify-content: flex-start;), but with the 5th at the bottom. With the default flex properties, the only way to get the 5th to the bottom is to set justify-content: space-between;, but then the 2nd-4th items have too much space between them.

The solution is a simple if not convoluted fix:

.container { 
  flex-direction: column; 
  justify-content: flex-start;
} 
.last-item { 
  margin-top: auto;
}

I’m sure there’s (probably?) a good reason why justify-self doesn’t exist….

Throttling vs. Debouncing in Vue

I learned about debouncing a little while ago while learning React, and came across this video which discusses how it applies in Vue. It also compares it against another lodash method, throttle…each can be used for different reasons. Debounce will wait until the interaction is completed before firing the event, while throttle will keep firing the event during the interaction, but at a set interval.

This page also shows a visual demonstration…very cool and useful to understand!

JavaScript Progress Bar!

I added a progress bar to my blog! It shows you how far you have progressed in the content as you scroll down the page. This great article explained a way to do it using the <progress> HTML element, contrary to using a <div> as you see in many tutorials even though there is a semantic element available for this!

I did have to make some tweaks:

  • Because my progress bar is attached to an existing element rather than the top of the page, mine got position: fixed; instead of position: sticky; top: 0;.

  • I want the progress bar to feel natural, so it couldn’t be strictly based on when the post enters & leaves the viewport. To fix this I set the maximum value to 80 instead of 100 so that it looks like it’s 100% full when you’re nearing the bottom of the post with your eyes.

  • Because mine is attached to a fixed element (the nav above it) which changes in size depending on the size of the window (thanks to my subtly fluid font sizing), I had to do some tricky nudging of the top margin, which looks like horrible code! Done again, I’d try to find a way to improve this:

    @media (min-width: 690px) {
      progress {
        margin-top: 29px;
      }
    }

    @media (min-width: 950px) {
      progress {
        margin-top: 30px;
      }
    }

    @media (min-width: 1200px) {
      progress {
        margin-top: 31px;
      }
    }

    @media (min-width: 1600px) {
      progress {
        margin-top: 32px;
      }
    }

  • Lastly, there’s probably some improvement to be had with the progress calculation…it’s still not quite right when posts are either really short or really long. But since my posts are almost always perfectly in the middle of length perfection (😂) I left it for now.

Really Cool CSS Image Background

I just want to make sure not to forget where to find this video from Brad Traversy showing a pretty cool layout using CSS grid and background images. I didn’t know about the CSS property background-attachment: fixed; which makes a background image span across multiple items. It looks really cool!

Accessing Hexo Categories

I wanted to access the categories of a post in a Hexo blog, but they weren’t showing up. This is something others have also faced. I didn’t end up using this, but here is a code snippet that I got to work, accessing the categories with a workaround:

<% const categories = Array.from(post.categories.data.map(doc => doc.name)) %>
  <% if (categories.includes('code')) { %>
  <h4><%- partial('../svg/code') %></h4>
<% } %>
<% if (categories.includes('travel')) { %>
  <h4><%- partial('../svg/travel') %></h4>
<% } %>

Photoshop Batch Edit FTW

I learned how to batch edit folders full of images using Photoshop actions!! This is amazing because I am updating a bunch of photo files to be jpgs, as for some reason I thought it was a good idea to deliver only .png images on the previous version of my website.

I’m also using Cloudinary to serve them all…will write more about that later, as it’s awesome.

Great tutorial and pen.

Tags icon Stacked price tag looking things Tags: