Updated the architectural record with basics of web development.

1 files changed, 67 insertions, 1 deletions

diff --git a/README.md b/README.md
index 99c4c19..1fa2fc8 100644
--- a/README.md
+++ b/README.md
@@ -73,4 +73,70 @@ Key Learnings:
 - Front end work and back end work are equally important in the success of an application.
 - Vanilla JavaScript is enough for most simple applications; complex applications might benefit from [state](https://refactoring.guru/design-patterns/state).
 
-At [my badminton club](https://www.bctsf.nl/) we run a hustle system to create matches of four players from a pool of players currently at the club. This application aimed to solve this problem.
\ No newline at end of file
+At [my badminton club](https://www.bctsf.nl/) we run a hustle system to create matches of four players from a pool of players currently at the club. This application aimed to solve this problem. The three fundamental building blocks for web applications are:
+
+1. Hypertext Markup Language (HTML) for the content
+2. Cascading Style Sheets (CSS) for the styling
+3. JavaScript for (JS) user interaction
+
+### HTML
+
+I believe that HTML is quite straight forward to learn. So I don't write much about it here. I google what I need most of the time. Complications come from the use of meta tags. These are occasionally used. I look them up when needed.
+
+### CSS
+
+I find CSS more difficult. There are several properties which can be used. I usually go with a simple style sheet already available. But I have made attempts at making my own. An example is my [website](https://karanj.com). Some good CSS frameworks are:
+
+- [Simple](https://simplecss.org)
+- [Bulma](https://bulma.io)
+- [Pico](https://picocss.com)
+
+### JS
+
+I am ashamed to say that it took me quite some time to pick up JavaScript. For some reason, I always found it irritating to work with. Mainly because of its dependency to browsers. With the advent of `node`, this is going away. I think JavaScript might now be one of the best languages for rapid development and deployment.
+
+#### Basics
+
+JavaScript is a dynamically typed language whose runtime is embedded in most browsers. JavaScript engines in browsers: Firefox has SpiderMonkey and Chrome has V8. ECMAScript is the standard, JavaScript is an implementation of it. A good starting reference for JavaScript are the courses from Mosh Hamedani. Hamedani covers the [basics](https://www.youtube.com/watch?v=W6NZfCO5SIk) and how [object-oriented](https://www.youtube.com/watch?v=PFmuCDHHpwk) JavaScript is written. JavaScript uses [camel case](https://en.wikipedia.org/wiki/Camel_case) as a naming convention. Key learnings are:
+
+- `let` to declare mutable variables, `const` for immutable ones
+- Value types: `Number`, `String`, `Boolean`, `Symbol`, `undefined` and `null`
+- `undefined` is the default value for variables, `null` is to clear the value
+- Reference types: `Object`, `Function`, `Array`
+- Functions are are used in JavaScript to:
+	- Apply operations on parameters and return the output. 
+	- Create an effect for the user to see
+- Since functions are objects, this is how classes are implemented in JavaScript
+
+A summary of what I learnt can be seen below:
+
+```javascript
+// Constructor function
+function Human(name) {
+	this.name = name;
+	this.location = "USA";
+	this.friends = ["John", "Mary"];
+	this.position = 0;
+	this.walk = function() {
+		this.position += 1;
+		console.log("User walked!");
+	}
+}
+
+let user = new Human();
+user.friends.append("Anthony")
+user.walk();
+```
+
+#### Packaging
+
+JavaScript can be packaged for others to use via an `npm` package. This is very similar to how `pip` works for Python. There are some packages that are really useful that I note below:
+- [Lodash](https://lodash.com/)for working with JavaScript objects
+- [Vite](https://vite.dev/): for building single page application
+- [Tensorflow.js](https://www.tensorflow.org/js): for numerical computing
+- [vue.js](https://vuejs.org/): Package components into a single file
+- [express.js](https://expressjs.com/): flask equivalent with routing and requests
+Some packages that are useful for debugging are: [debug](https://www.npmjs.com/package/debug) and [chalk](https://www.npmjs.com/package/chalk).
+
+#### Tools
+Use VS Code and `node`. `node` embeds V8 inside a C++ program to run JS without a browser. It also acts as a package manager for JavaScript.
\ No newline at end of file