tag: Learn

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.

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

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

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