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.

Excel tool

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 JSBin I 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">
  • Antialiasing <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 v-model: <input v-model=“tasks.done” name=“done">

The actual power comes from a few lines of JavaScript. Let me explain with inline comments

Write endless simple tools with this setup

The combination of the three technologies (HTML + CSS Framework, JavaScript, 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:
JS Bin — Collaborative JavaScript Debugging


Originally published at gist.github.com.