Techformist

Extend a component to create cool stuff

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

Vue enables you to extend a component, thereby carrying forward all the base elements and add some more. This is one of the efficient ways for component composition. Let’s say you have a simple panel that you use everywhere - 1 2 3 4 5  <template> <!

All Useful Properties when Initializing Vue

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

Struggling to copy/paste all useful properties when initializing Vue? Looking to see what else Vue can do for you? Here’s the answer. We have seen how Vue can be used from CDN. Initializing Vue is simple enough - 1 2 3 4 5 // main.js new Vue({ el: "#app" } }); The above code block will initialize Vue and load it to element with id app.

Shortcut to initialize objects

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

Here’s a quick and more readable way to initialize objects from other variables. But, first - how do you normally define objects? 1 const nums = {}; I mean.. initialize objects - from other variables. 1 2 3 4 5 let x = 2; let y = 4; const nums = { x: x, y: y }; console.

Create a field with a simple date picker in Vue

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

Do not reinvent the wheel to create your own date picker component. Just use one of the existing components and praise those developers who share great things. I have historically struggled with date pickers and had finally settled in on a good date picker for Vuetify. Since most of my Vue projects are standardized on Materialize, that posed no issues.

Use Array Fill to Create Magic

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

How to use Array.fill() to your fill. We have seen examples of how to use Array.fill() to quickly fill data in an array. But, can we do more? Yes..! You can generate array with sequential numbers. Use Array.fill() to line up your number array in sequence. 1 2 3 const nums = new Array(10).

Use Bubble Sort to Manually Sort an Array

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

How can we use our beloved bubble sort in Javascript? We have seen examples of how to sort an array and sorting with multiple attributes. The easiest way is to sort an array is to just use Array.sort(). But that alone will not show you the complexity that you want to show in your program (for e.

Executing Functions Only Once in Javascript

📅 Jul 7, 2019 · 📝 Oct 13, 2020 · ☕ 1 min read

Let us see how to execute a specified function only once in the life time of the program. The Simple Way The easiest way is to use a global variable and remember the function execution. We can then ignore all future invocations. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 let saidHello = false; function sayHello() { console.

Reusable Debounce Function

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

Debouncing a function gives us a way to wait for input to stop and only then trigger a set of actions. This is particularly useful when we have to call a function only when user input is complete (or there is a gap in typing that we can utilise for processing).

Create a simple calculator using Vue from CDN

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

Let us create a dead simple calculator using Vue. Create basic structure As it was earlier, the basic structure just has two files - index.html and main.js. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!-- index.

Create a small to-do app including Vue from CDN

📅 Jul 4, 2019 · 📝 Apr 30, 2020 · ☕ 7 min read

Let us create a small example to-do app using Vue from CDN. There is not going to be any backend for this application. Create basic structure The basic structure just has two files - index.html and main.js. 1 2 3 4 5 6 7 8 9 10 11 <!-- index.

Three ways to include Vue in your projects

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

There are multiple ways of using VueJS - which should you use? VueJS is flexible and powerful - not a combination that you often see together. You can initiate and use Vue in more than one way in your app. Use in package with a build cycle This should be your preferred way of using Vue.

Return values from async functions

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

How do you return anything from async functions? How do you receive what is returned from async functions? Previously we have seen how return works in Javascript. I typically write functions that return at least a true or false value. 1 2 3 4 5 6 7 8 9 10 11 12 function printThis(statement) { console.

Coercions can be counter-intuitive, use same-type comparisons

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

Coercions are useful and almost intuitive, but beware of pitfalls. Consider below block of code - 1 const x = 42; Numbers greater than 0 and not undefined are generally considered truthy. So, following is understandable - 1 2 if (x) console.log("found the answer"); // found the answer But, you will be surprised if you do this -