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. A minimal slides editor and presenter in your browser.
3. A minimal notepad in your browser (automatically restores, and works offline after your first visit).
4. Chrome extensions like a linter, quick menu search, quick selection search, and experimental test automator
5. Firefox add-ons like Check All Scripts with URLVoid and Console Log Element
6. _2DNote to make visuals with 2D coordinates more accessible to people who are blind.
7. Google Voice Assistant apps: Code Tutor and Mental Temperature Converter
8. html-template-generator and demo site: https://html-template-generator.surge.sh
9. stylable-select
10. random code tips
11. deps, a CLI tool that generates a dependency graph (as an interactive SVG). Just give it a file/folder as a starting point.
12. Code Inspiration to-do list web app that works offline (after your first visit).
13. No fancy touchpad pen? Draw by moving the mouse and hitting spacebar to toggle.
14. Electron-powered desktop app anonymous-input for personal teaching/educational use. Uses Electron.js, Travis CI, mocha, spectron, npm, yarn, ...
15. Code Explorer
16. Voice User Interface named LUI
17. Experimental programming language to make it easier to write code with speech recognition
18. Convenience code I use in my CodePen.io Front-End demos, such as:
    • my personal CSS boilerplate
    • codepen-full-page-link
    • a Chrome check message
    • copyToClipboard.js
    • prevent-link-window-opener-attacks.js
    • flying focus ring
    • keyboard focus trap
    • hchiam/draggable: make any element draggable, or draggable and editable
    • morphing_button
19. 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.
20. Atom plugin tutorial and a server based on it to seek code snippets for you
21. HTML template generator
22. API examples:
    • https://github.com/hchiam/sourcefetch-server#sourcefetch-server
    • https://github.com/hchiam/timestamp-microservice-hchiam
23. Glitch.com Backend/server demos like this Node.js server and this URL shortener microservice
24. Example HTML5 web apps/games (NOTE: old): https://github.com/hchiam/embeddedWebApps

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. Google Apps Scripts for things like Google Docs
14. Google Assistant App templates: Code Tutor or Mental Temperature Converter
15. Google Map Widget
16. gpt4all
17. JavaScript practice (and bookmarklets and TotT)
18. Jasonette
19. Java practice
20. Jazzer (and Jazzer.js) for fuzzing / fuzz testing
21. Jest
22. jQuery
23. Keras
24. Lighthouse CI
25. linter stuff like lint-staged to automatically include code style fixes in your commits
    • ESLint with Google JS Style Guide Rules
    • TSLint
26. localGPT
27. Okta sign-in widget (also serves as a minimal node/express app with its server.js)
28. open-props
29. Phaser
30. prompt engineering - for ML/LLMs
31. Protractor
32. Python practice
    1. Node.js plus Python talking to each other
33. Record automated tests with Selenium IDE chrome extension, or the slightly-better Katalon Recorder chrome extension (which can also export code and other formats).
34. serverless API functions with CloudFlare workers
35. Subresource Integrity (SRI)
36. surge
37. Tape
38. Teachable Machine to quickly prototype an ML model (gather, train, export)
39. TinyLlama - another small open-sourced GPT/LLM
40. Travis CI
    1. Travis CI setup for Selenium IDE
    2. Travis CI setup example for desktop app (Electron.js) test with mocha
41. TypeScript
42. UglifyJS
43. VB (Visual Basic)
44. Vue
    1. vue-test-utils with Jest and with Tape
    2. vue-resource
    3. Vuetify templates
45. Web Components
46. 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: 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. contributing.md files
17. CORS
18. CSS/CSS3
19. cucumber
20. D3.js
21. dependency-cruiser
22. Django
23. Docker
24. docsify
25. DSPy
26. ECMAScript browser modules (using import in the browser)
27. Feathers
28. 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.
29. Firestore and Firebase Local Emulator Suite
30. My solutions for FreeCodeCamp (UPDATE: no longer publicly available)
31. Gatsby.js
32. GitHub CLI gh
33. GitHub Copilot (uses OpenAI Codex)
34. GitHub issue template
35. Golang
36. 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.
37. GSAP (GreenSock Animation Package)
38. gzip
39. HTML/HTML5
40. HTTP status codes
41. HTTPS server
42. Hugging Face - for trying out ML models quickly
43. jExcel
44. jquery-i18next
45. Kotlin
46. LangChain
47. lazy load
48. Less
49. Lit.js
50. localForage
51. localtunnel
52. Lodash and Underscore.js
53. Material Design Components for the Web (CDN and NPM/Webpack setup)
54. MEAN
55. 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.).
56. Mitosis
57. mocha chai
58. MongoDB
59. Neumorphism
60. Node
61. Ollama to run LLMs locally/privately on your computer.
62. Publishing your own NPM package and GitHub package
63. nx
64. Parcel.js web app bundler
65. Polka
66. Polymer
67. PostCSS
68. pug
69. Python ML web app using Streamlit
70. PWA + Bluetooth
71. Qwik
72. 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
73. reCAPTCHA
74. service workers and WebWorkers
75. snowpack and create-snowpack-app
76. Solid.js
77. Svelte and Sapper
78. SASS/SCSS
79. SQL and Sequelize ORM for Node.js
80. TensorFlow
81. three.js
82. universal-tilt.js
83. Vue with Firebase database and Glitch.com hosting
84. Web Accessibility (a11y) (from Google's Udacity course) and axe-cli (and even more a11y notes)
85. Web Dev Bootcamp
86. web video, image manipulation, and connecting video to CSS animations
87. Webpack
88. WebSocket
89. yargs
90. yarn

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