Snippets

These snippets are my attempt to save and organize various bits of code, best practices, and resources relating to web development and design. They also function as a to do list of sorts, for things I want to implement in my own code, but haven’t yet. The concept is inspired by Jeremy Keith’s links and CSS-Tricks, among other things. Enjoy.

The Cost of JavaScript

An infographic showing that being fast means quick downloading, parsing, and evaluating JavaScript on mobile.

This is an excellent and comprehensive list of how to minimize your JavaScript performance impact on a user’s device.

Source link:

https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e

Dragon Drop: Accessible List Reordering

A screenshot of a list being re-ordered by dragging with a mouse pointer.

This is pretty neat: an accessible drag and drop component that works with keyboard as well as a pointer.

Source link:

https://github.com/schne324/dragon-drop

Hand-Drawn Space Icons by Agata Kuczminska

Source link:

https://www.smashingmagazine.com/2018/02/freebie-hand-drawn-space-icons/

Vanity Fair Hollywood section logo

Source link:

https://www.vanityfair.com/hollywood

What Web Can Do Today

Ever get annoyed by people who tell you the web will never compare to native apps and wish you could send them a comprehensive slap in website form? If so, this is pretty awesome. Not only does it list a lot of things there are modern web APIs for, it also displays whether your current browser supports each one.

Source link:

https://whatwebcando.today/

Box Alignment Cheatsheet by Rachel Andrew

The box alignment specification details how items are aligned in the various layout methods. As different layout methods pose different constraints in terms of alignment, some of the behaviour of Box Alignment is layout method dependent. This cheatsheet compares alignment in CSS Grid Layout and Flexbox.