Posts

I had been a big user of SmushIt! Wordpress plugin in its heyday. After slowing down my sites too often, I switched to offline solutions. None of the tools I used have been as easy to use as FileOptimizer. Also: find this handy download link. FileOptimizer is a free, open-source tool to optimize files. It is in fact a wrapper for a bunch of open source tools that work great individually, but absolutely rock as a collection. ...

I don’t quite see value in ‘contact us’ forms anymore. No one uses it It is prone to spam No one uses it (yes, this is repeated) However, my personal opinions do not always align with client expectations. So it follows that I create these forms on a static site with resigned indignation. Contact form is not quite a native feature of static sites. However, there are more than few solutions to this problem. ...

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’. prerender-spa-plugin will take care of pre-rendering the content, and I don’t need to worry on the performance or the SEO side of things. ...

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). Although I could lazily load maps, one too many map requests did not make a lot of sense when all the user wanted did was to search and open a specific contact. ...

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. Consider the following function - getSum(2, 3); function getSum(x, y) { var sum = x + y; console.log("sum function: ", sum); // 5 return sum; } Even though the function is declared after the actual call, the above piece of code works without issues. ...

You can do the following in a password box to hide or show passwords on click. <template> <v-text-field name="password" :value="myPass" label="Enter password" :append-icon="value ? 'visibility' : 'visibility_off'" @click:append="() => (value = !value)" :type="value ? 'password' : 'text'" ></v-text-field> </template> <script> export default { data() { return { value: String, }; }, }; </script> Password is captured in a v-text-field element and we are doing a couple of things here - Use ‘show’ or ‘hide’ icons based on whether password is shown in plain text or as a hidden item (append-icon). We use type to be password or text to achieve this Show or hide password when user clicks on the appended icon The end-result - ...

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 - const x = 1; x = 2; // TypeError: Assignment to constant variable. This is applicable for other types of variables, or to simpler objects created on top of these primitives. ...

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. 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. Instead you would have to go old school and compare everything within an array. const fruits = ["apple", "orange"]; const oldFruits = ["apple", "orange"]; const newFruits = ["pear", "raspberry"]; const moreFruits = ["pear", "raspberry", "grapes"]; console.log(arrEq(fruits, oldFruits)); // true console.log(arrEq(fruits, newFruits)); // false console.log(arrEq(fruits, moreFruits)); // false function arrEq(arr1, arr2) { let arrLength; if ((arrLength = arr1.length) != arr2.length) return false; for (let i = 0; i < arrLength; i++) if (arr1[i] !== arr2[i]) return false; return true; } And, for Pete’s sake (if you have a friend called ‘Pete’) - don’t use the above code. Who names variables arr1 and arr2 - that is so lame.

Does the term ‘CMS’ mean anything anymore? And, why a hybrid static site solution is the only way out. Where we stand today? Wordpress really brought web sites to the masses. Instead of writing obscure code using HTML / Javascript, using Blogspot, or using third party site builders, Wordpress and its ecosystem allowed all humans with basic computer skills to whip up a site within no time. Wordpress is a content management system (“CMS”), and a good CMS at that. ...

VS Code is the most useful thing discovered after sliced bread. The extension ecosystem kicks up the productivity in VS Code many notches higher. Here are a few shortcuts that you must include in your toolset to get into God-mode. 1. Prettier on Save: Quicker format Install prettier. Enable ‘Format on Save’ in Settings’. Rock and roll. I have never seen any tool save so much of my time. 2. Ctrl + D: Select Word, repeat selection and edit in one go Ctrl + D (repeat to select multiple instances). Multiple edits in one-go if you have selected multiple instances. ...