The 10 best new web design tools in May
We’ve got all manner of ways to debug and test your code across a range of browsers and devices.
No one enjoys debugging their work, so this month we've collected up a few tools that make it a bit easier. There's CSS Dig, a Chrome Extension that exposes your CSS in a useful format so you can poke around and find inconsistencies; ES Feature Tests, which you might see as an alternative to caniuse; and Vorlon.js which helps you to test your code on lots of devices.
Don't miss this
It's refreshing to see two cross-platform tools from Microsoft this month, a code editor and an educative development environment that enables complete beginners to get started with coding mobile apps.
Also exciting is the news that whiteboarding tools have been added to Paper, the painting app for iPad, so now you can use its wonderful interface to draw diagrams as well as sketches. Let's dive in.
01. HTML Arrows
HTML Arrows is a beautifully designed cheat sheet for HTML symbols that takes its inspiration from the minimalist Swiss aesthetic. All of the most useful symbols are displayed in an ordering of your choice along with their unicode, hex code, HTML code and HTML entity values so you can get all the information you need at a glance.
02. Think for Paper
We're excited about this one. Painting app Paper has added whiteboarding tools so that you can draw diagrams using straight lines, shapes and fills. You can draw objects such as circles and triangles freehand and the 'Intention Engine' will recognise and correct them. It's a great way to capture your ideas using your iPad when you're out and about, when collaborating or when working with clients.
03. CSS Dig
This handy Chrome Extension provides an alternative way to analyse your CSS and find fixes and improvements. It displays all of your CSS properties with their frequency and variations, so you can easily spot if you've somehow ended up with too many shades of a colour. It also displays selector length and specificity so you can resolve specificity wars and consolidate your code.
04. Colour Shades Generator
This one creates something akin to a Dulux paint shade chart based on an initial colour that you specify. Whether or not this type of colour presentation actually helps you arrive at a decision is down to you, but this tool provides a nice progression of shades in a convenient form. Just click on a colour to copy it to the clipboard.
05. Visual Code Studio
Visual Code Studio is code editor from Microsoft for building modern web and cloud applications. You might think that means it's for Windows only, but remarkably it's a cross-platform offering that works on Linux and Mac OSX as well. It supports multiple languages and you get rich code assistance and navigation without having to use a full IDE.
06. TouchDevelop
Microsoft is on a roll this month. TouchDevelop enables beginners as well as experienced programmers to create apps using their phone, tablet or a desktop environment. You can choose from one of three skill levels ranging from beginner, which provides a drag-and-drop interface for app development, up to expert, which provides more powerful features for programmers.
It's designed to tempt people into learning to code by making their first steps into app development easy, and interactive tutorials are provided to smooth the transition from dragging and dropping into writing code. Like Visual Studio Code, this is a cross-platform offering that works on Android, iOS, Windows Phone, Windows, Linux and Mac.
07. ES Feature Tests
ES Feature Tests enables you to determine the best code to deliver to each browser so you can load native ES6+ code in ES6+ compliant browsers, and transpiled code in older browsers. Instead of using caniuse data for this purpose, this method performs feature tests for each browser – which is likely to be more reliable.
08. Vorlon.js
Remotely test and debug your JavaScript with this tool powered by node.js and socket.io. You can connect remotely to up to 50 devices simultaneously and run your code on all of them to test performance and fix errors. It's a way to debug your code on nearly any platform, and it's open source and free to use. There are also plugins for adding extra features.
09. Ionic
It's been around for a while in beta form, but this month the Ionic Framework went official with the final release of Ionic 1.0.0 'uranium-unicorn'. Ionic is a free and open source SDK for building hybrid mobile apps with AngularJS. It offers mobile-optimised components and is designed with performance in mind. If you're used to using native SDKs it should hopefully be fairly familiar to you as it's been designed to work in a similar way.
10. RightFont
If you have a ton of local fonts to deal with on your machine, this handy app for OS X might be useful. RightFont gives you fine control over your fonts, providing access right from the menu bar and integrating with both Photoshop and Sketch 3. Fonts can be organised according to whether they're TypeKit or Google, serif or sans serif, width, weight and more.
