First, and most importantly, Svelte compiles your code into a very small, vanilla JS package without any framework built-in, eliminating the need for your users to load a large JS file to activate the shim or "virtual DOM" those frameworks require. In addition, Svelte doesn't rely on large boilerplate components or a separate state management layer. Both of these allow for much simpler code both at develop-time and runtime.
While not a "big" deal on fast, desktop connections, these file sizes can have a big impact on mobile users and on battery life. For example, here are some frameworks and their minified package size:
Those sizes can have a significant impact on your page load and mobile performance.
Everyone is concerned about the national shortage of toilet paper caused by the reaction to the coronavirus pandemic. More people being at home during the day along with some panic-stricken hoarders have caused toilet paper to be in much shorter supply than normal.
I'm lucky enough to live in a suburban house with a LOT of people (my wife and 4 kids). This means that we typically keep a decent amount of toilet paper in stock, but even I started to get a little worried, like everyone else, when I saw the pictures of empty store shelves. Six people, with 4 of them under the age of 10 means A LOT of toilet paper usage...but exactly how much is "a lot?"
So I did what many "dads" (and I'm sure others too, but it's easy for me to make fun of dads as I am one) did: I started counting toilet paper. Every few days I would go around to the various places toilet paper is stored (when you have small children, you always want it within arms reach #dadhack) and count the rolls. Then, I recorded the data in a trusty-old Google Sheet. That was a great start, but I started to think of something fancier - like automated "day zero" calculators, graphs, and other fun statistics.
To build the app, I used Google Sheet's "publish" feature to publish the sheet as raw CSV.
After that, it was a matter of building the application itself. My plan involved a 4-pane design — the time-to-empty, other statistics like “rolls per month”, a TP graph, and the raw data. As you can see in the project source code, I made each pane their own component and passed the raw data from the spreadsheet to each.
To deploy the app, I chose to use Netlify so that it would be quickly deployed to a global CDN every time I commit. I already had GitLab connected to my Netlify account, so it was easy enough to just select the new repository.
From there, I set the build command to
npm run build
and the deploy directory to
Netlify and GitLab take care of the rest, and every time I make a new commit to the master branch, a deploy is enqueued and is live just a few moments later.
If you’d like to track your TP usage to help you determine when you need to place an order, check out the live production app: tp.labwork.dev. You can make your own spreadsheet by making a copy of my example spreadsheet that shows the two columns you'll need: date and total rolls remaining. Publish your sheet to the web, then paste that link into the box on tp.labwork.dev and click "go"!
In the end, I'm fairly pleased with what I was able to build in just a few hours. The time-to-empty for my family and I is an entirely different story...