Awesome

Awesome DevEd

A collection of awesome DevEd.

DevEd is "developer education" and as part of DevRel can encompass documentation sites, community hubs, blogs, tutorials, articles, courses, talks, games, showcases, webinars, workshops, platforms, universities/academies, visual essays, interactive playgrounds, and more. Whatever helps educate developers on a technology or product.

Curated by Kamran Ayub to spotlight and showcase the awesome DevEd everyone is creating.

Contributing

Contributions are welcome. "Awesome" is subjective but in general, awesome DevEd is typically "effortful" (not "just" a tutorial/article/how-to), unique in nature, has had evidence-backed impact, or pushes the boundaries of what it means to be "content" such as incorporating gamification, interactivity, or creative production techniques. This is what I refer to as "umami-flavored" content that leaves a really good taste in your mouth. Notably it does not need to depend on the creator being "known". Anyone can create Awesome DevEd.

Contents

1. Academies & Universities
2. Blogs
3. Books
4. Conference Talks
5. Courses
6. Documentation
7. Games
8. Learning Experience Platforms (LXPs)
9. Podcasts
10. Reference Sites
11. Video Channels
12. Visual Essays

Academies & Universities

Part of "Higher DevEd," these are platforms that train and upskill developers (mostly external)

• Algolia Academy - Training, certifications, live events covering Algolia and integrating with different use cases like front-end, search, and UX
• Hashicorp Developer - Includes courses and certifications
• JetBrains Academy - Learn languages, skills, build apps, and more with over 30+ tracks and 2,000+ tech topics through their platform Hyperskill
• JFrog Academy - Training on using JFrog products, focused on upskilling developers using JFrog products
• LaunchDarkly Academy - LaunchDarkly's academy with a solid space theme featuring self-paced learning and virtual labs/workshops
• Learn Chef - Chef's learning site, cited as their top lead generator
• Learn Cypress - Custom learning site built with Next.js by the Cypress team (source)
• Learn MongoDB - Self-paced courses, get certifications, and learn MongoDB. Cited 15% of their revenue is derived from leads with the University/Learn site as their first-touch.
• Redis University - Instructor-led courses, certifications. Cited as creating highly-qualified leads.
• Storybook Tutorials - Self-paced peer-reviewed learning courses built by the Chroma UI team. (source)
• Twilio's Segment Academy - Web-based lessons that you can also get dripped via email. Example of a lead magnet.

Blogs

• Amelia Wattenberger - Amelia is a data visualization and experience engineer with a blog that features awesome interactive samples and visual essays
• GitHub README Project - The ReadME Project amplifies the voices of the open source community: the maintainers, developers, and teams whose contributions move the world forward every day.
• LogRocket - Attracts millions of developers with over 3,000+ articles on frontend topics.
• Twilio - Over 2,000+ tutorials since 2008 on ways to integrate and use Twilio products.
• The Ankur Tyagi - Attracts 100K+ developers with over 50+ technical articles on developer tools and writing for engineers.

Books

• Beautiful Racket - Online book on language-oriented programming using Racket by Matthew Butterick
• Practical Typography - Online book on typography by Matthew Butterick
• Select Star SQL - Interactive book that teaches SQL using a Texas Death Row dataset by Zi Chong Kao
• The Pragmatic Programmer - A timeless guide that equips software developers with practical techniques, tools, and principles.

Conference Talks

• Drawing the Invisible: React Explained in 5 Visual Metaphors - An amazing visual talk by Maggie Appleton that explains React just like it says.
• It's not what you read, it's what you ignore - Insights from Scott Hanselman on how to focus on value and stop working on things that are unimportant.
• Stop Drawing Dead Fish - An incredible talk by Bret Victor about the essence of digital art.
• Wat - Widely shared talk on the quirks of JavaScript and Ruby by Gary Bernhardt.
• You are Not an Impostor - A great dive into imposter syndrome and ways to deal with it.

Courses

Single Learning Path

• DashingD3js - A nuts and bolts explanation of the D3 animation library.
• Epic React - Code-along interactive course and workshops that teach React fundamentals. 19 hours of course material plus 10 hours of conversations with React experts.
• Hack Yourself First - A website made by Troy Hunt that showcases 50+ sloppy security practices as part of his security course.
• Learn Git Branching - Gamified interactive Git course that emphasizes branching.
• Serverless Visually Explained - See and interact with serverless concepts with animated examples, code snippets, and demos.
• Svelte Tutorial - Interactive step-by-step tutorial to learn Svelte
• TypeScript Training - Interactive and self-paced course on learning TypeScript with annotated code snippets and formatting specifically designed for the TS compiler.
• Web Audio School - Interactive WebAudio tutorials.

Multiple Learning Paths

