Welcome to this week's design & development roundup!

This week, Facebook decided to take on LinkedIn and the professional sector with the announcement of it's new 'jobs' feature and whoever was managing the social media accounts for the London Dungeons on Valentine's Day last week has some serious making up to do after a series of bizarre posts.

Aside from that, we're back with our design & development resources to help you get through the next 7 days!

Adam AvatarAdam

Personality Filled Free Fronts

Fonts with Personality

Photo: Smashing Mag

As designers, we can always do with stocking up on a wide variety of fonts, you never know what style a project is going to call next. 

Cosima Mielke has put together an extensive list of 30 free fonts (with personality) to elevate your designs and add that finishing touch. Grab 'em while you can!


Creating Non-Rectangular Headers

Non-rectangular headers

Photo: CSS Tricks

The web is a playground! Gone are the days on being contrained by rectangles and straight edges. With SVGs, designers & developers alike have the ability to create anything they feel like.

Below is a little guide on creating irregular shaped headers, and a handy chart to weigh up what method to use!


Ruth AvatarRuth

Vue.js Pokémon Battle Tutorial

Vue.js Pokémon Battle Tutorial

Photo: Michael Mangialardi

I recently stumbled across this incredible tutorial by Michael Mangialardi on creating a Pokémon battle using vue.js – a framework I’ve been looking into for some time after being challenged with it in the studio late last year.

Now, anything Pokémon & code has my attention, as you can’t beat a good nostalgia hit - so when this popped up on my twitter, it wasn’t just a mindless ‘retweet’, I actually spent time reading through the entire article (which took Michael 15 hours to write! so it deserved some attention).

Looking at the code, it doesn’t seem that much (which is incredible as it is both cleanly written and simply annotated so anyone can understand the process). It follows Michael as he creates pure CSS shapes for his battle ground, creates a template and injects the data, and style binds to output the calculated HP bars, as well as a full scale fight simulation which exactly mirrors what 90’s kids will remember on their gameboy. 

The Code 

In no way am I saying that this was an easy project, as I myself am an absolute novice – but what this tutorial did do was allow anyone who followed it to gain a very clear understanding of just how powerful vue.js is, and how minimal and unbloated the code base is to create such a brilliant little app.

The Demo

Juma AvatarJuma


Carbon PHP API code

Photo: Carbon

Carbon is a PHP API date extension that aims to simplify PHP’s DateTime class. Carbon requires PHP 5.3 and above and can be installed via composer using:

$ composer require nesbot/carbon

Using carbon, the following php DateTime code,

echo (new DateTime())->format(‘Y-m-d H:i:s’);

can be replaced with 

use CarbonCarbon;
echo Carbon::now();

Carbon also includes other static instantiation helpers for creating common instances, these include today(), tomorrow() and yesterday() each of which accepts a timezone parameter and can be used like below:

$today = Carbon::today(‘Europe/London’)
echo $today                            
$tomorrow = Carbon::tomorrow()
echo $tomorrow
$yesterday = Carbon::yesterday()
echo $yesterday 

Furthermore, Carbon also allows creation of dates by inheritance from other instances using the instance() static method. For example a DateTime instance can be inherited and transformed into a Carbon instance like such:

$date = new DateTime (‘first day of this month’);
$carbon = Carbon::instance($date);
echo $carbon->toDateTimeString();
2016-02-01 00:00:00


Lewis AvatarLewis

Vue.js v2

Vue.js Logo

Photo: Instagram

Although 90% of the API is the same in Vue.js v2 as in v1, v2 provides the same core concepts but with a turbo performance gain. Vue 2.0 introduced its own virtual DOM implementation which means handling templates is slightly different:

"Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal amount of components to re-render and apply the minimal amount of DOM manipulations when the app state changes."

The virtual DOM handles gives developers a huge gain in runtime optimisation by allowing you to precompile your templates into a Javascript ready solution.

Vue 2.0 also provides a new lifecycle of each component, moving from compiled to mounted, whilst also deprecating beforeCompile, attached, detached and ready.

If you've not yet migrated to Vue 2.0, there's a fantastic migration helper that will analyse your existing codebase and given you guidance to resolve any changes introduced in Vue 2.0 (mostly semantic renaming).


We hope you found this week's roundup useful! If you have any suggestions for contributions, let us know on Twitter or Facebook!