Resources
Below is a selection of my bookmarks for quick reference.
11 things David Gilbertson learned reading the flexbox spec
An informative highlight of some behaviours that may be a bit more surprising in Flexbox but are perfectly according to spec. Can help solve some issues when in a pinch.
A complete guide to Flexbox
When the spec is too boring to read and you just want some pretty pictures to explain what's going on: CSS Tricks comes through for you.
Animations on the Web
A great video at React Conf 2019 that goes over how to make native mobile animations on the web that feel right and are performant.
Sketchnotes by Denise Yu
Denise Yu was tipped to me as a great sketchnote article. Her art is very inspirational. As a bonus it's educational about tech topics.
Designing accessible color systems
In this article the Stripe team describes their approach to finding accessible colors for their design system. Unfortunately their tools are not open source. However, their descriptions are accurate enough that you could apply similar processes in your own work.
Dexecure performance engineering blog
A blog that explores the performance aspects of the web. Has a lot of interesting articles about topics that you may not consider in every day webdevelopment.
Effective pull requests and other good practices for teams using github
This article provides some good tips on how to work with git from initial feature branch creation to merge commit. Even though this article was written in 2012, due to git's backwards compatible nature the article is still as relevant now as it was then.
GitLab Flow
A description of GitLab Flow, a modified version of the popular git flow process that tries to address some of the shortcomings of the original.
How to get press for your startup
An article that reminds us on why it's important to generate buzz around your startup and provides some tips on how to do this by providing a great story to journalists.
In Defense of Utility-First CSS
This is a very interesting blog post that makes the case for utility-first CSS over other things like CSS-in-JS using Styled Components or Emotion. It addresses all the objections that I had about utility-first CSS including those that I came up with while reading the description on what it actually is. I'm seriously considering utility-first CSS as a solution for my next front-end project.
Lesser known Git commands
This article was first published in 2016 but still works now due to git's backwards compatibility. My favourite git aliasses are git please
and git grog
.
Regex 101
If you ever need to figure out why your regular expression isn't working, this is the site for you.
Some things that might help you make better software
A list of items that is relevant for every software developer. Discusses both the problem, estimated cost, estimated benefit and how controversial the subject matter is.
The Startup Library
The library contains the most valuable articles from Paul Graham, Sam Altman, Mike Butcher, Sequoia Capital and other big players of VC ecosystem. This section was made especially for startup founders and entrepreneurs as a small library with useful links, templates, and tools.
Type Scale
A tool by Jeremy Church that allows you to visually the scaling of headers depending on the ratios that you choose.
Urql's Normalised Cache: Caching Relational GraphQL Data
A great breakdown of everything that goes into urql's normalised cache 'Graphcache'.
Using CSS Grid the right way
CSS Grid is extremely powerful. However, when you don't know what you're doing it can also be a maintenance disaster. In this article Violet Peña describes how you can use CSS grid in a sensible.
What the Heck is ARIA? A Beginner's Guide to ARIA for Accessibility
This excellent introduction by Kat Shaw from the Lullabot team gives a primer on ARIA, useful for beginners or when you need a quick refresher.
When to useMemo and useCallback
An excellent article by Kent C. Dodds that helps me remember when I should and should not worry about callback creation in React components. For example the following is absolutely fine.
<input onChange={e => setValue(e.target.value)} />
However, if you're doing something like the following, then it may be worth memoizing the onClick callback for an expensive component.
<SeriouslyExpensiveComponent onClick={e => updateZoom()} /><input onChange={e => setValue(e.target.value)} />