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
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.
VIEW
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!
VIEW
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.
VIEW MORE
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.
VIEW MORE
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.
VIEW
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.
It’s got a easy to use HTML markup too, just use the data-timeago tag
VIEW
Thanks for reading! Enjoy this roundup? Let us know on Twitter or Facebook!