Category Archives: Web

How to make WordPress Show in an iFrame (X-Frame: SAMEORIGIN)

So I use a nice Chrome plugin for testing responsive layouts called “Dimensions Legacy”, and it puts your content in an iFrame and lets you resize the frame without having to resize your browser (good for inspecting!), HOWEVER, wordpress has added a Frame showing restriction into their default security that won’t allow wordpress to render in an iFrame anymore!

I tried a few things that were meant to make it work, like commenting out the header hooks and even the function that inserts the X-Frame directive, but nothing seemed to work. Even after a reboot!

Finally I found a nice solution (in StackOverflow), that lets you invalidate the X-Frame SAMEORIGIN directive, by adding your own nonsense one that makes the browser ignore them both!

In my page template I added:

<?php header('X-Frame-Options: GOFORIT'); ?>

Problem Solved!

Old Reliable vs Bleeding Edge : WordPress CMS to Ghost CMS

A new client of mine wants to re-brand their existing website, and I’m excited about it!  They are in the industry, they have hired other very capable freelancers to work with me, and they have a clear view of their goal.

We were talking together about how we wanted to serve the web content.  We could make a static site, but it’s not flexible enough for the client to edit on their own. We could use a CMS, but we aren’t interested in a blog (yet!) and only want web pages.

Blogs make great non-blogs!

Using a blog engine these days doesn’t mean that you are actually making a blog anymore.  Wordpress has introduced for a while, the concept of a static “homepage”.

So, Do we want to use WordPress?

Yes and No.  Wordpress I know how to use (though I’m not very fluent in PHP), and it has a ton of support for themes (but we want to start with a barebones theme anyway) and it’s got a lot of widgets and libraries (that we don’t really use).

I asked myself, do i want to use all this infrastructure to make a light-weight, fast website?

Then my hero Jeff Atwood (of Stack Overflow fame) wrote recently that he’d changed his own blog over to Ghost. I also had been starting to work with Node.js framework recently, and when I googled “Node.js CMS” Ghost came up prominently!

Destined to be haunted…

Ghost is fast, really lightweight, and very much focussed on posts and pages and blogs and THAT’S IT.  My only really big problem was I was going to need a static page as the home page and Ghost version 0.4.1 supports pages, but not a page as the root page! 🙁

Ghosts are transparent!

Hey but it’s all good! All the code in ghost is non-compiled and you cna hack away at anything you want… so i fiddled with the routing and controllers a little and BOOM!  Static page for a homepage!

Lets go!

So my next exploration is : Hosting this baby on AWS using a Bitnami image and making sure this is going to work!

Old Flexbox is slow. New Flexbox isn’t. Things solved with Flexbox!

Thanks (again) to Paul Irish doing the hard work for all of us and testing if modern flexbox is “up to par” for performance.  Good new everyone!  It is.

Oh and incase you were wondering what can be done with flexbox?

Things solved by flexbox

Perfect your Vertical Rhythm: CSS Line-Height Explained and De-mystified

Props to Russ Weakley for this fantastic and quick slideshow on everything you wanted to know about line-height and adjusting your “Vertical Rhythm”.

I guess what I took out of this more than anything, is specifiying line-height: 1.25; (with no unit) is a great option that will cascade down through child objects in your DOM and re-calculate line-height based on each item’s size.

Using Mustache Templates for Javascript : Practical Examples


Mustache.js is awesome for making HTML templates in an MVC framework, and I’ll tell you why.  Previously I had used underscore.js for templating and it allowed you do pretty much anything you wanted.  This would invariably end in templates with business logic and data-massaging code embedded in “the view”.  Mustache is the drill-sergeant of templates : It only allows it’s own logic tags, and is not going to take any bullshit from you soldier!

Sir! Yes Sir!

Now rather than being a pain to use Mustache is actually refreshingly simple and lightweight, but also incredibly powerful.  Since the documentation ranges from “great” to “meh!” (see partials).  I thought I’d list some <blink>WORKING</blink> examples of real-world mustache usages:

Example 1 : Binding a primitive variable (No JSON structure)

This one isn’t particularly “real world”, but it’s a great place to start.. you have a variable.. jsut one.. and you want to bind it to a template. As your variable won’t have a name, you need to say “just bind the data”… that is what {{.}} does.

