Book Review: Scalable and Modular Architecture for CSS (SMACSS)

no comments

It’s been a long time since I read a book from cover-to-cover in one sitting, but today I set out to read Jonathan Snook’s Scalable and Modular Architecture for CSS (SMACSS), which was so short and readable that it might be difficult to not finish in one go.

Also, it also means a long review would be pointless.

Snook’s book is remarkably easy to understand1 and read.  His advice is pragmatic rather than dogmatic, reflecting a balance between considerations of front-end speed, code maintainability, and logical separation of concerns.

The number of major insights in the book for me were few, but important:

  1. A logical division of CSS code into 4-5 parts, with sub-parts (Base, Layout, Module, State, Theme) – Snook’s division seems a bit arbitrary, but it’s practical.  There are only three zones here of logical categorical separation that I recognize, but Snook’s division seems to better reflect how the DOM is typically set up, so I applaud him for that.  Plus, coming up with a good categorical separation for CSS has always been an exercise in frustration for me, as someone who’s used to more easily doing it with packages, modules, classes.  Thankfully, he’s done the work for me.
  2. A class-heavy model for CSS organization – I’ve known for a while that it’s better for performance reasons to use CSS selectors (preferably ID’s and classes) which match on leaf nodes, but I get flashbacks of the early days of class proliferation ad nauseum when I think about implementing that on large sites.  More importantly, Snook shows that you can still have standards of organization when using more specific classes, by making fake module compositions using naming conventions.
  3. Some moderating advice for CSS preprocessor users – I love SASS.  LOVE it.  Variables, inheritance, composition, functions — they make sense and they save time.  Unfortunately, as Snook points out, I probably often over use the fun features of SASS.  Preprocessors can be used for good and for evil and the book points out some of the frequent overuses of SASS / LESS / Stylus.

Snook is careful not to push too much of his system on the reader, so there are very few recommendations which don’t come with a caveat.  I dig that.  Unfortunately, it leaves me with little to complain about, so I’ll just mention things I wanted to see in the book that weren’t there (perhaps topics for a sequel).  What was missing?

  1. SMACSS with major style frameworks (e.g. Bootstrap) or front-end libraries – there are a few examples with Bootstrap in SMACSS, but I get the feeling that going whole-hog SMACSS will present an increasing number of problems.  Because the SMACSS methodology relies on lowering the specificity of rules, my CSS rules seem more likely to be overridden by those of included tools.  I would have liked to see some more strategies for dealing with this.
  2. SMACSS with web components (HTML5 Templates) – this is probably unfair of me to ask for given the publishing date, but I’m curious about how Web Components will alter the scene for selectors and code organization.  SMACSS does include examples for working with Mustache, which is a good start, but there are additional isolation rules coming (or here, in the case of Chrome & Firefox) to browsers with this support.
  3. CSS static analysis tools or techniques – I’d particularly like to see tools for encouraging or enforcing SMACSS-like behaviors.  Unfortunately, my experience is that people are unlikely to keep their patterns neat unless there is some means of enforcement.

All-in-all, the read-time and cost of the book were well worth it for me.  Pick up a copy, or read most of it online.

  1. I’ve been mired in CSS for a long time, but I wouldn’t consider CSS / front-end to be my area of expertise

Hacking in-browser tests for third-party software upgrades

no comments

Iterate BlogOver the years, I’ve done far too much cleanup after broken third-party software upgrades, including breaks on web applications that affected clients.

With a little bit of effort, I recently experimented with abusing Selenium to find and correct problems in advance of an upgrade.  I discovered a few tricks, and my write-up can be found on Blend Interactive’s Iterate Blog.


Check out Preventing Upgrade Headaches with Selenium Webdriver   if you’re into that sort of thing…






Clearing browser DNS caches for Firefox and Chrome

no comments

In both development and ops, I have a lot of reasons that a cached DNS entry might be a problem–moving a site between servers, setting up a local environment, etc.

Given the aggressiveness of browser caches these days, restarting nscd or HUP’ing mDNSResponder doesn’t always do the trick, because browsers like Chrome and Firefox have a sticky DNS cache, too. On the plus side, these caches are easy to clear. On Firefox, Ctrl + Shift + Del will open the Clear History dialog. Check the Cache and Browsing & Download History checkboxes only, and make sure the “Forever” dropdown at the top is chosen before you clear. A much more fun option, however, is to use the DNS Cache extension, which will allow you to selectively clear or even disable the DNS caching in the browser entirely. Incidentally, the ShowIP extension is a wonderful way to tell which IP address (and host, DNS information, and more) is used by a given site at a glance.

Chrome’s story is a bit different, but also fun. Open the chrome://net-internals/#dns in Chrome. Chrome will actually show you the list of what’s in the cache and its status. To clear it, use the “Clear host cache” button partway down the page. Thanks to StackOverflow for finding me that trick.

resolving MySQL ‘Access denied for user’ error for root on AWS RDS

no comments

Sometimes, I need another admin-level user for my MySQL databases. In fact, I usually like to replace the ‘root’ user with another full-permissions user, for slightly improved security.

