Posts tagged with "code"

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

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

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