Josh Betz

Engineer, Automattician, Wisconsin Badger

Lossy Compression with Photon

Photon, the image service hosted by Automattic, does lossless compression automatically. Page Speed will probably still complain that images aren’t compressed enough. Luckily, Photon has a way to fix that.

There are a couple of parameters, quality and strip, that will further reduce the file size of JPEG images. Quality is pretty straight forward. The strip parameter will let you strip EXIF and color data. I use a snippet like this to set the quality to 80% on my site.

https://gist.github.com/joshbetz/9399b50dc4d47e774bd4

The results can be pretty dramatic. At full size, this image of downtown Madison goes from 16MB to 2.7MB by setting the quality to 80%. That’s a big deal on a mobile connection and it’s pretty hard to spot the difference on most images unless you’re looking at them side by side.

Madison

#postyourprompt

 Let’s have a little fun on a Friday. What’s the command prompt on your local machine?

via Ryan

I use Zsh, so I also have a right prompt. Most of this is pretty obvious, but I’ll explain some of the cooler things that might not be.

  • dashboard is the current branch I’m on in a git repository
  • fda1011 are the first 7 characters of the hash of the current commit
  • The X means there are uncommitted changes
  • The arrow is green when the return code of the last command was 0 and red otherwise
  • cd automatically calls ls as well

It’s all available on Github.

Git essentials for SVN users

Coming from Subversion, the extra steps involved in working with a Git repository can be confusing. Here are some basic concepts and commands to get started with Git.

I find that actually doing something is the best way for me to understand. If you’re the same way, the Github tutorial by Code School is great.

Concepts

There are a couple conceptual differences between Git and Subversion that it helps to understand before getting started.

Centralized vs Distributed

Subversion is centralized version control — every commit lives on a central server. Git is distributed version control — everybody has a copy of the repository. When you commit to subversion, the push to the central server is implicit. The commit and push are discrete actions in Git. This means you can do work and commit changes without necessarily being connected to the Git server. Another advantage is the ability to make commits locally without necessarily publishing your work.

File vs Change-based version control

Subversion is file-based — when you make changes and run svn commit, it commits all the changed files by default. Git is changed-based — when you make changes, you have to run git add to “stage” changes. You can get similar behavior to Subversion with git commit -a. The “a” flag tells Git to add all changes in tracked files.

Commands

  • init – Create a new repository.
  • clone – Set up a repository that already exists on a remote server.
  • add – Stage changes to be committed.
  • commit – Add changes to the local repository.
  • push – Push unsynced commits to a remote repository.
  • pull – Pull unsycned commits from a remote repository.

Basic Workflow

  1. Get the latest version of the code. If you already have the repository, you can use git pull to get the latest changes. Otherwise, git clone will download the code from a remote repository and set it up locally. If this is a new repository, you can set it up with git init.

  2. Make changes.

  3. Share your changes. git add <file>; git commit; git push or git commit -a; git push.

git-bisect

git-bisect – Binary search the history to find a bug.

Listless Nav Menu in WordPress

Chris Coyier recently posted an article about using lists in navgiation on CSS Tricks. I tend to agree that they’re unnecessary. The first time I built a menu with a nav wrapping a ul wrapping a bunch of li‘s wrapping a bunch of a‘s it felt gross, but I did it because I thought that was easier for screen readers to understand.

I just redesigned my site and decided that I wanted a simpler structure for my menu this time. Since WordPress builds menus in lists, I created a custom walker class for wp_nav_menu that formats the menu the way I want.

https://gist.github.com/4688292

That looks like a lot. It’s mostly just a copy of the Walker_Nav_Menu class with a few things changed:

  • Change the default container to ”
  • Change the default wrapping element to nav instead of ul
  • Disable a fallback1
  • Change the sub-menu element to div instead of ul
  • Remove the li wrapping each link
  • Put the id and class‘s that would normally go on the li on the a instead.

Of course, you have to tell your nav menu to use this walker. Since this disables the fallback if you don’t have a menu set, you’ll have to specify a menu.


  1. Unfortunately the fallbacks generally aren’t compatible with custom walkers — at least not the same custom walker that can be used for wp_nav_menu