tag: Learn

Here’s a quick introduction to Razor pages in ASP.NET core, and an opinionated way to quickly start building applications using Razor pages. And yes, there is a case for using Razor pages even in 2020. So.. ASP.net? Yes, indeed. I have had a love-hate relationship with ASP.NET through years. I am way less productive using ASP.net but cannot ignore the speed that a dotnet web server provides. Take into account the super debugging capabilities/tooling and the sizeable market that keeps providing projects on the platform, we surely have more than a winner in ASP.NET. ...

Debounce operations in Vue using this 10 line script. Avoid loadash and friends. What is debounce? Delay and throttle operations to wait and collect user input before doing something with the input. The “something” can be updating another field, doing an API call, or starting a timer to self-destruct. Did you not debounce earlier? Yes, I did. reusable debounce function strange throttling effect to allow function call only once awkward debounce using generators But, not in Vue. ...

Centralize all error, warning and info alerts in one place. I like v-alert and tend to over-use it. It enables us to show detailed notifications (error or otherwise) - without significantly causing user inconvenience. I find v-alert more suitable in my apps than using, say, popup alerts that interrupt users, or “toast” notifications which I find unsuitable for detailed messages. I use v-alerts to - display error or informational messages post an API call show form validation errors that cannot be shown against individual controls guide user action How do I alert? Using alert in Vuetify is simple enough. Introduce this one line in your components that needs alerts. ...

Assert is a general-purpose validator and should not be used in the context of testing alone. An assert in Javascript simply checks for truthy values and produces an error otherwise. We use it quite a bit in automated testing when checking for correctness of output for pre-defined inputs. We use asserts like so - var assert = require("assert"); function getSum(x, y) { return x + y; } assert(getSum(1, 2) === 3); assert(getSum(3, 6) == 9); The above code block will go through fine since there are no errors, but I am well capable of producing a few errors. ...

Easily convert objects to arrays and iterate to your heart’s content. There are multiple ways of converting an object to an array (which, also is an object but a different one at that.) Method 1: A simple Object.values() method The first idea that comes to mind is to just use Object.keys(), Object.values() or Object.entries() to generate an array. const numO = { a: 1, b: 2, c: 3, d: 4, e: 5 }; console.log(Object.values(numO)); // [ 1, 2, 3, 4, 5 ] Method 2: Apply transformation logic during object to array conversion If you are going fancy about the conversion and want to include some logic therein - ...

Here’s a different syntax for our favourite IIFE’s. Immediately invoked function expressions enable us to write functions without using “functions”. Well - just kidding. They are functions but with a different syntax. A typical IIFE looks like this - const x = 1, y = 9; var sum = 0; (function() { sum = x + y; console.log("sum: ", sum); }(); /* output sum: 10 */ There is another interesting syntax that is lesser known. At least it was not known at all to me-self until I came across the syntax in some library. ...

Here’s a shorter, readable way to copy props from one object to another subject to defined conditions. The shortest way to copy object (when you don’t quite care about copying sub objects by reference) - const planet = { name: "earth", position: 3 }; const newPlanet = { ...planet }; console.log(newPlanet); // { name: 'earth', position: 3 } But, what do you do if you want to copy only name but not position? A common way to do that will be - const planet = { name: "earth", position: 3 }; const newPlanet = {}; Object.keys(planet).forEach(key => { key == "position" ? "" : (newPlanet[key] = key); }); console.log(newPlanet); // { name: 'name' } Not bad - the code is readable and we have accomplished the task in two lines. ...

A simpler way to do curry functions in Javascript. We have previously seen currying in Javascript. A simple form and application of that concept is demonstrated below - const addThem = add.curry(2); const addTotal = addThem(1); console.log("addTotal: ", addTotal); // 3 Or, we could avoid a external function or library and curry using bindings .. function add(x) { return function(y) { return y + x; }; } const addEm = add(1); console.log(addEm(2)); // 3 But, there is a simpler way to get the same result. We just use arrow functions to collect arguments at different times. ...

Beware of using implicit returns in arrow functions. Consider the below example of a simple arrow function. It returns a simple variable. In the absence of any other statement in the function body, a simple mention of x will return the value of x. const getStuff = x => x; console.log(getStuff(1)); // 1 Let’s modify the block. We now want to return an object with the input value within it. const getMoreStuff = x => { x: x; }; console.log(getStuff(1)); // 1 Oops.. We expected {x: 1} but got 1 because the flower brackets were treated as enclosing a function body and not an object. ...

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. <form action="/helloMessage.php"> <input type="text" id="name" /> <button type="submit"></button> </form> On clicking the button, the page will submit data to helloMessage.php, receives any response from PHP page, and (can be configured to) displays the response. [Or, the page could redirect somewhere else based on the submission status, but we will not discuss that here] ...