Try the example

Example 2 : Binding an Array of primitive variables (Array structure)

This one is a real world example.  Your web service returns you a complex object, but all you are interested in is binding to one array inside that object.  Rather than pass the whole structure in.. you just pass in the array.. but the array has no name.. how do you reference it?  with the {{#.}}{{/.}} loop command.

Try the example

Example 3 : Binding an Array of Name/Value Objects with named Properties

Moving onto our most realistic example so far.  Building a <select> with objects that are bound to a data object.  In this case, we emit our one-time select tag and then inside it, loop through our named “data” property and bind it’s properties by their names of “value” and “text”.

Try the example

Example 4 : Binding a data object and a localization (L10n) data object joined in a wrapper object

This is a simplistic example of a real world problem we were solving with templates.  Our page labels all had to be localized, and the label text was stored on the server and delivered to our web pages as a javascript object.  This l10n object would then get wrapped in a data object with a sibling object that would contain the user data.

The template would render both the label as well as the data at the same time.

Try the example

Example 5 : Binding a data array to an anonymous (lambda) function

The reason I like Mustache over, say, Underscore is because it doesn’t allow for any embedding of code in your template. It forces you to have a nice clean View. Sometimes, however you do need to process data, or perform a lookup based on a key.

In the Real World, I have used this functionality to lookup a localization string in a dictionary, based on a key, and if the data is missing, then show a “missing data” flag for that label.

Try the example

Example 6 : Binding a data array recursively to a template

It took me hours to get this one working originally, then I lost it, and had to re-write it. It then only took me about 15 mins, and most of that was making the data structure! Once you understand how ti works, it’s very easy.

When you are planning on rendering data recursively, you need two templates (or the same template twice), the first is your master wrapper template, and then when you call Mustache.render, you provide a third parameter, which is a JSON object of all your sub-templates you will be referring to by name.

When you want to call you sub-template, you use the {{>subtemplate}} syntax, and it will render. To get recursiveness, your sub template must also then refer to itself inside it.

Try the example


Mustache has an OK document called mustache(5) , but this document which is specifically for javascript is both more detailed, and doesn’t have syntax errors.

CSS border-box FTW!! Now with Sass and Compass!

From Paul Irish’s blog entry…:

One of my least favorite parts about layout with CSS is the relationship of width and padding. … If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding. … Anyway, I have a recommendation for your CSS going forward:

*, *:before, *:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 

This gives you the box model you want. Applies it to all elements.

Now you can take this FTW layout moment and make it even more amazing by using Compass (with Sass) and making it a one-liner with no-need-to-type vendor prefixes!

*, *:before, *:after { @include box-sizing(border-box); }


From reading the comments, there appears to be an issue with doing this for images if the image also has a border.  If you use a 100×100 pixel image with a 1px border, the image will actually be scaled down to 98×98 pixels.  This could be a problem with some sites, so i would probably recommend adding another line like:

img { @include box-sizing(content-box); }

Anyway, if I hit any more problems with this, I’ll come back and talk about them.

Waiting for your web services? Hello JSON Mocking!

When we start a development sprint, as a UI / UX team, we will make sure that as a priority, that we identify all of the web services that we will need to consume. We then, define the parameters needed to call the service and generally, we will create a JSON object that we will expect the service to return us.

This helps us shorten the critical path by making sure that the service developers can prioritize their work efficiently, and also move development of web service stubs to the front of their work queue.  This process doesn’t always work perfectly and we are sometimes (often) in a position where the web service developers are days away from even making us a stub, so rather than postponing our own critical path work until later in our sprint, we can pretend we have a working web service using JSON mocking! Hooray!

The Tool : Mockjax

The library I use to fake a working web service is MockJax.  It is wonderfully simple.

  1. The library seamlessly wraps jQuery’s $.ajax command.
  2. You write your ajax call as you would if your service already existed
  3. In your page setup init function, you just once, setup an override based on the URL (and optionally POST type, etc), which can redirect to a function, or a static JSON text file, or another url
  4. When you call your $.ajax, the wrapper checks it’s override dictionary for a match, and if it finds one, it intercepts the call and serves your alternate mock data.

Code Reviews : The Last Line of Defence

When designing the architecture for a web site, not everything you design is about the technology or the code structure.  Perhaps one of the most important project decisions I think I implemented on “Project Shylock” was to implement mandatory code reviews before commit.

All code commits need to pass a build, run and basic sanity check.

The only times committed files won’t require a code review is for a basic copy text change (and maybe even then) or when development was performed as part of Paired Programming (and maybe even then) or for a binary file.

The benefits for code reviews are plastered all over the internet, but just to re-cap from my own personal experience.

Code Reviews produce the least buggy code

I’m sure there are some metrics out there that may prove TDD (Test Driven Development) makes for the least buggy code, but from my own anecdotal experience, nothing makes for more reliable code than having to go through it line-by-line in front of a peer and having to explain your decisions for each line of code.

Additionally, if you promote a development team where noone codes with ego (another topic!), then critical analysis of code structure and logic will flow naturally.  It can be like getting a free refactor just before you commit your changes.

 Code Reviews cross-pollenate knowledge

When I’m working on code in a team that doesn’t code review, the only time I know what everyone else is doing is during the daily scrum standup… and even then I only get a passing overview of their coding day.

When I’m on a team that is doing code review, I always know what 3 or 4 other people have been working on that week.. to the point that if they are away sick and a bug arises related to it, I generally feel comfortable to jump into the code and try my own hand at it.

Last thoughts…

I went away on vacation for 3 weeks and left my team on an honor system to keep code reviewing themselves.  I was unpleasantly surprised to come back that they had been incredibly overloaded and in their work compression mode, they dropped their code reviews.

It’s an easy thing to do to say “Oh I’m too busy to do this”, but in the end, code reviews only take a few minutes most of the time, and can save HOURS of work… sometimes you don’t have to pay that tech debt until weeks later.. but it will be paid sooner or later.. trust me.

UPDATE: Even Jeff Attwood (of Coding Horror/Stack Overflow fame) agrees!

Creating a Website : Style-First Design

Before we started on Project Shylock, we were very badly burned by an extremely high maintenance web form. When we first started designing it, we made a screen mockup that was pixel-perfect and would dynamically resize its windows according to which panes you toggled open and shut. We created a screen first, then made unique design rules that would allow it to be possible.

It looked beautiful!

Only it wasn’t. It was a hot mess of intertwined javascript resize events that would cascade from parent events down to any dynamic child. A form resize or a toggled pane would trigger the display calculation of up to 10 items. By the time we delivered the form, it worked well and responsively, but the cost of sticking to the pixel-perfect screen layout cost us a few weeks of person-hours.

The Lesson : Style First, the rest will follow

When a graphic designer makes a pixel-perfect layout, there is a less-than-complete understanding of how all the pieces are grouped and how they will all push and pull upon each other.

Know your direction

Work out your fonts, your site’s persona, your flavor.  Make some designs on how you want your site layout, look and feel to flow.

Create your styles

Preferably with something like Sass or Less, lock in a gentle css reset, then start building up your styles. Make css modules of related rules. Typography module, color module, padding, layout, buttons, grids, forms, dialogs…  start with the essentials and expand as you need, but make your rules, work out how it all is going to flow

Communicate your rules to designers

If you are working with designers or graphic design team, communicate your styles and rules.  Make a prototype page with examples of how various objects will interact with each other and let them see and play with them.

When they make designs proposals for new functionality, make them use your rules to make the forms.

The pages will follow the design…

If you stay flexible and Keep It Simple (my mantra!), then when you create your pages, they will start naturally fitting in amongst each other and dictating their own flow.  This works especially well in a web site that has to be dynamic or responsive, because as your controls change or your available space, the controls will adapt as well, with minimal developer intervention.

Delete Icon

How to remove a property from a javascript object

Add this to the “I-can’t-believe-I-didn’t-know-this” bucket.

If you have a javascript object that looks like this:

var myObj = { propA : "aaaa", propB : "bbbbb" };

and you need to remove all reference to propA (not just make it null), you could use the following javascript:

delete myObj.propA

which will erase propA entirely from myObj, which would then look like:

{ propB : "bbbbb" }