Links to what I'm learning. Languages. Libraries. Frameworks. Etc.

You might find my Projects and Templates helpful for kickstarting your own learning.

Chances are, you can guess the URL of each repo: https://github.com/hchiam/learning-...

Or you can browse this README file.

Or bookmark this search link: https://github.com/hchiam?tab=repositories&q=learning+

Click to expand:

Projects

Projects: things that I've built or maintain

1. Besides the rest of this list, I contribute to other people's projects, like: GoogleChromeLabs/ProjectVisBug
2. how-draggable: make any element draggable, or draggable and editable
3. A minimal slides editor and presenter in your browser.
4. A minimal notepad in your browser (automatically restores, and works offline after your first visit).
5. Firefox add-ons like Check All Scripts with URLVoid (now works in mobile!) and Console Log Element (now works in mobile too!) and togglavatar
6. Chrome extensions like a linter, quick menu search, quick selection search, and experimental test automator
7. _2DNote to make visuals with 2D coordinates more accessible to people who are blind.
8. Google Voice Assistant apps: Code Tutor and Mental Temperature Converter
9. html-template-generator and demo site: https://html-template-generator.surge.sh
10. stylable-select
11. random code tips
12. deps, a CLI tool that generates a dependency graph (as an interactive SVG). Just give it a file/folder as a starting point.
13. Code Inspiration to-do list web app that works offline (after your first visit).
14. No fancy touchpad pen? Draw by moving the mouse and hitting spacebar to toggle.
15. Electron-powered desktop app anonymous-input for personal teaching/educational use. Used Electron.js, Travis CI, mocha, spectron, npm, yarn, ... - although I'd now recommend Tauri
16. Code Explorer
17. Voice User Interface named LUI
18. Experimental programming language to make it easier to write code with speech recognition
19. Convenience code I use in my CodePen.io Front-End demos, such as:
    • my personal CSS boilerplate
    • codepen-full-page-link
    • copyToClipboard.js
    • a Chrome check message
    • prevent-link-window-opener-attacks.js
    • flying focus ring
    • keyboard focus trap
    • morphing_button
