Latest Posts



"RT @charlesLeahy1: Bloody migrants coming over here blocking our roads #amphibiancaravan"

@ashleyford 13 hours ago

"RT @RandyRainbow: This is the only news I care about today ūü¶É"

@ashleyford 4 days ago

Web design and development tutorials, scripts and downloads designed for beginners right through to advanced developers

Awesome Material inspired audio player

I came across this nicely designed audio player on CodePen, put together by Michael Zhigulin It uses the waves.js click effect library inspired by Google’s Material Design. For this tutorial demo I’m using a royalty free track from What is Google Material? Google’s Material Design language has begun making its [...]


Periscope style heart effect with CSS and JS

If you’ve seen the Periscope app heart animation, you’ll know what I’m talking about. It’s the one where you tap on the screen and a flurry of hearts appear and fade out animated up the screen. If you’re building a iOS native app you can check out this code, which uses the react native playground. The HTML This [...]


Getting started with easelJS

Currently, there are many frameworks for developing Javascript games like CraftyJS, ImpactJS, LimeJS and others. EaselJS gained popularity for being utilized in one of the first HTML5 game, Pirates Love Daisies. EaselJS is pretty neat because of it is extensively documented with an extensive list of examples, interesting projects and so on. [...]


Shuffling through CSS background gradients¬†is a great little resource for finding inspiration for CSS background gradient colours, and it makes it super easy to get the CSS to paste in your project. So here’s an awesome tool that shuffles through the gradient colours with a fade transition. We take the json file from the git repo and use that to loop through [...]


Detect an AdBlocker with JavaScript

Adblockers are big business on the internet today, but how can you detect if a user is using an adblocker? The answer is pretty simple and only requires a few lines of code. First we need to set a variable to ‘true’, then we load a javascript file called adframe.js within this JavaScript file we set the variable to ‘false’. [...]


Build a music sequencer with jQuery

I’ve been fascinated over the last few days by sampulator,¬†a great little project by @stevespaced¬†that allows you to sequence sounds to build up a song. After a bit of research I¬†came across this code by Joe Harry¬†which uses the Howler.js audio library to sequence and play the sounds. The¬†sequencer is based on the¬†Yamaha’s [...]


Awesome modals with animatedModal.js

Recently we had to use animatedModal.js in a project. The brilliant work of Jo√£o Pereira. Let’s¬†explore this jQuery plugin in more detail and how to use it on your site. We¬†used it in the product comparison plugin post that you can see here The animatedModal.js is basically used to create CSS3 transitions. The plugin produces a responsive [...]


Get started with Grunt

What is Grunt? It can be summarized as an automation tool. Developers have to make sure that their code is to develop, and develop well. That‚Äôs why Grunt helps them to focus on developing quality code by automating tasks such as file minification, code and compile Sass and Less, etc. In this tutorial, I’ll be teaching you how you can [...]


CSS and JavaScript mobile UI preview tool

I stumbled across an awesome post on Codepen by Felix Rilling¬†which uses pure CSS to display a phone with an iframe embeded to enable you to preview a responsive site. You can view the original code he wrote here. I’ve taken the code and modified it to make it easy to preview a site for different mobile screen sizes and added a rotational [...]


jQuery product comparison plugin

Here’s a simple way for customers to be able to compare products to help them make a purchase decision. In the demo you select which products you want to compare and hit the ‘compare’ button which displays a fullscreen¬†modal displaying¬†¬†further information about the products. Let’s delve into the code. For this example [...]