1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
# Match Up
Match Up! is a web application to create pairings of players from a pool and assign to a limited number of slots. It is [live](https://mu.karanj.com)!
Here it is in action:
Some features of this application are:
- Activate and deactivate named players, guests and courts
- Propose pairings to each court from a set of players
- Considers player levels (optionally mingle players)
- Prioritize players that haven't played as many games
- Timer to limit the time for each round
What this application ***IS***:
- Open: The source code is available for modifications and extension
- Private: All player data is stored in your browser via local storage
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)
## Usage
- Select or deselect the courts available
- Check in and check out the regular players
- Optionally add guests to the game
- Beginner: Level 1
- Novice: Level 3
- Intermediate: Level 6
- Choose how the pools should be created
- All levels (Disregard levels)
- 2 Levels (Players split into two categories)
- 3 Levels (Players split into three categories)
- Skill based (Consider all levels)
- Request a proposal and confirm to start a round
- Repeat as many times as needed
- Reset the session at the bottom of the page
- You can update the list of players by providing a CSV file. The format is show below:
|id|first_name|last_name|level|
|---|---|---|---|
|104|John|Doe|4|
|104|Jane|Doe|9|
Levels are defined between 1 to 10.
## Compilation
Please install [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [node](https://nodejs.org/en) on your machine before proceeding further.
Once installed, open the terminal to a folder of your choosing and run the following commands to setup the application.
```bash
git clone https://gitlab.com/KaranJayachandra/match_up.git
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.
## Architectural Design Record
Key Learnings:
- The choice of language is tightly coupled to application complexity requirements:
- [Flask](https://flask.palletsprojects.com/en/stable/) or [Dash](https://dash.plotly.com/tutorial) applications are easy to develop but hard to deploy.
- JavaScript is a superb language for creating shareable tools for non-technical people.
- 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:
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.
|
