Welcome to this week’s design and development roundup!

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

Canary's Shadow Editor

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

Media Queries in Gmail

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:

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

Google’s Clampdown On Insecure HTTP Connections

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

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

RESTful API Chaining

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

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’
timeAgo.format(‘2016-09-14’);

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
timeAgo.cancel();

About the Author

With a passion for all things creative, Adam has been designing for over 5 years, meaning he knows Photoshop and Illustrator inside-out. From web design, to pixel art, to painting and logo design, he’s probably had a go at it. He’ll be the one you’ll be speaking to regarding any design related queries. Outside of work, Adam loves fine art, music and all things internet - you’ll always find him on some social network. Oh, and he loves cats!