Blog // Michael Bromley

14 Oct 2014
Writing Multi-Element Directives in AngularJS
AngularJS 1.2 introduced a new feature for the ngRepeat directive which allows the directive to span multiple elements, as opposed to just the single element that it is attached to. This is done by appending -start and -end to the directive name in your view: <tr ng-repeat-start="item in items"><td>{{ item.name }}</td></tr> <tr ng-repeat-end><td>{{ item.innerLegMeasurement }}</td></tr> The code above will output two table rows for each item in the collection - something that was simply not possible to achieve before.
24 Sep 2014
CSS + JavaScript 3D Butterfly: A Case Study
- code
- creative
- JavaScript
I’ve recently been having lots of fun with CSS 3D transforms and animations. As part of a demo for a talk I am giving at the ViennaJS meetup group this month, I put together a demo that showcases how some fairly sophisticated 3D effects can be achieved with pure CSS, and made interactive with a little JavaScript. _Note: The 3D effect is not currently supported by Internet Explorer. _ CSS 3D Butterfly Demo View The Demo
19 Sep 2014
Experiences Building a Website with AngularJS + WP-API (WordPress API)
- AngularJS
- code
- JavaScript
- Wordpress
I’ve just completed and launched a complete re-write of this website. Since the first iteration (started around nine months ago) and this new one, I’ve learned a lot about the fundamental technologies of the web: HTML, CSS and JavaScript; about AngularJS in particular; and about things like build systems and application architecture. Therefore I wanted to share a few thoughts and experiences I had building this site. This is Not a Tutorial Attempting a tutorial on such a general topic would require a whole series of specialised posts.
07 Aug 2014
A Note on Touch (Pointer) Events in Internet Explorer
- code
Using touch events in your JavaScript app is as simple as adding event listeners like this: myElement.addEventListener('touchstart', myStartHandler); myElement.addEventListener('touchmove', myMoveHandler); myElement.addEventListener('touchend', myEndHandler); While making an app which needs to work cross-browser with touch, I had some difficulties getting it to work with Internet Explorer. I have version 11 installed on my desktop and I also have a Windows Phone 8 which comes with IE 10. I wanted to override the default scroll handling of the page and implement my own function to handle scrolling.
02 Jul 2014
Enable Rich Social Sharing in Your AngularJS App
If you are building a public-facing app in AngularJS, you’ll want your users to be able to share it via social media. Indeed, for certain apps, this may be the most important channel of promotion. By “rich social sharing”, I mean something like this: Rich sharing on Facebook Rich sharing on Twitter As you can see, certain sites allow Facebook, Twitter et al. to fetch more than just the standard page title and image.
18 Jun 2014

A Killer Startup Idea

It was 2am, and I had been awake for about 30 minutes, bouncing my 7-month-old son to sleep. After the first few minutes of blurry-eyed swaying, I’d reached that familiar zone of high alertness and lucid thinking. Unable to go back to bed until my son was soundly asleep, yet physically unable to do anything productive with all this waking time, I started thinking about how these nightly hours could be better spent.
16 Jun 2014
What Makes A Good Tech Talk?
When I moved to Vienna last October, I was pleased to find a very active and vibrant development community. Just this week alone, there have been at least 19 tech meetups in the city. A quick search on meetup.com reveals 46 tech-related meetup groups at the time of this writing, and there’s even a website dedicated to listing all the meetups each week. During my time here so far, I’ve found the local tech meetups a great way to learn and improve as a developer, as well as a way to get involved in the community and get to know some cool people in a new city.
13 Jun 2014
Site-Wide Split Tests With Google Analytics Content Experiments
- code
The Problem You use Google Analytics on your website and you want to do an A/B or multivariate test on some site-wide change, rather than just testing variations of a single page. An example - and the scenario which lead me to devise this solution - was testing how the presence or absence of the logo of a well-known security company in the footer of an e-commerce site would affect sales, the footer appearing on every page of the site.
09 May 2014
Paginate (almost) Anything in AngularJS
The ng-repeat is probably one of the most oft-used of all the core AngularJS directives, and with good reason. It offers amazing flexibility and is probably one of the first things to really “wow” you about the framework. Whenever I’ve used ng-repeat, however, I’ve usually also run in to the need to paginate the items being repeated. It seems like there should be some way to do it that is as simple and intuitive as the ng-repeat directive itself.
04 Apr 2014
Auto-breadcrumbs with angular-ui-router
For those that don’t know, angular-ui-router is a router for AngularJS that replaces the one that comes built-in, and adds a whole lot of powerful features. I’ve been using it on a project I’m working on and I’ve found the ability to nest routes to be really powerful and a nice way to organise routes (or states, as they should be more correctly called in the context of ui-router). I needed a way to auto-generate breadcrumbs based on this hierarchy of states, but didn’t find any pre-packaged solution, so I put together my own.