Web development resources

Here is a lot of interesting and useful things I collected over the years as a front-end developer, from articles to full-on courses, dev tools, design resources or great newsletters to keep up with the insane pace of the web ecosystem.

Development

Articles & books

• A complete guide to accessible front-end components
• Access guide - A friendly introduction to accessibility
• Best practices for writing code comments - 9 rules to write comments that are actually useful
• Clean Code JavaScript - Clean Code concepts adapted for JavaScript
• Defensive CSS - Practical CSS and design tips that helps in building future-proof user interfaces.
• Functional Programming 101 - A deep dive on the benefits of functional programming and why it’s actually easier than you think.
• Freely available programming books - List of free learning resources in many languages
• How to write TypeScript like a Haskeller - Functional concepts to write type-safe code in TypeScript
• HTML Tips - Simple yet very useful tips
• Naming things needn’t be hard - Inspiration for naming things – be that HTML classes, CSS properties or JavaScript functions
• Patterns.dev - A free book on design patterns and component patterns
• Tao of node - Design, architecture & best practices
• The concise TypeScript book - Comprehensive and succinct overview of TypeScript’s capabilities
• Those HTML attributes you never use - Lesser-used attributes that could prove really useful.
• Type-level TypeScript - Learn how to unleash the full potential of the Turing Complete type system of TypeScript
• TypeScript evolution - Each and every TypeScript feature explained briefly and clearly

Tools

• Can I PHP? - PHP feature support by version, like caniuse.com but for PHP
• explainshell - write down a command-line to see the help text that matches each argument
• Gifcap - In-browser screen recording with GIF export
• HTML Arrows - HTML symbols, entities and ASCII character codes
• IT Tools - Handy online tools for developers
• Modern Unix - modern/faster/saner alternatives to common unix commands
• Public APIs - Extensive list of public APIs from many domains
• Quicktype - Instantly parse JSON in any language
• Regex101 - Build, test and debug regexes
• Regulex - JavaScript Regular Expression Visualizer
• Screen reader compatibility of HTML attributes - Shows how different HTML attributes behave in commonly used screen readers
• Shadow palette generator - Generates sets of realistic shadows for different elevation levels
• Smooth Shadow - box-shadow generator
• Tiny helpers - A huge list of free single-purpose online tools
• Today I learned - Over 150 quick-to-read “Today I learned” blog posts all around web development

Newsletters

• Bytes.dev - Weekly news on the JS ecosystem
• This Week in Self-Hosted - The latest in self-hosted content news, trends, launches, updates, and other activity
• Web Weekly - Great weakly roundup on web fundamentals, accessibility, useful tools and latest browser technologies

Design

Articles & courses

• Design resources for developers - Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more
• Product Design Course - Neatly classified collection of resources on product design

Inspiration

• Unsection - Extensive, focused library of website section designs

Newsletters

• Baymard institute’s research - In-depth articles about user experience, web design and e-commerce
• Free UI/UX Tips - Weekly tips on UX/UI
• Learn UI design - Occasional tutorials & essays on designing usable, beautiful interfaces
• Nielsen Norman Group - Articles about usability, design and UX research
• Pixels of the Week - Curated newsletter about UX, design, accessibility & tech

Typography

Articles, books & courses

• Beautiful web type - A showcase of the best typefaces from the Google web fonts directory
• Best Practices Of Combining Typefaces
• Conventions typographiques Wikipedia - French typographic and style rules from Wikipedia
• Fontain - A collection of f/l/os compatible fonts
• Fontshare - Free quality fonts and pairings
• Legibility - Free ebook on how and why typography affects ease of reading
• Style manual - English typographic and style rules
• The Elements of Typographic Style Applied to the Web
• Web typography resources - Apps, tools, plugins and other resources

Tools

• Brick - Lossless webfonts collection
• Fallback Font Generator - Reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks
• Font Family Reunion - Compatibility tables for default local fonts.
• Font style matcher - Matches the x-heights and widths of two fonts
• Fonts in the wild - Screenshots of fonts in various contexts
• Modern Font Stacks - System font stack CSS organized by typeface classification for every modern OS
• Syncope - A tool to help with vertical rhythm
• Tiff - Visual typeface diff tool
• Type Scale - a visual calculator

Free quality typefaces

