Ian McNally

A tool for team rotations

The team I work on wanted to create a weekly rotation for people to facilitate meetings, so I made an automatic one on glitch! Check it out…

Copy to clipboard in Devtools

I found myself wanting to copy an object in Chrome’s devtools onto my clipboard today. Lo and behold, there’s an API for that: . Nice!

An update to my React test rendering library

A couple years ago, I was inspired to write a simple wrapper around React’s shallow renderer – and I recently came back to it after a lot of…

Branching off another branch in git

A git workflow problem recently surfaced on my team. We branched (let’s call it branch B) off a branch (branch A) to keep working before A…

Url search params in Javascript

I was looking for a way to get a URL parameter in Javascript , and came across Dave Walsh’s post on the URLSearchParams interface. When you…

Lessons learned building a UI library

I’m off boarding this week from my current job, and I wanted to write up the technical directions and learnings I’d acquired building the…

Flex values in IE11

Today I Learned:IE11 doesn’t handle values in the same way that newer browsers do. Normally the value is a shorthand for . But in IE1…

Feature support in browsers

If you find yourself needing to test feature support in browsers, Dive Into HTML5 has a complete list of checks you can run.In my case, can…

I was on a podcast

I was on a podcast about CSS recently, and the transcript just launched. Here are some edited (for clarity) excerpts of my answers:How is…

Fancy list numbering with CSS

It’s not every day that I’m styling a list like:My fancy numbered listBut today was. So I came across a wonderful piece on CSS Tricks that…

I'm on a podcast talking about css

Fresh off the podcast presses: I joined Stride’s Rabbit Hole to talk about css and contemporary approaches to using it in Javascript.The…

Link: practical flexibility in systems

Harry at CSS Wizardy writes (below) about building in safe guards to a system, versus excluding “forbidden” use cases. It resonated a lot…

CSS grid auto placement in IE11

I found out the hard way that IE11’s implementation of CSS Grid (the old spec) doesn’t support auto placement. It was the one feature my…

Knowing when an element is in view

I started working on a lazy image loading component today. There are several pre-existing solutions on the internet, but nothing I found…

A better solution for mocking CSS modules in jest

I’m using CSS modules and testing with Jest in my latest project, ‘cuz they’re the best. But I kept wanting more from the css mocking…

What we talk about when we talk about consulting

I am a software developer. I’m good at some things (looking at you, front end & javascript), fine at other things, and meh at a couple…

Open sourced: a utility for shallow rendering React components

After lots of copy/pasting a small utility that makes shallow rendering a React component a little easier, I’ve open sourced it. It’s called…

Getting input values in a dynamic form

Today I was experimenting with how to get all the values in a form. The form was dynamic, so I didn’t know the input and textareas that…

Link city – style guide reading recommendations!

On a recent project, I did a lot of research on pattern libaries and modular components. They’re too good not to share!“Going Responsive…

Native form validation in browsers

Today I stumbled on the DOM APIs `document.forms`, which holds a collection of all the forms on a given page. You can access individual…

14 tips for better front end testing

Today Stride published a set of tips I put together for testing your front end code. I had some fun with it, by turning it into a Buzzfeed…

Repeating keys in vim on OSX

In vim, holding down a key can save you a lot of repeated effort. In newer versions of osx, holding down a key was disabled, to allow for a…

Deciding on new technologies

In my day to day as a software consultant, I often help evaluate new technologies (be it a framework, library, language). Over time, I…

Variables in npm scripts

Did you know you can have variables in your package.json? They can be very handy, especially when using npm scripts. Consider the following…

PhantomJS 2 in Travis CI

I was continuing work on my web boilerplate (note: now moved under the stride-nyc org) when I decided to add Travis CI integration for…

2016 web boilerplate

I was about to start a new side project, when I realized the crazy amount of setup I’d have to do to get up and running. I wanted to use my…

Migrating a legacy node project to Babel

I’m working on a node project that has a mix of legacy and new code. The new code is written in ES2015 (a.k.a. ES6). The legacy code is your…

