Monthly Archives: July 2014

matchMedia

For the longest time, I used window.innerWidth() to check the width of the browser, so I could show or hide something, and enable or disable something. That was until earlier this year when I realised JavaScript had a proper way to do this.

Enter matchMedia.

Can I Use says support is in all modern browsers, except IE9 and below, which you should have already stopped supporting.

This chunk of code below, tests for matchMedia support, and adds listeners for changes. In this case, is listens for when the width of the window.

// If you support IE10 and up, this if conditional isn't needed. 
if (matchMedia) {
    var mq_min_800 = window.matchMedia("(min-width: 800px)");
    mq_min_800.addListener(image_grid);
    image_grid(mq_min_800);

    var mq_min_600 = window.matchMedia("(min-width: 600px)");
    mq_min_600.addListener(image_sizes);
    image_sizes(mq_min_600);
}

Below, is the functions called when the match changes. It’s fairly self explanatory I hope?

function image_grid(mq) {
    if (mq.matches) {
        // Window is 800px or more
    } else {
        // Window is 799px or less
    }
}

function image_sizes(mq) {
    if (mq.matches) {
        // Window is 600px or more
    } else {
        // Window is 599px or less
    }
}

I believe the queries it can listen for are the same as CSS media queries, so there’s plenty of uses here. But, I would use Modernizr to test for features and environments, but matchMedia for dimensions like I have above.

Equal Height Boxes with Flexbox

For the uninitiated, flexbox can be used pretty much everywhere these days. That is assuming you’ve stopped supporting IE9 and below. (#protip You should stop). Can I Use shows just how well supported it is.

When I was freelancing, one thing I’d need to do quite often is make equal height boxes, that fit into and conform to a grid nicely. I used to use JavaScript for this, but using JS for layout sucks more balls than [insert last weeks celebrity].

This is where flexbox comes in. Yes, you could use tables, but they suck too.

Flexbox is made for situations like this. Take a look at the example below. The code is exactly what I use for the Projects page here, but I have omitted the many prefixed properties for brevity.

See the example on Codepen.

Git Tips #1

Earlier today I tweeted how to preview a Git pull request. It got a few retweets and favourites quite quickly, so I thought I’d share a few other tricks, as well as the one I tweeted.

Some are basic tips, but ones that I spent a while finding and learning, and some are tips I have learnt from the awesome team I work with . If your Git-fu is amazing, you can probably skip them.

Set Upstream

‘Upstream’ is the term we use for the original repo. ‘Origin’ is the version of the repo that you have after forking. ‘Upstream’ is the repo that you forked in the first place.

Once set, you can use ‘upstream’ instead of a URL. You’ll need this set for each repo for a lot of the below tips to work.

git remote add upstream https://github.com/origin-owner/original-repo.git

Preview a Pull Request

Let’s say you want to locally run a pull request to see how it works, before you merge it. How do you do that without forking their repo and running that? This, is how you do it.

# Step 1
git fetch [email protected]:acount/the-repo.git refs/pull/123/head
# Or
git fetch upstream refs/pull/4/head

# Step 2. Yes, 'FETCH_HEAD', verbatim
git checkout FETCH_HEAD

Create & Delete a Tag

Tagging code is a good way to say “Okay, that’s feature X done, let’s tag it so people can download or run it from this point back”. It’s exactly what we do with Ghost and Ghost-UI, though releases of Ghost-UI happen much more often to give contributors styles to work with.

Create

git tag -a 1.2.3
git push --tags

Delete Tag

Locally

git tag -d 1.2.3

Remotely

git tag -d 1.2.3
git push origin :refs/tags/1.2.3

Rename Branch

There’s many reasons why you’ll want to rename a branch. You can rename another branch or the currently checked out branch.

#protip: Think of -m as move.

From any branch

git branch -m  

From current branch

git branch -m 

Interactive Rebase

This is how you merge commits together. If you ever contribute to Ghost, you’ll need this one.
Everyone likes a clean commit history.

# 8 is the number of commits to merge, so the 8 newest commits, from any author
git rebase -i HEAD~8

Cherry-Pick

Lets say you want to pick a few select commits from one branch to the other, cherry-pick is your friend.

For this to work, you need to be on a different branch to the one your picking commits from. You can either use the first 10 characters from a commit hash, or the full 40 characters.

git cherry-pick a1b2c3d4e5

Reset to upstream

Let’s say you’re totally fucked. Like, no one has any clue. You haven’t done much work that would be disastrous to loose. Reset to upstream!

Use this with caution. You could loose days of work.

git fetch upstream
git reset --hard upstream/master

Well, there’s enough tips for today. Do drop me a tweet if you see any seriousl flaws with these tips. 🙂