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.)

UX

Great guide for forms and responsive layouts
https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1

Colour Pickers

Accessible colour palette builder
https://toolness.github.io/accessible-color-matrix

Gradient builder
https://mycolor.space/gradient

Colour gradations
http://www.procato.com/rgbfind

A list of some other resources for colour palettes
https://learntocodewith.me/posts/color-palette-tools

Accessibility

WCAG 2 contrast checker
https://webaim.org/resources/contrastchecker

Axe (browser plugin for Chrome and Firefox) billed as an “accessibility checker for WCAG 2 and Section 508 accessibility.”
https://www.deque.com/axe

Animations

Cut and paste code for simple css animations
https://www.csswand.dev

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

Templates

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

Libraries.io – Find FOSS libraries, back-end and front-end

Open Collective – Open source communities

Guide by Redhat for open-source replacement to proprietary software

Some other bits and pieces

Minifying your repo using Gulp

Generate favicons for various devices

Low poly generator

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

Image credit: Gal Shir, who is responsible for colorhunt.co. He also maintains a personal site galshir.com

Post navigation

Leave a Reply

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