generated from cogwizzle/gh-pages-blog
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5 from cogwizzle/dice
dice
- Loading branch information
Showing
18 changed files
with
236 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| Recently I built another tool, | ||
| [<u>https://dungeonworldcharacter.com/</u>](https://dungeonworldcharacter.com/), | ||
| as a static site that uses very little JavaScript in comparison with | ||
| today’s modern goliaths. If you want to see more about that project | ||
| check out this blog post | ||
| [<u>here</u>](https://cogwizzle.com/dungeon%20world%20character%20sheet.html). | ||
| In the retrospective of the project I noted that I would’ve built it | ||
| differently if I had to do it all over again. I would’ve used | ||
| [<u>progressive | ||
| enhancement</u>](https://en.wikipedia.org/wiki/Progressive_enhancement#:~:text=Progressive%20enhancement%20is%20a%20strategy,receive%20the%20enhanced%20version%20instead.) | ||
| over top of a traditionally server rendered application. | ||
|
|
||
| Today I’m excited to announce a new tool that does just this! I’ve built | ||
| a progressively enhanced PWA experience that works better with | ||
| JavaScript, but still functions without it. I built this application for | ||
| two reasons. The tool is called | ||
| [<u>https://dice.dungeon-tools.com/</u>](https://dice.dungeon-tools.com/). | ||
|
|
||
| <img src="/dungeon-tools-dice-app/image1.png" | ||
| style="width:6.5in;height:5.20833in" /> | ||
|
|
||
| *Figure 1: Dice App* | ||
|
|
||
| # What is it? | ||
|
|
||
| This is a dice app that allows players to easily roll digital dice for | ||
| Tabletop Role playing experiences. It will work with or without | ||
| JavaScript. The site runs primarily on PHP. I built the PHP only | ||
| experience first. It works with a slightly degraded experience if you | ||
| use the PHP only experience. Every dice roll causes the page to refresh | ||
| but it works. | ||
|
|
||
| The app really shines with the JavaScript enabled experience. For | ||
| starters it is a PWA. It allows folks to install the application like it | ||
| is a native app as well as cache resources so that it is really fast on | ||
| subsequent page loads. Additionally the PWA uses JavaScript exclusively | ||
| to roll the dice and updates the UI with the results. You can see up to | ||
| your last 8 rolls on screen. | ||
|
|
||
| The small amount of JavaScript that does exist on the site is written | ||
| using HATEOAS as an inspiration for keeping track of state. The | ||
| handwritten JavaScript is only 40 lines long including comments. The | ||
| forms and UI that composed the PHP native experience were able to inform | ||
| how the JavaScript application state should run. | ||
|
|
||
| In addition to the progressively enhanced JavaScript experience we chose | ||
| to go with Picocss this time around. This gives us light and dark themes | ||
| based on the users preferences as well as some really sane defaults when | ||
| it comes to plain Jane HTML element styling. | ||
|
|
||
| ## API | ||
|
|
||
| In addition to the app native functionality I also built a HATEOAS | ||
| inspired REST API. I will likely tie this feature directly into the | ||
| Dungeon World Character app to allow for the app to roll dice. The API | ||
| is simple. We have d4, d6, d8, d10, d12, and d20 endpoints. The format | ||
| is | ||
| [<u>https://dice.dungeontools.com/api/d4</u>](https://dice.dungeontools.com/api/d4). | ||
| These APIs are open and free to use. | ||
|
|
||
| # Retrospective | ||
|
|
||
| There are still small tweaks to be made to the dice app. I need to | ||
| download and cache the Pico CSS library and I have one small cache issue | ||
| that isn’t affecting any of the application execution. Obviously the | ||
| plan is to patch those few things up over the next couple of days. Aside | ||
| from those small pieces I’m actually really happy with using this | ||
| progressive enhancement technique to build high quality experiences on | ||
| the web. | ||
|
|
||
| This application is really small so it was an easy case study on the | ||
| progressively enhancing a web application. I’d like to continue this | ||
| style of development to build high performance web applications in the | ||
| future. Perhaps some of this technique can be moved over to some of my | ||
| other projects. I love how little JavaScript is required. It brings me | ||
| back to the early days of my career. | ||
|
|
||
| PicoCSS is a joy to work with. I really like how simple it is to get | ||
| started and how little custom CSS you have to write in order for it to | ||
| look nice. I do think that for larger projects it might not be the ideal | ||
| choice. I’m looking into other libraries like | ||
| [<u>Bulma</u>](https://bulma.io/) for future projects. PicoCSS is great | ||
| if you don’t want to do a lot of customization. I feel like Bulma is a | ||
| bit heavier than PicoCSS but has more flexibility. If you want the | ||
| ultimate control over everything you can’t go wrong with | ||
| [<u>Tailwind</u>](https://tailwindcss.com/). | ||
|
|
||
| I’m currently using Cloudways by Digital Ocean to host my project. I hit | ||
| a couple of speed bumps during the deployment of the app, but I think it | ||
| was a skill issue on my part. I’m still learning the Cloudways platform | ||
| so I’m sure it will get more intuitive as time goes on. In retrospect | ||
| this will likely be the way that I host apps in the future. Especially | ||
| after hearing about terrifying stories like | ||
| [<u>this</u>](https://old.reddit.com/r/webdev/comments/1b14bty/netlify_just_sent_me_a_104k_bill_for_a_simple/) | ||
| on Serverless platforms. The site may go down because my server isn’t | ||
| that powerful, but at least I won’t wake up to a rough bill. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>Cogwizzle - Blog</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link | ||
| rel="stylesheet" | ||
| href="styles/styles.min.css" | ||
| /> | ||
| </head> | ||
| <body> | ||
| <nav class="container"> | ||
| <ul> | ||
| <li> | ||
| <h1>Cogwizzle</h1> | ||
| </li> | ||
| </ul> | ||
| <ul> | ||
| <li> | ||
| <a href="/">Blog</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| <main class="container"> | ||
| <p>Recently I built another tool, <a | ||
| href="https://dungeonworldcharacter.com/"><u>https://dungeonworldcharacter.com/</u></a>, | ||
| as a static site that uses very little JavaScript in comparison with | ||
| today’s modern goliaths. If you want to see more about that project | ||
| check out this blog post <a | ||
| href="https://cogwizzle.com/dungeon%20world%20character%20sheet.html"><u>here</u></a>. | ||
| In the retrospective of the project I noted that I would’ve built it | ||
| differently if I had to do it all over again. I would’ve used <a | ||
| href="https://en.wikipedia.org/wiki/Progressive_enhancement#:~:text=Progressive%20enhancement%20is%20a%20strategy,receive%20the%20enhanced%20version%20instead."><u>progressive | ||
| enhancement</u></a> over top of a traditionally server rendered | ||
| application.</p> | ||
| <p>Today I’m excited to announce a new tool that does just this! I’ve | ||
| built a progressively enhanced PWA experience that works better with | ||
| JavaScript, but still functions without it. I built this application for | ||
| two reasons. The tool is called <a | ||
| href="https://dice.dungeon-tools.com/"><u>https://dice.dungeon-tools.com/</u></a>.</p> | ||
| <p><img src="/dungeon-tools-dice-app/image1.png" | ||
| style="width:6.5in;height:5.20833in" /></p> | ||
| <p><em>Figure 1: Dice App</em></p> | ||
| <h1 id="what-is-it">What is it?</h1> | ||
| <p>This is a dice app that allows players to easily roll digital dice | ||
| for Tabletop Role playing experiences. It will work with or without | ||
| JavaScript. The site runs primarily on PHP. I built the PHP only | ||
| experience first. It works with a slightly degraded experience if you | ||
| use the PHP only experience. Every dice roll causes the page to refresh | ||
| but it works.</p> | ||
| <p>The app really shines with the JavaScript enabled experience. For | ||
| starters it is a PWA. It allows folks to install the application like it | ||
| is a native app as well as cache resources so that it is really fast on | ||
| subsequent page loads. Additionally the PWA uses JavaScript exclusively | ||
| to roll the dice and updates the UI with the results. You can see up to | ||
| your last 8 rolls on screen.</p> | ||
| <p>The small amount of JavaScript that does exist on the site is written | ||
| using HATEOAS as an inspiration for keeping track of state. The | ||
| handwritten JavaScript is only 40 lines long including comments. The | ||
| forms and UI that composed the PHP native experience were able to inform | ||
| how the JavaScript application state should run.</p> | ||
| <p>In addition to the progressively enhanced JavaScript experience we | ||
| chose to go with Picocss this time around. This gives us light and dark | ||
| themes based on the users preferences as well as some really sane | ||
| defaults when it comes to plain Jane HTML element styling.</p> | ||
| <h2 id="api">API</h2> | ||
| <p>In addition to the app native functionality I also built a HATEOAS | ||
| inspired REST API. I will likely tie this feature directly into the | ||
| Dungeon World Character app to allow for the app to roll dice. The API | ||
| is simple. We have d4, d6, d8, d10, d12, and d20 endpoints. The format | ||
| is <a | ||
| href="https://dice.dungeontools.com/api/d4"><u>https://dice.dungeontools.com/api/d4</u></a>. | ||
| These APIs are open and free to use.</p> | ||
| <h1 id="retrospective">Retrospective</h1> | ||
| <p>There are still small tweaks to be made to the dice app. I need to | ||
| download and cache the Pico CSS library and I have one small cache issue | ||
| that isn’t affecting any of the application execution. Obviously the | ||
| plan is to patch those few things up over the next couple of days. Aside | ||
| from those small pieces I’m actually really happy with using this | ||
| progressive enhancement technique to build high quality experiences on | ||
| the web.</p> | ||
| <p>This application is really small so it was an easy case study on the | ||
| progressively enhancing a web application. I’d like to continue this | ||
| style of development to build high performance web applications in the | ||
| future. Perhaps some of this technique can be moved over to some of my | ||
| other projects. I love how little JavaScript is required. It brings me | ||
| back to the early days of my career.</p> | ||
| <p>PicoCSS is a joy to work with. I really like how simple it is to get | ||
| started and how little custom CSS you have to write in order for it to | ||
| look nice. I do think that for larger projects it might not be the ideal | ||
| choice. I’m looking into other libraries like <a | ||
| href="https://bulma.io/"><u>Bulma</u></a> for future projects. PicoCSS | ||
| is great if you don’t want to do a lot of customization. I feel like | ||
| Bulma is a bit heavier than PicoCSS but has more flexibility. If you | ||
| want the ultimate control over everything you can’t go wrong with <a | ||
| href="https://tailwindcss.com/"><u>Tailwind</u></a>.</p> | ||
| <p>I’m currently using Cloudways by Digital Ocean to host my project. I | ||
| hit a couple of speed bumps during the deployment of the app, but I | ||
| think it was a skill issue on my part. I’m still learning the Cloudways | ||
| platform so I’m sure it will get more intuitive as time goes on. In | ||
| retrospect this will likely be the way that I host apps in the future. | ||
| Especially after hearing about terrifying stories like <a | ||
| href="https://old.reddit.com/r/webdev/comments/1b14bty/netlify_just_sent_me_a_104k_bill_for_a_simple/"><u>this</u></a> | ||
| on Serverless platforms. The site may go down because my server isn’t | ||
| that powerful, but at least I won’t wake up to a rough bill.</p> | ||
| </main> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
Oops, something went wrong.