awesome-deved

KO | EN

gitlite — search

#react #llm #golang #android #machine-learning #deep-learning #docker #macos #java #windows #awesome #cli #vue #mcp

(★ 42)

DevEd with umami. Awesome List of developer education covering blogs, tutorials, academies, visual essays, games, and more.

awesome-deved Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://kamranayub.com?ref=awesome-deved) 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](https://kamranayub.com/umami?ref=awesome-deved)" 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](#academies--universities)
1. [Blogs](#blogs)
1. [Books](#books)
1. [Conference Talks](#conference-talks)
1. [Courses](#courses)
1. [Documentation](#documentation)
1. [Games](#games)
1. [Learning Experience Platforms (LXPs)](#learning-experience-platforms-lxps)
1. [Podcasts](#podcasts)
1. [Reference Sites](#reference-sites)
1. [Video Channels](#video-channels)
1. [Visual Essays](#visual-essays)

# Academies & Universities

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

- [Algolia Academy](https://academy.algolia.com/trainings) - Training, certifications, live events covering Algolia and integrating with different use cases like front-end, search, and UX
- [Hashicorp Developer](https://developer.hashicorp.com) - Includes courses and certifications
- [JetBrains Academy](https://www.jetbrains.com/academy/) - Learn languages, skills, build apps, and more with over 30+ tracks and 2,000+ tech topics through their platform [Hyperskill](https://hyperskill.org/tracks)
- [JFrog Academy](https://academy.jfrog.com/) - Training on using JFrog products, focused on upskilling developers using JFrog products
- [LaunchDarkly Academy](https://academy.launchdarkly.com) - LaunchDarkly's academy with a solid space theme featuring self-paced learning and virtual labs/workshops
- [Learn Chef](https://learn.chef.io/) - Chef's learning site, cited as their top lead generator
- [Learn Cypress](https://learn.cypress.io/) - Custom learning site built with Next.js by the Cypress team ([source](https://github.com/cypress-io/cypress-realworld-testing))
- [Learn MongoDB](https://learn.mongodb.com/) - 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](https://university.redis.com/) - Instructor-led courses, certifications. Cited as creating highly-qualified leads.
- [Storybook Tutorials](https://storybook.js.org/tutorials/) - Self-paced peer-reviewed learning courses built by the Chroma UI team. ([source](https://github.com/chromaui/learnstorybook.com))
- [Twilio's Segment Academy](https://segment.com/academy/) - Web-based lessons that you can also get dripped via email. Example of a lead magnet.

# Blogs

- [Amelia Wattenberger](https://wattenberger.com/blog) - Amelia is a data visualization and experience engineer with a blog that features awesome interactive samples and visual essays
- [GitHub README Project](https://github.com/readme) - 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](https://blog.logrocket.com) - Attracts millions of developers with over 3,000+ articles on frontend topics.
- [Sam Rose (samwho)](https://samwho.dev/) - Creates interactive visual essays on computer science topics
- [Twilio](https://www.twilio.com/blog) - Over 2,000+ tutorials since 2008 on ways to integrate and use Twilio products.
- [The Ankur Tyagi](https://theankurtyagi.com/) - Attracts 100K+ developers with over 50+ technical articles on developer tools and writing for engineers.

# Books

- [Beautiful Racket](https://beautifulracket.com/) - Online book on language-oriented programming using Racket by Matthew Butterick
- [Practical Typography](https://practicaltypography.com/) - Online book on typography by Matthew Butterick
- [Select Star SQL](https://selectstarsql.com/) - Interactive book that teaches SQL using a Texas Death Row dataset by Zi Chong Kao
- [The Pragmatic Programmer](https://pragprog.com/titles/tpp20/the-pragmatic-programmer-20th-anniversary-edition/) - A timeless guide that equips software developers with practical techniques, tools, and principles.

# Conference Talks

- [Drawing the Invisible: React Explained in 5 Visual Metaphors](https://maggieappleton.com/reactpotato) - 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](https://www.youtube.com/watch?v=IWPgUn8tL8s) - Insights from Scott Hanselman on how to focus on value and stop working on things that are unimportant.
- [Stop Drawing Dead Fish](https://www.youtube.com/watch?v=ZfytHvgHybA) - An incredible talk by Bret Victor about the essence of digital art.
- [Wat](https://www.destroyallsoftware.com/talks/wat) - Widely shared talk on the quirks of JavaScript and Ruby by Gary Bernhardt.
- [You are Not an Impostor](https://www.youtube.com/watch?v=l_Vqp1dPuPo) - A great dive into imposter syndrome and ways to deal with it.

# Courses

## Single Learning Path

- [DashingD3js](https://www.dashingd3js.com/d3-tutorial) - A nuts and bolts explanation of the D3 animation library.
- [Epic React](https://epicreact.dev/) - 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](https://hack-yourself-first.com) - A website made by Troy Hunt that showcases 50+ sloppy security practices as part of [his security course](https://www.pluralsight.com/courses/hack-yourself-first).
- [Learn Git Branching](https://learngitbranching.js.org/) - Gamified interactive Git course that emphasizes branching.
- [Serverless Visually Explained](https://serverless-visually-explained.com) - See and interact with serverless concepts with animated examples, code snippets, and demos.
- [Svelte Tutorial](https://svelte.dev/tutorial/basics) - Interactive step-by-step tutorial to learn Svelte
- [TypeScript Training](https://www.typescript-training.com/) - Interactive and self-paced course on learning TypeScript with annotated code snippets and formatting specifically designed for the TS compiler.
- [Web Audio School](https://mmckegg.github.io/web-audio-school/) - Interactive WebAudio tutorials.

## Multiple Learning Paths

- [CryptoZombies](https://cryptozombies.io/) - Learn Solidify and Ethereum blockchain development by creating learning games
- [Execute Program](https://www.executeprogram.com/) - 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](https://nodeguardians.io) - Learn web3 in a gamified RPG-like experience with campaigns, quests, skill trees, and character management

## Course Platforms

- [Code.org](https://code.org/) - Every student in every school should have the opportunity to learn computer science.
- [Codecademy](https://www.codecademy.com/) - Learn to code interactively, for free.
- [Educative](https://educative.com) - Self-paced developer education platform
- [FreeCodeCamp](https://freecodecamp.org) - Non-profit site where anyone can contribute educational content, get certifications, and find jobs.
- [Pluralsight](https://pluralsight.com) - The professional tech upskilling platform
- [Wilco](https://trywilco.com) - 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](https://coursemaker.org/) - SaaS product for creating, hosting, and selling technical courses
- [CourseMaker/gatsby-theme-coursemaker](https://github.com/CourseMaker/gatsby-theme-coursemaker) - Gatsby.js Theme from CourseMaker designed for individual creators that sell courses
- [Wilco](https://trywilco.com) - 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](https://developer.hashicorp.com) - All-in-one dev hub w/ built-in bookmarks, progress, self-paced tutorials with videos, certifications, and more.
- [React Docs (beta)](https://beta.reactjs.org/learn) - Includes interactive labs and challenges
- [Medusa](https://docs.medusajs.com/) - Redesigned and treated as a product (see
- [Nivo](https://nivo.rocks/) - D3 viz library with interactive visualizations as the docs
- [Stripe Docs](https://stripe.com/docs) - Interactive and example-rich developer documentation for the popular payment platform
- [Twilio Docs](https://www.twilio.com/docs) - Interactive and example-rich developer documentation for the popular communication platform. (Also see: [Games > JavaScript > TwilioQuest](#javascript))

## Tools

- [Alphadoc.io](https://alphadoc.io/) - Platform. Build interactive documentation using visual tools featuring sequence diagrams and visual stories. Primarily for OpenAPI-based projects and SDKs.
- [Code Hike](https://codehike.org/) - Easily build code tutorials with MDX and React.
- [Diátaxis](https://diataxis.fr/) - Originally developed by Daniele Procida at Divio, this is a unified system for developing technical documentation.
- [Docusaurus](https://docusaurus.io/) - 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](https://dotnet.github.io/docfx/) - Open source. Documentation and static site generator for .NET API projects.
- [Docz](https://github.com/doczjs/docz) - Open source. Documentation site starter for Gatsby.js that offers built-in features to make writing documentation sites easier.
- [gatsby-gitbook-starter](https://github.com/hasura/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](https://www.gitbook.com/) - Free + Per User Pricing. Documentation platform/framework supporting CMS-style editing and hosting of docs and technical content.
- [Mintlify](https://mintlify.com/) - Free + Flat Monthly Pricing. Documentation platform/framework supporting MDX-based docs, GPT-based search, component library, and more.
- [Readme](https://readme.com) - Free + Per Project Pricing. Developer hub platform to host technical documentation with versioning, playgrounds, usage analytics, forums, and interactive APIs.
- [Redoc](https://redocly.com/redoc/) - Open source. Alternative to Redocly to host API documentation with interactive playgrounds.
- [Redocly](https://redocly.com/) - Free + Flat Monthly Pricing. Developer hub platform to host API documentation with interactive playgrounds.
- [Shiki](https://github.com/shikijs/shiki) - Embed code samples with VSCode-powered syntax highlighting.
- [Shiki Twoslash](https://shikijs.github.io/twoslash/) - The power of Shiki, plus TypeScript compiler annotations.
- [Wilco](https://trywilco.com) - 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](https://flukeout.github.io/) - It's a little game to help you learn CSS selectors.
- [CSS Grid Garden](http://cssgridgarden.com/) - A game for learning CSS grid layout.
- [Flexbox Defense](http://www.flexboxdefense.com/) - Unlike other tower defense games, you must position your towers using CSS!
- [Flexbox Froggy](http://flexboxfroggy.com/) - A game for learning CSS flexbox.
- [Flexbox with Webflow](https://www.flexboxgame.com/) - Learn and master flexbox in 28 interactive levels—without writing code.

## Developer Tools

- [Ably Serverless Websockets Quest](https://quest.ably.dev/) - Learn Serverless Websockets through an ADND multiplayer game ([source](https://github.com/ably-labs/serverless-websockets-quest))
- [Ably Space Invaders](https://space-invaders.ably.dev/) - Multiplayer Space Invaders game built with Phaser and Ably APIs. ([source](https://github.com/ably-labs/realtime-multiplayer-space-invaders))
- [Ably Tower Defense](https://github.com/ably-labs/ably-tower-defense/) - Demo showing Ably's real-time API in action with a multiplayer Tower Defense game
- [Wilco](https://trywilco.com) - 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](https://www.openvim.com/) - Interactive Vim tutorial.
- [Vim Adventures](https://vim-adventures.com/) - Learning Vim while playing a game.
- [Vim Genius](http://vimgenius.com/) - Increase your speed and improve your muscle memory with Vim Genius.

## Linux

- [Bashcrawl](https://gitlab.com/slackermedia/bashcrawl) - Learn Linux commands by playing a simple text adventure .

## Databases

- [SQL Murder Mystery](https://mystery.knightlab.com/) - Solve a crime while practicing database skills.

## JavaScript

- [Screeps](https://screeps.com/) - The world's first MMO strategy sandbox game for programmers.
- [Untrusted](https://alexnisnevich.github.io/untrusted/) - Learn while playing a JavaScript adventure game.
- [TwilioQuest](https://twilio.com/quest) - Go on a quest to learn web development how to build a web app with JavaScript and Twilio.
- [WarriorJS](https://github.com/olistic/warriorjs) - Using JavaScript, program a warrior to climb a tall tower, fight monsters and rescue captives.

## Programming

- [BOX-256](http://box-256.com/) - Program a fictional CPU with assembly to output graphics.
- [Clips the Game](https://md5crypt.github.io/clipsgame/) - A demanding logic game based on the clips rule engine.
- [Code Avengers](https://www.codeavengers.com/) - Learn to build websites, apps and games in a fun and effective way.
- [CodeCombat](https://codecombat.com/) - An engaging coding game for learning programming.
- [CodinGame](https://www.codingame.com/start) - A challenge-based training platform where you can play with the hottest programming topics.
- [Cube Composer](https://david-peter.de/cube-composer/) - A puzzle game inspired by functional programming.
- [Deadlock Empire](https://deadlockempire.github.io/) - Solve puzzles with concurrency.
- [Mimo](https://getmimo.com/) - Learn how to become a developer on mobile.
- [Programming Games Wiki](http://programminggames.org/) - A long-standing catalogue of programming games through the years.
- [RegexOne](https://regexone.com/lesson/introduction_abcs) - Learn Regular Expressions with simple, interactive exercises.
- [ReturnTrue](https://alf.nu/ReturnTrue) - A game were you learn about booleans, return true to win.
- [Swift Playgrounds](https://www.apple.com/swift/playgrounds/) - Learn to code on your iPad in a seriously fun way.

## Security

- [XSS game](https://xss-game.appspot.com) - A game about tricking people into running code in their browsers.

## Web3

- [CryptoZombies](https://cryptozombies.io/) - Learn Solidity and Ethereum blockchain development by creating learning games
- [NodeGuardians](https://nodeguardians.io) - 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](https://appsembler.com) - B2B SaaS LXP built on top of [Open EdX](https://openedx.org), designed for developer education (powers Chef, Redis, etc.)
- [Tutor](https://docs.tutor.overhang.io/) - Self-managed Docker version of [Open EdX](https://openedx.org)
- [Wilco](https://trywilco.com) - 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](https://corecursive.com/) - Like _This American Life_ but for software developers
- [The Rabbit Hole](https://therabbithole.libsyn.com/) - A lighthearted podcast that takes a pragmatic look at trends in software development.

# Video Channels

- [Fireship](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA) - Short videos on a wide variety of programming topics, complete with plenty of tongue-in-cheek humor.

# Reference Sites

## Microsites

- [CSS Reference](https://cssreference.io) - Complete reference of CSS properties with examples.
- [HTML Reference](https://htmlreference.io) - Complete reference of CSS properties with examples.
- [Flexbox Cheatsheet](https://yoksel.github.io/flex-cheatsheet/) - Turns static W3C spec of CSS Flexbox Level 1 into interactive examples.
- [Illustrated.dev](https://illustrated.dev/) - Illustrated explanations of web development, technology & a little bit of anthropology.
- [Microfrontend.dev](https://microfrontend.dev/) - Learn about the microfrontend architecture pattern and practices, and when / when not to consider it.

## Wikis/Community Sites

- [MDN](https://developer.mozilla.org/en-US/) - The Mozilla Developer Network. Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.
- [Microsoft Docs](https://docs.microsoft.com) - Formerly MSDN. Documenting the Microsoft (and surrounding) ecosystems since 1992.
- [StackOverflow](https://stackoverflow.com) - The top Q&A programming site.

# Visual Essays

## Individual Essays

- [Advanced animation patterns with Framer Motion](https://blog.maximeheckel.com/posts/advanced-animation-patterns-with-framer-motion/) - Maxime Heckel
- [Alan Turing](https://samwho.dev/turing-machines/) - Sam Rose
- [Build your own React](https://pomb.us/build-your-own-react/) - Rodrigo Pombo
- [Care About What You Build](https://brandonhilkert.com/blog/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](https://wattenberger.com/blog/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](https://blog.maximeheckel.com/posts/cubic-bezier-from-math-to-motion/) - Maxime Heckel. Features interactive animations that showcase different types of curves.
- [Dark Mode by Local Sunlight](https://www.ctnicholas.dev/articles/dark-mode-by-sunlight) - Chris Nicholas
- [How do arrays work?](https://nan.fyi/how-arrays-work) - Nanda
- [How to remember things](https://ncase.me/remember/) - Nicky Case
- [Lights and Shadows](https://ciechanow.ski/lights-and-shadows/) - Bartosz Ciechanowski
- [Making things move](https://varun.ca/torsions/) - Varun Vachhar
- [Moving along a curved path in CSS with layered animation](https://tobiasahlin.com/blog/curved-path-animations-in-css/) - Tobias Ahlin
- [Noise in Creative Coding](https://varun.ca/noise/) - Varun Vachhar
- [Parents vs. Owners in React] - Jules Blom, a two-part series ([1](https://julesblom.com/writing/parents-owners-data-flow)) and ([2](https://julesblom.com/writing/parents-owners-performance)).
- [Rebuilding Babel: The Tokenizer](https://www.nan.fyi/tokenizer) - Nanda Syahrasyad. Features a custom widget to step through the tokenization process, which displays interim results.
- [Tasks, microtasks, queues and schedules](https://jakearchibald.com/2015/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](http://worrydream.com/#!2/LadderOfAbstraction) - 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](https://www.ctnicholas.dev/articles/which-blend-mode) - Chris Nicholas. Featuring interactive examples to show the varying results of different blend modes.

## Collections

- [Amelia Wattenberger](https://wattenberger.com/blog) - Amelia is a data visualization and experience engineer with a blog that features awesome interactive samples and visual essays.
- [Explorable Explanations](https://explorabl.es/) - 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](https://julesblom.com/) - Frontend developer specializing in React and D4.js who writes visual essays, including walkthrough code samples, embedded quizzes, and interactive diagrams.
- [Maggie Appleton](https://maggieappleton.com/) - Makes visual essays about UX, programming, and anthropology.
- [Pudding.cool](https://pudding.cool) - Data viz magazine featuring many different visual essays.
- [Worrydream](https://worrydream.com) - Bret Victor. Unique web-based site design, visual essays, and interactive demos.

awesome-deved

awesome-deved Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

awesome-deved

awesome-deved Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README