Learn from my experience

[learn-from-my-experience]

Safeguarding Online Banking: The Power of State Bank of India's Exclusive gTLD

Note to Readers: Please keep in mind that this article is based on an event that occurred on 20 Feb 2017.

In this article, we're going to delve into the world of generic top-level domains (gTLDs) and explore the recent decision by the State Bank of India (SBI) to adopt its own gTLD for website security.

Despite occasional grumblings about changes in policies regarding savings bank accounts, the State Bank of India, India's largest public sector bank, has unveiled a significant upgrade to its website. This upgrade isn't merely about aesthetics; it's a proactive step to safeguard its customers against phishing scams.

Yes, we're talking about the recent news of SBI rebranding its website with its very own gTLD, transforming it from https://www.sbi.co.in to https://www.bank.sbi. This marks a groundbreaking move, as SBI becomes the first banking institution to have its own gTLD.

But what exactly is a gTLD, and how does it bolster protection against phishing attempts? Allow me to explain.

Deciphering gTLDs:

A gTLD, or generic top-level domain, is the last segment of a fully qualified domain name. To give you a clearer picture, a fully qualified domain name represents the complete web address of a site, like www.google.com or www.wikipedia.org. The labels "com" and "org" are examples of top-level domains, often called gTLDs. The term "generic" is a historical relic, distinguishing these domains from others that emerged during the early development of the internet.

You might wonder why they're called "top-level" when they appear last in the address. The answer lies in the Domain Name System (DNS), a directory service responsible for linking domain names to the appropriate websites. The DNS organizes domain names in a hierarchical order, reading them from right to left. Consequently, the rightmost label assumes the highest position in this hierarchy.

Diverse Roles of gTLDs:

Originally, gTLDs were introduced to signify specific purposes. For instance, "com" indicated commercial entities, "net" denoted network infrastructures, and "edu" signified educational institutions. However, due to a lack of restrictions, these entities—com, net, and org—are now open for use regardless of their initial goals, rendering them "unrestricted." Other gTLDs like "biz," "name," and "pro" are considered generic but remain "restricted" since their registration demands proof of eligibility.

Notably, the "sbi" gTLD is also designated as "restricted," which means no individual or organization outside of SBI is permitted to register under this domain. You might be wondering how this benefits us, the customers, in the battle against phishing scams. To unravel this, let's first understand what phishing entails.

The Phishing Challenge:

Phishing involves attempting to acquire sensitive information like usernames, passwords, and credit card details—often for nefarious purposes—by masquerading as a trustworthy entity through electronic communication.

Traditional phishing schemes typically involve a scammer sending an email informing the user of an unexpected windfall, like a $10 billion lottery win they never entered. The user is then asked to send a processing fee to claim the prize, but, in reality, no prize exists. In another scenario, scammers create emails resembling official communication from a bank, coercing users to provide their credentials for purported security reasons.

These deceitful emails contain links that redirect users to fraudulent websites mirroring the bank's official site. Unsuspecting victims enter their credentials on these fake sites, inadvertently sharing sensitive information with the scammers.

Protecting against the first type of scam often involves marking the sender's email address as spam. However, the second type necessitates more vigilance. Users should verify the sender's email address for authenticity and scrutinize the website's address in their browser, watching for any subtle misspellings or inconsistencies. A useful tactic when encountering a suspicious site is to intentionally provide incorrect credentials; if the site doesn't respond with an error, it's likely fraudulent.

The gTLD Solution:

Here's where SBI's restricted gTLD, ".sbi," comes into play. This exclusive domain is reserved solely for SBI's use, making it easy to differentiate between authentic SBI websites and emails and potential phishing attempts. Official email addresses and websites from SBI now end with ".sbi."

As of now, only the bank's primary website sports this new gTLD. However, SBI officials have revealed plans to extend this security measure to other SBI businesses, including insurance. Additionally, they've assured customers that the previous web address, www.sbi.co.in, will remain operational during the transition, ensuring a smooth shift to the new web address, www.bank.sbi.

Summary of gTLDs:

.com: Initially for commercial entities, now unrestricted.

.org: Initially for organizations not clearly falling within other gTLDs, now unrestricted.

.edu: Originally for educational use, now primarily for U.S. third-level colleges and universities.

.gov: Intended for governmental use, now primarily for U.S. governmental entities and agencies.

[learn-from-my-experience]

Every TypeScript example and tutorial I've come across so far mainly focuses on language features, static typing, and working with Visual Studio. However, I couldn't find much guidance on how to use TypeScript effectively with JavaScript and the DOM.

I remember having the same question a while back, just like Johnny on Stack Overflow. "Can we use TypeScript to manipulate the DOM?" This question motivated me to dive deeper and figure it out, and I'm here to share what I've learned.

