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.

Detect device, browser and version using javascript

The best way to decide which functionality to use is feature detection. If the feature exists then that  functionality is allowed to run. Libraries such as Modernizr give you feature detection out of the box or you can write your own.

Full page site with vertical centering using css only

One of the big trends on the internet is the full page site. It consists of a single page site with multiple sections which you can scroll through. The trick of this is to have each section fill the screen and to centre the content inside.

Internationalisation & Localisation in AngularJS

Set up AngularJS projects to be translated using html template tags. This post looks at how you can use the Angular libraries plus a custom filter to ensure content is contextualised to the user.