Snippets

These snippets are my attempt to save and organize various bits of code, best practices, and resources relating to web development and design. They also function as a to do list of sorts, for things I want to implement in my own code, but haven't yet. The concept is inspired by Jeremy Keith's links and CSS-Tricks, among other things. Enjoy.

Git: insert a new commit between two past commits

I recently had to commit a bunch of stuff I’d been working on in a logical sequence, but forgot to include a crucial bit of code until I’d already done a bunch of the commits. I didn’t want to have to redo all of them just to add the missing code, but I also didn’t want to end up with a commit sequence that wouldn’t work if checked out at a point before the missing code. This is where Git saved my ass. While I use TortoiseGit rather than the commandline, the concepts are the same:

Turns out to be quite simple, the answer found here. Suppose you’re on a branch branch. Perform these steps:

  • create a temporary branch from the commit after you want to insert the new commit (in this case commit A):

    git checkout -b temp A
    
  • perform the changes and commit them, creating a the commit, let’s call it N:

    git commit -a -m "Message"
    

    (or git add followed by git commit)

  • rebase the commits you want to have after the new commit (in this case commits B and C) onto the new commit:

    git rebase temp branch
    

(possibly you need to use -p to preserve merges, if there were any - thanks to a no longer existing comment by ciekawy)

  • delete the temporary branch:

    git branch -d temp
    

After this, the history looks as follows:

A -- N -- B -- C

It is of course possible that some conflicts will appear while rebasing.

In case your branch is not local-only this will introduce rewriting history, so might cause serious problems.

The self-fulfilling prophecy of poor mobile performance

There are plenty of stories floating around about how some organization improved performance and suddenly saw an influx of traffic from places they hadn’t expected. This is why. We build an experience that is completely [unusable] for them, and is completely invisible to our data. We create, what Kat Holmes calls, a “mismatch”. So we look at the data and think, “Well, we don’t get any of those low-end Android devices so I guess we don’t have to worry about that.” A self-fulfilling prophecy.

I’m a big advocate for ensuring you have robust performance monitoring in place. But just as important as analyzing what’s in the data, is considering what’s not in the data, and why that might be.

Balancing on a Pivot with Flexbox

A two dimensional series of words, laid out in intersecting boxes like in a crossword puzzle.

Let me show you a way I recently discovered to center a bunch of elements around what I call the pivot. I promise you that funky HTML is out of the question and you won’t need to know any bleeding-edge CSS to get the job done.

[…]

[H]ere’s a sample of the HTML that drives this puzzle:

Code language: HTML

<div class="puzzle">
  <div class="word">
    <span class="letter">i</span>
    <span class="letter">n</span>
    <span class="letter">d</span>
    <span class="letter">i</span>
    <span class="letter pivot">g</span>
    <span class="letter">o</span>
  </div>
  <!-- MORE WORDS -->
</div>

Here’s a generalized version of the [styles]. As you can see, it’s just 15 lines of simple CSS:

Code language: CSS

.puzzle .word {
  display: flex;
}
.puzzle .word .letter:last-child {
  margin-right: auto;
}
.puzzle .word .letter {
  order: 2;
  position: relative;
  right: 50%;
}
.puzzle .word .pivot,
.puzzle .word .pivot ~ .letter {
  order: 1;
  left: 50%;
}

doiuse...?

Can I use… is an invaluable resource that we all (hopefully) use on a regular basis, but what if you have an existing codebase that you want to evaluate for browser support? You could go through it manually, but that could be a lot of work. Thankfully, someone has put together an app and a Node.js module that can crawl your CSS and list what will break in what browser.

Clearleft is now owned by an employee ownership trust

Despite being one of the three founders, I was never an owner of Clearleft.

[…]

But now, after fifteen years, I am also an owner of Clearleft.

So is Trys. And Cassie. And Benjamin. And everyone else at Clearleft.

Clearleft is now owned by an employee ownership trust. This isn’t like owning shares in a company—a common Silicon Valley honeypot. This is literally owning the company. Shares are transferable—this isn’t. As long as I’m an employee at Clearleft, I’m a part owner.

On a day-to-day basis, none of this makes much difference. Everyone continues to do great work, the same as before. The difference is in what happens to any profit produced as a result of that work. The owners decide what to do with that profit. The owners are us.

In most companies you’ve got a tension between a board representing the stakeholders and a union representing the workers. In the case of an employee ownership trust, the interests are one and the same. The stakeholders are the workers.