Generate and host static sites using Angular Universal and Amazon S3

In this post we look at how Angular Universal and Amazon S3 can be used to generate and host a static site. We also will look at how to support pages which have not been statically generated, but exist via an API.

Continuous Integration with Gitlab, Selenium and Google Cloud SDK

As development tools have improved, we have started to see Continuous Integration workflows which allow code to be stored, tested and deployed easily. This post is going to look at one of the most popular open-source platforms for developers: Gitlab.

Python, Docker and Amazon Elastic Beanstalk

When delving into the world of infrastructure there are many choices of cloud platform, ranging from completely custom setups, to off-the-shelf solutions such as Google AppEngine.

Today i'm looking at how off-the-shelf infrastructure (Amazon Elastic Beanstalk in particular) can speed up DevOps and deployments, and reduce the overhead on maintenance.

Universal decimal calendar and time system

Our calendar and time system has been around for a very long time, it works well but there are still many painpoints especially timezones,  converting minutes into hours and more.

Here we are going to look at creating a new date/time system which is decimalised and can be used worldwide.

Detect speech using the Web Speech Recognition API

As the web matures, we can use interfaces and sensors with improved cross browser/device compatibility. However normally we are given access to the raw data and expected to do our own processing. This has made detecting speech in audio data very intensive, and inaccessible for lower end devices.

The formalising of a Web Speech API opens up a realm of possibilities because it moves the processing into the native browser code and out of javascript. We can now access speech input data much easier and efficiently.

Use ES6 JavaScript today using System.JS, Babel, JSPM and Gulp

Developers are always looking forward to future JavaScript features, including structured classes shorthand coding and helpers. However many of these features are not standardised and/or compatible with all modern browsers, and the ones that are agreed are not supported by legacy browsers.

There are many tools which allow you as a developer to write using future features, and the tools will convert your code to support other browsers. Today we are going to look at how they work and an example workflow which you can use now on live projects.

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.