Resources
A collections of stuff which I find useful on a regular basis.
Blogs
| Adam Wathan | - |
| CSS Wizardry | by Harry Roberts |
| David Walsh Blog | - |
| Jake Archibald | - |
| Josh W Comeau | - |
| Kent C. Dodds | - |
| Louie Colgan | by my good friend Louie |
| Max Stoiber | - |
| Maxime Heckel | - |
| MobliMic | by my good friend Mike |
| Overreacted | by Dan Abramov |
Design Systems
| Carbon | by IBM |
| Material Design | by Google |
| GOV.UK | - |
| Mailchimp | - |
| Herokai | by Heroku |
| Fluent UI | by Microsoft |
| Protocol | by Mozilla |
| Vercel | - |
Documentation
| CSS Reference | A visual guide to CSS. |
| Dev Docs | Combines multiple API documentations. |
| Git-Flow Cheatsheet | - |
| MDN | Documentation for web technologies by Mozilla. |
| PostgreSQL Cheatsheet | - |
| Git Commit Message Style Guide | Nice, consistent commit message style. |
Icons
| Real Favicon Generator | Amazing tool to generate favicons, app icons & themes. |
| System UI Icons | Nice SVG icon set. |
| Zondicons | Nice SVG icon set. |
| Bootstrap Icons | Nice SVG icon set designed for Bootstrap. |
| HTML Emoji | All the HTML Emoji 😄. |
News
| The Verge | Covers the intersection of technology, science, art, and culture. |
| CSS-Tricks | Front-end developer news and articles from some of the industry experts. |
| DEV | Community of developers writing articles to share news and knowledge. |
| The Next Web | News about Internet technology, business and culture. |
| Smashing Magazine | News and articles for web designers and developers. |
Tools
| Blob Maker | SVG blob generator. |
| Excalidraw | Awesome sketch-like drawing tool. |
| ASCII Flow | Draw ASCII images. |
| Keycode Event Info | Get details of keycode events. |
| Squoosh App | Amazing image compression tool. |
| Title Case | Make sure title text is cased correctly. |
| Character Counter | Count number of words & characters in a block of text. |
| Get Waves | SVG wave generator. |
| Minutes to Seconds | Because I suck at Math. |
| Rich Text Results | Useful tool for testing & validating your structured data. |
| BundlePhobia | Detailed info about npm package sizes. |
| Front End Checklist | Useful checklist for greenfield projects. |
| SEO Optimiser | Great tool for assessing SEO on sites. |
VS Code Extensions
| TODO Highlight | Highlight TODOs, FIXMEs, and any other keywords. |
| Todo+ | Lists Todo's in a sidebar. |
| npm Intellisense | Autocompletes npm modules in import statements |
| Path Intellisense | Autocompletes filenames. |
| npm | Run npm scripts and validate installed modules against the dependencies defined in the package.json. |
| Prettier | Opinionated code formatter |
| ESLint | Find and fix problems in your JavaScript code. |
| ES6 Import Formatter | Sort the leading imports/requires for ES6. |
| webhint | Linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more. |
| Git Graph | View a Git Graph of your repository, and perform Git actions from the graph. |
| GitLens | Supercharged the Git capabilities. |
| Vuln Cost | Security Scanner to find and fix vulnerabilities in JavaScript and TypeScript. |
| Code Spell Checker | Spelling checker for source code. |
| Peacock | Subtly change the workspace color of your workspace. |
| Read Time | Estimate how long it may take to read your markdown. |