diff --git a/README.md b/README.md index b7307b2..bf4f58b 100644 --- a/README.md +++ b/README.md @@ -1,42 +1,327 @@ -# Awesome Resourc -* [General Programming](#general-programming) -* [Languages](#languages) - * [Assembly](#assembly) - * [Bash](#bash) - * [C](#c) - * [C#](#c#) - * [C++](#c++) - * [Clojure](#clojure) - * [Coffeescript](#coffeescript) - * [Crystal](#crystal) - * [CSS](#css) - * [D](#d) - * [Dart](#dart) - * [Elixir](#elixir) - * [Erlang](#erlang) - * [F#](#f#) - * [Fortran](#fortran) - * [Go](#go) - * [Groovy](#groovy) - * [Haskell](#haskell) - * [Java](#java) - * [JavaScript](#javascript) - * [Kotlin](#kotlin) - * [Lua](#lua) - * [Objective-C](#objective-c) - * [OCaml](#ocaml) - * [Pascal](#pascal) - * [Perl](#perl) - * [Php](#php) - * [Python](#python) - * [R](#r) - * [Ruby](#ruby) - * [Rust](#rust) - * [Scala](#scala) - * [Shell](#shell) - * [SQL](#sql) - * [Swift](#swift) - * [TypeScript](#typescript) - * [VB.NET](#vb-net) -* [Tools & Editors](#tools-&-editors) -h \ No newline at end of file +# Awesome Resources For Learning To Code + +A curated list of sites, tools, resources and other things that help when learning about programming + +
+ Table of Contents + + + + +
+ +
+ Legend + + | Icon | Meaning | + | ---:| :---| + | 💰 | Not Free | + | ❖ | Windows | + |  | OS | + | 🕸 | Web | + | 📱 | Mobile | + | 🎮 | Game | + | 🏗 | Playground | + +
+ + + +# [General Programming](https://en.wikipedia.org/wiki/Computer_programming) + +General computer programming skills & techniques + +* [Human Resource Machine](https://tomorrowcorporation.com/humanresourcemachine) - 💰📱🎮 A mobile game that teaches you how low-level programming (i.e., Assembler) works + +# [Tools & Editors](https://en.wikipedia.org/wiki/Programming_tool) + +Build tools, text editors, IDEs and more + +* [Git Games](https://git-game.com/) - 🕸🎮 A terminal based game that teaches both new and advances users some pretty cool features of the git scm (source control management) system +* [Learn Git Branching](https://learngitbranching.js.org/) - 🕸🎮 "The most visual and interactive way to learn Git on the web" +* [Untrusted](https://alexnisnevich.github.io/untrusted/) - 🕸🎮 Use JavaScript to guide Dr. Eval through a machine continuum! +* [Vim Adventures](https://vim-adventures.com/) - 🕸🎮 An online game based on VIM's keyboard shortcuts. It's the "Zelda meets text editing" game. So come have some fun and learn some VIM! + +# [Languages](https://en.wikipedia.org/wiki/Programming_languages) + +Programming languages + + + +## [Assembly](http://www.azillionmonkeys.com/qed/asmexample.html) + +* [Human Resource Machine](https://tomorrowcorporation.com/humanresourcemachine) - 💰📱🎮 A mobile game that teaches you how low-level programming (i.e., Assembler) works +* [Shenzhen I/O](https://store.steampowered.com/app/504210/SHENZHEN_IO/) - ❖🎮 BUILD CIRCUITS. WRITE CODE. RTFM. +* [TIS-100](https://store.steampowered.com/app/370360/TIS100/) - 💰❖🎮 Rewrite corrupted code segments to repair the TIS-100 and unlock its secrets. + + +## [Bash](https://www.gnu.org/software/bash/) + +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests + + +## [C](https://en.wikipedia.org/wiki/C_(programming_language)) + +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests + + +## [C++](https://en.cppreference.com/w/) + +* [C++ Shell](http://cpp.sh/) - 🕸🏗 Run C++ code in your browser, using different language versions and compiler optimization settings +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests + + +## [C#](https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/) + +* [.NET Fiddle](https://dotnetfiddle.net/) - 🕸🏗 A .NET sandbox for developers to quickly try out code and share C#, F# and VB.NET code snippets. +* [Codehunt](https://www.codehunt.com/) - 🕸🎮 Learn how to code by playing a game +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests +* [Robocode](http://robocode.sourceforge.net/) - ❖🎮 Develop a robot battle tank to battle against others in Java or .NET + + +## [Clojure](https://clojure.org/) + +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests + + +## [Coffeescript](https://coffeescript.org/) + +* [Code Monkey](https://www.playcodemonkey.com/) - 🕸🎮 Using CoffeeScript, build your own games in HTML5. +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests + + +## [Crystal](https://crystal-lang.org/) + +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges + + +## [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) + +* [CSS Diner](https://flukeout.github.io/) - 🕸🎮 Practice your advanced CSS3 selectors with 32 levels of interactive challenges +* [CodePen](https://codepen.io/) - 🕸🏗 A social development environment for front-end designers and developers. +* [CodeSandbox](https://codesandbox.io/) - 🕸🏗 The online editor for React, Vue, Angular, Preact and Svelte apps +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Flexbox Defense](http://www.flexboxdefense.com/) - 🕸🎮 Use flexbox to move your defenses into position and defend against waves of incoming enemies +* [Flexbox Froggy](https://flexboxfroggy.com/) - 🕸🎮 A game for learning CSS flexbox +* [JS Bin](https://jsbin.com/) - 🕸🏗 Collaborative JavaScript Debugging +* [JSFiddle](https://jsfiddle.net/) - 🕸🏗 Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor. +* [Plunker](https://plnkr.co/) - 🕸🏗 An online community for creating, collaborating on and sharing your web development ideas. +* [Stackblitz](https://stackblitz.com/) - 🕸🏗 The online IDE for web applications, Powered by Visual Studio Code. Instantly create Angular, Ionic, React and Svelte projects with TypeScript or JavaScript + + +## [D](https://dlang.org/) + +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests + + +## [Dart](https://www.dartlang.org/) + +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better + + +## [Elixir](https://elixir-lang.org/) + +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests + + +## [Erlang](https://www.erlang.org/) + +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests + + +## [F#](https://fsharp.org/) + +* [.NET Fiddle](https://dotnetfiddle.net/) - 🕸🏗 A .NET sandbox for developers to quickly try out code and share C#, F# and VB.NET code snippets. +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests + + +## [Fortran](https://en.wikibooks.org/wiki/Fortran/Fortran_examples) + +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests + + +## [Go](https://golang.org/) + +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests +* [Go Playground](https://play.go-lang.org/) - 🕸🏗 Run and share Go snippets from the comfort of your browser + + +## [Groovy](http://groovy-lang.org/) + +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests + + +## [Haskell](https://www.haskell.org/) + +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests + + +## [Java](https://www.java.com/) + +* [CodeCombat](https://codecombat.com/play) - 🕸🎮 Learn how to code by playing a game +* [Codehunt](https://www.codehunt.com/) - 🕸🎮 Learn how to code by playing a game +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests +* [Robocode](http://robocode.sourceforge.net/) - ❖🎮 Develop a robot battle tank to battle against others in Java or .NET + + +## [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) + +* [Check I/O](https://checkio.org/) - 🕸🎮 Improve your coding skills by solving engaging challenges and fun task using Python and JavaScript +* [CodeCombat](https://codecombat.com/play) - 🕸🎮 Learn how to code by playing a game +* [CodePen](https://codepen.io/) - 🕸🏗 A social development environment for front-end designers and developers. +* [CodeSandbox](https://codesandbox.io/) - 🕸🏗 The online editor for React, Vue, Angular, Preact and Svelte apps +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests +* [Grasshopper](https://grasshopper.codes/) - 📱🎮 fun, quick lessons on your phone that teach you to write real JavaScript. +* [JS Bin](https://jsbin.com/) - 🕸🏗 Collaborative JavaScript Debugging +* [JSFiddle](https://jsfiddle.net/) - 🕸🏗 Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor. +* [Plunker](https://plnkr.co/) - 🕸🏗 An online community for creating, collaborating on and sharing your web development ideas. +* [Screeps](https://store.steampowered.com/app/464350/Screeps/) - 💰❖🎮 Screeps is an open source MMO RTS sandbox game for programmers, wherein the core mechanic is programming your units AI. You control your colony by writing JavaScript which operate 24/7 in the single persistent world filled by other players on par with you. +* [Stackblitz](https://stackblitz.com/) - 🕸🏗 The online IDE for web applications, Powered by Visual Studio Code. Instantly create Angular, Ionic, React and Svelte projects with TypeScript or JavaScript + + +## [Kotlin](https://kotlinlang.org/) + +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests + + +## [Lua](https://www.lua.org/) + +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better + + +## [Objective-C](https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html) + +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better + + +## [OCaml](https://ocaml.org/) + +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better + + +## [Pascal](http://pascal-central.com/ppl/index.html) + +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better + + +## [Perl](https://www.perl.org/) + +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests + + +## [Php](https://secure.php.net/) + +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests +* [PhpFiddle](http://phpfiddle.org/) - 🕸🏗 Php/MySQL execution environment in your web browser + + +## [Python](https://www.python.org/) + +* [Check I/O](https://checkio.org/) - 🕸🎮 Improve your coding skills by solving engaging challenges and fun task using Python and JavaScript +* [CodeCombat](https://codecombat.com/play) - 🕸🎮 Learn how to code by playing a game +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests +* [DataCamp Light](https://cdn.datacamp.com/dcl-react/standalone-example.html) - 🕸🏗 Embeddable R and Python examples +* [Python Fiddle](http://python-fiddle.com/) - 🕸🏗 Python IDE for the web + + +## [R](https://www.r-project.org/) + +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests +* [DataCamp Light](https://cdn.datacamp.com/dcl-react/standalone-example.html) - 🕸🏗 Embeddable R and Python examples + + +## [Ruby](https://www.ruby-lang.org/) + +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests +* [Ruby Warrior](https://www.bloc.io/ruby-warrior#/) - 🕸🎮 A triumphant quest of adventure, love & destiny all within a few lines of code +* [RubyFiddle](http://rubyfiddle.com/) - 🕸🏗 Run Ruby snippets in your web browser + + +## [Rust](https://rust-lang.org) + +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests +* [Rust Playground](https://play.rust-lang.org/) - 🕸🏗 Run and share Rust snippets from the comfort of your browser + + +## [Scala](https://www.scala-lang.org/) + +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Robocode](http://robocode.sourceforge.net/) - ❖🎮 Develop a robot battle tank to battle against others in Java or .NET + + +## [Shell](https://help.ubuntu.com/community/Beginners/BashScripting) + +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges + + +## [SQL](https://www.postgresql.org/) + +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [SQL Fiddle](http://sqlfiddle.com/) - 🕸🏗 Run SQL snippets in your web browser, using PostgreSQL, MySQL, Oracle, SQLite and MS SQL Server + + +## [Swift](https://developer.apple.com/swift/) + +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Cyber Dojo](http://cyber-dojo.org/) - 🕸🎮 Hone your programming skills in a huge range of languages, writing code to pass tests +* [Swift Playgrounds](https://www.apple.com/swift/playgrounds/) - 📱🎮 Learn swift by playing games on your iPad + + +## [TypeScript](http://typescriptlang.org/) + +* [CodePen](https://codepen.io/) - 🕸🏗 A social development environment for front-end designers and developers. +* [CodeSandbox](https://codesandbox.io/) - 🕸🏗 The online editor for React, Vue, Angular, Preact and Svelte apps +* [Codewars](https://www.codewars.com/) - 🕸🎮 Improve your skills by training with others on real code challenges +* [Stackblitz](https://stackblitz.com/) - 🕸🏗 The online IDE for web applications, Powered by Visual Studio Code. Instantly create Angular, Ionic, React and Svelte projects with TypeScript or JavaScript + + +## [VB.NET](https://docs.microsoft.com/en-us/dotnet/visual-basic/getting-started/) + +* [.NET Fiddle](https://dotnetfiddle.net/) - 🕸🏗 A .NET sandbox for developers to quickly try out code and share C#, F# and VB.NET code snippets. +* [CodinGame](https://www.codingame.com/) - 🕸🎮 Games and Programming Challenges to Code Better +* [Robocode](http://robocode.sourceforge.net/) - ❖🎮 Develop a robot battle tank to battle against others in Java or .NET + + + +## Sources + +- https://github.com/michelpereira/awesome-gamesofcoding +- https://www.makeuseof.com/tag/best-programming-games/ +- https://www.slant.co/topics/6586/~programming-games-on-steam +- https://www.rockpapershotgun.com/2017/11/29/best-hacking-games/ +- https://medium.mybridge.co/12-free-resources-learn-to-code-while-playing-games-f7333043de11 +- https://github.com/webloper/awesome-fiddles + +## Copyright + +(c) 2018 Mike North \ No newline at end of file diff --git a/src/data/categories.ts b/src/data/categories.ts index cf3ec05..2b822cd 100644 --- a/src/data/categories.ts +++ b/src/data/categories.ts @@ -1,4 +1,5 @@ import ALL_LANGUAGES_WITH_ID from './categories/languages'; +import ALL_FRAMEWORKS from './categories/web-frameworks'; import { Site } from './sites'; // @ts-check @@ -26,6 +27,14 @@ const ALL_CATEGORIES: Site.Categories = { order: 2, url: 'https://en.wikipedia.org/wiki/Programming_tool', }, + 'web-frameworks': { + children: ALL_FRAMEWORKS, + description: 'Web Frameworks', + id: 'web-frameworks', + name: 'Web Frameworks', + order: 4, + url: 'https://en.wikipedia.org/wiki/Web_framework', + }, }; export default ALL_CATEGORIES; diff --git a/src/data/categories/web-frameworks.ts b/src/data/categories/web-frameworks.ts new file mode 100644 index 0000000..f881f23 --- /dev/null +++ b/src/data/categories/web-frameworks.ts @@ -0,0 +1,26 @@ +import { Site } from '../sites'; + +const ALL_WEB_FRAMEWORKS = { + angular: { name: 'Angular', id: 'angular', url: 'https://angular.io/' }, + angularjs: { name: 'Angular.js', id: 'angularjs', url: 'https://angularjs.org/' }, + elm: { name: 'Elm', id: 'elm', url: 'http://elm-lang.org/' }, + ember: { name: 'Ember.js', id: 'ember', url: 'https://emberjs.com' }, + react: { name: 'React.js', id: 'react', url: 'https://reactjs.org/' }, + vue: { name: 'Vue.js', id: 'vue', url: 'https://vuejs.org/' }, +}; + +export type WebFramework = keyof typeof ALL_WEB_FRAMEWORKS; + +/** + * @type {Site.Categories<'web-frameworks'>} + */ +const ALL_WEB_FRAMEWORKS_WITH_ID = (Object.keys(ALL_WEB_FRAMEWORKS) as Array).reduce( + (obj, k) => { + // eslint-disable-next-line no-param-reassign + obj[k] = Object.assign({ parentId: 'web-frameworks' as 'web-frameworks' }, ALL_WEB_FRAMEWORKS[k]); + return obj; + }, + {} as Site.Categories<'web-frameworks'>, +); + +export default ALL_WEB_FRAMEWORKS_WITH_ID; diff --git a/src/data/sites.ts b/src/data/sites.ts index a542eed..ec57773 100644 --- a/src/data/sites.ts +++ b/src/data/sites.ts @@ -6,7 +6,7 @@ import { pipe } from '../utils'; import allGames from './sites/games'; import allPlaygrounds from './sites/playgrounds'; -export type SiteType = 'game' | 'playground'; +export type SiteType = 'game' | 'playground' | 'video-site'; export interface Site { id: string; platforms: Site.Platform[]; @@ -17,6 +17,7 @@ export interface Site { description: string; url: string; price: number; + pricePeriod?: 'once' | 'year' | 'month'; } export interface OrganizedSites { diff --git a/src/data/sites/videosites/frontend-masters.ts b/src/data/sites/videosites/frontend-masters.ts new file mode 100644 index 0000000..3ec2b37 --- /dev/null +++ b/src/data/sites/videosites/frontend-masters.ts @@ -0,0 +1,15 @@ +import { Site } from '../../sites'; + +const frontendMasters: Site = { + categoryIds: [['languages', 'javascript'], ['languages', 'typescript'], ['languages', 'css'], ['languages', 'sql']], + description: 'Advance Your Skills with In-Depth, Modern Front-End Engineering Courses', + id: 'frontendMasters', + name: 'Frontend Masters', + platforms: ['web', 'android', 'ios'], + price: 39, + pricePeriod: 'month', + type: 'playground', + url: 'https://frontendmasters.com/', +}; + +export default frontendMasters;