Skip to content

Resources

A collections of stuff which I find useful on a regular basis.

Blogs

Adam Wathan-
CSS Wizardryby Harry Roberts
David Walsh Blog-
Jake Archibald-
Josh W Comeau-
Kent C. Dodds-
Louie Colganby my good friend Louie
Max Stoiber-
Maxime Heckel-
MobliMicby my good friend Mike
Overreactedby Dan Abramov

Design Systems

Carbonby IBM
Material Designby Google
GOV.UK-
Mailchimp-
Herokaiby Heroku
Fluent UIby Microsoft
Protocolby Mozilla
Vercel-

Documentation

CSS ReferenceA visual guide to CSS.
Dev DocsCombines multiple API documentations.
Git-Flow Cheatsheet-
MDNDocumentation for web technologies by Mozilla.
PostgreSQL Cheatsheet-
Git Commit Message Style GuideNice, consistent commit message style.

Icons

Real Favicon GeneratorAmazing tool to generate favicons, app icons & themes.
System UI IconsNice SVG icon set.
ZondiconsNice SVG icon set.
Bootstrap IconsNice SVG icon set designed for Bootstrap.
HTML EmojiAll the HTML Emoji 😄.

News

The VergeCovers the intersection of technology, science, art, and culture.
CSS-TricksFront-end developer news and articles from some of the industry experts.
DEVCommunity of developers writing articles to share news and knowledge.
The Next WebNews about Internet technology, business and culture.
Smashing MagazineNews and articles for web designers and developers.

Tools

Blob MakerSVG blob generator.
ExcalidrawAwesome sketch-like drawing tool.
ASCII FlowDraw ASCII images.
Keycode Event InfoGet details of keycode events.
Squoosh AppAmazing image compression tool.
Title CaseMake sure title text is cased correctly.
Character CounterCount number of words & characters in a block of text.
Get WavesSVG wave generator.
Minutes to SecondsBecause I suck at Math.
Rich Text ResultsUseful tool for testing & validating your structured data.
BundlePhobiaDetailed info about npm package sizes.
Front End ChecklistUseful checklist for greenfield projects.
SEO OptimiserGreat tool for assessing SEO on sites.

VS Code Extensions

TODO HighlightHighlight TODOs, FIXMEs, and any other keywords.
Todo+Lists Todo's in a sidebar.
npm IntellisenseAutocompletes npm modules in import statements
Path IntellisenseAutocompletes filenames.
npmRun npm scripts and validate installed modules against the dependencies defined in the package.json.
PrettierOpinionated code formatter
ESLintFind and fix problems in your JavaScript code.
ES6 Import FormatterSort the leading imports/requires for ES6.
webhintLinting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more.
Git GraphView a Git Graph of your repository, and perform Git actions from the graph.
GitLensSupercharged the Git capabilities.
Vuln CostSecurity Scanner to find and fix vulnerabilities in JavaScript and TypeScript.
Code Spell CheckerSpelling checker for source code.
PeacockSubtly change the workspace color of your workspace.
Read TimeEstimate how long it may take to read your markdown.