diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 68 |
1 files changed, 67 insertions, 1 deletions
@@ -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 |