Best new web design tools for February 2017

Challenge your assumptions about coding, supercharge your data visualisations and much more.

This month we have two great tools to make animations easier, a few learning resources and some interesting ways to find new opportunities and meet new contacts. 

01. Lottie

Use this tool from Airbnb to add animation to native apps

Lottie is a tool built by Airbnb that enables you to add high-quality animation to to native apps. It's an iOS, Android, and React Native library that renders After Effects animations in real time, so animations are no more trouble to use than static images. Lottie keeps file sizes small, and you can even remove animation files from your code entirely by loading them from a JSON API.

02. dataviz.tools

A curated selection of the very best data visualisation tools

The creator of this site whittled down their bookmark collection of over 900 data visualisation tools to around 400 of the best options. He then organised them into a bunch of useful categories such as JavaScript and D3 libraries, mapping, data cleaning, design tools and so on, ready for you to explore. 

03. Awesome case study

Detailed case studies make for a great learning resource

This is fantastic: it's a list of technical case studies focused around frontend/creative development. It's a great way to learn how different developers go about solving problems and building interesting things.

04. Awesome falsehoods

Challenge your assumptions with this list of busted myths

Here's another 'awesome' list; this time it's about falsehoods that programmers believe. It includes misunderstandings about names, time zones, maps, geography, package managers, file paths and lots more. 

These falsehoods allow little errors to creep into sites that cause problems in certain use cases; have a read through to challenge your assumptions and help you to avoid programming pitfalls. One particularly interesting entry is the Big List of Naughty Strings, which reveals user input data that's likely to break something. 

05. TalkJS

Add user-to-user chat functionality to your product

Add chat functionality to your web app with this easy-to-use tool that turns any <div> into a chat box. It can be leveraged for user-to-user chat, enabling sellers to talk to customers, or for any users to chat to each other on a social platform. 

06. data.world

Find and share new datasets

Data.world bills itself as 'the social network for data people' and allows you to connect with others working on data visualisation projects. It helps you to discover, understand, prepare and share data, and you can browse thousands of open datasets contributed by other users.

07. HTML Reference

An HTML5 cheatsheet

This searchable guide to HTML5 elements and attributes acts as a user-friendly cheatsheet to help you to quickly find out what something does and how to use it. There's a similar one for CSS: CSS Reference

08. Daily opportunity email

New ideas and opportunities

Every day the creator of this email list asks people about the problems they face in their work and what kind of software could help them. Their answers are then emailed to the list subscribers. Sounds to us like a great way to find ideas and opportunities for useful projects. 

09. Layersnap

Make SVG animations easier to work with

Layersnap is a helper for Snap.svg that makes it easier to work with SVG animations. It enables you to configure things by editing the SVG's markup attributes, and you can also build animations from the Layers palette in Illustrator. 

10. WebGradients

Quick and easy backgrounds

It's easy enough to make linear gradients to use as backgrounds, but if you're not so good with colour and want an easy fix, here are 180 ready-rolled ones that you can grab and use for free. 

Related articles: