Welcome to this week’s design and development roundup! 

Pokémon Go is still taking the world by storm, and we're busy cracking on with some of the best projects we've worked on in a while! More on that in a few weeks...

Check out what we've curated for your design and development tastebuds this week below!

Ruth AvatarRuth

Click and Hover Interactive Maps

Interactive Maps

Photo: Tympanus

My first ever proper assignment when joining Made by Magnitude was to create a fully interactive world map with multiple hover effects and tooltips. The project became the bane of my life, as no matter what approach I took, the map had it’s flaws; whether it be objects not responding to mouse clicks, responsive issues or just the look and feel not being aesthetically correct.

Over on Codrops, the team at Tympanus have created a simple interactive map with pointers and overlays, using a map that resizes fluidly for all screen sizes.

The idea is a simple one; you can hover on a map pointer to show a small excerpt, or click on the pointer to show full details, being able to click anywhere to close the information overlay.

The map uses SVGs to resize according to the map, and everything is set to relative, including the pin positions. To set the pins in position, they’ve placed them within Illustrator on top of the map, then took the SVG code and added it to their markup. (It’s actually quite clever how much time this saves!)

The end result is quite beautiful, and it seems so effortless to switch between tool tip and overlay.

I only wish I’d seen this a year ago, it would have made my task so much easier.


Juma AvatarJuma

Stack Overflow Documentation

Stack Overflow Logo

Photo: Stack Overflow

Last week, Stack Overflow released their biggest expansion in recent years called Documentation. According to the team at Stack Overflow: ”Documentation is a community-curated, example-focused developer documentation, based on the principles of Stack Overflow. “

Designed to function like the website’s popular Q&A section, Documentation’s main focus is examples. The main aim is for all good topics across different programming languages to have several useful examples to refer to. It is similar in essence to the Q&A voting system where the best answers tend to have the most votes and therefore appear at the top, the most useful examples for a particular subject would also appear at the top.

This expansion will no doubt make Stack Overflow an even greater source of knowledge whilst also encouraging the best practices for the different programming languages judged by its community. Furthermore, the team at Stack Overflow have teamed up with developers from different tech companies including Microsoft, to help improve documentation related to their own software.

Documentation’s success will no doubt depend on the communities' contribution, however, having a one-stop-shop for programming language documentation that is frequently updated and curated can be appreciated by the programming community.

To read more: http://blog.stackoverflow.com/2016/07/introducing-stack-overflow-documentation-beta/


Lewis AvatarLewis



Photo: PHP-ML

PHP-ML is a fresh approach to machine learning written in PHP. Capable of handling algorithms, cross validations, preprocessing, feature extraction and much more. Built on top of PHP 7, PHP-ML handles an array of complex logic that lets you run predictions based on a data and rule set. The library supports SVC, SVR, accuracy matrix, confusion matrix, random split cross validation and token count vectors.


CodeIgniter 4

Code Igniter Logo

Photo: CodeIgniter

We’ve been developing on top of CodeIgniter for some time on some legacy projects and it was great news that CI4 is well into development with a stable alpha release able to be cloned from Github. The framework has been completely modernised and brings the quality and code into a more modern version, whilst retaining the legacy and traditional means of creating controllers, routing, views and models.

The framework is built on top of PHP 7 and finally has namespaces as well as a wrath of other modern coding standards. The routing logic is much more streamlined and uses a traditional means of specifying which class and method is responsible for handling the URLs with the option to completely disable ‘auto-routing’ (which CI3 currently has). Although the request and response objects don’t conform to PSR-7, they’re definitely a step in the right direction.


Thanks for reading this week's roundup! Got something you want us to share? Get in touch on Twitter or Facebook!