You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: _posts/2025-02-27-conway-hateoas-htmx.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,7 +18,7 @@ To demo this I was thinking that Conway Game of Life could be a fun example. It'
18
18
19
19
<!-- excerpt-end -->
20
20
21
-
You can find all of the code here: [https://github.com/marcusoftnet/htxm-game-of-life](https://github.com/marcusoftnet/htxm-game-of-life), but we are going to build it up step by step in the article.
21
+
You can find [all of the code here](https://github.com/marcusoftnet/htmx-game-of-life), but we are going to build it up step by step in the article.
And [here are some tests that shows how this function works](https://github.com/marcusoftnet/htxm-game-of-life/blob/main/tests/computeNextState.test.js). I will not use the tests in the walkthrough, but they are part of the repo.
53
+
And [here are some tests that shows how this function works](https://github.com/marcusoftnet/htmx-game-of-life/blob/main/tests/computeNextState.test.js). I will not use the tests in the walkthrough, but they are part of the repo.
54
54
55
55
Game of Life is often used as a kata (coding exercise) as it has simple rules, but can be a bit tricky to implement.
56
56
@@ -94,7 +94,7 @@ npm i express express-handlebars
94
94
code .
95
95
```
96
96
97
-
I'm not going to talk about styling - get the [CSS here](https://github.com/marcusoftnet/htxm-game-of-life/blob/main/public/styles.css)
97
+
I'm not going to talk about styling - get the [CSS here](https://github.com/marcusoftnet/htmx-game-of-life/blob/main/public/styles.css)
98
98
99
99
The initial `server.js` looks like this, and generates the initial board:
100
100
@@ -122,7 +122,7 @@ app.listen(PORT, () =>
122
122
);
123
123
```
124
124
125
-
There are, for reasons that will soon become clear, quite a lot of Handlebars configuration. I've broken it out to a `config/handlebars.js` file. You can get it here: [https://github.com/marcusoftnet/htxm-game-of-life/blob/main/config/handlebars.js](https://github.com/marcusoftnet/htxm-game-of-life/blob/main/config/handlebars.js). It is basically telling handlebars that the views are in the `views` folder, with the `.hbs` extension and then create a few helper functions that will be used in the views.
125
+
There are, for reasons that will soon become clear, quite a lot of Handlebars configuration. I've broken it out to a `config/handlebars.js` file. You can get it here: [https://github.com/marcusoftnet/htmx-game-of-life/blob/main/config/handlebars.js](https://github.com/marcusoftnet/htmx-game-of-life/blob/main/config/handlebars.js). It is basically telling handlebars that the views are in the `views` folder, with the `.hbs` extension and then create a few helper functions that will be used in the views.
126
126
127
127
Let's now fill out the views. First the `views/board.hbs`, which also is the main page:
128
128
@@ -391,7 +391,7 @@ Reloading the page will stop the simulation run.
391
391
392
392
## Extras - Change speed of the simulation
393
393
394
-
In the end product result in my [repository](https://github.com/marcusoftnet/htxm-game-of-life), I had a little bit of fun and created a slider to change the speed of the simulation. You can see this code in the `views/partials/controls.hbs` partial.
394
+
In the end product result in my [repository](https://github.com/marcusoftnet/htmx-game-of-life), I had a little bit of fun and created a slider to change the speed of the simulation. You can see this code in the `views/partials/controls.hbs` partial.
395
395
396
396
## Conclusion
397
397
@@ -403,4 +403,4 @@ The actual business logic for the Cell update was pretty simple and setting up t
403
403
404
404
I learned a lot about HTMX and in particular the `hx-trigger` and `hx-vals` attributes and how to use them in cooperation to get the appropriate data passed to the endpoint.
405
405
406
-
I hope you found this interesting. Again the code is in my [repository here](https://github.com/marcusoftnet/htxm-game-of-life).
406
+
I hope you found this interesting. Again the code is in my [repository here](https://github.com/marcusoftnet/htmx-game-of-life).
0 commit comments