On Working Late

Today in ‘people telling you what you should probably already know’, working late is a terrible idea and you should never do it. Unless you have to, in which case: you have to.

via Versioning #222


Three Things Almost No One Gets Right About CSS

If there’s a lesson I learn over and over in web development, it’s this: Never stop learning.


I ran across an eye-grabbing headline — “3 Things (Almost) No One Knows About CSS” — in the April 17th edition of Versioning1. The author writes about a free CSS test that’s been online for about 6 months and observes…

“…plenty of practicing developers don’t know CSS as well as they think. Out of over 3,000 people who have taken the test so far, the average score was just 55%.”

SitTheTest: CSS

Before I read much further, his mention of the test made me wonder how well I’d done when I took it last fall. So, I jumped over to the site, logged in, and discovered I’d only taken the HTML test2. The CSS test had been untouched. #memoryfail

It was either the coffee I was drinking this morning, or I physically felt the pride in me swell. In fact, I’m pretty sure my pride got up from wherever it was lounging, turned to my intelligence and said, “Hold my beer.”

The Test

After lunch today, I decided to take the CSS practice test. It touched on some areas I haven’t dealt with much. I tried to mentally fight through some of the more difficult questions, but since it was a practice test, I gave myself permission to go try a couple things in CodePen. Even with that affordance, I ended up earning an 80%. I learning a few things in the process. Not bad, but definitely wasn’t feeling as confident as I did while taking the HTML test.

I then figured, well… while that was humbling, I’ve now got my CSS knuckles cracked as it were. Let’s do this!

The questions for the real test were along the same lines, but they were different enough to make it just as hard the second time around. At around question 7 or 8, I realized that taking this test ~30 minutes after eatling lunch was probably a really bad idea. By realized, I mean that I actually caught myself falling asleep. I got up, walked a lap around the building to get my blood moving and sat back down to push through the rest of the test.


My SitTheTest CSS results - 80%

Turns out, the 3 things mentioned in the article were a doozy for me, too. Along w/ a couple more (they indicate which ones you got wrong for the practice test; but they don’t reveal it when you take the real test).

