Forem: Baransel

Monitor Any Solana Wallet in Real-Time with Node.js

Baransel — Mon, 23 Mar 2026 20:38:19 +0000

I spent way too long polling getSignaturesForAddress in a loop. Every 3 seconds, hitting the RPC, checking if there's a new transaction. It worked, but it was ugly and slow.

Then I found out you can just subscribe to account changes over WebSocket. No polling. No wasted requests. You get notified the moment something happens.

Here's exactly how I do it now.

1. Set Up a WebSocket Connection

@solana/web3.js has built-in WebSocket support. You don't need a separate library.

import { Connection, PublicKey } from "@solana/web3.js";

const connection = new Connection(
  "https://api.mainnet-beta.solana.com",
  {
    wsEndpoint: "wss://api.mainnet-beta.solana.com",
    commitment: "confirmed",
  }
);

That's your entry point. The wsEndpoint is what makes real-time tracking possible.

2. Subscribe to Account Changes

Pick any wallet address and subscribe:

const wallet = new PublicKey("TARGET_WALLET_ADDRESS_HERE");

const subId = connection.onAccountChange(wallet, (accountInfo, context) => {
  console.log("SOL balance changed:", accountInfo.lamports / 1e9, "SOL");
  console.log("Slot:", context.slot);
});

Every time that wallet's SOL balance changes, your callback fires. Immediately. No delay.

3. Track Token Movements Too

SOL changes are easy. But most of the interesting stuff happens with SPL tokens. For that, you subscribe to token accounts instead.

First, find all token accounts for a wallet:

import { TOKEN_PROGRAM_ID } from "@solana/spl-token";

const tokenAccounts = await connection.getTokenAccountsByOwner(wallet, {
  programId: TOKEN_PROGRAM_ID,
});

for (const { pubkey } of tokenAccounts.value) {
  connection.onAccountChange(pubkey, (info) => {
    // Token account data changed — parse the new balance
    const data = Buffer.from(info.data);
    const amount = data.readBigUInt64LE(64);
    console.log(`Token account ${pubkey.toBase58()} new raw amount: ${amount}`);
  });
}

Now you're watching every token account that wallet owns. When they buy, sell, or receive tokens — you see it.

4. Watch for New Transactions with onLogs

Sometimes you don't care about balance changes. You want to see every transaction a wallet touches. onLogs is perfect for that.

connection.onLogs(wallet, (logs, context) => {
  console.log("New tx:", logs.signature);
  console.log("Logs:", logs.logs);

  if (logs.err) {
    console.log("Transaction failed:", logs.err);
  }
}, "confirmed");

This fires for every transaction involving that wallet. You get the signature and the program logs right away — no extra RPC call needed.

5. Don't Forget to Clean Up

WebSocket subscriptions stay open until you close them. If you're tracking multiple wallets, this matters.

// Remove a subscription when you're done
await connection.removeAccountChangeListener(subId);

I learned this the hard way. Left 200+ subscriptions running and my RPC provider wasn't happy.

6. Handle Disconnections

WebSockets drop. It happens. Your code needs to handle it.

function createMonitor(walletAddress: string) {
  const wallet = new PublicKey(walletAddress);

  const connect = () => {
    const conn = new Connection("https://api.mainnet-beta.solana.com", {
      wsEndpoint: "wss://api.mainnet-beta.solana.com",
      commitment: "confirmed",
    });

    conn.onAccountChange(wallet, (info) => {
      console.log("Balance:", info.lamports / 1e9, "SOL");
    });

    // Reconnect on close
    conn["_rpcWebSocket"].on("close", () => {
      console.log("WebSocket closed. Reconnecting...");
      setTimeout(connect, 2000);
    });
  };

  connect();
}

Not the prettiest code. But it works, and that's what matters when you're tracking wallets at 3am.

7. Putting It All Together

Here's a minimal but complete wallet monitor:

import { Connection, PublicKey } from "@solana/web3.js";
import { TOKEN_PROGRAM_ID } from "@solana/spl-token";

const RPC = "https://api.mainnet-beta.solana.com";
const WS = "wss://api.mainnet-beta.solana.com";

async function monitorWallet(address: string) {
  const connection = new Connection(RPC, {
    wsEndpoint: WS,
    commitment: "confirmed",
  });

  const wallet = new PublicKey(address);

  // Watch SOL balance
  connection.onAccountChange(wallet, (info) => {
    console.log(`[SOL] ${info.lamports / 1e9} SOL`);
  });

  // Watch all token accounts
  const tokens = await connection.getTokenAccountsByOwner(wallet, {
    programId: TOKEN_PROGRAM_ID,
  });

  for (const { pubkey } of tokens.value) {
    connection.onAccountChange(pubkey, () => {
      console.log(`[TOKEN] ${pubkey.toBase58()} changed`);
    });
  }

  // Watch transaction logs
  connection.onLogs(wallet, (logs) => {
    console.log(`[TX] ${logs.signature}`);
  }, "confirmed");

  console.log(`Monitoring ${address}...`);
}

monitorWallet("WALLET_ADDRESS_HERE");

Run it. Point it at any wallet. You'll see every SOL change, token change, and transaction as it happens.

When to Use This vs Yellowstone gRPC

If you're tracking a handful of wallets, WebSocket subscriptions are perfect. Simple, built-in, no extra dependencies.

If you're tracking hundreds of wallets or need to filter by program, Yellowstone gRPC is better — I covered that in my transaction parsing post.

Pick the right tool for the job. For most wallet monitoring use cases, what I showed here is more than enough.

[Boost]

Baransel — Sun, 08 Mar 2026 17:35:35 +0000

