Responsive images using css only

One of the biggest challenges on responsive sites is handling images across different size screens and resolutions. Here we are going to look at the future support for it and also a simple method to solve this problem using css only.

Create a simple site using php and json

There are many solutions to create a site using out-of-the-box software such as WordPress or Django. However sometimes we just need a very simple custom model such as a portfolio list, or some events. You may want to update your data, but have the paging and templates update automatically.

Here is a simple solution which allows you to use PHP to load json files (as data) and then render page templates using TWIG template engine. This solution is fully compatible to then run the json feeds from external sources or APIs at a later date!

Circular loading bar using css only

I've recently started a new project where audio files are played in loops. This presents an interesting challenge as the loading bar makes more sense to be circular rather than linear. Added to this I also wanted to be able to control the amount of time it takes for the animation to complete, and to be able to loop it. Here is how I achieved it!

Facebook login inside a hybrid app using Cordova and OpenFB

Recently i've been playing with Apache Cordova more and more. It opens up a new set of API's, allowing you to use native features of a device from within a web view using JavaScript.

However one issue i've come across is trying to get Facebook Login to work correctly. Here I will explain the different ways to implement Facebook login with a Hybrid app and which method worked well for me.

Improving the AngularJS app starter template

AngularJS is a very powerful front-end library which allows you to build apps and prototypes quickly, without getting bogged down in browser inconsistencies. However when you look at the documentation and examples you will find that they vary massively and there are several ways to write, organise and build an app.

I've built a few projects using AngularJS & Twitter Bootstrap, and have now settled on a structure which feels easy to maintain and understand. I will attempt to explain it here with examples.

Responsive cross browser lightbox using only html and css

There are many great lightbox plugins out there, however lots of them rely on jQuery or other libraries. Also another negative aspect is that they use JavaScript for the resizing and other parts which really isn't needed. So how can we make our own css only efficient lightbox overlay, which works cross browser IE8+?

Responsive mobile dropdown navigation using css only

When building a fully responsive site the layout should adapt to different screen sizes, from mobile to tablet and desktop. Navigations are usually complicated as the space is limited, and functionality can differ between mobile and desktop.
Here we will look at a css only solution to a responsive dropdown navigation!

Native browser touch drag using overflow scroll

Mobiles and Tablets allow you to touch/drag scroll pages. This is a great interaction and the animation looks amazing. How can we get this functionality for desktop browsers using JavaScript? A look at some libraries and how to write your own.

Show your work in context with photo overlay, iframe and 3d css

Creating digital sites and apps is very satisfying. However it's difficult to imagine/explain the context of where the user would use the app or site and who they are. Lets take a look at how we can imitate a real user using your app.

Responsive magazine using Turn.js

Creating a page turn effect is hard...very hard! There are lots of solutions that exist, but many of them miss the small details which make the turn animation look good. Here is a look at how to achieve it using the Turn.js plugin.

Converting YouTube Playlists to Spotify using JavaScript

YouTube is a great platform for music. It has a wealth of content, including official tracks, remixes and versions of songs. It also has lots of unofficial remixes, mashups, live, cover and original songs which you can't find on other music platforms such as Spotify.