Forem: RealACJoshua

Edge Computing with Cloudflare Workers: How I Deployed Global APIs Without Cold Starts

RealACJoshua — Tue, 24 Feb 2026 15:28:40 +0000

I used to deploy everything to traditional serverless.

It worked.

Until it didn’t.

Cold starts.
Regional latency.
Users far from my deployment region waiting longer than they should.

Then I tried deploying at the edge.

Not multi-region.

Not auto-scaling.

Actually at the edge.

And that’s when I started using Cloudflare Workers.

If you want sub-millisecond global execution without managing infrastructure, here’s what worked for me — including Durable Objects and KV.

In this post, I’ll walk you through building and deploying a real API on Cloudflare Workers, using KV for caching and Durable Objects for state — plus how it compares to traditional serverless.

🎯 What We’re Building

Workers + KV + Durable Objects = Global Edge API

We’ll:

• Deploy a Worker
• Add KV caching
• Use Durable Objects for state
• Compare latency vs traditional serverless
• Understand when edge makes sense

🧠 First: What “Edge” Actually Means

With traditional serverless (e.g., AWS Lambda), your function runs in a specific region.

If your region is:

us-east-1

And your user is in Africa or Asia?

Latency increases.

With Cloudflare Workers:

Your code runs in data centers close to the user.

Same code.
Executed globally.

That’s a major architectural shift.

🛠️ Step 1: Create a Worker

Install Wrangler:

npm install -g wrangler

wrangler login

Create a new Worker:

wrangler init edge-api
cd edge-api

Basic Worker:

export default {
  async fetch(request: Request) {
    return new Response("Hello from the edge 🚀");
  }
};

Deploy:

wrangler deploy

That’s it.

Your API is now running globally.

No region configuration.

No scaling config.

No cold start provisioning.

⚡ Performance Comparison: Edge vs Traditional Serverless

Traditional Serverless:

• Region-bound
• Cold starts possible
• Network hops to user
• VPC complexity

Edge Workers:

• Globally distributed
• No traditional cold starts
• Lower latency
• Runs in V8 isolates

Workers don’t spin up containers.

They use lightweight isolates.

This is why startup time is extremely fast.

For latency-sensitive APIs?

This difference is noticeable.

📦 Step 2: Add KV for Global Caching

Cloudflare KV is a globally distributed key-value store.

Use it for:

• Caching API responses
• Feature flags
• Config data

Bind KV in wrangler.toml:

[[kv_namespaces]]
binding = "CACHE"
id = "your_kv_id"

Then in your Worker:

export default {
  async fetch(request: Request, env: any) {

    const cacheKey = "homepage_data";
    const cached = await env.CACHE.get(cacheKey);

    if (cached) {
      return new Response(cached);
    }

    const freshData = JSON.stringify({ message: "Fresh data" });

    await env.CACHE.put(cacheKey, freshData, {
      expirationTtl: 60
    });

    return new Response(freshData);
  }
};

Now:

• First request = compute
• Next requests = edge cached
• Globally replicated

KV is eventually consistent.

So don’t use it for strict transactional data.

🧠 Step 3: Durable Objects for Stateful Logic

Workers are stateless by default.

Durable Objects give you:

• Strong consistency
• Per-instance state
• Coordination logic

Use cases:

• Real-time rooms
• Rate limiting
• Game sessions
• Counters

Define a Durable Object:

export class Counter {
  value: number = 0;

  async fetch() {
    this.value++;
    return new Response(this.value.toString());
  }
}

[[durable_objects.bindings]]
name = "COUNTER"
class_name = "Counter"

Use it in your Worker:

export default {
  async fetch(request: Request, env: any) {
    const id = env.COUNTER.idFromName("global");
    const obj = env.COUNTER.get(id);
    return obj.fetch(request);
  }
};

Now you have:

A globally addressable, stateful object.

That’s powerful.

Traditional serverless needs external databases for this.

🌍 When Edge Wins

Use Workers when:

• You need global low latency
• You’re building APIs for worldwide users
• You want simple deployment
• You need fast startup times
• You’re building real-time coordination

🧱 When Traditional Serverless Still Makes Sense

Use regional serverless when:

• You need heavy CPU tasks
• Long-running background jobs
• Deep integration with cloud-native services
• Massive memory workloads

Edge is not a replacement for everything.

It’s a precision tool.

🧩 What About Cloudflare Pages?

Cloudflare Pages is great for static + frontend hosting.

You can combine:

Pages (frontend)

Workers (API logic)

But for backend logic, Workers are the real engine.

⚠️ Mistakes I Made

• Treating KV like a relational database
• Forgetting eventual consistency
• Storing large blobs unnecessarily
• Not understanding Durable Object locality

Understand your consistency model.

Edge is fast — but it has architectural tradeoffs.

🏁 Final Thoughts

Deploying at the edge changed how I think about backend architecture.

Instead of asking:

“What region should I deploy to?”

You ask:

“How close can I get to my users?”

Cloudflare Workers remove friction.

But you still need to design carefully.

Edge computing isn’t hype.

It’s architectural leverage.

If you’re building globally distributed apps, this is worth exploring.

Next, we could dive into:

• Building a full real-time app with Durable Objects
• Workers + AI inference at the edge
• Benchmarking edge vs regional APIs

Let me know which direction you want next.
Check my portfolio out TheACJ

Rust for WebAssembly: How I Built Near-Native Performance Web Apps

RealACJoshua — Sun, 22 Feb 2026 14:44:31 +0000

I wanted browser performance.

Not “fast enough.”
Not “optimized JavaScript.”

I wanted real performance.

So I tried Rust + WebAssembly.

What followed was:

• Broken builds
• Missing wasm targets
• Confusing bundler errors
• A lot of “why is this not loading?”

But once it clicked?

It became one of the most powerful tools in my stack.

If you want to use Rust for WebAssembly without drowning in tooling chaos, here’s exactly what worked for me.

In this post, I’ll walk you from zero setup to running Rust in the browser — including performance use cases and production patterns.

🎯 What We’re Building

Rust + WebAssembly + JavaScript integration = 🚀
Near-native performance inside the browser = ⚡

We’ll:

• Install the Rust WASM target
• Use wasm-pack properly
• Generate JS bindings
• Integrate with a frontend
• Understand where this actually makes sense

No theory fluff. Just practical steps.

🧠 Step 1: Install the WebAssembly Target

First mistake I made?

Trying to compile without the WASM target.

Install it:

rustup target add wasm32-unknown-unknown

If this fails, check your Rust version:

rustc --version

Make sure you're on stable.

🛠️ Step 2: Install wasm-pack (Critical Tool)

This is what simplifies everything.

cargo install wasm-pack

Without wasm-pack, you'll struggle generating JS bindings.

It handles:

• Compilation
• Glue code
• Packaging
• npm compatibility

🧩 Step 3: Create a Rust WASM Project

Now initialize

cargo new rust_wasm_demo --lib
cd rust_wasm_demo

Update your Cargo.toml:

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

This enables WebAssembly bindings.

✍️ Step 4: Write Rust That Exports to JavaScript

Inside src/lib.rs:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

That #[wasm_bindgen] attribute?

That’s what exposes your Rust function to JavaScript.

Without it — nothing works.

🚀 Step 5: Build for the Browser

Run:

wasm-pack build --target web

This generates a pkg/ directory containing:

• .wasm binary
• JavaScript bindings
• Type definitions

If you see strange linker errors, double-check:

Rust target installed

No Windows MSVC conflicts - if you see Windows MSVC conflict check out my post on fixing rust issues on Windows here

Correct crate type (cdylib)

🌐 Step 6: Use It in the Browser

Create a simple HTML file:

<script type="module">
  import init, { add } from "./pkg/rust_wasm_demo.js";

  async function run() {
    await init();
    console.log(add(5, 3));
  }

  run();
</script>

Open with a local server:

npx serve .

Why?

Because browsers block WASM loading via file://.

That mistake cost me 30 minutes.

⚡ Where Rust + WebAssembly Actually Shines

Don’t rewrite your whole frontend.

Use it for:

• Heavy math computations
• Cryptography
• Image processing
• Parsing large datasets
• Blockchain logic
• AI model preprocessing

For simple UI logic? JavaScript is fine.

📦 Production Pattern (What I Actually Use)

My setup:

Frontend (React / Next.js)
⬇
WASM module for heavy compute
⬇
Return results back to UI

Example pattern:

import init, { add } from "rust_wasm_demo";

await init();

const result = add(10, 20);

Keep WASM isolated to performance-critical functions.

⚠️ Common Mistakes I Made

• Trying to use WASM for everything
• Forgetting async initialization
• Not serving via HTTP
• Fighting bundlers unnecessarily
• Ignoring bundle size

Remember:

WASM is fast — but not magic.

It improves compute speed, not DOM manipulation.

🧠 Performance Reality Check

Why is Rust fast?

Because:

• It compiles to optimized machine-level bytecode
• Memory is manually controlled
• No runtime overhead like garbage collection

When compiled to WebAssembly:

You get near-native speed inside the browser sandbox.

That’s powerful.

🏁 Final Thoughts

Rust + WebAssembly is not hype.

It’s a precision tool.

If you:

• Need serious performance
• Want memory safety
• Are building compute-heavy apps

It’s worth it.

But use it strategically.

Not emotionally.

If this helped you break into Rust WASM without losing your sanity, drop a ❤️ or share it.

Next, I might cover:

• Rust WASM inside Next.js
• Using WASM for blockchain clients
• Benchmarking Rust vs JS properly

Let me know which one you want.

Check me out at https://theacj.com.ng

Next.js 16 Caching Explained: Revalidation, Tags, Draft Mode & Real Production Patterns

RealACJoshua — Sun, 22 Feb 2026 10:12:04 +0000

I used to treat caching in Next.js like a superstition.

Sometimes revalidate worked.
Sometimes ISR felt magical.
Sometimes nothing updated and I questioned reality.

Then Next.js 16 dropped — and the caching model finally made sense.

If you’re building production apps and want predictable caching, controlled invalidation, and proper preview workflows, this is the breakdown I wish I had earlier.

In this post, I’ll show you exactly how I now structure caching in Next.js 16 — using tags, on-demand revalidation, improved fetch controls, and draft mode.

🎯 What We’re Building

A production-ready mental model for caching:

• Static + dynamic control using fetch
• Tag-based invalidation
• On-demand revalidation
• Draft mode for preview workflows
• Real-world patterns I actually use

No guesswork. No accidental stale pages.

🧠 First: The New Mental Model

In Next.js 16, caching is no longer “page-based”.

It’s data-based.

The unit of caching is now the fetch() call.

That means:

• Every fetch can be cached or dynamic
• Every fetch can define revalidation rules
• Every fetch can be invalidated via tags

This is cleaner and more scalable.

🔥 1. Controlling Cache with fetch

Here’s the default behavior:

const res = await fetch("https://api.example.com/posts");

By default, this is cached in production.

Now let’s control it explicitly.

Static with Revalidation (ISR-style)

const res = await fetch("https://api.example.com/posts", {
  next: { revalidate: 60 }
});

This means:

• Cache this response
• Revalidate every 60 seconds

This replaces older ISR patterns in a more granular way.

Fully Dynamic (No Cache)

const res = await fetch("https://api.example.com/posts", {
  cache: "no-store"
});

This forces dynamic rendering.

Use this when:

• User-specific data
• Authenticated dashboards
• Rapidly changing metrics

🏷️ 2. The Real Upgrade: Cache Tags

This is where Next.js 16 becomes powerful.

You can now tag cached fetches.

const res = await fetch("https://api.example.com/posts", {
  next: { tags: ["posts"] }
});

Now the cache is associated with the "posts" tag.

Why does this matter?

Because you can invalidate it manually.

🚀 3. On-Demand Revalidation with Tags

Let’s say you create a new blog post via an admin panel.

You don’t want to wait 60 seconds.

You want instant refresh.

Create a route handler:

// app/api/revalidate/route.ts

import { revalidateTag } from "next/cache";

export async function POST() {
  revalidateTag("posts");
  return Response.json({ revalidated: true });
}

Now whenever you hit this endpoint, all cached fetches tagged "posts" are invalidated.

This is precise.

Not page-level.
Not global.
Targeted.

This is production-grade control.

🧪 4. Combining Revalidation + Tags (Best Pattern)

This is what I now use in real projects:

const res = await fetch("https://api.example.com/posts", {
  next: {
    revalidate: 3600,
    tags: ["posts"]
  }
});

What this gives me:

• Automatic hourly refresh
• Manual invalidation when needed
• No unnecessary rebuilds

This is the sweet spot.

📝 5. Draft Mode for Preview Workflows

If you’re building a CMS-driven app, preview matters.

Next.js 16 improves draft handling significantly.

Enable draft mode:

import { draftMode } from "next/headers";

export async function GET() {
  draftMode().enable();
  return Response.redirect("/admin");
}

Then inside your page:

import { draftMode } from "next/headers";

export default async function Page() {
  const { isEnabled } = draftMode();

  const res = await fetch("https://api.example.com/posts", {
    cache: isEnabled ? "no-store" : "force-cache"
  });

  const data = await res.json();

  return <div>{data.title}</div>;
}

When draft mode is active:

• Cache is bypassed
• You see unpublished changes

When off:

• Full caching resumes

This makes preview systems predictable.

⚙️ 6. Production Pattern I Actually Use

Here’s my standard architecture:

Public content:

next: { revalidate: 600, tags: ["posts"] }

Admin updates:

revalidateTag("posts")

User dashboards:

cache: "no-store"

Preview routes:

draftMode + no-store

This gives:

• Performance
• Freshness
• Precision
• Scalability

⚠️ Common Mistakes I Made

• Mixing cache: "no-store" with revalidate
• Forgetting tags and trying to revalidate entire paths
• Assuming dev mode reflects production caching
• Over-invalidating

Remember: Dev mode behaves differently.

Always test caching behavior in production builds:

next build
next start

🧩 How This Changes Everything

Before Next.js 16:

Caching felt page-based and indirect.

Now:

It’s declarative.
It’s granular.
It’s controllable.

The shift from page ISR to fetch-level caching is a major architectural improvement.

🏁 Final Thoughts

Next.js 16 doesn’t just improve caching.

It makes it predictable.

If you understand:

• fetch cache control
• revalidate
• tags
• revalidateTag()
• draftMode()

You control performance instead of guessing it.

If this clarified things for you, drop a ❤️ or share it with another frontend engineer fighting stale data.

And if you’ve built an interesting caching pattern in Next.js 16, I’d like to see it.

More deep dives coming.

Check me out at https://theacj.com.ng

React Native vs. Flutter in 2025: The Ultimate Showdown (20 Key Differences)

RealACJoshua — Fri, 16 Jan 2026 07:58:53 +0000

Introduction

Choosing between React Native and Flutter is like choosing between a Swiss Army knife and a custom-forged Katana. Both get the job done, but the experience, the feel, and the outcome depend entirely on your mission.

After my last post on building Rust without Visual Studio, I’ve been thinking a lot about "the right tool for the job." Today, we’re putting the two giants of cross-platform development into the ring. No fluff—just 20 hard-hitting differences to help you decide.

The Deep Dive: 20 Points of Difference

#	Feature	React Native (RN)	Flutter
1	Language	JavaScript/TypeScript (The Web King)	Dart (Optimized for UI)
2	Architecture	Bridge-based (Moving toward JSI)	Skia/Impeller Engine (No bridge)
3	UI Components	Uses Native OEM components	Draws its own widgets (Pixel perfect)
4	Performance	Great, but can lag in heavy animations	Excellent (60-120 FPS consistently)
5	Learning Curve	Easy for Web Devs	Steeper (Learning Dart + Widget tree)
6	Development Speed	Fast (Hot Reload)	Very Fast (Hot Reload + Hot Restart)
7	Installation	NPM/Yarn (Standard web flow)	Binary download + Flutter Doctor
8	Documentation	Community-driven (Can be fragmented)	Official docs are elite & centralized
9	Ecosystem	Massive (Packages for everything)	Growing fast (Highly curated)
10	Styling	Flexbox (CSS-like)	In-code widget properties
11	Navigation	Third-party (React Navigation)	Built-in (Navigator 2.0 / GoRouter)
12	State Management	Redux, Zustand, Context API	Provider, Riverpod, Bloc
13	Look & Feel	Native-first (Matches OS updates)	Brand-consistent (Looks same on all)
14	IDE Support	VS Code (Supreme)	Android Studio / VS Code
15	App Size	Generally smaller	Generally larger (Engines are heavy)
16	Stability	Mature, but "Upgrade Hell" is real	Extremely stable; breaking changes rare
17	Company	Meta (Facebook)	Google
18	Web Support	Strong (React Native Web)	Good, but feels "Canvas-y"
19	Testing	Jest/Detox	Strong built-in Unit/Widget testing
20	Market Demand	Higher (Enterprise/Legacy)	Surging (Startups/New apps)

🛡️ React Native: Where It Shines

The "Web to Mobile" Bridge: If your team knows React, you’re 80% there. You don’t need to learn a new paradigm.
Truly Native UI: Because it uses actual native components, your buttons look like Apple buttons on iOS and Google buttons on Android without trying.
Code Sharing: High potential to share logic between your website and your mobile app.

⚠️ React Native: The Pain Points

The Bridge Bottleneck: Passing data between JS and Native layers can cause stuttering in complex apps.

Version Upgrades: Updating RN versions is notoriously painful and can break your entire project.

🚀 Flutter: Where It Shines

UI Consistency: Your app will look exactly the same on a 2018 Android and a 2025 iPhone. No "OS-specific" CSS hacks.

Developer Experience (DX): "Flutter Doctor" is a godsend. The tooling is cohesive and feels like a complete product rather than a collection of libraries.
High-Performance Graphics: Perfect for apps with heavy custom animations or unique branding.

⚠️ Flutter: The Pain Points

Dart: While easy to learn, it’s another language to maintain.

Proprietary Feel: Because Flutter draws its own UI, it doesn't automatically get the "feel" of new OS updates (like iOS 18's new look) until the Flutter team updates the widgets.

The Verdict: Which one should you pick?

Choose React Native if:

You have a React-heavy team.
You need to share code with a web platform.
You want a "Native-first" look and feel.

Choose Flutter if:

You want high-performance, custom UI.
You want a more stable, integrated development environment.
You’re building a greenfield project and want to move FAST.

🗣️ Your Turn!

Are you Team Blue (Flutter) or Team Blue-ish (React Native)? Let's see some heated debates in the comments, let’s keep that energy going! Drop your "X vs Y" horror stories below.

Check me out at theacj.com.ng

"🦀 Ditching Visual Studio: How I Built Rust on Windows the Open-Source Way"

RealACJoshua — Wed, 23 Jul 2025 00:55:20 +0000

This is a full walkthrough of setting up Rust on Windows using the GNU toolchain via MSYS2 — no Visual Studio, no link.exe, no tears."

I wanted Rust. I didn't want Visual Studio.

What followed was 3 hours of linker errors, missing DLLs, and yelling at my terminal — but I came out stronger. If you want to set up Rust on Windows without Visual Studio, here's exactly what worked for me.

🎯 What We’re Building

Rust + MSYS2 + GCC = ✅

No Visual Studio + No link.exe = 😌

We’ll set up a lightweight, open-source Rust environment on Windows using the x86_64-pc-windows-gnu toolchain and MSYS2.

I assume you have rust installed already if not 👉 Install Rust

🛠️ 1. Install MSYS2 (the Right Way)

Download from 👉 msys2.org
Open MSYS2 MinGW 64-bit Terminal (not the default one!)
Then run:

pacman -Syu

✅ If it asks you to restart the terminal, do that and run it again.

🔧 2. Install the Toolchain

In MSYS2 MinGW 64-bit Terminal:

pacman -S --needed base-devel mingw-w64-x86_64-toolchain

If you face mirror timeouts (especially common in Africa), update this file:

/etc/pacman.d/mirrorlist.mingw64

Replace with:

Server = https://cdn.jsdelivr.net/msys2/mingw/x86_64/
Server = https://mirror.msys2.org/mingw/x86_64/
Server = https://packages.msys2.org/mingw/x86_64/

Then clean and update again:

pacman -Scc
pacman -Syyu

🧠 3. Switch Rust to the GNU Toolchain if you were using another version

rustup install stable-x86_64-pc-windows-gnu
rustup default stable-x86_64-pc-windows-gnu

✍️ 4. Tell Cargo Where Your Compiler Is

Edit this file:

C:\Users\<your_username>\.cargo\config.toml

Add:

[target.x86_64-pc-windows-gnu]
linker = "C:\\msys64\\mingw64\\bin\\gcc.exe"
ar = "C:\\msys64\\mingw64\\bin\\ar.exe"

🧩 5. Fix That Dreaded `dlltool` Error

❌ Error calling dlltool 'dlltool.exe': program not found

Make sure you have it(dlltool):

where dlltool

Expected:

C:\msys64\mingw64\bin\dlltool.exe

If not, run:

pacman -S mingw-w64-x86_64-binutils --overwrite '*'

Then temporarily fix your PATH:

$env:PATH="C:\msys64\mingw64\bin;" + $env:PATH

To make it permanent, add it via System Environment Variables.

🚀 6. Test It Out

cargo new rust_test
cd rust_test
cargo build

🎉 No Visual Studio. No link.exe. Just Rust + GCC goodness.

💡 Bonus Tips from My Pain

Never run pacman from PowerShell or CMD — MSYS2 only!
Update your mirrors early if you're outside the US/EU.
MSVC-based crates (like windows-sys) will complain — avoid them or find GNU alternatives.
Check your paths — MSYS (/usr/bin) and MinGW (/mingw64/bin) are not the same!

🏁 Final Thoughts

If you’re tired of bloated installs and want to keep things lean and open-source, this setup works beautifully. It took me trial, error, and a bit of cursing to get it right — but now it’s smooth sailing.

If this helped you, drop a ❤️ or share it. If you ran into a different issue, comment below — let’s help more Rustaceans build without the bloat.

🗣️ Your Turn:
Have your own story of escaping the grip of Visual Studio? Share it in the comments — let’s make the Windows + Rust experience better for all.

Check me out at theacj.com.ng

The Ultimate Beginner's Guide to Setting Up Your Full Stack Development Environment

RealACJoshua — Fri, 28 Feb 2025 09:32:13 +0000

Everything You Need to Start Coding Like a Pro 🚀

Introduction

Setting up your development environment is the first step in your coding journey. A well-configured setup saves time, reduces errors, and lets you focus on building amazing projects. In this guide, we’ll walk through installing tools, writing your first code, and optimizing your workflow—all tailored for Windows (but applicable to macOS/Linux too!).

1. Choosing Your Tools

Operating System (OS)

Windows, macOS, or Linux: All work! We’ll use Windows, but most tools are cross-platform.
Pro Tip: Windows users can enable WSL (Windows Subsystem for Linux) for a Unix-like terminal experience.

Code Editor: Visual Studio Code

Why VS Code? Free, lightweight, and packed with extensions.
Installation:
1. Download from code.visualstudio.com.
2. Install recommended extensions:
  - Live Server: Auto-refresh your HTML pages.
  - Prettier: Automatically format code.
  - ESLint: Catch JavaScript errors.
  - GitLens: Supercharge Git integration.

Command Line Interface (CLI)

Windows: Use PowerShell or Git Bash (installed with Git).
How to Open (PowerShell): Right Click the windows logo and Select PowerShell
Basic Commands Cheat Sheet:

Command Description

cd folder_name Navigate into a folder

cd .. Move up (back) one folder

mkdir project Create a new directory

ls or dir List files in the current folder

Command	Description
`cd folder_name`	Navigate into a folder
`cd ..`	Move up (back) one folder
`mkdir project`	Create a new directory
`ls` or `dir`	List files in the current folder

2. Essential Installations

Git: Version Control

Install: Download from git-scm.com.
First-Time Setup:

  git config --global user.name "Your Name" # Replace Your name with value "Your Name"
  git config --global user.email "your@email.com" # Replace Your email with value "your@email.com"

Basic Commands:

  git init          # Start a new repository
  git add .         # Stage all changes
  git commit -m "Initial commit"  # Save changes

Node.js & npm: JavaScript Runtime

Install: Download the LTS version from nodejs.org.
Verify Installation:

  node -v  # Should show v18.x or higher
  npm -v   # Should show 9.x or higher

Alternative: Install Yarn (npm install -g yarn) for faster package management.

3. Your First Project: “Hello, Web!”

Step 1: Create a Project

Open PowerShell/Git Bash and run:

   mkdir hello-web
   cd hello-web
   npm init -y  # Creates package.json

Step 2: Build the HTML

Create index.html in VS Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello, Web!</title>
  <!-- Add Tailwind CSS for styling -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-center pt-10">
  <h1 class="text-4xl font-bold text-blue-600">Hello, Web Development! 🌐</h1>
  <p class="mt-4 text-gray-700">This is your first web page.</p>
  <button onclick="alert('You clicked. Good, Make The ACJ Proud')" class="mt-6 px-4 py-2 bg-blue-500 text-white rounded">
    Click Me
  </button>
</body>
</html>

Step 3: View Your Page

Right-click the file and select Open with Live Server (VS Code extension).
You Can also locate the file in your file explorer and double-click to open in a browser
Success! Your browser will open at http://localhost:5500 with auto-reload.

4. Pro Tips for Efficiency

Keep Tools Updated:
- VS Code: Check for updates in the Help menu.
- Node.js: Use npm install -g npm to update npm.
Customize VS Code:
- Themes: Try One Dark Pro or Material Icon Theme.
- Keyboard Shortcuts: Learn Ctrl+S (Save) and Ctrl+ (backtick) to toggle the terminal.
Master Git:
- Host your code on GitHub/GitLab.
- Write descriptive commit messages like "Add login button" instead of "Update code".

5. Summary & Next Steps

Key Takeaways:

Tools: VS Code, Git, Node.js, and CLI are your essentials.
Workflow: Use Live Server for instant previews, Git for version control.
Mindset: Stay curious—explore extensions and practice daily!

What’s Next?

Learn HTML/CSS/JavaScript basics.
Dive into frontend frameworks (React, Vue) or backend (Node.js, Express).
Build a portfolio and share it on GitHub!

Let’s Connect!

Stuck? Comment below or reach out on Twitter/X and My Website. Happy coding! 👩💻👨💻

#DevJourney #WebDev #Beginners #Programming

🚀 Rust Basics 5: Structs and Enums in Rust

RealACJoshua — Wed, 01 Jan 2025 17:04:00 +0000

Welcome back. This is the 5th post of our 7 post Rust tutorial.

Structs and enums are fundamental tools in Rust to organize and represent data. They make your code more readable, efficient, and expressive.

Step 1: What Are Structs?
A struct is like a blueprint for creating custom data types that group related information together.

Example: A Person Struct
Here’s how you define and use a struct:


struct Person {
    name: String,
    age: u8, // u8 means an unsigned 8-bit integer (0–255)
}

fn main() {
    // Create an instance of the Person struct
    let person = Person {
        name: String::from("Chisom"),
        age: 25,
    };

    // Access and print struct fields
    println!("Name: {}, Age: {}", person.name, person.age);
}

Explanation
Defining a Struct:

struct Person defines the structure.
It has two fields: name (a string) and age (a number).

Creating an Instance:
Person { name: String::from("Chisom"), age: 25 } creates a Person instance.

Accessing Fields:
Use person.name and person.age to access the data.

Step 2: Adding Methods to Structs
You can add methods (functions) to structs to perform operations on their data.

Example: A Rectangle Struct with an area Method

struct Rectangle {
    width: u32,  // u32 means an unsigned 32-bit integer
    height: u32,
}

impl Rectangle {
    // Define a method to calculate area
    fn area(&self) -> u32 {
        self.width * self.height
    }
}

fn main() {
    let rect = Rectangle { width: 10, height: 5 };
    println!("The area of the rectangle is: {}", rect.area());
}

Explanation
impl Rectangle: Implements methods for the Rectangle struct.
fn area(&self): A method that calculates the area.
&self refers to the instance being used.
You call the method with rect.area().

Step 3: What Are Enums?
An enum represents a type that can have one of several predefined variants. Think of it as a way to describe "one thing out of many options."

Example: A Direction Enum

enum Direction {
    Up,
    Down,
    Left,
    Right,
}

fn main() {
    let movement = Direction::Up;

    match movement {
        Direction::Up => println!("Going up!"),
        Direction::Down => println!("Going down!"),
        Direction::Left => println!("Going left!"),
        Direction::Right => println!("Going right!"),
    }
}

Explanation
Defining an Enum:

enum Direction defines possible directions: Up, Down, Left, Right.
Using match:

match checks which variant is used and runs the corresponding code.
Each arm of match corresponds to a variant of the enum.

Step 4: Enums with Data

Enums can also hold data for each variant.

Example: A Message Enum

enum Message {
    Text(String),
    Number(i32),
}

fn main() {
    let msg = Message::Text(String::from("Hello"));

    match msg {
        Message::Text(text) => println!("Message: {}", text),
        Message::Number(num) => println!("Number: {}", num),
    }
}

Explanation:
Each variant of Message can hold different types of data (String or i32).
match extracts the data inside the variant using patterns.
Practice for Today

Struct Practice:

Create a Car struct with fields for brand, model, and year.
Write a program to print a car's details.

Example:

struct Car {
    brand: String,
    model: String,
    year: u16,
}

fn main() {
    let car = Car {
        brand: String::from("Toyota"),
        model: String::from("Corolla"),
        year: 2020,
    };
    println!("{} {} ({})", car.brand, car.model, car.year);
}

Enum Practice:

Create an enum Weather with variants Sunny, Rainy, and Cloudy.
Use match to print an appropriate message for each variant.

Example:

enum Weather {
    Sunny,
    Rainy,
    Cloudy,
}

fn main() {
    let today = Weather::Sunny;

    match today {
        Weather::Sunny => println!("It's a bright and sunny day!"),
        Weather::Rainy => println!("Don't forget your umbrella!"),
        Weather::Cloudy => println!("Looks like it might rain."),
    }
}

🎉 That’s it for RUST BASICS 5! You’ve learned Structs and Enums. In the next post, we’ll learn Functions and Error Handling in Rust.

Feel free to share your solutions or ask questions in the comments. Happy coding! 🦀

Check out the Rust Documentation for more details.

Let me know if anything feels unclear!
Let me know how these examples feel, and if you'd like more exercises or clarification!

🚀 Rust Basics 4: Ownership and Borrowing in Rust

RealACJoshua — Fri, 27 Dec 2024 11:04:54 +0000

Welcome back to the 4th post of our 7 post Rust tutorial.

Rust’s ownership model is unique and ensures memory safety without garbage collection. Let’s simplify it.

Step 1: Understanding Ownership

In Rust, every value has a single owner. When ownership changes, the original owner can no longer use the value.

Example:

fn main() {
    let s1 = String::from("hello"); // s1 owns the string
    let s2 = s1; // Ownership moves to s2

    // println!("{}", s1); // This won't work: s1 is no longer valid
    println!("{}", s2); // s2 is the new owner
}

s1 is invalid after assigning it to s2.

This prevents double freeing of memory.

Step 2: Cloning Values

To keep the original value, use .clone().

fn main() {
    let s1 = String::from("hello");
    let s2 = s1.clone(); // Makes a deep copy

    println!("{}", s1); // Now s1 is still valid
    println!("{}", s2);
}

Step 3: Borrowing with References

Borrowing allows you to use a value without taking ownership by passing a reference (&value).

Example

fn main() {
    let s = String::from("hello");
    let len = calculate_length(&s); // Borrow `s` with `&`

    println!("The length of '{}' is {}.", s, len); // `s` is still valid
}

fn calculate_length(s: &String) -> usize { // `s` is a reference
    s.len() // Access borrowed value
}

&s passes a reference to the function, so s retains ownership.

The function reads the value but can’t modify it.

Key Rule

Borrowing allows multiple immutable references but no mutable references at the same time.

Step 4: Mutable References

To modify a value, use &mut.

Example:

fn main() {
    let mut s = String::from("hello");
    change(&mut s);

    println!("{}", s);
}

fn change(s: &mut String) {
    s.push_str(", world"); // Append to the string
}

Only one mutable reference is allowed at a time to prevent conflicts.

Step 5: Rules of Ownership and Borrowing

Each value has one owner.
A value can only have one mutable reference or multiple immutable references, but not both.
References must always be valid.

Practice for Today

Write a program where a function calculates the square of a number using borrowing.
Modify a string inside a function using a mutable reference.
Try assigning a value to two mutable references and observe the compiler error.

🎉 That’s it for RUST BASICS 4! You’ve learned Borrowing and Ownership. In the next post, we’ll cover struct and enums in Rust.

Feel free to share your solutions or ask questions in the comments. Happy coding! 🦀

Check out the Rust Documentation for more details.

Let me know if anything feels unclear!

🚀 Rust Basics 3: Control Flow, Conditional Statements, and Loops 🦀

RealACJoshua — Thu, 12 Dec 2024 19:29:15 +0000

Welcome back to RUST BASICS. In this 3rd post of our 7-part journey, we’ll tackle control flow in Rust. You’ll learn how to use if/else statements, match expressions, and loops to add logic and repetition to your programs.

Step 1: If/Else Statements

Control the flow of your program using if, else if, and else.

Syntax:

fn main() {
    let number = 10;

    if number > 0 {
        println!("The number is positive.");
    } else if number < 0 {
        println!("The number is negative.");
    } else {
        println!("The number is zero.");
    }
}

Explanation:

If number > 0, the first block runs.

If number < 0, the second block runs.