• Cal Sans - Geometric sans-serif tuned for display
• Calluna - The robustness needed to function as a text face and enough
• Commit Mono - Neutral programming typeface
• Elephant Display - An elegant display font with an art deco feel
• Fairfax - Scalable monospace font with almost complete unicode support
• Fénix - A typeface with strong serifs and rough strokes
• Figtree - A simple and friendly geometric sans serif font
• Frank Ruhl Libre - An open source version of a classic Hebrew serif typeface, made variable
• Fraunces - A variable display, “Old Style” soft-serif typeface
• Intel One Mono - An expressive monospaced font family that’s built with clarity, legibility, and the needs of developers in mind
• Inter - A typeface carefully crafted & designed for computer screens
• JetBrains Mono - A typeface for developers
• Kraftstoff - A typeface based on antique gas pump meters
• League Mono
• Linden Hill
• Manrope - Sans-serif variable font with custom ligatures
• Miguela Script
• Nyght Serif - Contemporary serif with a spicy character
• Overpass - RedHat’s open-source font family
• Piazzolla
• Picaflor - Hybrid display typeface with calligraphic details - French didone meet Spanish vernacular exhuberance
• Public Sans - Neutral typeface from the U.S. administration
• Recursive - A five-axis variable font (Monospace, Casual, Weight, Slant, and Cursive)
• Schibsted Grotesk - Variable font crafted for user interfaces
• Silka - Geometric font
• Sofia Sans - Sans-serif with extended coverage of the Latin-, Greek- and Cyrillic Script

Pay what you want

• Argesta - A timeless & elegant serif typeface
• Dragon - Condensed display variable typeface, with optional inktraps and angled ends
• Novela Poster - The “fat didone” sister of Novela
• Novela - A timeless serif font with a calligraphic quality, available for display and text

Build with accessibility in mind

• Atkinson Hyperlegible - Greater legibility and readability for low vision readers, focusing on letterform distinction to increase character recognition
• Inconstant Regular - Created to be friendly to both dyslexia and designers alike, with irregular shapes, built-in variable accessibility features and contextual alternatives
• Luciole - Designed around a dozen specific design criteria to provide the best possible reading experience for visually impaired people

Newsletters

• Web typography - Monthly, no bullshit & zero spam newsletter with cool web typography stuff

Color

Articles

• Color & contrast - A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast

Tools

• Accessible brand colors - Check contrast ratios of a whole color palette
• Accessible color generator - Finds the closest variations of any given color so it meets contrast requirements
• Cohesive colors - Tool that can help you to create cohesive color palettes
• Color review - Contrast checker
• Color Space - Color palettes generator and color gradient tool
• ColorHexa - Color encyclopedia : information and conversion
• Colorizer - Color picker, calculator and generator with contrast test, supporting RGB, HEX, HSL, HSV/HSB, CMYK, CIE-LAB colors and more
• Coolors - Color scheme generator
• Huemint - AI color palette generator
• Huey - Rapid color palettes across the rainbow
• LCH colour picker - Pick colors in a perceptually uniform space
• Name that color - Finds a descriptive name for about any color
• Schemist - Cohesive and accessible color schemes builder
  (I made this, this is very nice, you should go try it!)
• Semantic colors generator - Derive cohesive semantic colors (greenish for success, reddish for errors etc) from a single brand color
• Who can use - See how color contrast can affect different people with visual impairments

Palettes

• Colors - A nicer color palette for the web
• Open color - Open-source color scheme optimized for UI

Images

Tools

• Cleanup.pictures - Remove any unwanted object, defect, people or text from a picture
• Real Favicon Generator - Facilitates favicon setup over each and every platform
• Remove BG - Remove image backgrounds automatically
• Squoosh - Make images smaller using best-in-class codecs, right in the browser
• SVGOMG - Optimize SVGs with SVGO
• TinyPNG - Optimize PNGs, JPGs and more
• Vector Magic - Easily convert JPG, PNG, BMP, GIF bitmap images to SVG, EPS, PDF, AI, DXF vector images with real full-color tracing

Illustrations

• Icons8 illustrations - Free vector and 3D illustrations
• Streamline’s illustrations
• unDraw - Open-source SVG illustrations with customizable color theme

Icons

• Akar icons - Perfectly rounded icon library made for designers and developers
• Codicon - The icon font for Visual Studio Code
• Feather icons - Open source icons with adjustable size, stroke and color
• Flag icons - A curated collection of all country flags in SVG
• Flagpack - Open source flag icons with customizable look and feel
• Fluent System Icons - Familiar, friendly and modern icons from Microsoft
• Font Awesome - Thousands of free quality icons in dozens of categories
• Hero icons - Hand-crafted SVG icons by the makers of Tailwind CSS
• IcoMoon - Free icon packs to pick and choose from
• Iconbuddy - Hundreds of high quality open source icon sets
• Iconic - Free, “do wtf you want with” pixel-perfect icons
• Iconoir - A high-quality selection of free icons
• Lucide - Beautiful & consistent icon toolkit made by the community (fork of Feather icons)
• Phosphor - Flexible icon family for interfaces, diagrams, presentations
• Remix icon - Open-source neutral-style system symbols elaborately crafted for designers and developers
• Streamline’s icons
• Tabler icons - Free and open source icons designed to make your website or app attractive, visually consistent and simply beautiful

Emoji

• Fluent Emoji - A collection of familiar, friendly, and modern emoji from Microsoft
• Noto Emoji - An open source font that has you covered for all your emoji needs