Video: Berg Takes Washing Machines to the Next Level with Cloudwash

February 26, 2014 0 comments

Being able to connect everyday devices to the Internet and control them with our smartphones/tablets has got us all excited over the last few years and for good reason. The idea of a ubiquitous future where we are able to run baths, heat homes and order more milk from our fridge are just some of the early conceived ideas.

Since then this space has increased dramatically. There are 9 billion connected devices at present and by 2020 that number is going to explode to 24 billion devices, according to new statistics released by GSMA. The total number of mobile connected devices doubles from 6 billion today to 12 billion by 2020.

But now that the idea of a connected world has started to mature, we are seeing some really exciting innovations in this space. None more so than the clever guys at Berg, They have come up with an abstracted API that looks to offer users the ability to control their every day white goods via a cloud based platform. Their first Prototype is called Cloudwash and allows complete control of their connected washing machine. This particular case study I found interested as it takes us through their design process and how they envisage an “Internet of things”.

A SASS based Responsive Breakpoint Helper

February 17, 2014 0 comments

Do you have a hard time knowing when your SASS breakpoint variables are taking effect? Sometimes I like to have a visual reminder of the current breakpoint I’m on so that I can see at a glance when styles are being applied. To fix this I created a simple helper to provide just that, a small element that sits at the top left of your browser window with the variable name that is currently active.

The helper itself is very simple, it consists of just a single SCSS file which has a set of base variables I use for each Breakpoint followed by matching media queries. Each media query adds an element to the body using the :before pseudo element with a background colour and contrasting text.

Breakpoints

I tend to use the following breakpoints:

/* BreakPoint Variables
******************************************/
$BP-MOBILE-PORTRAIT : 360px;
$BP-MOBILE-LANDSCAPE : 640px;

$BP-TABLET-PORTRAIT : 800px;
$BP-TABLET-LANDSCAPE : 1280px;

$BP-DESKTOP-SMALL : 1024px;
$BP-DESKTOP-MEDIUM : 1220px;
$BP-DESKTOP-LARGE : 1440px;

These are based on the current device viewports, but as more and more devices come out this list will no doubt change. You can customise these to suit your needs. I’ve found these to work well on previous projects but I’d always suggest checking the latest viewport sizes when starting out on a new project. For a comprehensive list of viewports you can use great sites like http://viewportsizes.com/

For a look at the code and for instructions on use you can visit my github page where you will be able to clone the repo and test it out for yourself.

Running the Demo

To run a demo use the following on the command line making sure you have git, node and gulp installed.

git clone https://github.com/owzzz/breakpoint_helper.git
cd breakpoint_helper

Gather Demo Dependencies

npm install

Compile Sass

gulp

open index.html in browser

If you just want to include it on your project without the demo then you can use Bower, the client side package manager.

Installing with Bower

Make sure you have Bower installed by running
npm install -g bower

Once Bower is installed you’ll then need to install the helper directly.

To Install

bower install breakpoint_helper

Pacemaker

Djing comes to Spotify with the new iPad app – Pacemaker

February 4, 2014 0 comments

With the rise of the Internet and the major shift in how people consume media, few can argue with the success of Spotify and it’s streaming music platform. Launched in October 2008 by Swedish startup Spotify AB. Spotify with a handful of other competitors have changed how people consume, share and pay for music. And as the platform has matured Spotify has introduced unique functionality and features, none more so than the ability to add apps to your dashboard.

With all the apps currently up for grabs the Pacemaker app has to be one of the best. Whether your a budding DJ wanting to put that house playlist to good use or someone who likes creating the perfect party mix, this app has a whole range of features that will impress even the biggest critics of software based DJ products.

Pacemaker is the first DJ app connected to Spotify. This gives you millions of tracks at your fingertips and endless possibilities to create something new or simply find and mix the music you love. Currently the application is for iPad only and comes as part of a free trial but has a whole host of features, including Beat sync, equalisers, crossfader and scratch. It also comes with predefined effects so you can make any track sound fresh and unique.

Though you can pick up the application free of charge, it’s worth noting that several features require in-app purchases, which does limit what one can achieve with Pacemaker. It also beefs the price up, too, since single effects appear to carry £1.99 price tags.

But do not let this get you down too much, because even in its most basic, unembellished, and free form, Pacemaker is a fun iPad app that music lovers will enjoy playing around with.

Video: Amazing Footage Captured by a Remote Controlled Flying Drone

January 30, 2014 0 comments

As far as the application of drones go, few will argue that this could be one of the best examples yet. Cinedrone – the US company behind the incredible footage - offer custom built ready to shoot aerial cinema systems, deploying drones which appear to be on steroids. The results are jaw dropping and showcases some of the most unique perspectives of our earth’s landscape in high definition.

Ásgeir-in-the-silence

Artist Review: Asgeir – In The Silence

January 28, 2014 0 comments

