Techformist

The Different Types of Typescript

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

With ‘type’ in its name, Typescript lives up to its reputation of being a typed language. But, what exactly are the supported types? At a high-level we can classify types as built-in (basic & special ) and additional types including user-defined types. Built-in Types (Basic) Similar to Javascript implicit types, we have number, string, boolean to form the three core built-in types.

Use onclick event instead of 'submit' in Javascript

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

Use onclick rather than submit in HTML forms. A typical HTML form has a few fields and a button to submit the data to some back-end server. And, the typical way to do the form submission is through the submit method. 1 2 3 4 5 <form action="/helloMessage.php"> <input type="text" id="name" /><br /> <button type="submit"></button> </form> On clicking the button, the page will submit data to helloMessage.

Open source and free URL shorteners

📅 Sep 14, 2019 · 📝 Apr 30, 2020 · ☕ 3 min read

URL shorteners shorten your URLs. You have many many products in the market - bit.ly being the most popular. However, with a bit of help from amazing people who have built them, we can use our own URL shorteners. Again, nothing magical here - this was quite an old problem. People wanted to always mask their URL or make it easier for sharing.

Classes, Objects, Props and Interfaces in Typescript

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

Get started with object oriented programming in Typescript. Typescript behaves like a language with built-in support for OOP concepts, and does not carry the quirks of Javascript in that respect. Classes and Objects Define classes and objects like how you define in any of the popular OOP languages. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 class Fruit { public name: string; private grownIn: Array<string>; constructor(name: string, grownIn: Array<string>) { this.

What is Typescript and why should I care?

📅 Sep 12, 2019 · 📝 Apr 30, 2020 · ☕ 4 min read

I had been fascinated by Typescript and have been going back and forth on making it my primary programming language. In a few posts and with as much less information as possible, let’s see why anyone should bother with Typescript. What is Typescript? Typescript is a typed Javascript. No, I am kidding - it is more than that.

Add PWA to your Hugo site

📅 Sep 11, 2019 · 📝 Apr 30, 2020 · ☕ 8 min read

Adding PWA to your Hugo static site is quite easy. What is PWA and why should I add it? Progressive web applications (PWA) are a nice way to give your websites an “app makeover”. Using PWAs your sites are perceived to load faster, are available offline, and in general improve user experience.

Role-based menus for navigation in Vuetify

📅 Sep 10, 2019 · 📝 Apr 30, 2020 · ☕ 3 min read

What is your preferred way of showing role-based menus and buttons in toolbar and navigation menus? A typical application may have many toolbars and navigation bars, each relevant to a specific set of users. You can then show/hide the elements based on the user role. In smaller applications, I simply choose to show or hide the menu items on a single navigation bar.

Prevent test emails going out to users in AdonisJS

📅 Sep 9, 2019 · 📝 Apr 30, 2020 · ☕ 2 min read

Here’s a quick way to prevent emails from going out in test environments in AdonisJS. We typically end up getting production data in part or in whole to test environments for a “proper” round of testing on real data. But all the data attributes cannot be so “real”. We typically end up changing fields like emails so that customers do not start receiving emails from non-production environments.

Production to test migration strategy

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

While we love to have production-like environments for user testing, managing data and the test environments can present unique challenges. In today’s enterprises it is fairly common to have multiple test environments including staging, system / user testing environments and so on. These environments expect production-like features but only for specified users.

Dialog and Overlay in Vuetify

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

I am a fan of dialogs but overlay function was long due in Vuetify. It is fairly common to use Vuetify dialogs to popup a component. You would have seen this option against many ‘edit’ buttons in data tables, or against ‘new’ button in a list/detail component. We include such a dialog using v-dialog.

Print a page section on button-click in Vue

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

Use a button on a Vue component to start a print dialog and print a specific section. Setup We will use a small library called ‘html2paper’. First install the said library in your Vue project - 1 npm install vue-html-to-paper Add library to your code in main.js -

Use await without async function in Javascript

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

How can you use await without an async function? Don’t click or proceed further if you are not into practical jokes. Say, you try using await in a “normal” function or directly within a module.. 1 2 3 4 5 6 7 function getWeather(loc) { const weather = await fetchWeather(loc); return weather; } // SyntaxError: await is only valid in async function You receive a compilation error that await can be used only in async function.

Generate Fibonacci series using generators

📅 Sep 4, 2019 · 📝 Apr 30, 2020 · ☕ 2 min read

Generate Fibonacci series with generators and feel good about yourself. Previously you have seen how the totally practical example of generating Fibonacci series was breathing fire with memoization, and may have also come across using loops or recursion to solve the same problem. But, there is no fun in all that - this is real-life and we have to “generate” fun (yep, there we go again).