The major excitement this month is CodePen Projects, which is an IDE built by the CodePen people. It's a very slick, comfortable way to work on your web projects from within the browser.
Elsewhere, there's a service that speeds up your WordPress sites, an excellent guide to colour theory for the web, and a friendly app-building community. Read on to find out the web design tools getting us excited this month. Also see our guide to Google's web tools.
01. Glitch (opens in new tab)
Glitch is a free online community where you can build web apps by reworking pre-made examples on the site. There's a built-in code editor, hosting and instant deployment – anyone can get an app up and running with this one tool.
02. Animista (opens in new tab)
Animista is a collection of CSS animations that you can customise, tweak and play around with until you find something that suits your purposes. It works as a kind of organised dashboard for making and refining animations without having to start from scratch.
03. Practical color theory for people who code (opens in new tab)
Want to learn advanced colour theory really fast? This fantastic site by Natalya Shelburne will get you there. Its creator has a fortuitous combination of skills: she's a classically trained fine artist and also a frontend developer, so she's uniquely qualified in this area. Her site guides you through the process of designing and coding a great colour scheme in accordance with the principles of colour theory (opens in new tab).
04. Shifter (opens in new tab)
Shifter transforms your WordPress site into a series of static files and delivers them at high speed via its content delivery network. Static files have the advantage of being much faster to deliver and you won't have to worry about security problems with your server, WordPress plugins or PHP.
05. Guetzli (opens in new tab)
Keeping your page weight down is an important part of building performant sites that are accessible in poor network conditions, so new compression algorithms like this one from Google are always welcome. Guetzli shrinks JPGs 20-30 per cent more than libjpeg, so using it is an easy way to slash your page weight without changing your images. Read more about it here. (opens in new tab)
06. Bumpr (opens in new tab)
This Mac app has one simple function: when you click on a link it lets you choose which program to open it with. URLs get you a choice of browsers, and email links will pop up a selection of email clients.
07. colorfonts.wtf (opens in new tab)
What are colour fonts? How can I use them? Where do I find some good ones? These questions and more are answered on this great site that explains the whole situation. If you've not heard of them at all, colour fonts are font files that can contain colours, textures, transparency, vector shapes and even bitmap images. Check out the site to see what you can do with them.
08. Subform (opens in new tab)
Subform is a design tool built especially for UI/UX designers. It solves the workflow issue of wrestling with multiple artboards for different screen sizes, and helps you to create responsive layouts while working with real content. Overall, you'll find its feature set is focused on your needs, rather than those of a print designer.
09. Hex Naw (opens in new tab)
There are a few tools out there for making sure your colour combinations are accessible, but this one is designed to work with whole colour systems, so you can put in your full palette in one go.
10. CodePen Projects (opens in new tab)
The people behind CodePen have built an IDE (integrated development environment) that runs in your browser. It contains a file management system that enables you to drag and drop your website files and organise them into tabs. You can preview your site as you build it, and there's built-in debugging. There's a blog post about it here (opens in new tab).
Related articles:
