LenSoftware

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
https://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

One css file for lots of effects
https://daneden.github.io/animate.css

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

Content

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 colorhunt.co. He also maintains a personal site galshir.com