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
- 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
- UX
-
- Accessibility
- Database
- Eleventy
- HTML & CSS
- JavaScript
- Miscellaneous
- PHP
Databases
Design
Web
Git
HTML & CSS
Computer Science
Eleventy
Java
JavaScript
PHP
Rust
Web Animation
Web Development
Algorithms
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
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
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/
Talks
Development
Eleventy
Accessibility
Charts
CLI
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
CSS Libraries & Frameworks
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
Diagramming
Extensions
Fonts
HTML & CSS
Icons
Image Optimization
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
Miscellaneous
Performance
PHP
Responsive Design
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