DEV Community: Ismile Hossain

Understanding Scope in Go

Ismile Hossain — Wed, 11 Jun 2025 09:10:16 +0000

Scope is one of the most important foundational concepts in Go (and any programming language). If you understand it well, it will help you write clearer code, avoid subtle bugs, and even master more advanced topics like closures and concurrency.

Let’s explore what scope is, how it works in Go, and how you can remember it, using a simple office building analogy.

🧐 What is Scope?

Scope refers to where a variable can be seen and used in your code. It's like a permission system: who can read a variable depends on where it was declared.

📌 Think of it like a note you wrote
Not everyone can see your note. It depends on where you left it.

If you tape it to your office’s main wall, everyone in the department can see it.
If you hide it in your desk drawer, only you can read it.

This "visibility boundary" is what scope means in programming.

🏢 The Company Building Analogy

Imagine your Go program as a company office building. Each part of the building has different levels of access and visibility.

Real-World Office Element	Go Code Equivalent
🗂️ Departments (e.g. HR, IT)	Packages
🛋️ Meeting rooms inside departments	Functions
🗄️ Drawers inside meeting rooms	Code blocks (`if`, `for`)
📝 Notes lying around	Variables

🧱 Scope Hierarchy (Top → Bottom)

🏢 Package Level (Department Wall Notes)
└── 🛋️ Function Level (Meeting Room Table Notes)
    └── 🗄️ Block Level (Drawer Notes)

📌 Rule of Thumb: You can always read notes from above, but not beside or below.

If you're in a drawer (block), you can read the table (function) and wall (package) notes.
But if you're on the department floor (package level), you cannot see inside someone's drawer.

🧭 What is Lexical Scope?

Go uses lexical scope (also called static scope), which means:

Scope is determined by the position of code, not by how the program runs.
Inner scopes can access outer variables, but outer scopes can't see inside.
The visibility of variables is decided at compile time, not runtime.

📌 In our analogy: If you're in a drawer, you can see notes on the meeting room table and department wall, but someone on the department floor can't see notes inside someone's drawer.

📝 Basic Scope Example

package main

import "fmt"

var outer = "I'm at package level" // 🏢 Department wall note

func show() {
    var inner = "I'm at function level" // 🛋️ Meeting room table note
    fmt.Println(outer) // ✅ Can read wall notes
    fmt.Println(inner) // ✅ Can read table notes
}

func main() {
    show()
    fmt.Println(outer) // ✅ Can still read wall notes
    // fmt.Println(inner) // ❌ Error: can't read inside a meeting room
}

🗄️ Block Scope in Action

Variables declared in blocks like if and for are only visible inside those blocks.

package main

import "fmt"

func example() {
    x := 1 // 🛋️ Table note

    if true {
        y := 2            // 🗄️ Drawer note
        x = 10            // ✅ Can modify outer table note
        fmt.Println(x, y) // ✅ Can read both: 10, 2
    }

    fmt.Println(x) // ✅ Still 10
    // fmt.Println(y) // ❌ Error: y is not accessible here
}

func main() {
    example()
}

Loops Also Create Block Scopes

package main

import "fmt"

func loops() {
    for i := 0; i < 3; i++ {
        message := fmt.Sprintf("Loop %d", i) // 🗄️ Drawer note
        fmt.Println(message)
    }

    // fmt.Println(i)       // ❌ Not accessible
    // fmt.Println(message) // ❌ Not accessible
}

func main() {
    loops()
}

👥 Variable Shadowing: The Impostor Notes

Shadowing occurs when you declare a variable with the same name in a nested scope. It temporarily hides the outer one.

package main

import "fmt"

var name = "Global Alice" // 🏢 Wall note

func meeting() {
    var name = "Local Bob" // 🛋️ Table note (shadows global)
    fmt.Println("In meeting:", name) // "Local Bob"

    if true {
        var name = "Block Charlie" // 🗄️ Drawer note (shadows Bob)
        fmt.Println("In block:", name) // "Block Charlie"
    }

    fmt.Println("Back in meeting:", name) // "Local Bob"
}

func main() {
    fmt.Println("Global:", name)
    meeting()
    fmt.Println("Still global:", name)
}

🔍 Note: Each var name = ... is a new variable, not a reassignment. It creates a shadow, not an override.

🚨 Warning: Shadowing can confuse readers and introduce subtle bugs. Use distinct variable names where clarity matters.

🔒 Package Scope: Public vs Private

In Go, capitalization determines visibility across packages:

lowercase → private to the package (🏢 department-only notes)
Uppercase → exported, visible to other packages (📢 public announcement)

Example: Package Structure

// File: mypackage/data.go
package mypackage

var secretKey = "hidden"    // 🔒 Only visible in mypackage
var PublicData = "everyone" // 📢 Visible to other packages

func privateFunc() {        // 🔒 Private
    // Only callable in this package
}

func PublicFunc() {         // 📢 Exported
    // Callable from outside
}

Cross-Package Access Example

// File: main.go
package main

import (
    "fmt"
    "myproject/mypackage"
)

func main() {
    fmt.Println(mypackage.PublicData) // ✅ Works
    mypackage.PublicFunc()            // ✅ Works

    // fmt.Println(mypackage.secretKey)  // ❌ Compile error
    // mypackage.privateFunc()           // ❌ Compile error
}

🧠 A Note on Closures and Scope

Closures are functions that capture variables from their surrounding scope, even after the outer function has exited.

package main

import "fmt"

func makeCounter() func() int {
    count := 0  // 🛋️ Table note that's "captured"
    return func() int {
        count++ // Modifies the captured variable
        return count
    }
}

func main() {
    counter1 := makeCounter()
    counter2 := makeCounter()

    fmt.Println(counter1()) // 1
    fmt.Println(counter1()) // 2
    fmt.Println(counter2()) // 1 (separate instance)
    fmt.Println(counter1()) // 3
}

🔁 Each returned function remembers the scope it was created in, even if that scope is "gone" in the normal program flow.

💡 Why This Works
Go moves captured variables like count to the heap, so they live beyond the lifetime of the outer function. That’s why counter1() and counter2() don’t interfere with each other.

🎯 Key Takeaways

Scope defines where a variable can be accessed - think of it as visibility boundaries in your office building.
Go uses lexical (static) scope - it's based on where you write code, not how the program runs.
Inner scopes can access outer variables, but not the other way around - you can read notes from above, but not below.
Variable shadowing creates new variables with the same name - be careful not to accidentally shadow when you meant to reassign.
Closures capture variables from their surrounding scope - even after the outer function ends, the captured variables remain accessible.
Package capitalization determines cross-package visibility - lowercase for private, Uppercase for exported.

CORS Explained: From Toy Boxes to Technical Implementation

Ismile Hossain — Sun, 18 May 2025 12:25:37 +0000

🧠 CORS Explained Like You're 5

Imagine this: You have a toy box (your website running in the browser), and you love playing with your own toys (your own data).

One day, you try to grab a toy from your friend’s toy box (another website’s data).
But your mom (the browser) stops you and says:

"Hold on! I don’t know if your friend’s parents said it’s okay for you to borrow their toys!"

This is where CORS (Cross-Origin Resource Sharing) comes in.

🧑‍🍳 The Server = Your Friend’s Parent
When you try to grab the toy, your mom doesn’t just say "yes" or "no" by herself.
She actually asks your friend’s parent (the server):

“Hey, is it okay if my kid plays with your kids’ toys?”

If your friend’s parent says:

📝 "Sure! I wrote a permission slip (CORS headers) that says it’s okay!"

Then your mom lets you take the toy and play with it. 🎉
But if your friend’s parent says:

❌ "Nope. My kids’ toys are only for them and not for anyone else."

Then your mom stops you and says:

"Sorry, no permission, no playing!"

So basically:

✅ Same toy box? No problem.
🚫 Different toy box? Need permission (CORS).
🔒 No permission? No playing!

🔒 What is CORS?

CORS (Cross-Origin Resource Sharing) is a security feature enforced by browsers. It controls how a web page running in one origin (protocol + domain + port) can make requests to a different origin.

By default, browsers block cross-origin requests made from JavaScript for security reasons.

🌐 What is an "Origin"?

An origin includes:

Protocol: http:// vs https://
Domain: example.com vs api.example.com
Port: :80 vs :8080

If any of these differ, it's considered a cross-origin request and CORS rules apply.

📍 Example Scenario

You have a frontend app hosted at:

Frontend: https://myfrontend.com

And you try to fetch data from:

Backend API: https://api.othersite.com/data

Since the domains are different, this is a cross-origin request. Unless https://api.othersite.com explicitly allows it, the browser will block the request.

✅ How CORS Works

When the browser sees a cross-origin request, it may first send a preflight request (an OPTIONS request), to ask the server:

"Hey, can I make this request from https://myfrontend.com?"

If the server replies with the right headers like:

Access-Control-Allow-Origin: https://myfrontend.com

Then the browser says, "Cool, I'm allowed to proceed." And sends the actual request.

If the header is missing or doesn't match, the browser blocks the request.

🛫 Preflight Request Flow

Browser: Sends OPTIONS request with details.
Server: Responds with CORS headers (if allowed).
Browser: If okay, sends the actual request.

Visual Flow Diagram

📦 Sample HTTP Preflight Request

Request:

OPTIONS /data HTTP/1.1  
Origin: https://example-frontend.com  
Access-Control-Request-Method: POST  
Access-Control-Request-Headers: Content-Type

Response:

HTTP/1.1 204 No Content  
Access-Control-Allow-Origin: https://example-frontend.com  
Access-Control-Allow-Methods: POST  
Access-Control-Allow-Headers: Content-Type

🔐 Why CORS Matters

Imagine you're logged into your bank in one tab. Without CORS, a malicious site in another tab could silently access your bank data just because you’re logged in.

CORS stops that. It ensures that only trusted origins can make requests to protected resources.

🔑 Important CORS Headers Explained

CORS uses several HTTP headers to control access. Here are the most important ones:

1. Access-Control-Allow-Origin

This is the most fundamental CORS header. It specifies which origins are allowed to access the resource.

Access-Control-Allow-Origin: https://myfrontend.com

You can also use a wildcard to allow any origin (not recommended for APIs handling sensitive data):

Access-Control-Allow-Origin: *

2. Access-Control-Allow-Methods

Specifies which HTTP methods (GET, POST, etc.) are allowed when accessing the resource:

Access-Control-Allow-Methods: GET, POST, PUT, DELETE

3. Access-Control-Allow-Headers

Indicates which HTTP headers can be used during the actual request:

Access-Control-Allow-Headers: Content-Type, Authorization

4. Access-Control-Allow-Credentials

Indicates whether the browser should include credentials (like cookies or HTTP authentication) with the request:

Access-Control-Allow-Credentials: true

5. Access-Control-Max-Age

Specifies how long (in seconds) the results of a preflight request can be cached:

Access-Control-Max-Age: 3600

🛠️ CORS in Code (Server Examples)

📘 Using Express.js (Manual Headers)

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "https://example-frontend.com");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  res.header("Access-Control-Allow-Credentials", "true");
  next();
});

app.get('/data', (req, res) => {
  res.json({ message: 'This is CORS-enabled!' });
});

✅ Better Way: Use cors Middleware

npm install cors

const cors = require('cors');
app.use(cors({
  origin: 'https://example-frontend.com',
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

⚠️ Common CORS Errors and How to Debug

1. "Access to fetch at 'X' from origin 'Y' has been blocked by CORS policy"

This is the most common CORS error and indicates that the server at URL 'X' doesn't include the proper CORS headers to allow access from origin 'Y'.

Solution: Configure the server to send the correct Access-Control-Allow-Origin header.

2. "Request header field X is not allowed by Access-Control-Allow-Headers"

This error occurs when your request includes headers that aren't explicitly allowed by the server.

Solution: Add the required headers to the Access-Control-Allow-Headers response header on the server.

3. "Method X is not allowed by Access-Control-Allow-Methods"

The HTTP method you're trying to use isn't allowed by the server's CORS policy.

Solution: Add the method to the Access-Control-Allow-Methods response header on the server.

4. "The value of the 'Access-Control-Allow-Origin' header must not be the wildcard '*' when the request's credentials mode is 'include'"

This error occurs when you're trying to send credentials (cookies, etc.) to a server that has Access-Control-Allow-Origin: *.

Solution: Specify the exact origin instead of using a wildcard, and set Access-Control-Allow-Credentials: true.

🔍 Debugging CORS Issues with Browser Dev Tools

Most modern browsers include developer tools that can help you diagnose CORS issues:

Open Developer Tools: Press F12 or right-click and select "Inspect"
Go to Network Tab: This shows all network requests
Look for Failed Requests: CORS errors will appear in red
Examine Preflight Requests: Look for OPTIONS requests to see if they're returning the correct headers
Check Console: CORS errors also appear in the console with detailed messages

Example CORS Error in Console:

Access to fetch at 'https://api.example.com/data' from origin >'https://myfrontend.com' has been blocked by CORS policy: No >'Access-Control-Allow-Origin' header is present on the requested >resource.

🔒 Security Considerations

While CORS is a security mechanism, misconfigured CORS can lead to security vulnerabilities:

❌ Avoid Access-Control-Allow-Origin: * for private APIs
🔒 Only allow trusted origins
⚙️ Be strict about allowed methods and headers
🍪 Use Access-Control-Allow-Credentials: true only when necessary

Remember: CORS is a browser-enforced security feature. API endpoints can still be accessed directly using tools like curl or Postman.

🧩 Real-World Use Cases

APIs and Microservices

In modern architectures, frontend applications often need to communicate with multiple backend services hosted on different domains. CORS enables these services to securely share resources.

Third-Party Integrations

When integrating with third-party services (payment gateways, analytics, etc.), CORS allows these external services to access resources from your domain when necessary.

Content Delivery Networks (CDNs)

When your assets are hosted on CDNs with different domains, CORS allows your main website to interact with these resources.

📚 Conclusion

CORS is like a permission system for the web. It prevents unauthorized websites from messing with your data, while still letting trusted sites communicate securely.

Just remember the toy box analogy:

Your website is your toy box.
Another website’s data is your friend’s toy box.
The browser is your mom, who makes sure you play safely.
The server is your friend’s parent, who decides if you're allowed to borrow the toy.
CORS headers are the permission slip.

Understanding CORS is essential for modern web development, especially when working with APIs and distributed systems.

Concurrency in Go

Ismile Hossain — Sun, 11 May 2025 09:55:18 +0000

❓ What is Concurrency?

Concurrency is the ability of a program to manage multiple tasks at once. These tasks may not run exactly at the same time, but they are managed in such a way that it feels like they are happening simultaneously.

🧠 Real-Life Analogy

Imagine you’re cooking dinner:

You put water on the stove to boil. While you wait for it to heat up, you chop vegetables. Once it’s boiling, you add pasta. While the pasta cooks, you start preparing the sauce.
You’re not doing everything at once, but you’ve planned it so that while one task is happening in the background (like water boiling), you’re using that time to work on something else (like chopping vegetables). This way, you’re making steady progress on multiple things without wasting time.

That’s what concurrency means in programming: arranging tasks so they can make progress without blocking each other. Even if only one thing runs at a time, they move forward efficiently by taking turns when it makes sense.

🧑‍💻 Concurrency in Go

In Go, concurrency means:

Your program runs multiple tasks (functions or processes).
Each concurrent task runs in its own Goroutine.
Go has a built-in scheduler that efficiently manages these Goroutines across system threads and CPU cores.

🧵 What is a Goroutine?

A Goroutine is a lightweight, independently executing function, managed by the Go runtime.

You create one using the go keyword.
It’s much lighter than an OS thread (~2 KB of stack to start).
Goroutines can scale massively, you can run thousands without major performance hits.

Here’s how you launch a goroutine:

go someFunction()

It starts running someFunction() in the background, quickly and efficiently.

🧪 Example: Goroutine in Action

package main

import (
    "fmt"
    "time"
)

func backgroundTask() {
    time.Sleep(2 * time.Second)
    fmt.Println("Finished background task")
}

func main() {
    go backgroundTask() // Run task concurrently
    fmt.Println("Main function done")
}

Output:

Main function done

😲 Wait, where’s the output from backgroundTask()?

🧠 What Happened?

main() runs in the main goroutine, the default thread of execution in a Go program.
When go backgroundTask() is called, Go starts a new goroutine for backgroundTask(), but it doesn't wait for it to finish.
The program immediately continues to the next line: fmt.Println("Main function done"), and prints it.
Since there's nothing left after that, main ends.
Once main() finishes, the entire program exits, and Go kills all running goroutines, even if they’re still doing something.

So the backgroundTask() goroutine gets cut off before it can finish and print its message.

🛠️ Fixing It: Give It Time

Add a delay in main() to let the background goroutine finish:

func main() {
    go backgroundTask()
    fmt.Println("Main function done")
    time.Sleep(3 * time.Second)
}

Output:

Main function done
Finished background task

✔️ Now you see both outputs because we gave enough time for the background task to complete.

🤔 But… What If We Don’t Know How Long the Task Takes?

Using time.Sleep() is a bad practice in real applications because:

Unknown task duration: We can’t always predict how long a task will take. Tasks like API calls may vary in duration.
Wasted resources: If you sleep for more time than necessary, you waste resources.
Fragile code: Hardcoding sleep durations makes the program prone to bugs.

🔑 Instead, Go gives us a better tool: sync.WaitGroup

🧩 What is `sync.WaitGroup`?

WaitGroup lets you wait for a group of goroutines to finish; no guessing, no sleeping.

🎯 Think of it like:

A field trip leader keeping count of students:

🧑‍🎓 Each student going out = Add(1)
✅ Each student returning = Done()
🧍 The leader waits until everyone returns = Wait()

✅ Using `WaitGroup` (Step-by-Step)

package main

import (
    "fmt"
    "log"
    "net/http"
    "sync"
)

func backgroundTask(wg *sync.WaitGroup) {
    defer wg.Done() // 4. Tell WaitGroup this task is done

    url := "https://jsonplaceholder.typicode.com/posts"
    resp, err := http.Get(url)
    if err != nil {
        fmt.Fatalf("Error fetching posts: %v", err)
    }

    fmt.Println("Background Task, Response Status:", resp.Status)
}

func main() {
    var wg sync.WaitGroup // 1. Create a WaitGroup

    wg.Add(1) // 2. We’re launching 1 goroutine

    go backgroundTask(&wg) // 3. Start the goroutine

    wg.Wait() // 5. Wait for all tasks to finish

    fmt.Println("Main function done")
}

🧪 Output:

Background Task, Response Status: 200 OK
Main function done

🔍 Explanation:

wg.Add(1) tells Go: “One goroutine is coming.”
Inside the goroutine, defer wg.Done() tells Go: “I’m finished.”
wg.Wait() blocks the main goroutine until the task finishes.

🚀 Running Multiple Goroutines with `WaitGroup`

You can use WaitGroup to manage multiple goroutines at once. Here's how you can launch multiple background tasks concurrently:

package main

import (
    "fmt"
    "log"
    "net/http"
    "sync"
)

func backgroundTask(id int, wg *sync.WaitGroup) {
    defer wg.Done()

    url := "https://jsonplaceholder.typicode.com/posts"
    resp, err := http.Get(url)
    if err != nil {
        log.Printf("Task %d failed: %v\n", id, err)
        return
    }

    fmt.Printf("Task %d, Response Status: %s\n", id, resp.Status)
}

func main() {
    var wg sync.WaitGroup
    totalTasks := 20

    for i := 1; i <= totalTasks; i++ {
        wg.Add(1)
        go backgroundTask(i, &wg)
    }

    wg.Wait()
    fmt.Println("All background tasks completed")
}

🧵 Race Conditions and Synchronization

A race condition happens when two or more goroutines try to use or change the same variable at the same time, and the result depends on who gets there first. This can lead to wrong or unexpected results.

❌ Example: Race Condition Without Synchronization

package main

import (
    "fmt"
    "sync"
)

func main() {
    counter := 0                // Shared variable
    var wg sync.WaitGroup       // Used to wait for all goroutines to finish

    for i := 0; i < 1000; i++ {
        wg.Add(1)               // Increase WaitGroup counter
        go func() {
            defer wg.Done()    // Decrease WaitGroup counter when done
            counter++          // 🔥 Race condition happens here!
        }()
    }

    wg.Wait()                   // Wait for all goroutines to finish
    fmt.Println("Final counter:", counter) // 😬 Unpredictable result!
}

🧠 What’s Happening?

That line counter++ looks simple, but it's not safe when many goroutines run it at the same time.

Here's what really happens inside counter++:

Read the current value of counter
Add 1 to it
Save the new value back

If two goroutines do this at the same time, they might both read the same old value before either writes the new one. So, one increment gets lost.

That’s why you’ll often see a final count that’s less than 1000. This is called a race condition.

✅ How to Fix It: Use a `Mutex`

To safely share data between goroutines, we use a mutex (short for mutual exclusion). It ensures that only one goroutine can access the critical section (the shared resource) at a time.

package main

import (
    "fmt"
    "sync"
)

func main() {
    counter := 0
    var wg sync.WaitGroup
    var mu sync.Mutex            // 👈 Mutex to protect the counter

    for i := 0; i < 1000; i++ {
        wg.Add(1)
        go func() {
            defer wg.Done()
            mu.Lock()            // 👈 Lock before accessing counter
            counter++
            mu.Unlock()          // 👈 Unlock after done
        }()
    }

    wg.Wait()
    fmt.Println("Final counter:", counter) // ✅ Always 1000
}

🔐 What mu.Lock() and mu.Unlock() Do:

Imagine a single key to a room where the shared variable (like counter) lives.

🧑‍🔧 mu.Lock() means:

"I need the key to go into the room and do something important. No one else can come in while I’m inside."

🧑‍💼 mu.Unlock() means:

"I’m done! Here’s the key, someone else can go in now."

So when you write:

mu.Lock()
counter++
mu.Unlock()

You're saying:

Lock the door so no one else can touch counter.
Safely update counter.
Unlock the door so others can take their turn.

✅ This makes sure only one goroutine at a time is changing counter, which keeps things safe and correct.

🔁 If another goroutine tries to mu.Lock() while it's already locked, it will wait until it's unlocked.

👉 Pro tip: Use defer mu.Unlock() right after mu.Lock() to make sure the lock is always released, even if something goes wrong.

📌 Go's Race Detector

Go includes a built-in race detector. Just add -race flag when running your program:

go run -race yourprogram.go

It will tell you if and where race conditions occur in your code!

🔁 Recap: What We Learned So Far

We learned:

Goroutines run functions in the background.
WaitGroups wait until all goroutines are done.
Mutexes prevent race conditions when multiple goroutines access shared data.

🤔 But what if we want goroutines to send back some result or communicate with each other?

That's where channels come in.

📬 What is a Channel?

A channel is a built-in Go feature that allows goroutines to talk to each other.

Think of a channel like a message pipe. One goroutine puts data in, and another takes it out.

✅ Creating a Channel

ch := make(chan int) // creates a channel of type int

📤 Sending Data to a Channel

ch <- 42 // send 42 to channel

📥 Receiving Data from a Channel

value := <-ch // receive value from channel
fmt.Println(value) // prints: 42

🧪 Basic Example

Let’s write a small program with a goroutine that sends a message back to the main function.

package main

import (
    "fmt"
)

func greet(ch chan string) {
    ch <- "Hello from goroutine!"
}

func main() {
    // 1. Create a channel of type string
    messageChannel := make(chan string)

    // 2. Start a goroutine and pass the channel to it
    go greet(messageChannel)

    // 3. Receive the message from the channel
    message := <-messageChannel

    fmt.Println("Received:", message)
}

✅ Output:

Received: Hello from goroutine!

Even if the goroutine takes time (e.g., sleeps), the main function waits until the message is received.

🔍 Code Explanation

make(chan string) We create a channel that can carry strings.
go greet(messageChannel) We start a goroutine and give it the channel.
ch <- "Hello..." Inside the goroutine, we send a message into the channel.
<-messageChannel In the main function, we wait and receive the message.

🔹 Blocking Behavior of Channels

Channels in Go are synchronous by default. That means when you send or receive a value, your code waits (or blocks) until the other side is ready.

Operation	Blocks Until
`ch <- value`	Another goroutine is ready to receive
`value := <-ch`	Another goroutine sends a value

Because of this, you can’t send and receive on an unbuffered channel in the same goroutine, the send will pause and never reach the receive, since both need each other to proceed. This is why we usually use goroutines with channels.

🔥 Here is an example of this

package main

import (
    "fmt"
)

func main() {
    ch := make(chan string) // create a string channel

    ch <- "Hello from goroutine!" // send message to channel

    msg := <-ch      // receive message from channel
    fmt.Println(msg) // Output: Hello from goroutine!
}

Output:

fatal error: all goroutines are asleep - deadlock!

goroutine 1 [chan send]:
main.main()
        /home/iamismile/Desktop/development/golang/helloworld/main.go:10 +0x36
exit status 2

💡 Why This Happens:

You created an unbuffered channel, which means:

The send operation ch <- "..." will block until someone is ready to receive the value.
But in your code, the main goroutine tries to send before any goroutine is receiving.
Since no other goroutine is receiving yet, the main goroutine just waits forever, which causes a deadlock.

🤔 You might be wondering…

I've used the term unbuffered channel. So far, all the channels we’ve used were unbuffered, which means the sender and receiver had to be ready at the same time for communication to happen.

But Go also gives us another type of channel called a buffered channel.

Let’s break down both types in a simple way:

🔹 Unbuffered Channels — "Direct Delivery"

Think of an unbuffered channel like a handshake:
The sender holds out a value, but can’t let go until someone is there to take it.

ch := make(chan int) // unbuffered

📦 How it works:

ch <- 10 → blocks until another goroutine does <-ch
<-ch → blocks until another goroutine does ch <- value

📌 Example:

ch := make(chan string)

go func() {
    ch <- "Hello" // waits until someone receives
}()

msg := <-ch
fmt.Println(msg) // "Hello"

🧾 When to use:

You want strict synchronization between goroutines.
You want the sender to wait for the receiver.

🔷 Buffered Channels — "Mailboxes"

Buffered channels act like a mailbox:
The sender can drop messages into it and walk away, unless the mailbox is full.

ch := make(chan int, 2) // buffer size = 2

📦 How it behaves:

ch <- value blocks only if the buffer is full
<-ch blocks only if the buffer is empty

📌 Example:

ch := make(chan string, 2)

ch <- "one"  // ✅ doesn't block
ch <- "two"  // ✅ doesn't block
// ch <- "three" // ❌ blocks — buffer is full

fmt.Println(<-ch) // "one"
fmt.Println(<-ch) // "two"

🧾 When to use:

You want to separate the timing between sender and receiver
You need to store a few values temporarily
Producer works in bursts (faster than consumer)

🔐 Closing Channels in Go

Now let’s focus on closing channels, a super important part of managing communication between goroutines. It’s not just about stopping data, it's about doing it the right way so your program stays safe, efficient, and bug-free.

🧠 Why Closing a Channel Matters

Imagine you’re running a conveyor belt in a factory. Workers (goroutines) put boxes (data) on the belt, and quality checkers (other goroutines) take those boxes off and inspect them.

But here’s the thing:
If the workers finish their job and leave without telling anyone, the checkers will keep waiting, thinking more boxes will come. Forever. 😬

In Go, closing a channel is how workers say, "Hey, I’m done sending data!"

That way, receivers (the checkers) know it's safe to stop waiting.

🤔 What Happens When a Channel Is Closed?

Here’s what you need to know:

✅ Receiving from a closed channel still works! You’ll get:
- All remaining values in the channel.
- Then zero values (0, "", nil, etc.) after it’s empty.
❌ Sending to a closed channel causes a panic.

You can also check whether a channel is closed using the ok idiom:

value, ok := <-ch
if !ok {
    fmt.Println("Channel is closed!")
}

⏳ When Should You Close a Channel?

Here’s the golden rule:

🟢 Only the sender should close the channel.

And only when all data has been sent.

✅ Do close the channel when sending is done.
❌ Don't close from multiple places.
❌ Don't close a channel if you're only receiving from it.

Think of closing a channel like turning off a faucet; only the person using it should do it.

✅ How to Close a Channel

You use the built-in close() function:

close(ch)

🧪 Example: Properly Closing a Channel

package main

import "fmt"

func greet(ch chan string) {
    ch <- "Hello from goroutine!"
    close(ch) // Close after sending
}

func main() {
    messageChannel := make(chan string)

    go greet(messageChannel)

    for message := range messageChannel {
        fmt.Println("Received:", message)
    }

    fmt.Println("All messages received!")
}

Output

Received: Hello from goroutine!
All messages received!

The for range loop automatically stops when the channel is closed.
Nice and clean!

❗ What If We Don’t Close the Channel?

Let’s say you forget to close the channel:

package main

import "fmt"

func greet(ch chan string) {
    ch <- "Hello from goroutine!"
    // ⚠️ No close
}

func main() {
    messageChannel := make(chan string)
    go greet(messageChannel)

    for message := range messageChannel { // ⚠️ This will block forever
        fmt.Println("Received:", message)
    }
}

😱 This will cause a deadlock!
The for range loop keeps waiting for new messages that will never come, because the sender is done but didn’t signal it. Your program will just hang.

📬 Analogy: Letters in the Mailbox

Think of a channel like a mailbox:

📨 Senders put letters inside.
📭 Receivers check and collect them.

But if no one ever puts up a “no more letters” sign, the mailman keeps checking the box... forever. 🕳️

Closing the channel = putting up that “no more mail” sign.

🧠 Summary of Best Practices

✅ Do	❌ Don’t
Close the channel only from sender	❌ Don’t close the channel from receiver
Close only once, in one place	❌ Don’t close from multiple goroutines
Use `for range ch` to receive safely	❌ Don’t send on a closed channel; panic!

🧵 What If Multiple Goroutines Are Sending?

Here’s a common scenario: You have multiple goroutines sending data into the same channel.
The problem?
If more than one of them tries to close the channel — ❌ Panic alert!

🔑 Solution:
Use a sync.WaitGroup to:

Track when all senders are done.
Let a single, dedicated goroutine close the channel after that.

🧪 Example: Safe Channel Closing with Multiple Senders

package main

import (
    "fmt"
    "sync"
)

func worker(id int, ch chan<- string, wg *sync.WaitGroup) {
    defer wg.Done()
    ch <- fmt.Sprintf("worker %d done", id)
}

func main() {
    var wg sync.WaitGroup
    ch := make(chan string)

    numWorkers := 5
    wg.Add(numWorkers)

    // Start multiple sender goroutines
    for i := 1; i <= numWorkers; i++ {
        go worker(i, ch, &wg)
    }

    // 🔒 Dedicated goroutine to close the channel
    go func() {
        wg.Wait()     // Wait until all workers are done
        close(ch)     // ✅ Only one closer
    }()

    // Receive from channel until it's closed
    for msg := range ch {
        fmt.Println("Received:", msg)
    }
}

Output:

Received: worker 1 done
Received: worker 2 done
Received: worker 3 done
Received: worker 4 done
Received: worker 5 done

🧠 Why This Pattern Works:

1. Goroutines (Workers)
Each worker runs in its own goroutine, sends a message into ch, and then calls wg.Done() to signal it’s finished.

2. WaitGroup
The WaitGroup keeps track of all running workers.
We start by calling wg.Add(5) to tell it we're waiting for 5 workers.
Each worker does wg.Done() when it's finished.

3. Closing the Channel
We spawn a separate goroutine whose only job is to wait until all workers are done (wg.Wait()), and then safely close the channel.
This ensures only one goroutine closes the channel, and it does so after all sends are complete.

4. Receiving Messages
The for msg := range ch loop reads messages as long as the channel is open.
Once it's closed and empty, the loop ends, cleanly and safely.

🎯 A Quick Note: What’s `chan<- string`?

You might have noticed this weird-looking function signature in our example:

func worker(id int, ch chan<- string, wg *sync.WaitGroup)

What’s that chan<- string thing? 🤔

This is a send-only channel, meaning the worker function can only send data into the channel, not receive from it.

It's a good practice because:

It makes your code safer and easier to understand.
It prevents accidental reads from the channel inside the sender.

Here’s a quick comparison:

Syntax	Meaning
`chan string`	Read and write (send + receive)
`chan<- string`	Send-only
`<-chan string`	Receive-only

This kind of type narrowing helps Go enforce better separation of concerns between senders and receivers. 🛡️

🧭 Enter `select`: Choosing Between Channels

Sometimes, you're listening to multiple channels and want to act as soon as any one of them sends data.
That’s exactly what select is for.

🧠 Motivation: Pick the First to Reply
Imagine you’re waiting for two friends to text you.
Whoever replies first, you’ll go hang out with them.

That’s what select does in Go. It waits for any one of multiple channels to send data, and responds immediately.

🧪 Example: First Response Wins

package main

import (
    "fmt"
    "time"
)

func main() {
    fast := make(chan string)
    slow := make(chan string)

    go func() {
        time.Sleep(1 * time.Second)
        fast <- "I'm fast!"
    }()

    go func() {
        time.Sleep(2 * time.Second)
        slow <- "I'm slow!"
    }()

    select {
    case msg := <-fast:
        fmt.Println("Got:", msg)
    case msg := <-slow:
        fmt.Println("Got:", msg)
    }
}

Output:

Got: I'm fast!

💡 What Happens?

The first goroutine sleeps for 1 second and sends "I'm fast!"
The second goroutine sleeps for 2 seconds and sends "I'm slow!"
🔍 select waits until any one of the channels is ready.
Because fast sends first, that case runs, and we skip the slower one!

🔁 What if Nothing Is Ready Yet?

You can use a default case inside select to avoid blocking. Useful when you want to do something else if no channel is ready right now.

🧪 Example: `select` with `default` (Non-blocking)

package main

import (
    "fmt"
    "time"
)

func main() {
    fast := make(chan string)
    slow := make(chan string)

    go func() {
        time.Sleep(2 * time.Second)
        fast <- "I'm fast!"
    }()

    go func() {
        time.Sleep(3 * time.Second)
        slow <- "I'm slow!"
    }()

    // Try to receive before any goroutine sends
    select {
    case msg := <-fast:
        fmt.Println("Got:", msg)
    case msg := <-slow:
        fmt.Println("Got:", msg)
    default:
        fmt.Println("No messages yet. Doing something else.")
    }

    // Wait for messages to arrive
    time.Sleep(3 * time.Second)

    // Try again after waiting
    select {
    case msg := <-fast:
        fmt.Println("Later got:", msg)
    case msg := <-slow:
        fmt.Println("Later got:", msg)
    default:
        fmt.Println("Still nothing...")
    }
}

Output:

No messages yet. Doing something else.
Later got: I'm fast!

🧠 What Happens in This Program?

The first select runs immediately, but no message has arrived, so default is chosen.
Later, all channels are ready. When more than one case is ready, Go picks one at random, so which one runs may change each time you run the program.:

Later got: I'm fast!

Later got: I'm slow!

Use default when you don’t want to wait around, perfect for non-blocking checks or responsive UIs.

🚦 Timeouts with select

Another common pattern is using select with a timeout channel:

package main

import (
    "fmt"
    "time"
)

func main() {
    ch := make(chan string) // Create a channel to receive a string

    // Start a goroutine that waits for 2 seconds and then sends a message
    go func() {
        time.Sleep(2 * time.Second) // Simulate a delay
        ch <- "Finally got data!"   // Send message after delay
    }()

    // Use select to either receive from the channel or timeout
    select {
    case msg := <-ch:
        // If data is received from the channel before timeout
        fmt.Println("Received:", msg)
    case <-time.After(1 * time.Second):
        // If no data arrives in 1 second, this case runs
        fmt.Println("Timeout! Moving on...")
    }
}

Output:

Timeout! Moving on...

🧠 What's Happening?

The goroutine sleeps for 2 seconds before sending data.
But time.After(1 * time.Second) creates a channel that sends a signal after 1 second.
The select waits for whichever comes first.
Since the timeout comes before the message, the program prints: "Timeout! Moving on..."

🧰 This pattern is super useful for:

Timing out slow network calls
Canceling tasks that take too long
Preventing your app from getting stuck waiting

🏁 Advanced Pattern: Fan-Out, Fan-In

The Fan-Out, Fan-In pattern is a powerful concurrency pattern in Go, designed to help distribute work across multiple workers and collect their results efficiently.

💡 What is Fan-Out, Fan-In?

👨‍🍳 Fan-Out: Distributing tasks across multiple workers (like assigning jobs to different team members).
🧾 Fan-In: Gathering the results from all workers into one place (like collecting the completed work at the end of the day).

🍕 Think of it like a pizza restaurant:

Fan-Out: Customer orders are sent to multiple chefs, who each make different pizzas simultaneously.
Fan-In: All completed pizzas are gathered at the same pickup counter for delivery.

That's the Fan-Out, Fan-In pattern! It's a way to:

Break a big task into smaller parts
Work on those parts at the same time
Combine all the results at the end

✅ A Clearer Example (with Code)

package main

import (
    "fmt"
    "sync"
    "time"
)

func main() {
    // Step 1: Create channels for jobs and results
    jobs := make(chan int, 5)      // Channel to send work
    results := make(chan int, 5)   // Channel to collect results

    // Step 2: Start multiple workers (Fan-Out)
    var wg sync.WaitGroup
    numberOfWorkers := 3

    // Launch 3 workers
    fmt.Println("Starting workers...")
    wg.Add(numberOfWorkers)
    for workerId := 1; workerId <= numberOfWorkers; workerId++ {
        // Start each worker in its own goroutine
        go worker(workerId, jobs, results, &wg)
    }

    // Step 3: Send jobs to the workers
    fmt.Println("Sending jobs...")
    jobsToProcess := 6 // We'll process 6 jobs
    for jobId := 1; jobId <= jobsToProcess; jobId++ {
        jobs <- jobId
    }
    close(jobs) // Close jobs channel to signal no more jobs

    // Step 4: Wait for all workers to finish and close results channel
    go func() {
        wg.Wait() // Wait for all workers to finish
        close(results) // Signal that all results are collected
    }()

    // Step 5: Collect and print all results (Fan-In)
    fmt.Println("Collecting results...")
    totalProcessed := 0
    for result := range results {
        totalProcessed++
        fmt.Printf("Got result: %d\n", result)
    }

    fmt.Printf("\nAll done! Processed %d jobs with %d workers\n", 
        totalProcessed, numberOfWorkers)
}

// worker function: processes jobs and sends back results
func worker(id int, jobs <-chan int, results chan<- int, wg *sync.WaitGroup) {
    defer wg.Done() // Mark this worker as done when the function exits

    // Process all jobs assigned to this worker
    for job := range jobs {
        fmt.Printf("Worker %d started job %d\n", id, job)

        // Simulate actual work with different durations
        workTime := 300 * time.Millisecond
        if job%2 == 0 {
            workTime = 500 * time.Millisecond // Even numbered jobs take longer
        }
        time.Sleep(workTime)

        // Send the result (job × 10) back through results channel
        result := job * 10
        results <- result
        fmt.Printf("Worker %d finished job %d → result: %d\n", id, job, result)
    }

    fmt.Printf("Worker %d completed all assigned jobs\n", id)
}

🔍 How the Fan-Out, Fan-In Example Works Step-by-Step)

1.🛠 Setting Up the Channels
We create two channels:

jobs channel: To send work to workers
results channel: To collect completed work

2.🧯 Fan-Out Process
We create 3 worker goroutines that run simultaneously:

Each worker runs independently in the background
All workers watch the same jobs channel for incoming work
This distributes the workload across multiple processors

3.📦 Sending Jobs
We push 6 jobs into the jobs channel:

Each worker picks up jobs as they become available
Workers might process different numbers of jobs depending on their speed
We close the jobs channel to signal that no more work is coming

4.📥 Fan-In Process
We collect all results through the single results channel:

As each worker finishes a job, it sends the result to the results channel
The main program reads all results from the results channel
We only close the results channel after all workers are done

5.🔒 Coordination with WaitGroup
sync.WaitGroup ensures that we:

Know when all workers are done.
Only close the results channel once all processing is finished.

🛠 Real-World Applications

This pattern is useful when you need to:

Process many items in parallel (e.g., analyzing multiple files).
Make multiple API calls simultaneously
Break a large task into smaller independent pieces

Think of it like multiple cashiers at a store (fan-out) all putting money into the same safe at the end of their shift (fan-in).

🚀 Key Benefits of This Pattern

Speed: Work happens in parallel, making better use of multiple CPU cores
Scalability: You can easily adjust the number of workers based on your needs
Resource Control: Channels act as buffers to prevent overwhelming the system

🔍 What's Happening Under the Hood

When you run this code, you'll see workers picking up jobs at different times and finishing at different speeds. Some might do more work than others, but together they finish all the jobs much faster than doing them one by one!

Think of it like multiple checkout lanes at a grocery store versus having just one lane - everything gets done much faster than using just one!

🎯 Conclusion

Go makes it easy to write programs that can do many things at the same time, which is called concurrency. It helps your programs run faster and stay responsive.

Here are the main things to remember:

Goroutines are like super-lightweight threads; they let your code run in the background without much cost.
Channels are the safe way for goroutines to talk to each other and share data.
WaitGroups help you wait until a group of goroutines finishes their work.
Mutexes are tools that make sure only one goroutine can use a shared resource at a time; this prevents bugs called race conditions.
Select lets you listen to multiple channels and respond to whichever one is ready first.

Mastering these tools step by step will help you build faster, more efficient Go programs.

🚀 Happy concurrent programming!

Its Dark: A Dark VSCode Theme

Ismile Hossain — Sat, 01 Jan 2022 15:20:15 +0000

From the day I have started to use VSCode several themes are used by me. Among all of those most used ones are Just Black & Snazzy Operator. Its Dark is based on these themes with some changes. Some screenshots are given below to check how its look like. For best view and feel install and start to use it.

👩‍💻 JavaScript

👩‍💻 TypeScript

👩‍💻 HTML

👩‍💻 CSS

👋 Hope you're gonna enjoy this theme.🙂

Web Development Resources

Ismile Hossain — Fri, 06 Nov 2020 09:49:55 +0000

This is a complete web development resource you need to build your next project. More than 150+ resources for your web development.

This is a shortlist of my Github Web Dev Resources repo. To get all the resources, visit my repo.

🌟 Resources

💻 DEVELOPER ROADMAPS

Frontend - Frontend Development Roadmap.
Backend - Backend Development Roadmap.
React - React Development Roadmap.

📚 DOCUMENTATIONS

🎭 DESIGN TOOLS

Figma - Figma helps teams create, test, and ship better designs from start to finish.
Adobe XD - Share your story with designs that look and feel like the real thing. Wireframe, animate, prototype, collaborate, and more — it’s all right here, all in one place.

🌐 HOW THE WEB WORKS?

How the Internet Works Video - How does the Internet Works?
How the Internet Works Brief Videos - A brief explanations on, how does the Internet works?

🖼 HTML AND CSS

freeCodeCamp - Free course to learn Web Development.
HTML Elements - HTML elements reference by MDN.
HTML Entity - HTML Entity Reference by CSS-Tricks.
CSS3 Properties - CSS reference by MDN.
CSS Reference - A free visual guide to CSS.
Flexbox Froggy - A game that helps you to learn CSS Flex.
CSS-TRICKS Flexbox - A Complete Guide to Flexbox.
Grid Garden - A game for learning CSS Grid.
Learn CSS Grid - A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh.
Can I Use - Up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
CSS Effects - CSS Animations.
Keyframes - Create basic or complex CSS @keyframe animations with a visual timeline editor.
Animista - Play with a collection of ready to use CSS animations.
BEM - BEM naming cheat sheet.

🖋 FONTS AND TYPOGRAPHY

Google Fonts - The #1 resource for free and easy-to-use webfonts
Fonts Arena - Free fonts, free alternatives to premium fonts, done-for-you-research articles
FontPair - Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.

🌈 COLORS AND TOOLS

Coolors - Generate or browse beautiful color combinations for your designs
0to255 - A color tool that makes it easy to lighten and darken colors
Colors and Fonts - Find colors and typography combinations ready to copy-paste in one click
ColorSpace - Generate nice Color Palettes
CSS Gradient - Free css gradient generator tool
uiGradients - A handpicked collection of beautiful color gradients for designers and developers

📷 IMAGE RESOURCES

Unsplash - Free images and photos.
Pexels - Free stock photos.
Pixabay - Free image or video.
LottieFiles - LottieFiles is a collection of animations designed for Lottie - gone are the days of bugging your developer.
removebg - Remove Image Background.
Remove Photo Data - Remove personal data from photos before sharing them on the internet.

🎨 ILLUSTRATIONS

unDraw - Browse to find the illustrations that fit your needs and click to download.
manypixels - Free illustrations to power up your projects. Use them in a commercial or non-commercial way for your landing pages, blog posts, email newsletters, social media graphics, and more.
freepik - Free graphic resources.

💧 ICONS

Ionicons - Open-Sourced and MIT licensed icon pack
Font Awesome - Vector icons and social logos
Material Icons - Material icons are delightful, beautifully crafted symbols for common actions and items. Download on desktop to use them in your digital products for Android, iOS, and web.
icons8 - Download free icons in PNG and SVG.
flaticon - Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT

⚙ GENERATORS

Lorem Ipsum - Lorem Ipsum generator
RealFaviconGenerator - Favicon generator
Favicon Maker - Free Favicon maker
Meta Tags - Meta Tags generator, preview how your webpage will look on Google, Facebook, Twitter, and more!
Clippy - CSS clip-path maker.

👓 ACCESSIBILITY

Accessibility Blog - Medium - Seven easy-to-implement guidelines to design a more accessible web.
Accessibility Blog - Dev - 13 ways to level up your site's accessibility.
Accessibility Cheatsheet - Practical approaches to Universal Design for making your website/web app accessible to everyone.

📉 SITE ANALYZERS

web.dev - See how well your website performs. Then, get tips to improve your user experience.
Lighthouse Metrics - Lighthouse Metrics provides easy insights into your site's performance.

📄 TERMINALS FOR WINDOWS

📝 ONLINE IDE, EDITOR

⚡ JAVASCRIPT

freeCodeCamp - Best free resource to learn JavaScript interactively.
Codecademy - Free course to learn JavaScript interactively.
JavaScript.info - Modern JavaScript Tutorial.
Eloquent JavaScript - This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here.
JavaScript30 - 30 days vanilla JS coding challenge. Build 30 things in 30 days with 30 tutorials.
JavaScript Reference By MDN
JavaScript Event Reference
DOM Manipulation Reference
JavaScript Design Patterns

⚡ NODEJS

Node.js Tutorial - Node.js Crash Course Tutorial by Net Ninja.
nodebestpractices - Huge list of best practices for building node apps. Important for big projects.
The Node Way - An entire philosophy of Node.js best practices a0nd guiding principles exists for writing maintainable modules, scalable applications, and code that is actually pleasant to read.
Express.js Security Tips - How You Can Save and Secure Your App.

⚡ PYTHON

Codecademy - Free course to learn Python interactively.
Programiz - Learn Python Programming.
Awesome Python - A curated list of awesome Python frameworks, libraries, software, and resources.

⚡ REACT

React - Official site documentations, tutorial.
Codecademy - Free React course of Codecademy.
freeCodeCamp - Free web development resourse, where you can also learn react.
React Tutorial - React Tutorial - Fundamentals, Hooks, Context API, React Router, Custom Hooks by Coding Addict.
React Beach Resort - React Beach Resort project by Coding Addict.

🎮 APIs

JSONPlaceholder - Free to use fake online REST API for testing and prototyping.
OpenWeather - Simple and fast and free weather API from OpenWeatherMap you have access to current weather data, hourly, 5- and 16-day forecasts.
SWAPI - The Star Wars API.
Quotes REST API - They Said So has more than 1 million+ quotes in the database, the largest such database in the world. And Quotes API gives an easy way to access the data.

🛠 DEVELOPER TOOLS

Postman - Postman makes API development easy. Simplify each step of building an API and streamline collaboration so you can create better APIs—faster.
Insomnia - Leading Open Source API Client, and Collaborative API Design Platform for GraphQL, and REST.

📖 ONLINE LEARNING RESOURCES

freeCodeCamp - Learn to code at home. Build projects. Earn certifications.
w3schools - The world's largest Web Developer site. Tutorials references, examples, exercises, certificates.
Codecademy - Learn the technical skills you need for the job you want. As leaders in online education and learning to code.
Programiz - Learn to code in Python, C/C++, Java, and other popular programming languages with our easy to follow tutorials, examples, online compiler, and references.
JavaScript Info - The Modern JavaScript Tutorial.
Command Line Tutorial - Basic UNIX commands tutorial.
Try Git - An interactive series of challenges to learn about and experiment with Git.

📦 OTHERS

HTTP Status Codes - HTTP Status Code directory, with definitions, details and helpful code references.
Tiny Helpers - A collection of free single-purpose online tools for web developers.
Free for Developers - This is a list of software and other offerings that have free tiers for developers.

This is a shortlist of my Github Web Dev Resources repo. To get all the resources, visit my repo.

Command Line (Tutorial)

Ismile Hossain — Sun, 15 Mar 2020 05:52:32 +0000

💻 Command Line:

The command line is a tool or interfaces for interacting with a computer using only text rather than the mouse.

Command-Line is an essential tool for software development. We can execute a wide variety of programs on our computer through this. In this tutorial, we are going to learn the necessary UNIX commands for development.

UNIX command is a type of command that is used in LINUX and macOS.

To run some basic UNIX command in windows you need to download Git Command Line Interface from Git SCM.

🔰 Getting Started:

✨ Let's start to learn (can use it as a reference guide)🏃‍♂️🏃‍♂️🏃‍♂️...

✔ Check the Current Directory ➡ `pwd`:

On the command line, it's important to know the directory we are currently working on. For that, we can use pwd command.

It shows that I'm working on my Desktop directory.

✔ Display List of Files ➡ `ls`:

To see the list of files and directories in the current directory use ls command in your CLI.

Shows all of my files and directories of my Desktop directory.

To show the contents of a directory pass the directory name to the ls command i.e. ls directory_name.
Some useful ls command options:-

Option	Description
ls -a	list all files including hidden file starting with '.'
ls -l	list with the long format
ls -la	list long format including hidden files

✔ Create a Directory ➡ `mkdir`:

We can create a new folder using the mkdir command. To use it type mkdir folder_name.

Use ls command to see the directory is created or not.

I created a cli-practice directory in my working directory i.e. Desktop directory.

✔ Move Between Directories ➡ `cd`:

It's used to change directory or to move other directories. To use it type cd directory_name.

Can use pwd command to confirm your directory name.

Changed my directory to the cli-practice directory. And the rest of the tutorial I'm gonna work within this directory.

✔ Parent Directory ➡ `..`:

We have seen cd command to change directory but if we want to move back or want to move to the parent directory we can use a special symbol .. after cd command, like cd ..

✔ Create Files ➡ `touch`:

We can create an empty file by typing touch file_name. It's going to create a new file in the current directory (the directory you are currently in) with your provided name.

I created a hello.txt file in my current working directory. Again you can use ls command to see the file is created or not.

Now open your hello.txt file in your text editor and write Hello Everyone! into your hello.txt file and save it.

✔ Display the Content of a File ➡ `cat`:

We can display the content of a file using the cat command. To use it type cat file_name.

Shows the content of my hello.txt file.

✔ Move Files & Directories ➡ `mv`:

To move a file and directory, we use mv command.

By typing mv file_to_move destination_directory, you can move a file to the specified directory.

By entering mv directory_to_move destination_directory, you can move all the files and directories under that directory.

Before using this command, we are going to create two more directories and another txt file in our cli-practice directory.

mkdir html css touch bye.txt

Yes, we can use multiple directories & files names one after another to create multiple directories & files in one command.

Moved my bye.txt file into my css directory and then moved my css directory into my html directory.

✔ Rename Files & Directories ➡ `mv`:

mv command can also be used to rename a file and a directory.

You can rename a file by typing mv old_file_name new_file_name & also rename a directory by typing mv old_directory_name new_directory_name.

Renamed my hello.txt file to the hi.txt file and html directory to the folder directory.

✔ Copy Files & Directories ➡ `cp`:

To do this, we use the cp command.

You can copy a file by entering cp file_to_copy new_file_name.

Copied my hi.txt file content into hello.txt file. For confirmation open your hello.txt file in your text editor.

You can also copy a directory by adding the -r option, like cp -r directory_to_copy new_directory_name.

The -r option for "recursive" means that it will copy all of the files including the files inside of subfolders.

Here I copied all of the files from the folder to folder-copy.

✔ Remove Files & Directories ➡ `rm`:

To do this, we use the rm command.

To remove a file, you can use the command like rm file_to_remove.

Here I removed my hi.txt file.

To remove a directory, use the command like rm -r directory_to_remove.

I removed my folder-copy directory from my cli-practice directory i.e. current working directory.

✔ Clear Screen ➡ `clear`:

Clear command is used to clear the terminal screen.

✔ Home Directory ➡ `~`:

The Home directory is represented by ~. The Home directory refers to the base directory for the user. If we want to move to the Home directory we can use cd ~ command. Or we can only use cd command.

🛠 Tools I used for this tutorial:-

Github repo of this tutorial Learn Basic Commands.

Thanks for reading and stay tuned.🙂👋

My VS Code Setup

Ismile Hossain — Thu, 20 Feb 2020 04:05:11 +0000

There are a lot of Code Editors, some are free and some are paid. Among all of them my favorite Code Editor is Visual Studio Code. It's free and has amazing features. I'm using it from the beginning of my web development journey.

Today I'm going to share my favorite Code Editor settings, using for my web development. And I'm going to start with my Code Editor looks. After all look matters.

🎨 Theme:

My most used VS Code theme is Snazzy Operator, currently I'm using this.

VS Code Theme - Snazzy Operator

This theme is based on hyper-snazzy and optimized for used with the Operator Mono font. I just love😍 this theme.

⭐ Some other themes I used before:

Oceanic Next - I used Oceanic Next (dimmed bg).
Remedy - I used Remedy Dark (straight).

✒ Font:

Another important things for my Code Editor looks. The font I'm using for my Code Editor is JetBrains Mono. It's a free font with ligatures support.

Captured from JetBrains Mono Fonts Webpage

The font ligatures are a new format for fonts that support symbol decorations instead of normal characters like =>, <=.

Captured from Official Site

Before JetBrains Mono, I used Operator Mono. It's also a nice font.

⭐ Some other fonts I used before:

Operator Mono - Supports ligatures.
Fira Code - Free & supports ligatures.
Dank Mono - Paid & supports ligatures.

🌟🌟🌟 Do you want to use my settings, I use for my VS Code fonts? In your VS Code press Ctrl + p, type settings.json and open that file. Now replace below properties values with my given values.

{
  "workbench.colorTheme": "Snazzy Operator",
  "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 22,
  "editor.letterSpacing": 0.5,
  "editor.fontWeight": "400",
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "solid"
}

📁 Icons:

File Icons enhance our VS Code Editor looks. Mainly it helps us to differentiate between different files & folders by their given icons. For my VS Code I use two file icons :-

Material Icon Theme - One of the most popular icon theme for VS Code.
Material Theme Icons - Currently using this. And I'm using Material Theme Icons Light variant.

Material Icon Theme - File Icons

🛠 Extensions I Use:

🔹 Auto Rename Tag

Automatically rename paired HTML/XML tag, also works in JSX.

Add entry into auto-rename-tag.activationOnLanguage, in your settings.json file to set the languages that the extension will be activated. By default, it is ["*"] and will be activated for all languages.

  "auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]

Auto Rename Tag (Taken from VS Code Auto Rename Tag extension page)

🔹 Bracket Pair Colorizer 2

This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.

🔹 Color Highlight

This extension styles css/web colors, found in your document.

Color Highlight (Taken from google)

🔹 CSS Peek

Peek: Load the css file inline and make quick edits right there. (Ctrl+Shift+F12)
Go To: Jump directly to the css file or open it in a new editor (F12)
Hover: Show the definition in a hover over the symbol (Ctrl+hover)

CSS Peek (Taken from VS Code CSS Peek extension page)

🔹 DotENV

Highlight key, value pairs in .env file.

DotENV (Taken from VS Code DotENV extension page)

🔹 ES7 React/Redux/GraphQL/React-Native snippets

This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.

🔹 ESLint

'Linting' tool for VS Code - or Code checking tool.

"Lint, or a Linter, is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs." Wikipedia

🔹 Highlight Matching Tag

Highlight matching opening or closing tags.

Highlight Matching Tag (Taken from VS Code Highlight Matching Tag extension page)
Styles I use for this extension:

"highlight-matching-tag.styles": {
        "opening": {
            "left": {
                "custom": {
                    "borderWidth": "0 0 0 1.5px",
                    "borderStyle": "solid",
                    "borderColor": "yellow",
                    "borderRadius": "5px",
                    "overviewRulerColor": "white"
                }
            },
            "right": {
                "custom": {
                    "borderWidth": "0 1.5px 0 0",
                    "borderStyle": "solid",
                    "borderColor": "yellow",
                    "borderRadius": "5px",
                    "overviewRulerColor": "white"
                }
            }
        }
    }

🔹 Image preview

Shows image preview in the gutter and on hover.

Image preview (Taken from VS Code Image preview extension page)

🔹 Indent Rainbow

This extension colorizes the indentation in front of your text alternating four different colors on each step.

Indent Rainbow (Taken from VS Code Indent Rainbow extension page)

🔹 Live Server

Launch a local development server with live reload feature for static & dynamic pages.

🔹 Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Set below property value to be true or add this property into your settings.json file to format code on save.

  "editor.formatOnSave": true

🔹 Pug beautify

Pug beautify plugin for VS Code. Press F1 and run the command named Beautify pug/jade to beautify your pug file.

🔹 REST Client

REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.

REST Client (Taken from VS Code REST Client extension page)

🔹 Settings Sync

Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.

🔹 TODO Highlight

Highlight TODO, FIXME and other annotations within your code.

🔹 Version Lens

Shows the latest version for each package in your package.json file.

📃 Terminal Setup:

I use Windows Operating System. Since I use Git via the command line, I have Git Terminal. And I use this terminal as my integrated terminal. My terminal settings are given below:

  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "terminal.integrated.fontFamily": "FuraMono Nerd Font",
  "terminal.integrated.fontSize": 12,
  "terminal.integrated.rightClickCopyPaste": true

✔ Useful VS Code Keyboard Shortcuts:

There are some important keyboard shortcuts, I use in my day to day coding life. These shortcuts enhance my productivity with Visual Studio Code.

Keybinding	Action
Ctrl + P	Go to File, You can move to any file of open solution/folder in Visual Studio code
Ctrl + `	Open terminal in VS Code
Alt + Down	Move Line Down
Alt + Up	Move Line Up
Ctrl + D	Move Last Selection To Next Find Match
Ctrl + Space	Trigger Suggest
Ctrl + F	Find
Ctrl + /	Toggle Line Comment
Ctrl + C	Copy line
Ctrl + X	Cut line
Ctrl + V	Paste
Ctrl + Z	Undo
Ctrl + Y	Redo
Shift + Alt + Down	Copy Line Down
Shift + Alt + Up	Copy Line Up
Ctrl + Shift + T	Reopen the latest closed window

Thanks for reading and stay tuned.🙂👋

My full stack blog based portfolio site

Ismile Hossain — Fri, 14 Feb 2020 13:02:28 +0000

Hello everyone!👋 I have been working on my portfolio site and it is now live. It's a blog based site where I will write about my web technologies. It's a full stack project, this is my first full stack project. Please give some feedback on it. To see my website visit:- https://iamismile.herokuapp.com

Now I'm going to talk a little bit about myself and my website here. I'm new in web development. Eight month passed away that I'm learning web development. I have learned modern technologies: React.js, Node.js, Express, MongoDB, Mongoose. So I've decided to build my own project, a big project, where I can learn more, implement my knowledge and face some real world problems. And I decided to build a blog site for myself where I can share my thoughts and which also helps me to find a good job.

✨ Lets talk about my website Stack, Design, Features and Security.

✔ Stack:

The website build with modern technologies. It is an API and Server-Side rendered website. To check my website API visit: https://iamismile.herokuapp.com/api/v1/tidbits

🔹 Client-Side(i.e. frontend):- HTML, CSS, JavaScript.

🔹 Server-Side(i.e. backend):- Node.js(JavaScript runtime).

🔹 Database:- MongoDB(NoSQL).

🔹 Image Management:- Cloudinary.

🔹 Email Services:- SendGrid(For server-side), EmailJS(For client-side).

🔹 Deployment & Hoisting:- GitHub, Heroku.

🔹 Web Performance:- Lighthouse Chrome DevTools.

✔ Design:

The website is designed with mobile first design. I try to keep all the pages simple and nice looking.

✔ Features:

RESTful API design with advance features: filtering, sorting, pagination.
Used MVC architecture.
Complete modern authentication: login, password reset.
Uploading files and Image processing.
Send email with SendGrid and EmailJS.
Advance error handling.
Used Markdown to write blogs.
Code Style Practices: Used ESLint.
Testing: For testing I used Postman(manual testing).

✔ Security:

Security is an important thing for a website. So some security best practices for my website are given below:

Compromised database: Strong encrypt password & password reset token.
Brute Force Attacks: Implement rate limiting.
Cross-Site Scripting (XSS) Attacks: Sanitize input data.
Denial of Service (DOS) Attacks: Implement rate limiting.
NoSQL query injection.
Use HTTPS.
Random password reset token with expiry dates.
Deny access to a authenticated web pages after password reset.

Thanks for reading and stay tuned. Don't forget to give feedback.🙂

React JSX

Ismile Hossain — Wed, 25 Sep 2019 12:42:55 +0000

👋Hi, In this blog📖, I write about JSX which is the foremost thing to learn React.

Lets Start...🏃‍♂️🏃‍♂️🏃‍♂️

const greet = <h1>Hello</h1>;

This code looks a bit confusing. It seems like javascript because it starts with const and ends with ;. Again it seems like HTML because it also contains <h1>Hello</h1>.

We write this code in a JavaScript file. Despite what it looks like actually this code does not contain any HTML. The part looks like HTML <h1>Hello</h1>, is called JSX.

➡ JSX is a syntax extension for javascript. It is written for React. JSX is not a valid javascript. Web browser can't read it. If a javascript file contains JSX, that file needs to be compiled before ran. JSX compiler translates any JSX into a regular javascript.

✔JSX Element:

A basic unit of JSX is called the JSX element. An element describes what you want to see on the screen. Example of the JSX element given below.

<h1>Hello</h1>

JSX elements are treated as a javascript expression. That means it can be saved in a variable, passed to a function, stored in an object or an array.

// Saved in a variable
const title = <h1>JSX</h1>;

// Stored in an Object
const obj = {
  title: <h1>React</h1>,
  subTitle: <h2>JSX</h2>
};

JSX elements can have attributes like HTML elements can. A single JSX element can have many attributes.

const title = <h1 id="title">Introduction to JSX</h1>;

✔Nesting:

We can nest JSX elements inside of other JSX elements. If JSX expression takes up more than one line then we must wrap the expression in parentheses. We can also save nested JSX expression in a variable just like non-nested JSX expression.

// Nested JSX
<a href="https://www.google.com"><h1>Click me</h1></a>

// For readability, we can use line break and indentation
(
  <a href="https://www.google.com">
    <h1>
      Click me
    </h1>
  </a>
)

// Nested JSX expression saved in a variable
const example = (
  <a href="https://www.google.com">
    <h1>
      Click me
    </h1>
  </a>
);

✨✨✨Important rule, JSX expression must have only one outermost element. The first opening tag and the final closing tag of a JSX expression must belong to the same JSX element.

const example = (
  <div title="outer-most-element">
    <a href="https://www.google.com">
      <h1>
        Click me
      </h1>
    </a>
  </div>
);

✔className & htmlFor:

The grammar of JSX is mostly same as in HTML. In HTML we use class attribute but in JSX we can't use class, we have to use className instead. This is because JSX gets translated into JavaScript, and in JavaScript class is a reserved word. For same reason we can't use for in <label></label> element instead we have to use htmlFor.

<h1 className="greet">Hello</h1>

<label htmlFor="firstName">First Name</label>

✔Self-Closing Tags:

When we write a self-closing tag in HTML, it is optional to include a forward slash before the final angle-bracket. But in JSX we have to include forward-slash otherwise it will raise an error.

// In HTML
<img src="dog.jpg" >
<input type="text" >
<br>

// In JSX
<img src="dog.jpg" />
<input type="text" />
<br />

✔JavaScript Expressions in JSX:

We can use any JavaScript expressions in JSX elements by enclosing them within {} curly braces.

// Variable
const greet = 'Hello World';

// Object
const person = {
  name: 'John Doe',
  age: 24,
  profession: 'Web Developer'
};

// Function
const greetings = () => 'Hello World';

// JavaScript Expressions in JSX
<h1>{10 + 5}</h1>

<h1>{greet}</h1>

<h1>{person.name}</h1>
<p>{person.age}</p>
<p>{person.profession}</p>

<h1>{greetings()}</h1>

we can also use JavaScript expressions in JSX elements attribute.

const google = 'https://www.google.com';

<a href={google}>Click Me</a>

✔Event Listeners in JSX:

JSX elements can have event listeners just like HTML elements can. We can create an event listener by giving JSX elements a special attribute.

onButtonClick = () => alert('Hello World!');

<button onClick={onButtonClick}>Click Me</button>

An event listener attributes value should be a function. In HTML, all event listener names are written in lowercase letters but in JSX event listener names are written in camelCase letters. You can see a list of supported event names here.

✔JSX Conditionals:

We can write JSX based on conditions. Some conditional examples are given below.

1️⃣ if else :

let age = 18;
let message;

if (age >= 18) {
  message = (
    <h1>
      You can buy a drink.
    </h1>
  );
} else {
  message = (
    <h1>
      You can not buy a drink.
    </h1>
  );
}



// output will be
message = <h1>You can buy a drink</h1>;

✨✨✨You can not inject an if statement into JSX.

2️⃣ Ternary Operator :

let age = 18;

const message = (
  <h1>
    {age >= 18 ? 'You can buy a drink.' : 'You can not buy a drink'}
  </h1>
);



// output will be
message = <h1>You can buy a drink</h1>;

3️⃣ && Operator :

let age = 18;

const message = (
  { age >= 18 && <h1>You can buy a drink.</h1> }
  { age < 18 && <h1>You can not buy a drink</h1> }
);



// output will be
message = <h1>You can buy a drink.</h1>;

✔The `.map()` array method:

To create a list of JSX elements, .map() is often used in React.

const persons = ['Lily', 'Riyan', 'John'];

const listItems = persons.map(person => <li>{person}</li>);

<ul>{listItems}</ul>

The {listItems} will evaluate to an array. And we can use an array into a JSX elements i.e.

const listItems = [
  <li>Lily</li>,
  <li>Riyan</li>,
  <li>John</li>
];

<ul>{listItems}</ul>



// output will be
<ul>
  <li>Lily</li>
  <li>Riyan</li>
  <li>John</li>
</ul>

✔Keys:

When we make a list in JSX, we need to include key. key is a JSX attribute and the value should be something unique, similar to an id attribute.

<ul>
  <li key="li-1">Example 1</li>
  <li key="li-2">Example 2</li>
  <li key="li-3">Example 3</li>
</ul>

Keys help React to identify which items have changed, added, or removed.

That's it, Thanks🙂 for reading and stay tuned🙋‍♂️.

How to setup Webpack and Babel for React

Ismile Hossain — Thu, 12 Sep 2019 11:25:32 +0000

All of us have used CRA(create-react-app) when we worked with React. It's an awesome tool. It gives us just to focus on React by letting take care of the configuration. Today we are going to learn how to setup Webpack and Babel for our React app.

First, let's learn about Webpack and Babel.

✔Webpack:

Its a module bundler which lets us bundle our project files into a single file.

A module is a file that contains definitions - including variables and functions, that we can use once it is imported.

It requires a webpack.config.js file in the root folder. Where we tell our webpack how to work with our application by giving entry point information and also output information.

const path = require('path');

module.exports = {
  entry: './src/app.js', // relative path
  output: {
    path: path.join(__dirname, 'public'), // absolute path
    filename: 'bundle.js' // file name
  }
};

The "entry" point is where does our application going to kick off and we set it by giving relative path value. And the output property tells webpack where to emit the outputs it creates and how to name those files. We have to give absolute path value in our output path properties.

✔Babel:

It's a JavaScript compiler. Babel on its own actually has no functionality. Yeah, its a compiler but it's not going to compile anything by default. We have to add various plugins and presets to add support to particular language features. You can check this out by visiting Babel website. In the babel website navigation bar section you will find Try It Out. Click on it and you will get a new window.

Where in the left side window you can write your code and in the right side window you will get your compiled code. Now let's write some JSX in the left side window.

const template = <p>Hello</p>;

In the right-side window, you will get JavaScript understandable compiled code which is always run behind the scene in our React app. On the left side, you see some PRESETS options where some options are already been ticked. If you now untick react presets option you will see an error caused this react preset is responsible for converting our JSX syntax into JavaScript understandable code.

In our tutorial we are going to use two presets:

@babel/preset-env :- Which helps babel to convert ES6, ES7 and ES8 code to ES5.
@babel/preset-react :- Which Transforms JSX to JavaScript.

✔Getting Started:

Now we know a little bit about webpack and babel. Let's dive into our React setup.

Create directories with these commands:

mkdir react-setup-tutorial cd react-setup-tutorial mkdir public src touch public/index.html src/app.js

In index.html file add the following code inside it.

  <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>React App</title>
      </head>

      <body>
        <div id="root"></div>

        <script src="./bundle.js"></script>
      </body>
    </html>

Initialize the project by running:

npm init -y

✔Install Webpack & React:

npm install webpack webpack-cli --save-dev

We installed webpack-cli so that we can use webpack in the command line.

We already know that webpack needs webpack.config.js to file in the root of the project directory. So let's create webpack.config.js file with the following code inside it.

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  }
};

Next, add the webpack command inside package.json:

"scripts": {
    "start": "webpack --mode=development",
    "build": "webpack --mode=production"
  }

There are two modes in Webpack, development and production. Which we can set by --mode flag. Production mode produces optimize files which are ready for use in production.

Install React:

npm install react react-dom

Now import react and react-dom inside our app.js file and also add some react code.

import React from 'react';
import ReactDOM from 'react-dom';

const template = React.createElement('p', {}, 'Hello from react');

ReactDOM.render(template, document.getElementById('root'));

Now use below command in your terminal and open your index.html file in your browser.

npm start

Your app is working well. But you have a question why didn't we use JSX. This time lets try with some JSX code in our app.js file.

import React from 'react';
import ReactDOM from 'react-dom';

const template = <p>Hello from react</p>;

ReactDOM.render(template, document.getElementById('root'));

Now again run our previous command.

npm start

This time you will get an error. That's because we use JSX and JavaScript doesn't support JSX. So If we want to use JSX in our app we need to compile it. And we can do it by babel.

✔Install & Configure Babel:

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

We already know about @babel/preset-env and @babel/preset-react. Now, what is @babel/core and babel-loader?

@babel/core :- It allows us to run babel from tools like webpack.
babel-loader :- Its a webpack plugin. It allows us to teach webpack how to run babel when webpack sees certain files.

Let's configure babel by creating a .babelrc file inside the root of the project directory with the following contents inside of it.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

This file will tell babel which presets to use for transpiling the code.

Now its time to teach webpack how to compile JSX into JavaScript code. To do that we need to use loader. A loader lets us customize the behavior of webpack when it loads a certain file. It's going to run certain files through babel. For that, we need to set up a loader in webpack.config.js file via the module property on our objects. module property needs an array of rules and a rule let us define how we want to use our loaders. Now we have one rule to take JSX and convert it into JavaScript with Babel.

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
};

Here we set one rule of the object where loader property tells which loader we want to use and we use babel-loader. test property for what files do we actually want to run this loader on and we want to run it on files that end up with .js. exclude property to exclude a set of files and we use /node_modules/ cause we don't want to run babel through those libraries. Now we can use JSX in our React. Let's run our app again.

npm start

This time we don't get any error. Open your index.html file in the browser and yeah it's working.

✔Configure Source Map:

Let's add some extra configuration settings in our webpack.config.js file.

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  devtool: 'cheap-module-eval-source-map'
};

Here we setup Source map by using devtool property. It enhances our debugging process. Its use to display our original JavaScript while debugging, which is a lot easier to look at than a minified code.

✔Install DevServer:

Run this below command in the terminal.

npm install webpack-dev-server --save-dev

Add following code inside webpack.config.js file.

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  devtool: 'cheap-module-eval-source-map',
  // changed line
  devServer: {
    contentBase: path.join(__dirname, 'public')
  }
};

Next add webpack-dev-server command inside package.json:

"scripts": {
    "start": "webpack --mode=development",
    "build": "webpack --mode=production",
    "dev-server": "webpack-dev-server"
  }

Now run this command.

npm run dev-server

It's going to start the development server. And It gives us output where we can access it. Now we have integrated both tools into one, the dev server is our server and its also running webpack for us.

Now we can visit the highlighted URL and we will get our app.

✔Loading the Styles:

Let's create a new file and folder in the src directory.

Use the following command to create a file and folder.

mkdir src/styles touch src/styles/styles.css

Now add the following styles inside styles.css file.

* {
  color: blue;
}

To load our style.css file we need to set up new rules in webpack.config.js file.

Before that, we need to install some new loaders.

npm install css-loader style-loader --save-dev

css-loader: Allows webpack to load our CSS assets.
style-loader: Take CSS and adds it to the DOM by injecting a <style> tag.

Now add new rules in our webpack.config.js file.

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      // New rules to load css
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public')
  }
};

import style.css inside our app.js file and run dev-server to see the effect.

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/styles.css';

const template = <p>Hello from react</p>;

ReactDOM.render(template, document.getElementById('root'));

If we want to use SCSS then we need to install sass-loader that would help webpack to compile sass to css. The sass-loader is dependent on another package node-sass.

npm install sass-loader node-sass --save-dev

Now configure webpack.config.js file again for SASS by chaining sass-loader with the css-loader and the style-loader.

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      // Rules to load scss
      {
      // Some change here
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public')
  }
};

Now chnage our style.css file extension .css to .scss that is style.scss

Also change the css import in app.js to:

import './styles/styles.scss';

And add the following style to see that our wepback is working correctly for SASS.

$brand-color: blue;

* {
  color: $brand-color;
}

Now run dev-server again by using the following command.

npm run dev-server

And we configure our webpack for SASS.

That's it. Now we have configured Webpack and Babel for React that we can use to create our React projects. Thanks for reading and stay tuned.

What "use strict" means in JavaScript

Ismile Hossain — Sun, 01 Sep 2019 13:55:43 +0000

"use strict"

For long time JavaScript evolved without facing compatibility issues. This is because JavaScript added new features without changing old functionality. And it had the benefits of never breaking existing code.

This case was until 2009 when ECMAScript 5 (ES5) appeared. In that version new features were added and also modified some of the existing ones. But most modifications are off by default to keep the old code working. If we want to work the whole scripts modern way we need to explicitly enable them.

For that we can use a directive looks like a string "use strict" or 'use strict'.

Always use "use strict" at top of our script file and it is recommended.

// At top of the file
"use strict";

// code
// code
//code

// code will work modern way

We can use "use strict" at the beginning of the function body instead of at the top of the script. It will enable strict mode in that function only.

// default mode

(function(){
  "use strict";

  // strict mode
})();

// default mode

But again it is recommended to use "use strict" at top of the file.

DEV Community: Ismile Hossain

Understanding Scope in Go

🧐 What is Scope?

🏢 The Company Building Analogy

🧭 What is Lexical Scope?

📝 Basic Scope Example

🗄️ Block Scope in Action

👥 Variable Shadowing: The Impostor Notes

🔒 Package Scope: Public vs Private

🧠 A Note on Closures and Scope

🎯 Key Takeaways

CORS Explained: From Toy Boxes to Technical Implementation

🧠 CORS Explained Like You're 5

🔒 What is CORS?

🌐 What is an "Origin"?

📍 Example Scenario

✅ How CORS Works

🛫 Preflight Request Flow

📦 Sample HTTP Preflight Request

🔐 Why CORS Matters

🔑 Important CORS Headers Explained

🛠️ CORS in Code (Server Examples)

⚠️ Common CORS Errors and How to Debug

🔍 Debugging CORS Issues with Browser Dev Tools

🔒 Security Considerations

🧩 Real-World Use Cases

📚 Conclusion

Concurrency in Go

❓ What is Concurrency?

🧠 Real-Life Analogy

🧑‍💻 Concurrency in Go

🧵 What is a Goroutine?

🧪 Example: Goroutine in Action

🧠 What Happened?

🛠️ Fixing It: Give It Time

🤔 But… What If We Don’t Know How Long the Task Takes?

🧩 What is sync.WaitGroup?

🎯 Think of it like:

✅ Using WaitGroup (Step-by-Step)

🚀 Running Multiple Goroutines with WaitGroup

🧵 Race Conditions and Synchronization

✅ How to Fix It: Use a Mutex

📌 Go's Race Detector

🔁 Recap: What We Learned So Far

🤔 But what if we want goroutines to send back some result or communicate with each other?

📬 What is a Channel?

🧪 Basic Example

🔹 Blocking Behavior of Channels

🔥 Here is an example of this

💡 Why This Happens:

🤔 You might be wondering…

🔹 Unbuffered Channels — "Direct Delivery"

🔷 Buffered Channels — "Mailboxes"

🔐 Closing Channels in Go

🧠 Why Closing a Channel Matters

🤔 What Happens When a Channel Is Closed?

⏳ When Should You Close a Channel?

✅ How to Close a Channel

🧪 Example: Properly Closing a Channel

❗ What If We Don’t Close the Channel?

📬 Analogy: Letters in the Mailbox

🧠 Summary of Best Practices

🧵 What If Multiple Goroutines Are Sending?

🧪 Example: Safe Channel Closing with Multiple Senders

🧠 Why This Pattern Works:

🎯 A Quick Note: What’s chan<- string?

🧭 Enter select: Choosing Between Channels

🧪 Example: First Response Wins

🔁 What if Nothing Is Ready Yet?

🧪 Example: select with default (Non-blocking)

🧠 What Happens in This Program?

🚦 Timeouts with select

🏁 Advanced Pattern: Fan-Out, Fan-In

🔍 How the Fan-Out, Fan-In Example Works Step-by-Step)

🛠 Real-World Applications

🚀 Key Benefits of This Pattern

🔍 What's Happening Under the Hood

🎯 Conclusion

Its Dark: A Dark VSCode Theme

Web Development Resources

🧩 What is `sync.WaitGroup`?

✅ Using `WaitGroup` (Step-by-Step)

🚀 Running Multiple Goroutines with `WaitGroup`

✅ How to Fix It: Use a `Mutex`

🎯 A Quick Note: What’s `chan<- string`?

🧭 Enter `select`: Choosing Between Channels

🧪 Example: `select` with `default` (Non-blocking)

✔ Check the Current Directory ➡ `pwd`:

✔ Display List of Files ➡ `ls`:

✔ Create a Directory ➡ `mkdir`:

✔ Move Between Directories ➡ `cd`:

✔ Parent Directory ➡ `..`:

✔ Create Files ➡ `touch`:

✔ Display the Content of a File ➡ `cat`:

✔ Move Files & Directories ➡ `mv`:

✔ Rename Files & Directories ➡ `mv`:

✔ Copy Files & Directories ➡ `cp`:

✔ Remove Files & Directories ➡ `rm`:

✔ Clear Screen ➡ `clear`:

✔ Home Directory ➡ `~`: