A collection of resources/tools/courses/explanations and everything else I've come across that has been helpful to me.
-
- Databases
- Design
- JavaScript
- PHP
- Web
-
- Git
- HTML & CSS
- PHP
-
- Computer Science
- Database
- Design
- Eleventy
- Java
- JavaScript
- PHP
- Rust
- TypeScript
- Web Animation
- Web Development
-
- Algorithms
- Databases
- Eleventy
- Fundamentals
- Java
- JavaScript Concepts
- PHP
-
- Accessibility
- CSS
- Design Systems
- Development
- Eleventy
- JavaScript
- Marketing
- PHP
- UX
-
- Development
- Eleventy
-
- Accessibility
- Charts
- CLI
- CMS
- Color
- CSS Libraries & Frameworks
- Database
- Development Utilities
- Diagramming
- Extensions
- Fonts
- HTML & CSS
- Icons
- Image Optimization
- Images
- JavaScript Libraries & Frameworks
- Layout
- Miscellaneous
- Performance
- PHP
- Responsive Design
- SEO
- System & Network Administration
- UX
-
- Accessibility
- Database
- Eleventy
- HTML & CSS
- JavaScript
- Miscellaneous
- PHP
Databases
Design
Git
HTML & CSS
Computer Science
Database
Eleventy
Java
JavaScript
PHP
Rust
Web Animation
Web Development
Algorithms
Databases
Fundamentals
JavaScript Concepts
PHP
Accessibility
CSS
- A Complete Guide to CSS Cascade Layers
- A Complete Guide to Dark Mode on the Web
- Learn CSS Grid
- Standards for developing consistent, flexible, and sustainable HTML and CSS
- CUBE CSS is a CSS methodology that's orientated towards simplicity, pragmatism and consistency
- A Practical Guide to Centering in CSS
Design Systems
Development
- Semantic Versioning 2.0.0
- Keep a Changelog
- Developer Roadmap
- System Design Primer
- Coding Interview University
- Front End Interview Handbook
- Tech Interview Handbook
- Curated list of IT Topics
- The Ultimate Guide To Push Notifications For Developers
- macOS Setup Guide
- Cron Jobs: A Comprehensive Guide
- Awesome Guidelines
- An interactive guide to color & contrast
- web.dev/patterns/
- A Guide To Image Optimization On Jamstack Sites
JavaScript
Marketing
Helpful Websites
- Tiny Helpers
- moderncss.dev
- Open Source Alternatives
- Send
- Wormhole
- SwissTransfer
- SN FileSend
- degoogle
- AI generated questions and answers
- 11ty Rocks!
- SmolCSS
- Grid by example
- Codeawesome
- Stackshare
- toools.design
- a11ysupport.io
- Devtool Tips
- MDN Learning Area
- letsbuildui.dev
- opensourcealternative.to
- designresources.io
- free-for.dev
- freestuff.dev
- Some ideas for websites you can build
- Open Web Components
- Modern Web
- components.ai
- bedrock-layout.dev
- Operator Lookup
- indieblog.page
- gridless.design
- Insanely Useful Websites
- Just Good Themes
- Jamstack Themes
- dopeui.co
- QlndR.io
- VueUse.org
- systemfontstack.com
- webhighlighter.com
- ethicaldesignresources.com
- beta.sayhello.so
- nosignup.tools
- untools.co
- c3css.com
- HTML Living Standard Document
- Web Content Accessibility Guidelines
- you.com/code
- classless-css-demo.deno.dev
- playsearch
- canidev.tools
- component.gallery
- projectbook.code.brettchalupa.com
- sqlteaching.com
- endoflife.date
- fedi.tips
- uiverse.io
- localfonts.xyz
- unicopy.cc
- unshorten.it
- phind.com
- futureoftech.org
- cheatsheetseries.owasp.org
- typetrials.com
- product-design-roadmap.com
- grep.app
- bite-sized-a11y.com
- modernfontstacks.com
- whatdoesthiscodedo.com
- passkeys.io
- passkeys.dev
- tweek.so
- boredreading.com
- career-ladders.dev/engineering/
- patterns.dev/resources
- OpenAI Cookbook
- perplexity.ai
- uptime.is
- c4model.com
- speed.cloudflare.com
- pdftool.org
- webglossary.info
- conventionalcommits.org
- conventionalcomments.org
- betterstories.org
- wireframe-examples.com
- aboutideasnow.com
Interesting Reads
- Discipline eats motivation for breakfast
- What you need is discipline
- Practical discipline
- Laziness does not exist but unseen barriers do
- Why are hyperlinks blue?
- Planning for momentum
- Curves and Surfaces
- Writing an OS in Rust by Philipp Oppermann
- Mastering Simplicity
- Writing Logic in CSS
- Coding & Confusion
- What makes writing more readable?
- Write plain text files
- The imperfections of Gmail
- Client Journey: Onboarding, Iterating, and Offboarding
- Interop 2022
- Bottlenecks of Scaleups
- Embrace the Platform
- Building Web Layouts For Dual-Screen And Foldable Devices
- 100 Bytes of CSS to look great everywhere
- CSS Parts Inspired by BEM
- How to use undocumented web APIs
- Alternatives to Pagination on Product-Listing Pages
- Open Web Advocacy
- Taming CSS Variables with Web Inspector
- How to design better APIs
- Improving The CI/CD Flow For Your Application
- What's in your zone of genius?
- Things the CSS Spec Folks Got Right
- How to framework your site
- The 15 minute fix vs the 30 day fix
- Inline All The Things
- How to make MPAs that are as fast as SPAs
- The Monty Hall Rewrite
- Webmentions: Enabling Better Communication on the Internet
- A Dao of Web Design
- Why software projects take longer than you think: a statistical model
- What's Really Going On Inside Your node_modules Folder?
- A user guide to working with the Almanac CEO
- In Defence Of Dialog
- Fun with the dialog element
- First look: adding type annotations to JavaScript
- State Of WordPress Security In 2021
- When or If
- Ionic vs. React Native: Performance Comparison
- Extreme questions to trigger new, better ideas
- JavaScript to Know for React
- Reading Code From Top to Bottom
- Drawing the Invisible: React Explained in Five Visual Metaphors
- Firefox UI UX history
- Understanding Layout Algorithms
- Async JavaScript: From Callbacks, to Promises, to Async/Await
- Hydration is Pure Overhead
- Four Eras of JavaScript Frameworks
- The complete guide to protecting your APIs with OAuth2 (part 1)
- CSS :has( ) A Parent Selector Now
- 7 Web Component Tricks
- The Future of CSS: CSS Toggles
- Contextual Spacing For Intrinsic Web Design
- CSS Toggles Explainer & Proposal
- Progressive Enhancement and HTML Forms
- Progressively Enhanced Builds
- How to Find Great Developers By Having Them Read Code
- Mechanical Watch
- Building a JavaScript Bundler
- A Management Maturity Model for Performance
- The Anatomy of a Design System
- Designers, (Re)define Success First
- State of CSS 2022
- State of Frontend 2022
- Writing Better CSS
- A New Future for the Interface
- Building a design system with Eleventy
- New CSS selectors that make your life easier
- Web Applications 101
- Demystifying Database Performance for Developers
- The Blanc Media 8-Week Work Cycle with Sabbaticals
- sqlite-utils: a nice way to import data into SQLite for analysis
- Compiling Content Stats for a JAMstack Site Using Eleventy
- Mobile-First CSS: Is It Time for a Rethink?
- On Creativity: My modest guide to being more creative
- The Road to Burnout is Paved With Context Switching
- Software Engineering - The Soft Parts
- Why You Should Write Weekly 15-5s
- How To Ask Questions The Smart Way
- The history of user interfaces
- Technical Writing for Developers
- :has(): the family selector
- Optimizing for JavaScript is hard
- Where's the fun in accessibility?
- An Introduction to Constraint Based Design Systems
- Why React Re-Renders
- The Debug Diary
- Code For The Maintainer
- Crafting a Business Oriented Developer Portfolio that Stands Out
- Readme Driven Development
- QR codes
- Choose Boring Technology
- Website Load Time Statistics: Why Speed Matters
- Sustainable Web Development Strategies Within An Organization
- New patterns for amazing apps
- Drag and Drop UX Best Practices
- Programming Portals
- Dialog Modal Popover Differences
- The evolution of scalable CSS
- Hostile Patterns in Error Messages
- The Creative Switch
- The Art of Fermenting Great Ideas
- Your words are wasted
- Optimizing A Vue App
- Tree views in CSS
- The anatomy of visually-hidden
- De-Atomization is the Secret to Happiness
- Knowledge is like a house of cards
- Optimizing Language Models for Dialogue
- FFmpeg - The Ultimate Guide
- Foundational skills
- How to Build Leverage from Scratch
- Select The Right Tool For The Job
- How to Create Luck
- How to remember anything forever-ish
- Why Write?
- A Case Study Of Migrating A Headless CMS System
- Common Beginner Mistakes with React
- Prompt Engineering
- Laying Out a Print Book With CSS
- Visual design rules you can safely follow every time
- Grid World
- The search element
- The world’s most satisfying toggle
- A Short History of Artificial Intelligence
- Designing a Wellness App
- Thinking Big
- How to rebuild your work habits from scratch
- AI in engineering
- How to Turn Editing Into the Best Part of Writing
- Navigating the unpredictability of everything
- The Move to Memory-Safe Programming
- 3 Methods for Scoped Styles in Web Components That Work Everywhere
- How generative AI is changing the way developers work
- Journey into sleep
- The Cost of Craft
- React, Visualized
- Load Balancing
- Eight Things to Know about Large Language Models
- Release Early, Release Often
- Write Like You Talk
- How to use AI to do practical stuff
- Towards better 1-on-1s
- Text Is the Universal Interface
- Making a plan
- The growing pains of database architecture
- Why font-size must NEVER be in pixels
- What makes a strategy great
- The Cost of Personalization
Inspiration
- Windle for Windows 3.1
- oss.love
- paint.withdiagram.com
- Jesse's Ramen
- microwaver59
- personalsit.es
- Umami Land
- Jantana Hennard
- Patrick Heng
- The Race
- Good Things
- Expanding Rounded Menu Animation
- bestwebsite.gallery
- cssnectar
- lapa.ninja
- commercecream
- designspiration
- siteinspire
- Melanie Richards
- Robin Payot
- Awesome Demos Roundup #20
- Just a Calendar
- David Heckhoff
- David Kirschberg
- zulu.longines.com
- Awesome Github Profile
- UI/UX Design for PayGO
- rre.com
- Visual identity for Opal Camera
- exoape.com
- ui-buttons.web.app
- terrain-warp.vercel.app
- wowpage.io
- Fullscreen Scrolling Slideshow
- Creative list styling
- Design the next iPhone
- marvel.ladataviz.com
- nicepage
- mrpops.ua
- saaa.am
- creativesouth.com
- rose-island.co
- chainzoku.io
- studiorhe.com
- aboutgropius.com
- lenis.studiofreight.com
- E-commerce Web Design and UX for Estrid
- whimsical.club
- leebyron.com/4000/
- lowww.directory
- lowwwcarbon.com
- lowwwimpact.com
- ecograder.com
- wearemotto.com
- lightshiprv.com
- okcclabs.com
- darkmodedesign.com
- minimal.gallery
- Racing Cars Poster Series
- bowndsranches.com
- floor796.com
- ncase.me/door
- archives.design
- Valery Marier
- optical.toys
- noclip.website
- collected.li
- godly.website
- elysium.thebenezer.com
- scrnshts.club
- maxibestof.one
- deadsimplesites.com
- navbar.gallery
- 404s.design
- designspells.com
Talks
Development
Eleventy
Accessibility
Charts
CLI
CMS
Color
- Coolors - color palettes generator
- Alwane - Extract CSS Colors
- cccolor
- randomcolor.design
- Huemint
- open source color system
- hue.tools
- pppalette
- color-morph
- cssgradient.io
- brandcolors.net
- Reasonable Colors
- Hypercolor
- Color Name Generator
- goodpalette
- Color Shades Generator
- hhhue
- randoma11y.com
- csshero.org/mesher
- gradicol.vercel.app
- gradientspace.vercel.app
- gradient.style
- uicolors.app
- oddcontrast.com
- stephango.com/flexoki
CSS Libraries & Frameworks
- newcss.net
- Water.css
- MVP.css
- Pico.css
- Uimini
- cirrus-ui
- Skelet.css
- tailblocks.cc
- HyperUI
- Tailwind E-commerce
- Bootstrap E-commerce
- Drop-in Minimal CSS
- Preline UI
- missing.style
- daisyUI
- Tabler Dashboard UI Kit
- simplecss.org
- ripple-ui.com
- sailboatui.com
- toggles.dev
- floatui.com
- daisyui.com
- ui.shadcn.com
- nativewind.dev
- twrnc
Database
Development Utilities
- showcode.app
- Ten Hands
- codepng
- lipsum
- Uptime Kuma
- terser
- A collective list of free APIs
- Microsoft PowerToys
- DevToys
- API Diff
- Lyricsum
- Utopia - Fluid Responsive Design
- TortoiseGit - Windows Git Client
- kod.so - Beautiful Code Screenshots
- Eleventy + Lit
- GitHub Desktop Client
- Resource Hint Validator
- ungoogled-chromium
- mjml.io
- HTML Forms Library
- JSON Visio
- Hoppscotch
- Lapse Code Editor
- Tweetlet
- Web Dev Server
- Lando
- W3C Feed Validation Service
- ladle.dev
- tooling.one
- Screely - Generate Website Mockups
- chalk.ist
- arraybuilder
- massCode - A free and open source code snippets manager
- Yaade
- FreeCodeTools Markdown Preview
- Markdit
- Visualist Moodboarding
- commands.dev
- Umbrel
- Paddle
- ERD Editor
- Ditto Clipboard
- Mozilla SSL Configuration Generator
- servefolder.dev
- autoregex.xyz
- upgraderoo.janez.tech
- recoded.netlify.app
- frontendchecklist.io
- lightningcss.dev
- jsoncrack.com
- mocked-api.dev
- fluid-type-scale.com
- Website Carbon calculator
- reqres.in
- stackbricks.app
- restcountries.com
- backstage.io
- OneCompiler
- app.codeimage.dev
- localtunnel.me
- upptime.js.org
- sqltranslate.app
- Green Web Check
- transform.tools
- typescale.com
- gut-cli.dev
- evanw.github.io/thumbhash
- Tabby
- beamanalytics.io
- yoavbls.pretty-ts-errors
- plopjs.com
- thunderclient.com
- insomnia.rest
- hoppscotch.io
- httpie.io
- paw.cloud
- web-check.as93.net
- plane.so
- rameshvarun.github.io/blog-cells/
- continue.dev
- easyful.com
- eruda.liriliri.io
Diagramming
Extensions
Fonts
- Inter typeface family
- JetBrains Mono
- Manrope
- Roboto Serif
- Webfont Generator
- Fontfacer.io
- google-webfonts-helper
- A Typographic Scale Calculator
- Roboto Flex
- figtree
- Atkinson Hyperlegible Font
- Fallback Font Generator
- Victor Mono Font
- Mona Sans Font
- shantellsans.com
- fonty.io
- Intel One Mono Typeface
- commitmono.com
- oliviaking.com/inclusive-sans
HTML & CSS
Icons
- Bootstrap Icons
- heroicons
- Country Flags in SVG
- MDB - badges for your projects
- Skill Icons
- tabler icons
- Material Symbols
- feathericons.com
- iconer.app
- openmoji.org
- sargamicons.com
- lucide.dev
- Glyph Machine
- xicons.org
- forthebadge.com
- realfavicongenerator.net
- favicon.software
- atlasicons.vectopus.com
- danklammer.com/bytesize-icons
Image Optimization
- Squoosh
- TinyPNG
- JPEG.rocks - Privacy-aware JPEG optimizer
- jpeg-optimizer
- Caesium Image Compressor
- Mac Only Image Optimizer
- shrink.media
- Bulk Image Compressor
- blurhash
- bgremover
- Responsive Image Breakpoints Generator
- bulkresizephotos
- Compressor.js
- Optimizilla
- Colorize Pictures
- jakearchibald.github.io/svgomg/
- erase.bg
- backgroundremoverai.com
Images
JavaScript Libraries & Frameworks
- lightGallery
- Ninja Keys
- lwder.js
- Stylo
- GalleriaJS
- PhotoSwipe
- Swiper
- Pikaday, A refreshing JavaScript Datepicker
- Corset - bind JavaScript to HTML
- AgnosticUI
- Vanta.js
- Rocket
- AdonisJS - web framework for Node.js
- highlight.js
- YouTube.js
- HyperJS
- FortuneSheet
- wikifox.js
- lenis smooth scroll
- ZagJS
- aleph.js
- XSAlert
- Grid.js
- AutoAnimate
- Partytown
- Color.js
- cookienotice.js.org
- NextUI
- BareBones
- htmx.org
- rematchjs.org
- lyrajs.io
- svelvet.io
- cmdk.paco.me
- ncase.me/nutshell
- he - html entity encoder/decoder
- neodrag
- solid-toast.com
- tremor.so
- lunrjs.com
- docs.lyrasearch.io
- vuestic.dev
- mantine.dev
- fiduswriter.github.io/Simple-DataTables
- analogjs.org
- react-toastify
- react-hot-toast.com
- pikaday.com
- moment.github.io/luxon
- day.js.org
- blocknotejs.org
- feathersjs.com
- docus.dev
- lucia-auth.com
- pixijs.com
- revealjs.com
- unlazy.byjohann.dev
- vuetifyjs.com
- zustand-demo.pmnd.rs
- tanstack.com
- lucaong.github.io/minisearch
- pagefind.app
- million.dev
- vant-ui.github.io/vant
- Radix Vue
- ngneat.github.io/transloco
- jsoncanvas.org
Miscellaneous
- WinMD5Free
- MD5 & SHA Checksum Utility
- motionity.app
- penpot.app
- coroot
- content-parser.com
- ezcv.pro
- readme.so
- beeftext.org
- SpaceSniffer
- tweetback
- Adobe Podcast Enhance Speech
- Flow Launcher
- Script Kit
- screentogif.com
- MasterSeeker - Fast File Search Engine
- WhatWhat - Translation App
- bcuninstaller.com
- HiBit Uninstaller
- kimai.org
- hemingwayapp.com
- bitwarden.com
- keepassxc.org
- koreader.rocks
- Mechvibes
- codewith.mu
- khoj.dev
- organicmaps.app
- WizTree - Disk Space Analyzer
- ghostwriter - Markdown Writer
- smtp4dev
Performance
PHP
Responsive Design
System & Network Administration
Accessibility
Database
Eleventy
HTML & CSS
- HTML & CSS Is Hard
- Learn CSS by web.dev
- Custom Select Styles with Pure CSS by Stephanie Eckles
- Web Design in 4 minutes
- How I Make CSS Art by Yosra Emad
- A Clever Sticky Footer Technique
- The Process of Implementing A UI Design From Scratch by Ahmad Shadeed
- Animating in a newly added element
- UI Tips
- CSS Protips
- 10 Useful CSS Tricks for Front-end Developers
- How to Favicon
- A look at the dialog element's super powers
- How to preload responsive images with imagesizes and imagesrcset
- Making a custom clear text field button
- How to style radio and checkbox inputs with accent-color
- Create a popup modal the SUPER EASY way
- Building a loading bar component
- Aligning Content In Different Wrappers
- Building a Heatmap Chart Component
- Learn Forms by web.dev
- How to break an image out of its parent container with CSS
- How to Use CSS Math Functions
- Building a dialog component
- Picture perfect images with the modern img element
- Deep Dive into Text Wrapping and Word Breaking
- Learn CSS Subgrid
- How to create a PureCSS Tabs Navigation
- Avoiding img layout shifts
- Creating an Accessible Image Carousel
- Learn HTML by web.dev
JavaScript
- Understanding Async Await
- JavaScript.info - The Modern JavaScript Tutorial
- Modern JavaScript Explained For Dinosaurs
- JavaScript in 14 minutes by Jeremy Thomas
- Make a draggable element
- Detect Dark Mode Preference with JavaScript
- Creating Native Web Components with the Minze JavaScript framework
- A brief introduction to Test Driven Development (TDD) in JavaScript
- 30 seconds of code
- How to create a search page for a static website with vanilla JS
- How To Make A Drag-and-Drop File Uploader With Vue.js 3
- Building Table Sorting and Pagination in JavaScript
- Detect when a user leaves a page using JavaScript
- Building Table Sorting and Pagination in Alpine.js
- JavaScript object destructuring tips