Techformist

Allow a function call once and only once

📅 Jul 26, 2019 · 📝 Apr 30, 2020 · ☕ 1 min read

Allow a function to be called once and only once. We have previously seen an example where debounce can be used to call a function once and can ignore subsequent calls. There is a shorthand way to allow a single function call that if you are not interested in the debounce part of the problem.

Using switch with number ranges

📅 Jul 25, 2019 · 📝 Apr 30, 2020 · ☕ 1 min read

You can easily use switch to check whether a number is in specified range. We have seen the advantages of using switch instead of if/else. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 const num = 1; switch (num) { case 1: console.log("one"); break; case 2: console.

Negative number index in Arrays

📅 Jul 24, 2019 · 📝 Apr 30, 2020 · ☕ 2 min read

Negative number indexes do not countdown in an array in Javascript. There was this forum post that asked about why negative numbers do not work “as expected” in an array. The logic of the question is - 1 2 3 const nums = [1, 3, 5]; console.log(nums[-1]); // should have been 5, but returns undefined I fondly remembered my good ol’ days with Python, and then thought about two things -

Check if type of value is array

📅 Jul 23, 2019 · 📝 Apr 30, 2020 · ☕ 2 min read

Check whether a given value is an array before subjecting it to array methods. Loose typing can be a pain when your methods are being called from other methods / external modules. It is a good idea to check for valid types to avoid throwing runtime errors that are difficult to understand or parse.

Get a random value from array

📅 Jul 22, 2019 · 📝 Apr 30, 2020 · ☕ 1 min read

Get a random unique value from a specified array. You can use one of the hundred ways to get values at a specific index, or iterate over an array and get values in sequence. 1 2 3 4 5 const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.

Shorthand for multiple 'or' condition checks

📅 Jul 21, 2019 · 📝 Apr 30, 2020 · ☕ 1 min read

Use this shortcut to do multiple checks in one go. You have seen an or condition a billion times before, haven’t you? 1 2 3 4 5 6 const fruit = "apple"; let shape; if (fruit == "apple" || fruit == "orange" || fruit == "water melon") { shape = "round"; } console.

Bundle size using Vue CLI

📅 Jul 20, 2019 · 📝 Apr 30, 2020 · ☕ 1 min read

You can get a bundle size report just by using Vue CLI and nothing else. Keeping track of bundle sizes is a best practice. You need to know what gets delivered to users so that you can try to optimize stuff and take corrective steps to decrease chunk sizes, tree-shake where you can etc.

Lazy load images in Vue

📅 Jul 19, 2019 · 📝 Apr 30, 2020 · ☕ 1 min read

Lazy load images to improve perceived performance. If you have a view that has lot of images, you may observe high initial page load time and stuttering. Vue has to get the comparably larger payload to paint the UI, and this takes time. The easiest way of lazy loading images is by using an package called vue-lazyload.

Make an object non-reactive in Vue

📅 Jul 18, 2019 · 📝 Apr 30, 2020 · ☕ 2 min read

Are you tired of Vue reactivity? Do you long for days when you had to manually refresh HTML pages to see changes? Or, do you have large objects and reactivity is killing your app? Vue has the answer. Vue enables this magic to respond to any changes in state on the UI.

Remember position history and navigate to anchors in Vue

📅 Jul 17, 2019 · 📝 Jul 2, 2020 · ☕ 3 min read

You can remember the position in a view and navigate users to that position when they click on ‘back’. You could also navigate users to specific anchor links in a long page. Vue helps you to create a great single page application. Navigation between views is almost seamless and “feels” really fast.

How to break reactivity in Vue for arrays and objects?

📅 Jul 16, 2019 · 📝 Apr 30, 2020 · ☕ 3 min read

Let us move to the dark side and break some things. We will start with Vue’s reactivity. See a couple of commonly used patterns to break reactivity in arrays and objects. And oh, there are ways of working around that if you are into boring stuff. All the below things applicable to Vue 2 btw.

A shorthand to call same method in created and watch

📅 Jul 15, 2019 · 📝 Apr 30, 2020 · ☕ 2 min read

Use a less known property called immediate to call a function during created and in watch. Take the below scenario - Component needs to fetch data from server to get contact detail when user clicks on a specific contact in a list User can use arrow keys to fetch next or previous contact by clicking arrows on the component One of the typical ways to address this requirement is to call the fetchContact method

Type cast in style in a Vue component

📅 Jul 14, 2019 · 📝 Apr 30, 2020 · ☕ 1 min read

Do you type cast in Vue? Of course you do. So, is there a way to just not use Javascript shortcuts since they are so cumbersome? Really? You find this cumbersome? 1 2 let myNumStr = +myNum; let myStrNum = "" + myStr; See more at type casting in Javascript and shortcuts to type cast.