Welcome to this week’s design and development roundup! 

Happy iPhone 7 release day! And if you aren't an Apple fan, happy Friday! There's always something to celebrate, right?

Anyway, we have a bunch of great resources that the team have put together for you this week. From Google's DevTools to Media Queries in Gmail (a bit of a Google theme going on there!) You can check everything out below.

Adam AvatarAdam

Canary's Shadow Editor

Chrome Shadow DevTools

Photo: Twitter/Google

Ever wanted to fiddle about with shadows in Chrome DevTools? Luckily Google have released a special shadow editor in Canary that lets you adjust offsets, blurs and spreads by dragging the sliders. Perfect for getting that shadow just right.


Ruth AvatarRuth

Media Queries in Gmail

Gmail Media Queries

Photo: Google

Coding up emails is an arduous and archaic task; something no coder relishes working on. When an email template comes into the studio, most of us have forgot how to code in tables, and it’s a constant learning curve remembering how to work in rows and cells over divs. 

So, when google released a post explaining how, from later this month, media queries will be accepted in Gmail and Inbox by Gmail, which will ensure that our message are formatted the way we intended, on every device in every orientation… we rejoiced!

Google have released a doc showing the full list of supported CSS rules, with an example of markup:

    .colored {
        color: blue;
    #body {
        font-size: 14px;
    @media screen and (min-width: 500px) {
        .colored {
    <div id="body">
        <p>Hi Pierce,</p>
        <p class="colored">This text is blue if the window width is below 500px and red otherwise.</p>

Responsive emails are not new, they’ve been around for a while. We can target screen sizes and ensure our tables collapse to make the information easily readable in bite size bits. With the introduction of media queries within our styles, we can only hope now that other email services follow suit, so email coding can be an enjoyable task, and not something we try and palm off to someone else in the studio! 


Juma AvatarJuma

Google’s Clampdown On Insecure HTTP Connections

Google's HTTP Clampdown

Photo: Google

Google announced earlier this month that it would start prompting s warning in its browser when visiting unsecured websites. With the latest update due to roll out at the start of next year, Chrome 56 will now trigger a ‘not secure’ indicator alongside HTTP URLs if the website contains either password or credit card form fields.

With the documented rise in cybercrime, google hopes to push more websites to adopt encryption in order to better protect its users whilst also making its users more aware of insecure websites that they might not have noticed previously. Chrome currently uses a neutral indicator as a warning to alert users when visiting HTTP pages.

The new update will add a ‘Not Secure’ message alongside the indicator with plans being to eventually adopt the red triangle label used for broken pages as the indicator for insecure pages.


Github’s Octoverse

GitHub's Octoverse

Photo: Github

Github released an infographic showing the current state of software development on its platform over the last year. The summary covers a wide range of statistics including the most popular languages and their change in popularity from the previous year.

Microsoft's move to open source seems to have paid out as it ranked highest in organisations with the most contributors. In terms of programming languages, JavaScript saw a 97% increase from the previous year to become the most used language on Github whilst TypeScript and Swift saw the biggest growth gaining 250% and 262% respectively compared to the previous year.


Lewis AvatarLewis

RESTful API Chaining

Woman Coding on MacBook

Photo: Pexels

The reliance on APIs has massively increased in the recent years with the movement of reactive web interfaces like React.js and Vue.js. Whilst researching these, I stumbled across a really nice bit of research and implementation into API chaining. That is, taking 3 consequent requests and chaining them into a single HTTP request.

Whilst nothing official, there’s a very nice document outlining how the principle works for handling requests and delegating the responses that Mike Stowe has produced. If you’re just starting to consider your next API integration for any project, it’s definitely worth planning how you could integrate this chained functionality in your own logic layer.



Timeago.js Logo

Photo: Timeago.js

Whilst you’re probably thinking… yep… there’s plenty of them out there, Timeago.js is different to all the other libraries in that it has no dependencies and is an extremely tiny library (just ~1.75kb). It doesn’t rely on anything like Moment.js to do the hard work for you and it’s super easy to integrate.

// You can pass in your own date to set as the base date (it defaults to now
var timeAgo = timeago();
// As of writing this, you will get ‘2 days ago’

It’s got a easy to use HTML markup too, just use the data-timeago tag

<span class="time" data-timeago="2016-07-30 09:00:00"></span>
// And even better, you’re able to render all these times in real time using the ‘render’ method:
timeAgo.render($(‘.time’), ‘en’);
// To cancel them from auto-updating just clal


Thanks for reading! Enjoy this roundup? Let us know on Twitter or Facebook!