Posts tagged with "JavaScript"

  • 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.

  • Simple 1D Noise in JavaScript

    I am working on a side project in which I needed to generate some “random”, or more accurately, unpredictable motion. At first I tried using the Math.random() method, and using those values to set the position of my moving element. This, of course, looks terrible because the element will simply jump around to various points, “teleporting” between them. After searching around for a bit (one of those slow search processes where you don’t really know what you are looking for) I figured out I needed some kind of noise function.

  • Audio Visualization with Web Audio, Canvas and the Soundcloud API

    Audio visualization Update 05/02/14 - This demo got featured on Google’s Chrome Experiments website! This has generated a lot more interest (as in hundreds of views per day rather than one or two per week) so hopefully we will see some improvements from the community via the GitHub repo - I’ve already had a first pull request adding some very cool new functionality! Update May 2015 - As of latest versions of Chrome (42+) and recent versions of Firefox, changes in the way cross-origin audio is handled mean this demo may not work.

  • Using Disqus with AngularJS

    Getting the comments platform Disqus to work with your Angular-based website is probably not going to be as simple as dropping in the default Disqus code snippet into your HTML template. Due to the way Angular loads its templates, it is likely that the Disqus script will not get executed and you won’t see the comments box on your page. I searched on Google to see if there was a documented way to get Disqus to work with Angular, and I came across this project on GitHub.

  • An Ordinal Date Filter for AngularJS

    The AngularJS date filter is used to format a time stamp into a human-readable date string. For this website, I wanted to be able to format the date so that the day of the month included the English ordinal suffix, 1st, 2nd, 3rd, 4th etc. Having worked with PHP’s date() function, I expected there to be a format string for this very thing, but was surprised to see that there isn’t.

  • How I got Zurb Foundation 4 to work with IE8 with zero lines of code

    I recently did a re-design of a medium-sized e-commerce website with version 4 of the excellent Foundation framework from Zurb. Right at the very end of the project, I realised that my carefully-crafted design completely broke on IE8. It literally looked like it had been run over by a bus and had flattened into a big tyre-track of dead webpage running down my monitor. But…why even support IE8? Good question. The Zurb guys themselves made the decision to drop support from version 4 onwards.