CSS vertical rhythm with typography units

One of the issues frontend developers have when creating their base grid is setting up the typography. Web typography is not consistent across browsers and very hard to make pixel perfect. Here are some simple steps to ensure the vertical rhythm of the site is consistent.

Using inline images as background images with dynamic height

CSS background images provide great browser performance and allow you position and resize images to cover or fit to a box frame. However sometimes as a developer you might need to use inline images due to limitations out of your control. Here is an example of how that can be achieved.

Recording, syncing and exporting web audio

I'm currently working on a side project which allows musicians to collaborate and record music. For this web app I needed to overcome several technical challenges which I will explain for you today!

Responsive css only carousel

A while ago I looked at some methods to create css only carousels. Since then new css features have become widespread allowing us to do more. Here i'm revisiting the css carousel to see what we can achieve with very simple code!

Wordpress, Timber & Twitter Bootstrap

Wordpress is one of the most popular CMS blogging platforms on the internet today, with the latest updates it's really improved in terms of user experience for the admin user. However there is still one massive pain for developers in the template system....where there isn't really one!

Responsive and adaptive images using focus points

Devices and computers come in millions of shapes and sizes it's very hard as a web developer to make your images fit and look good at every size. In this post i'm going to look at a second solution which uses focal points to tell the browser what should be on screen.

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.