.feeling {
    d'oh: 100%;


All this thinking about CSS reminded me of this old gem:

I guess I can only claim to “do that CSS up right” 80% of the time? 😉

  1. If you do anything related to webdev, go subscribe to this newsletter. It’s totally worth the time it takes to read each morning. 
  2. 92%, baby! 

Inspiration – Chris Coyier

Wow! I saw this link go by on Twitter this morning before I was headed to work and made a mental note to take a peek during my lunch break. I’m so glad I did.

Chris Coyier is someone I’ve been following around the internet for several years. His CSS-Tricks site, and CodePen tool have been extremely valuable to me over the years and the ShopTalk Show podcast he hosts with Dave Rupert is one of the few I’ve remained subscribed to for any length of time.

In Envato’s latest “Made By:” episode, we feature web designer and author Chris Coyier, best known for CSS-Tricks, CodePen and the Shop Talk Show podcast. Now living in Milwaukee, Wisconsin, Chris gives us a unique look into his life.

It’s so cool to get to peek into the day-to-day life of someone I have a ton of respect for.

Nice work, Chris & Envato!


Top 10 Brackets Extensions

Turns out I’m a fickle developer that wastes some time every now and then jumping back and forth between Sublime Text and Brackets. I’ve been on a Brackets kick for the last couple weeks and figured I’d make note of my favorite extensions.

Brackets is an ever-evolving, freely available, open source, cross-platform editor being developed and maintained by Adobe + a community contributors. It launched with some great features a while back and is maturing at at great pace.

Top 10 Brackets Extensions

  1. Emmet — extremely fast html & css shorthand/generation
  2. Brackets Git — Truly excellent Git integration
  3. Search with Google
  4. Markdown Preview
  5. Brackets Icons
  6. TODO — Manage Todo items and Notes within your projects.
  7. Alice — Interact with GitHub Issues from within Brackets
  8. JSHint
  9. PHP Syntax Hint
  10. Handlebars Syntax Highlighter

Developer’s Toolbox: Brackets

Recently, over at Learnable, @lcatdesigns put together a 10-minute video of her favorite parts of Brackets. It’s worth a watch if you’re new to Brackets.

Honorable Mention

This one is more of a novelty, but quite cool. Brackets-Wakatime allows you to automatically track what you spend time on within Brackets (or in several other editors, really). Pretty slick.


New Host

I’m excited to be moving this site (and the wife’s) to a new host later this week. I’ve been relying on them for about a year for a work project and I’ve been really impressed with features, user community, and especially the price. Spun up a new droplet (virtual server) this evening.

Five. bucks. a month.

Digital Ocean, here we come!


GuestAdditions and Subtraction

Like many WordPress developers lately my day starts and ends with Varying Vagrant Vagrants. VVV’s really worth a look if you’re still working with MAMP, WAMP, XXAMP, or something similar. Truth.

Sidenote: vvv-site-wizard

Alison Barrett‘s vvv-site-wizard tool is the hotness. And despite what was preached at our local WP meetup… It does work on Windows.

Problem 1: guest additions do not match!

VVV relies on VirtualBox and Vagrant. I encountered some trouble w/ a sub-part of the puzzle this afternoon and I figured I’d share my adventure. Over the last couple days, I’d been noticing this fly by in the console during my morning vagrant up

do not match

Me: “Crap. Maybe I should think about updating that… I guess.”

Thankfully, there’s a plugin for that – vagrant-vbguest!

Solution 1: update guestadditions w/ vagrant-vbguest plugin

Whee! Success!

GuestAdditions 4.3.10 running --- OK.



Problem 2: now folders don’t mount

My VirtualBox GuestAdditions were successfully updated to 4.3.10. Unfortunately, there’s a known bug in that version that prevents mounting shared folders (Note: this will be fixed in 4.3.11). Subtraction. It’s what I literally uttered as an expletive this afternoon. Had I run across the vagrant-vbguest Issue before installing, I would have waited.

At this point, now my vvv environment wouldn’t fully load w/ a vagrant up.

Solution 2: a new symlink!

Thankfully, the fix for this subtraction was found in that GitHub issue I linked above. Felix Rabeprovided (and cited) a solution that worked perfectly for me.

vagrant ssh

In my case, it was opening a PuTTY session to the vagrant box.

sudo ln -s /opt/VBoxGuestAdditions-4.3.10/lib/VBoxGuestAdditions /usr/lib/VBoxGuestAdditions

Then, outside the VM:

vagrant reload

For me, it reloaded successfully, but my dev sites weren’t functioning (MySQL failures) until I ran:

vagrant provision

I was back up and running!


Discovered a problem that wasn’t really affecting me. Decided to fix it; caused major breakage – halting my work day.


RWD Summit 2014

Thanks to my employer, I was able to spend the last three days furiously scrawling notes at hole while attending the Responsive Web Design Summit put on by Environments for Humans.

What an incredible event! #RWDSummit


I knew I’d be learning a ton over those three days as I’ve only really dabbled in RWD up to this point. What I didn’t expect: the session about Email to ROCK! I’ve struggled w/ getting emails to look right in various email clients in the past, and at this point, the thought of Outlook still using Word as it’s HTML rendering engine makes me want to vomit. Justine Jordan opened with really positive and surprisingly contagious attitude about the task. For me, she renewed the importance of focusing on well-crafted emails and for my users and offered up some really useful tips and techniques. Let’s just say I’m looking forward to re-watching this session when they release the videos.

Other Highlights

Brad Frost’s Atomic Design talk coupled with Dave Olsen’s Pattern Lab elaboration the next morning. Brilliant.

Perhaps due to inconsistent bandwidth capabilities of different presenters, audio drops, and video freezes were strangely common for the sessions. Pausing the screen was an approach usually taken to resolve the issue. Dave Rupert’s purposeful freeze frame was a hoot to stare at for the rest of his talk!

OMGLOL! New (to me) placeholder image service: NiceNiceJPG

And not to sound like a Rupert fanboy, but when he gets his “View the Source, Luke!” shirt printed, I’ll be first in line to pick it up.


Sync Sublime Text 3 Preferences Cross-Platform

I bounce between Windows and Mac on a daily basis. Thankfully, Sublime Text 3 is available on both platforms. Here’s where I get into trouble… I’ll run across a plugin/package that I install for ST3 on my Windows machine and forget to install it on my Mac next time I’m using it… and vice versa. It’s been terribly momentum-halting to reach for a command or tool that’s not present on one machine because I’d forgotten to also install it there. There has to be a way to sync my ST3 settings using Dropbox, Google Drive, or something similar, right?

Huzzah! There’s a way! | Update: And now an even better way! Sublimall!

You should be able to adapt the instructions below for a sync tool of your choice. I’ll be using Dropbox because… well, I like to Keep Calm and Dropbox.

Step 1: Choose which ST3 environment you’ll copy

At this point, you’re Goldilocks staring at a couple different beds. You’ll want to start w/ the machine that has ST3 in the ‘best’ state to copy settings from. Make sure it has all your desired plugins installed and your User Preferences set just right.

Step 2: Prep the First Machine

IMPORTANT! – First, quit ST3.

First Mac

Open Terminal and run the following commands.

cd ~/Library/Application Support/Sublime Text 3/Packages/
mkdir ~/Dropbox/ST3
mv User ~/Dropbox/ST3/
ln -s ~/Dropbox/ST3/User

First Windows

Open PowerShell as Admin and run the following commands.

cd "$env:appdataSublime Text 3Packages"
mkdir $env:userprofileDropboxST3
mv User $env:userprofileDropboxST3
cmd /c mklink /D User $env:userprofileDropboxST3User

Note: This has only been tested on Windows 7 with Dropbox in the default install location.

Step 3: Config the Second Machine

IMPORTANT! Make sure ST3 isn’t running.This is going to delete your current User directory – but don’t panic, you just moved it to Dropbox in the previous step.

Second Mac

cd ~/Library/Application Support/Sublime Text 3/Packages/
rm -r User
ln -s ~/Dropbox/ST3/User

Second Windows

cd "$env:appdataSublime Text 3Packages"
rmdir -recurse User
cmd /c mklink /D User $env:userprofileDropboxST3User

Step 4: Test!

  1. Open Sublime Text 3 again from your Master computer. It should open without error.
  2. Make a change to your User Prefs – maybe font-size or something easy.
  3. Save and close ST3.
  4. Open ST3 on your other machine… your new setting should be in place!
  5. Take a victory lap around your office!


Or skip all the above headache and use Sublimall.

Sublimall is a server and a Sublime Text 3 plugin. It can create a compressed & encrypted archive of your ST3 config and send it to the server. As of now, the server is operated by the developer. He’s mentioned that he’s planning to open source the server code soon so you’d be able to host your own.

Once installed, you can open the command pallette and choose Sublimall Upload to backup your config and send it to the server. Sublimall Retrieve will then pull a config down on any other computer you use.


We Dev in Exciting Times!

I ran across a really exciting post from Dudley Storey this morning that walks through what may come to web developers – at least the CSS side of things – in the next year.

Of the features/items he covers, I am really looking forward:

  • CSS blend modes
  • CSS Shapes, Regions, and Exclusions layout lust!
  • Flexbox
  • Macaw Please make a Windows version?
  • and the potential for a real adaptive images solution

Bring it, 2014!


My Sublime Text 3 User Prefs

I’m mostly posting this as a reminder to myself that I have my config backed up somewhere. 😉

That being said, I’ve found other folks’ Sublime Text 3 preferences really interesting. So, for bits and giggles… here’s mine: