These days many of us are working on sites that involve a complex tangle of dependencies; if that’s you, this month there are a few tools that might help you out - whether that’s in the form of a dependency manager to keep everything organised, or resources that help you avoid them altogether.
There’s also a tiny Flexbox-based grid system that’s only 93 bytes minified, a website downloader, SVG patterns and a new font family from Google.
02. HTML Email
If you’ve ever tried to build HTML emails you’ll know how hard it is to get everything displaying correctly in every client. Bring mobile into the picture, which is where half of your emails will be opened these days, and it’s a horrible job. These email templates have been tested across all major email clients to save you the hassle of doing it yourself. If you’d like to try a free alternative, try the Litmus Community templates.
Yarn is a fast, reliable and secure dependency manager. It caches packages so they’re only downloaded once; verifies each one before executing any code; and installs dependencies in a deterministic manner, so if in an install works on one system it will work on another.
04. Open Color
Open Color is a colour scheme that’s been tested for two types of colour blindness and found to be suitable for use in UIs. There are twelve colours and one grey, and it’s provided as CSS, SCSS, LESS, Stylus, Adobe library, Photoshop/Illustrator swatches and Sketch palette.
05. FramerJS Club
Take a look at what everyone’s been doing with FramerJS at FramerJS Club, a showcase of prototypes. Many of them link through to blog posts by the creators explaining what they did and why.
Hugo is a fast and modern static website engine. But why would you use this instead of Jekyll? One advantage is that there’s just a single binary, so you don’t have to maintain a full Ruby stack. It’s also said to be much faster than Jekyll at generating your site, so that alone may be a reason to switch. Here’s a blog post about one user’s experience.
This impressively tiny Flexbox-based grid system is just 93 bytes minified! It degrades to a single column layout in places where Flexbox isn’t supported, and instead of using breakpoints it uses an element query technique so that items grow to fill the available space. You can play around with it on CodePen here.
This browser-based site ripper grabs every asset and all the source code from the target site and recreates the folder structure on your hard drive. All the links are converted so they point at the relevant local files instead of the online versions.
09. Hero Patterns
As the popularity of SVG increases we’re starting to see a few more resources emerge. These repeatable, customisable SVG background patterns look handy to us, and they’re completely free.
When a device doesn’t have the font to display certain characters, they appear as squiggly boxes known as tofu. Noto means "no more tofu", and is a font family designed to support all languages and hopefully bring an end to tofu.