Make Navigation Responsive

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

Web-first Development

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

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 Everywhere

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

Cordova for Data Driven Vue Applications

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

Validate date in Javascript

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

Top Javascript Frameworks for 2019 (Yes, clickbait)

tldr; There is no spoon. Longer version There is no one answer. Choose one, and get the job done. Even longer version Javascript is versatile and blah blah. But, how should you begin your search for the right framework? It took me no less than 3-4 weeks to get acclimatized with the nuances and settling down with a favourite framework. None should make the same mistakes. Here’s a humble-list (tm) - ...

Who's afraid of recursion?

Spoiler alert: I am. What is recursion anyway? A program calling itself. How does it look? conquerPlanet() { // infinite loop - there are too many planets to conquer conquerPlanet(); } OK.. how about a practical use case? Well, I am not quite a ’theory’ guy. But here you go with the age old problem of calculating factorial. function getFacty(num) { if (num > 0) return num * getFacty(num - 1); else return 1; } const result = getFacty(10); console.log("result", result); Why use recursion? The program looks elegant, doesn’t it? ...

Spread Operators in Javascript

A spread operator (...) provides a quick way to expand a Javascript object or array. Array or object is a collection of values. Accessing individual values within the array will require one to use a loop. const fruits = ["orange", "apple"]; for (let i = 0; i < fruits.length; i++) { console.log("fruit: ", fruits[i]); } /* output fruit: orange fruit: apple */ With the advent of the spread operator, the above operations become easier and more readable. Array can now be ‘destructured’ with a single statement. ...

Variable Scoping in Javascript

Scope of a variable refers to the visibility of that variable. Since the visibility of a variable also determines whether it can be referenced in a valid way, scopes are said to define the ’life time of a variable’. Scopes in Javascript can be global to the program, or local to the specific block and function. Before going further, a couple of lines on the basics Javascript is an interpreted language, but runs code using a compiler + interpreter engine combo. So, this is the normal execution of the program - ...