Angular scope in your console

Sometimes it can be really useful to inspect the data you're working with on an Angular build. There are some plugins and extensions to help with this, like the Batarang extension for Chrome.

I prefer to have my scope in my dev tools console while I'm looking at a page. That way I can see how the data changes as I interact with the page, or view the data returned from an API. There's a simple command which lets you do that.


Select an element in Chrome's dev tools, paste that into the dev tools console and hit return. You'll get an interactive model of the scope for the selected element.

Dev tools

AngularJS - ngHide for old IEs

Yeah yeah I know, old IEs are dumb and should be run over by a bus or thrown off a bridge and blah blah blah. But sometimes 20% of your client's users are using IE7, and another 20% on top of that use IE8, so you've got to deal with it.

The trouble is, some pretty basic AngularJS built-in directives don't work in these browsers. In this short post I'll show you how we wrote our own directive to enable us to use ngHide across browsers.

Simple Check for Old IEs

On a recent project I needed to be able to detect if a user was browsing using IE8 or 7, and serve different functionality to them if that was true.

After looking around a really easy way to do this is to simply check whether the browsers supports the leadingWhiteSpace feature, using jQuery's $.supports method.

if ($.support.leadingWhitespace == false) {
     var oldIE = true;

Old versions of Internet Explorer don't support this feature, and therefore oldIE will be false on these browsers. You could then apply a conditional class to your body tag to style something differently, or write a quick if statement to check the value of oldIE before executing some script for example.

A Couple of Problems I've Found Using Flexbox

I recently tried using flexbox for laying out products in a grid, and came across a few problems. I think the main issue is down to browser support, but there's also some quirks in the implementation that mean I can't quite use it how I would like.

This post summarises the issues I found.

Responsive breakpoints - It's in the name

I just read this quote in .Net magazine:

“…rather than [device-specific] breakpoints, I’d decrease browser width until things looked broken or cramped, add a breakpoint and repeat…”

Dan Tello

This is what I’ve always done and is exactly the way we should approach making sure responsive layouts behave properly.

I never thought the idea of having pre-defined breakpoints for iPhone, iPad and desktop etc was particularly useful, and in fact it seems much more aligned with an adaptive layout. Even when responsive design was just a baby there were already hundreds of devices with different widths so setting a few different breakpoints has never made sense.

At the end of the day it’s in the name: breakpoint. Find out where your design breaks, then fix it.

Offset the post list in WordPress

Sometimes in your WordPress theme you might want to display a featured post or your latest post in a different way than the rest of the list, to draw more attention to it for example.

All you need to do to make that happen is add offset=1 to a query_posts function, and then go ahead and write your loop to display your post list.

query_posts( 'offset=1' );
while (have_posts()) : the_post();
        <h1><?php the_title(); ?></h1>
        <div class="post-date><?php echo get_the_date('j M Y'); ?></div>

Quickie on CSS weight

In this completely made up and unrealistic example, which version is heavier? This…

.main-nav li,
.main-nav a {
    padding:0.5em 1em;
.main-nav a {


.main-nav li {
    padding:0.5em 1em;
.main-nav a {
    padding:0.5em 1em;

WordPress – Including Extra Stylesheets

I always thought, just like with any other normal site, that it was fine to stick a call for an additional stylesheet inside my header.php file. But to allow greater flexibility for child themes and also if other developers decide they want to do some tinkering with your theme, it’s actually a lot safer to use wpenqueuestyle (codex page).

Below is how I include a stylesheet for a Google Web Font on this site. The following code goes in functions.php.

function load_stylesheets() {
    wp_register_style('googleFonts', ' 'googleFonts');
add_action('wp_print_styles', 'load_stylesheets');

If you need to add more you simply add a new case of both wpregisterstyle and wpenqueuestyle inside your function.

function load_stylesheets() {
    wp_register_style('googleFonts', ',700');
    wp_enqueue_style( 'googleFonts');

    wp_register_style('fortawesome', get_bloginfo('template_url').'/css/font-awesome.css');
    wp_enqueue_style( 'fortawesome');
add_action('wp_print_styles', 'load_stylesheets');

Easy peasy.

jQuery tooltips

Sometimes you might need to give users a bit of extra information about something on your site, but you might not necessarily have the room to do it within your design. One way you could get around that is to show that extra info when an element is hovered.

Simple Horizontal Nav with CSS

A common feature on almost every website you’ll see is a horizontal navigation menu near the top of the page, listing out the main features or areas of interest of the site. Setting up a nav like this is pretty simple...

Remove an element’s text using jQuery

One of our older CMSs at work spits out some unwanted pipe (|) characters within the lis of its header menu. I don’t want them there.