If none of the conditions are met, the else block runs.

Rust Tip: Conditions in Rust must evaluate to a boolean (true or false). Unlike some other languages, you cannot use if number (it must be if number != 0, for example).

Step 2: Using If as an Expression

What does "if as an expression" mean?

Unlike in some other programming languages, in Rust, if can be used to produce a value — not just control flow. This means you can assign the result of an if statement to a variable.

This is possible because everything in Rust is an expression. An expression returns a value, while a statement (like let x = 5;) performs an action but does not return a value.

Example : Assigning the Result of if to a Variable

fn main() {
    let condition = true;
    let number = if condition { 5 } else { 10 };

    println!("The value of number is: {}", number);
}

Explanation:

let number = if condition { 5 } else { 10 };

A. Rust checks if condition is true or false.

If condition is true, Rust returns 5, and that value is assigned to number.

If condition is false, Rust returns 10, and that value is assigned to number.

B. Since the if block returns a value, you don't need to explicitly assign a value to number. Rust automatically "returns" the last value of the block.

C. The final result is printed as:
"The value of number is: 5" (because condition is true).

Step 3: Match Expressions

match is a powerful control flow tool similar to switch statements in other languages.

Example:

fn main() {
    let day = "Monday";

    match day {
        "Monday" => println!("Start of the work week!"),
        "Friday" => println!("Weekend is near!"),
        "Saturday" | "Sunday" => println!("It’s the weekend!"),
        _ => println!("Just another day!"),
    }
}

Explanation:

"Saturday" | "Sunday" means "if it's Saturday or Sunday, do this."

The underscore _ acts as a catch-all for any other value that doesn't match the cases.

Step 4: Loops in Rust

Rust provides three types of loops:

loop - Infinite loop (until break is used).
while - Loops while a condition is true.
for - Loops over a range, array, or collection.

1️⃣ Loop (Infinite Loop)

fn main() {
    let mut counter = 0;

    loop {
        counter += 1;
        println!("Count: {}", counter);

        if counter == 5 {
            break; // Exits the loop
        }
    }
}

Explanation:

The loop runs infinitely until break is called.

This is useful when you don't know how many iterations are needed.

2️⃣ While Loop

fn main() {
    let mut number = 3;

    while number != 0 {
        println!("{}!", number);
        number -= 1;
    }

    println!("LIFTOFF 🚀");
}

Explanation:

While the number is not zero, the loop runs.

When number becomes zero, the loop exits and prints "LIFTOFF 🚀".

3️⃣ For Loop (Range)

fn main() {
    for number in 1..5 {
        println!("Number: {}", number);
    }
}

Explanation:

1..5 is a range that goes from 1 to 4 (exclusive of 5).

If you want to include 5, use 1..=5.

3️⃣ For Loop (Array)

fn main() {
    let fruits = ["Apple", "Banana", "Cherry"];

    for fruit in fruits.iter() {
        println!("I love {}!", fruit);
    }
}

Explanation:

.iter() returns each item of the array.

You can loop over arrays, vectors, and collections in Rust.

*Step 5: Break, Continue, and Return
*
break: Ends a loop immediately.

continue: Skips the current iteration and moves to the next.

return: Exits a function and returns a value.

Example with Break and Continue

fn main() {
    for number in 1..10 {
        if number % 2 == 0 {
            continue; // Skip even numbers
        }

        if number == 7 {
            break; // Stop the loop at 7
        }

        println!("Odd number: {}", number);
    }
}

Explanation:

continue skips even numbers.

break stops the loop as soon as it encounters 7.

Practice Challenges

Challenge 1: FizzBuzz
Write a program that prints numbers from 1 to 20. But:

For multiples of 3, print "Fizz" instead of the number.

For multiples of 5, print "Buzz".

For multiples of both 3 and 5, print "FizzBuzz".

fn main() {
    for number in 1..=20 {
        if number % 3 == 0 && number % 5 == 0 {
            println!("FizzBuzz");
       #Copy and Complete the Code

}

Challenge 2: Guess the Number (Simple Version)
Ask the user to guess a number between 10 and 20. If they guess correctly, print “You guessed it!”.

The code below is an example do yours to reflect 10 to 20 with a number in-between as the secret_number

use std::io;

fn main() {
    let secret_number = 7; // Hardcoded for simplicity
    println!("Guess a number between 1 and 10:");

    let mut guess = String::new();
    io::stdin().read_line(&mut guess).expect("Failed to read input");

    let guess: i32 = guess.trim().parse().expect("Please type a number!");

    if guess == secret_number {
        println!("You guessed it!");
    } else {
        println!("Wrong guess. The correct number was {}", secret_number);
    }
}

🎉 Congratulations on completing Rust Basics 3!
You now understand control flow, conditional statements, and loops. You’re becoming a Rustacean! 🦀

Next, we’ll explore functions, ownership, and borrowing in Rust Basics 4.

Did you try the challenges?
Post your solutions in the comments. If you have any questions, I’ll be happy to help! 🦀

Check out Rust Documentation to learn more.

🚀 Rust Basics 2: Data Types, Shadowing, and String Manipulation 🦀

RealACJoshua — Fri, 06 Dec 2024 17:35:30 +0000

Welcome back to our RUST BASICS series! In this post, we’ll explore data types, shadowing, and string manipulation in Rust. These concepts will help you understand how Rust handles values and strings efficiently.

Step 1: Understanding Data Types

Rust is a statically-typed language, which means every variable must have a type. Rust can infer types for you, but sometimes it’s useful to specify them explicitly.

Primitive Types in Rust:

Integer: i8, i16, i32, i64, i128 (signed), and u8, u16, u32, u64, u128 (unsigned).
Floating-point: f32 and f64.
Boolean: bool (true or false).
Character: char (single characters like 'a' or '#').

Example Code:

fn main() {
    let age: i32 = 25;       // Integer
    let height: f64 = 5.9;   // Floating-point
    let is_student: bool = true; // Boolean
    let grade: char = 'A';   // Character

    println!("Age: {}", age);
    println!("Height: {} ft", height);
    println!("Is Student: {}", is_student);
    println!("Grade: {}", grade);
}

Step 2: Constants vs Variables

Constants are immutable and must have a type specified. They’re declared with the const keyword and are accessible globally.

Variables (declared with let) can be mutable if prefixed with mut.

Example Code:

const PI: f64 = 3.14159; // Constant
fn main() {
    let mut counter = 0; // Mutable variable
    println!("Counter: {}", counter);

    counter += 1; // Increment counter
    println!("Updated Counter: {}", counter);

    println!("Value of PI: {}", PI);
}

Step 3: Shadowing

Shadowing allows you to redefine a variable with the same name. This is useful when you want to transform data without changing its name.

Example Code:

fn main() {
    let number = 5;
    println!("Number: {}", number);

    let number = number + 1; // Shadowing
    println!("Shadowed Number: {}", number);

    let number = "Five"; // Shadowing with a different type
    println!("Number as a string: {}", number);
}

Note: Shadowing creates a new variable and doesn’t modify the previous one. This is different from using mut.

Step 4: String Manipulation

Rust has two types of strings:

String slices (&str): Immutable references to string data.
String: A growable, heap-allocated data structure.

Example Code:

fn main() {
    let greeting = "Hello"; // &str
    let mut name = String::from("TheACJ"); // String

    println!("Greeting: {}", greeting);
    println!("Name: {}", name);

    // Modify the String
    name.push_str(" Rustacean!");
    println!("Updated Name: {}", name);
}

String Methods:

fn main() {
    let name = String::from("Rustacean");
    println!("Length: {}", name.len());           // Get length
    println!("Is Empty: {}", name.is_empty());    // Check if empty
    println!("Uppercase: {}", name.to_uppercase()); // Convert to uppercase
}

Step 5: Practice Challenges

A. Modify the program to calculate the area of a circle:

const PI: f64 = 3.14159;
fn main() {
    let radius: f64 = 7.0;
    let area = PI * radius * radius;
    println!("The area of the circle is: {}", area);
}

B. Write a program to count the number of characters in a user-inputted string:

use std::io;

fn main() {
    let mut input = String::new();
    println!("Enter a string:");

    io::stdin()
        .read_line(&mut input)
        .expect("Failed to read input");

    let trimmed = input.trim();
    println!("The string '{}' has {} characters.", trimmed, trimmed.len());
}

Troubleshooting Tips

If you get a type mismatch error, ensure variable types are consistent.

If you see cannot borrow as mutable, check if your variable is declared as mut.

🎉 That’s it for RUST BASICS 2! You’ve learned about data types, constants, shadowing, and string manipulation. In the next post, we’ll cover control flow and loops in Rust.

Feel free to share your solutions or ask questions in the comments. Happy coding! 🦀

Check out the Rust Documentation for more details.

🚀 Rust Basics 1: Getting Started with Rust Programming 🦀

RealACJoshua — Thu, 05 Dec 2024 18:52:25 +0000

Welcome to RUST BASICS 1, the first post in our 7-part journey to mastering Rust! Whether you’re a beginner or just curious about Rust, this series will guide you step by step.

Step 1: Install Rust

Let’s set up Rust on your computer.

For Linux/Mac/Windows (WSL):

Open your terminal or command prompt.
Run this command:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Follow the on-screen instructions. After installation, verify Rust is installed by typing:

rustc --version

This should display the installed Rust version.

Alternative Installation Methods

macOS: Use Homebrew:

brew install rust

Windows: Download the Rust installer from Rust Official.

Step 2: Write and Run Your First Rust Program

Let's write the classic "Hello, world!" program.

Create a folder for your Rust projects:

mkdir rust_projects
cd rust_projects

Inside the folder, create a file named main.rs.
Open it in your favorite text editor (e.g., VS Code).
Write the following code:

fn main() {
    println!("Hello, world!");
}

fn means function.

main() is the entry point of a Rust program.

println! prints to the console. The ! indicates it's a macro.

Save the file and run it:

rustc main.rs
./main

The output should be:

Hello, world!

Step 3: Variables in Rust

Variables in Rust are immutable by default, but you can make them mutable with the mut keyword.

Update your main.rs file with this code:

fn main() {
    let name = "TheACJ";
    let age = 25;
    let mut score = 100; // `mut` makes the variable mutable

    println!("Name: {}", name);
    println!("Age: {}", age);
    println!("Score: {}", score);

}

Explanation:

let name = "TheACJ"; creates an immutable variable.

let mut score = 100; creates a mutable variable.

{} is a placeholder in println!, replaced with the variable's value.

Add this to your code:

    score = 120; // Reassigning the value of score
    println!("Updated Score: {}", score);

Run it again, and you’ll see the updated score.(This shows the power of mut)

Step 4: Taking User Input

Let’s make the program interactive by asking for user input.

Replace the code in main.rs with:

use std::io;

fn main() {
    let mut favorite_color = String::new();
    println!("Enter your favorite color: ");

    io::stdin()
        .read_line(&mut favorite_color)
        .expect("Failed to read input");

    println!("Your favorite color is {}", favorite_color.trim());
}

Explanation:

use std::io; imports Rust’s input/output library.

String::new() creates a new, empty string.

read_line reads user input and stores it in favorite_color.

.trim() removes extra spaces or newline characters from the input.

Run it and interact with your program!

Step 5: Practice Challenges

A. Modify the program to ask for your age and print a message like:

You are 25 years old!

B. Write a program to calculate the square of a number:

let num = 4;
println!("The square of {} is {}", num, num * num);

Feel free to share your solutions in the comments for feedback!

Troubleshooting Tips

If rustc isn’t recognized, ensure Rust is added to your PATH. Restart your terminal or run:

source $HOME/.cargo/env

If your program doesn’t work as expected, double-check for typos.

🎉 That’s it for RUST BASICS 1! Congratulations on taking your first steps in Rust programming. Stay tuned for RUST BASICS 2, where we’ll dive deeper into more advanced concepts.

Let me know if you found this helpful or if you ran into any issues. Happy coding! 🦀

Feel free to look at Rust Doc

Write and Deploy Your First Solana Program on Solana Playground

RealACJoshua — Fri, 29 Nov 2024 07:02:30 +0000

Welcome Back.
In this tutorial, we’ll explore how to write, compile, and deploy a simple Solana program using Solana Playground, an in-browser development environment. Our program will let users store their favorite number, color, and hobbies on-chain.

What We'll Cover

Setting up Solana Playground.
Writing the Solana program.
Breaking down the code.
Compiling the program.
Deploying the program to Solana Devnet.
Interacting with the program.

1. Setting Up Solana Playground

Solana Playground allows you to write, compile, and deploy Solana programs without setting up a local environment.

Visit Solana Playground.

Create a new project:
- Click Create New Project.
- Choose Anchor Framework as the template.

2. Writing the Solana Program

Replace the default code in the lib.rs file with the following program:

use anchor_lang::prelude::*;

declare_id!("");

pub const ANCHOR_DISCRIMINATOR_SIZE: usize = 8;

#[program]
pub mod favorites {
    use super::*;

    pub fn set_favorites(
        context: Context<SetFavorites>,
        number: u64,
        color: String,
        hobbies: Vec<String>,
    ) -> Result<()> {
        msg!("Greeting Human from {}", context.program_id);
        let user_public_key = context.accounts.user.key();

        msg!("User {user_public_key}'s favorite number is {number}, favorite color is {color}, and their hobbies are {hobbies:?}");

        context.accounts.favorites.set_inner(Favorites {
            number,
            color,
            hobbies,
        });

        Ok(())
    }
}

#[account]
#[derive(InitSpace)]
pub struct Favorites {
    pub number: u64,

    #[max_len(50)]
    pub color: String,

    #[max_len(5, 50)]
    pub hobbies: Vec<String>,
}

#[derive(Accounts)]
pub struct SetFavorites<'info> {
    #[account(mut)]
    pub user: Signer<'info>,

    #[account(
        init_if_needed,
        payer = user,
        space = ANCHOR_DISCRIMINATOR_SIZE  + Favorites::INIT_SPACE,
        seeds = [b"favorites", user.key().as_ref()],
        bump
    )]
    pub favorites: Account<'info, Favorites>,

    pub system_program: Program<'info, System>,
}

3. Breaking Down the Code Block by Block

Imports

use anchor_lang::prelude::*;

Imports essential components from the Anchor framework for Solana development, such as macros and helper types.

Program ID Declaration

declare_id!("");

This unique program ID identifies your deployed program on the blockchain. (Yours will be automatically generated, don't freight!!)

Anchor Discriminator

pub const ANCHOR_DISCRIMINATOR_SIZE: usize = 8;

A fixed size used to reserve space in accounts for program-specific metadata. Required for Anchor programs.

Program Module

#[program]
pub mod favorites {
    use super::*;

    pub fn set_favorites(
        context: Context<SetFavorites>,
        number: u64,
        color: String,
        hobbies: Vec<String>,
    ) -> Result<()> {
        msg!("Greeting Human from {}", context.program_id);
        let user_public_key = context.accounts.user.key();

        msg!("User {user_public_key}'s favorite number is {number}, favorite color is {color}, and their hobbies are {hobbies:?}");

        context.accounts.favorites.set_inner(Favorites {
            number,
            color,
            hobbies,
        });

        Ok(())
    }
}

The #[program] macro defines the entry point of the program.
The set_favorites function:
- Accepts user inputs: a favorite number, a color, and a list of hobbies.
- Logs the user's inputs using msg!.
- Stores the data in the Favorites account.

Favorites Account

#[account]
#[derive(InitSpace)]
pub struct Favorites {
    pub number: u64,

    #[max_len(50)]
    pub color: String,

    #[max_len(5, 50)]
    pub hobbies: Vec<String>,
}

The Favorites struct represents the data structure stored in the blockchain.
Each field (e.g., number, color, hobbies) represents a piece of data the user can store.
The #[max_len] attribute limits the maximum size for String and Vec<String> fields.

SetFavorites Context

#[derive(Accounts)]
pub struct SetFavorites<'info> {
    #[account(mut)]
    pub user: Signer<'info>,

    #[account(
        init_if_needed,
        payer = user,
        space = ANCHOR_DISCRIMINATOR_SIZE  + Favorites::INIT_SPACE,
        seeds = [b"favorites", user.key().as_ref()],
        bump
    )]
    pub favorites: Account<'info, Favorites>,

    pub system_program: Program<'info, System>,
}

Defines the accounts required to execute the set_favorites function.
The favorites account is initialized with specific constraints (e.g., size, payer, and seed).

4. Compiling the Program

Click the Build button in the Solana Playground interface.
Wait for the program to compile. If successful, you’ll see the message "Build Successful."

5. Deploying the Program to Solana Devnet

Deploy your program:
- Click Deploy.
- Your Solana Playground Wallet will pop up (You need some Devnet $SOL to perform this transaction on the Blochain, by default you should have some $SOL).

After deployment, copy the program’s public key (That'd be the ID in the declare_id. You’ll need it to interact with the program.

6. Interacting with the Program

a. Set Favorites

To test the program, you’ll call the set_favorites method:

Go to the Test tab in Solana Playground.
Select set_favorites from the dropdown.
Enter the following inputs under Args:
- number: Your favorite number (e.g., 7).
- color: Your favorite color (e.g., "blue").
- hobbies: A list of your hobbies (e.g., ["reading", "coding"]).
Under Accounts input:
- user: Select Current Wallet
- favorites: Select From seed
  - seed(1): type "favorites"
  - click on Add Seed
  - seed(2): select publicKey then select Current Wallet
Click on Generate and then click on Test
Check the transaction on Solana Explorer by clicking on the pop-up.

Conclusion

You’ve successfully written, deployed, and tested a Solana program on Devnet. This foundational knowledge will help you dive deeper into Solana development.

If you enjoyed this tutorial, give it a ❤️ and follow for more Solana content. 🚀

Forem: RealACJoshua

Edge Computing with Cloudflare Workers: How I Deployed Global APIs Without Cold Starts

Rust for WebAssembly: How I Built Near-Native Performance Web Apps

Next.js 16 Caching Explained: Revalidation, Tags, Draft Mode & Real Production Patterns

React Native vs. Flutter in 2025: The Ultimate Showdown (20 Key Differences)

Introduction

The Deep Dive: 20 Points of Difference

🛡️ React Native: Where It Shines

⚠️ React Native: The Pain Points

🚀 Flutter: Where It Shines

⚠️ Flutter: The Pain Points

The Verdict: Which one should you pick?

🗣️ Your Turn!

"🦀 Ditching Visual Studio: How I Built Rust on Windows the Open-Source Way"

🎯 What We’re Building

🛠️ 1. Install MSYS2 (the Right Way)

🔧 2. Install the Toolchain

🧠 3. Switch Rust to the GNU Toolchain if you were using another version

✍️ 4. Tell Cargo Where Your Compiler Is

🧩 5. Fix That Dreaded dlltool Error

🚀 6. Test It Out

💡 Bonus Tips from My Pain

🏁 Final Thoughts

The Ultimate Beginner's Guide to Setting Up Your Full Stack Development Environment

Everything You Need to Start Coding Like a Pro 🚀

1. Choosing Your Tools

Operating System (OS)

Code Editor: Visual Studio Code

Command Line Interface (CLI)

2. Essential Installations

Git: Version Control

Node.js & npm: JavaScript Runtime

3. Your First Project: “Hello, Web!”

Step 1: Create a Project

Step 2: Build the HTML

Step 3: View Your Page

4. Pro Tips for Efficiency

5. Summary & Next Steps

🚀 Rust Basics 5: Structs and Enums in Rust

🚀 Rust Basics 4: Ownership and Borrowing in Rust

🚀 Rust Basics 3: Control Flow, Conditional Statements, and Loops 🦀

🚀 Rust Basics 2: Data Types, Shadowing, and String Manipulation 🦀

🚀 Rust Basics 1: Getting Started with Rust Programming 🦀

Write and Deploy Your First Solana Program on Solana Playground

What We'll Cover

1. Setting Up Solana Playground

2. Writing the Solana Program

3. Breaking Down the Code Block by Block

Imports

Program ID Declaration

Anchor Discriminator

Program Module

Favorites Account

SetFavorites Context

4. Compiling the Program

5. Deploying the Program to Solana Devnet

6. Interacting with the Program

a. Set Favorites

Conclusion

🧩 5. Fix That Dreaded `dlltool` Error