These days it’s hard to represent all the moving parts of a webpage into a single PDF. We have animations, layout, state changes, and many other dynamic pieces on the page that are too easy looked over when approving a concept. The solution has been to spend more time on the wireframe process and ensure that the idea is built right into the browser to capture what is on the screen, but what is happening on the screen. Our hopes are that this extra time gives us the ability to stay on track with development, and not have one of those “Oh, I didn’t see x in the wireframe” moments.

These wireframes are often without aesthetic treatment so that the idea can be fleshed out before it’s decorated and polished. It is common that any layout or design will anticipate the need for images. At the wireframe stage it’s not likely these images are ready, so we put placeholders.

Placeholder images are easy enough for the designers who build things in photoshop, a grey box takes a few seconds. But what about for us, developers? There are services that are highlighted in this “Top 8 Placeholder Services” article, but they all rely on a physical images.

I can foresee a few problems with these services:

  1. They load from an online resource.
    We aren’t always connected to be able to pull these dynamically created assets
  2. The image is available offline as a physical asset, but requires setup and referencing a file in markup.
    I have to save the file, add it to the web directory, then jump back to my editor and reference the file in-line, track the physical file in source control, etc. Create a placeholder should be fast.
  3. We are left with pixel dimensions.
    We won’t always know how we want the image to fill the space, and often it won’t be confined to specific width and heigh pixels. Why get hung up on dimensions when you can just get something that symbolizes a placeholder, and represents what you do know about your layout (a width/height ratio, width/height percentages, etc).
  4. It’s an image.
    We don’t need an image, we need a placeholder that represents an image. Images bring with it baggage that we aren’t ready for, we can do more and still get the idea of the image.
  5. To address these issues I have come up with a side-project that I am calling, for lack of a better name, placeholder. You can check it out on github.

    In a nutshell this gives you the following ways to define placeholders:

    • SASS mixin
    • Javascript
    • Polymer Element

    Each of these methods give you multiple ways to define the way that the placeholder can take shape, including:

    • Width and Height
    • Width and ratio
    • Just a ratio

    Also, on top of creating these placeholders there are different styling helpers that can be applied to the containers to have the placeholder fit the visual language of your wireframes.

    The biggest benefits of doing it this way is that you are doing everything in code and it’s tracked in source control, it’s fast to bring in, it’s flexible in definition of the placeholder, and it can become part of the process that you and your team use to consistently create and use placeholders.

    I still have features I want to add, and features that need to be documented. If you feel like it’s a good idea give the project a ‘star’ on github, fork it, or just give it a try and give your feedback. I will continue to develop the idea further and smooth out any kinks.

    Thanks for taking a look!

On the go in 2014

It was my intention to have a 2014 resolutions post of various topics and progress I wanted to make for the year. Well, things move quickly and we’re already well into 2014 with lots happening, so I’m going to do a short look back instead.

In January 2013 I started with the guys at Hybrid Forge, here in Edmonton, Alberta. I started off as an E-Commerce Analyst, and ended the year as an E-Commerce Lead, specializing in setting up, theming and developing Magento. What a platform! Magento, based on the Zend Framework, builds upon many layers that can easily have your head spinning. As my start into the web as a profession Magento had no shortage of challenges. As time went on, I ended up working on other projects in the company, including some Drupal work. Outside of work, I was learning Symfony for a project, and also launched a few sites on Drupal. All the different ways these platforms accomplish similar goals gave me the foundation I needed to grasp the mechanisms used by larger codebases and frameworks.

About two months ago, I left Hybrid Forge to try and take the next step into the big world of web development. I was excited to see what else I could learn and accomplish. My friend Adam Braly, who works at Snapshot had a fun opportunity for me to go down to Southern Oregon to work on a website. The guys at Snapshot were great, and gave me a chance to practice my skills with a new team, and bounce ideas about development and process. The website was being built in wordpress and was my first time having seriously touched the platform. It was immediately apparent that there were some parallels between it and Drupal, although Drupal arguably with a more established foundation in the CMS space.

My 5 week Oregon adventure ended in Portland, which is neighboring the town my family lives in. Portland is an amazing and awesome city, which I love to visit. With it’s fun and laid back culture it was the perfect place for the Ember.js conference which I was able to attend. Back in August 2012, when I first decided to get back into web development, I wanted to play with a new idea and javascript seemed like the perfect candidate. I decided to dive into Ember.js making a basic app, getting a feel for how MVC could live in the browser, and how you could rely on data-binding to make your life much, much easier. The guys behind Ember, who also live in Portland, are big names and have contributed to some serious open source projects over the years. It was brilliant to see how far they and their team had come with Ember and where they plan to go. One of the best parts about attending the conference, which is the first tech conference I’ve been to, was to see how welcoming everybody was. It’s easy to feel like you know the least in the room, but it’s empowering when that isn’t what matters.