• CryptoZombies - Learn Solidify and Ethereum blockchain development by creating learning games
• Execute Program - Interactive courses on TypeScript, Modern JavaScript, SQL, regular expressions, and more. Each course is made up of hundreds of interactive code examples running live in your browser.
• NodeGuardians - Learn web3 in a gamified RPG-like experience with campaigns, quests, skill trees, and character management

Course Platforms

• Code.org - Every student in every school should have the opportunity to learn computer science.
• Codecademy - Learn to code interactively, for free.
• Educative - Self-paced developer education platform
• FreeCodeCamp - Non-profit site where anyone can contribute educational content, get certifications, and find jobs.
• Pluralsight - The professional tech upskilling platform
• Wilco - Gamified hands-on simulator for teaching developers how to use dev tools and products in a real-world-like environment using Quests

Course Creation

• CourseMaker - SaaS product for creating, hosting, and selling technical courses
• CourseMaker/gatsby-theme-coursemaker - Gatsby.js Theme from CourseMaker designed for individual creators that sell courses
• Wilco - Gamified hands-on simulator for teaching developers how to use dev tools and products in a real-world-like environment using Quests

Documentation

• Hashicorp Docs - All-in-one dev hub w/ built-in bookmarks, progress, self-paced tutorials with videos, certifications, and more.
• React Docs (beta) - Includes interactive labs and challenges
• Medusa - Redesigned and treated as a product (see
• Nivo - D3 viz library with interactive visualizations as the docs
• Stripe Docs - Interactive and example-rich developer documentation for the popular payment platform
• Twilio Docs - Interactive and example-rich developer documentation for the popular communication platform. (Also see: Games > JavaScript > TwilioQuest)

Tools

• Alphadoc.io - Platform. Build interactive documentation using visual tools featuring sequence diagrams and visual stories. Primarily for OpenAPI-based projects and SDKs.
• Code Hike - Easily build code tutorials with MDX and React.
• Diátaxis - Originally developed by Daniele Procida at Divio, this is a unified system for developing technical documentation.
• Docusaurus - Open source. Docusaurus is a static-site generator. It builds a single-page application with fast client-side navigation, leveraging the full power of React to make your site interactive.
• Docfx - Open source. Documentation and static site generator for .NET API projects.
• Docz - Open source. Documentation site starter for Gatsby.js that offers built-in features to make writing documentation sites easier.
• gatsby-gitbook-starter - Open source. A starter for Gatsby.js that matches the style of GitBook and supports a bunch of documentation-related features.
• GitBook - Free + Per User Pricing. Documentation platform/framework supporting CMS-style editing and hosting of docs and technical content.
• Mintlify - Free + Flat Monthly Pricing. Documentation platform/framework supporting MDX-based docs, GPT-based search, component library, and more.
• Readme - Free + Per Project Pricing. Developer hub platform to host technical documentation with versioning, playgrounds, usage analytics, forums, and interactive APIs.
• Redoc - Open source. Alternative to Redocly to host API documentation with interactive playgrounds.
• Redocly - Free + Flat Monthly Pricing. Developer hub platform to host API documentation with interactive playgrounds.
• Shiki - Embed code samples with VSCode-powered syntax highlighting.
• Shiki Twoslash - The power of Shiki, plus TypeScript compiler annotations.
• Wilco - Gamified hands-on simulator for teaching developers how to use dev tools and products in a real-world-like environment using Quests

Games

Thanks to https://github.com/yrgo/awesome-educational-games for tracking games specifically

CSS

• CSS Diner - It's a little game to help you learn CSS selectors.
• CSS Grid Garden - A game for learning CSS grid layout.
• Flexbox Defense - Unlike other tower defense games, you must position your towers using CSS!
• Flexbox Froggy - A game for learning CSS flexbox.
• Flexbox with Webflow - Learn and master flexbox in 28 interactive levels—without writing code.

Developer Tools

• Ably Serverless Websockets Quest - Learn Serverless Websockets through an ADND multiplayer game (source)
• Ably Space Invaders - Multiplayer Space Invaders game built with Phaser and Ably APIs. (source)
• Ably Tower Defense - Demo showing Ably's real-time API in action with a multiplayer Tower Defense game
• Wilco - Gamified hands-on simulator for teaching developers how to use dev tools and products in a real-world-like environment using Quests

Editors

• Open Vim - Interactive Vim tutorial.
• Vim Adventures - Learning Vim while playing a game.
• Vim Genius - Increase your speed and improve your muscle memory with Vim Genius.

Linux

• Bashcrawl - Learn Linux commands by playing a simple text adventure .

Databases

• SQL Murder Mystery - Solve a crime while practicing database skills.

JavaScript

• Screeps - The world's first MMO strategy sandbox game for programmers.
• Untrusted - Learn while playing a JavaScript adventure game.
• TwilioQuest - Go on a quest to learn web development how to build a web app with JavaScript and Twilio.
• WarriorJS - Using JavaScript, program a warrior to climb a tall tower, fight monsters and rescue captives.

Programming

• BOX-256 - Program a fictional CPU with assembly to output graphics.
• Clips the Game - A demanding logic game based on the clips rule engine.
• Code Avengers - Learn to build websites, apps and games in a fun and effective way.
• CodeCombat - An engaging coding game for learning programming.
• CodinGame - A challenge-based training platform where you can play with the hottest programming topics.
• Cube Composer - A puzzle game inspired by functional programming.
• Deadlock Empire - Solve puzzles with concurrency.
• Mimo - Learn how to become a developer on mobile.
• Programming Games Wiki - A long-standing catalogue of programming games through the years.
• RegexOne - Learn Regular Expressions with simple, interactive exercises.
• ReturnTrue - A game were you learn about booleans, return true to win.
• Swift Playgrounds - Learn to code on your iPad in a seriously fun way.

Security

• XSS game - A game about tricking people into running code in their browsers.

Web3

• CryptoZombies - Learn Solidity and Ethereum blockchain development by creating learning games
• NodeGuardians - Learn web3 in a gamified RPG-like experience with campaigns, quests, skill trees, and character management

Learning Experience Platforms (LXPs)

LXPs are "next-gen" Learning Management Systems (LMS) that are designed learner-first (designed for a better learning experience) instead of author-first (ease of authoring).

• Appsembler - B2B SaaS LXP built on top of Open EdX, designed for developer education (powers Chef, Redis, etc.)
• Tutor - Self-managed Docker version of Open EdX
• Wilco - Gamified hands-on simulator for teaching developers how to use dev tools and products in a real-world-like environment using Quests

Podcasts

• Corecursive: Coding Stories - Like This American Life but for software developers
• The Rabbit Hole - A lighthearted podcast that takes a pragmatic look at trends in software development.

Video Channels

• Fireship - Short videos on a wide variety of programming topics, complete with plenty of tongue-in-cheek humor.

Reference Sites

Microsites

• CSS Reference - Complete reference of CSS properties with examples.
• HTML Reference - Complete reference of CSS properties with examples.
• Flexbox Cheatsheet - Turns static W3C spec of CSS Flexbox Level 1 into interactive examples.
• Illustrated.dev - Illustrated explanations of web development, technology & a little bit of anthropology.
• Microfrontend.dev - Learn about the microfrontend architecture pattern and practices, and when / when not to consider it.

Wikis/Community Sites

• MDN - The Mozilla Developer Network. Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.
• Microsoft Docs - Formerly MSDN. Documenting the Microsoft (and surrounding) ecosystems since 1992.
• StackOverflow - The top Q&A programming site.

Visual Essays

Individual Essays

• Advanced animation patterns with Framer Motion - Maxime Heckel
• Build your own React - Rodrigo Pombo
• Care About What You Build - Brandon Hilkert. An introspective article on loving software development even when you may not be working on the most glamorous product.
• CSS Cascade - Amanda Wattenbrger. The cascade is a river, and has a kayaker that paddles downriver as you scroll through the article.
• Cubic Bézier: from math to motion - Maxime Heckel. Features interactive animations that showcase different types of curves.
• Dark Mode by Local Sunlight - Chris Nicholas
• How do arrays work? - Nanda
• How to remember things - Nicky Case
• Lights and Shadows - Bartosz Ciechanowski
• Making things move - Varun Vachhar
• Moving along a curved path in CSS with layered animation - Tobias Ahlin
• Noise in Creative Coding - Varun Vachhar
• [Parents vs. Owners in React] - Jules Blom, a two-part series (1) and (2).
• Rebuilding Babel: The Tokenizer - Nanda Syahrasyad. Features a custom widget to step through the tokenization process, which displays interim results.
• Tasks, microtasks, queues and schedules - Jake Archibald. Features an animated step-by-step diagram that got tons of love for in the comments. Not a "full" dataviz essay but interactive visual is umami.
• Up and Down the Ladder of Abstraction - Bret Victor. Takes an example of designing a control system for a simple car simulation, and references it throughout the essay with visuals and interactive widgets accompanying the narrative.
• Which Blend Mode - Chris Nicholas. Featuring interactive examples to show the varying results of different blend modes.

Collections

• Amelia Wattenberger - Amelia is a data visualization and experience engineer with a blog that features awesome interactive samples and visual essays.
• Explorable Explanations - Combining learning and play, the site is a hub of interactive and visual essays around topics, not only limited to data viz and programming.
• Jules Blom - Frontend developer specializing in React and D4.js who writes visual essays, including walkthrough code samples, embedded quizzes, and interactive diagrams.
• Maggie Appleton - Makes visual essays about UX, programming, and anthropology.
• Pudding.cool - Data viz magazine featuring many different visual essays.
• Worrydream - Bret Victor. Unique web-based site design, visual essays, and interactive demos.