Welcome to this week's design & development roundup!

Well, what a week. Rumour has it that Snap is intending to file its long-awaited IPO in the coming few days, and Airbnb CEO Brian Chesky is offering free housing to those left stranded by trumps travel ban. There's clearly a lot going on around the world at the moment, but we still have our weekly roundup with a bunch of great design & development resources, news and tips. 

Adam AvatarAdam

10 Netflix Lifehacks

Netflix Logo

Photo: Netflix

Sure, this isn't explicitly design & development related, but sometimes we just need to take a little productivity break and utilise our procrastination skills. In the spirit of wasting time and doing nothing, here's 10 Netflix lifehacks from the good folks over at The Next Web. 


Ruth AvatarRuth

Rainbow Zig-Zag Background – js Free! 

Rainbow Zig Zag without js

Photo: Codepen

I’m in the process of learning Javascript, and although I’m beginning to understand just how powerful & amazing it is as a language, it’s equally as amazing when you come across a piece of code which has all the features of a js driven project, but it’s in fact all SCSS.

This pen created by Filip Konieczny (which is based off this static image) is a beautiful example of how using the Sass control directives & linear-gradients can create a lightweight background without any libraries or extra resources.


Juma AvatarJuma


Artillery Logo

Photo: artillery.io

Artillery is a free, open source HTTP load-testing tool. Artillery can be quickly installed using node’s package manager (npm) using:

$ npm install -g artillery

A simple test can be run to verify a successful installation, running:

$ artillery dino

in the command terminal should print a random dinosaur if the installation succeeded. Artillery allows users to run custom test scripts written in either yaml or json, users can also perform a quick test without loading external scripts. The following command:

$ artillery quick --duration 60 --rate 10 -n 20 http://local.site.dev/resource

specifies 20 GET requests to be sent every second for 60 seconds creating 10 virtual users per request. Artillery provides feedback for each request sent which look something like this:

Scenarios launched:  5
Scenarios completed: 5
Requests completed:  58
RPS sent: 0.86
Request latency:
  min: 102.4
  max: 3067.5
  median: 325.5
  p95: 2118.5
  p99: 3020
Scenario duration:
  min: 56745.4
  max: 67339.1
  median: 59275.6
  p95: NaN
  p99: NaN
  200: 58

The response is printed every ten seconds by default and a final response is then printed after the test has been completed with an aggregate statistic of all the tests ran.A range of different statistics are displayed in the response including the number of requests, a latency report for each request, duration of each scenario ran and any HTTP status codes returned from the response. Request latency and scenario durations are recorded in milliseconds, p95 and p99 values represent 95th and 99th percentile values. NaN is returned if there are not enough responses received to perform the calculation.

Scenarios are actions that the users would be performing within the website e.g searching, carting items, registration etc. Scenarios are written in the configuration file which is used to run a custom test. Artillery also allows users to specify a file from which values can be imported to be used in a scenario. A CSV file can be specified in the in the command which Artillery can loop through and populate the variables. 

The user must first write a payload and define the fields in the same order that they appear in the CSV file. 

            "duration": 100,
                     "title":" {{ title }}",
                     "firstName":"{{ firstName }}",
                     "lastName":"{{ lastName }}",
                     "dateOfBirth":"{{ dateOfBirth }}",
                     "email":"{{ email }}",
                     "password":"{{ password }}"

The code snippet above shows a POST request with a register scenario where the form fields have been described and the variables are to be read from an external CSV file. The above test would be run with the following command:

$ artillery run registration.json -p users.csv

where registration.json would be the above config file and the users.csv file would be the file with all the user data. Users can also use Javascript to write advanced test scripts. Artillery also specifies the amount of timeouts in addition to the status codes returned. This helps the user to gauge the amount of requests their website can handle for different user scenarios.


Lewis AvatarLewis

Hero Transitions for Swift

Hero Transition Logo

Photo: GitHub

For anyone who has developed anything for iOS, you all know how restrictive transitions are. You've got your basic 2 or 3 animations that seem to do what you're after, but you're fairly constrained in the flow throughout your app. That's where Hero steps in. Hero is a library for building iOS view controller transitions. By providing a layer on top of the UIKit transition APIs, it lets you effortlessly implement custom and refined transitions.


Response Detective for iOS Request Debugging

Response Detective Logo

Photo: GitHub

You've just implemented your latest and best API endpoint into your app. But wait, it's not working. Why, just why! This is where Responsive Detective comes into a world of its own. By providing you with a non-intrusive framework for intercepting any outgoing requests and incoming responses between your app and your server, you can easily debug any request parameters and response headers that fling between the two. If you've been stuck trying to decipher why a simple request isn't working as it should - this is the tool you need.


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