Techformist

Vim in VS Code

📅 Feb 7, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

It has been quite sometime since I used vim or one of its flavours as my main editor for development. Is it time to go back to Vim? I am attracted by Vim’s productive usage of keyboard, but not so much about having to sacrifice VS Code or a few important shortcut keys in VSCode that Vim takes over.

Web Inspector to design static sites

📅 Feb 6, 2019 · 📝 Apr 30, 2020 · ☕ 3 min read

Chrome and Firefox web inspectors are my new best friends in my quest to develop static sites. I never took the time to appreciate the complete power of web inspection - until I actually started changing the design of this very site. I have been redesigning techformist.com website on Hugo. The plan is to migrate from Jekyll and design a simpler site that can easily showcase what I have to offer (ahem.

Web-first Development

📅 Feb 5, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

I have started using Javascript everywhere and loving it. I am building everything targeted at the web world, with secondary experiences for mobile and desktop following the pattern used for web. Javascript, along with Vue, Vuetify and Quasar have changed the way I used to think about applications per se. With the ease of adding mobile (Cordova) and desktop (Electron) features to Vue apps, I have started solely focusing on web-first experience.

Javascript Frameworks - Expert Breakdown

📅 Feb 4, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

tldr; There are experts, and there are experts. Recently I came across evidence for time travel. I am referring to this blog post from 2016 - and outlining the same here in full glory. Popular NodeJS Frameworks Hapi, Meteor, Derby? Those were the days when Javascript was trying its super powers and finding itself on the good side - each and every time.

Use SVG Images Everywhere

📅 Feb 3, 2019 · 📝 Jun 9, 2020 · ☕ 3 min read

Use SVG images to minimize file/download size, maintain image sharpness, react to changes in screen size and devices. I have not been a fan of SVGs in the past. Editing them requires specialized knowledge (yes, Inkscape is specialised for me), editing them online has been flaky, and availability of SVGs for stock images have not been good.

Cordova for Data Driven Vue Applications

📅 Feb 2, 2019 · 📝 Jun 9, 2020 · ☕ 4 min read

I had to create a mobile app for one of the data driven applications that I recently developed. Cordova has proven to be an excellent choice to reuse my existing code and make life easier for everyone. 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.

Validate date in Javascript

📅 Feb 1, 2019 · 📝 Apr 30, 2020 · ☕ 2 min read

Date validation is not common for input fields since dates are ‘picked’ from a date picker rather than typed in. But it has its uses - for e.g. if you are enabling dates in a list view with copy/paste ability, or validating dates sent by a third party system. Let us look at a couple of ways in which you can validate dates.

v-if vs. v-show in Vue

📅 Jan 31, 2019 · 📝 Apr 30, 2020 · ☕ 2 min read

There are two ways to conditionally show or hide UI elements in Vue - v-show and v-if. Learn which option to use where. v-show Use v-show to show an element on the UI based on given condition. The element is present in the DOM, but will have class set to display: none.

One way vs. two way binding in Vue

📅 Jan 30, 2019 · 📝 Jun 9, 2020 · ☕ 3 min read

Vue supports two-way binding through the excellent v-model directive, and one-way binding using a :value= syntax. Both have their uses within a Vue component. There are good enough reasons to use one over the other. First, let’s look at an example of two-way binding - 1 2 3 4 5 6 7 8 9 10 11 <template> <input v-model="message" /> </template> <script> export default { data() { return { message: "hello" }; }, }; </script> v-model is a short form of v-bind.

Installing Node on Linux

📅 Jan 29, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

I recently ended up with a low-end box with CentOS 7. After a long, long time, I got to try out skills on anything other than a managed Ubuntu / RHEL / Windows server/client. The fact that the box depended on me to get the app running was exciting but scary.

Data vs Computed vs Watcher in Vue Components

📅 Jan 28, 2019 · 📝 Jun 9, 2020 · ☕ 3 min read

There are three main ways to store variables and/or react to variable changes in Vue components. data computed Watch for changes in watcher So, how to decide when to use what? (that is 3-in-1 question, I outwit myself) Although these sections look similar, they serve different functions. Evaluate the variables against the following considerations when you are in doubt.

1 + 3 Ways to Get Components Talk to Each Other in Vue

📅 Jan 27, 2019 · 📝 Apr 30, 2020 · ☕ 4 min read

Vue provides one excellent way and three other alternative ways of getting your components to work together to form one beautiful, seamless application. Let us look at them one by one :) 1. Vuex Yesterday we talked about Vuex and how we (try to) manage vuex variables and local variables in a Vue component.

Vuex Store vs. Local Variables in Vue Components

📅 Jan 26, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

Vuex is quite a powerful way of storing variables and sharing them across components, but where do you draw the line? Which variables do you store locally and which of them are shifted to Vuex store? This is the advise I often come across - Get your variables in store; keep component clean and consider future reuse Don’t overdo Vuex.