Navigation can be in form of links in static or drop-down menus in the main header or side-bar. We have to be careful and test navigation experience on all form factors and device types. I came to web development from the enterprise world. The data-driven applications that are built using off-the-shelf products are not quite cutting edge on adhering to the greatest of web standards. Consider these CRM application examples - ...

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. 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. ...

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..). ...

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. ...

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. This post, as you have misread by now, is not about bashing some other blog. The authors do a good job by themselves. My intent is also not to warn the world of the danger of just listening to experts and wasting days/weeks on a framework that might not be worth the effort. ...

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. All that has been changing for the good. Today you can get high quality SVGs for free (or at minimal costs), and use them everywhere to achieve a much better end-result for images - without requiring any additional development effort. ...

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. 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. ...

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. The Quick and Easy Way Use a Date object to create date from a given string. The statement will output either a valid date, or a string “Invalid date.”. ...

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. This hides the element from user. Any scripts or back-end manipulation can still access the element. <template> <span v-show="isTrue">Message</span> <span v-show="showMessage = true">Message</span> </template> v-if ...

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 - <template> <input v-model="message" /> </template> <script> export default { data() { return { message: "hello" }; }, }; </script> v-model is a short form of v-bind. The above statement is equivalent to - <!-- ... code --> <input v-bind:value="message" v-on:input="message = $event.target.value" /> <!-- ... code --> When you change message in input box, the variable value will change. If an external logic (or a computation) changes message, the input box value will change. So 2-way binding literally binds the DOM element to the variable value in ViewModel (you do remember that Vue is MVVM, don’t you :)). ...