Configuration: Using TypeScript for DOM manipulation is straightforward, but it does require some configuration. You'll need to include the specific types for DOM access, which aren't available by default in TypeScript. To do this, you must explicitly configure the TypeScript compiler to include the "dom" library in the compilerOptions section of your tsconfig.json file. It's worth noting that the decision not to include these types by default might suggest that TypeScript's creators initially intended it more for server-side development with Node.js than for front-end work.

/** tsconfig.json - Configuration file in the project folder for the TypeScript compiler */ { "compilerOptions": { "lib": [ "es2015", "dom" ], "strict": true, "target": "es2015" } }

Hello World: In this article, I'll create a simple "Hello, world!" program to demonstrate how to use the DOM in TypeScript. Since this is my first post about TypeScript, I'll cover the basics of working with DOM types and address a common challenge that beginners might encounter. Please note that I won't be discussing DOM events in this post; that's a topic for a future article.

Let's start with the basics by changing the inner text value of an existing HTML element. I began by creating an HTML file with a standard HTML5 boilerplate, including an <h1> element with the id "greeter" in the body.

<!DOCTYPE html> <html lang="en"> <head> <!-- ... --> </head> <body> <h1 id="greeter">Hello</h1> </body> </html>

Next, I opened a new TypeScript file and added the following code:

let greeter: HTMLHeadingElement = document.getElementById("greeter") as HTMLHeadingElement; greeter.innerText = "Hello world!";

In this code, I created a variable called greeter and assigned the type HTMLHeadingElement to it. The HTMLHeadingElement type is defined in the "dom" library we added to the configuration. It tells the TypeScript compiler that greeter expects an HTML heading element and nothing else. Then, I assigned the greeter to the value returned by the getElementById function, which selects an element by its ID. Finally, I set the inner text of the greeter element to "Hello world."

When I compiled the code with the following command:

tsc script.ts

It produced the following error:

Type 'HTMLElement | null' is not assignable to type 'HTMLHeadingElement'. Type 'null' is not assignable to type 'HTMLHeadingElement'.

It's a bit frustrating, but TypeScript is doing its job. This error means that I tried to assign a greeter, which is of type HTMLHeadingElement, with an object of type HTMLElement that the getElementById method returned. The HTMLElement | null in the error message indicates that the method's return value can be either of type HTMLElement or null.

To address this, I used TypeScript's type assertion feature to tell the compiler that the element returned by getElementById is indeed a heading element, and it doesn't need to worry about it. Here's the updated code:

let greeter: HTMLHeadingElement = document.getElementById("greeter") as HTMLHeadingElement; greeter.innerText = "Hello world!";

With this change, the compilation was successful. I included the script.js file generated by the compiler in the HTML document and opened it in a browser.

Decoration Time: Now that I've confirmed that everything works as intended, it's time to make the page more visually appealing. I wanted a font style that was informal, so I chose the "Rock Salt" font from Google Fonts. I imported it into my stylesheet, along with "Dancing Script" as a secondary font, using CSS imports. I then added a few more elements to the HTML document, centered all the text using CSS flexbox, added a background from UI gradients, and adjusted the positions of some elements for proper arrangement. The page now looked beautiful.

Animation: To add a finishing touch, I wanted to include a background animation of orbs rising to the top like bubbles. To create the orbs, I decided to use <div> elements. Since I wanted several orbs with different sizes, I split the task into two steps to simplify the work.

First, I created a common style for all the orbs and defined a custom animation for the orbs in CSS. Then, I created the orbs dynamically using TypeScript. I created a set number of <div> elements, assigned them the pre-defined style, and randomized their sizes, positions, and animation delays to make them appear more natural.

Here's an excerpt of the code for creating the bubbles:

function createBubbles() { for (let i = 0; i < bubbleCount; i++) { let div: HTMLDivElement = document.createElement("div") as HTMLDivElement; let divSize = getSize(); div.style.left = getLeftPosition() + "px"; div.style.width = divSize + "px"; div.style.height = divSize + "px"; div.style.animationDelay = i * randomFloat(0, 30) + "s"; div.style.filter = "blur(" + randomFloat(2, 5) + "px)"; div.classList.add("bubble"); bubbleBuffer.push(div); } console.log("Bubbles created"); }

After creating the orbs, I added them to the DOM and started the animation:

function releaseBubbles() { createBubbles(); for (let i = 0; i < bubbleCount; i++) { containerDiv.appendChild(bubbleBuffer[i]); } console.log("Bubbles released"); }

And with that, the animation of orbs rising like bubbles was set in motion.

Here's the final output:

You can find the complete code in this repository.

learning-typescript/helloworld at master · svijaykoushik/learning-typescript

Examples and demos as part of the series learning typescript on my blog :earn from my experience - svijaykoushik/learning-typescript

