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.

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

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

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing
Loading Svelte Themes