Quick tool generation with VueJS, Tailwind CSS and LocalStorage
(Edit: 19–01–12: I will not update this post on Medium on longer. You can always find the latest version of it over here on my website)
Before: Tools with Excel
I used to write down the
total number of tasks in a row in
Excel and add a row for my
done tasks. I would add a
ratio row and do the math to see my progress.
That setup is flexible and worked pretty well, but it looked boring. Well, just like an Excel sheet looks like.
I need to confess that visuals make a huge motivation difference for me.
After: Tools with JS, CSS, LocalStorage
That is why I need a good toolbox for creating helpers that are…
- Easy to implement
- Easy to adjust and extend
- Looking nice
The modern web universe has such tools:
- TailwindCSS lets me write beautiful yet flexible UIs in minutes not hours
- VueJS is a drop-in extension to make my HTML dynamic without adding extra tooling
- LocalStorage lets me persist all the data that I enter and process
Here is how my little example task progress tracker looks like using these tools:
Let me do a quick tour of the feature that I use frequently to build tools like this task tracker:
- TailwindCSS from CDN: In
JSBinI have a boilerplate with Tailwind so the page looks good from line 1
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<body class=“antialiased”- This smoothes all fonts
- VueJS from CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>Pull in VueJS to make the page dynamic
- Quick role-model-binding To fetch my entries and process them with VueJS, I add a simple
<input v-model=“tasks.done” name=“done">
Write endless simple tools with this setup
The combination of the three technologies (
HTML + CSS Framework,
LocalStorage) makes it super easy to create simple yet flexible and beautiful tools.
Other tools that I built the same way:
- Day and pomodoro planner
- Customized todo app
- Cryptocurrency price tracker (using jQuery’s
$.getJSON('API-URI')as I did not find a drop in replacement for VueJS)
There are endless opportunities to create flexible and good-looking tools for your specific needs in very little time!
Here is the source for the tracking tool:
Originally published at gist.github.com.