Usually, I’d start this off like so:

I was surprised to find that running this command with the root user on Amazon’s RDS instance of MySQL fails with the following message:
ERROR 1045 (28000): Access denied for user 'root'@'%' (using password: YES)

I was pretty miffed about this. As `root`, I should be able to grant whatever I want! After banging on the keyboard in frustration for a while, I tried this slight variation, out of sheer blind desperation:
(note the substitution of the mysql `%` wildcard for the globbing star ‘*’.

Voila! It worked!

Curious, I found this blog post about it. It looks like the RDS user is restricted by default, without the SUPER privilege. Because of this, root cannot grant privileges on the system tables. MySQL does allow the use of ‘%’ or “_” as wildcards for the database, which will allow GRANT on all of the user-created databases and tables. In my case, that was good enough, but if you need SUPER, there is still an abstruse way to get it on RDS.

fix digital optical (SPDIF) output in Ubuntu Raring Ringtail


I recently upgraded my HTPC from Ubuntu 12.04 to 13.04, and I was a bit miffed to find digital optical (which I use to send to my home speakers) was no longer working.
I search around without much luck, finding solutions that involved driver tweaks and such. In my case, none of that applied, as my Intel sound device was correctly detected and working in every other way. Ubuntu’s sound controls even showed the optical S/PDIF as present, and unmuted.

Eventually, I stumbled across this bug:

It turns out, all you need to do is start up alsamixer:

Then unmute S/PDIF 1 (arrow over to select it, then hit the ‘m’ key. You should see the ‘mm’ at the bottom replaced by ’00’).

It looks like the default for this channel on Intel devices was set to muted in recent versions of Ubuntu, probably because so few people use it and were scared by a little red light coming out of their machines. Unfortunately, the alsamixer mute isn’t exposed by the Pulse Audio sound controls in Ubuntu, so you’ve got to re-enable it this way for now.

don’t let the regex slash get you down

no comments

This is quick, but important for anyone who has to deal with regular expressions occasionally.

Sometimes I see regular expression search-and-replace lines that look like this, often from developers I consider far more advanced than me.


Remember: in nearly all regex implementations, you can swap out the slash for any one-character keyword.  If you’re working with URLs and file paths, this is a must if you want to avoid too much slash escaping.

Compare this to the previous expression:


Much more readable!  Whichever character you choose (I like # because I rarely use it, but : is an easy-to-type option), just place it right after the ‘s’.  Use the same character between the expression search and result, and at the end if you’re adding optional flags.  This works in most programming & scripting languages, and tools like sed.

Open files from the command line in PHPStorm

1 comment

I’m a big terminal fan, and I’m also a PHP developer.  Last month, I switched from Netbeans to PHPStorm for a full-fledged PHP IDE1.  Often, I’m in the terminal, and find it natural to open a file in PHPStorm from there.  Awkwardly, you need to use the full path of the file to do this.  That means, if I’m in /var/www/some_client/some_site/htdocs/resources/web/ I have to type this command just to open index.php in that directory:

phpstorm /var/www/some_client/some_site/htdocs/resources/web/index.php

Ugh. Far too much typing. I looked for a shell integration plugin, or a setting under File -> Settings, where PHP Storm crams thousands of options.2

It turns out, I was just looking in the wrong place. You have to set up this feature, but it’s dead simple. Open Tools -> Create Command-Line Launcher….

PHP Storm Command Line setup menu option

Next, pick a name for the executable and a path to place the shortcut in.  The name is the command you’ll type to run phpstorm from the terminal, so you can make it shorter for even less typing!  The path should be in your system shell’s $PATH variable; PHPStorm’s default is probably what you want if you don’t know what this means.

PHP Storm Command Line Config dialog

PHP Storm Command Line Config dialog

Hit OK to save.  If your user doesn’t have acces to that Path, you may be prompted to enter a password for the system root user.

Once you’re done, you can navigate into any directory and run your command to open files directly in PHP Storm.

pstorm somefile.php

Your life will be 30% better from now on.

  1. mostly on account of IdeaVIM’s excellent VIM emulation.  It’s not complete, but netbeans’ version is vastly inferior.
  2. For a while, I resorted to a slightly shorter workaround, typing “phpstorm `pwd`/index.php” in these situations… still too much typing

SDCC2012 Talk: Building Modern PHP Applications

no comments

I gave a talk over at South Dakota Code Camp 2012 this morning on building modern PHP applications.

I tried to cover some of the traditional problems, recent solutions, new features, and new tools in PHP. It’s an exciting time in the language, so there was a lot to squeeze in. I talked briefly about one of the best new PHP frameworks, Symfony2, and how it is utilizing new PHP features and culture to help improve applications.

Here are the slides; hopefully they’re still useful.

Please provide feedback if you saw the talk (not just the slides, some are more of a joke).

The talk covered a lot — probably too much.  Here some links to help you get the rest of the story on some of the many things we zoomed past:

  • For standards-nerds, don’t miss
  • Composer was one of the most awesome tools discussed.  You can find it at, and you can find a great repository of Composer packages at
  • We talked about Symfony.  You should visit to find out more about their great framework.  They’ve got excellent doc that will walk you through the things we raced through in the talk.
  • Also, every PHP developer should take a peek at PHPTheRightWay

downgrade PHP from 5.4 to 5.3 on ubuntu 12.10 quantal quetzal

1 comment

If you’re anything like me, you were looking forward to the release of ubuntu 12.10 (and PHP 5.4).

Perhaps you got so excited that you upgraded all your installations, only to find some of your php applications weren’t quite ready yet.  Bummer.

Luckily, you can downgrade PHP without downgrading Ubuntu.  Because PHP 5.3 is no longer in the ubuntu repositories for quantal quetzal, it’s a bit trickier.  Don’t worry, though, your friends on the ubuntu forums have made it easier.  Emil Terziev has adapted a script by Ruben Barkow to add the old php repositories, uninstall php and related tools, then reinstall the prior versions.

# Original for 5.3 by Ruben Barkow (rubo77)
# release 1 PHP5.4 to 5.3 by Emil Terziev ( foxy ) Bulgaria

# Originally Posted by Bachstelze
# OK, here's how to do the Apt magic to get PHP packages from the precise repositories:

echo "Am I root?  "
if [ "$(whoami &2>/dev/null)" != "root" ] && [ "$(id -un &2>/dev/null)" != "root" ] ; then
echo "  NO!

Error: You must be root to run this script.
sudo su
exit 1
echo "  OK";

#install aptitude before, if you don`t have it:
apt-get update
apt-get install aptitude
# or if you prefer apt-get use:
# alias aptitude='apt-get'

# finish all apt-problems:
aptitude update
aptitude -f install
#apt-get -f install

# remove all your existing PHP packages. You can list them with dpkg -l| grep php
PHPLIST=$(for i in $(dpkg -l | grep php|awk '{ print $2 }' ); do echo $i; done)
echo these pachets will be removed: $PHPLIST
# you need not to purge, if you have upgraded from precise:
aptitude remove $PHPLIST
# on a fresh install, you need purge:
# aptitude remove --purge $PHPLIST

#Create a file each in /etc/apt/preferences.d like this (call it for example /etc/apt/preferences.d/php5_2);
#Package: php5
#Pin: release a=precise
#Pin-Priority: 991
#The big problem is that wildcards don't work, so you will need one such stanza for each PHP package you want to pull from precise:

echo ''>/etc/apt/preferences.d/php5_3
for i in $PHPLIST ; do echo "Package: $i
Pin: release a=precise
Pin-Priority: 991
">>/etc/apt/preferences.d/php5_3; done

echo "# needed sources vor php5.3:
deb precise main restricted
deb-src precise main restricted

deb precise-updates main restricted
deb-src precise-updates main restricted

deb precise universe
deb-src precise universe
deb precise-updates universe
deb-src precise-updates universe

deb precise multiverse
deb-src precise multiverse
deb precise-updates multiverse
deb-src precise-updates multiverse
deb-src natty-backports main restricted universe multiverse

deb precise-security main restricted
deb-src precise-security main restricted
deb precise-security universe
deb-src precise-security universe
deb precise-security multiverse
deb-src precise-security multiverse

deb-src natty partner

deb precise main
deb-src precise main

deb precise-backports main restricted universe multiverse
deb-src precise-backports main restricted universe multiverse

deb precise partner
deb-src precise partner

" >> /etc/apt/sources.list.d/precise.list

aptitude update

apache2ctl restart

echo install new from precise:
aptitude -t precise install $PHPLIST

# at the end retry the modul libapache2-mod-php5 in case it didn't work the first time:
aptitude -t precise install libapache2-mod-php5

apache2ctl restart

Save the above code as or download the original file from this thread:

To run the script, open a terminal where you saved it, and run the following

chmod +x;
sudo ./

Keep in mind that this will uninstall your new version of PHP and restart the apache webserver. Enjoy your freshly old version of PHP, and upgrade your code so you can run PHP 5.4 as soon as possible!

better, simpler searching and scripting with bash globstar

no comments

Do you use bash 4.0 or newer?  (You probably do.  Type ‘bash –version’ in your terminal to find out).

If so, you could be living a better life.

Globstar is a feature not typically enabled, but present in bash 4+, and it allows you to do more easily select files in bash, using a double star **.

For example, if you want to every .text file, in all subdirectories, you no longer even need to use the find command.

ls **/*.text

The ** here will traverse any number of directories, not just the current directory.  Here’s another very useful, easy to remember example.  Ever want to find a line of text somewhere in a huge pile of files, but you know some part of the file name?  You can do a recursive grep to easily find it, without some abstruse find command.

grep -r needle **/*haystack*

To begin using globstar, you need to enable it.  It should be the default, if you ask me, but enabling is simple.  From the terminal, type:

shopt -s globstar

You’ll probably want to add that line to your ~/.bashrc file, too, so it’s enabled every time you open a terminal or login.

Happy Globbing!