Techformist

GroupBy in Array using Reduce in Javascript

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

There is a really cool way to do group by in an array using reduce. The problem statement - you have an array of objects and need to create different arrays based on similar attributes. This is very similar to the SQL group by statement. Consider the example array -

Manage Client Side Secrets in Javascript

📅 Mar 17, 2019 · 📝 Apr 30, 2020 · ☕ 2 min read

How do you maintain secrets on the client-side? In one sentence - there are no secrets client-side. If you don’t want anyone to know about the secret, you should not send it to the client. The need for secrets Client may need user ids/passwords, API keys, API secrets etc. None of them can be trusted to the client.

Blazor and what it means for web development

📅 Mar 16, 2019 · 📝 Apr 30, 2020 · ☕ 4 min read

As a web developer I am amazed on web assembly and what Blazor could do with it. And, I am saying that even though I absolutely love what Javascript can do. The Back Story I had been hearing about this Microsoft experiment with web assembly (WASM) for quite sometime, but got an opportunity to take a further look starting late 2018.

Convert Strings to Numbers in Javascript

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

There are multiple ways to convert a given string to a number - so, which one to use and where? You would have also seen the more generic post on how to cast value from one type to another. But it may not be so apparent on which option to pick when you need to get numbers from a given string.

Delete Element in Array Reactively in Vue

📅 Mar 14, 2019 · 📝 Apr 30, 2020 · ☕ 2 min read

Deleting elements in an array maintains reactivity in Vue when done right. These arrays can be local variables in a component, or state variables in Vuex - the behaviour is the same. Let us consider this example - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <template> {{ fruits }} <v-btn @click="deleteFirst"> Delete First </v-btn> <v-btn @click="deleteLast"> Delete Last </v-btn> </template> <script> export default { name: "Farm", data() { return { fruits: ["apple", "orange", "grapes", "pear"] }; }, methods: { deleteFirst() { this.

URL Params in Vue

📅 Mar 13, 2019 · 📝 Apr 30, 2020 · ☕ 3 min read

Why and how would you pass parameters to a Vue application? You might have seen URLs that pass parameters to whatever front-end / back-end logic that is processing them. This will be something akin to - https://myapp.com/accounts/1 https://myapp.com/accounts/1/todo/2 https://myapp.com/accounts?id=1 https://myapp.com/accounts?query=abc&role=my id, query, role are parameters passed in the URL. The receiving function can have access to the parameters and values, and have processing logic based on values.

Default Function Arguments in Javascript

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

You can easily introduce default values for the arguments passed to a function. Consider this function - 1 2 3 function sayHello(name) { return `hello ${name}`; } Calling this function without arguments will provide a not-so-pretty string. 1 console.log(sayHello()); // hello undefined Even if someone had an existential crisis, I doubt they will like to be called ‘undefined’.

Convert String to Title Case in Javascript

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

We have a string.toLowerCase() and string.toUpperCase() in Javascript, but no out of the box function to convert to title case. Fear not if you are in that pickle - it is quite easy. 1 2 3 4 5 6 7 8 9 function ConvertTitleCase(str) { const strArr = str.toLowerCase().split(" "); for (let i = 0; i < strArr.

Create a Websockets App in NestJS

📅 Mar 10, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

NestJS is one of the things I have been playing around a bit in the recent days. Here’s how you can create a websocket application quickly on NestJS. Did I say this is a sample app that serves no real-world value other than poking around the application? Setup project in NestJS First.

Reusable Alerts in Vuetify

📅 Mar 9, 2019 · 📝 Apr 30, 2020 · ☕ 3 min read

A common requirement in any data-driven application is to show any alerts including error or warning messages at a standard location within a Vue component. This is easily accomplished using v-alert in Vuetify, but it is a good idea to use it in combination with a snackbar. Consider a typical component Account.

Take Full Advantage of Vue Components

📅 Mar 8, 2019 · 📝 Apr 30, 2020 · ☕ 3 min read

When beginning in Vue it may seem easier to create self-contained components, use them in views and call it a day. But Vue components can be much more powerful. Let’s consider an example where you have to create two views - Account and User. Typically, you create an Account.vue view -

Role-based Data Filters in Vue

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

I would love for the world to wait for a carefully architected VueJS app. But often it doesn’t. I recently had to quickly implement a role-based filter for a data driven application. And, the experience left me somewhat dizzy. First, the basics - Roles had been implemented in the application as custom logic - back-end server framework had roles defined against users Permissions were used to check access to specific routes of API.

Universal Apps and MeteorJS in 2019

📅 Mar 6, 2019 · 📝 Apr 30, 2020 · ☕ 4 min read

I was a MeteorJS fan. MeteorJS was an excellent tool to quickly create universal apps. I was not quite a professional developer back in the day (circa 2016-17) but I could recognize the power of Meteor in developing complex web applications that could potentially deployed for multiple devices. There was a time when I was flabbergasted as I, rather alarmingly, saw people moving from Meteor to different platforms.