The highlight of your week is back! We’ve been searching high and low for this week’s design and development roundup.

This week, rumours flew of Twitter dropping photos and links eating into your 140 character limit and speculation about September’s iPhone has already ramped up. 

There is one thing that’s not a rumour though – this week’s roundup! It’s real, and it’s here again. Check out our findings for you below.
 

Adam AvatarAdam

Find the Visual Center of Your Images

Find the visual center of your images

Photo: javier.qyz

Wondered why you can never get that icon to sit just right in the middle? It might be because you’re aligning it to a square, rather than a circle. This website is super handy for getting your images to sit perfectly in the center, according to their visual weighting rather than the distance from a square around the image, to the edge.

VIEW

CSS Instagram Gradient

Instagram CSS gradient

Photo: Instagram

Our very own Ruth has tried her hand at recreating the new Instagram gradient! She was one of the first on CodePen to do so, and she’s done a pretty damn good job. Check it out below.

VIEW


Ruth AvatarRuth

Create Imagery for all of your Social Accounts

Landscape for social imagery

Photo: Sprout Social

Landscape is an image resizing tool created to help users develop a suite of uniformed imagery for all of their outlets. It offers an efficient way to produce multiple image sizes optimised for social media profiles, messages and campaigns.

VIEW

Font Awesome now has a CDN

Font Awesome now have CDN

Photo: Font Awesome

With the launch of the new Instagram Icon, everyone was clambering to update their FA link to include the new design. That is, unless you had recently moved to using the new CDN, With a click of a button, FA will now update your site to include all the new icon designs. With both CSS & JS versions, the CDN allows for much easier upgrading!

Features included:

  • Icons on your site. Fast. With a single line of code, your site gets access to every Font Awesome icon and our full CSS toolkit. Icons are loaded from a cached version of the icon font files and CSS, served up by MaxCDN.
  • Easy upgrades. Since each site gets a unique embed code, you can easily upgrade your site to the latest version of Font Awesome, all without even pushing code. Easy peasy.
  • Asynchronous icon loading. Font Awesome CDN’s JS leverages the excellent, open-source Web Font Loader, courtesy of Typekit and Google. Icons served up by the CDN load in the background so your site loads faster. Additionally, you’ll get all sorts of awesome CSS and JS events to build on top of to make sure your UI looks awesome before and after Font Awesome loads.

VIEW

Pseudo Guide

Pseudo Element Guide

Photo: Pixabay

For any developer, front or back, pseudo-elements and pseudo-classes are are nifty tool in the coding toolbox. Pseudo [meaning “not actually but having the appearance of; pretended; false or spurious; sham”] … is basically a phantom state or specific characteristic of an element that can be targeted with CSS. There are many that we know off the back of our hands, and some which we may never have even considered using. 

This handy guide written by Richard Zea gives a healthy run down of what they are, how to use them, and what to watch out for. 

VIEW


Juma AvatarJuma

HTTP Prompt

HTTP Prompt

Photo: Pixabay

HTTP Prompt is an interactive command-line HTTP client featuring autocomplete and syntax highlighting. HTTP Prompt’s simple user friendly CLI makes it a good alternative to other HTTP clients like curl or telnet. To send requests HTTP Prompt supports the following HTTP methods:

  • Get
  • Post
  • Put
  • Patch
  • Delete
  • Head

HTTP Prompt is a py package and will require Python in order to install and run it.If you have Python 3, the following command can be used to install:

Sudo python3.5 -m pip install http-prompt

To start a new session, the command is :

$ http-prompt http://localhost

HTTP requests are initiated using cd like:

http://localhost> cd post

HTTP Prompt GIF

To read more on HTTP Prompt:

VIEW


Lewis AvatarLewis

AMP PHP Library

AMP PHP Library

Photo: Pixabay

AMP (Accelerated Mobile Pages) have taken a recent storm across Google providing search results with lightning fast instant results served up from Google’s static AMP cache. In order to submit and product valid AMP code you need to conform with the AMP HTML and AMP JS specification. This library written by Lullabot effortlessly converts your existing HTML code into AMP output and flags you of any potential errors.

VIEW

Snug v2

Snug version 2

Photo: Snug

It’s been almost a year since Snug landed on the App Store and we’re proud to release version 2 of Snug which providers our Instagram users with the flexibility of dragging and dropping photos to re-order them on their Snug feed, selecting multiple images at once to preview and of course, the routine updates and bug fixes to streamline the process.

VIEW


Got something you want to feature in next week's roundup? Get in touch on Twitter or Facebook!

5