learn
Non-enumerable Properties in Javascript
· ☕ 2 min read
When you define a prototype for an object you run the risk of counting that as an object property. Use non-enumerable to avoid doing that. Consider this - 1 2 3 4 5 6 7 8 9 Object.prototype.colors = () => { return; }; let fruits = ["apple", "orange"]; console.

Create your Own Javascript Playground
· ☕ 2 min read
I write quite a bit of Javascript on a day to day basis. But, I have a poor memory and keep forgetting things. 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.

Context of This in Javascript
· ☕ 3 min read
I have often seen how people talk and write about this being all complex and such. But frankly, I don’t understand the pain. All it takes for me to understand is 4-5 iterations of using this in a different functions, classes, modules and so forth, messing up a bit - each time, and trying to do that over & over until I get the right context with the right this.

5 Ways to Catch Common Javascript Bugs
· ☕ 4 min read
Javascript is a God-send if you are trying to get things done - quickly. It can run back-end servers, is invaluable for the front-end, and you will never thank enough when you on the way to complete a project that could have taken 10x the time/effort back in the day.

Use Google Recaptcha in Vue Forms
· ☕ 2 min read
Google recaptcha is quite a powerful tool in reducing spam through our contact forms. Once included in our forms, reCaptcha automatically manages suspicious activity, prompts additional ‘bot vs. human checks’, or is completely transparent to the overall flow - depending on who is interacting with the site. Including reCaptcha in Vue is quite simple.

Show FAQs in Vue - The Simple Way
· ☕ 2 min read
In one of the recent projects there was this requirement to create a FAQ page for a small application. The change was not planned and came up during the final stages of the project. I took it in the same spirit as what I do for a home page. I did not plan to use SSR or a static-site generator, but rather leaned back on the excellent ‘prerender-spa-plugin’.

Open Google Map URL on Button Click in Vue
· ☕ 2 min read
Recently I had to incorporate Google map functionality on list of contact cards. I though it would be interesting to outline a decision map of what went into the design and development. My first thought for the map functionality was to embed the map alongside the contact. This was quickly discounted since we had too many contacts on the same page (with a possibility of infinite scroll in the future).

Change Function Scope in Javascript
· ☕ 2 min read
Javascript has lexical scope - the variable values are available and valid based on their position. The same is applicable to functions. At the same time declarations are brought to the top of their block at compile time. In other words, they are hoisted at the time of compilation, and hence variables and functions are available to statements accessing them before the actual declaration.

Toggle to hide or show password in Vuetify
· ☕ 1 min read
You can do the following in a password box to hide or show passwords on click. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <template> <v-text-field name="password" :value="myPass" label="Enter password" :append-icon="value ? 'visibility' : 'visibility_off'" @click:append="() => (value = !

Const and Immutability in Javascript
· ☕ 2 min read
const is excellent. It allows us to keep our variables in controlled scope, and reduces errors caused by the case of mistaken reassignments. But it can also lead to a false sense of security. Not everything is truly immutable when defined by const. Consider this simple example - 1 2 const x = 1; x = 2; // TypeError: Assignment to constant variable.

Check if two arrays are equal in Javascript
· ☕ 1 min read
You can’t just equate arrays - you are smarter than that. Consider the simple example where we want to compare arrays and test their equality. 1 2 3 const fruits = ["apple", "orange"]; const oldFruits = ["apple", "orange"]; console.log(fruits == oldFruits); // false It may be obvious in hindsight - but array comparison in the above code will not compare values and give you the expected answer.

Make Navigation Responsive
· ☕ 3 min read
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.

Web-first Development
· ☕ 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.