Q&A on front end tech

Today, I participated in a live Q&A about front end technology. In it, I gave a 10 minute presentation on the evolution of javascript…

65 Things You Can Do Right Now To Build Better Websites

Today I gave a talk (embed below) at Intent Media, titled 65 Things You Can Do Right Now To Build Better Websites (at 33:44)_. _I talk about…

Friend with aspergers getting into tech

About five years ago, I made the switch from music to software. I was fortunate enough to land a great opportunity, which allowed me to…

Karma tests running twice on change

My current project’s been plagued with duplicate test runs on a single file change. We’re using webpack and karma, and it’s a documented…

My es lint configuration

I started using ESLint on a project recently. It took me some time to get over JSHint, but I’m really enjoying ESLint’s plugins, especially…

Open sourcing an autocomplete widget for React

I’m  happy to announce I just released the first version of my autocomplete widget for React, called react-input-completion. It’s live on…

Event pooling in React

I’ve been writing a lookahead/autocomplete component in React, with a debounced onChange. I started to notice that my value changes would be…

Autocomplete in React

I was looking over some autocomplete/lookahead solutions, and I couldn’t find anything that could fit well into a React project.First off…

Stopping force pushes to master with a git hook

Today, my team ran into an issue where someone accidentally force pushed their git branch to master. There’s no easy configuration change to…

Image Carousel in React

I’ve been having some fun today planning out a carousel in React.One feature request was that any slide could be the next slide, and the…

React component change testing works!

Since I’ve been using React, there’s been a bug in TestUtils.Simulate.change. I don’t want to drag you down with the specifics of the bug…

Code reviewing CSS

Here’s a great list of dos while reviewing CSS, by Geoff at CSS Tricks.It boils down to:It worksStyle and consistencyCompatible on supported…

Celebrating equality on the web

I joined in the web development community’s celebration of the US ruling for marriage equality by adding a rainbow to Farely today…

Input validity in the HTML spec