These past few months, and even through the past year, I have come to realize that everyone is always learning. As we learn, we develop, which is often consumed by others, causing them to learn and develop. It’s this gigantic ever-hungry feedback loop, accelerated by the web and systems like Github. It’s alright not to know, as long as you’re humble and hungry to be better. I am looking forward to 2014 and being able to talk more about what I have learned and contributed. Stay tuned.

Mac OSX 10.9.1 Crash on Sleep or Shutdown

I write this on my Mid-2010 MacBook Pro that is finally able to boot, sleep, and shutdown successfully on 10.9.1. It seems like there are variations of this problem on 10.9 and 10.9.1 that many are experiencing. Normally I wouldn’t take time to blog about random troubleshooting issues but this one in particular was a pain, and it’s my hope this will help someone.

The issue
Whenever my computer would go to sleep (either by itself timing out or from the apple menu), or when I would go to shutdown, the cursor would freeze in place and forcefully restart. Upon booting up the keyboard would be “locked” while I could move the cursor, after about 20 seconds the keyboard would become responsive and I would be able to login. I was able to reproduce the instant restart upon sleep or shutdown each and every boot, it didn’t matter when it happened. I noticed this happening after upgrading to 10.9.1, although I can’t be absolutely certain.

As you might imagine this is very frustrating. Essentially I would have to be okay with losing everything any time I would step away from my computer because the machine would eventually sleep. The weird thing is that when it crashes, it reboots, so I imagine it could be left looping over and over in the this cycle.

It wasn’t graceful and didn’t leave much in the system logs. Resetting the nvram and pram didn’t seem to do anything. Other forums had mentioned about turning on/off ‘Automatic Login’ in System Preferences.

The uncertain fix
Turns out the culprit was likely a start-up item. I booted into safe mode and was surprised to find that I was able to put the computer to sleep and wake up without any issues, similarly the computer was able to shutdown gracefully. Looking into the differences between booting into safe mode and normally, and it seemed it was mostly kexts and start up items. Using ‘Clean My Mac’, checking the ‘Login Items’ under System Preferences, and sorting through the LaunchAgents within /Library/ and ~/Library/ I was able to find a bunch of cruft from old applications. I removed these (you could probably rename them or move them to a folder on the desktop I imagine), and rebooted and like that I am able to put my machine to sleep, shut it down, and get back to work.

Hopefully this helps someone, at the very least just try to reproduce the issue by booting up in safe mode to rule out non-essential start up items.

Setting up the Best AirPlay Speakers (with Shairport and Raspberry Pi)

A plan that had started nearly a year ago is finally starting to see fruition (haha). My Raspberry Pi journey has been fun and you definitely end up learning a thing or two along the way, this isn’t your ordinary linux box/virtual machine.

I’ll jump right into the setup and configuration and then leave a few of my side notes after. Since getting started the Shairport project has garnered more support and is now back in active development. For the 1.0 release it was largely rewritten and from my testing is a lot faster and more stable.

Shairport 1.x, AirPlay and Raspberry Pi

Now I won’t re-write what others have done a good job at explaining already. The steps for getting Shairport 1.x installed is more or less the same as the previous tutorials that describe the forked shairport versions (hendrikw82/shairportalbertz/shairport) for Raspberry Pi but from my testing so far the Shairport 1.x release is a lot better.

I recommend reading through this tutorial as the steps are basically the same (relevant section starts from the beginning, which gets your raspberry pi up and running, to Setting up your Raspberry Pi AirPlay receiver), and then coming back and reading the Tutorial Differences for a few minor points so that you know when to follow these specific steps for Shairport 1.0.

Tutorial Differences Specific to Shairport 1.x

Where the steps differ however are:

  • Make sure you install these required debian packages:
  • git clone from 1.x repo
  • Use  ./shairport instead of  ./ to test the app.

When you want to ‘daemonize’ shairport the steps are slightly different:

Fixing the init.d

  • From the shairport install directory (the one created from your git clone), go to scripts/debian by typing:  cd scripts/debian. Then to copy the init.d script and configuration enter the following commands:

    Shairport is installed to /etc/local/bin/ but the init.d script is looking for it in the wrong location so use vim or nano to edit the init.d script like:

    Then you will need to find, around line 17, change it


    Save the file (in vim this is done by pressing ‘:’ typing ‘wq’ and hitting enter.

    Change the permissions on this file so that you won’t have to run it via sudo by entering this command:
    sudo chmod a+x /etc/init.d/shairport

  • Configuring Shairport 1.x Daemon

  • In the previous step while we were in the shairport install directory we also copied the default configuration ( shairport-install-directory/default/shairport) to the /etc/defaults directory. Let’s edit that file and do a few minor tweaks: sudo vim /etc/default/shairport (again, use whichever text editor you are comfortable with, and put sudo in front). Since I didn’t feel like setting up a shairport user I uncommented the # USER= line so that it read USER=pi (Note: there is no ‘#’ on this line now). I also commented out the # AP_NAME= so that it reads AP_NAME=OntheAir (Again, the ‘#’ character that comments out this line has been removed). Change the OntheAir to whatever you want your AirPlay setup to be called, this is what you will see when you are choosing the AirPlay speakers from the menu. Save the file.

    This configuration approach is way cleaner than editing the /etc/init.d/shairport script to add your daemon arguments. If you’re looking for a little background reading, the configuration information for the raspberry pi and the shairpoint 1.0 I mostly found from this shairport github issue.

General Tips for the Audio

  • The Raspberry Pi doesn’t have audio set to the 3.5mm audio jack by default, if you’ve got it hooked up via HDMI, force switch to it with: amixer cset numid=3 1
  • You can also set the audio output levels, visually with: alsamixer (use up/down arrows), or by command with: amixer cset numid=1 -- 80%.
  • I am still using the default raspberry pi 3.5mm output, and it doesn’t sound that bad, so I’m really looking forward to what a USB DAC will do for me. That should arrive sometime this week, so I’ll report back my findings. I also plan on writing a short blog on some of the small things I’ve learnt about the Raspberry Pi, that might save others some headaches.

    Hope this provides some useful information, especially since the popular Shairport guides are for pre-1.0. Let me know if you have any questions, in the comments.

Happy Halloween

I’ve pulled up these images from the archives, all the way back from 2006! The geek inside me was fully invested in the pumpkin carving that year.

Apple logo Finder

Based on the original white macbook, also my first mac. This was an original (pumpkin) design I came up with.

Based on the original white macbook, also my first mac. This was an original (pumpkin) design I came up with.

The 'X' in Mac OS X

The ‘X’ in Mac OS X

Digg, remember that?

Digg, remember that?


Working with ZIP Code Data & MySQL

I’m working on a project currently where I need to be able to use zip code data, in relation to their longitude and latitude coordinates. I found what I felt was a half decent source of the data. The download file listed at the top says it includes CSV and SQL but I found the SQL implementation to not be quite what I was looking for, at least for MySQL.

At the bottom of this post you will find the download of the MySQL formatted zip codes.

With the MySQL database you have the options for doing geometric queries which I haven’t delved too far into, but it seemed really useful. I was using this data for proximity-based searches, using someone’s zip code.

The SQL that comes with the download is irrelevant to MySQL as it doesn’t work with that   AddGeometryColumn function.

However, the CSV data was full of what I needed. So after some looking around I was able to mold the data into the right format that would be applicable to MySQL.

Here’s the create table syntax:

The MyISAM engine is apparently better for creating spatial indexes, according to the documentation. It sounds like newer versions of MySQL do have some support for InnoDB and spatial data types:

InnoDB tables do not support spatial data types before MySQL 5.0.16. As of 5.0.16, InnoDB supports spatial data types, but not indexes on them.

Alright, so I’m running with the MyISAM engine. I have the CSV file, and the SQL file doesn’t apply in this case. After building the table I am now able to import my data. The syntax for POINT columns is a little different so keep that in mind when inserting and selecting data. To get the CSV file into the right format I wrote this find/replace regex to run on the CSV data:

I then wrote the first part of the INSERT statement defining the necessary columns to be inserted. Run the script and you’re data should import and you’re ready to go. And that was able to get me the final format to insert the data into the SPATIAL-aware database setup with our long/lat POINT datatypes.

The end result

The SQL file of zip codes formatted for MySQL based on my create table syntax above:
MySQL ZIP Codes Data

So far this data has been working out really well for me, let me know if you notice any shortcomings or have any questions. Again, I pulled this data from this blog so if you need any information specific to the source of this data there are some details there. Cheers!

Drupal Camp Alberta 2013

So about three weeks ago I had the privilege to attend Drupal Camp Alberta. This year the the guys from Hybrid Forge (where I work!), organized and sponsored it. I really appreciated the hard work they put into making it a high calibre, and fun, and from the sounds of it others had a really great time, too. And it was in Banff! How could you not?! Looking out of the conference rooms to a wall full of glass, opening up into a valley of the Rocky Mountains, even deer were strolling down on the grass below.

So I’m not much of a Drupal guy, but I’m quickly learning the vocabulary (err, I mean terms), the setup, the infinite amount of modules and ways of tackling a problem. I’m hoping to dive more into the theming, and behind-the-scenes “guts” in the recent future. It won’t be long before I’ll have something to show here.

One thing that I had heard about, but which was made more apparent at Drupal Camp, was that people really love Drupal. The community really stands behind Drupal, which is awesome because doing something because you love it is always the best reason, and that seems to speak to Drupal.

Source Code Pro & PhpStorm, the plot thickens

Alright, so I thought everything was all set in my last post, however it turns out PhpStorm, Java and font rendering have a bit more issues.

UPDATE: The following fix also works for adding the various font weights that come with Source Code Pro (see bottom for screenshot).

UPDATE #2: Looks like for PHPStorm 8 (I’m running 8.0.1, specifically) and Mac OS X 10.10 Yosemite, you will want to use the ‘TTF’ format, and not the ‘OTF’, if you want the various weights to show up.

If you you have PhpStorm and your fonts look weird like one of the two screenshots below, then I have a fix for you.

PhpStorm - Mangled font PhpStorm - Mangled Font

The Analysis

It turns out that for things to work out it’s not the type of font (ttf or otf), not exactly. What’s most important for PhpStorm as a Java app is where the fonts are located. From my testing it looks like Java will fallback to ~/Library/Fonts or /Library/Fonts when it comes to PhpStorm but it will have troubles rendering (as you can see in these mangled screenshots). The ttf version of the font in one of the library folders is the less mangled of the two, but things fall apart when it tries to make up an italics and bold version. Unfortunately, Source Code Pro doesn’t come with an italics version.

I say make up an Italics version because with Mac OS X (and maybe Windows?) the operating system has the option of coming up rendering faux bold and italics versions of fonts. This works fine in Sublime Text but for PhpStorm the fonts have to be dropped in another folder.

The real fix

The answer is you must store these fonts in your Java home’s font folder. To find this out open terminal on your mac and type:

/usr/libexec/java_home  or echo $JAVA_HOME

One of these two commands, most likely the first one, will return a directory path (Update: If this doesn’t work for you, check out  this StackOverflow post as suggested by Emanuil in comments, thanks Emanuil!). Go to this directory path, then proceed to go to ‘lib’, then ‘fonts’ folder. In the case of my machine, the command returned /System/Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Home/ and then I navigated to the containing lib/fonts directory ending up at /System/Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Home/lib/fonts

Now that you’re in your java fonts directory, put your Source Code Pro ttf or otf font file.
(Important: As mentioned at the top of the post in Update #2, as of OS X Yosemite and PHPStorm 8, it appears that only the ‘TTF’ format will bring in the various font weights for a family. You still need to include the TTF for each desired weight).

Restart PhpStorm and your fonts should be ready to go with bold, italics and everything. Note, one thing I discovered in my testing is that the otf and ttf versions of Source Code Pro rendered slightly different from each other. The ttf rendered slightly thinner, than the otf (screenshots below). I’m not sure if this applies to other fonts, or just Source Code Pro, but I thought I would mention it.




Hope that gets things going for anyone having trouble with fonts rendering properly in PhpStorm.


If you include the font files of the different Source Code Pro weights you will also get these different options, which some have reported as missing from the fonts menu. Instructions for placing the font files are as mentioned above.


Getting Source Code Pro & PhpStorm to play nice

Update, turns out there’s more to it when it comes to getting PhpStorm to render fonts. My follow up post explains how to get fonts rendering properly.

Lately, I’ve been diving into heavier frameworks and have started to to use PhpStorm more. When setting up my IDE environment I noticed I was missing my favorite coding font, Source Code Pro. I went into the Preferences, Editor > Colors & Fonts > Font, and tried to select Source Code Pro. This caused some issues where it was unable to render bold, and italics and instead left everything in a jumbled mess.

The fix to getting this to work: make sure you have installed the TTF version of the font (source).

Source Code Pro in PhpStorm

Next up, a better color scheme.


Things Web is coming along. I now have todos loading from a node express server + Much to learn still.