Trimming videos using AngularJS

Playing video within the browser has become a fairly painless experience using the html5 video player. But there are many challenges as you add complexity to the controls. One of these is how you could set in and out points.

Here we will look at a way to trim videos using the angular-slider library and AngularJS.

A/B Tests using Google Analytics, Content Experiments and JavaScript

When creating templates on high-end websites, it's useful to know how well the template was performing before and how that performance changed after updating. This can be achieved using Google Analytics (bounce rate, session duration and goals).

But what happens when the performance drops drastically and you want to go back to the original? How can you do this without risking losing sales or traffic? A/B tests allow you to test multiple variations of the template and measure which performs better.

Here we will look how to do it using free Google tools.

Creating a drag drop upload area

Drag and drop functionality has traditionally been a pain for developers to support. But with advances in browser compatibility it is really easy to support.

Here we will look at a quick way to implement drag/drop uploads without any external libraries/code.

Block based WYSIWYG editor using Angular

If you haven't already seen Sir Trevor JS, then you must take a look now! It allows the user to insert blocks of different types, with a really nice interface.

There are many benefits to this approach in a responsive site, as the content types are separated using json and can be outputted in rows. I have used Sir Trevor JS along with Wagtail Streamfield, which does a similar thing.

But what if we want the same experience on an Angular project? well unfortunately the only version available is a wrapper around the main version, without proper Angular integration. I decided to write my own which could support the integration better. Here is how I did it.

CSS only parallax using perspective and transform3d

When building single-page sites, generally we rely on javascript plugins to create effects for images and animations. Here we are going to look at a simple header parallax effect using only css

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.