Welcome to this week's design & development roundup!

Last week, Facebook announced measures to tackle fake news in Germany ahead of this years parliamentary election, the iPhone celebrated its 10th birthday (from the date it was announced) and Spotify invited President Obama to come and work for them as 'President of Playlists'. 

Adam AvatarAdam

Cat Loader

CodePen Cat Loader

Photo: CodePen

If you love cats and CSS, this is the only loader you need to use (ever again). Find an excuse to use it on a client project, print it out and create a stop-motion video. Just use the cat. 


Button Hover Draw

Button Hover Draw

Photo: CodePen

This lovely CSS-only button is the perfect companion to the cat loader above, and can be used anywhere to bring a little bit of class and animation to your website.


Ruth AvatarRuth


ColourME Website

Photo: ColorME

Inspired by the brilliant SassMe, ColorME is a UI created by Tyler Gaw for applying adjusters to a base colour to give a visual of the adjustments.

The (15) adjusters are in the current draft spec as:

alpha, rgb, red, green, blue, hue, saturation, lightness, whiteness, blackness, tint, shade, blend, blenda, and contrast.

The color function allows you to apply one or more adjusters to the given base color:

color(#ea3333 alpha(90%) saturation(75%) shade(20%)) /* rgba(182, 47, 47, 0.9) */

Many of the adjusters also have short names:

color(#ea3333 a(90%) s(75%) shade(20%)) /* rgba(182, 47, 47, 0.9) */

Using the CSS Color Function can be difficult, as % based adjustments to a base colour can be hard to visualise. Using ColorMe allows you to quickly see how a slight movement in adjuster can change the colour output, without having to guess the numeric value in your css. 


Juma AvatarJuma


Chevereto Logo

Photo: Chevereto

Chevereto in an open source php script that enables users to implement a fully functional image hosting application on their server. Chevereto provides a free web installer to help get you started. Once downloaded, the installer has to be run on your server which will provide a set of installation instructions. 

An admin account is required to access the dashboard .Chevereto allows customization of image upload settings including maximum upload size, guest uploads, image paths etc. Chevereto also includes an api to allow developers to upload images as guests to the users’ website.

For a full list of features, read more on Chevereto.


Lewis AvatarLewis


Rocket Emoji

Photo: Emoji Stickers

Mitt is a tiny 200b functional event emitter / pubsub Javascript package. With no dependencies and weighing in at just 190 bytes, it's super lightweight and implementable alongside any existing or new project. Although their API is extremely primitive you have all the functionality you'd need: on, off and emit.


Vue.js Circle Menu

Vue.js Circle Menu

Photo: VueCircleMenu

Vue Circle Menu is a nifty Javascript and CSS library built on top of Vue.js that lets you effortlessly create Pinterest-like popout menus, vertically, horizontally and circularly. Out of the box you have a handful of customisation options to determine if you want the background as an overlay / mask, button colours, and the layout.


Big List of Naughty Strings

Speak No Evil Emoji

Photo: Emoji Stickers

Every developer has come across this problem. You're trying to do some trivial input checking but there's some qwerky character screwing up your database transaction. The Big List of Naughty Strings is an evolving list of strings which have a high probability of causing issues when used as user input data. The list was created to help automated and manual QA testing. So there you have it. Take some odd strings and see what sites you can break!


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