Conclusion: While writing this article and creating the example, I realized the involvement of advanced concepts like type assertion and union types. I now understand why the authors of those tutorials didn't include them; introducing them could confuse beginners. It's best to learn TypeScript thoroughly before venturing into DOM manipulation.

In my example, I skipped null checking when fixing the type mismatch error, as it seemed unnecessary for the demonstration. However, in real projects, it's important to check for null values to avoid runtime errors. I also didn't

[learn-from-my-experience]

Stop tracking and start ignoring - Learn from my experience

Here I share a tip to delete files unwanted & unrelated to the project from a git repository

[learn-from-my-experience]

My thoughts on TypeScript

When I was a child, I used to play construction with my Dad’s music cassette collection. Sometimes, I would mix up the cases and the cassettes inside for fun. When my Dad wanted to listen to the music he liked, he would be disturbed when a completely different song play. And he would be frustrated when he couldn’t find the real one.

I feel the same frustration whenever I try to access a property in a JavaScript object that is supposed to be available and It doesn’t exist.

JavaScript gives me “God” like powers where I can create objects in one form and change it into something different at my whim. Like turning a fox into a horse or turning blood to wine. But this power gave me problems just like how I gave my dad problems.

If I had the magic lamp, I would ask Genie Smith to find me a way to designate types to data & objects when I write code and not when I execute it. And he would’ve said “Dude you can use TypeScript. It has what you need”.

If you don’t know what TypeScript is, it is an open source programming language designed to provide type-safety to JS projects with its strict type system.

After learning typescript for a week, here are my thoughts on TypeScript.

1. A Super set of JavaScript

Typescript uses the same syntax as JavaScript with nifty additional features. And I love it.

Typescript is just like JS but has a strict syntactic structure with stringent datatype rules. I would say it as a meta-data to JavaScript as it gives additional information about types and object structures. It kind of reminds me of C++.

2. Type safety

The type system in TypeScript, the set of rules on how to assign data types or types for short to variables, objects and other elements of my code is very stringent. This ensures that I do not assign a Person object to an Animal object or add a string with a number. This is called type safety in computer programming. Though JavaScript has type safety, it’s more lenient in my opinion.

3. A bouncer

I feel that typescript is like a bouncer in a bar who push away people when they do not follow the party etiquettes. It’s because TS pushes me back whenever there is an inadvertent type-related error until I fix it. It might seem tedious, It’s helpful nonetheless. The TS compiler helped me prevent spending a lot of time to debug the error which is the case in JS.

4. Code Hinting

My favourite part of typescript is its ability to present hints while I code. When combined with powerful code editors like VS Code or Atom, the contextual code suggestions helped me reduce errors and increased my typing speed. TS can do this because it’s a statically typed language. It means information about types are available to the compiler before the compilation starts. This availability of information helps the editors compile my code on the go and provide contextual suggestions.

5. Red squiggly lines

Available separately the linter when enabled in the editor, can detect errors of syntactic, type and even contextual nature. It presents the errors by underlining the error part with red squiggly lines as I type. This makes error correction easier and faster

6. Planning Ahead

New nifty features in typescript like the call signatures, object structure definition and interfaces allow me to plan ahead on how I’ll be applying my design to the code. For example, the call signatures are similar to function declaration in C allow me to sketch out the number of parameters needed and the return type. And the Object structure definition allows me to design a skeleton for an object before I define it.

7. Versatility

What makes typescript versatile is its wide variety of configuration options. I can enable and disable different options to cater to my project’s needs.

One of the settings I used a lot is the target option. It flipped between commonJS module system and the es5 module system while learning.

8. Just too many options

TS has just too many configuration options for a beginner. The ignorance of the purpose of some of these options led me to trouble. I did not know I had to include a separate library to use the DOM functions. I was like “What do you mean getElementById is not defined?”

9. Type definition

What makes typescript great is, it allows programmers to define new types for their need. Making use of this feature the definitely.org community has created high-quality type definitions for popular JS frameworks like JQuery, node.js and Angular which allows the use of these frameworks in Typescript.

But, could not find enough information on how to use a JS plugin or framework if it is not supported by the definitely typed community.

10. Partial to node.js

Typescript has so many features that I found useful. But in terms of documentation, it is partial to node.js. I found lots of learning aids about TS for node.js. But I couldn’t find equivalent amounts of learning aids for front end programming.

Conclusion

As a beginner, all these strict rules felt time-consuming since it took less time to write the same in JS. Over time, I realized the usefulness of TS and started using its features as I learnt them. I’ve decided to use typescript in my next side project instead of JavaScript.

References

“Programming TypeScript, Making your Javascript applications to scale” by Borris Cherney. ISBN - 9781492037651

“Type system”, Wikipedia

“Data type”, Wikipedia