Blog
$
-
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. -
CSS + JavaScript 3D Butterfly: A Case Study
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 -
Experiences Building a Website with AngularJS + WP-API (WordPress API)
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. -
A Note on Touch (Pointer) Events in Internet Explorer
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. -
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. -
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. -
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. -
Site-Wide Split Tests With Google Analytics Content Experiments
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. -
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. -
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.