I Built a Pomodoro App. Here's Why.

Baransel ・ Mar 8

#webdev #productivity #learning #showdev

I Built a Pomodoro App. Here's Why.

Baransel — Sun, 08 Mar 2026 17:35:17 +0000

I've tried every Pomodoro app out there. Seriously. Forest, Focus Keeper, Be Focused, random ones with 4.8 stars and 12 reviews. They all did the same thing — a timer that counts down from 25 minutes. Some of them did it with trees. Some with pixel art. Some with way too many settings.

None of them felt right.

So I built my own. It's called Foku, and it's now live on the App Store.

The Problem With Most Focus Apps

Most Pomodoro apps fall into two categories: either they're too simple (literally just a countdown timer with no context), or they're packed with features you'll never touch. Gamification, social leaderboards, ambient sounds, meditation modes — it's like they forgot the whole point is to help you focus.

I wanted something in between. A timer that looks clean, works fast, and actually shows me whether I'm being consistent over time. That's it. Nothing fancy.

What Foku Does

Foku is a focus timer with just enough features to be useful.

Here's the core of it:

Customizable Pomodoro sessions — 45-minute default because 25 never felt like enough for deep coding sessions. You can change it to whatever works for you.
Live Activity and Dynamic Island — start a session and it shows up on your lock screen. No need to open the app to check how much time is left.
Home screen widget — see your daily focus time, completed sessions, and current streak without opening anything.
Analytics — daily, weekly, monthly charts. I wanted to see patterns in when I'm most productive, not just count tomatoes.
Activity grid — think GitHub's contribution graph but for focus sessions. Five weeks of visual consistency tracking.
Multiple color themes — because staring at the same screen for hours means it should at least look good.

Everything runs locally on your device. No accounts, no cloud sync, no data collection. Your focus data stays on your phone.

Why I Didn't Just Use an Existing App

Two reasons.

First, I wanted to learn. Building a native iOS app with Live Activities, widgets, and Dynamic Island support taught me things I couldn't have picked up from tutorials alone. There's a difference between reading about WidgetKit and actually debugging why your widget won't refresh.

Second, I had opinions about how it should work. I don't want a 25-minute default — I want 45. I don't want achievement badges — I want a streak counter. I don't want ambient rain sounds — I want silence and a clean screen. Every existing app came with someone else's opinions baked in.

Building your own means every design choice is intentional. That matters more than it sounds.

The Tech Behind It

Foku runs on SwiftUI. The timer uses background tasks and local notifications to work even when the app isn't in the foreground. Live Activities use ActivityKit, and the widgets are built with WidgetKit.

The data layer is entirely local — no backend, no API calls. Core Data handles session storage, and the analytics are computed on-device.

I kept the architecture simple on purpose. A focus timer doesn't need a microservices backend. It needs to start fast, count accurately, and not drain your battery.

What Building a "Simple" App Actually Takes

Here's what nobody tells you about shipping a "simple" app: it's not simple.

The timer itself took a day. Everything around it took weeks. App Store screenshots, privacy policies, subscription setup, handling edge cases like "what happens when the user kills the app mid-session," testing on different devices, making the widget actually look good at every size.

The 80/20 rule is real. The last 20% of polish takes 80% of the time. But that polish is what separates an app you open once from one you actually keep.

It's Free (Mostly)

The basic timer is completely free. No ads, no time limits, no "watch a video to unlock your third session."

Foku Pro unlocks full analytics with charts and custom color themes. That's $2.99/month or $19.99/year. I priced it low because I know what it's like to be a student or a developer trying to stay focused without spending a fortune on productivity tools.

What's Next

I'm actively working on Foku. There's a lot I want to add — better analytics, session categories, maybe Shortcuts integration. But I'm being deliberate about it. Every feature has to earn its place.

If you want to try it, here's the link: Foku on the App Store.

It works on iPhone, iPad, Mac (Apple Silicon), and even Vision Pro. Give it a shot and let me know what you think.

I built this for myself. Turns out that's the best way to build something others actually want to use too.

How I Stay Productive as a Solo Developer

Baransel — Sun, 01 Mar 2026 19:21:11 +0000

Working alone is great until you realize nobody is going to tell you what to do next. No standup. No sprint board someone else filled in. No manager pinging you on Slack asking for an update. It's just you, your editor, and a list of things that somehow keeps growing.

I've been working solo on projects for a while now, and I won't pretend I have it all figured out. But I've found a few things that consistently help me stay on track without burning out or staring at my screen doing nothing for three hours.

I write down what I'm going to do before I open my editor

This sounds basic but it changed everything for me. Before I even touch code, I open a note and write down 2 or 3 things I want to finish today. Not a backlog. Not a Jira board. Just a few lines.

Something like:

Fix the login redirect bug
Add the settings page layout
Write tests for the API endpoint

That's it. When I don't do this, I end up jumping between tasks, half-finishing things, and feeling like I did nothing at the end of the day.

Small tasks first

I used to try and start with the hardest thing on my list because that's what every productivity blog tells you. "Eat the frog" and all that.

Doesn't work for me. If I start with something hard, I get stuck early and lose momentum. What actually works is knocking out one or two small tasks first. It gets me moving. By the time I hit the harder stuff, I'm already in the zone and it doesn't feel as bad.

I don't code all day

This was hard to accept at first. I used to think that if I wasn't coding for 8+ hours straight, I wasn't being productive. But honestly, my best work happens in focused blocks of 2 to 3 hours. After that, the quality drops and I start making dumb mistakes.

So now I work in chunks. A few hours of deep work, then I step away. Go for a walk, eat something, go to the gym. When I come back I'm usually sharper and I can do another focused session.

Trying to force 10 hours of coding is just lying to yourself. Half of those hours are you staring at the screen pretending to work.

Music helps, but not always

I know this is personal, but I can't code in silence. I need something in the background. Usually it's lo-fi, sometimes it's ambient stuff, sometimes I just put on a long playlist and forget about it.

But if I'm doing something that requires real thinking, like designing a data model or debugging something weird, I turn everything off. Silence helps when the problem is hard. Music helps when the work is repetitive.

I batch similar tasks together

Context switching kills productivity. If I'm writing frontend code, I try to finish all the frontend work before moving to the backend. If I'm fixing bugs, I fix all the bugs I can before switching to new features.

Every time you jump between different types of work, your brain needs time to adjust. It feels small but it adds up fast. Batching similar tasks together saves me at least an hour a day, probably more.

I say no to most new ideas while I'm building something

This one is tough because new ideas feel exciting and the thing you're currently building feels boring. But if you chase every new idea, you'll never finish anything.

When I get a new idea while working on something, I write it down in a note and move on. That's it. I don't create a repo. I don't research the tech. I don't even think about it too much. I just write it down so I don't forget, and go back to what I was doing.

Most of those ideas don't seem as exciting a week later anyway.

I track what I actually did, not just what I planned

At the end of the day I quickly write down what I got done. Not in detail, just a quick list. This helps me see patterns over time. I notice which days I get the most done, what types of tasks I tend to avoid, and when I'm starting to burn out.

It also feels good to look back at a week and see a list of things you actually shipped instead of just guessing.

It's not about discipline, it's about systems

I don't think I'm more disciplined than anyone else. I just found a few small systems that work for me and I stick to them. The daily list, the small tasks first, the focused blocks, the batching.

None of this is revolutionary. But doing it consistently is what makes the difference. Especially when you're working alone and there's nobody holding you accountable except yourself.

Stop Overengineering Your Side Projects

Baransel — Sat, 21 Feb 2026 11:38:44 +0000

I have a graveyard of unfinished projects. Seriously. If you looked at my old repos you'd find half-built dashboards, abandoned CLIs, and at least three "starter templates" that I spent weeks perfecting and never used for anything.

The pattern was always the same. I'd get excited about an idea, spend two days setting up the perfect folder structure, add linting, CI, Docker, maybe even a design system. And by the time I was "ready to start building" I'd already lost interest.

Sound familiar?

The trap is feeling productive

Setting up tooling feels like progress. You configure ESLint, set up Prettier, add path aliases, create a beautiful README, maybe even write a contributing guide. For a project that only you will ever touch.

It's comfortable because it's familiar. You know how to do it. And it gives you that satisfying feeling of "doing things right."

But you're not building anything yet.

I've done this so many times that I started recognizing the pattern. The moment I catch myself spending more than 30 minutes on config for a side project, I know I'm just procrastinating.

What actually worked for me

When I built GymDose I did the opposite of what I normally do. I didn't plan the architecture. I didn't set up a monorepo. I didn't even think about scalability.

I just opened Flutter, created a screen, and started building the thing I needed.

The first version looked rough. The state management was all over the place. I had hardcoded strings everywhere. But it worked. I could open the app, tap my supplements, and close it. That was enough.

And because it worked I kept using it. Because I kept using it I kept improving it. Small fixes here, a better layout there. Over a few months it turned into something I was actually proud of, and I eventually published it.

None of that would've happened if I started with a "proper" architecture.

You don't need most of what you think you need

For a side project you probably don't need:

A monorepo setup
Docker in development
CI/CD pipelines (just deploy manually at first)
Separate staging and production environments
A custom component library
100% test coverage
TypeScript strict mode on day one

I'm not saying these things are bad. They're great in the right context. But for a side project you're building alone on weekends? They're just overhead that slows you down before you even know if the idea is worth pursuing.

You can always add them later. You almost never need them at the start.

The real goal is to find out if the idea works

Side projects aren't about code quality. They're about answering one question: does this thing solve a problem?

If yes, you'll naturally clean up the code because you'll keep working on it. If no, you just saved yourself weeks of planning something that was never going to matter anyway.

I wasted months building "proper" projects that nobody, including me, ever used. The one I actually shipped was the messiest one I ever started.

Some rules I try to follow now

One file is fine. If you can build the first version in a single file, do it. Split later when it actually gets painful, not before.

Skip the abstractions. Don't create a utils/ folder with three functions in it. Don't write a custom hook for something you use once. Copy-paste is completely fine for a prototype.

Deploy the ugly version. Put it out there. Use it yourself. Show it to one friend. The feedback from a working prototype is worth more than a month of planning in your head.

Give yourself a time limit. I try to get something working in one weekend. If I can't get a usable version in two days, either the scope is too big or I'm overcomplicating it.

Don't optimize what doesn't exist yet. You can't improve something you haven't built. Ship first, optimize later. The bottleneck is almost never performance, it's the fact that the project doesn't exist yet.

This isn't about writing bad code

I want to be clear. I'm not saying write garbage and call it done. What I'm saying is lower the bar for starting and raise it gradually as the project proves itself.

The best code I've written came from projects that started messy and got cleaned up over time. Because by that point I actually understood the problem well enough to make good decisions, instead of guessing upfront.

Just build the thing

If you have an idea sitting in your notes right now, here's what I'd do:

Open your editor
Create one file
Build the core feature, nothing else
Use it yourself for a week
Then decide if it's worth investing more time

That's it. No boilerplate, no template, no setup ritual.

The projects that matter are the ones that exist.

Why I Built GymDose: A Simple Supplement Tracker for Real Fitness Journeys

Baransel — Wed, 03 Dec 2025 21:42:51 +0000

Over the last couple of years, fitness has become a huge part of my life. I lost 45 kilograms through training, daily cardio, eating better, and staying consistent with my supplements. And even though I was motivated, there was one simple thing I kept messing up:

I couldn’t remember which supplements I had taken each day.

Some mornings I’d double-dose my omega-3 without realizing. Some nights I’d remember I forgot my multivitamin. Some days I’d start creatine loading… and then completely forget the next day.

It sounds small, but when you’re serious about your fitness, these details matter.

And I hated the feeling of being inconsistent after working so hard.

That’s how GymDose started — not as an app for the world, but as an app for me.

From Personal Problem → Personal Tool → Public App

I tried using habit trackers, to-do apps, reminder apps, and “all-in-one” fitness apps.

But everything felt too bloated or unnecessarily complicated.

I didn’t want badges, charts, motivational quotes, or 40 menu items.

I just wanted something simple:

Open the app
See my supplements
Tap what I took
Close it

That’s it.

So I built exactly that — a minimal supplement tracker that fits naturally into a fitness routine.

It started as a private project. Something for my own daily use. But after using it for months, refining the UI, fixing the flow, and realizing it genuinely helped me stay consistent, I decided to release it publicly.

That’s how GymDose went live on the App Store.

If you want to try it:

https://apps.apple.com/us/app/gymdose-supplement-tracker/id6756020237

Designed for People Who Actually Train

GymDose is built from the perspective of someone who loves lifting, supplements, and self-improvement. The design is intentionally:

Clean
Dark and minimal
Fast to use
Zero clutter

Because when you train almost every day, have pre-workout routines, post-workout routines, late-night supplements, and early-morning creatine… the last thing you want is a noisy, over-engineered app.

The goal was simple:

Make consistency easier than ever.

And because I track my own supplements every single day, every screen was designed with real use in mind.

What GymDose Helps You Do

Log all your supplements

Creatine, omega-3, multivitamin, calcium + D3, protein, collagen — whatever you take regularly.

Custom reminders

Morning, pre-workout, post-workout, night.

Set your own schedule that fits your routine.

Clean daily overview

See what you already took, what’s left, and what time you usually take each supplement.

Simple progress tracking

Nothing too complicated — just enough to stay aware of your consistency.

Built-in measurement units

Grams, pills, scoops, servings.

And you can add your own.

Quick to use

You can open the app, log your supplements, and close it in 3 seconds.

Built by One Person With a Lot of Care

I built GymDose myself — the design, code, UX, testing, everything.

And because I’m still deep in my fitness journey, I use the app every day. That’s why every update has a purpose: small improvements that make it easier and smoother to track supplements without thinking about it.

I’m planning more updates soon, and if you have feedback, I truly read every message.

Why Supplements Matter in My Journey

When I say supplements helped me, I mean it.

During my weight loss — from 99 kg down to 54 kg lost total — consistency was everything. Supplements aren’t magic, but when you train hard, sleep properly, and eat well, they help you stay healthy, energized, and recover better.

But consistency is the real game-changer.

That’s why GymDose exists:

to remove one tiny barrier from your fitness routine and make staying consistent easier.

Thank You for Checking It Out

If GymDose helps even a few people the way it helped me, it’s worth it.

Here’s the link again if you want to try it out:
iOS: https://apps.apple.com/us/app/gymdose-supplement-tracker/id6756020237

Android: https://play.google.com/store/apps/details?id=com.baransel.dev.gym.supplement.tracker

If you have ideas, suggestions, or anything you want added — tell me.
This app will keep improving.

Stay consistent. Stay healthy.
And take your supplements. 💪

10 Common JavaScript Pitfalls (and How to Avoid Them)

Baransel — Fri, 19 Sep 2025 22:50:53 +0000

10 Common JavaScript Pitfalls (and How to Avoid Them)

JavaScript is powerful, flexible, and everywhere — but that flexibility comes with traps. Even experienced devs fall into them. I want to share 10 common pitfalls I’ve seen (or hit myself), and how you can avoid each one. No fluff — just what works.

🎯 Why This Matters

If you’ve been coding for a while, you’ve probably hit some strange bugs where the code “looked fine” but behaved completely differently. That’s because JavaScript has quirks: scope issues, async gotchas, type coercion — the list goes on.

The good news? Once you know these patterns, you can spot and avoid them instantly. Let’s dive in.

🧠 10 Pitfalls to Watch Out For

Implicit globals — forgetting let or const makes variables global.
Misusing this — context depends on how the function is called.
Callback hell — deeply nested code, hard to maintain.
== vs === confusion — type coercion surprises.
Hoisting quirks — var vs let/const.
Closures inside loops — unexpected captured values.
Async bugs — forgetting await, unhandled promises.
Floating point precision — 0.1 + 0.2 !== 0.3.
Inefficient DOM ops — reflows, repeated queries.
Overusing dependencies — bloated bundles and hidden bugs.

📱 Examples

Implicit Globals

function foo() {
  x = 5; // Oops — global variable
}

✅ Always declare with let or const.
✅ Use linters like ESLint to catch this early.

Misusing `this`

const obj = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);
  },
};

const greet = obj.greet;
greet(); // undefined instead of "Alice"

✅ Use arrow functions only when you don’t need this.
✅ Use .bind() when necessary.

…and so on through the rest of the pitfalls.

🚀 Key Takeaways

