Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kamranayub/awesome-deved

DevEd with umami. Awesome List of developer education covering blogs, tutorials, academies, visual essays, games, and more.
https://github.com/kamranayub/awesome-deved

List: awesome-deved

awesome awesome-list deved developer-education developer-relations devrel education

Last synced: 19 days ago
JSON representation

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

Awesome Lists containing this project

README 

        
# 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.

- [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

- [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.