DEV Community: Çetin Kaan Taşkıngenç

TypeScript Secrets Part 1: "as const"

Çetin Kaan Taşkıngenç — Tue, 30 Jan 2024 07:39:16 +0000

I've been wanting to start a new blog series for a while now. In this series, I'll be sharing some lesser-known TypeScript features that many web developers might not be familiar with. In this first post, I'll be talking about the "as const" keyword.

What does "as const" do?

You can declare a variable "as const" in TypeScript. This makes the value of the variable a constant or in other words it makes the variable read-only. Meaning you cannot change or update the value. This is different than just declaring a variable with const. You can't redeclare values of a const variable but you can mutate it. If you use "as const" you can't redeclare or mutate it.

Here is an example:

// without as const
const config = {
  theme: {
    primaryColor: '#3498db',
    secondaryColor: '#2ecc71',
  },
  api: {
    baseUrl: 'https://api.example.com',
    version: 'v1',
  },
  features: {
    enableAnalytics: true,
    enableNotifications: false,
  },
};

// this is allowed
config.theme.primaryColor = '#ff0000';

// so is this
config.features.enableNotifications = true ;

In this example we have a web app config that consists of a theme, api and features objects. These values as you might guess are probably almost never going to change.
If a team member has changed a value in this config and others don't know it might cause unneeded debugging hours to fix a trivial problem. To keep them as read-only objects you can infer them "as const"

// with as const
const config = {
  theme: {
    primaryColor: '#3498db',
    secondaryColor: '#2ecc71',
  },
  api: {
    baseUrl: 'https://api.example.com',
    version: 'v1',
  },
  features: {
    enableAnalytics: true,
    enableNotifications: false,
  },
} as const; // <-- notice the as const here

// this will result in a TypeScript error
config.theme.primaryColor = '#ff0000';

// this will throw an error as well
config.features.enableNotifications = true;

This is pretty cool but "as const" provides us with another useful feature as well. TypeScript is mainly used for it's type checking and by using "as const" you can declare stricter types. What I mean by that is instead of an value being type string it can be type literal string value.

Here is another example:

// without as const
const config = {
  theme: {
    primaryColor: '#3498db',       // Type: string
    secondaryColor: '#2ecc71',     // Type: string
  },
  api: {
    baseUrl: 'https://api.example.com', // Type: string
    version: 'v1',                      // Type: string
  },
  features: {
    enableAnalytics: true,     // Type: boolean
    enableNotifications: false, // Type: boolean
  },
};

// when you hover on this you'll see type: string
config.theme.primaryColor

// when you hover on this you'll see type: boolean
config.features.enableAnalytics

But if we use "as const" we can see their values when we hover over these variables. Since they are read-only their type does not matter, they cannot change.

// with as const
const config = {
  theme: {
    primaryColor: '#3498db',       // Type: '#3498db'
    secondaryColor: '#2ecc71',     // Type: '#2ecc71'
  },
  api: {
    baseUrl: 'https://api.example.com', // Type: 'https://api.example.com'
    version: 'v1',                      // Type: 'v1'
  },
  features: {
    enableAnalytics: true,     // Type: true
    enableNotifications: false, // Type: false
  },
} as const;


// when you hover on this you'll see type: '#3498db'
config.theme.primaryColor

// when you hover on this you'll see type: true
config.features.enableAnalytics

Lets do a quick recap

So by using "as const" we can turn our variables into read-only variables meaning their types are turned into their values so TypeScript throws an error when we try to change them. It also provides us with better intelliSense meaning we can just hover on a variable to see their constant value.

Thanks for tagging along!
Feel free to connect with me on my socials from my profile.
Cheers!

Difference Between Git Merge, Rebase and Squash

Çetin Kaan Taşkıngenç — Mon, 15 Jan 2024 09:48:35 +0000

As a developer, you've likely used Git and GitHub, mastering the essentials of version control. Integrating changes from your branches into the main branch, often through pull requests, is a common task. The default choice for many is the "merge" feature.

