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.

Nginx and Redirection

Nginx configuration is simple but powerful. All we need is a couple of lines to setup our server.

Add the below lines to the Nginx configuration files (e.g. in /etc/nginx/sites-enabled/domain.com.conf in Ubuntu).

server {
    listen        80;
    server_name   domain.com;
}

Start the Nginx server, and lo and behold - our web server is ready to serve magic at port 80. Go to domain.com in browser and see your beautiful app.

We can add redirection in the mix with a single line.

server {
    listen        80;
    server_name   domain.com;
    return        301 http://other_domain.com$request_uri;
}

This is a simple 301 redirection that informs requester (i.e., browser) that the web page at domain.com is redirected to other_domain.com permanently. Any suffix included with the original domain (e.g. https://domain.com/awesome-page/1) is sent to the redirected domain by using $request_uri. You can redirect any page to any other page within or outside the domain. We have previously seen this applied to manage 404 error in Vue in Nginx.

Replace 301 in the return statement to 302, and you have a temporary redirect. I don’t quite find a use case for temporary redirections, and can’t claim to know how Google or other search engines respond to them, but.. they exist.

Alternatively, you could use a rewrite -

server {
    listen      80;

    location / {
      rewrite     ^(.*)   https://other_domain.com permanent;
    }
}

This statement indicates that all requests to the domain that server is listening to have to be redirected to some other domain.

rewrite allows us to use regex and handle complex scenarios for redirection within or outside the domain.

For example -

server {
    # ...
    rewrite ^(/download/.*).?.*$ files.domain.com/downloads/$2;

    #...
}

I don’t quite use Nginx to its full capacity and have rather naive considerations on when to use rewrite vs redirect-

• Simple use cases can be addressed by redirect
• rewrite handles only 301 and 302 redirects (more on this in a bit)
• Redirects based on conditions (e.g. */download/* should be directed to files.domain.com URL) are possible only using rewrite

While complex conditions are candidates for rewrite, I typically manage “all things” in the SPA or using server routes. But, there’s more.

Nginx Redirection in SPAs

Single page applications handle all routing on the client (well, typically). You can have something like a vue-router installed, throw in the routes in a route.js file and the application happily does all the redirections without help from server.

All we need from server is -

server {
    server_name domain.com;
    listen 80;
    root /usr/www/domain;
    index index.html index.htm;

    location / {
            try_files $uri $uri/ /index.html;
    }
    location /api/ {
            proxy_pass http://localhost:5000;
            proxy_set_header Host $host;
    }
}

In Ubuntu -

• you can enter this configuration in /etc/nginx/sites-available/domain.com.conf and
• setup a link in /etc/nginx/sites-enabled/domain.com.conf

We are achieving quite a bit with these few lines -

• use yet another redirection directive called try_files to redirect any request (exceptions - see below) to $uri to a corresponding file with the same name accessible on web server. Point the request to /index.html if there is no file at $uri. The request is then handled by the SPA router
• redirect any requests with domain.com/api/ to another port on the server. This sets up reverse proxy and opens up the backend server (at port 5000) to the world through our domain

See this rewrite rules post for a more detailed comparison of what each of those directives can do.

The above configuration sets up a full-fledged web server for your SPA, but there’s one thing missing. That is for http to https redirection.. which is as easily done.

server {
    server_name domain.com;
    listen 80;
    return 301 https://$host$request_uri;
}

server {
    server_name domain.com;
    listen 443 ssl;
    root /usr/www/domain;
    index index.html index.htm;

    location / {
            try_files $uri $uri/ /index.html;
    }
    location /api/ {
            proxy_pass http://localhost:5000;
            proxy_set_header Host $host;
    }
}

This is all you need to setup a simple web server serving your SPA with Nginx.

What is Caddy?

Caddy is a web server much like Nginx. It calls itself “a new kind of extensible platform for server apps”. Features include -

1. Easy configuration (super readable config. files - we will get to this in a bit)
2. Configuration is exposed as APIs (JSON files can be used to create/change configuration)
3. An extensible plugin system
4. Automatic https using Let’s Encrypt

Caddy does all this with a single executable, and a single configuration file.

Caddy version 2 caused some ground-breaking changes from v1. Since I did not quite use v1, can’t really compare how they fare. Caddy is free to use and is licensed under Apache 2.0 open source license.

Why use Caddy?

The most important factor for me - Caddy enables quick setup of a server with multiple apps without spending hours on configuration.

As a non sysadmin developer, I approach server configuration with some skepticism. I cannot quite get away from it due to cheaper costs, but I would rather spend time creating something else rather than fiddling with server configuration.

Nginx has been a great companion. The configuration files are just ok and I don’t mind them as long as they are setup only once. However, introducing multiple apps, APIs and static file hosting on same server confuses me and requires quite a bit of trial & error configuration.

Over years I have tried solving the problem with a few options -

• Use cookie cutter config files with Nginx
• Nginx configuration file generator
• Alternate server options (there are many options but one needs to be careful about a solution that is too niche or has a thin community behind it)
• Self-hosting solutions like Parse that let’s me get away with backend configuration changes

It is with that background that I find Caddy a refreshing change. With minimal configuration, easier changes and acceptable performance, Caddy works great for this use case.

My Typical Use Case

My preferred architecture when using “quick” Vue apps -

1. A node server that serves APIs and database on a 2-4 GB server
2. Front-end hosted on same server. VueJS is my framework of choice
3. Static content on Github, Netlify or similar

Each server typically hosts 1-4 production apps or x test/MVP apps.

The Caddy server should -

1. handle API requests and proxy them to Node server. The requests may be from the frontend application or from external systems
2. handle frontend requests when routing to different pages

Caddy Configuration

While I found Caddy documentation to be great in general, the examples seem to be for a more “in the know” audience. The radical changes from v1 to v2 have made some of the previous content irrelevant.

I typically use Caddyfile to store Caddy configuration, which does not appear to be future-proof but is fully supported and quite easy to use. The structure looks somewhat like this -

example.com {
    root * /usr/www/example
    file_server
}

You can store this file wherever you please, but I use /etc/caddy/Caddyfile.

I can now start Caddy with -

sudo caddy start -config /etc/caddy/Caddyfile

I will switch to configuration using JSON at some point in time with a typical structure looking like this -

{
  "apps": {
    "tls": {
      "certificates": {
        "automate": ["example.com", "another-example.net"]
      }
    }
  }
}

The JSON format is not quite difficult to understand, but more “typing”. I don’t send API requests to configure web servers (thank heavens), and the specific port remains closed in the firewall.

Caddy and Quasar

While I knew Caddy’s configuration was quite simple, I could not get it to play nicely with client-side routing of Vue apps at the beginning.

After some hit & miss, and lot of searching on Google, I have this configuration that simply works.

# Caddyfile
example.com {
    root * /usr/www/example

    route {
        reverse_proxy /api/* localhost:3000
        try_files {path} {path}/ /index.html
        file_server
    }
}

another-example.net {
    root * /usr/www/anotherexample
    file_server
}

This file accomplishes the following -

1. Host site example.com
   • redirect all requests with /api/* to localhost:3000. The node server listens on port 3000, and that port is not open to the Internet
   • redirect any request to / and allow Vue to handle routing. I do this using try_files {path} {path}/ /index.html, which tries locating for a file with the name passed from URL and redirects to it. If no file is found, it directs to index.html
   • the route statement ensures that Caddy follows the given order while handling URLs. APIs with /api/ are served by Node server and other URLs are served by client-side routing
2. Host site another-example.net
   • serve files in /usr/www/anotherexample

All I now need to is point the domain name to the IP address of this server and both example.com and another-example.net just work!

When not to use Caddy?

Caddy works great for all my use cases. I don’t quite build Twitter or Facebook level apps - so I should be ok I guess.

At the same time, I will not quite migrate everything to Caddy at this time. If you have configured Nginx a couple of times, you know that all it takes is some “lazy copy/paste” to get the whole thing working. Simpler needs = simple tasks = no need to take drastic action to change status quo.

You may also not want to use Caddy if you -

• manage quite an intensive server that handles high traffic volumes. Nginx can manage twice the processing
• want to consume as less memory as possible. Caddy is light-weight but not as much as Nginx, and can consume more than double the memory

See -

• benchmarks for Caddy2 vs Nginx on Centminmod forums.

Finis

I personally believe in a great future for Caddy. It has a great community, good documentation and is a delight to use.

Start using Caddy for your dev/test environments and see the difference. Migrating production environments may be a long drawn out decision based on your intended use.

I am assuming that you already have installed Windows v2004 through the normal Windows update channel, or through the update assistant.

Once you are on Windows10 2004, here’s how you can setup a cool WSL2 development environment.

Installation

WSL2

If you don’t have WSL yet, install it from Start > Turn Windows Features On or Off. Check Windows Subsystem for Linux. This should install WSL2. If you had WSL1 in previous Windows versions, the option will remain checked and you don’t have to do anything else.

Install Debian or Ubuntu from Microsoft Store.

If Debian/Ubuntu/other flavours were already installed on your computer (in WSL1), you would have to upgrade the kernel. Do that by following instructions on this page. Future upgrades may not need this manual step.

Verify whether you are running the right version of the kernel -

wsl -l -v

  NAME      STATE           VERSION
* Debian    Running         2

Version 1 will imply that you are still running WSL1, else you should be all set with WSL2.

Terminal

Install Windows Terminal from Microsoft Store if you don’t already have it. While this is optional, the app makes for a delightful terminal experience.

Of course, you can always continue to use Cmder, or any other emulator.

Once Terminal is installed, open Terminal > Click on the dropdown in Toolbar > Open Settings. You add instructions to open command prompt, Powershell or WSL in the settings file. You can also change themes, colors or fonts for Terminal window.

Add an entry for Debian under Profiles-

{
    "acrylicOpacity": 0.5,
    "closeOnExit": true,
    "colorScheme": "One Quarter Dark",
    "commandline": "wsl.exe -d Debian",
    "cursorColor": "#FFFFFF",
    "cursorShape": "bar",
    "fontFace": "Consolas",
    "fontSize": 16,
    "guid": "{58ad8b0c-3ef8-5f4d-bc6f-13e4c00f2530}",
    "historySize": 9001,
    "icon": "ms-appx:///ProfileIcons/{9acb9455-ca41-5af7-950f-6bca1bc9722f}.png",
    "name": "Debian",
    "padding": "0, 0, 0, 0",
    "snapOnInput": true,
    "useAcrylic": false
},

Note the change in colorScheme - you may use any color scheme that is already part of the settings.

The settings file I use is at this Gist.

You are now all set to access WSL2 from your terminal. Just click on the dropdown and select Debian profile to open WSL2.

Initial Setup

I love to work with Fish shell since it has beautiful defaults that includes useful functions like auto complete, and an easy-to-use customiser (among others).

Install Fish.

echo 'deb http://download.opensuse.org/repositories/shells:/fish:/release:/3/Debian_10/ /' | sudo tee /etc/apt/sources.list.d/shells:fish:release:3.list
sudo wget -nv https://download.opensuse.org/repositories/shells:fish:release:3/Debian_10/Release.key -O "/etc/apt/trusted.gpg.d/shells:fish:release:3.asc"


apt-get update
apt-get install fish

See this page for more detailed instructions.

Optional: Change root password

If you have setup a non-root user (which you normally do during install) and already logged in as that user, or did not setup root password yet, you an do that now.

First, login to Windows command prompt and set default WSL user.

debian config --default-user root

.. or in case of Ubuntu..

ubuntu.exe config --default-user root

Open a new terminal to login as root. Change password.

passwd

Reset default user to your user id.

debian config --default-user <your_userid>

Exit from current terminal that is logged in as root and open a new window to just be yourself.

Configure fish shell

Change default shell to fish.

chsh -s `which fish`

Install oh my fish to make your shell beautiful.

curl -L https://get.oh-my.fish | fish

Now you can install themes or add new functions to fish.

omf list # list themes & plugins installed
omf theme # list themes
omf install clearance # install clearance theme
omf theme default # change back to default theme

Setup Your Favourite Programs

NVM / Node

We will not install Node directly, but use NVM.

First install NVM..

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

You have to do an additional step for Fish shell since it not directly supported.

omf install bass
vi ~/.config/fish/functions/nvm.fish

Add the following content to file -

function nvm
    bass source ~/.nvm/nvm.sh --no-use ';' nvm $argv
end

Finally, install node.

nvm install 14.3

Set default node version in nvm to always use the latest version.

nvm alias default node

Node is now ready to do great things!

VS Code

Install Remote WSL extension.

Hit Ctrl + Shift + p > enter New Window using Distro. Select the Linux distro that you are setting up.

VSCode will automatically download and configure server to work within the distro, and open a new window specific to the distro.

You can now use VSCode to work with files within the Linux folders. You will see the default Fish shell when you open a new terminal within VSCode.

Docker

Docker runs 8-10x faster in WSL2 - there is simply no reason to postpone using Docker in Windows anymore :)

Install Docker for Desktop.

New installations do not require any additional steps. If you had an older version, follow instructions here to set everything up.

Code Away

Start working your magic in Linux in Windows!

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

SSLs are de-facto standards for web applications of today. How can you enable SSL for your own web app, preferably for free?

The Solution

I am no Unix Guru and for the life of me, cannot enable domains, mails, etc. using just the command line. Well, I could some monkey typing to get everything up and running. But that is a lot of typing, Googling and going back and forth. And, as previously mentioned, I am still not a guy comfortable using Ansible and such.

So, as one of the first steps I do while creating new VPS is to enable a control panel. A control panel provides a one-step, integrated shop for all the basic things you need.

VestaCP has been one of my favourite control panels for a few reasons.

1. It gets work done - easily create domains/sub-domains, secure your VPS, create and manage emails, and create and manage DBs.
2. Fast and light weight. No fluff, just the things you need
3. VestaCP is free to use. You should support the developer with a Pro plan if you have the means!

You are in good hands once you get used to the quirky navigation after setting up VestaCP. (Except for the functionalities that are simply not offered as part of the free plan, that is).

And, one of those simple steps that you do is to enable SSL for your web app.

1. Go to VestaCP control panel > click on Web

2. Hover over your domain and click on ‘Edit’

3. Click on the checkbox!

That is it!

SSL not working? Or, has the Let’s Encrypt certification renewal fail? Just turn off SSL and turn it back on :)

And yes, if you have not realized it by now - this is a joke. A joke as a result of frustrating rebuild because there was a screw-up when trying to solve the certification renewal issue. But that’s a discussion for another day!

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.

The Problem

I don’t know about you - but emails are the last thing that I want to design. I end up sending plain text emails for most of my apps, and that works just fine.

However, a few projects have more complex requirements. In one such case, I had to send bills as emails and allow a designer (if not a client power-user) to “code in” the design for the bills.

My first thought was to use JSReport and send PDFs in emails instead of directly including bills in the email. This should have simplified the design process for the email and keep it aligned to previously applied best practice.

That was not to be.

• We had to keep emails light
• Emails needed to be engaging and direct. 40-60% of the target audience was not in the habit of using emails
• Any design that would require storage and linking to files was not acceptable

A few curious requirements and the current tech stack presented a simple, but effective solution.

The Solution

I had deployed the server stack on AdonisJS previously. This meant I could use AdonisJS views to merge the template with email design with the actual data at runtime.

But, I still had to provide a good way to design those emails. Not exactly MailChimp and friends, but something decent enough for the first run.

Email design is not exactly caught up with the times -

1. Emails need inline CSS
2. Using HTML tables to align can take an ugly turn anytime
3. Responsive emails are a thing and not a thing I necessarily like

It was then, and only then, did I come across bootstrap-email.

Bootstrap Email, as it’s name suggests, is a way to design emails using Bootstrap. The best thing - you don’t worry about all the email design constraints. The creator/maintainers of Bootstrap Email have done the heavy lifting.

You now design emails (more or less) like a web page to create a responsive email. As simple as that.

• Emails are responsive and device-agnostic. Emails look like “real emails” in a browser, on a mobile device, or using apps like Outlook
• Create emails using simple bootstrap layouting. No special techniques needed
• Simple to design and consistent. No more dealing directly with HTML tables to design emails

The creators have kindly made the library open source and provided all this for free. Bootstrap Email is well documented and seems to have adequate maintenance over the two years.

Check out Bootstrap Email on GitHub, or see the documentation Play around with Bootstrap Email using this online editor

No.. Not another editor

HTML editors are aplenty.

Anyone and everyone can whip up a quick site using TinyMCE, CKEditor and the like, provide a preview and call it a day.

A bit more effort there and we can have a site-of-the-month editor :)

Well, recently I had been creating a few HTML emails. I needed a quick, reliable way to preview whatever HTML content and move on with my work.

It was not to be easy.

My first choice was VSCode, but that workflow was not straight-forward for quick turn around. I could have used preview better, but there were a few things that could be faster. For e.g. -

1. Changing text to bold, italic etc.
2. Changing fonts or font size
3. Including tables
4. Finally, sharing work and getting some quick feedback (yes, I do use GitHub and Gist)

Oh. Do we need another editor?

Not really.

I am sure we could use the existing development toolset to establish a better flow (with the same time taken for this post).

However, I was anxious about my current state of work at the time and wanted a really quick and dirty solution in my workflow.

Enter HTMLPen.

One can use HTMLPen (which is in beta, btw) to -

• write HTML, CSS and see preview of the final result
• use a WYSIWYG editor to include tables, media or change fonts
• convert images to Base64
• and finally, share projects quickly with others

I love what we could do on the Internet today - with zero cost or investment.

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.

Here are three open source and free URL shorteners that you can use today!

Host these URL shortening services on your own servers - you can set them up almost instantaneously, shorten URLs prefixed with your domain, keep track of link clicks, and also collect analytics about where your link clicks are coming from.

Shlink

Shlink appears to be the more modern solution of the lot.

It has docker support, beautiful looking UI on ReactJS, and plays well with both Nginx and Apache. You can use REST APIs and even a CLI tool to create short URLs.

YOURLS

YOURLS has been there forever. It is a PHP based solution, is quite easy to setup and I have used that before.

YOURLS is also available in CPANEL, and can be setup in your shared hosting with all but a couple of clicks. It just works and keeps working efficiently.

Polr

[Polr]https://polrproject.org/ is another solution based on PHP.

It supports creating URLs through API requests and is easy to use.

The Trigger

What triggered me to write this gem of an article (yes, sarcasm) was seeing an instance of this age-old problem was being analysed.

Use AWS or Azure for 301/302 redirects? Quickly create a beautiful solution in your favourite programming language that does not buckle under pressure to show off beautiful charts? Shave-off milliseconds while doing URL redirection by writing everything in Assembly?

Let’s say I am a tech guy in a company and someone asks whether I can create this app in a day. This is my thought process -

1. Search internet to check on what other people are doing to solve the same (or a similar) problem
2. Search for the easiest solution that’s not a pain to implement or maintain. Also check whether I can use existing infrastructure and keep costs reasonable
3. Get approvals for the stack/cost. Work with other teams to enable supporting infrastructure and develop/deploy solution

To think that I would have to develop this solution ground-up will be the last thing to cross my mind.

This world is beautiful and exciting, and also thankfully - not everyone thinks like me. And probably, I am doing way-too-boring ‘stuff’ to think better and be on the ‘cutting edge’.

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.

We have seen a few VSCode shortcuts earlier, but none ever said -

I had enough of them shortcuts.

So, here goes.

1. Search text in all files

Search text in within all files in workspace using ..

Ctrl + Shift + F

I used Explorer and Everything before incorporating this extension in my workflow. The biggest advantage is having to to search within the workspace folder - have all other files open in context of current work.

Of course, it helps immensely that you can also replace the searched text with something else. You can replace text by revealing the hidden field as depicted in the picture, or just do a Ctrl + Shift + H to directly open find/replace dialog.

2. Copy path of current file

Copy file path of the file currently being edited (while in editor).

Shift + Alt + C

Sometimes (and specifically on one of my machines) this does not work. And, I could not figure out why.

There are two quick ways to work-around -

• Use alternative.

  Ctrl + K P
  

  Do not press P while still holding Ctrl.
• Use command palette

  Ctrl + Shift + P > Start typing "copy path"
  

• Go through file explorer

  Ctrl + Shift + E ... and then..
  Shift + Alt + C
  

Or, you could right click on tab of the file and copy the file path.

3. Reopen closed editor

I become anxious when too many editors are open - that is a direct indication of “not in control” mode. I tend to close editors quickly recklessly and the extension to reopen closed editor is quite handy.

Ctrl + Shift + T

4. Reveal current file in Explorer

There are just too many times I need to explore the folder of currently edited file. Use this shortcut to the parent folder in Explorer.

Ctrl + K R

5. Close all open files

For all those times when you are frustrated and just want to close everything..

Ctrl + K W

You can always open tabs one by one by hitting Ctrl + Shift + T :). Handy when you have to show yourself how busy you are and make some noise with the keyboard.

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.

tldr;

• Use Digital Ocean*
• Use Hetzner Cloud

Problem

I build applications that need a backend. I need that backend to be inexpensive but reliable.

Solutions

Typically, I have deployed server-side solutions on Node and Laravel, and using MySQL and Postgres. But the work spans to static sites, Wordpress, and ASP.NET.

The initial part of starting up a business and establishing credentials through fast and reliable applications was difficult. But, what made it more difficult than the bugs I introduced on my own, was the server infrastructure.

I have been partial to NodeJS, and my natural tendency is to use Virtual Private Servers (VPS). I do not quite need dedicated hardware since I hardly run applications that deserve that kind of hardware, but I was not able to sustain applications on shared hosting.

The good thing - it has never been as good as it is today.

I continue to be amazed at free (GitHub, Netlify, GitLab - thank you), or inexpensive infrastructure solutions. Those solutions have made possible for me to run a highly nimble shop that focuses on client-specific solutions at highly reasonable costs.

But, I have been seriously frustrated by my initial decisions. I have paid for products and services that have gone south, crippling my sense of self-worth and that of humanity in general.

So, a summary of what to do follows.

Digital Ocean

Choose Digital Ocean* for your VPS.

Digital Ocean provides the max leverage when it comes to providing reliable, inexpensive infrastructure. Starting at $5, Digital Ocean has enabled me to stand up servers within no time - be it development, production or for dedicated demos.

More over, Digital Ocean has been a big boon since they have excellent connectivity and servers available in multiple regions.

The availability of templates have made it much easier to setup servers with pre-installed software. This is particularly useful for development and initial testing, and also because I suck at Docker, Ansible, Terraform et. al. - I am lazy enough to learn them thoroughly and stop wasting time setting up environments.

Pros -

• Excellent infrastructure
• Minimal ping times at multiple locations
• Reasonable price
• Templates!

Cons -

• DIY. Databases can go down, Web servers can get messed up, external attacks can be a big problem
• “Cost conscious” customers may still find that expensive for smaller solutions (when you cannot share servers with others)

Use Hetzner Cloud

I did not quite know Hetzner Cloud for a long, long time. I had favoured cheap-ass VPS solutions to burn fingers and a bit of my brain more than once - and came to know about them by chance.

But now, every other of my application goes to Hetzner Cloud. Starting at ~$3, Hetzner Cloud is a great VPS solution that is cheap, and reliable.

See multiple tools on Hetzner platform that can make your life easier.

Pros -

• Reliable
• Inexpensive
• Support for Terraform & Ansible (not an active user)

Cons -

• Extremely limited data centre locations - not a problem if you are targeting Europe
• Be aware that very cheap costs = cheaper hardware. Hetzner Cloud is good, but there is no dark magic involved to make anything cheaper than what it is

I understand that Contabo is a comparable solution to Hetzner Cloud, but I have not used that as much to comment.

Alternatives

I had seriously considered switching back to Laravel just for the ease of deployment and the ability to use cheaper hardware.

I am still going back and forth on that in darker corners of my mind, but Node (and frameworks like NestJS, AdonisJS, PostGraphile etc.) has this ability to ensnare you and not allowing you to go anywhere else.

Laravel

If you are using Laravel and trying to bring up gently-used applications, consider shared hosting. They are easier to manage (see VPS considerations above) and someone else does all the work required to maintain servers. You can access your infrastructure through CPANEL, create databases and setup your application with few clicks, and in general, do as less work as possible.

But, in return, you also lose flexibility and power. You may not get as much RAM / CPU that you need, your hardware may fail you since someone else on the same infrastructure decides to establish a new record in expanding known fraction numbers of Pi.

Shared hosting has been a hit or miss for me. From my own experience and that of other kind souls sharing valuable information on Internet, I believe one of the following can be a good choice.

• A2 hosting*
• Site Ground
• Crocweb

Wordpress

If you are using Wordpress (in whole[really?], or as back-end), I still think shared hosting is a better option unless you have a decent sized application.

Static sites

Choose GitHub or Netlify for hosting static sites. Move up the tiers as you build traffic or size of your application - it does not make sense for anything else.

This blog is a static site and is hosted on Netlify.

Conclusion

Use Node on Digital Ocean

:)

* Affiliate links that earn me a few bucks if you choose to buy by clicking on the links. That has in no way altered what how I have written / discussed about the said products or services.

You love it when there are Powershell, Cmder and friends. And, you hate it when you cannot install simple programs quickly.

Well, hate may be a strong word - but you get the gist.

I have tried chocolatey and have a like-dislike relationship with that program. I have also experimented with VMs and anything that exposes more of the command line. None of the programs stuck in my day-to-day flow. For a few projects, I dedicatedly use WSL - but could not quite switch over everywhere.

In the meantime, I now use Scoop. Scoop is different.

• Install Scoop
• Install developer apps/configurations (e.g. curl)
• Use apps

I faced installation issues to begin with - but none that could stand the test of a good Google search.

Here’s what you do -

1. Open Powershell in Windows 10. Execute the following command to bypass the execution policy for the session.

   Set-ExecutionPolicy Bypass -Scope Process

2. Set directory for Scoop and install it.

   $env:SCOOP='e:\scoop'
       [environment]::setEnvironmentVariable('SCOOP',$env:SCOOP,'User')
   iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

3. Install apps using scoop install curl or install apps globally. You can set directory for global apps using Powershell admin

   $env:SCOOP_GLOBAL='c:\apps'
       [environment]::setEnvironmentVariable('SCOOP_GLOBAL',$env:SCOOP_GLOBAL,'Machine')
   scoop install -g curl

Now, just hit commands in Powershell to install local/global apps.

I am sick of tired of Google results returning “free” sites that collect all information including my dog’s name and the declare that I need to pay $99 to get darn icon with the darn size.

I need to be able to get anything for free. So, why should I pay to generate icons that would take an hour to resize in a free program like Paint.NET or IrfanView? After all, I need to feed this ego that I create value and people totally should pay me for the value delivered through the free for all programs.

Well, that’s that. But featured today is this super awesome website called “favic-o-matic”.

Favicomatic is so awesome that I started this whole new series to feature the most awesome websites out there (including the one here - I do an bloody awesome job if I may say so myself). And, I decided to crown Favicomatic since I am sure I will not meet such an web for the rest of this month.

What is it?

If you are creating a mobile app, a desktop app, or a progressive web application, you would surely need icons. You know - those thingies on which you expect your users to click.

It turns out that different companies want you to use different sizes of icons so that you can look good on them - because they can. You could potentially start resizing them to fit every whimsical need, but who has the time when there are so many video games lying around and so much stuff to get that.

Enter favomatic.

How to work with it?

• Feed in your icon image
• Get 19 different formats of your image that are correctly sized for different uses. You can use all 19 in one go in a PWA :)

The files are zipped and accompanied by a text file with the include statements.

Why so valuable?

• Free to use (do donate)
• Consistent - always available
• Fast

It is just what every doctor would order if the doctor was a web app engineer.

I have tried to automate some of the most common things that I do on a regular basis. There are a bunch of tools that I use to do just that - these save keystrokes (AutoHotkey), automate regular tasks (e.g. take a screenshot, optimize size and upload to imgur), or connect my one useless social media account to the other (IFTTT).

• AutoHotkey
• IFTTT
• ShareX

But for all my life, I could never think that I would need a clipboard editor. Sure, an editor can provide powerful functions to remember the last one million strings I had copied, but what’s the point?

I will just copy the thing again if at all I lose it. How can I lose something that I copied a second ago anyway?

Without answering all those smart questions, I installed me-self Ditto. Ditto promises to hold the text or image content you copied a while back. That’s all there is to it - no more.

And, it turned out that’s what was missing in my life.

Searching for and re-copying content that I had copied 25 seconds back can shave whole minutes in your super productive day.

I can now -

• Press Ctrl + Shift + ` to access clipboard
• Do a Ctrl + 1 to Ctrl + 0 to quickly recopy the last 10 strings / images
• Start typing in after pressing the shortcut key to quickly filter whatever stuff you had copied to clipboard
• Hit enter or click to copy the content again

Ditto also has this feature to sync between computers over network (which I don’t use). Since the application maintains your clipboard entries in a SQLite DB, you can also put the DB on a shared drive if you want to live dangerously in your LAN.

Ditto is free and open source (GPLv3 if you care for such a thing), very light on resources, and very very quick to use. Try it by all means, but be warned - you will get addicted.

Download Ditto.

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.

No frontend beginner developer ever said - “I want to play around with servers to understand their internals byheart before I venture forth with my beautiful Vue application”.

If you are building on REST APIs, you have public services like JSONPlaceholder. These services provide quick access to much loved sample APIs for to-do, posts, users etc.

There are not a lot of choices if you are building on GraphQL. There have been efforts towards providing such an API in the past but none last long. The solution - create them locally.

Local GraphQL can be cumbersome.

When you start, one may be left wondering on Express + GraphQL + a bit of configuration + write more than few lines of code to get started to serve any new API. There are tools like json-graphql-server that claim to speed up this process. However, they are not kept up to date, and seemingly are not meant for Windows(?).

So, I did the next logical thing that was easy and quick. Create an environment of your own using PostgreSQL and PostGraphile.

Initial Setup

1. Download and install PostgreSQL.
   Alternatively use Laragon with Postgres - it is a really good control centre for local development.

2. Open pgAdmin - the DB admin application for Postgres. Use an existing database or create a new one. Right click on Schema > Tables and click on ‘New Table’. I will assume that you will use a database called ’test’. Create a table called ’todo’.

3. Create few columns

4. Start your very own GraphQL server. The server uses port 5000 by default, but we will change it to 5050 for the heck of it (also because 5000 is used by a few other front-end apps)

   npx postgraphile -c test --watch -p 5050
   

   

Start playing around

Go to [http://localhost:5050/graphiql]. Copy/paste the GraphQL statements to perform different operations.

Query data

Query for data. Of course you will not find anything at this time.

{
  allTodos {
    nodes {
      id
      title
      done
    }
  }
}

The output will be -

{
  "data": {
    "allTodos": {
      "nodes": []
    }
  }
}

Insert data

Insert ’to-do’ data in your database.

mutation {
  createTodo(input: { todo: { title: "Create GraphQL server", done: true } }) {
    todo {
      id
      title
      done
    }
  }
}

This statement will create a single to-do, query back id, title, & done fields, and display them at the right hand side of the screen.

Output -

{
  "data": {
    "createTodo": {
      "todo": {
        "id": 10,
        "title": "Create GraphQL server",
        "done": true
      }
    }
  }
}

You can repeat the query operation and find that it can display data too!

Configure additional APIs

By now you have a full-fledged server that is serving to-dos. You can add filters, do magic on inserts/updates using functions, and eventually find that the world is the limit.

But, what about additional APIs? Similar to to-dos, you can start creating entities and find them available to your GraphQL without any additional effort. That is the magic of PostGraphile.

Why use this setup for local GraphQL environment?

• Quicker setup. Type in a few commands + configure DB table - and you are done
• Minimal effort to setup new APIs - you are not limited to standard APIs but can go all wild
• You can take this to your production environment too. I have used Postgraphile for projects and it rocks!
• PostGraphile uses your friendly, neighbourhood Javascript. So we are right at home

Comments..?

What do you say about this folks? Super..? Stupid? Somewhere in between? Or, simply “what am I doing on this planet when people like this exist”..?

None of the tools I used have been as easy to use as FileOptimizer. Also: find this handy download link.

FileOptimizer is a free, open-source tool to optimize files. It is in fact a wrapper for a bunch of open source tools that work great individually, but absolutely rock as a collection.

While FileOptimizer site does not look all shiny, I can vouch for it after about ~5 years of usage (as if that matters - go figure).

I primarily use it for JPG and PNG images that are intended for consumption over web. It can do lossy compression of image files individually or in batch.

Ordinarily, I combine FileOptimizer with ShareX - a great, under-appreciated screenshot taking tool. Configure ShareX to allow editing of images after taking a screenshot and later, run FileOptimizer to compress edited images.

Now, just using the default shortcut keys I can take screenshot, manipulate image, and optimize it in one go.

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.