Front-end resources

Haven’t been blogging very much… which I am now realising was not such a great idea. It’s hard to recall what I’ve been doing and all the insights I’ve had. So, in attempting to remedy this situation, I thought I would re-commence blogging by just jotting down some of the online resources I have been using lately to do front-end development. (As much for my own reference as anyone else’s.)


Great guide for forms and responsive layouts

Colour Pickers

Accessible colour palette builder

Gradient builder

Colour gradations

A list of some other resources for colour palettes


WCAG 2 contrast checker

Axe (browser plugin for Chrome and Firefox) billed as an “accessibility checker for WCAG 2 and Section 508 accessibility.”


Cut and paste code for simple css animations

One css file for lots of effects

I really like Codrops tutorials and I have used a couple lately to make hamburger menus more interesting like Animating an SVG Menu Icon with Segment and Google Nexus Website Menu


Great article on Hackernoon
A tale of Webpack 4… and a Github repo to get you started

Design Guides

Australian Government Design System

United States Web Design System – guidelines for U.S. government

GOV.UK Design System

FOSS (Free and Open-source Software) libraries – Find FOSS libraries, back-end and front-end

Open Collective – Open source communities

Guide by Redhat for open-source replacement to proprietary software


Content style guide – Mailchimp

Content design – UK Government Digital Service

Content style guide – Canada

Client-centred content guide – Worksafe Victoria

Product content guide – Shopify

Content Style Guide – Buffer

Writing style – Atlassian

Some other bits and pieces

Minifying your repo using Gulp

Generate favicons for various devices

Low poly generator

Subresource Integrity (SRI) checker/ generator

npm package popularity/ download tracker

List of toolboxes

I’ll be adding to this list… so stay tuned.

Image credit: Gal Shir, who is responsible for He also maintains a personal site

Leave a Reply

Your email address will not be published. Required fields are marked *