If you just started learning front end web development, learn the basic below to get ready for contributing.

• We use HTML5, CSS3 and ESNext for JS in terms of version.

• We use SCSS and TS instead of CSS and JS, though the above version still applies under the hood respectively.

  • SASS is the superset library of CSS though not strict superset. It's just SASS will be compiled into CSS during build time.

    • SCSS is SASS with syntax that's compatible with normal CSS, making it strict superset of CSS.

• TS is also superset of JS though not strict superset. It's just TS will be compiled into JS during build time.

• We use SVG which is written XML, similar to HTML, for game boards.

• We use VueJS framework in Class Style Components for web framework/library to streamline the development process.

So, afterall, we use HTML5, SVG, SCSS, TS and VueJS!

You don't need to remember everything by-heart. Instead, try to focus on learning general concept and overview of what is out there that each language can offer so that you know whether you have the tools and how you can piece together the puzzles, a.k.a. whatever you want to implement! Learn in the sequence listed below:

• HTML5

  1. SVG (Basic without Using CSS or JS)

• CSS3

  1. SASS/SCSS

• ESNext JS

  1. JS (Web Animation API: This is what we will use to implement SVG animation site wide.)

  2. TS

• VueJS

  1. VueJS (Class Component)

  2. Vuex

Pretty much all the big tech companies have their own site for learning web development.

• Mozilla: https://developer.mozilla.org/en-US

  • By Mozilla, open source organization behind Firefox, this is my favorite beginner friendly source to learn everything web development from ABC to advanced level!

• Google: https://developers.google.com/web

  • A bit harder to follow along compared to Mozilla's version but if you already have the basic, this is a good resources, especially for those who are technically minded and interested in the latest technologies in the web development!

• Microsoft: https://azure.microsoft.com/en-us/get-started/web-app

  • It is sometimes helpful for me as their documentation is tailored to work with other languages and Microsoft product. So, it is a good place to start when start to branch out of the three basic languages.

• CSS3

  • SASS/SCSS

    • https://sass-lang.com

    • https://github.com/sass

• JS

  • ESNext

    • https://en.wikipedia.org/wiki/ECMAScript#ES.Next

    • https://esnext.github.io/2014/08/01/introducing-esnext

    • https://www.esnextconf.com

    • https://www.quora.com/What-is-the-difference-between-ES6-and-ESNext

  • Web Animation API

    • https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Web_Animations_API_Concepts

  • TS

    • https://www.typescriptlang.org

    • https://github.com/microsoft/TypeScript

• VueJS

  • Vue

    • vuejs.org

    • https://github.com/vuejs/vue

  • Vue Cli

    • https://cli.vuejs.org

    • https://github.com/vuejs/vue-cli

  • Vuex

    • https://vuex.vuejs.org

    • https://github.com/vuejs/vuex

  • Vue Router

    • https://router.vuejs.org

    • https://github.com/vuejs/vue-router

  • Vue Class Component

    • https://class-component.vuejs.org

    • https://github.com/vuejs/vue-class-component

  • Git

    • https://git-scm.com

    • https://www.atlassian.com/git

SMIL SVG Animation (We are not using this though nice to know it is out there.)

https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL

https://oreillymedia.github.io/Using_SVG/extras/ch19-SMIL.html

https://oreillymedia.github.io/Using_SVG/guide/markup.html#animation

SVG animation with CSS

https://css-tricks.com/svg-line-animation-works

https://codepen.io/chriscoyier/pen/bGyoz?editors=1100#0

Code snippet for waiting n milliseconds:

await new Promise((resolve, reject) => setTimeout(resolve, n));

Other Resources:

https://github.com/typpo/quickchart

https://github.com/vega/vega

https://github.com/d3/d3

https://github.com/mrdoob/three.js

https://vuedose.tips/tips/dynamic-imports-in-vue-js-for-better-performance/