DEV Community: zohaib hassan

I'm a Developer from Pakistan — Here's the Side Project I Shipped in 2024

zohaib hassan — Thu, 04 Jun 2026 07:03:19 +0000

Regex in 10 Minutes — The Only Guide Beginners Actually Need

Regex has a reputation for being impossible to read.

This:

```text id="regex1"
^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$




...is not random keyboard smashing.

It's an **email validator**.

By the end of this guide, you'll understand every character in it.

---

# What Is Regex?

Regular expressions (regex) are patterns used to match character combinations in strings.

Every major programming language supports them.

---

## Use Cases

* Validate email addresses, phone numbers, URLs
* Find and replace text
* Extract data from strings
* Parse log files
* Search in code editors

---

# The Building Blocks

## Literal Characters

The simplest regex matches exact characters:



```text id="lit1"
hello → matches "hello" in "say hello world"

The Dot (.)

Matches any single character except newline:

```text id="dot1"
h.llo → matches "hello", "hallo", "hxllo"




---

## Character Classes []

Match any one character inside brackets:



```text id="class1"
[aeiou] → matches any vowel  
[0-9]   → matches any digit  
[a-z]   → matches lowercase letters  
[A-Z]   → matches uppercase letters

Quantifiers

Control how many times something matches:

* → 0 or more times
+ → 1 or more times
? → 0 or 1 time (optional)
{3} → exactly 3 times
{2,5} → between 2 and 5 times

Anchors

^ → start of string
$ → end of string

Special Character Classes

\d → any digit [0-9]
\w → any word character [a-zA-Z0-9_]
\s → whitespace
\D → non-digit
\W → non-word character

Real Examples You'll Actually Use

Validate an Email

```regex id="email1"
^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$




### Breakdown:

* `^` → start of string
* `[a-zA-Z0-9._%+-]+` → valid username characters
* `@` → literal symbol
* `[a-zA-Z0-9.-]+` → domain name
* `\.` → literal dot
* `[a-zA-Z]{2,}` → domain extension
* `$` → end of string

---

## Validate a URL



```regex id="url1"
https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}

Extract Numbers from Text

```regex id="num1"
\d+




Example:



```text id="ex1"
Order #12345 costs $99

Matches:

12345
99

Validate Pakistani Phone Number

```regex id="pk1"
^(+92|0)[0-9]{10}$




---

## Remove Extra Whitespace



```regex id="space1"
\s+

Replace with a single space.

Test Your Regex Instantly

Stop guessing in code.

Use this live tester:

👉 https://onlinefreetools.online/tools/regex-tester

You can:

Paste regex patterns
Test input strings
See matches instantly

Common Mistakes Beginners Make

1. Forgetting to Escape Characters

. means any character
\. means literal dot

2. Not Using Anchors

Without ^ and $, patterns may match partial strings.

Example:

email regex without anchors may incorrectly match invalid strings like: notanemail@valid.com!!!

3. Greedy Matching

.* matches as much as possible
Use .*? for lazy matching

4. Not Testing Edge Cases

Always test:

Empty strings
Very long inputs
Special characters

Summary Cheat Sheet

Symbol	Meaning
`.`	Any character
`\d`	Digit
`\w`	Word character
`\s`	Whitespace
`^`	Start of string
`$`	End of string
`*`	0 or more
`+`	1 or more
`?`	Optional
`{n}`	Exactly n times
`[abc]`	Any of a, b, c
`[^abc]`	Not a, b, or c
`(abc)`	Group
`a	b`	a or b

Final Thoughts

Regex looks scary at first, but it becomes natural very quickly once you understand the basics.

The key is:

Learn patterns, not memorization
Test everything visually
Start small, then build

Practice here:

👉 https://onlinefreetools.online/tools/regex-tester

Within a week, regex will feel intuitive.

Written by Zohaib Hassan

OnlineFreeTools.online — free browser tools for developers

Regex in 10 Minutes — The Only Guide Beginners Actually Need

zohaib hassan — Thu, 04 Jun 2026 07:01:11 +0000

Regex in 10 Minutes — The Only Guide Beginners Actually Need

Regex has a reputation for being unreadable.

This:

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

...looks like random keyboard smashing.

But it’s actually a valid email validator.

By the end of this guide, you’ll understand every character in it.

What Is Regex?

Regular expressions (regex) are patterns used to match combinations of characters in strings.

Almost every programming language supports them.

Common Use Cases

Validate emails, phone numbers, URLs
Search and replace text
Extract data from strings
Parse logs
Search within code editors

The Building Blocks of Regex

Literal Characters

The simplest regex matches exact text:

```text id="lit1"
hello → matches "hello" in "say hello world"




---

## The Dot (.)

Matches any single character (except newline):



```text id="dot1"
h.llo → matches "hello", "hallo", "hxllo"

Character Classes []

Match any ONE character inside brackets:

```text id="class1"
[aeiou] → any vowel
[0-9] → any digit
[a-z] → lowercase letters
[A-Z] → uppercase letters




---

## Quantifiers

Control how many times a pattern repeats:

* `*` → 0 or more
* `+` → 1 or more
* `?` → 0 or 1 (optional)
* `{3}` → exactly 3 times
* `{2,5}` → between 2 and 5 times

---

## Anchors

* `^` → start of string
* `$` → end of string

Example:



```text id="anchor1"
^hello$ → matches only "hello" exactly

Special Character Classes

Pattern	Meaning
`\d`	Any digit (0–9)
`\w`	Word character (a–z, A–Z, 0–9, _)
`\s`	Whitespace
`\D`	Non-digit
`\W`	Non-word character

Real-World Examples

Validate an Email

```regex id="email1"
^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$




### Breakdown:

* `^` → start of string
* `[a-zA-Z0-9._%+-]+` → valid username characters
* `@` → literal symbol
* `[a-zA-Z0-9.-]+` → domain name
* `\.` → literal dot
* `[a-zA-Z]{2,}` → domain extension
* `$` → end of string

---

## Validate a URL



```regex id="url1"
https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}

Extract Numbers from Text

```regex id="num1"
\d+




Example:



```text
"Order #12345 costs $99"

Matches:

12345
99

Validate Pakistani Phone Number

```regex id="pk1"
^(+92|0)[0-9]{10}$




---

## Remove Extra Whitespace



```regex id="space1"
\s+

Replace with a single space.

Test Your Regex Instantly

Instead of guessing inside your code, test patterns live here:

👉 https://onlinefreetools.online/tools/regex-tester

You can:

Paste your regex
Test input strings
See matches highlighted in real time

Common Mistakes Beginners Make

1. Forgetting to Escape Characters

. means any character
\. means literal dot

2. Missing Anchors

Without ^ and $, your pattern may match partial strings.

Example:

Bad:

email regex without anchors

It may match invalid inputs like:
notanemail@valid.com!!!

3. Greedy Matching

.* matches everything possible.

Use .*? for lazy matching when needed.

4. Not Testing Edge Cases

Always test:

Empty strings
Very long inputs
Special characters

Regex Cheat Sheet

Symbol	Meaning
`.`	Any character
`\d`	Digit
`\w`	Word character
`\s`	Whitespace
`^`	Start of string
`$`	End of string
`*`	0 or more
`+`	1 or more
`?`	Optional
`{n}`	Exactly n times
`[abc]`	Any of a, b, c
`[^abc]`	Not a, b, or c
`(abc)`	Group
`a	b`	a or b

Final Thoughts

Regex looks scary at first, but it becomes intuitive very quickly once you understand the building blocks.

The key is simple:

Learn patterns, not memorization
Test everything visually
Start small, build gradually

Practice here:

👉 https://onlinefreetools.online/tools/regex-tester

Within a week, regex will feel natural.

Written by Zohaib Hassan

OnlineFreeTools.online — free browser tools for developers

I Reduced My Website's Image Size by 80% — Here's Exactly How

zohaib hassan — Thu, 04 Jun 2026 06:57:05 +0000

I Reduced My Website's Image Size by 80% — Here's Exactly How

Last month, I audited my website and discovered that images were the biggest performance bottleneck.

One hero image alone was 4.2MB.

No surprise my Lighthouse score was terrible.

After optimization, that same image dropped to 820KB, and page load time improved by 2.3 seconds.

Here’s exactly what I did.

Why Image Size Matters More Than You Think

Images are usually the largest assets on any webpage.

According to HTTP Archive, images account for 50%+ of total page weight on average.

Every extra megabyte costs you:

Slower page loads (especially on mobile)
Higher bounce rates
Lower SEO rankings (Core Web Vitals impact)
Increased bandwidth costs at scale

Understanding Image Compression

Lossy Compression

Lossy compression permanently removes some image data to reduce file size.

Smaller file size
Slight quality reduction (usually unnoticeable)

Best for:

Photos
Complex images with many colors

Example format: JPEG

Lossless Compression

Lossless compression reduces file size without removing image data.

No quality loss
Larger than lossy formats

Best for:

Logos
Screenshots
Images with text or transparency

Example format: PNG

JPEG vs PNG vs WebP vs AVIF

Format	Compression	Transparency	Best For
JPEG	Lossy	❌ No	Photos
PNG	Lossless	✅ Yes	Logos, screenshots
WebP	Lossy + Lossless	✅ Yes	Everything
AVIF	Lossy + Lossless	✅ Yes	Next-gen web

Recommendation (2026)

Use WebP by default.

Why?

25–35% smaller than JPEG
Excellent quality retention
Supported in all modern browsers

My Exact Optimization Process

Step 1 — Audit Your Images

Run your site through:

Google PageSpeed Insights
Lighthouse

Focus on:

“Properly size images”
“Serve images in next-gen formats”

Step 2 — Compress Without Losing Quality

I used this tool:

👉 https://onlinefreetools.online/tools/image-compressor

Everything runs directly in the browser:

No uploads
No server processing
Instant compression

For JPEGs, 75–85% quality is the sweet spot:

No visible difference
50–70% file size reduction

Step 3 — Resize Images Properly

Never serve a 2000px image inside a 400px container.

Always resize images to their actual display dimensions before compression.

Step 4 — Use Lazy Loading

```html id="lazy1"




This delays loading off-screen images until the user scrolls to them.

Result: faster initial page load.

---

## Step 5 — Add Width and Height



```html id="dim1"
<img src="image.jpg" width="800" height="600" alt="Description" />

This prevents layout shifts by reserving space before images load.

Results From My Site

Asset	Before	After	Savings
Hero Image	4.2 MB	820 KB	80%
Blog Thumbnails	890 KB	145 KB	84%
Tool Screenshots	1.1 MB	210 KB	81%
Total Page Weight	8.4 MB	1.7 MB	~80%

Quick Wins You Can Do Right Now

Compress all images using a browser tool
Add loading="lazy" to below-the-fold images
Define width and height attributes for all images
Convert hero images to WebP
Replace decorative images with CSS where possible

Final Thoughts

Image optimization is one of the fastest performance wins in web development.

A faster site means:

Better UX
Better SEO
Higher conversion rates

Start with images — it's the highest-impact improvement you can make today.

Written by Zohaib Hassan

OnlineFreeTools.online — 30+ free developer tools, no signup required

MD5 Is Broken — Stop Using It for Passwords (Use SHA256 Instead)

zohaib hassan — Thu, 04 Jun 2026 06:54:22 +0000

MD5 Is Broken — Stop Using It for Passwords (Use SHA256 Instead)

MD5 was invented in 1991. It's 2026, yet I still see developers using MD5 for password hashing in production systems.

Let’s break down why this is dangerous and what you should use instead.

What Is a Hash Function?

A hash function takes any input and produces a fixed-length output called a digest or hash.

It is a one-way function, meaning you cannot reverse it to get the original input.

Example:

```text id="hash1"
Input: "password123"
MD5: 482c811da5d5b4bc6d497ffa98491e38
SHA256: ef92b778bafe771e89245b89ecbc08a44a4e166c06659911881f383d4473e94f




Even a small input change completely changes the output.

---

# Why MD5 Is Broken

MD5 generates a **128-bit hash**, which was considered secure decades ago.

Today, it's extremely weak.

Modern GPUs can compute **billions of MD5 hashes per second**, making brute-force attacks trivial.

---

## The Rainbow Table Problem

Attackers use precomputed databases called **rainbow tables**.

These tables map common passwords → their hash values.

So if you hash:



```text
"password123" → MD5 → known value

An attacker can instantly look it up.

Collision Vulnerabilities

Researchers have demonstrated that two different inputs can produce the same MD5 hash.

This breaks the core security guarantee of hash functions.

SHA256 — The Better Choice

SHA256 produces a 256-bit hash and is part of the SHA-2 family.

It is currently considered cryptographically secure.

Example:

```text id="sha1"
"hello" →
2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824




Even tiny changes completely change the output:



```text
"hello"  → 2cf24dba...
"Hello"  → 185f8db3...

But Wait — Don’t Use SHA256 for Passwords Either

This is where many developers make a mistake.

SHA256 is not suitable for password hashing.

Why?

Because it is too fast.

Fast hashing allows attackers to brute-force passwords quickly using GPUs.

What You Should Use Instead

For password storage, use:

bcrypt
scrypt
Argon2 (recommended)

These are designed to be:

Slow (to prevent brute-force attacks)
Salted (to prevent rainbow tables)
Memory intensive (harder for GPUs to crack)

When to Use Each Algorithm

Algorithm	Output Size	Speed	Security	Best Use Case
MD5	128-bit	Very Fast	❌ Broken	Legacy only
SHA1	160-bit	Fast	❌ Weak	Avoid
SHA256	256-bit	Fast	✅ Strong	Files, APIs, checksums
bcrypt	184-bit	Slow	✅ Strong	Passwords
Argon2	Variable	Slowest	✅ Strongest	Passwords

Real-World Use Cases

Use SHA256 for:

File integrity verification
API request signing
Digital signatures
Checksums

Use bcrypt / Argon2 for:

Password storage
Sensitive credential hashing

Try It Yourself

You can generate hashes instantly in your browser:

👉 https://onlinefreetools.online/tools/hash-generator

No data is sent to any server — everything runs locally in your browser.

Summary

MD5 is broken and should never be used for security
SHA256 is fine for integrity checks, not passwords
Passwords should use bcrypt, scrypt, or Argon2
Always use salting for password hashing

Hashing mistakes are still one of the most common security issues in real-world applications.

Fixing them early saves a lot of pain later.

Written by Zohaib Hassan

OnlineFreeTools.online — free browser-based tools for developers

Your JWT Tokens Are Not as Safe as You Think — Here's Why

zohaib hassan — Thu, 04 Jun 2026 06:51:14 +0000

What is a JWT Token?

Stop Pasting JWT Tokens Into Random Online Decoders

I see developers paste JWT tokens into random online decoders every day without thinking twice.

Here's the problem: JWT tokens often contain sensitive information, and pasting them into unknown websites can become a serious security risk.

Let's break down what JWT tokens actually are, what's inside them, and how to decode them safely.

What Is a JWT Token?

JWT stands for JSON Web Token.

It's a compact, URL-safe format used to securely transmit information between parties. JWTs are commonly used in:

REST APIs
Authentication systems
OAuth flows
Single Sign-On (SSO)
Mobile applications

A typical JWT looks like this:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IlpvaGFpYiIsImlhdCI6MTUxNjIzOTAyMn0
.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

A JWT consists of three parts, separated by dots (.):

Header
Payload
Signature

Understanding the JWT Structure

1. Header

The header contains metadata about the token, including the signing algorithm.

Decoded header:

{
  "alg": "HS256",
  "typ": "JWT"
}

alg → Signing algorithm

typ → Token type

2. Payload

The payload contains the actual claims (data).

Decoded payload:

{
  "sub": "1234567890",
  "name": "Zohaib",
  "iat": 1516239022
}

Common payload fields include:

User ID
Username
Email address
Roles and permissions
Issued time (iat)
Expiration time (exp)

This is where most developers accidentally expose sensitive information.

3. Signature

The signature ensures the token hasn't been modified.

A simplified signing process looks like:

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret
)

The signature can be verified but cannot be decoded into readable JSON.

The Security Risk Nobody Talks About

Many developers assume JWTs are encrypted.

They're not.

JWT payloads are encoded, not encrypted.

Anyone who obtains your token can decode the header and payload instantly.

That's why you should never:

❌ Store passwords in JWT payloads

❌ Store API secrets in JWT payloads

❌ Paste production tokens into unknown online tools

❌ Log JWTs in production environments

❌ Share JWTs in screenshots or support tickets

Remember:

If someone has your JWT, they can read everything inside the payload.

How to Decode JWTs Safely

The safest option is using a decoder that runs entirely inside your browser.

This means:

No server requests
No token uploads
No data storage
No third-party processing

The decoding happens locally using JavaScript.

Your token never leaves your machine.

JWT vs Session Authentication

Developers often ask:

"Should I use JWTs or Sessions?"

Here's a quick comparison:

Feature	JWT	Sessions
Stateless	✅ Yes	❌ No
Server Storage Needed	❌ No	✅ Yes
Easy Token Revocation	❌ Harder	✅ Easier
Horizontal Scaling	✅ Excellent	⚠️ More Complex
Mobile/API Friendly	✅ Excellent	⚠️ Less Ideal

When JWTs Make Sense

REST APIs
Microservices
Mobile apps
Distributed systems
Third-party integrations

When Sessions Make Sense

Traditional server-rendered applications
Systems requiring immediate logout/revocation
Simpler authentication architectures

JWT Best Practices

If you're using JWT authentication in production:

Keep Payloads Minimal

Store only the information you truly need.

Use Short Expiration Times

Avoid long-lived access tokens.

Always Use HTTPS

JWTs should never travel over unsecured connections.

Implement Refresh Tokens

Use refresh tokens instead of extremely long expiration periods.

Never Store Secrets in Payloads

JWT payloads are visible to anyone holding the token.

Validate Signatures

Decoding a JWT does not verify it.

Always validate the signature on the server side.

Final Thoughts

JWTs are one of the most widely used authentication mechanisms today, but they're also widely misunderstood.

Remember:

JWTs are encoded, not encrypted
Anyone with the token can read the payload
Never store sensitive data inside JWT claims
Avoid pasting production tokens into unknown decoder websites
Always verify JWT signatures on the server

Understanding these basics can prevent accidental data exposure and improve the security of your applications.

What security mistakes have you seen developers make with JWTs?

Share your experiences in the comments.

Written by Zohaib Hassan

Building OnlineFreeTools.online — a collection of free browser-based developer and productivity tools.

10 Free Online Tools Every Developer Should Bookmark

zohaib hassan — Thu, 04 Jun 2026 06:43:08 +0000

As a developer, I spend a lot of time switching between tools — formatting JSON, decoding JWT tokens, testing regex patterns, checking hashes. Most of the time I end up on sketchy sites plastered with ads, or I paste sensitive data into unknown third-party services.
So I built OnlineFreeTools.online — a collection of 30+ free browser-based tools that run entirely in your browser. No signup. No ads. No data sent to any server.
Here are the 10 tools I use almost every single day:

1. JSON Formatter & Validator

Link: onlinefreetools.online/tools/json-formatter
Paste messy JSON and instantly get a clean, syntax-highlighted, formatted version. You can also minify JSON for production. Great for debugging API responses.
json// Before
{"name":"Zohaib","role":"developer","skills":["Next.js","React","TypeScript"]}

// After (formatted)
{
"name": "Zohaib",
"role": "developer",
"skills": [
"Next.js",
"React",
"TypeScript"
]
}

2. JWT Decoder

Link: onlinefreetools.online/tools/jwt-decoder
Paste any JWT token and instantly see the decoded header, payload, and signature. Extremely useful when debugging authentication issues. The tool runs entirely in your browser — your tokens never leave your machine.

3. Regex Tester

Link: onlinefreetools.online/tools/regex-tester
Test regex patterns live with real-time match highlighting. Supports flags like global, case-insensitive, and multiline. Perfect for validating email formats, phone numbers, and URLs.
Common patterns I use daily:

Email: ^[^\s@]+@[^\s@]+.[^\s@]+$
URL: https?:\/\/(www.)?[-a-zA-Z0-9@:%._+~#=]{1,256}
Phone (Pakistan): ^(+92|0)?[0-9]{10}$

4. Base64 Encoder/Decoder

Link: onlinefreetools.online/tools/base64-encoder
Encode any string or decode Base64 back to plain text. I use this constantly when working with APIs that send Base64-encoded data or when embedding images in HTML/CSS.

5. Hash Generator

Link: onlinefreetools.online/tools/hash-generator
Generate MD5, SHA1, SHA256, and SHA512 hashes instantly. Useful for verifying file integrity, checking passwords, or understanding cryptographic concepts.

6. Image Compressor

Link: onlinefreetools.online/tools/image-compressor
Compress JPEG and PNG images directly in the browser without uploading to any server. I reduced my site's images by 80% using this before deployment.

7. URL Encoder/Decoder

Link: onlinefreetools.online/tools/url-encoder
Instantly encode special characters for URLs or decode percent-encoded URLs. Essential when building query strings or debugging URL issues.

8. SQL Formatter

Link: onlinefreetools.online/tools/sql-formatter
Paste messy SQL and get a clean, readable, properly indented query back. Your teammates will thank you in code reviews.

9. Color Converter

Link: onlinefreetools.online/tools/color-converter
Convert between HEX, RGB, and HSL color formats instantly. No more manually calculating color values when switching between design tools and code.

10. Code Minifier

Link: onlinefreetools.online/tools/code-minifier
Minify CSS, JavaScript, and HTML in one click. Great for reducing file sizes before deployment without a full build pipeline.

Why I Built This

I got tired of pasting sensitive code and tokens into random websites with unclear privacy policies. Every tool on OnlineFreeTools.online processes data locally in your browser — nothing is sent to any server.
Bookmark it and try it out. It's completely free, no account needed.

Built by Zohaib, a web developer from Pakistan. Check out all 30+ tools at onlinefreetools