Welcome to this week's design & development roundup!

And of course, welcome to April! Can you believe we're into the fourth month of the year already?!

This past week, Facebook finally rolled out its Snapchat-clone 'Facebook Stories' out to all users on its app. Personally speaking, I've had 3 of my friends use it in the past week, I'm not sure what it's like across the board but I feel like that speaks aplenty for its adoption so far. On the plus side, it hasn't turned into the absolute disaster that is WhatsApp Status! 

But forget about all of those cloning shenanigans and jump into our roundup this week that features some great resources to get your Monday started!

Ruth AvatarRuth


Mega Tags Logo

Photo: Mega Tags

Starting a fresh header for a website initially is calming - it’s the beginning of something new, untainted. But as soon as you need to start implementing all of the new, required and much needed meta, you realise it doesn’t just flow naturally out of your fingertips. Gone are the days of only a few lines of meta, these days we need multiple lines of data to ensure our sites proudly showcase themselves on each type of platform.

MegaTags is a nifty little site created by Feifan Wang which allows you to input your site's information and generate the most accurate social media meta tags for Twitter, Facebook, Pinterest, LinkedIn, and Google.

Firstly, you’re able to select what kind of website you wish to generate your meta for, with an optional question of which platforms you would like to support (Open Graph & Twitter). After you generate this first section, you input your sites information and you’re done! It’s so quick, i’m quite embarrassed I haven’t found this brilliant site sooner. (Thank you ProductHunt!) 

A great extra with MegaTags is the various links to the platforms validation pages, to ensure your meta tags all work as intended. More times than not, we just shove lines of code into our site and think nothing of it, in the hope it just ‘works’ but with these external links we can make sure our site is generating the right meta first time round!


Juma AvatarJuma



Photo: D3

D3 or Data Driven Documents, is a javascript library for visualising data. D3 can be installed via NPM or loaded directly from a content delivery network. Users can also choose specific D3 modules, the below code would install D3's selection micro-library.

D3 uses selectors defined by the W3C Selectors API to manipulate DOM elements. For example:

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
    var paragraph = paragraphs.item(i);
    paragraph.style.setProperty("color", "white", null);

The above loop can be simplified as such using D3's selectors.

d3.selectAll("p").style("color", "white");

Traditionally an array of data can be used to generate a basic HTML table, the same data can also be used to create an interactive graphical chart with D3. D3 also has support for importing data files e.g. csv.

d3.csv("homicides.csv", type, function(error, data) {
  if (error) throw error;
  var x = d3.scaleTime()
    .domain([new Date(2015, 0, 1), new Date(2016, 0, 1)])
    .rangeRound([0, width]);
  var y = d3.scaleLinear()
    .range([height, 0]);
  var histogram = d3.histogram()
    .value(function(d) {
      return d.date;
  var bins = histogram(data);
  y.domain([0, d3.max(bins, function(d) {
    return d.length;
10097071,HY285524,06/02/2015 09:41:19 PM
21907,HY291065,06/07/2015 03:50:00 AM
21908,HY291065,06/07/2015 03:50:00 AM
10156667,HY345298,07/18/2015 03:17:00 AM
10244875,HY433114,09/22/2015 12:50:00 AM
22430,HY551683,12/27/2015 02:05:00 PM
10047709,HY237154,04/26/2015 09:58:36 PM

The code snippet above shows how a basic histogram graph is created by reading data from a CSV file and plotting it. The histogram can then be rendered as an SVG and presented inside an element.

To see a wide range of different use cases for d3 you can visit: https://bl.ocks.org/mbostock


Lewis AvatarLewis

PSR-7 and PSR-15 Server Timing Middleware

PSR-7 and PSR-15 Server Timing Middleware

Photo: Pexels

The latest build of Chrome now lets developers explore the Server-Timing header through the developer tools. This Slim middleware implements the Server-Timing header and lets you effortlessly introduce timings across your own Slim application which can be displayed on the Chrome developer console.

The package comes with two utility classes that you can introduce to your Slim container. The first is ServerTiming that tracks three default timings: Bootstrap, the time taken from the start of the request to the execution of the first incoming middleware, Process is the time taken for the server to generate the response and process the middleware stack and Total is the total execution time to complete.


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