Welcome to this week’s design and development roundup!

Here’s all of the resources, freebies and handy tools to make your life easier this week.

Adam AvatarAdam

Distorted Button Effects

Distorted button

Photo: Tympanus

Codrops and Tympanus are at it again with their subtle, but impactful web effects. This time they’re taking a look at buttons and how they can be distorted with SVG filters!


Ruth AvatarRuth

Flag Icon Collection

Flag icon collection

Photo: Pixabay

If you have ever had a project where you need the ability to change location/language - the usual search for flag icons can be a pain. They all either don’t have every flag you need, or they’re extremely poor quality. Or, it’s just so time consuming adding them all in.  After searching, I finally came across this little gem which has all the flags ready in SVG format, plus the css styles, ready to be called using simple markup:

<span class="flag-icon flag-icon-gr"></span>
<span class="flag-icon flag-icon-gr flag-icon-squared"></span>


Core Browser CSS

Using computer

Photo: Pixabay

Here's the core CSS file Chrome uses to style HTML elements. After reading it, I’m not sure if I’m more or less informed, especially after coming across ‘qem’

-webkit-margin-before: 1__qem;

After some research, it seems ‘qem’ stands for ‘quirky em’

“…a proprietary Webkit syntax used to refer to a margin which can be collapsed when the page is in quirks mode.” - source

Firefox also has it’s own core CSS, which is split across multiples files found here.



Family.scss logo

Photo: Pixabay

Family.scss is a set of 20 smart Sass mixins which will help you to manage the style of :nth-child'ified elements, in an easy and classy way.

ul li {
  background: blue;
  @include first(3) {
    background: red

would become;

ul li {
  background: blue;
ul li:nth-child(-n + 3) {
  background: red;

For anyone who struggles using the nth-term like myself – this is a brilliant way to quickly target children without tapping into your high school math brain. 


Juma AvatarJuma

Twitter Makes Heron Open-Source

Twitter and a coffee

Photo: Stocksnap

Twitter, yesterday, released their real-time stream processing engine under an Apache open-source licence on GitHub. Heron was created as a successor to Twitter’s Storm stream-processing engine which they also open-sourced back in 2011. As Twitter became a bigger platform their scale and diversity of data increased which in turn meant that their requirements from an analyzing tool evolved hence Heron was created to succeed Storm.

Twitter’s new engine needed to:
“Process billions of events per minute; have sub-second latency and predictable behavior at scale; in failure scenarios,have high data accuracy, resiliency under temporary traffic spikes and pipeline congestion; be easy to debug; and simple to deploy in a shared infrastructure.”

Heron also offers backward compatibility with Storm which allows users to upgrade from Storm with ease. Prior to this release Twitter had been using Heron for two years but other companies have also been working with Heron including Microsoft who have assembled a version that runs on top of the YARN cluster management component of the Hadoop open-source big data software.  The quickest way to get familiar with Heron is to install and run pre-compiled Heron binaries, which are currently available for:

  • Mac OS X
  • Ubuntu >= 14.04


Lewis AvatarLewis

PHPSA - Smart Analysis for PHP

PHP elephant

Photo: elePHPant

PHPSA is a very nifty development tool that aims to bring complex analysis for PHP applications and development projects. It’s pretty sweet.

It’s only in an early alpha state but the results you can get are fairly impressive, even on a considerably large codebase. PHPSA is capable of looking for unused variables, undefined properties, missing / incorrectly typed PHP documentation blocks, control flow, segments of code that look probably to being bug-prone and any other general syntax errors.

The setup is painless, just installing the single executable file or through Composer in any project. It’s definitely worth keeping your eye on this and seeing how its future development could really help diminish the chance of bugs in your web development project!


That's all, folks! Enjoy this roundup? We'd love to hear! Get in touch on Twitter or Facebook!