However, the world of version control offers alternative commands with distinct features. Enter Git rebase and Git squash, two advanced techniques that offer you a different way of synchronizing your changes to the target branch.

Many developer do not even know what these commands are and just use the merge command. While merge is a solid choice if you're interested on learning the other ways you will probably love this article.

In the upcoming sections, we will dive into the commands for Merge, Rebase, and Squash. It's crucial to note that these commands aren't similar to algorithms, solving distinct tasks. Instead, Merge, Rebase, and Squash serve the same fundamental purpose but provide different perspectives on how you manage your branches. Each command offers a unique lens through which you can navigate and enhance your branch management, providing versatility in your approach to version control.

Git Merge

Git Merge is the most commonly used way of updating branches. It's the most common because it's usually the first synchronizing command developers learn when learning Git. They usually don't dive deep into other commands like rebase and squash without learning about merge since they might be overwhelming.

Merge basically creates a new merge commit and combines the changes in the branch to the target branch with that merge commit. It shows your individual commits and a merge commit.

Positives

Easy to understand how it works
Has the commit history of both branches

Negatives

History can be overwhelming and complex
Possibility of filling the branch history with too many merge commits

Git Rebase

Git rebase is another commonly used command. Rebase command as it's name suggest rebases the head of current branch to target branches last commit. Thus producing a much linear git history. Some people might prefer this kind of more linear Git history.

Positives

Produces linear commit history
Outputs a cleaner project history with no merge commits

Negatives

Rebasing alters the commit history, potentially causing confusion or conflicts for collaborators.
Solving rebase conflicts are usually harder than solving merge conflicts

Git Squash

The final command is Git Squash. As it's name suggests it squeezes the commits into a single commit and then merged into target branch. It's kind of has both the features of Merge and Rebase. It creates a merge commit but it also keeps the projects history linear and clean.
But the catch of Git Squash is that we lose the details of individual commits. So a lot of context about individual commits are lost in order to have a cleaner project history.

Positives

Produces linear and clean commit history
Creates a merge commit

Negatives

Less detailed commits when squash and merged
Tracking individual commits might be hard and can cause issues in debuging

Conclusion

In the end all three commands do the same thing but in their own different style. Even though you might not be using all of these commands right now it might be useful to learn how they work for future opportunities or for your personal project management.

So long story short

Merge: Creates a merge commit, gives all the info about the branch
Rebase: Moves the head of the current branch to the last node of the target branch and produces a more linear git history
Squash: Making all the commits into a one single commit and creates a clean linear history but does not provide as much information about commits.

Feel free to connect with me on LinkedIn, GitHub or Twitter / X

Coding the Shield: A Deep Dive into the Development of the Discord Bot that Blocked 1000+ Phishing Attacks

Çetin Kaan Taşkıngenç — Mon, 08 Jan 2024 14:48:30 +0000

What This Article is About

In this article I'll talk about one of my favorite side projects I worked on, Postman Sentinel. Well technically it was first called Postman Student Helper when it was first developed 3 years ago. I'll go into depth about how and why I built this project, how I received help from the Postman Community and it's impact. Also I'd like to mention that this is my first blog post so I would love to receive constructive feedback about my writing. Happy reading!

The Backstory

Back in 2021 when I was still in university as a 2nd grade IT student I've wanted to do a lot of community work. At that time I got accepted to an awesome student program called Postman Student Leaders. All the communication in the community was and still is done via Discord. If you don't know Discord it's basically a massive communication platform for communities and friends.

Now the problem was during that time there was a massive increase in scammers in Discord. It was mostly Discord Nitro Scams because at that time Epic Games was giving away free Discord Nitro. So the scammers were constantly spamming messages with malicious links. Here is an example message:

What's Going On?

I've blurred the user of the account at top because these phishing links were sent from hacked accounts in an automated matter. Messages like these were sent in all the text channels multiple times on random times of the days. Basically the link is similar to discord as can be noticed. It's usually something like disord, discorde, diiscord etc. Texts that can deceive users when checking the message quickly. The link has a clone of the Login Screen of Discord. Something similar or basically the same as this:

