DEV Community: Vinayak

I’m 22 and I’m lost…

Vinayak — Fri, 04 Jul 2025 02:57:26 +0000

Hey there. This is a life update blog.

Well, actually… It’s more of an existential crisis blog.

It’s 7 AM while I’m writing this. It’s raining outside.

I’ve been sitting here since 5 AM. No, I’m not a morning person.

I woke up early because… well, everyone says that’s the least you can do to change your life.

And honestly? I agree. It’s kinda wonderful.

Being up before everyone else, finishing your high-leverage tasks before breakfast??

(amazing)

Except….. I don’t know what the hell I’m actually supposed to do.

Ok, let me start “from the start”.

It’s “2019”.

I am looking at my exceptional 10th-grade results.

Everyone’s congratulating me, everybody’s happy, except me.

Don’t get me wrong, I was proud.

I knew how hard I’d worked for it.

But deep down? I felt empty.

2 years of buildup, of “ Your life will change after this”. And all I had to show for, was this piece of paper.

I remember thinking:

“I don’t want to do this anymore. I want to create something.

Something stupid,

Something fun,

Something mine.”

Something like that WWE parody video I made with my friends last year.

People thought it was dumb… and fun.

And I loved every second of it.

Something that I could look back on and cringe at… and still be proud of.

Fast forward, I was obsessed with gaming,

So I started making Let’s Play videos. But my PC could barely run games, let alone record them.

The frame rates would be down in the gutter.

Still, I pushed out some 40 videos. Uploaded them on YouTube.

Guess how many total views they got?

Probably not more than 40.

So… I quit.

And then, around the same time, a friend introduced me to anime.

…and it led to a moment that literally changed my life, over something as dumb as a waifu debate.

yep

Me, and two of my friends were arguing about the best girls, like the true cultured men we were!

To prove my pick was superior, I said, “I’ll make an AMV about her.”

Now…. I barely knew editing.

Just trim…. copy…… and render…..

But I said it. So now I have to deliver,

For her honor. And mine.

So I searched “how to edit AMVs” on YouTube, and this 2-hour-long tutorial popped up.

It took me 2 days to finish it and make the video.

But man… I was so proud of it.

I created an Instagram account on the spot, posted it there,

shared it on YouTube,

showed it to my friends,

and even emailed the tutorial creator for feedback!!

I was hooked.

Ideas started flooding in like crazy.

And for the next 3–4 months, I was editing AMVs like a madman; there was no sense of time or hunger.

Then… I stopped.

Tech was booming in 2022, and I’ve always loved tech.

I was already pursuing a CS degree.

So I thought — why not take my career forward in that?

Land a job. Freelance.

Get some “tech money” and reinvest it into content or a business.

Back then, I saw editing as low-skill, low-pay “grind work.”

Didn’t realize… that was one of the biggest missed opportunities of my life.

I could have scaled it up to an agency,

Built a content brand.

Or at least be in a somewhat better state than I am now,

But these are all speculations.

Instead, I fell into this corporate-tech learning rabbit hole.

My focus shifted from creating to optimizing.

Chasing the hottest technologies.

Searching for the perfect tech stack,

Overcomplicating projects just to learn the fancy tools.

Trying to learn everything instead of building anything.

I still smile when someone asks me, “What’s the best editing software?” And I say,

“It doesn’t matter what you use. It matters what you create.”

…And yet, I don’t take my own advice.

The last 3 years were messy.

I’d grind hard for 2 months, then burn out and procrastinate for 4.

Any time I had a creative idea like Streaming, a new video, something fun, I’d stop myself and say, “It’ll divide my focus. It’s not worth it.”

Then I’d waste those same months doing nothing anyway.

Yet today I woke up at 5 am again after a month, to work on this project I started weeks ago.

It’s bloated with stuff like Docker, monorepo, and whatnot.

The stuff I thought would make me a “real” developer.

But now? It’s so overengineered that it doesn’t excite me anymore. It just feels… tedious.

I feel exhausted just looking at it.

And to top it all off, I just graduated. I’m 22. And I don’t know what the hell I’m doing.

Should I prep for job interviews?

Try freelancing?

Build a product?

Or just… create content?

The anxiety’s creeping in. And after a 6 AM career therapy session with ChatGPT…

I said

“fuck it”.

I am just gonna post something today.

No plan.

No optimization.

No niche.

Just a person, trying to create something cool again. Trying to feel something again.

If you are also struggling like me, do share them in the comments, I’ll appreciate that.

And yeaa, let’s see where it goes.

Thanks for reading.

Cut the Crap: Ship Better-Looking Websites (Fast)

Vinayak — Sat, 03 May 2025 11:53:04 +0000

Alright, let's be real. That UI/UX stuff? It's pretty much the only thing your users actually see and interact with. It's the front door to whatever awesome thing you've built.

If you put 20% of your efforts into this, it will give you 80% of the results regarding users.
The 80/20 of a product.

But if you're a code-first dev like me, staring at a blank design canvas feels… directionless. Like, where do you even start?

I've been there. I tried building components and designing from scratch. But no matter how much I tried, the results were mediocre at best.

The usual advice? "You'll get good eventually."
Yeah, thanks. Super helpful when you're trying to ship something quickly.

I used to watch these long tutorials on YouTube. All they do is teach design fundamentals and make you learn Figma anyway. "Figma? What's that? Why? It's hard enough to manage state, fetches, APIs, auth, schema, and whatnot. I don't wanna learn graphic design on top of that."

Now, there is nothing wrong with being willing to learn design properly. It's a valuable skill.

But if your goal is to ship an MVP fast, build side projects, or just get your ideas out there, mastering another discipline first isn't sustainable. It takes tons of time and practice.

Enough said, let's dive into the 3-layer system I use to ship decent-looking UI, fast:

Layer 1: Steal the Structure

The structure is everything. You can't build anything solid without a decent blueprint. And the good news? You don't have to invent it.

Steal Like an Artist — Austin Kleon

1. Define Your Bones First

Before looking at pretty pictures, know what you're building.

Outline: What are the key features/sections?
Flow: How does a user get from A to B? Sketch a simple flowchart (yes, pen and paper works!). Or use some tool like Excalidraw, or if you are super lazy like me, just sketch it in your mind.
Data: What info needs to be shown/collected? (Think basic schema).
Why bother? Designing is 10x easier when you know the purpose and flow.

2. Research & "Borrow"

Now, find your visual inspiration. Why?

Think about it, these brands have spent thousands perfecting UI patterns. Learning from them will give you that unseen leverage.

Some useful resources for research:

Niche Leaders: Look at the top websites or apps in your space. What works? What doesn't?
Curated Galleries: Dive into Mobbin (great for app flows) and Dribbble (great for visual flair and components). Screenshot liberally. Analyze why you like certain layouts or elements.

Secret Resource (for Flair): Portfolio websites. Seriously. These are a collection of some of the most impressive-looking websites you will find on the web. It's just developers flexing their skills. Usefulness 3/10, Creativity 10/10. Good for grabbing specific ideas.

3. AI Kickstart

Got your outline, flow, and a folder full of inspiration screenshots? Let's get a concrete starting point without touching that scary tool called Figma.

Prompt the Prompter: Open ChatGPT (or your LLM of choice). Feed it your outline, and flow, and describe the key layouts or components you liked from your research (or even better, if the tool allows image input, use them!). Ask it: "Generate a detailed prompt for an AI UI generator like Vercel's v0.dev, Lovable.ai, Galileo AI, etc., to create an initial design concept for a [your app type] based on these features, this user flow, and inspired by these visual styles [describe/show references]."
Generate & Iterate: Paste the generated prompt into a tool like v0.dev or Lovable. Let it spit out some ideas.
CRUCIAL AI Note: As mentioned, AI is great at creating initial stuff but often clumsy at updating an existing design via prompts. If the first result is way off, don't waste time trying to tweak it with 50 follow-up prompts. Start a new chat, refine your initial prompt based on what you learned, and generate it again. It's often faster.

Goal: This is a hit-or-miss step. Sometimes it's garbage. But sometimes? It nails a solid layout or component structure you can directly use (copy the code if available!) or iterate on. This saves hours of "where does the button go?" agony.

Layer 2: Assemble the Building Blocks

Now that you've got a structural direction from Layer 1. It's time to assemble the actual UI quickly and consistently.

1. Styling Foundation

Now, don't go wandering off on YouTube trying to master CSS from scratch, we might never hear from you again!
I don't want you to get stuck in the CSS rabbit hole. Look, there are hundreds of CSS properties, but honestly? You probably only need to grasp maybe 20-ish core ones.

With those, you can build almost any UI layout, especially when using modern tools.

You can check this very brief article. Or if you want to get on track quickly, focus on understanding essentials like:

Box Model (margin, padding, border)
Layout (display: flex, display: grid, gap)
Positioning (position, top, left, right, bottom, z-index)
Sizing (width, height, max-width)
Typography (font-size, font-weight, color, line-height, text-align)
Backgrounds (background-color, background-image)
Basic Selectors (classes, IDs - though you'll use classes 99% of the time with utility-first approaches)

(If you already know this stuff cold or are a CSS wizard. Sorry to disrespect you, but I gotta do what I gotta do, to save people’s time.)

Understanding these basics gives you the foundation you need without derailing your project for weeks. You need this context to understand how the tools we'll use next work under the hood.

2. Tailwind

Yes, you need Tailwind in 2025.
Yes, raw CSS can be painful (naming things, managing files…).
Yes Tailwind CSS fixes this for many devs.

It's utility-first: you apply tiny classes directly in your HTML/JSX (className="pt-4 text-lg font-semibold").
On top of that it provides a consistent design system out-of-the-box, speeding things up.

But the biggest reason to use Tailwind is its Huge ecosystem around Component libraries.

3. Component Libraries (The Real Accelerator)

DO NOT REINVENT THE WHEEL.
Buttons, modals, forms, and cards are built faster and better by using pre-built components.

This is non-negotiable for speed. Forget building these from scratch (unless you really have to).

Do you know how much time I have wasted in building a popover menu from scratch? The countless bugs I encountered? The scary dream I had? (ok, maybe not that much.)

But the point is, now you can just copy it from Shadcn and customize it.

Shadcn/UI: This isn't a traditional library you install as a dependency. Instead, you copy-paste beautifully crafted component code directly into your project. Unstyled (but themeable via Tailwind). Tbh, it's one of the biggest things that ever happened to front-end development.

Why you SHOULD use it?

You Own the Code: So max control, max customization, max fun, and no fighting library internals, too.
Flexibility: Only want to use this pretty card, but don't want countless dependencies? No problem, go ahead, use only what you need. No bloat.
Tailwind Native: Remember when I asked you to learn Tailwind? Yup, you will thank me now, with Tailwind, you can work seamlessly with it for styling.
Copy-Paste Simple: Pick a component, run a CLI command, and get the code. That's it, now build, it's so incredibly productive.
The Growing Shadcn/Radix Ecosystem: That copy-paste, "own-the-code" approach you love from Shadcn? It's a whole ecosystem now. For more specialized or highly animated components built with the same philosophy (using Radix primitives and Tailwind), check out libraries like Magic UI or Aceternity UI. You integrate them the same way, no extra dependencies, just more cool building blocks for your project.

Other Tailwind Libraries: If the Shadcn approach isn't your jam, there are libraries like Flowbite or DaisyUI. They offer ready-made components styled with Tailwind, often installed as dependencies. Providing similar speed benefits for common patterns.

Here is a huge collection of UI libraries, more than you would ever need.

4. Font Sanity:

Font is also something you should keep in mind. Some people don't even touch it, and some people get insano-style with it.

Keep it simple. Pick one, maybe two readable fonts that align with your application's feel. Use different weights (light, regular, bold) and sizes for hierarchy. Google Fonts is great.

Configure them in your tailwind.config.js (if using Tailwind) for easy use (font-sans, font-headings). Done.

Layer 2 is about setting up your core toolkit. Understanding fundamental CSS properties, leveraging killer component libraries. (Seriously, look at Magic UI.) You can build a complex UI fast with it.

Layer 3: Make it Pretty

You have the structure (Layer 1) and the functional building blocks, which already look good in their own regard (Layer 2).

Layer 3 is purely about adding that visual polish, the stuff that makes it look less like a wireframe and more like a finished product.

Now, I'll be honest here, at this point, this is a designer's job. Like, I don't know what gradient would complement which background, or what should be the optimal size of this button.

The better design skills you have, the better UI you'll be able to create.
Unfortunately, I am not that good. I wish I knew a designer whom I could ask for advice.

Wait, maybe I do know someone who can help. I think you know him too.
Yes! You got it right, it's our scary friend AI. He has analyzed countless designs, he can surely help.

These designers are vibe-coding applications in minutes, so why can't I vibe-design my application?

And believe me, with this you would be able to create really beautiful designs and components.

1. AI as Design Consultant

Use AI tools (Cursor, GitHub Copilot Chat, or even just ChatGPT). Describe a specific section or element from your current build and ask for aesthetic advice:

"Suggest 3 ways to add subtle micro-interactions to my buttons using Tailwind/CSS."
"Recommend a complementary accent color to go with my primary blue (#XXXXXX) for call-to-action elements."
"How can I make this data table feel less dense? Suggest layout or styling tweaks."
"Give me ideas for a visually interesting background for the hero section (e.g., subtle gradients, patterns)."

Ask any questions, doesn't matter how silly, it's not gonna judge you.

2. Agents

Now, this is the nuclear option. You can definitely build extremely "fast" using this approach.

Your imagination is the only thing stopping you here. And apparently some application-breaking bugs.

While it's true you can operate very fast, the question arises, "Who's in control?".

It totally depends on you how comfortable you are. If you don't care how it works, which is totally fine. Then, by all means, just make your imagination a reality.

But if you don't want to lose control of your codebase, then at least try to understand why and how things are working.

Example prompts:

"Generate the Tailwind CSS classes for a linear gradient background going from blue-500 to purple-600."
"Write the CSS keyframes and Tailwind classes for a button that subtly scales up on hover."
"Show me how to implement a fade-in animation on scroll for sections using JavaScript and Tailwind."
Feed a screenshot or code snippet to a visual-aware AI tool and ask: "Generate the code to refine the styling of this card to look more modern, like [reference image/description]."

Essentially, use AI first for ideas on polish, then use AI again to generate the code snippets or styling logic needed to achieve that polish within your Tailwind/Component structure.

The Takeaway

Stop trying to be a master designer and a master coder simultaneously, especially when starting out or aiming for speed.

Steal structure and get AI to kickstart layouts.
Assemble using Tailwind, sensible fonts, and crucially, powerful component libraries like Shadcn.
Polish the aesthetics using AI for ideas and code implementation.

It's about leveraging the right tools and abstractions to get 80% of the visual impact with 20% of the traditional design effort.

Now go build something!

Laziest tailwind guide to build almost any UI without touching a single line of raw CSS.

Vinayak — Thu, 24 Apr 2025 07:46:55 +0000

CSS sure feels intimidating, but it’s also the backbone of every web design.

If you’re learning Tailwind, don’t try to master every class, only 20% of properties are used to build 80% of designs.

Its much better to mater only these 20% properties rather than skimming through every other property that tailwind provides(trust me there are a lot).

Now I won’t waste more of your time because its a lazy guide after all.

1. Layout: Flexbox and Grid

This is the heart of all the layouts. If you master these, you can create any layout existing.

— flex, flex-row, flex-col

— justify- (center, between, etc.)

— items- (center, start, end)

— gap-4 for spacing between

— grid, grid-cols-3, col-span-2

2. Box Model: Spacing & Sizing

Its used to position and align elements in your layout.

— m-, p- (margin & padding)

— w-, h- (width & height)

— max-w-, min-h-

— box-border

3. Colors & Styling

Quickly apply color schemes and basic visuals.

— bg-{color}-{shade} / text-{color}-{shade}

— rounded, rounded-lg, rounded-full

— shadow, shadow-md

— opacity-70 etc.

4. Typography

I mean font are pretty important, so….Don’t skip these:

— text-sm (small text), text-xl (large headings)

— leading-snug / leading-loose (line height control)

— text-left / text-center / text-right

5. Positioning

For layering and pinning elements where you need them

— relative / absolute / fixed / sticky

— top-0, left-4, etc.

— z-10 to layer stuff

6. Interaction & Motion

For that satisfying UX.

— hover:bg-gray-200

— hover:text-blue-600

— transition, duration-300, ease-in-out

— cursor-pointer, select-none

7. Responsive Design

— Prefix any class with sm:, md:, lg:, xl:, 2xl:

Uses a mobile-first breakpoint system. Meaning that unprefixed utilities take effect on all screen sizes, while prefixed utilities (like md:…) only take effect at the specified breakpoint and above.

Conclusion

Master these, and you’ll cover 80% of UI needs in Tailwind. That’s it.

If there are any other important classes that I didn’t mention, let me know in the replies.

resources: https://tailwindcss.com/docs

The Hack That Made People Rich.....in Subway Surfers

Vinayak — Mon, 07 Apr 2025 12:57:33 +0000

"Lucky Patcher"
Does this ring a bell in your head?

Remember when people used it to exploit Subway Surfers for extra coins(9999999999...)?

Have you ever wondered how it actually worked?
Let’s break down the technical wizardry behind it, "purely for historical insight!"

> Disclaimer: This article is intended solely for educational and historical insight. Modifying or exploiting software without permission is unethical and may be illegal. Always support developers and use your technical knowledge responsibly.

1. Understanding Lucky Patcher

Lucky Patcher is an Android utility known for its versatility. Originally designed to modify app behavior, its features include:

Ad Removal: Disabling intrusive advertisements.
License Bypass: Circumventing in-app purchase verifications.
Modification Capabilities: Altering an app’s code to unlock premium features or simulate purchases.

Its flexibility earned it the nickname "the Swiss Army knife of game modding." Although its use to exploit apps like Subway Surfers was widespread, it also sparked discussions about the ethics and security implications of such modifications.

2. The Mechanics of the Exploit

Intercepting In-App Purchase (IAP) Calls

Subway Surfers, like many mobile games, offered in-app purchases (IAP) for coins and keys. The exploit worked by intercepting the purchase request process. Here’s how:

IAP Request: When a player attempted to buy coins, the game would send an IAP request via an API call (typically to Android’s InAppBillingService).
API Hooking: Lucky Patcher intercepted this call by hooking into the billing API. Essentially, it monitored the communication between the game and the billing service.
Fake Success Response: Instead of processing a real transaction, the tool faked a “purchase successful” response. The game, fooled by this response, would credit the user’s account with a large number of coins—often instantaneously.

This process can be visualized as a flowchart:

Direct APK Modification

Beyond intercepting API calls, some modders took an even deeper dive by modifying the game’s APK (Android Package). This method involved:

Reverse Engineering: By decompiling the APK, modders could analyze the underlying code and locate key variables related to coin values.
Memory Patching: Once identified, these variables were patched directly. In some cases, modders altered memory addresses or hardcoded values that determined the coin count.
Result: The modified APK, when recompiled and installed, would start with an artificially high coin balance, bypassing normal in-game progression mechanics. This process, often referred to as “pure digital alchemy,” demonstrated how even simple code adjustments could dramatically alter gameplay.

3. Why the Exploit Worked So Seamlessly

Local Data Storage

One of the primary reasons the exploit was effective was due to how Subway Surfers managed its data:

Local Storage: Much of the game’s critical data (such as coin counts) was stored locally on the device rather than on a secure, remote server.
Minimal Server-Side Oversight: With little to no real-time verification from a backend server, the game relied on the integrity of local data, leaving it vulnerable to modifications.

Weak Code Obfuscation

Exposed Code: Early versions of Subway Surfers did not employ strong obfuscation techniques. This lack of code protection made it easier for modders to understand and alter the game logic.
Easier Patching: With clear and accessible code, patching specific values or intercepting functions became a straightforward task for those with the know-how.

4. The Evolution of Mobile Security

As mobile gaming grew in popularity—and as exploits like these became more common. Developers had to rethink security measures. Modern mobile apps now employ several robust techniques:

Server-Side Validation: Instead of relying solely on local data, critical transactions and data are now verified on secure servers.
Advanced Encryption: Enhanced encryption and obfuscation methods make reverse engineering significantly more challenging.
Anti-Tamper Measures: Tools such as the Play Integrity API and various anti-tamper libraries are designed to detect and prevent unauthorized modifications.
Dynamic Verification: Continuous, real-time validation of in-app purchases and other sensitive operations now adds an extra layer of security, making exploits like those used with Lucky Patcher nearly impossible without substantial risk.

The shift from local data management to robust server-side architectures represents a key evolution in mobile security. What once allowed for easy exploits is now safeguarded by multiple layers of defense.

5. Final Thoughts

The exploitation of Subway Surfers using Lucky Patcher remains a fascinating case study in early mobile game security. It highlights both the creativity of modders and the vulnerabilities inherent in early app designs.

Today’s fortified security measures ensure that such exploits are largely relics of the past, serving as a reminder of how far mobile security has advanced.

While the hack itself is an intriguing piece of gaming history, it underscores a critical lesson for developers: thorough backend validations and continuous security enhancements are essential in safeguarding digital ecosystems.

Web Dev Buzzwords: CSR, SSR, SSG!

Vinayak — Wed, 23 Oct 2024 11:37:52 +0000

Let's start from the beginning, if you don't know what they even are, don't worry they are just different ways to render a webpage.

Or if you are feeling fancy, you can say these are different rendering techniques used to deliver content to users.

I prefer the first one.

But, what’s the difference? 🤔

Which one’s right for your project? Or better yet, when should you use each?

Let's flip right into it.

CSR(Client Side Rendering)

or should I say the cool kid of the bunch?

When a user requests a page, the server sends over a skeleton(HTML), and the browser (on the client-side) fills it in by fetching and rendering the actual content with JS.

It's like building the house after your guests arrive!

Perfect for highly interactive apps, and can make your single-page apps snappy but can be slow for first-page loads.

There is also one major flaw in this approach, the waterfalling problem.

The client performs multiple API calls to fetch data. If one API call is slow or dependent on the result of another, it creates a bottleneck, delaying the rendering of components or sections of the page.

This also makes CSR a terrible option for SEO, because when a web scrapper hits the website, all it sees is a 👆(not this one). I mean an empty HTML file.

SSR (Server-Side Rendering)

The server builds the full page before sending it to the browser. This means quicker initial loads and better SEO, but it can cause slower interactions once the page is loaded because of the back-and-forth between server and client for new data.

It's good for landing pages, and blogs with dynamic content that needs faster initial load and SEO-friendliness.

Because this time when a web-scrapper hits the website, it gonna see a beautifully hydrated HTML file.

But here a good question arises:

Why do I need to render this page again and again for my portfolio or blog website? Well because you are stupid!!

Thank god that this article is here to save you.

You don't need to render this page again and again. What you can do is something called SSG, generate it once, and yeah

SSG( Static Site Generation )

It’s like that nerdy, introverted kid who doesn’t really enjoy live interactions and prefers working behind the scenes.

Quietly preparing everything in advance. Super efficient, fast, and reliable, but freezes when it comes to on-the-spot interaction.

In other words, SSG is like pre-building your pages (at build time), so they're ready to serve instantly to users.

The downside?

They're not as dynamic, but for blogs or sites that don’t change often, it's a super-fast option!

Use it when you need a blazing-fast static site with minimal interaction but maximum performance!

Conclusion

The article emphasizes a recurring theme: each technique involves trade-offs between different features, so the best choice ultimately depends on your specific application logic and goals

Soooo, in short:

CSR = dynamic & reactive ⚡

SSR = speed & SEO love ❤️

SSG = pre-built speed demon 🏃‍♂️

Have a nice day :)

! and ? in Typescript.

Vinayak — Thu, 17 Oct 2024 11:45:15 +0000

Ever wondered what those mysterious symbols ! and ? do in TypeScript? 🤔 They may be small, but they pack a punch!

Here's how and why to use them.

? - Optional Modifier

Use the ? to mark a property or parameter as optional. It tells TypeScript, "Hey, this field might be undefined."

interface User {     
    name: string;     
    age?: number;   
}

Now age can be defined or left out! 🎯

Why Use "?", well:

Cleaner code: It reduces the need for undefined checks.
Great for flexibility: Perfect for objects where some fields aren’t always needed! Example: Optional query params, form fields, or configuration settings.

! - Non-Null Assertion

The ! is like telling TypeScript, “I know better! This value is definitely NOT null or undefined.”

const element = document.getElementById('app')!;

This assures TypeScript the element exists. But use with care! 🚨

Why Use "!", hmm:

Removes unnecessary null checks when you’re certain a value isn’t null.

⚠️ But... it can be risky if you’re wrong! Use it when you’re in control of initialization or DOM elements that you know exist.

In short:

Use ? for flexibility and to safely handle optional properties.
Use ! when you're confident a value won't be null/undefined, but be cautious—it can lead to runtime errors if misused.

Basically, these tools help you write cleaner, more maintainable code. 💡

Is Piracy Worth It?

Vinayak — Sat, 20 Apr 2024 17:36:18 +0000

Ok let's be honest here, we all have done piracy at some point in our lives.

There is a famous quote by Gabe Newel on piracy:

"Piracy is almost always a service problem and not a pricing problem"

And it's true, we exchange our money for the convenience these services offer. Netflix was groundbreaking because it provided a one-stop destination for a vast array of content, eliminating the need to purchase individual DVDs for each movie or show. It seems like we've circled back to where we started.

Today's streaming service environment is a complete mess, if you wanna watch even one full show, the probability is very high that you would have to buy subscriptions for multiple streaming services. For example, if you want to watch Pokemon, you must hop on to 7-8 streaming services. I am not kidding, there is a whole guide on how to watch it across various platforms:

source: https://www.pokemon.com/us/animation/where-to-watch-pokemon-episodes-movies

Dunkey( if you know him ) has highlighted this problem in his video very well:'

Malicious Practices in Digital Spaces

Even if someone is willing to go through all this mess, they are still being manipulated by these corporations..... There is a very nice video by Louis Rossmann in which he explains how Netflix pushes their closed-source application on closed-source platforms like smart TVs by intentionally reducing the video resolution and bitrate on the computers. It's bad because platforms like smart TVs have more control over your privacy. They sell your data to show personalized ads. Here is the link to the full video, I do recommend everyone to check this out:

Gaming...

Not only streaming services, the gaming industry has been the same in this regard. More and more companies are using Digital rights management (DRM) in their games.

DRM is the management of legal access to digital content. Various tools or technological protection measures (TPM) like access control technologies, can restrict the use of proprietary hardware and copyrighted works. DRM technologies govern the use, modification, and distribution of copyrighted works (e.g. software, multimedia content) and of systems that enforce these policies within devices. DRM technologies include licensing agreements and encryption. -Wikipedia

DRMs are used to reduce piracy but they hurt the legitimate consumers who paid for the games. DRMs tend to impact the CPU, when you are playing the game you might experience lags and fewer framerates compared to a counterpart with no DRM.

Also, you get no control over what you paid for. If you are paying a whopping $60 for a piece of software, you should be able to own that copy.

The funny thing is when you buy a game on Steam, you don't own it. If you break the rules with Valve, they can shut down your account, and poof!! all of your games will be gone. But Valve has a good reputation in the gaming space and Steam is really good service, so people trust them.

Recently Ubisoft’s Director of Subscriptions Phillippe Tremblay said, “One of the things we saw is that gamers are used to, a little bit like DVD, having and owning their games. That’s the consumer shift that needs to happen.

“They got comfortable not owning their CD collection or DVD collection. That’s a transformation that’s been a bit slower to happen in games.”

There was an outrage in the gaming community about this statement especially because it's coming from goddamn "Ubisoft", the most hated corporation among gamers. But he is not entirely wrong since owning digital media is more convenient but you are losing all control to them.

A recent example is Funimation, a massive amine streaming platform announcing it will shut down all its services from April 2. Now, the good news is Funimation merged with Crunchyroll back in 2021 so most of the content you paid for will be transferred to your Crunchyroll account. Still, unfortunately, Crunchyroll will not preserve any digital copies (redeemed from DVD and Blu-ray codes) associated with your account.

