learning Svelte Themes

Learning

What I'm learning/practicing

#chrome-extension#plugin#programming-language#machine-learning#genetic-algorithm#conlang#frontend#game#api#backend
Demo Download

Learning

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. Ctrl+F or command+f seems to immediately expand the details to show you matches.

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:
  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:
  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
  28. canvas-converse - to more easily "converse" with the canvas API.
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
  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. robocopy (and Total Commander?)
  36. serverless API functions with CloudFlare workers
  37. Subresource Integrity (SRI)
  38. surge
  39. Tape
  40. Tauri
  41. Teachable Machine to quickly prototype an ML model (gather, train, export)
  42. TinyLlama - another small open-sourced GPT/LLM
  43. token counters for LLMs, like for prompt engineering
  44. Travis CI
    1. Travis CI setup for Selenium IDE
    2. Travis CI setup example for desktop app (Electron.js) test with mocha
  45. trustedTypes
  46. TypeScript
  47. UglifyJS
  48. VB (Visual Basic)
  49. Vue
    1. vue-test-utils with Jest and with Tape
    2. vue-resource
    3. Vuetify templates
  50. Web Components
  51. WebRTC - P2P (peer-to-peer) communication (tried PeerJS, NetplayJS, Trystero)
  52. Example Yeoman generator generator-hchiam-learning which creates another of my learning repos.
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. Auggie CLI
  9. AutoML with AutoML Edge model exported from Vertex AI API of Google Cloud Platform.
  10. AVIF compressed image format
  11. axios
  12. Bazel
  13. Bootstrap 4 + SCSS
  14. canvas
  15. CKEditor 5
  16. CODEOWNERS files
    1. All Contributors GitHub App
  17. compromise.js for NLP
  18. contributing.md files
  19. CORS
  20. CSS/CSS3
  21. cucumber
  22. D3.js
  23. dependency-cruiser
  24. Django
  25. Docker
  26. docsify
  27. DSPy
  28. ECMAScript browser modules (using import in the browser)
  29. Feathers
  30. 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.
  31. Firestore and Firebase Local Emulator Suite and Firebase Hosting
  32. My solutions for FreeCodeCamp (UPDATE: no longer publicly available)
  33. Gatsby.js
  34. GitHub CLI gh
  35. GitHub Copilot (uses OpenAI Codex) and GitHub Copilot CLI
  36. GitHub issue template
  37. Golang
  38. 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.
  39. GSAP (GreenSock Animation Package)
  40. gzip
  41. HTML/HTML5
  42. HTTP status codes
  43. HTTPS server
  44. Hugging Face - for trying out ML models quickly
  45. jExcel
  46. jquery-i18next
  47. Kotlin
  48. LangChain
  49. lazy load
  50. Less
  51. Lit.js
  52. localForage
  53. localtunnel
  54. Lodash and Underscore.js
  55. Lottie files for animations
  56. Material Design Components for the Web (CDN and NPM/Webpack setup)
  57. MEAN
  58. mermaid
  59. 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.).
  60. Mitosis
  61. mocha chai
  62. MongoDB
  63. Neumorphism
  64. Node
  65. Ollama to run LLMs locally/privately on your computer.
  66. Publishing your own NPM package and GitHub package
  67. nx
  68. Parcel.js web app bundler
  69. Polka
  70. Polymer
  71. PostCSS
  72. pug
  73. Python ML web app using Streamlit
  74. PWA + Bluetooth
  75. Qwik
  76. 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
  77. reCAPTCHA
  78. service workers and WebWorkers and making an installable PWA (Progressive Web App)
  79. shadcn
  80. snowpack and create-snowpack-app
  81. Solid.js
  82. Svelte and Sapper
  83. SASS/SCSS
  84. SQL and Sequelize ORM for Node.js
  85. TensorFlow
  86. three.js
  87. universal-tilt.js
  88. Vue with Firebase database and Glitch.com hosting
  89. Web Accessibility (a11y) (from Google's Udacity course) and axe-cli (and even more a11y notes)
  90. Web Dev Bootcamp
  91. web video, image manipulation, and connecting video to CSS animations
  92. Webpack
  93. WebSocket
  94. yargs
  95. yarn
  96. Zdog - pseudo-3D for canvas and SVG
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
  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
  54. YDF (Yggdrasil Decision Forests) - ML

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 itch.io and Glitch.com and CodeSandbox.io and LeetCode.com and Bitbucket.org and Repl.it and HuggingFace.co

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

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes