Why Another Utility Site?

The web is full of utility sites, but many come with drawbacks:

• Intrusive ads and analytics
• Server-side processing of potentially sensitive data
• Slow loading times
• Inconsistent UI/UX

utils.techformist.com addresses these issues by keeping everything client-side, ensuring your data never leaves your browser. The site loads quickly, works offline, and offers a clean, consistent interface for all tools.

Key Features

1. Tools that you want to use!

Our collection includes essential utilities that solve real problems :)

• Calculator: A simple yet powerful calculator for quick arithmetic operations.
• QR Code Generator: Create QR codes for URLs, WiFi networks, contact details, and more with customizable colors.
• Password Generator: Generate secure, random passwords with options for length, character types, and complexity.
• Barcode Generator: Create various barcode formats with customizable settings for professional or personal use.
• Image Converter: Convert images between different formats without uploading them to any server.
• Favicon Generator: Quickly create favicons for your website from any image.
• Color Picker: Extract and analyze colors from images with support for multiple color formats.
• JSON Formatter: Format, validate, and beautify JSON data with easy-to-use controls and copy functionality.
• Base64 Converter: Encode and decode text or files to and from Base64 format right in your browser.

.. and so on. Check out the site for the latest updates.

2. Fast Search and Category-Based Organization

A simple tool search is at the heart of the site! At the same time, tools are organized into logical categories for easy discovery:

• Code: Developer tools like JSON Formatter and Base64 Converter for everyday coding tasks
• Image: Tools for working with images, including QR Code Generator, Barcode Generator, Image Converter, and Favicon Generator
• Text: Text manipulation utilities like the Password Generator
• Design: Creative tools such as the Color Picker for design work
• File: File processing tools like the PDF Compressor
• Other: Miscellaneous utilities including the Calculator

This categorization ensures you can quickly find the right tool for your current task.

3. Responsive and Accessible Design

All tools feature:

• Fully responsive layouts that work on devices of any size
• Dark/light mode support

4. Privacy-First Approach

What sets util.techformist.com apart is its commitment to privacy:

• No tracking (except essentials)
• No server-side processing
• No data storage outside of the browser
• No data transmission to any external computer outside of your own browser

Technology Stack

Utils.techformist.com is built on modern web technologies:

• Nuxt 3: For its excellent developer experience, automatic routing, and performance optimizations
• NuxtUI: Providing a consistent design system and accessible components
• Tailwind CSS: For rapid styling and responsive design

The app is client-side only - no database or server processing.

Why Client-Side Only?

The decision to make util.techformist.com entirely client-side was deliberate:

1. Privacy: Your data never leaves your browser, eliminating privacy concerns.
2. Performance: No server roundtrips means instant processing of your tasks.
3. Availability: The site works offline once loaded.
4. Scalability: Without server costs, the site can scale infinitely.
5. Simplicity: The architecture remains clean without databases or APIs.

Development Approach

Building the site was straightforward with Nuxt’s module system and NuxtUI’s component library. The development workflow included:

1. Setting up a Nuxt 3 project with the content and UI modules
2. Creating a consistent layout and navigation system
3. Implementing individual utility components
4. Ensuring responsive design with Tailwind
5. Optimizing for performance

The entire project required no backend infrastructure, making deployment simple through static site hosting. The site is hosted on Cloudflare Pages.

Looking Ahead

Util.techformist.com is just getting started. Future plans include:

• Adding more utility tools based on user feedback!
• Implementing more advanced features like tool chaining :)
• Improving keyboard shortcuts and accessibility

Conclusion

Util.techformist.com represents my philosophy that web tools should be fast, private, and straightforward. By keeping everything in the browser, I’ve created a resource that respects your data while providing genuinely useful functionality.

Give it a try at utils.techformist.com and let me know what you think.

Now, how many times have you wondered about making things a weebit exciting by drawing something on the screen while you are presenting stuff. Not taking screenshots and pasting in other programs, not using Powerpoint tools and not using video tools - just plain old do things live and switch context, quickly.

Enter Zoomit, a lightweight gem that allows users to effortlessly zoom in, annotate, and draw on their screens, bringing presentations to life.

• light-weight program, super performant
• requires less context switching & shuffling windows
• no additional devices needed - all you need is a keyboard & mouse
• free

ZoomIt’s superpower is its ability to annotate anything on your screen with ease. Whether you’re giving a coding demo, dissecting complex diagrams, or discussing intricate details, you can effortlessly highlight and explain concepts.

Just hit the shortcut Ctrl + 2 and you can -

• draw lines, shapes, & arrows
• Zoom to pointer
• write directly on your slides or other applications in real-time
• save a screenshot / recording with all the annotations

Hit Esc and you can continue the amazing thing that you were doing.

Of course, you take more time when you get started since there is no window to interact with (except for the icon in the system tray). Once you get over that bump, you are going to be as productive as one can be.

See more / download Zoomit from Microsoft site.

Annoyances -

1. Initial curve may put off people
2. Getting over the muscle memory of using Ctrl+1 / Ctrl+2 / etc. in many programs (especially tabs in browsers or in VSCode)

Alternatives -

• Epic Pen has a free version & looks great. You need a pro version for something basic like drawing rectangles
• Microsoft Snip & Sketch: Comes with windows, or download from Appstore. Free, but the experience is not as pleasant - opens up a new window

You can also choose to use Ink tools from Microsoft on supported devices.

Here are a couple of my favourite CSS libraries to the rescue -

• MVP.css
• Milligram
• lit.css

I prefer a “class-less” approach to styling in quick projects -

1. All I need is HTML and the styling is done
2. I get a head start and can sprinkle styling as I go deeper in the project

While there are quite a few skeleton.css inspired libraries, there are a few challenges that come with them -

1. A few elements that I deem as “basic needs” may be missing
2. Grids and the power of grids may vary greatly since most of these libraries are super light weight
3. Ability to extend the styling may vary

In situations like these, and when I have to quickly decide a package to move forward, I turn to this website - https://dohliam.github.io/dropin-minimal-css/

This is a rather useful tool in your arsenal -

• get a bird’s eye view of how the CSS styles look
• get an overview of supported functions
• compare different css frameworks quickly

While rendering in a few libraries are wierd on the site, it no doubt provides a really good starting point if you are looking to explore and quickly try out “simple” and light-weight CSS libraries.

Almost all of the tools are free, or reasonably priced. We live in exciting times - a developer in a “developing country” can do business globally by using the most amazing tools that humankind has produced.

Note before you scroll -

• This will be a WIP post in perpetuity
• I am writing the post in mid 2020 and call it 2021 edition. If that does not convince you to stop reading, I am sure nothing can
• The list is focused on platforms and tools to make a developer’s life easier - I code mostly for the web (so YMMV)
• I consider programming platforms and languages “tools”, but they are covered at the very end so that you can rage quit this page after scrolling all the way down
• This is not an ad and I will gain little from you agreeing with me (maybe affiliate income to make me a millionaire by accumulating pennies - but those will be clearly suffixed with afl, which stands for affiliate link)
• You may not share my love for these tools and that is ok. Don’t waste your precious time to review, comment and try to justify why Pluto is not a planet (it is)

Also - there is little of pretty pictures and marketing talk.

Coding

VSCode

It is 2020 and there is no reason for anyone to use any other code editor - except, maybe, if you can’t download enough RAM.

I have nothing but gratitude for developers who created VSCode, and for the many many kind souls who created great extensions on it.

Github

Code + version control + some basic actions to automate tasks + host.

Next on my list of admiration - Github has simplified my code version control + backup. And, since I am a lesser mortal - I still do not have an “all green” Github profile.

Alternatives:

• Gitlab
• Gitea if you self-host

Design

Logos

Hatchful @ Shopify

Hatchful was probably the first decent and easy enough logo creator that simply works. There are quite a few tools now but I still go back to Hatchful for every new product I create.

Alternatives:

• Namecheap’s Logo Maker: the hipster variant
• Logodust: Open source logos
• LogoMakr: Want to be more flexible and create your own simple logos? Well, use this online logo maker tool to do the right mix of one or more of many available icons, your own images, and a few fonts. It costs money for anything worth downloading though.
• Create logo online using the Fiverr logo tool
• Avail logo creation services

Icons

• Material Icons: Because, you can’t live without them.. and you are not quite delighted with them.
• Material Design Icons: .. because there aren’t enough icons in this world.
• flaticon.com: You can now call me icon freak.

Icon Generators

Generate icons in multitude of standard sizes.

• Favicomatic - because app icon generators have aesthetic sense too
• Fav/app icon generator

Images

What does a developer do with images?

Many many image sites

• pexels.com
• pixabay.com

A few illustration sites

Whoever says no to illustrations.

• Undraw

Desktop Power Tools

Make peace with your OS

• Cmder: Saved me from searching from a dozen command line windows - now I can search with tabs instead. Slow to start than the new (in preview) Microsoft Terminal, but the features are far far too many for me to switch.
• WSL2: I was holding my breath for the May 2020 release since May 2019 - Linux on Windows, fast Docker.
• Ditto Clipboard Manager: Yes, you need that thing called clipboard manager.

Media & Presentation

• ShareX: Take screenshots and rejoice.

• LICEcap: Record quick demos through GIFs.

VPS, Website Hosting and such

• Netlify: The greatest host that the world has seen - for static sites
• Hetzner: Cheap, reliable.
• Digital Ocean aff: Location’s everything, and there’s certainly one near you. Link gets you $60 credits.
• Jelastic: Not in the mood to host? You should totally try out this PaaS.

Inexpensive Wordpress Hosts

• A2 hosting aff

Domains

• Cloudflare domains
• Namesilo aff

Find domains and pricing -

• Domcomp
• tld-list

Website Development

Hugo

The static site generator that is rumoured to have changed the speed of earth’s rotation also happens to be the best at its job.

Gridsome

And then God said - “let there be a SSG that is SPA”.

Wordpress

For those times when you need a website within 15 min flat.

Other

• Vuepress: Create a really quick documentation site
• 11ty: The SSG that deserves a lot more love

Programming Languages

I would have loved to query everything I admire, but that would have been the next Mahabharata. So, the list on programming languages (and platforms might I add) is focused on things I use at least six times an year.

Javascript

There is little in the world that makes this much sense.

C#

I would love to code everything in C# one day - but that day may never come.

Other

• Python: Oh.. I wish I knew more about this beautiful thing.
• Go: Makes the world go round and round. Not quite, but it’s super cool

Application Development: Frontend

VueJS

The framework that makes a lot of sense.

Svelte

Still on the fence on this one, but I use it anyway.

Styling: Quasar:

The best styling library + Vue-based UI framework that there is - many, many useful components and utilities

Styling: Other

• Vuetify: The most popular library for Vue
• Buefy: where performance matters

Charts: echarts - Apache

You don’t need any other charting library.

Application Development: Backend

Node

This is the only thing that made sense, and still does :). If there is one thing from this planet that you want to take with you in a H2G2 situation - I choose Node.

Fast development, many useful libraries, and easy deployments.

Node comes prepackaged with npm, but you have to absolutely try -

• pnpm - save space, lots of space.
• yarn - fast, but headed in a new direction with v2

AdonisJS

Fast, light-weight, stable, and well-structured. The development is quite slow, and there is a smaller community - but this absolutely rocks the world (or whoever uses the framework).

FeathersJS

Make service, not MVC.

StrapiJS

Been using it since alpha, one of the best free CMS’s out there.

Alternatives:

• Keystone: v5 has some great improvements, but I miss the template driven sites)

Fastify

The low-overhead framework.

ASP.net

Not quite back-end alone. It is “blazing” its way forward, but I don’t use it enough to show more love.

Also - industry-standard for the next twenty years, or until the world ends in 2050.

Application Development: Supporting Tools

Chrome

You didn’t expect this - did you?

I may cry about Chrome performance all day, but the fact is simple - my debugging has never been easier.

Alternatives:

• Firefox (duh?)

Laragon

Keep your webserver and databases organised - even when you don’t use Laravel. Just like XAMPP and cousins, but much more flexible.

DB Tools

• HeidiSQL: Small, fast, and invaluable DB client for MySQL. Works on Postgres as well - but with more meh.

Testing

• Insomnia: Test your APIs like there’s no tomorrow

Prettier

Deserves a mention even though it is plugged into the code editor or linter. Has probably saved thousands of hours that would have otherwise been spent on aligning lines, brackets, and educating others on how to tab (and why space is a bad idea; and don’t even get me started on lazies who ignore semicolon).

Regex 101

“Regex is easy”, said no one.

The Case for Email Testing

After working in CRM and dealing with millions of records, and dozens of fragile’ly built systems, I have been through imagined (and a couple of real) scenarios of email fiascos -

1. Sending out emails with wrong templates or to the wrong audience
2. Sending emails in bulk from the wrong environment (good luck explaining that to an infuriated CTO)
3. Wrong configuration that breaks tracing and you are left wondering whatever happened to the last email blast which did not record a single click

While many of the systems I deal with are on cloud and we have to figure out intelligent ways to manage emails like domain forwarding, custom whitelisting, or outright ban emails - there are many custom systems that can provide better tooling. We can do quite a lot with free, simple-to-use services that can be deployed locally on a developer machine to fast-forward development.

Here are a few tools that can help.

FakeSMTP

FakeSMTP is a simple and straightforward solution to “catch” emails locally.

Using the program is simple enough -

• Download FakeSMTP, a stand-alone jar file, and run it
• Start on the server (runs on default SMTP port, but is configurable)
• Start sending emails to SMTP and see the flow of emails within the FakeSMTP program. You open emails with the default mail program on your system

At 2 MB and a minimal footprint, catching mails in development does not get better than this.

Papercut

Papercut has a better overall UI and pleasing functions.

You install the program and start sending emails to the port. Papercut -

1. Has its own viewer that emulates common email programs to show how your email appears to end user
2. Displays notifications whenever an email arrives

src:Papercut website

Papercut is a polished product with well-written documentation and is a pleasure to use.

SMTP4Dev

If you don’t like either of the above options or want to see an alternative - check out SMTP4Dev.

Don’t let that name fool you - it exactly does what the name says, and does a really good job too!

SMTP4Dev is a good ‘mail catcher’ program with its own viewer, and is well suited for those apps that extensively test emails. The inbuilt viewer makes the process of manual testing fast and you can start failing those email test cases quite efficiently.

src: smtp4dev GitHub page

Why Scrum?

If you are looking for the answer on why agile / scrum -

1. You are in the wrong site
2. That is well beyond the scope of this post

In short: Scrum is a framework to run your project using Agile methodologies. Scrum’s objectives are -

1. Self-organise
2. Learn by doing things and through experience
3. Continuously improve

Read more on Atlassian’s site.

The stated objectives for Scrum need a simple to use, centralised store - which an Excel document is generally not. But, I don’t let all that come in the way to create a beautiful template.

Download Excel Template

If you like to live on the edge and download from any website -

Download free Scrum Excel-template.

If you are not that naive, you can check out what this template can do (or even copy the workbook) on Google Sheets.

See the action on Google Docs.

The template is -

• free to use for any kind of project
• released to public domain - see the sole exception in the terms below

You can stop reading now, and get back to work in 99.99% of the cases.

Why use Excel to track Scrum and why this template?

• There are smaller teams that rely on part-time developers who don’t want overhead
• Small teams may discuss on “stuff” and move on with work, and don’t particularly care about documenting everything
• Simple projects may not have the budget to organise things

And yes, I know that these are excuses for not creating a “usable” tool. But organisations continue to live in a bubble.

So, here we are.

Using this template you can -

1. track projects and sprints
2. track backlog, impediments and retrospective remarks
3. record effort against tasks (which can relate back to backlog)
4. summarise effort and show beautiful charts

There are no fancy formulae, macros, and automation to take the dog on a walk when you work.

All that said, I think no one should use Excel templates for use cases like this. But I really can’t quite preach something else when I have been an ardent fan of their simplicity.

Terms of Use

No terms, really. You can do what you want with this template.

But, I would appreciate if you could donate a dollar or more to the nearest charity, or to a person in need.

The Problem

I create new Git repositories all the time - just like any other developer. I am too stupid to notice the small things and learn my lessons - unlike any other developer.

Often I mix up creating repositories on the GitHub website and in local computer, thereby confusing Git. I happily create a repository with a README, add remote URL, try to do a pull..

git pull origin master

.. and, what do I get? Lo and behold..

    From https://github.com/techformist/super_hero_project
    * branch            master     -> FETCH_HEAD
    fatal: refusing to merge unrelated histories

The solution is simple, but before that - let’s see the normal flow.

The Normal and Abnormal Flows for a New Project

1. Create repository on GitHub site, or using GitHub Desktop
2. Add files like README or license, or don’t
3. Follow the helpful instructions to get the repository setup in local computer

git init
git remote add origin https://github.com/techformist/super_hero_project
git push -u origin master

Simple.

Apparently I can’t follow instructions.

So, I do -

1. Create project locally. Add a few useless programs, scripts and files
2. Do a git init
3. Create a repository on GitHub a few days later
4. Add a README, license directly on GitHub. Because, why not
5. Add remote to local and try to sync git pull origin master

Of course, there’s an error. Git sees changes on server and changes on local. It cannot just pull server to local.

Almost all the time, I revert to the below simple remedy.

git pull origin master --allow-unrelated-histories

This allows Git to pull stuff from server while retaining the local files. I can add them local files to the master branch and continue like nothing’s wrong with the world.

Another way to avoid the error is to create an empty repository on GitHub and avoid creating any files at the very beginning. Push local changes / sync, and from then on you can create files anywhere without antagonising Git.

Background

Typically I configure email server to be on the same server as my NodeJS / PHP app.

Bad practice? Sure. But, it works just fine for the kind of applications that I write. I can see how horribly this can go wrong though -

1. Your app server goes down and you have no way to send communication to your users
2. Mail servers simply get more spam, more probes - this keeps the server busy for no reason. This means your main app can suffer

There are simply better ways to design, without breaking the bank or introducing any complexity - we can just shift mail handling to an external party.

What exactly is the architecture?

Quite simple.

• My application on NodeJS continues to reside on VPS (let’s call this “App IP”)
• Mail server is shifted to another server

I could potentially use another VPS box and run Postfix (& associated paraphernalia). If I had been using Virtualmin or any such tools, I could potentially clone the virtual server and make it easier.

However, I am quite frustrated on the issues maintaining Postfix (and friends) by myself. And, I had a few CPanel based cheaper hosting solutions lying around in my inventory. So, I just took the easy way out.

I went ahead and configured CPanel to accept emails for my app.

Why is this a big deal?

There is nothing to this, really. But, it was indeed a learning experience for me - an inexperienced system admin, do-it-all, and mess-it-all guy.

The major issue was with the domain management.

DNS configuration is quite simple for an application with everything on a VPS. I just point the name server to the ones I configured on VPS, or point the A record to the specific VPS IP.

The MX record, which is responsible for receiving mails, just points to fully qualified domain name (FQDN) used by the ‘A’ record pointing to App IP.

For a domain on any of the popular domain service providers, the configuration looks like this -

This will enable mail for @domain.com addresses, and your application serves HTTP requests on ports designated in the web server on App IP.

If you throw an external web server in the mix, you land in a bit of a pickle for DNS configuration -

• MX cannot point to an IP
• You cannot just create another ‘A’ record pointing to a different IP

** Bad configuration **

‘A’ record will round-robin requests. So your app requests can go to the new ‘Mail IP’ or your mails can ping ‘App IP’ for mail handling.

Solution

There are two parts to the solution.

1. Your DNS configuration will have to revert to a recommended practice of using a prefix to the domain
2. CPanel on mail server needs to understand that mail.domain.com is an alias for domain.com email address

First, configure the DNS using tools provided by your domain name service provider.

Next, go to CPanel > Domains > Zone Editor and enable it to manage requests to mail.domain.com.

I love JSON Placeholder, but it serves only REST requests. I had been looking for something similar in GraphQL. Without longer-term, reliable options, I had reverted to creating my own fake GraphQL server.

While having my own server is certainly useful, it can become a pain to demonstrate or outline a feature to all - either through a video, blog post, or in public forums.

Enter GraphQLZero.

GraphQLZero provides an API playground that you can use to quickly test your GraphQL clients, or put forward a point while demonstrating the client-side code.

The app features GraphiQL interface that outlines the API documents, taking full advantage of self-documenting abilities of GraphQL.

I understand this is too early to get excited since there have been comparable services in the past. The challenge for the authors/maintainers will be to manage traffic and find ways to sustainably manage the application over a long term.

NodeGUI describes itself as an enabler to build cross-platform desktop applications using Javascript (and React) and Qt5.

Using NodeGUI, you should be able to -

• Create desktop applications that run on Windows, Linux or MacOS
• Styling with CSS
• Support for desktop events that are listenable from Qt
• Lower CPU/memory footprint

Of course, the comparison with Electron is evident.

Electron also enables you to create desktop applications using Javascript. It started producing some heavy applications, but has improved leaps and bounds to produce really good applications.

However, Electron still runs within Chromium. Electron applications provide a good user experience, but they are still constrained to run on a heavier base and (theoritically) be constrained on what they could do on the desktop.

Qt on the other hand can go one level down towards the metal. Qt has been there for ever, is popular on Linux-based systems - and more importantly, it has been known to be fast and having an ‘almost’ native-like experience.

Qt applications can also be compiled, which is a huge thing for IP, so can nw.js but I digress), and they have also been used in devices like TVs and embedded devices, mobile devices, and more.

At a high level, React (or Javascript) + Qt5 seems a really good combination. It remains to be seen whether organizations and product vendors find it a compelling enough case to invest in Qt as a product.

• There is a commercial company behind Qt (which is excellent, but may not get backing as easily as a completely open source product)
• The open source version of Qt is LGPL licensed - not quite comforting to the average industry guy

My bigger bet will be on Flutter as of today (or a combination of Flutter and Blazor :)).

I am super hopeful about a bright future for “native” applications on desktop using platforms that combine the ease of web development + power of desktop. At the same time I am not too sure about whether anyone other than niche application developers care too much about such innovations. As we see more and more of PWAs and web assembly, I would rather build an application that runs across web and all devices rather than just all desktop platforms.

For example -

1. Compare changes with previous version
2. Check who did changes in a specific version
3. Revert to previous version
4. Check changes to stage / commit, and periodically commit

These and many more require far too many commands. These commands were sometimes coded in batch files and copied/pasted whenever I needed them. I just could not remember everything - probably not as good a user of Git as I would like to believe.

VSCode changed all that.

VSCode takes GUI for Git to a whole new level. The source code tab along with features offered by a couple of plugins made me appreciate just how productive I could be using the humble version control.

• See changes made since last commit without leaving the main code editor
• Check who made changes and when (GitLens plugin) with one click or shortcut key
• Diff across versions within editor and quickly make changes
• Selectively stage changes

Previously I have been an infrequent user of GitHub Desktop - could never incorporate the tool in my development flow. VSCode has done an excellent job in keeping developer workflow at the centre of everything. Fast forward 6-8 months of using the Git features, I doubt if I ever go back to the previous way of doing things.

VSCode has been an excellent example of how GUI can supplement the power of command line and make development easier for all.

So, what will happen when Vue is combined with static sites?

Awesome Gridsome - that’s what.

Gridsome describes itself as a Vue-powered site generator. Use Vue to design your site on top of Gridsome framework, and write your content in markdown, and generate complete HTML pages for your content that is complete in all respects.

The awesomeness includes -

• Use the ever-developing theme framework of Gridsome to quickly incorporate design elements
• Connect to other data sources like Wordpress, Contentful or any other headless CMS. The content is pulled in at the time of site generation (and you could use GraphQL!)
• Your sites appear to be faster - navigation is similar to a SPA
• Once generated, host your sites anywhere - they are just static files. You can leverage the speed of GitHub pages, or use GitLab, host on Netlify for free, or just use a CDN. Anything’s possible.
• Your sites will also work offline - thanks to the built-in PWA features

I spent some quality time evaluating Gridsome for this very blog, but postponed the decision due to ’logistical’ reasons (and because I am a bit lazy). Typically though, you can use Netlify to host your sites, have your content on GitHub, and forget about everything else. Netlify will build your sites and host for free.

Alternatives

Static sites in Javascript

There is no beating the fact that Gatsby is the most popular static site generator in the Javascript world - by a huge margin. The starter sites/themes, community help and plugins are really good.

However, when it comes to Vue, the options come down to Gridsome and Vuepress. Vuepress can be used for general purpose websites and blogs, but that is not its official purpose. Vuepress serves documentation really well. Being the official product, Vuepress may receive more love for generic sites, but that is far away in the future.

Nuxt and Next can do many more things than just generate static sites, but those are a couple of powerful options if you want to use them anyway. Sapper (Svelte ++ ) is also in this territory.

While I do acknowledge 11ty, Hexo et. al. - the more modern frameworks like Gridsome are a class apart IMO.

Other SSGs

Hugo is my favourite SSG at this time - it is dead simple, Go template language is fairly easy to understand, and has quite a few themes that you can get started with.

Jekyll is ancient but active. I would advise against Jekyll unless you are comfortable with Ruby. Don’t get me wrong - you can use Jekyll and its various themes (even customize them using the templating features), but sooner or later you would want to do something that is not possible within the templates themselves. The advantage with Jekyll is the ability to create Jekyll sites on GitHub and GitHub pages can compile pages without any additional build setup.

For a full list of other SSGs, go over to https://www.staticgen.com/.

Things like how I should be using a certain function the right way.

This is where web applications like https://jscomplete.com/playground help. But it is not a pleasant experience to have blocks of incomplete code lying around in jscomplete, and keep executing few other parts of the program.

I use the following tools to quickly know how to write a piece of functionality, or quickly test parts of code/components.

Use Nodemon

Nodemon automatically restarts node server and enable us to test code changes without the need to restart node manually. I use nodemon to test individual javascript files as well.

Install nodemon globally - npm i -g nodemon.

Start testing:

1. Create hello.js
2. Open terminal within VS Code. Type nodemon hello.js
3. nodemon will start printing any output statements. Do changes, save and boom - you have the output

The only inconvenience is the need for console statements - but I have actually gone console blind.

QuokkaJS

Quokka JS evaluates your Javascript in real-time and shows the results. Quokka has a VSCode plugin and can play well with Typescript or Javascript files.

Install Quokka plugin and start typing away for real-time evaluation.

Now, I can have a whole folder of stupid code blocks just because I can.

1. Prettier on Save: Quicker format

Install prettier. Enable ‘Format on Save’ in Settings’. Rock and roll.

I have never seen any tool save so much of my time.

2. Ctrl + D: Select Word, repeat selection and edit in one go

Ctrl + D (repeat to select multiple instances). Multiple edits in one-go if you have selected multiple instances.

You could also do a Ctrl + F2 to select all instances of any word (not case sensitive).

3. Alt + Shift + Click + Drag: Select column of content rather than whole lines.

Hold Alt + Shift and drag to select a column of content. Multiple edits possible.

Select a portion of your screen to select a column of content without selecting whole lines.

4. Ctrl + Shift + Alt + Direction arrows: Multi-select

Select multiple lines of text that can be edited in one go.

You can also press and hold Alt and click away to achieve the same effect (+ click anywhere to multi-select adhoc words without using direction keys)

5. Ctrl + E: Quickly open files in same project

Projects have confusing structure. Just open the project folder in VSCode, and hit Ctrl + E or Ctrl + P to quickly open files. For best results, start typing in the file name in the quick open menu.

6. Emmet + Balance Outward: Select entire code block

One of the powerful features of Vim is to select blocks of code with a single shortcut key. You can emulate the same within VSCode using Emmet - Balance Outward.

Map this function to a shortcut key if you use this sort of thing often. Btw, I am using Ctrl + Shift + P to open the command menu prompt.

I used Vim on and off - but never as a fully-featured editor. For all its never-gets-old capabilities and the power of Vim scripts, I could never successfully scale the initial curve to fully appreciate its greatness. So my reasoning was to use Vim but stick to VSCode in the meantime so that I don’t lose all its features in one go - that is a system shock.

I focused initially on the most popular extension - VSCodeVim.

VSCodeVim is a really good extension that brings the power of Vim to my favourite editor. All started well - I was able to have never-before-had power of navigation using Vim. Within a day or two, however, there were issues -

• Vim takes over shortcuts in VS Code that I really like (e.g. Ctrl + D to iteratively select strings, or even Ctrl + F that has been deeply ingrained in my muscle memory). While there are comparable options within Vim, they were not at the same level as VS Code :)
• Unfriendly copy/paste across documents

I was really caught in a quagmire -

• continue using Vim and be a cool guy,
• focus on short-term productivity (Vim has a learning/re-learning curve). Rely on VS Code to deliver more usability improvements that negate the need to adopt Vim

I found other souls had been in a similar situation and applied much better solutions than what I could conjure.

The result - I am now using a far-less popular, but an interesting plugin - Simple Vim.

Simple Vim allows me to -

• Use VIM within VS Code (albeit in an opinionated way)
• Quickly go back to VS Code way of doing things by going into ’edit’ mode (Esc + I is all you need)

I found this approach much better in terms of going back to VS Code defaults, but gradually getting accustomed to more of Vim tools while doing real-world programs.

Nature of the web app -

• Enable users to create and track specialised electronic devices
• Track customers who buy these specialised devices and deploy them at their site
• Track usage of deployed devices
• Track issues and manage resolution process
• Enable users to create charts out of device usage

The app is hybrid of technologies but the web app was mainly developed using Javascript in the backend. Vue and Vuetify turned out to be highly productive choices for the frontend. Component based development, readily available UI components, and data tables turned out to be life savers.

I received the requirement of a mobile app for Android devices when I was about to complete this application. The requirement carried a separate budget for a ‘fresh’ use case.

After a day or two of exploring available options, I advised my client not to go the conservative mobile app route - all of the front-end validations were to be repeated for the new mobile UI. Along with the upfront costs came the additional burden of maintaining two code-bases.

My first thought and course of action was to use a PWA directly on Vue. Vuetify follows material design principles and already provides a mobile-friendly UI. I added PWA and with some tweaking could get it to work seamlessly as a stand-alone app. However, it was not quite the experience the non-technical users were comfortable with.

I had two choices to create a mobile app at that point in time -

1. Use Android Studio to package this PWA as an app
2. Use Cordova on top of Vue

I chose the later due to ease of use and the ability to avoid (directly) using Android Studio altogether. The following also helped drive those decisions -

• Users do similar tasks on browser and mobile devices
• No requirements to use mobile device functions like Bluetooth, location-aware features, calling features etc.
• The lack of clear requirements on a ‘superior’ user experience on mobile devices; absolutely no requirements for ‘mobile’ way of doing things and ‘animations’

All I had to do to include Cordova was -

npm install -g cordova
vue add cordova

I can now run the mobile app in development mode by -

npm run cordova-serve-android

My workflow for subsequent development includes two build steps when relevant -

1. Web app for all devices. This is automatically deployed to the server when committed to master branch.

   npm run build
   

2. Build Android app using Cordova. The APK is automatically signed during build and manually uploaded as a different version in Play store.

   npm run cordova-build-android
   

I had to do additional steps to reduce bundle size for initial paint -

1. eCharts library that I used was quite heavy. I just changed all eChart imports to include specific chart types
2. Document merge functions were less than ideal, but our users had to live with them for now
3. Use specific components rather than whole imports for custom components (tree shake)
4. Replace features like image drag & drop and file selection features with more mobile-friendly features (e.g. click and select)
5. Optimized static images for heavily used screens

Some of the above tasks had to be done for web apps anyway. But I could afford to ignore them in a desktop scenario.

I did not quite use any of the advanced functions that Cordova or PWA could offer - I just rely on the default service workers to get everything done. The end product has been highly appreciated by stakeholders -

• No/ minimal additional costs
• Similar user experience on web and mobile app (this was directly related to how users are trained)
• Easier and cheaper maintenance

Cordova is not the best choice if a superior user experience with the best performance is high on your list of priorities. But it works absolutely fine for simple-medium complexity app that is focused high on data-driven behaviour and acceptable usability on all devices.

1. Type slowly
2. Type (a lot of) mistakes
3. Use spaces and tabs to format. Get confused about loops and add ad-hoc spaces and tabs
4. Curse my typing skills and the soul who invented spaces and tabs

While formatting code was also becoming an interim ’thought provoker’, it was simply too much typing.

Enter prettier.

Although my typing is only half as bad, I now have far less stuff to worry about.

1. Type in any way I want - yes, even type entire program in one line if I am feeling particularly stupid
2. Save file

• Prettier formats code to add spaces and tabs
• Prettier adds stuff that I am lazy to type - (e.g. missing semicolons
• Changes stuff that I don’t do myself - e.g. change single quotes to double quotes
• If the formatting does not happen correctly, I look for coding errors (typically a missing/misplaced bracket)

The savings from all the avoided actions (despite my poor typing) amounts to 1.618 hours a day. That is thousands of hours in my life that can be invested in coding ‘hello worlds’ in new programming languages.

Once you start using Prettier ** you will never go back **. Do that first if you have not done that and come back here.

Following are the ‘Prettier’ settings that I find useful in VS Code (Ctrl + Shift + P > Type ‘prettier’ to search for related settings).

• Editor: Format On Save => True Prettier is not that useful if you don’t see it in action - at.every.save.

• Prettier: Eslint Integration => True Get ESLint to do its thing. Fall back to prettier if there are no ESLint rules. This is mondo useful in languages that are packed with community ESLint rules. I cannot quite hold everyone accountable for the superior practices that I follow. It is far easier to deploy ESLint (or any supported linting) to the development/deployment workflow to make sure every coder follows the same standards. The above flag takes care of any conflicts by using ESLint first and falling back to Prettier if there are no rules.

• Prettier: Jsx Bracket Same Line => True JSX has a lot of ‘>’ and it is annoying if that is moved to the next line. Keep JSX clean.

• Prettier: Semi => True Use semicolons. Don’t believe the evil people who say otherwise.

• Prettier: Tslint Integration => True Similar to the first item on ESLint described earlier, but for TypeScript. Get TSLint to format, and kick into action for stuff that don’t have any TSLint rules.

PS: Yep - the 1.618 is a random number that represents Golden ratio. Did you really think I can ever be so focused on improvements?