So, all this stuff you paid for is gone, and if you don't own the physical copy, there is nothing you can do about it, except (cough, cough) accidentally pirate it.

Conclusion

When you pirate, you get better quality, you own the digital copy, and everything is in one place and complete, so better service. A big reason for people not pirating was that it was inconvenient but now "accidentally" going to a shady pirating site and "accidentally" downloading some unsafe shady files is less of a hassle than skimming through piles of streaming services or constantly getting lower frame rates on games.

Now I'm not advocating piracy here, most of the time it's unethical, people who worked so hard to produce these products deserve every single penny but on the other hand customer service is important too. Why should I pay for something worse than the stuff available for free? People don't mind paying for services, but they do mind paying for bad services.

Use functional state updates for incrementing state variables in React

Vinayak — Fri, 12 Apr 2024 13:24:30 +0000

I recently saw a React project, in which incrementing a state variable was done like this:

const [count, setCount] = useState(0) ..... setCount(count + 1 )
This directly sets the state to count + 1. However, this is not the right approach because if count is updated multiple times in quick succession, React may batch the updates for performance reasons, and all the updates might use the same initial value of count, leading to incorrect results.

Instead of doing this, functional updates should be used.
Functional state update is the approach of updating a state variable based on its previous value using a function provided to the state setter.

setCount((count) => count + 1);

This uses a function to update the state. The function receives the previous state as its argument and returns the new state. This ensures that each update is applied correctly even if multiple updates are batched together because each update uses the most recent state when it's applied.

I know pretty basic, but still wanted to put it out there for anyone new to React. 👍

"Keep everything online"

Vinayak — Tue, 09 Apr 2024 13:26:25 +0000

Where should I even begin, what if I tell you as a developer the most important asset that I own is my password manager account?

Storytime... A few years ago, I was installing some shady software on my Windows machine. And surprise-surprise it was malware! , my system got infected.

I tried to get rid of it but stupid me had given it admin privileges, and it pretty much owned me on my own PC(poetic). So, as a last resort, I had to format my SSD immediately. I remember it was such a mess, I lost so much important data. I did have some backups but not enough.

But if tomorrow I wake up and find out that my operating system got corrupted, my PC has been infected with malware or maybe my laptop has been stolen(ok, this would actually suck a lot ).

It will be inconvenient and frustrating, but atleast I can recover all my important data and get my dev setup back to the current state.

Now when I think of it, the only things you need to integrate are :

Password Manager
Browser Account
GitHub ( for devs )
Personal Cloud Storage

1. Password Manager

It's a web application that allows you to store your passwords and all other important secret stuff. You can also use your browser's password manager but I don't recommend it because:

It's not secure enough. Surfing the web with all your passwords on your browser is risky as Browser Vulnerabilities can also impact the safety of your Stored Passwords.
Browser Password Managers Only Work With THAT Browser, and it's not a good idea to store all your passwords on every browser.

In today's age, I believe a password manager should be a must for anyone. There are a lot of them but what I use and recommend others too is BITWARDEN.