20. Machine Learning examples and other ML repos and notes, like a genetic algorithm to generate a conlang, or text-similarity-test built using TensorFlow.js or PyTorch demos. Or like experimenting with comment analysis using tfjs, USE, and UMAP (as opposed to t-SNE or PCA.
21. Atom plugin tutorial and a server based on it to seek code snippets for you
22. HTML template generator
23. API examples:
    • https://github.com/hchiam/sourcefetch-server#sourcefetch-server
    • https://github.com/hchiam/timestamp-microservice-hchiam
24. grid - 2D array helper class in JS
25. Glitch.com Backend/server demos like this Node.js server and this URL shortener microservice
26. Example HTML5 web apps/games (NOTE: old): https://github.com/hchiam/embeddedWebApps
27. trysterollup game controller wrapper around Trystero

Templates

Templates: repos and snippets to get started faster

1. Azure DevOps
2. Bash Scripts and PowerShell and Zsh
3. Chrome Extension or Firefox add-on
4. Content Security Policy (CSP)
5. convenience template repo for getting started faster on creating your own convenience scripts or packages (this template repo comes with issue template, PR template, contributor reminder, codeowner, etc. files already set up for better collaboration on GitHub). Like my learning-template or my project-template.
6. Custom VS Code (Visual Studio Code) linter
7. Cypress
8. Electron for building desktop apps using web technologies (JS/HTML/CSS)
9. esbuild
10. Flask
11. flying focus ring and keyboard focus trap and morphing_button
12. GitHub Actions
13. Godot (game engine)
14. Google Apps Scripts for things like Google Docs
15. Google Assistant App templates: Code Tutor or Mental Temperature Converter
16. Google Map Widget
17. gpt4all
18. JavaScript practice (and bookmarklets and TotT)
19. Jasonette
20. Java practice
21. Jazzer (and Jazzer.js) for fuzzing / fuzz testing
22. Jest
23. jQuery
24. Keras
25. Lighthouse CI
26. linter stuff like lint-staged to automatically include code style fixes in your commits
    • ESLint with Google JS Style Guide Rules
    • TSLint
27. localGPT
28. Okta sign-in widget (also serves as a minimal node/express app with its server.js)
29. open-props
30. Phaser
31. prompt engineering - for ML/LLMs
32. Protractor
33. Python practice
    1. Node.js plus Python talking to each other
34. Record automated tests with Selenium IDE chrome extension, or the slightly-better Katalon Recorder chrome extension (which can also export code and other formats).
35. serverless API functions with CloudFlare workers
36. Subresource Integrity (SRI)
37. surge
38. Tape
39. Tauri
40. Teachable Machine to quickly prototype an ML model (gather, train, export)
41. TinyLlama - another small open-sourced GPT/LLM
42. token counters for LLMs, like for prompt engineering
43. Travis CI
    1. Travis CI setup for Selenium IDE
    2. Travis CI setup example for desktop app (Electron.js) test with mocha
44. trustedTypes
45. TypeScript
46. UglifyJS
47. VB (Visual Basic)
48. Vue
    1. vue-test-utils with Jest and with Tape
    2. vue-resource
    3. Vuetify templates
49. Web Components
50. WebRTC - P2P (peer-to-peer) communication (tried PeerJS, NetplayJS, Trystero)
51. Example Yeoman generator generator-hchiam-learning which creates another of my learning repos.
    • or just use my template repo learning-template by clicking the green button that says "Use this template"

Tutorials

Tutorials: things I tried to learn by closely following tutorial instructions

A bunch of Udacity courses like Front End Frameworks, Web Tooling & Automation, Offline Web Applications, and JavaScript Design Patterns.

I'm also learning on sites like freeCodeCamp and Udemy and LeetCode and more.

1. action-dependabot-auto-merge
2. Alexa
3. ally.js
4. Alpine.js
5. AngularJS, Angular 8, and Angular
6. ANNOY for ML nearest neighbours of vectors
7. AOS ("Animate On Scroll" library)
8. AutoML with AutoML Edge model exported from Vertex AI API of Google Cloud Platform.
9. AVIF compressed image format
10. axios
11. Bazel
12. Bootstrap 4 + SCSS
13. canvas
14. CKEditor 5
15. CODEOWNERS files
    1. All Contributors GitHub App
16. compromise.js for NLP
17. contributing.md files
18. CORS
19. CSS/CSS3
20. cucumber
21. D3.js
22. dependency-cruiser
23. Django
24. Docker
25. docsify
26. DSPy
27. ECMAScript browser modules (using import in the browser)
28. Feathers
29. Figma for interactive design prototypes and components (also has an Electron-powered desktop app), and Bravo to turn them into native apps(!). (Here's a quick summary of different design tools.) For creating images like SVGs, I'd use Photopea.
30. Firestore and Firebase Local Emulator Suite and Firebase Hosting
31. My solutions for FreeCodeCamp (UPDATE: no longer publicly available)
32. Gatsby.js
33. GitHub CLI gh
34. GitHub Copilot (uses OpenAI Codex)
35. GitHub issue template
36. Golang
37. Google Closure Library maybe for things like goog.structs.Heap() for use in practice problems that I practice with eslint and jest. It does so many helpful things, but it’s also a FE UI library like Backbone.js.
38. GSAP (GreenSock Animation Package)
39. gzip
40. HTML/HTML5
41. HTTP status codes
42. HTTPS server
43. Hugging Face - for trying out ML models quickly
44. jExcel
45. jquery-i18next
46. Kotlin
47. LangChain
48. lazy load
49. Less
50. Lit.js
51. localForage
52. localtunnel
53. Lodash and Underscore.js
54. Lottie files for animations
55. Material Design Components for the Web (CDN and NPM/Webpack setup)
56. MEAN
57. MERN Stack = MongoDB, Express, React, and Node.js (but I'm also using Mongoose, MongoDB Atlas, cors, dotenv, nodemon, eslint, eslint-config-google, bootstrap, react-router-dom, react-datepicker, axios, etc.).
58. Mitosis
59. mocha chai
60. MongoDB
61. Neumorphism
62. Node
63. Ollama to run LLMs locally/privately on your computer.
64. Publishing your own NPM package and GitHub package
65. nx
66. Parcel.js web app bundler
67. Polka
68. Polymer
69. PostCSS
70. pug
71. Python ML web app using Streamlit
72. PWA + Bluetooth
73. Qwik
74. React and Redux
    1. Small example of adding data to Redux state container: https://github.com/hchiam/react-jexcel-redux
    2. Bigger example with Redux and more: https://github.com/hchiam/chat-app-fcc-react-redux
    3. React Router
    4. React Native
    5. Minimal React Frontend + Express Backend test
    6. Auth0
    7. React + Apollo + GraphQL with a working example
    8. React + Firestore
    9. React Hook Form
    10. react-testing-library
    11. React Error Boundaries
    12. React Portals
    13. Next.js
    14. mantine.dev React component library
75. reCAPTCHA
76. service workers and WebWorkers
77. snowpack and create-snowpack-app
78. Solid.js
79. Svelte and Sapper
80. SASS/SCSS
81. SQL and Sequelize ORM for Node.js
82. TensorFlow
83. three.js
84. universal-tilt.js
85. Vue with Firebase database and Glitch.com hosting
86. Web Accessibility (a11y) (from Google's Udacity course) and axe-cli (and even more a11y notes)
87. Web Dev Bootcamp
88. web video, image manipulation, and connecting video to CSS animations
89. Webpack
90. WebSocket
91. yargs
92. yarn

To learn later

To learn later: thought about learning but didn't go too deep yet

1. Aceternity
2. amplication nocode to generate website FE+BE
3. Apache ECharts
4. assembly
5. Astro
6. AWS (Amazon Web Services) terms in plain English
7. Bayes
8. Blitz
9. Browsersync
10. bun
11. C#
12. Chrome DevTools
13. Cirq for quantum computer circuits
14. Combinations vs Permutations
15. CSS BEM
16. Data structures and algorithms like the splay tree, B-tree, skip list, Bloom filter, union-find data structure (for sets), suffix tree/trie/array, LZW compression, combinations vs permutations with/without repeats
17. Deno
18. Elm
19. Flutter
20. Framer
21. Google Charts
22. GraphQL
23. gulp.js
24. connecting JS to hardware
25. Helmet
26. Heroku
    • --> my first working Heroku-hosted app here
    • https://github.com/hchiam/test-app
27. Immer to change immutable state more easily.
28. general software interview problem solving skills
29. Karma
30. Kubernetes
31. Nuxt.js
32. octave
33. the OSI model
34. P vs NP
35. Pattern Lab
36. Plotly.js
37. privateGPT
38. Puppeteer
39. PyCharm
40. react-spring for fluid, interactive animations.
41. Rome
42. RPC (Remote Procedure Calls)
43. Ruby on Rails
44. Rust
45. semaphores
46. shadow DOM
47. SuperTokens
48. technical writing
49. Vite
50. VS Code productivity tips
51. Web Assembly (WASM)
52. WebGL
53. WebGPU

You can expand all by running this in dev tools:

javascript: (function () {
  Array.from(document.querySelectorAll(".markdown-body details")).map((d) =>
    d.setAttribute("open", true)
  );
})();

I use bash scripts to generate new learning repos and sometimes new project repos.

I'm also on CodePen.io and Glitch.com and CodeSandbox.io and LeetCode.com and Bitbucket.org and Repl.it

Auto-generated GitHub résumé: https://resume.github.io/?hchiam