Welcome to this week’s design and development roundup, packed full of news, resources and freebies.

This week, Instagram officially announced its business tools to help brands and publisher gain insights into their audience and followers and Tesla & SpaceX CEO Elton Musk claimed that he wants to have people on Mars by 2024. Something for us to look forward to?

Back to reality, check out the design and development resources we’ve gathered for you below!
 

Adam AvatarAdam

New /r/CodingHelp Subreddit

Coding Help Subreddit

Photo: Reddit

Need a hand with some code but intimidated by the larger knowledge sites? Reddit user /u/DudeThatsErin has created a specialist subreddit dedicated to helping solve coding questions of all types. Head over if you’re struggling with something!

VIEW


Ruth AvatarRuth

Visa’s Payment Ring

Visa Payment Ring

Photo: VISA

Olympic athletes will sport Visa's new payment ring in Rio. By a simple wave of the hand, you can order a coke, without worrying about needing to charge it, as it draws a tiny bit of power from the payment terminal.  If the ring ever goes missing, Visa has also allowed for simple deactivation by smartphone, and thieves who find one won't be able to get anything useful out of it thanks to tokenisation.

VIEW

Asciiflow

Magnitude ASCII

Photo: Made by Magnitude

For anyone wanting to create some smart ascii art for their html pages, or even just for fun, they can now recreate their designs using this simple online tool!

VIEW

Breaking Out of the Viewport

Viewport

Photo: Cloud Four

If you’ve ever wanted to create a full page hero banner on your site, without breaking out of grid, you can actually do this so easily with this simple piece of CSS!

.u-release {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

Any element with this class applied will meet the viewport edge, regardless of container size.

VIEW


Juma AvatarJuma

Sourcegraph

Sourcegraph

Photo: Sourcegraph

Sourcegraph is a chrome extension that allows you to browse github like an IDE with the ability to jump-to-definitions, view documentation tooltips and cross-references. Sourcegraph’s global search allows developers to discover and understand code across the github platform.Sourcegraph can be installed via the Chrome Store and currently only supports Java and Go programming languages but have plans to add more languages in the future. Once installed, Sourcegraph can be utilised by simply hovering over identifiers to trigger the tooltips and by clicking to jump-to-definitions. Furthermore, the sourcegraph website adds the ability to search for functions, type and packages from GitHub by linking your GitHub account.

VIEW


Thanks for reading! Enjoy this roundup? We'd love to hear! Get in touch on Twitter or Facebook!

4