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

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

Installing Node on Linux

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. After some fidgeting around, I got down to business with getting the basic OS configured. It was time to install NodeJS. ...

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

The Right WSL Setup for using Node

A few node packages have been causing me pain lately. Who knew that my Windows 10 addiction can get me into trouble with node? There are, of course, multiple ways to solve the node problem on Windows. Do not use the offending package :). If there is no support for Windows, your great program does not get written using the specific package. Hell, yeah. Use NVM to juggle between node versions and check whether the problem goes away. I did something similar when using strapi-js. I could not get it to work on Node 10 or 11. ...

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