When the user writes their user credentials they are then sent to the server of the scammer. Now the scammers have the email and password of the users. After that the website redirects them to the actual Discord login screen. So most of the users think something went wrong and login again. Most of them are not aware that their account credentials have been stolen and if they do not have 2FA in their account, their account is now part of a botnet that automatically sends messages to Discord servers.

The Problem and The Solution

Obviously the problem was that our server had quite bit of people and due that even if we acted fast enough and deleted the messages quickly, if at least 2 people clicked on that link, infected account amount increased.

This was a major problem because usually we weren't fast enough. Only certain verified people had permissions to delete messages and manage the server. So we would have to write to these certain people that there are phishing links in the server. Sometimes no one with right amount of permission would be online and these messages could stay in the chat for hours.

That was the moment I thought I could probably help the community and develop something great. I already had some experience developing Discord bots with Discord.js. I recently built a bot for my friends to use so I thought I can build one that can actually automatically detect these messages and delete them from the chat.

My First Implementation Worked But Was Not Efficient

Well back then I was still a student and had nowhere near the knowledge of software development as of now. I wanted to build something pretty fast due to these phishing links being constantly sent. I went with the easiest and fastest solution I could think of and that was scanning every message sent for the keyword nitro. It was nowhere near the perfect solution but it got the job done.

message.content.toLowerCase().includes("nitro")

This surprisingly worked really, really well. It blocked almost all of the phishing links. Although as you can see this is far from a good solution. After a month some scammers started to send just the links and no text. So the bot failed to block them since there was no "nitro" in the message they sent. This solution was also prone to a lot of false positives. A lot of innocent messages were also deleted.

A Helping Hand From Postman

I don't know if I mentioned it but I made this project open-source from start. This was mostly because I wanted to have a community of developers working on this bot and improving my code. Well, I got what I wanted. Claire Froelich from Postman helped me a lot with the project. She introduced me to concepts like Prettier and cleaned a lot of my poorly written code. She also added probably the best feature of the bot which is an actual phishing link detection using Levenshtein Distance algorithm.

The algorithm basically compares two strings and gives a result on how similar these two strings are. This was really useful because now we can target specific urls and delete messages that are similar to these urls.

Here is the first version of that code:

import { distance } from "fastest-levenshtein";

/** Most spam links try to typosquat 'discord' to trick users into thinking the link is safe (ex: "discorde")*/
const TYPOSQUAT_TARGET = "discord";

function isSuspiciousLink(link, threshold = 4) {
    // get base domain
    const matches = link.match(/^https?:\/\/(\S+?)\./);
    if (!matches) return;
    const base = matches[1];
    // check levenshtein distance of domain to "discord"
    const d = distance(TYPOSQUAT_TARGET, base);
    // if distance is > 0 and < threshold, base is typosquating. Call foul
    if (d > 0 && d <= threshold) {
        return true;
    }
    return false;
}

export { isSuspiciousLink };

This solution worked perfectly and we mostly moved with this solution changed some values or made improvements according to data from false positives.

Because of this we could easily add other websites to check as well such as GitHub. Eventually scammers used different links like posting a fake github link similar to the Discord Nitro scam links. Here is an old photo of these messages being detected and deleted automatically.

This bot had other fun features as well such as fetching and posting coding memes from Reddit

Why Go All This Trouble?

Working on this project was a really fun experience. I learned a lot about hosting, cloud, Docker, Node.js and working as a team. But one of the main reason I continued on development back in the day was seeing the impact it provided.

This project was my first real world project that actually helped and provided something to people. I could see the impact it made, the blocked messages, time saved from community staff and accounts saved from scammers.

Seeing that really motivated me to keep the bot running and updating it according to latest phishing attempts at the server.

It also became my best side projects in my resume. I remember talking with recruiters about the bot for a large portion of the interview and answering their questions. It's really awesome to have an unique project that provides real world value to a community.

So if you're in a community and see something you can improve, go for it! Even if you're a beginner like I was at worst case scenario you'll have a cool side project.

If you wish to check out the project here is the GitHub link it's pretty old so I might need to update my old code. Feel free to contribute!