Free forever
Unlimited password storage
256-bit AES encryption (it means it's pretty secure :) )
Open-source
Available on every major platform including Android and iOS (Yes, you can access your passwords on your phone)
Autofill and password generator

One thing that I am not a big fan of is Bitwarden's UX( user experience ). It's not very smooth and you might have to do some manual work.

But hey, you should always do your own research and find out the best one for you.

2. Browser Account

If you have access to all your accounts, this one is not that important, but it can save you a lot of time with that y+ENTER for opening YouTube.

It's the account you can create in any browser, that saves your history, bookmarks, keywords, password, etc.

So, yeah do make an account, it's good stuff.

3. Github

If you are a developer and don't have GitHub, then I don't know what you are even doing. So we are gonna skip this one.

Okay okay, let's talk a little about it.

Think of it as a platform, where you can store and share your code with others but it's more than that.

If you want to learn more about it you should read this: https://docs.github.com/en/get-started/start-your-journey/about-github-and-git

4. Personal Cloud Storage

Everyone knows about this one too. I'm talking about Google Drive, OneDrive, Mega... that kind of stuff, you know that :)

You can backup all the files, photos, videos, anddddd anything.

With all these tools, you can access all the important data anywhere, anytime, and convert any machine into your workspace.

The password manager has saved my life a couple of times and one day it might save yours too.

If there is any secret tool or technique you are hiding that can improve my system, please do tell me!!

Best way to learn new stuff as a software developer.

Vinayak — Sat, 20 Jan 2024 14:16:31 +0000

Learning new stuff is a very crucial skill, not only as a developer but in general. So I want to start this blog with a quick story.

Back in the days when I was watching a lot of anime, I was obsessed with amvs(anime music videos) so much so that I wanted to create my own amvs. Even though I only knew very basic video editing, I just had this super cool amv idea on my mind that I wanted to create anyhow. I built this project with the help of lots of tutorials. Learning advanced stuff was painful.

When I look back on that project, it’s very messy but for me, it was the best amv on the internet. I loved it. Fast forward 5 months I became a very good amv editor or video editor in general. I loved turning my imagination into media.

It taught me some valuable lessons:

How to learn new stuff?
How does it feel to get good at something?
Having fun along the way.

Now to the juicy bits, there are some key points I keep in mind while learning anything new, it helps me learn it way faster and most of all have a fun time doing it:

1. Aspire Way Above Your Skill Level

Whenever learning anything new, the first thing to do is to set a goal in mind. Now by goal, I don't mean "I want to become a good developer", that's good and all but it's very abstract, what do you even mean by a good dev?

Try to think of something more practical, that you can achieve this month like "I want to create a workout application that I can use to plan my workouts, maybe others will like and use it too", now how cool that sounds.

Now try to achieve this goal, don't think that you can't do it. You have to do it anyhow. It doesn't matter if it's good or not, just complete it.

If you get stuck somewhere because you don't have the required skills, that's where you :

2. Learn Things on the Go

Believe me, it will save you so much time and headache. Doing this, I have learned so many advanced skills in such a short time that would have taken me way longer, or maybe I would have never learned them.

I constantly put myself in a situation where I have to learn it, rather than learning it because it might be useful.

If you have ever played any sport in your life, recall the first time you ever tried to play it, did you first learn every rule and technique? or did you pick it up and start playing?

I am pretty sure most of you did the latter, but why? Because it's more fun, duh!

3. Having Fun

Going back to my amv story. I like this story a lot, it made me a very good video editor and taught me so many lessons but the reason why I go back to it is because of how fun it was!!

At that time, the only reason I was doing it was because I was having a blast editing videos till I fell asleep(literally).

Motivation and discipline sure help you complete the task, but having fun is what makes you think about it all day and get excited to do it again the next day.

Try to have fun with it, and build projects that really excite you.

These are the three main things I keep in mind while learning anything new. I am pretty sure you will pick up a few things from this blog and apply them to your own strategy(That's what I do).

All of this is straight out of my experience, so I thought sharing it with you guys would be pretty cool.

Have a nice day :)

This is not the tsc command you are looking for

Vinayak — Sat, 20 Jan 2024 14:10:10 +0000

So, from what I have experienced, this problem occurs when you install typescript like this

npm install -g tsc             #don't do this

To solve this error, try to run this command in the terminal:

npm uninstall -g typescript
npm uninstall - g tsc
npm install -g typescript 
npm install -D typescript

I hope it helped :)

How to install Firefox Developer edition on Ubuntu.

Vinayak — Fri, 19 Jan 2024 14:45:26 +0000

The thing is, Firefox dev edition is not available on the default system repository so if you want to install it, you have to do it manually.

Let's get right into it.

1. Open terminal

2. Download and unpack

wget "https://download.mozilla.org/?product=firefox-devedition-latest-ssl&os=linux64&lang=en-US" -O Firefox-dev.tar.bz2

sudo tar xjf Firefox-dev.tar.bz2 -C /opt/

rm -r Firefox-dev.tar.bz2

3. Install

sudo ln -s /opt/firefox/firefox /usr/local/bin/firefox-dev

4. Run

firefox-dev

Now at this point, you have installed Firefox dev on your system and you can run it with the above command but if you want to create a shortcut(which you should), then follow along.

5. Creating Shortcut

vi Firefox-dev.desktop

If you don’t know how to use vi editor :

Press “i” to enter insert mode
copy-paste the lines given below( ctrl +c / ctrl+v )

Paste these lines inside the file :

[Desktop Entry]
Name=Firefox-developer-edition
Exec=/usr/local/bin/firefox-dev
Icon=/opt/firefox/browser/chrome/icons/default/default128.png
comment=browser
Type=Application
Terminal=false
Encoding=UTF-8
Categories=Utility;

press “ESC” to move out of insert mode.
now type “:wq” and press enter key to save and exit.

Finally :

sudo cp Firefox-dev.desktop /usr/share/applications/

6. Updating

To be honest with you using Firefox Developers Edition as your default browser is kinda annoying since it asks for updates very often and you have to do it manually.

But if you wanna update it, don’t download it from the browser, just run these commands:

wget "https://download.mozilla.org/?product=firefox-devedition-latest-ssl&os=linux64&lang=en-US" -O Firefox-dev.tar.bz2

sudo tar xjf  Firefox-dev.tar.bz2 -C /opt/

7. Removing

In some case, you wanna completely remove Firefox dev from your system:

sudo rm -r /opt/firefox/

sudo rm /usr/local/bin/firefox-dev

sudo rm /usr/share/applications/Firefox-dev.desktop

rm ~/Desktop/Firefox-dev.desktop