Last night, while staving off insomnia, I started working on an enhancement to react-currency-masked-input.I wanted an empty input value (i…

Front end best practices

I recently did an Tech Talk with Stride on Front End Best Practices. This interview originally appeared Stride’s blog.When a new technology…

My first Github issue and pull request!

I got my first Github issue and pull request! So flattered.

Choosing a javascript framework

I gave a talk recently on why a client might want to adopt a javascript framework. They were writing their own presentation layer, and were…

Currency masking in React

I just open sourced a currency masker for React!Check it out: An input that is getting masked (really, re-evaluated) as currency. It takes a…

Slick carousels

A Bill Murray carousel with Slick Came across a fantastic carousel library called Slick. It’s extremely flexible, comes with some helper…

Making BEM easier in Sass

I came across a great way to start writing BEM in Sass.Say you have the following markup:To make the full-width and the header text pink…

box-shadow for an overlay

Box shadow overlay exampleToday, I used box-shadow to create an overlay!Notice the lookahead list (bags, baby bags). It’s a .On that I put…

Testing input change in React

Today I was adding tests to Farely. I wanted to test that when you input a new value, it updates the state.According to React’s testing…

Animating drawers in CSS

I set about testing drawer sliding animations, hot off the heels of a browser rendering class.I put together a demo, where you can switch…

Scrolling a page with a background image

I noticed some jank (a.k.a. non-smoothness) while scrolling a page with a background image.Performance graph 1The performance looked like…

Browser Rendering Optimization on Udacity

Really digging this course on Browser Rendering Optimization.Say that three times fast.

CSS Triggers...

CSS Triggers is a reference for CSS properties and what they trigger - paint, layout, composite.Transform and opacity are the best…

The Roles Model | Accessible Rich Internet Applications (WAI-ARIA) 1.0

I’ve been diving into accessibility, and finally found a list of attributes.It can save you from some pickles.Also, don’t forget the there…

Why are not all flexbox elements behaving like flexbox divs?

Several browsers have bugs about fieldset and legend, which make them impossible to style. Looks like we’ll have to use role=“group” on a…

JSCS configuration file

JSCS is an awesome new style checker for Javascript. Plugins are available for all the major editors, IDEs and build tools (my faves…

Morphing placeholder

Morphing placeholder and input label Placeholders always leave you (when you start typing). Labels just don’t do enough on their own…

Testing API calls regardless of domains

To test an API call in Angular (with jasmine), you inject $httpBackend, having it expect a method & URL call, then verify there aren’t any…

Font sizing with rem - Snook.ca

Summarizing REMs for CSS units, and how to get your measure to convert nicely between pixels and REMs.tl;dr -1px is .1rem

PropertyUnits rule in SCSS Lint

Feeling proud about my latest open source contribution. This time, it’ to SCSS Lint.I added a rule that enforces the units used on element(s…

Writing and testing custom form validators

Custom form validators are a powerful feature in Angular.Say I’ve got a form, and an input for a name. I want the name to be unique from a…

Equality of shallow javascript arrays

Today, I was working on a UI bit where you click on a modal to add or remove some items from a list. I wanted the modal to have a shallow…

Setup iTerm2 to behave like guake | Ivan Villareal

For quick access to the terminal (in my case, iTerm2), I setup a keyboard command to open a heads up window.This article laid the setup out…

Add NoPixels rule by imcnally · Pull Request #407 · causes/scss-lint

I’ve been using SCSS Lint recently, and I like it. Except when I break the build, but that’s another story.On projects, I’ve been moving…

Initiation to Code · An A List Apart Article

Mentoring junior developers is a rewarding experience, and this is a great introduction to it.

what a $resource call looks like

Because I can never keep this straight, this is what a $resource call looks like:

bindToController in tests

In an Angular directive, you can use the property to set your $scope injections on the controller instance. It all works great, but things…

The Terrible Technical Interview

My favorite interviews are ones that aren’t traditional technical interviews. I could talk all day about projects I’ve built, and I’d be…

Panda Strike: High-performance Web and Mobile Apps and Zero-hassle Dev Ops

Strong words for an open web that doesn’t need React.Side note: My next project is definitely going to use polymer components.

Making the most of ng-repeat and filters

Not too long ago, I wrote about storing the value of a filtered ng-repeat. But what if I wanted the display to show the filtered results…

Some More Inspiration for Text Input Effects | Codrops

A neat set of experiments on input focus behavior. The most enlightening thing for me was moving the placeholder text below the input on…

Angular providers

I got a taste of what it’s like to write a provider in Angular. The biggest reason to write one is to have a service configurable in a…

fatlinesofcode/ngDraggable

Really digging this drag and drop library, for Angular. Items snap back on an unsuccessful drops, and dragging items are properly in the…

Coming to React from Angular

Note: This article was originally published on Stride’s blog.My friends started using it, Stride clients started asking for it, and it’s…

Farely

Just released a new version of Farely, completely re-written in React!Source

Grid layouts in flex box

Some colleagues brought up layouts today. The team just started using flex box instead of Bootstrap’s grid (yey!), and someone mentioned…

ng-repeat list alias

In Angular, say you’ve got an ng-repeat, where you want to use the filtered list somewhere outside of the list, like:Note: this would not…

An Angular2 Todo App: First look at App Development in Angular2 - YouTube

A todo app for Angular 2 by the team. It got me excited for 2, for the first time.

imcnally/react-es6-gulp-playground

I couldn’t find any good information on building a project with React and ES6 on the internet, so I built my own! I used gulp to compile…

60fps on the mobile web — Flipboard Engineering

Seriously cool HTML & CSS engineering

Rebuilding HipChat with React.js - Atlassian Developers

How and why. What piqued my curiosity was their indifference to React at first.

CSS Reference | Codrops

CSS reference with practical examples and clear writing.

Frontend performance tips for web developers

A good reference for loading JS and CSS at different times.

Farely - the Metrocard Fare Calculator

So excited to officially launch Farely. I hope everyone tops off their metrocards and never wastes their hard earned change again.

/i-just-released-version-1-of-farely-itll/

I just released version 1 of Farely.It’ll calculate the exact amount you need to add to your NYC Metrocard so you don’t have leftover change…

How Duolingo Onboards New Users | User Onboarding

Duolingo really nailed their onboarding.

Preparing for the future of AngularJS

tl;dr - No ones knows 2.0. It’s designed to extend the browser and be declarative.

Fun with line-height

Some cool text effects using line height.

Position:fixed and z-index

A Safari bug came my way recently. A progress bar with was hidden behind an element. I first tried to solve it with , but that wasn’t…

/found-a-great-progress-bar-library-for-angular/

[caption id="" align=“alignnone” width=“506.0”] Found a great progress bar library for Angular today, which hooks into $http and doesn’t…

Controller or Link on an Angular directive

Came across a big gotcha moment today. Turns out, controllers aren’t supposed to be used for DOM manipulation of a directive; they’re only…

Tooltips with templates

I’m working on an Angular project that uses Angular UI Bootstrap, and I wanted to improve the experience of the using the directive. To…

Redacted text with React

My humble beginnings with React, featuring something like redacted text.Generally, I find React odd. You have to directly inject HTML into…

Researching the Performance costs of JavaScript MVC Frameworks

They measured initial page renders for a few MVC frameworks. Backbone was fast and Angular wasn’t.

type your buttons

Today I learned the hard way to put types on my buttons. On a form, I had a cancel buttonWhich was accidentally being submitted on pressing…

Advent calendar for web geeks

A writing a day on the best advances in web technologies of the past year.

Why moving elements with translate() is better... - Paul Irish

FYI

Browser window with Polymer

I wrote a faux browser window, using Polymer to make it a reusable component.Pretty neat, huh?

Don’t use IDs in CSS selectors

A more empirical argument to not use CSS IDs.

Responsible Responsive Design

Scott Jehl just released a book on responsive design that I’ve been eagerly anticipating for a while!

/thrilled-one-of-my-latest-pens-is-getting-some/

[caption id="" align=“alignnone” width=“1280.0”] Thrilled one of my latest pens is getting some internet love on Code Pen, especially from…

New Patterns in Angular by ianmcnally

I gave a short talk on new patterns in Angular for my team today.

/worked-out-a-typewriter-esque-display-effect-for/

[caption id="" align=“alignnone” width=“632.0”]![ Worked out a typewriter-esque display effect for text. On CodePen . [/caption]

Hello, vertically ellipsized text!

Isn’t that something?The style is rather simple:Gone are the old days of:

/making-some-magic-with-waypoints-today-how-the/

[caption id="" align=“alignnone” width=“822.0”]![ Making some magic with Waypoints today. HowThe codeelement.waypoint handler…

window.close on iOS 8 is broken

(for now). It’s been fixed in Webkit, but it’s not available on iOS 8 yet.

Float everything!

Today I learned that if you want a fluid layout and you can’t use flex box, float everything!When all your elements are floated left, you…

Extending the native menu button on the web

It’s a thing! Go HTML5.

Testing deferred objects in Angular

Consider the two code blocks below. They’re unit testing an asynchronous function , that returns an initial promise, to be resolved at a…

How to Do What You Love, the Right Way · An A List Apart Column

A great piece about priding yourself on your work, not your title of employer. A gem: “thinking about what you do not simply in terms of…

Xcode for Yosemite

A little tip from homebrew to me, to you:Xcode 6.1 is required on Yosemite to compile anything (6.0.1 does not include the 10.10 SDK). Apple…

ES6 Angular

After reading that CodePen supported traceur, the ES6 compiler, I set out to demo ES6 classes in Angular controllers. Worked like a charm.

AngularJS: AngularJS 1.3.0 – superluminal-nudge

Awesome Angular update including one way bindings and messages for form validation!

/recently-fixed-headers-on-mobile-websites-have/

[caption id="" align=“alignnone” width=“464.0”]![ Recently, fixed headers on mobile websites have really started to bother me. I want all…

A silent web

The loss of audio on the web. I’m not sold on sound on interfaces in general, but I’d like to see an audio renaissance.

10 Ways to Build Trust on Your Landing Page - UX Movement

A good set of tips for designing a home page.

Sanitizing HTML in Angular

If your Angular app is pulling down a string of HTML to display, and you want to use it as a model:Then use angular-sanitize. It’ll clean up…

<a> in Angular

Today, I was working on making a Rails & Angular project HTML 5 URL compatible. I arrived at a snag, where my anchor tags weren’t causing a…

Upgrading bash

FYI: there’s a security flaw in bash and you should use this answer to check and/or upgrade it.

CSS Animation: An Interactive Guide

Very excited for Vicki Murley’s latest interactive book, on CSS animations.

Material design with Angular

A neat start to Google’s material design with Angular.

Great Angular performance reading

I came across a few great reads on Angular performance:Debouncing model changesOne time data bindingsAn overview

CSS Performance Tooling // Speaker Deck

An in depth and practical discussion about css performance.

Multi devices approaches

The collected insight of Luke W now on iBook.

The Manual Everywhere

The Manual publishes research, personal, long-looking articles on the web and web design. They’ve released their work free of charge, and if…

Glitch Effect on Text

A great use of clipping animations to glitch out text

TIL Firefox hates :placeholder line-height

My input placeholder looked great in Chrome, but too high up on Firefox. After some reading, I chalked it up to FF interpreting line-height…

imcnally/keypress-click

Just released the first version of an Angular directive to perform clicks on keypress.Could it be any simpler?Available on bower: keypress…

SASS @extends for icon fonts

In a project, I use icon fonts, generated from SVGs, for icons instead of images. So, for a down arrow, I can do something like this:And get…

/today-i-set-out-to-create-a-better-submit-button/

[caption id="" align=“alignnone” width=“116.0”]![ Today, I set out to create a better submit button & loading indicator, and was inspired…

Flexplorer

An interactive flex box guide

Git push to a different remote branch

If you want to push a local branch to a differently named remote branch:i.e., if I wanted to push my local branch named to I would:Props

/i-was-inspired-by-keith-clark-to-make-a-parallax/

[caption id="" align=“alignnone” width=“788.0”]![ I was inspired by Keith Clark to make a parallax site using just CSS transforms. Check…

Pure CSS parallax scrolling websites | Keith Clark

A good write up on how to do parallax with transforms.

Paul Irish's bullet proof font-face syntax

transition syntax

I use Dash, and it’s great. But you know what doc is wrong? The CSS transition one! It’s pulled from the Mozilla docs, and it’s not up to…

My advice for Angular and SASS

On a recent project, I was coming up with a style guide. I included these as tips, since they’re really just a collection of best practices…

A centered modal with a backdrop

If you want a centered modal with a backdrop, your markup should look like:And your style looks like:The relation between top, left, and…

Modals in Angular

If you find yourself needing a modal library in your Angular app, check out btford’s angular-modal. It’s got a great API and has a lot of…

/mike-monteiro-how-designers-destroyed-the/

Mike Monteiro - How Designers Destroyed the WorldI saw Mike do this talk at An Event Apart. It’s equal parts inspiring and depressing, and…

SASS Invalid US-ASCII character

Yikes! Today, I was getting a SASS error:For using:At the top of where I used it (_toggle.sass), I added:And compilation is working again…

Compound media queries

Today I learned you can make compound media queries, say if you wanted to make a full height when the screen is both tall and wide enough…

Partial object matching

Oh UnderscoreJS, you’ve done it again. I was looking to test partial matching from objects, i.e.,Is in Turns out with you can do:From the…

/may-i-humbly-present-to-you-the-smoothest-of-all/

[caption id="" align=“alignnone” width=“928.0”]![ May I humbly present to you the smoothest of all the CSS transition functions for growing…

Resizable column with flexbox

I’ve been using Flexbox extensively on a new project, and I wanted to make a resizable column. I started with the jQuery UI’s resizable, and…

Grunt environment configurations

The plugins for grunt environment configurations aren’t great for what I wanted to do. It had to do two things for me:Expose environment…

/i-went-looking-for-inspiration-today-for-a-sliding/

[caption id="" align=“alignnone” width=“98.0”]![ I went looking for inspiration today for a sliding checkbox, and didn’t find any clean…

nameit

If you’re stuck naming a project, module, etc., etc., check out nameit. It’s a random name generator with the right balance of silly and…

Optimising for 60fps everywhere

Discussing the browsers rendering and painting cycle, and how to optimize your application for it.

Design for the Real World

I’m really excited to receive my copy of Design of the Real World by Victor Papanek.Mike Monteiro talked about Papanek’s philosophy at An…

/inspired-by-braintree-payments-pictured-above-i/

[caption id="" align=“alignnone” width=“872.0”]![ Inspired by Braintree Payments , pictured above, I created a mock of it in CodePen…

A little blue box around your button

Stuck with a blue box around your button where you click it? i.e.,Props

Chrome dev tool$

Ain’t this nifty. In chrome developer tools, and are aliases for and , respectively.Props.

Debugging AngularJS Apps from the Console

Some handy tips for debugging Angular apps in the developer console.

Reading about Swift

The more I read about Swift, Apple’s new programming language, the more excited I get about it. It takes some heavy cues from Javascript…

/added-a-little-error-feedback-if-you-tried-to/

[caption id="" align=“alignnone” width=“480.0”] Added a little error feedback if you tried to submit a form by hitting enter and you didn’t…

Simple. Friendly. Smart.

oscarhealth:simple friendly smartOscar Head of Product Eddie Segel outlines the strategies we’ve deployed to deliver a unique brand of…

Writing code for humans. | Human JavaScript

Some good words on javascript up front. I especially like the point that code is for others to read and maintain, not just to function…

My git workflow

When starting a story, bug fix, etc., create a branch of master:Make small, incremental commits on your topic branch, i.e.:Rebase master…

/angular-1-2-has-great-support-for-staggering/

[caption id="" align=“alignnone” width=“912.0”]![ Angular 1.2+ has great support for staggering animations, which helped me easily come up…

Absolute control is relative

Pro-tip from CSS tricks:A page element with relative positioning gives you the control to absolutely position children elements inside of it…

/inspired-by-stripe-i-created-a-slide-in-input/

[caption id="" align=“alignnone” width=“456.0”]![ Inspired by Stripe , I created a slide-in input form. Turns out, it’s straight forward…

State of The Hamburger Buttons — Medium

Looking at alternatives to the hamburger-looking menu icon

Why “Simple” Websites Are Scientifically Superior — Medium

A study of how simple is better.

Bohemian Coding - Sketch 3

A fantastic looking alternative to Photoshop for UI & UX designers

View your local websites on any internet connected device | Finch

A great way to show off or collaborate on your work anywhere.

Why Most People's Charts & Graphs Look Like Crap

Some design do’s and dont’s when it comes to charts and graphs.

Vertical width

Today I used the CSS viewport unit vw to scale the size of a header’s text based on window size:Isn’t that great? It saved me a bunch of…

Alfred workflows

A great repository of Alfred workflows for developers.

Sleep display from the command line

I like putting my display to sleep when I walk away from the computer. It saves energy, prompts for a password on return and is faster than…

Subclasses in Javascript

If you aren’t spoiled by Coffeescript or a framework like Backbone, subclassing in Javascript isn’t straight forward. Check this out:

/sharing-multiple-files-now-with-file-list/

[caption id="" align=“alignnone” width=“1280.0”] Sharing multiple files, now with file list, confirmation, individual upload statuses and a…

Angular Promises 0.2.0

I’ve just updated my library for deferred objects in Angular. Now you can wait for all your asynchronous tasks to be complete before…

New Coffeelint rules

I checked out the latest version of CoffeeLint today, and was excited for some of the new rules, including:No unnecessary double quotesNo…

$q.all resolving immediately on a failure!

Oh, the madness. I spent most of the day figuring out why my batch of async requests was finishing abruptly when one request failed. Turns…

Referencing DOM nodes in Angular expressions is disallowed!

Adding to the list of more Angular quirks, I stumbled on this error:When having a callback to an that removes a class from a DOM element…

--rebase

I helped a co-worker resolve a botched git rebase today. My advice for it was as follows:If you’ve got a topic branch you’ve already merged…

/this-week-make-a-face-look-like-its-chewing-i/

[caption id="" align=“alignnone” width=“548.0”]![ This week: make a face look like it’s chewing. I got well acquainted with animation…

Bye Bye, Passwords

Shop It To Me successfully removed password. I think they read my mind.

Our Infinite <table> | Simple

A great writeup about infinite lists on the Simple web app.

box-sizing: border-box

A good tip for keeping your div sizing sane is to set all elements box-sizing to border-box.

Vertical rhythm generator

Establishing a vertical rhythm in CSS is one of the first things I do for a project. Drewish made a great generator to make it quick and…

Disabling file drag to upload in IE9

On the project I’m working on, the worst browser we have to support is IE9. It’s not a bad problem to have since there are worse. Still, we…

Modernizr in Angular templates

Want to use Modernizr in your templates? It’s pretty handy:Attach Modernizr to $rootScope:And you’re good to go.

A part of everything

I’ve spent the last year or two specializing in front end development. Apart from being the most rewarding and creative outlet for…

ID selectors are so yesterday

I’ve got no use for ID selectors anymore. They’re too specific, not reusable, and dare I say — ugly. Pseudo selectors substitute rather…

/my-current-pride-and-joy-a-dashboard-for-product/

[caption id="" align=“alignnone” width=“1262.0”]![ My current pride and joy – a dashboard for product metrics. With @nonetwork. [/caption]

$window.open

If you’re doing a $window.open in Angular and getting the error:Turns out you might be returning your $window.open call (especially if you…

Get that div all the way down

Say your want a div (i.e., .container) to extend all the way down the page, until about 20px before the bottom. Check it out:Demo here.

/an-oldie-but-goodie-piece-for-work-a-custom-404/

[caption id="" align=“alignnone” width=“968.0”]![ An oldie but goodie piece for work – a custom 404 page. Note: It’s faster in real life…

Vertical alignment

Vertical alignment in CSS is as obtuse as its reputation suggests. I’m a huge fan of Flexbox, and I’m excited that it’s in the latest round…

Finding files fast in OS X

If you’re using the command to search for files via the command line on OS X, might I suggest ?Your normal search:takes 1.872 secondsWhere…

Making it easy

The other day I received the best compliment I could receive as a software developer:“Ian made it really easy to [modify some code]”Because…

/the-final-product-sharing-out-a-file-instantly/

[caption id="" align=“alignnone” width=“400.0”]![ The final product Sharing out a file instantly by way of EATING THEM. [/caption]

dragleave

I had an element that was listening for and . Turns out would be fired even if you hadn’t left the element. When a drag reached the…

TIL $injector

I’d been programmatically injecting dependencies in an angular app by creating a new injector instance:But it turns out you can inject…

'defaultPrevented' of undefined

Stuck on this today, with Angular:Turns out someone had an errant jasmine spy on $rootScope.$broadcast. Just put on the spy, and bam…

RIP Nav arrow

Before I lay this piece of code to rest, an arrow around the current navigation selection, here it is:

<li> inline-block margin

I noticed a funny thing the other day.If you set a group of elements to , you get an awkward 4px-or-so margin on either side. The best…

My Gitlab

Just moved all my projects from Github to Gitlab.com and never looking back!

Guess who's back

After brief forays into both self-made portfolio and open source blogging platforms, I’m back to tumblr with a vengeance. Sadly, I’ve lost…