Welcome to our first ever MbM weekly roundup! Here you can find and indulge in the coolest things our team finds during the week.

If you hadn't guessed already, MbM stands for Made by Magnitude. We're just trying to keep the amount of typing down for you when you tell all of your friends about this really awesome article.

Up first is Ruth our front-end dev with some nice little resources:

Weather Report Simulation

Rain Effects


Tympanus is a fantastic website some interesting experimental code scripts. One of their latest takes a look as rain effects and how to output a simulation of a weather report.

View here

Content Editable

Did you know if you adding [contenteditable] to the <body> tag allows you to change text within the browser?

You do now.

Canary Updates

@ChromeDevTools have given us a nice little update with the DevTools' Colorpicker. Now if you want multiple the shades of a colour a primary Material Design colours, just long click!


Lewis, our MD has also put together some helpful back-end tools that you might not have discovered yet:


Goutte is a screen scraping and web crawling library built with PHP 5.5. It provides an easy-to-use API to crawl websites, extract data and interact with the response HTML/XML DOM responses.

To crawl:

$client = new GoutteClient();
// Create the crawler, get the HTML
$crawler = $client->request('GET', 'http://www.madebymagnitude.com');
// Find our link in the response DOM
$link = $crawler->selectLink('Get in Touch')->link();
// Click the link and follow it
$crawler = $client->click($link);
// Get the services from the page (below the icons)
$crawler->filter('.ourServices article h3 > span')->each(function ($node) {

View here

Static Review

Static Review is an extendable framework for version control hooks. Are you working in a team and keep having to update a configuration file as it was accidentally pushed up? Well don’t worry, with static review you can setup pre-commit hooks that’ll analyse and check the status of Git before actually letting the commit go through. Handy, right?

class ConfigurationFileReview extends AbstractFileReview
    public function canReviewFile(FileInterface $file)
        $name = $file->getFileName();
        return (substr($mime, 0, 4) === 'text');
    public function review(ReporterInterface $reporter, ReviewableInterface $file)
        // Make sure we don’t push any configuration files
        if (strstr($file->getFileName(), ‘Configuration’) !== false) {
            $message = 'A configuration file cannot be committed.;
            $reporter->error($message, $this, $file);

Now call our checking (be sure to reference all required classes):

$reporter = new Reporter();
$review = new StaticReview($reporter);
// Add any reviews we want to run
$review->addReview(new LineEndingsReview());
$review->addReview(new ConfigurationFileReview());
// Review the staged files
$git = new GitVersionControl();
// Check if any issues were found
($reporter->hasIssues()) ? exit(1) : exit(0);

View here

And finally, me! Here's selection of the cool design-related stuff I have stumbled upon during my week on the web:




Okay, not explicitly design related but this was too good to pass up. I've only just discovered this fantastic lorem ipsum generator in the form of Samuel L. Jackson. Forget Photoshop and Lipsum's filler text. This is the new era.

Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.

View here

The Nine States of Design

Everybody loves a good Medium article. It's where you can express and write on whatever topic you want and have others actively engage with your opinion. Good stuff.

I really enjoyed reading Vince Speelman's commentary of the nine states of design in modern UI and I hope you do too.

View here

Free Huawei P8 PSD

Huawei P8


Everyone uses iPhones and Samsungs in their mockups, but it's time to let Huawei shine. I stumbled on this little mockup while browsing Dribbble and assumed (knew) you would all want it, too.

View here


AND THERE YOU HAVE IT! All the coolest, nerdiest and interesting stuff we have found this week. We're going to attempt to make this a weekly feature, but hey, who knows.