Avoiding these pitfalls doesn’t mean writing perfect code. It means being aware. Once you recognize these patterns, debugging gets easier, your codebase is cleaner, and teammates will thank you.

If you enjoyed this, keep an eye out — I’m planning follow-ups on async/await best practices and React pitfalls.

🌱 Final Thoughts

JavaScript isn’t broken — it just has personality. The more you understand it, the more productive (and less frustrated) you’ll be.

How I Lost 35kg and Built a Habit Tracker That Actually Works

Baransel — Thu, 08 May 2025 16:57:21 +0000

How I Lost 35kg and Built a Habit Tracker That Actually Works

Six months ago, I was lazy, unfocused, and overwhelmed.

I’d scroll mindlessly on my phone, work beyond healthy hours, skip workouts, and constantly put off things I knew were good for me. I didn’t need a fancy productivity system — I needed a push. Something simple. Visual. Relentless.

That’s when I built Days Without – Habit Tracker.

🎯 Why I Built It

I wasn’t aiming to reinvent productivity apps. I built Days Without for myself — because I genuinely needed help. I was tired of breaking promises to myself like “I’ll start tomorrow” or “just 10 more minutes on Instagram.”

I needed a streak counter. A clear, visual reminder of how long I’ve stuck to something. Something lightweight and shame-free, but still motivating.

With Days Without, I started tracking just three things:

Days without endless scrolling
Days without working overtime
Days where I walked or hit the gym

That’s it. No complex setup, no syncing, no data overload. Just a streak and a purpose.

🧠 What Happened Next

In 6 months, I lost 35 kilograms.

I stopped doomscrolling and used that time to move.
I became aware of how much I was overworking and started setting healthy limits.
I committed to walking, then lifting, and just kept going.

And the coolest part? The app was silently holding me accountable the whole time.

📱 About the App

Days Without – Habit Tracker is now live on Google Play. Here’s what it can do:

Track unlimited habits or goals
Customize each streak with a name and reason
See your progress in real time: days, hours, and minutes
Optional motivational quotes
Minimal design, built for dark mode lovers
100% privacy-friendly — no accounts or data collection

Whether you want to quit bad habits or build new ones, this app helps you start, and more importantly — keep going.

🚀 Who It’s For

If you:

Feel stuck in a loop of procrastination
Want to reduce screen time or social media
Are trying to build healthy routines
Need visual motivation to stay consistent

...this app is made for you.

🌱 Final Thoughts

I built Days Without to save myself from my own laziness. Now it’s helping others do the same — and that’s incredibly rewarding.

If you’re trying to change something in your life, give it a try. It’s simple, clean, and built with real struggle (and real success) behind it.

👉 Download Days Without on Google Play

And if you end up using it — let me know. I’d love to hear your story.

— Baransel

TypeScript: JavaScript's Superhero Cape

Baransel — Thu, 24 Oct 2024 21:24:02 +0000

Why Add Types to JavaScript?

Picture this: You're happily coding in JavaScript, when suddenly - "Cannot read property 'name' of undefined". Ugh, we've all been there! TypeScript is like having a friend who catches these mistakes before they happen.

The Origin Story

JavaScript is like Peter Parker before the spider bite - great potential, but prone to accidents. TypeScript is the spider bite that gives JavaScript superpowers. It adds a type system that helps catch bugs early and makes your code more reliable.

Your First TypeScript Adventure

Let's start with a simple JavaScript function and transform it into TypeScript:

// JavaScript
function greet(name) {
    return "Hello, " + name + "!";
}

Now, let's add some TypeScript magic:

// TypeScript
function greet(name: string): string {
    return "Hello, " + name + "!";
}

See that : string? That's TypeScript telling us "this function takes a string and returns a string". Now try this:

greet(123); // Error: Argument of type 'number' is not assignable to parameter of type 'string'

TypeScript just saved us from a potential bug! 🎉

Basic Types: Your New Superpowers

Let's explore some basic TypeScript types:

// Basic types
let heroName: string = "Spider-Man";
let age: number = 25;
let isAvenger: boolean = true;
let powers: string[] = ["web-slinging", "wall-crawling"];

// Object type
let hero: {
    name: string;
    age: number;
    powers: string[];
} = {
    name: "Spider-Man",
    age: 25,
    powers: ["web-slinging", "wall-crawling"]
};

Interfaces: Creating Your Own Types

Interfaces are like blueprints for objects. They're super useful for defining the shape of your data:

interface Hero {
    name: string;
    age: number;
    powers: string[];
    catchPhrase?: string; // Optional property
}

function introduceHero(hero: Hero): void {
    console.log(`I am ${hero.name}, and I'm ${hero.age} years old!`);
    if (hero.catchPhrase) {
        console.log(hero.catchPhrase);
    }
}

const spiderMan: Hero = {
    name: "Spider-Man",
    age: 25,
    powers: ["web-slinging", "wall-crawling"]
};

introduceHero(spiderMan);

Type Aliases: Your Custom Types

Sometimes you want to create your own type combinations:

type PowerLevel = 'rookie' | 'intermediate' | 'expert';

interface Hero {
    name: string;
    powerLevel: PowerLevel;
}

const batman: Hero = {
    name: "Batman",
    powerLevel: "expert" // TypeScript will ensure this is one of the allowed values
};

Generics: The Ultimate Flexibility

Generics are like wildcards that make your code more reusable:

function createHeroTeam<T>(members: T[]): T[] {
    return [...members];
}

interface Superhero {
    name: string;
    power: string;
}

interface Villain {
    name: string;
    evilPlan: string;
}

const heroes = createHeroTeam<Superhero>([
    { name: "Iron Man", power: "Technology" },
    { name: "Thor", power: "Lightning" }
]);

const villains = createHeroTeam<Villain>([
    { name: "Thanos", evilPlan: "Collect infinity stones" }
]);

Real-World Example: A Todo App

Let's build a simple todo app with TypeScript:

interface Todo {
    id: number;
    title: string;
    completed: boolean;
    dueDate?: Date;
}

class TodoList {
    private todos: Todo[] = [];

    addTodo(title: string, dueDate?: Date): void {
        const todo: Todo = {
            id: Date.now(),
            title,
            completed: false,
            dueDate
        };
        this.todos.push(todo);
    }

    toggleTodo(id: number): void {
        const todo = this.todos.find(t => t.id === id);
        if (todo) {
            todo.completed = !todo.completed;
        }
    }

    getTodos(): Todo[] {
        return this.todos;
    }
}

// Usage
const myTodos = new TodoList();
myTodos.addTodo("Learn TypeScript with baransel.dev");
myTodos.addTodo("Build awesome apps", new Date("2024-10-24"));

TypeScript with React

TypeScript and React are like peanut butter and jelly. Here's a quick example:

interface Props {
    name: string;
    age: number;
    onSuperPower?: () => void;
}

const HeroCard: React.FC<Props> = ({ name, age, onSuperPower }) => {
    return (
        <div>
            <h2>{name}</h2>
            <p>Age: {age}</p>
            {onSuperPower && (
                <button onClick={onSuperPower}>
                    Activate Super Power!
                </button>
            )}
        </div>
    );
};

Tips and Tricks

Start Simple: Begin with basic types and gradually add more complex ones.
Use the Compiler: TypeScript's compiler is your friend - pay attention to its errors.
Don't Over-Type: Sometimes any is okay (but use it sparingly!).
Enable Strict Mode: Add "strict": true to your tsconfig.json for maximum protection.

Common Gotchas and How to Fix Them

// Problem: Object is possibly 'undefined'
const user = users.find(u => u.id === 123);
console.log(user.name); // Error!

// Solution: Optional chaining
console.log(user?.name);

// Problem: Type assertions
const input = document.getElementById('myInput'); // Type: HTMLElement | null
const value = input.value; // Error!

// Solution: Type assertion or type guard
const value = (input as HTMLInputElement).value;
// or
if (input instanceof HTMLInputElement) {
    const value = input.value;
}

Wrapping Up

TypeScript might seem like extra work at first, but it's like having a superpower that helps you catch bugs before they happen. Start small, gradually add more types, and before you know it, you'll be wondering how you ever lived without it!

Remember:

Types are your friends
The compiler is your sidekick
Practice makes perfect

Git Good: A Beginner's Guide to Version Control Magic

Baransel — Tue, 03 Sep 2024 15:11:00 +0000

What's All This Git About?

Picture this: You're working on a project, and suddenly you realize you've made a terrible mistake. Wouldn't it be great if you could go back in time? Well, meet Git, your personal time machine for code!

Git is like a magical notebook that keeps track of every change you make to your project. It's like having infinite "undo" buttons, each one taking you back to a different point in your project's history. Cool, right?

Why Git Will Save Your Bacon

1) Oops-Proof Your Code: Made a mistake? No worries! Git lets you rewind to before things went south.
2) Collaborate Like a Pro: Working with others? Git helps you merge your work without stepping on each other's toes.
3) Experiment Freely: Want to try something crazy? Create a branch and go wild without fear of breaking your main project.

Getting Started: Your First Git Steps

Let's dive in and get our hands dirty with some Git basics.

Setting Up Git

First things first, let's make sure Git is installed and set up:

# Check if Git is installed
git --version

# Set up your identity
git config --global user.name "Baransel Arslan"
git config --global user.email "root@baransel.dev"

Creating Your First Git Repository

Now, let's create a new project and turn it into a Git repository:

# Create a new directory
mkdir my-awesome-project
cd my-awesome-project

# Initialize a new Git repository
git init

Boom! You've just created your first Git repository. It's like you've just opened a new, magical notebook.

The Git Workflow: Add, Commit, Push

Here's where the real magic happens. Let's walk through the basic Git workflow:

1) Making Changes

Create a new file called hello.txt and add some text to it.

2) Staging Changes

git add hello.txt

This is like telling Git, "Hey, keep an eye on this file!"

3) Committing Changes

git commit -m "Add hello.txt with a friendly greeting"

You've just created your first checkpoint. Git will remember this moment forever!

4) Pushing Changes (if you're using a remote repository)

git push origin master

This sends your changes to a remote repository (like GitHub). It's like backing up your magical notebook to the cloud.

Branching Out: Parallel Universes for Your Code

Branches in Git are like parallel universes. You can create a new branch to experiment without affecting your main project.

# Create a new branch
git branch new-feature

# Switch to the new branch
git checkout new-feature

# Or do both in one command
git checkout -b another-feature

Merging: Bringing It All Together

Once you're happy with your changes in a branch, you can merge it back into your main branch:

# Switch back to the main branch
git checkout main

# Merge your feature branch
git merge new-feature

Oops Moments: Undoing Things in Git

Made a mistake? No worries! Git has your back:

# Undo changes in a file
git checkout -- filename

# Undo your last commit (but keep the changes)
git reset HEAD~1

# Nuclear option: Undo changes and delete commits
git reset --hard HEAD~1

Git Best Practices: Leveling Up Your Git Game

1) Commit Early, Commit Often: Small, frequent commits are easier to manage than big, infrequent ones.
2) Write Good Commit Messages: Future you will thank present you for clear, descriptive messages.
3) Use Branches Wisely: Keep your main branch stable and experiment in feature branches.
4) Pull Before You Push: Always get the latest changes before pushing your own.

Git Tools to Make Your Life Easier

1) GitHub: A popular platform for hosting Git repositories and collaborating with others.
2) GitKraken: A visual Git client that makes branching, merging, and collaborating a breeze.
3) GitLab: An alternative to GitHub with built-in CI/CD pipelines and other cool features.

Wrapping Up: You're a Git Wizard Now!

Congratulations! You've taken your first steps into the magical world of Git. It might seem like a lot at first, but with practice, it'll become second nature.

Remember, Git is here to make your life easier, not harder. It's okay to make mistakes – that's what version control is for!

Taming the Regex Beast: A Beginner's Guide to Regular Expressions

Baransel — Fri, 30 Aug 2024 11:47:15 +0000

What's This Regex Thing Anyway?

Picture this: You're sifting through a mountain of text, trying to find every email address. Sounds like a job for Ctrl+F, right? Well, not so fast! Enter regular expressions, or "regex" for short. It's like Ctrl+F on steroids, capable of finding patterns instead of just exact matches.

Regex is like a Swiss Army knife for text processing. Need to validate email addresses? Regex. Want to extract all the URLs from a webpage? Regex. Trying to replace specific patterns in a document? You guessed it – regex to the rescue!

The Building Blocks: Your Regex Toolkit

Before we dive into the deep end, let's get familiar with our tools:

Characters: Just your regular, everyday letters and numbers.
Metacharacters: Special characters with superpowers, like . (matches any character) or ^ (start of a line).
Quantifiers: These tell us "how many," like * (zero or more) or + (one or more).

It's like learning a new language, but instead of "Hello, world!" we're saying "Find me a pattern!"

Your First Regex: Baby Steps

Let's start simple. Say you want to find all instances of "cat" in a text. Your regex would simply be:

cat

Exciting, right? Okay, maybe not. But what if you want to find "cat" or "Cat"? Try this:

[Cc]at

This says "find either 'c' or 'C', followed by 'at'". Now we're cooking!

Practical Examples: Regex in the Wild

Validating Email Addresses

Here's a simple regex for catching most email addresses:

^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$

Whoa, that's a mouthful! Let's break it down:

^: Start of the string
[a-zA-Z0-9._%+-]+: One or more letters, numbers, or certain symbols
@: Literally the @ symbol
[a-zA-Z0-9.-]+: One or more letters, numbers, dots, or hyphens
\.: A literal dot (we escape it with a backslash)
[a-zA-Z]{2,}: Two or more letters
$: End of the string

Extracting URLs from Text

Want to pull out all the URLs from a chunk of text? Try this on for size:

https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)

I know, I know – it looks like a cat walked across your keyboard. But it works!

Finding and Replacing Text Patterns

Say you want to replace all instances of "color" with "colour" (hello, British English!). Here's how you might do it in JavaScript:

let text = "The color of the colorful balloon is my favorite color.";
let britishText = text.replace(/color/g, "colour");
console.log(britishText);
// Output: "The colour of the colourful balloon is my favorite colour."

Regex in Different Languages: Same Beast, Different Cages

The beauty of regex is that it's pretty universal. Here's how you might use our email validation regex in different languages:

JavaScript

let emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
console.log(emailRegex.test("example@email.com")); // true

Python

import re
email_regex = r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$'
print(re.match(email_regex, "example@email.com")) # <re.Match object; span=(0, 17), match='example@email.com'>

PHP

$email_regex = '/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/';
var_dump(preg_match($email_regex, "example@email.com")); // int(1)

Tools of the Trade: Regex Playgrounds

Before you unleash your regex on real data, it's a good idea to test it out. Here are some great online tools:

These sites let you test your regex, explain what each part does, and even visualize the pattern. They're like training wheels for your regex bicycle!

Watch Out: Common Regex Pitfalls

Greedy vs. Lazy: By default, regex is greedy and will match as much as possible. Use ? after a quantifier to make it lazy.
Escaping Special Characters: Remember to escape special characters with a backslash when you want to match them literally.
Performance: Complex regex can be slow on large datasets. Keep it simple when you can!

Wrapping Up: You've Got the Power!

Congratulations! You've taken your first steps into the powerful world of regular expressions. It might seem daunting at first, but with practice, you'll be slicing and dicing text like a pro.

Remember, regex is a tool, not a magic wand. Sometimes a simple string method will do the job just fine. But when you need to tame wild text patterns, regex is your best friend.

So, what text processing challenges are you facing? Drop a comment below and let's see if we can cook up a regex solution together!

Happy pattern matching, and may your strings always be well-formatted! 🎉

Progressive Web Apps: The Future of Web Development

Baransel — Thu, 29 Aug 2024 11:55:41 +0000

What's All This PWA Buzz About?

Picture this: You're on the subway, trying to check a website on your phone, but the signal keeps dropping. Frustrating, right? Enter Progressive Web Apps, the superheroes of the web world. They work offline, load at lightning speed, and even send you notifications. It's like giving your website superpowers!

The PWA Origin Story

Back in the day (like, way back in 2015), we had a choice: build a website or build an app. It was like choosing between a bicycle and a car. But then, some clever folks at Google thought, "Why not both?" And thus, the PWA was born!

Building Your First PWA: The Adventure Begins

Let's roll up our sleeves and build a simple PWA together. We'll create a "Dad Jokes" app because, well, who doesn't love a good (or bad) dad joke?

Step 1: The Basics - Just a Regular Webpage

