diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 41 |
1 files changed, 18 insertions, 23 deletions
@@ -22,7 +22,7 @@ What this application ***IS***: What this application ***IS NOT***: - Secure: The data is available for anyone to observe via the browser console -- Performant: Works with a small number of named players (<3MB) +- Performant: Works with a small number of named players (~3MB) ## Usage @@ -61,7 +61,7 @@ cd match_up npm install ``` -To run a development server run `npm run dev` or run `npm run build` to create a optimized bundle of static content. I choose to serve this content via GitLab pages but you could choose to do so in any other server. +To run a development server run `npm run dev` or run `npm run build` to create a optimized bundle of static content. I choose to serve this content via GitLab pages but you could choose to do so in any other server. This application is running via [IIS](https://www.iis.net/) locally on machine at my club as it doesn't have access to the internet. ## Architectural Design Record @@ -73,31 +73,21 @@ 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. The three fundamental building blocks for web applications are: +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. I started off using Plotly Dash, then transitioned to a combination of Flask and HTMX. Running a web server with a connected postgres databased instance on Heroku seemed overkill for this after going live. Therefore, I finally ending up with the foundational triad for web development: 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: +I believe that HTML is quite straight forward to learn. So I don't write much about it here but this [cheatsheet](https://www.simplehtmlguide.com/cheatsheet.php) was really handy. Complications come from the use of meta tags. These I used occasionally and I look them up when needed. I found CSS more difficult. There are several nitty gritty details and properties which can be used. I went 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 I considered 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 +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. I found things were unwieldy at first but when I transitioned to `node`, everything became much easier. `node` embeds V8 inside a C++ program to run JS without a browser. It also acts as a package manager for JavaScript. I think JavaScript might now be one of the best languages for rapid development and deployment. Here I wanted to make small cheatsheet for myself for the future when I have to jump back into JS development. -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: +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. 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` @@ -127,16 +117,21 @@ let user = new Human(); user.friends.append("Anthony") user.walk(); ``` - -#### Packaging +### 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 + +- [Lodash](https://lodash.com/) is crucial for working with JavaScript objects +- [Vite](https://vite.dev/) makes building single page application a breeze + +Some packages that are useful for debugging are: [debug](https://www.npmjs.com/package/debug) and [chalk](https://www.npmjs.com/package/chalk). I would like to try out the folloing packages in future projects: + - [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 +## Resources + +- Mosh Hamedani's [JS Basics](https://www.youtube.com/watch?v=W6NZfCO5SIk) and [Object-oriented JS](https://www.youtube.com/watch?v=PFmuCDHHpwk) +- [Primeagen - HTMX Sucks](https://www.youtube.com/watch?v=4gwOv2-A8Vo) +- [Tech with Tim - Use SQLAlchemy Database](https://www.youtube.com/watch?v=uZnp21fu8TQ) |