Icelandic singer-songwriter, Ásgeir Trausti, may only be 20 years old but he already last summer made his mark on the Icelandic music scene with his two singles, Sumargestur and the smash-hit Leyndarmal. Both singles belong to his just released debut album Dýrð í dauðaþögn that was awaited with much excitement in Iceland. A digital presale on Icelandicmusic.com, a week before the release of the album, broke all records and showed clearly that Ásgeir Trausti had already created a name for himself.

Born and raised in the countryside of Iceland, Ásgeir Trausti comes from a family of musicians. He trained on classical guitar but was aiming for a career in sports when he suddenly made a U-turn after being encouraged to take his music more seriously. Ásgeir Trausti played (and still does) with the band Lovely Lion that did very well in the Icelandic Battle of the Bands in March this year. But it wasn’t until he took some demos of his own songs to producer Gudmundur Kristinn Jonsson, also known as the guitarist in the Icelandic reggae band Hjálmar, that the wheels began to turn for real. Now, only several months later his debut album has been released in Iceland with critical acclaim.

All songs are by Ásgeir Trausti but his father, Einar Georg Einarsson, and a friend, Julius Adalsteinn Robertsson, write lyrics. The album is so far only to be released in Iceland but an English version of it is in the making. For those who can’t wait or just prefer Icelandic music with Icelandic lyrics, the Icelandic version of the album can be bought digitally on Icelandicmusic.com.

GULPJS – 3 Things Worth Knowing About The Streaming Build System

January 28, 2014 0 comments

As far as tooling goes, we’ve come along way in web development. It’s not long ago that all you needed to put a website on the Internet was a handful of css, html and javascript files, maybe a sprinkling of images and an ftp client to push your creation out to the big wide world. Sadly those days of simplicity have moved on. As our sites and apps have become more complex, as we use more technologies, frameworks and libraries we require a workflow to match. To help us optimise and refine our workflow we’ve built tools like Yeoman and Grunt to help us scaffold our projects and at breakneck speed.

Those familiar with Grunt know that it’s power has been unrivalled and has been the bedrock of all modern day projects. If there was a task that could be automated then no doubt a solution was created with Grunt. You need to optimise images? Concatenate and minify Javascript? Compile your SASS files? There’s a Grunt plugin for all that good stuff. We thought that this was a great solution but we soon started noticing that as our Grunt configuration file became more bloated with all the tasks to help us in our quest for development Zen, we have found that Grunt’s performance tails off and in a lot of cases becomes problematic and frustrating.

Gulp

With performance being one of the main drawbacks of Grunt, Gulp – a new streaming build system – looks to address those problems by switching tack and offering a solution which appears to fix bottlenecks all too familiar with the Grunt workflow. Below I run though some of the 3 things which you might find interesting when using Gulp compared to Grunt and what possible benefits they have over it’s predecessor.

 

1. Leverage the power of Streams for simplicity and efficency

Gulp’s main differentiator from Grunt is the fact that it uses Node streams to process files. The concept of streams are not new, they has been present within UNIX for decades in the form of pipes. Streams provide a simple I/O mechanism which takes a chunk of data passes it into memory and then outputs it into another form. These inputs can be pushed through multiple processes without having to write out the results temporarily to disk. This use of streams in Gulp means it has the upper hand when it comes to performance when compared with Grunt. Every time a task is run with Grunt it has to create a temporary file on disk to store data for processing before it is able to move onto the next task. This process takes can take considerable amount of time when lots of files are run through multiple tasks and if your not using a plugin like newer you will notice Grunt process all files even if only a single file has changed. For more information on streams you can find a great write over on github, created by substack.

2. Gulp comes with Asynchronous right out of the box

Gulp performs tasks asynchronously and generally this is great. It speeds up processing and improves concurrency, but on other occasions it can give you adverse  effects when trying to run through a sequence of tasks. For example, I’ve come across situations where running move and clean tasks on target files can sometimes delete newly moved files when in fact what we were expecting was for the clean task to clean out the target directory and then for the move task to push files to the fresh target folder. This problem does have solutions in the form of callbacks but it requires you to understand Gulp’s API in a bit more detail. If you’d like an easier option there are also nice modules like async which are primarily built for Node but can be used within the context of Gulp (It’s just Node under the hood after all). Async allows you to run task asynchronously or in sequence and can alleviate a lot of initial reservations when taking to Gulp..

3. Declarative Configuration

One of the first things I loved about Gulp was it’s small and concise API. There are 4 main functions you need to work with and you’ll use them over and over.

gulp.src(globs[, options])

Takes a glob and represents a file structure. Can be piped to plugins.

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

gulp.dest(path)

Can be piped to and it will write files. Re-emits all data passed to it so you can pipe to multiple folders.

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

gulp.task(name[, deps], fn)

Define a task using Orchestrator.

gulp.task('somename', function() {
  // Do stuff
});

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

Watch files and do something when a file changes. This always returns an EventEmitter that emits changed events.

gulp.watch('js/**/*.js', function(event) {
  console.log('File '+event.path+' was '+event.type+', running tasks...');
});