First, let's create a basic HTML file. This is our "bicycle" - functional, but not quite super-powered yet.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dad Jokes PWA</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Dad Jokes</h1>
    <p id="joke">Click the button for a dad joke!</p>
    <button id="jokeBtn">Get New Joke</button>
    <script src="app.js"></script>
</body>
</html>

Step 2: Add Some Style - Because Even Dad Jokes Need to Look Good

Let's add a touch of CSS to make our app look snazzy:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
}

#joke {
    margin: 20px 0;
    font-style: italic;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

Step 3: The Magic of JavaScript - Fetching Dad Jokes

Now, let's add some JavaScript to fetch jokes from an API:

const jokeElement = document.getElementById('joke');
const jokeBtn = document.getElementById('jokeBtn');

async function fetchJoke() {
    try {
        const response = await fetch('https://icanhazdadjoke.com/', {
            headers: {
                'Accept': 'application/json'
            }
        });
        const data = await response.json();
        jokeElement.textContent = data.joke;
    } catch (error) {
        jokeElement.textContent = "Oops! Looks like the joke got stuck in dad's old briefcase.";
    }
}

jokeBtn.addEventListener('click', fetchJoke);

// Fetch a joke when the page loads
fetchJoke();

Step 4: The PWA Transformation - Adding Superpowers

Now, let's turn our regular website into a PWA. First, we need a manifest file. Create a file named manifest.json:

{
    "name": "Dad Jokes PWA",
    "short_name": "DadJokes",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#4285f4",
    "icons": [
        {
            "src": "icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

Don't forget to add a link to this manifest in your HTML:

<link rel="manifest" href="manifest.json">

Step 5: The Secret Sauce - Service Workers

Service workers are like tiny, invisible web butlers. They cache your assets and even work offline. Create a file named service-worker.js:

const CACHE_NAME = 'dad-jokes-cache-v1';
const urlsToCache = [
    '/',
    '/index.html',
    '/style.css',
    '/app.js',
    '/icon.png'
];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(urlsToCache))
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => response || fetch(event.request))
    );
});

Now, register this service worker in your app.js file

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
            .then(registration => console.log('ServiceWorker registered'))
            .catch(error => console.log('ServiceWorker registration failed:', error));
    });
}

Testing Your PWA Superpowers

Offline Mode: Turn off your internet and refresh the page. Your app should still work!
Install Prompt: On supported browsers, you should see an option to install your PWA.
Lighthouse Audit: Use Chrome's Lighthouse tool to check your PWA's superpowers.

The Future is Progressive

Congratulations! You've just built your first PWA. It's like watching your child take their first steps, isn't it? (Speaking of dad jokes...)

As we move further into 2024, PWAs are becoming more powerful. They can access device features, work offline, and provide an app-like experience without the hassle of app stores.

So, the next time someone asks if you can build them a website or an app, you can say, "Why not both?" and introduce them to the wonderful world of PWAs!

What do you think about PWAs? Have you built one before? Let me know in the comments below, and don't forget to share your favorite dad jokes!

Forem: Baransel

Monitor Any Solana Wallet in Real-Time with Node.js

1. Set Up a WebSocket Connection

2. Subscribe to Account Changes

3. Track Token Movements Too

4. Watch for New Transactions with onLogs

5. Don't Forget to Clean Up

6. Handle Disconnections

7. Putting It All Together

When to Use This vs Yellowstone gRPC

[Boost]

I Built a Pomodoro App. Here's Why.

Baransel ・ Mar 8

I Built a Pomodoro App. Here's Why.

The Problem With Most Focus Apps

What Foku Does

Why I Didn't Just Use an Existing App

The Tech Behind It

What Building a "Simple" App Actually Takes

It's Free (Mostly)

What's Next

How I Stay Productive as a Solo Developer

I write down what I'm going to do before I open my editor

Small tasks first

I don't code all day

Music helps, but not always

I batch similar tasks together

I say no to most new ideas while I'm building something

I track what I actually did, not just what I planned

It's not about discipline, it's about systems

Stop Overengineering Your Side Projects

The trap is feeling productive

What actually worked for me

You don't need most of what you think you need

The real goal is to find out if the idea works

Some rules I try to follow now

This isn't about writing bad code

Just build the thing

Why I Built GymDose: A Simple Supplement Tracker for Real Fitness Journeys

From Personal Problem → Personal Tool → Public App

Designed for People Who Actually Train

What GymDose Helps You Do

Log all your supplements

Custom reminders

Clean daily overview

Simple progress tracking

Built-in measurement units

Quick to use

Built by One Person With a Lot of Care

Why Supplements Matter in My Journey

Thank You for Checking It Out

10 Common JavaScript Pitfalls (and How to Avoid Them)

10 Common JavaScript Pitfalls (and How to Avoid Them)

🎯 Why This Matters

🧠 10 Pitfalls to Watch Out For

📱 Examples

Implicit Globals

Misusing this

🚀 Key Takeaways

🌱 Final Thoughts

How I Lost 35kg and Built a Habit Tracker That Actually Works

How I Lost 35kg and Built a Habit Tracker That Actually Works

🎯 Why I Built It

🧠 What Happened Next

📱 About the App

🚀 Who It’s For

🌱 Final Thoughts

TypeScript: JavaScript's Superhero Cape

Why Add Types to JavaScript?

The Origin Story

Your First TypeScript Adventure

Basic Types: Your New Superpowers

Interfaces: Creating Your Own Types

Type Aliases: Your Custom Types

Generics: The Ultimate Flexibility

Real-World Example: A Todo App

TypeScript with React

Tips and Tricks

Common Gotchas and How to Fix Them

Wrapping Up

Misusing `this`