DEV Community: Dev Nestio

5 Free Browser-Based Dev Tools: GraphQL Formatter, Docker Compose Validator, Dockerfile Linter, and More

Dev Nestio — Sun, 05 Jul 2026 00:30:34 +0000

I just shipped 5 new tools to DevNestio — a hub of 172 free, browser-only developer utilities. All tools are zero-signup, zero-upload, and work offline.

1. GraphQL Query Formatter & Minifier

https://devnestio.pages.dev/graphql-formatter/

Paste any GraphQL operation and get:

Pretty-print — consistent indentation
Minify — strips comments and whitespace for smaller request payloads
Validation — brace/parenthesis balance check
Operation detection — lists all named query, mutation, subscription, fragment

Useful for quick query cleanup before pasting into code reviews or API docs.

2. Protobuf (.proto) Formatter & Validator

https://devnestio.pages.dev/protobuf-formatter/

Online formatter and validator for Protocol Buffer .proto files:

Duplicate field number detection
Message and enum structure validation
Syntax-highlighted output
One-click copy

Great for a sanity check before pushing .proto changes in a gRPC service.

3. Docker Compose Validator

https://devnestio.pages.dev/docker-compose-validator/

Paste your docker-compose.yml to catch:

Missing services section
Services without image or build
Invalid port mappings (80:80, 127.0.0.1:8080:80, 53:53/udp, ranges…)
depends_on referencing non-existent services
Circular dependency detection (A→B→A)
Unknown restart policies

# This will flag errors:
services:
  web:
    ports:
      - "abc:xyz"       # invalid port
    depends_on:
      - missing_service  # unknown service

4. Dockerfile Analyzer & Linter

https://devnestio.pages.dev/dockerfile-analyzer/

Analyzes your Dockerfile for best practice violations across three categories:

Security

sudo usage inside RUN
Container running as root (no USER instruction)
Secrets baked into ENV/ARG (password, secret, token, key)

Image size

:latest base image tag
apt-get update in a separate RUN (stale cache risk)
apt-get install without --no-install-recommends
apt cache not cleaned (rm -rf /var/lib/apt/lists/*)
ADD used for local files instead of COPY

Layer optimization

Consecutive RUN instructions (suggest chaining with &&)
High total layer count

Also flags the absence of WORKDIR and celebrates multi-stage builds and HEALTHCHECK when present.

5. Email Header Analyzer

https://devnestio.pages.dev/email-header-analyzer/

Paste raw email headers and instantly get:

Authentication Results

SPF   ✅ pass
DKIM  ✅ pass
DMARC ✅ pass

Phishing investigation often starts here — a failed SPF or DKIM check is a red flag.

Phishing Signals

Reply-To domain ≠ From domain — classic impersonation trick
Return-Path domain mismatch
Spam score / X-Spam-Flag detection

Routing Trace

Parses all Received: headers to show each hop the email traveled through, including originating IP addresses.

Three Tabs

Summary — From/To/Subject/Date/Message-ID + auth status
Routing — hop-by-hop trace with IP addresses
All Headers — raw dump of every header field

Handy when your security team needs to quickly triage a suspicious email without spinning up a full mail analysis tool.

Implementation Notes

All five tools follow the same constraints:

Vanilla JS, single HTML file — no bundler, no framework, works offline
80+ Node.js assert tests — core logic is extracted and tested independently of the browser
No external YAML/parsing libraries — the Docker Compose validator uses a custom line-by-line indent parser

DevNestio now has 172 tools in total. If there's a utility you'd find useful, drop a comment — I'm always looking for the next one to build.

HTTP Security Headers Reference: 11 Headers, Risk Levels, and Code Snippets

Dev Nestio — Thu, 02 Jul 2026 14:45:35 +0000

Security response headers are one of the highest-ROI security measures you can take — low configuration cost, significant attack surface reduction. But there are 11 of them to know, each with its own quirks.

I built a reference tool covering all 11, with risk levels, what attacks they prevent, recommended values, and copy-ready code for Express, nginx, and Apache.

Tool

HTTP Security Headers Reference
https://devnestio.pages.dev/security-headers-ref/

Filter by risk level (Critical / High / Medium / Low), search by name or description, switch between framework snippets.

The 11 Headers

Critical

Strict-Transport-Security (HSTS)

Forces HTTPS connections for a specified duration. Prevents SSL stripping and MitM attacks.

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

Start with max-age=300 (5 min) to test, then ramp up. preload requires registration at hstspreload.org.

Content-Security-Policy (CSP)

Defines which origins can load scripts, styles, images, and frames. Prevents XSS and data injection.

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; frame-ancestors 'none'

Use Content-Security-Policy-Report-Only to test without enforcing.

High

X-Frame-Options

Prevents clickjacking by controlling whether pages can be embedded in frames.

X-Frame-Options: DENY

Modern alternative: use frame-ancestors 'none' in CSP instead (XFO as fallback for old browsers).

X-Content-Type-Options

Disables MIME sniffing. Prevents browsers from interpreting a text file as JavaScript.

X-Content-Type-Options: nosniff

nosniff is the only valid value. No compatibility issues — add it to everything.

Medium

Referrer-Policy

Controls what the Referer header contains when navigating away. Prevents leaking URL params or session tokens.

Referrer-Policy: strict-origin-when-cross-origin

Permissions-Policy (formerly Feature-Policy)

Disables browser APIs you do not need: camera, microphone, geolocation, payment.

Permissions-Policy: camera=(), microphone=(), geolocation=(), payment=()

Cross-Origin Trio: COEP, COOP, CORP

Protect against Spectre-style side-channel attacks and XS-Leaks:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Resource-Policy: same-origin

Required to enable SharedArrayBuffer in modern browsers.

Low

X-XSS-Protection

Activated XSS filters in old browsers. Modern browsers have removed the XSS auditor. Recommended value is now 0 when you have CSP:

X-XSS-Protection: 0

Cache-Control (for sensitive responses)

Prevents CDNs and proxies from caching private data:

Cache-Control: no-store, private

Quick Implementation with Helmet (Node.js)

npm install helmet

const helmet = require('helmet');

app.use(helmet()); // Sets HSTS, XFO, XCTO, RP, and more

// CSP needs customization for your app
app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'"],
    styleSrc: ["'self'", "'unsafe-inline'"],
    imgSrc: ["'self'", "data:", "https:"],
    frameAncestors: ["'none'"],
  },
}));

nginx — Set All at Once

add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; frame-ancestors 'none'" always;
add_header X-Frame-Options "DENY" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
add_header X-XSS-Protection "0" always;

The Low-Hanging Fruit

If you configure nothing else today, add these four — they are trivial to set with no side effects:

X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Referrer-Policy: strict-origin-when-cross-origin
Strict-Transport-Security: max-age=31536000; includeSubDomains

Then tackle CSP when you have time to test it in report-only mode.

https://devnestio.pages.dev/security-headers-ref/

CSS Backdrop Filter Generator: Build Glassmorphism Effects with Live Sliders

Dev Nestio — Thu, 02 Jul 2026 14:44:47 +0000

backdrop-filter unlocks glassmorphism and other frosted-glass effects in CSS, but tweaking 9 different filter functions by hand is tedious. I built a visual generator with live sliders so you can see the result in real time.

Tool

CSS Backdrop Filter Generator
https://devnestio.pages.dev/css-backdrop-filter/

Sliders for all 9 filter functions, live preview on a glassmorphism card, 5 presets, and auto-generates the -webkit- prefix for Safari.

How backdrop-filter Works

Unlike filter which affects the element itself, backdrop-filter applies to the area behind the element:

.glass {
  /* The element needs to be semi-transparent */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;

  /* This blurs/filters what is behind the element */
  backdrop-filter: blur(12px) brightness(110%) saturate(160%);
  -webkit-backdrop-filter: blur(12px) brightness(110%) saturate(160%);
}

Key requirement: there must be content behind the element for the filter to be visible. A solid opaque background will show nothing.

The 9 Filter Functions

Function	Range	Effect
`blur(Npx)`	0 to 40px	Gaussian blur
`brightness(N%)`	0 to 200%	Lighten or darken (100% = default)
`contrast(N%)`	0 to 200%	Increase or decrease contrast
`grayscale(N%)`	0 to 100%	Desaturate
`hue-rotate(Ndeg)`	0 to 360deg	Rotate colors on the hue wheel
`invert(N%)`	0 to 100%	Invert colors
`opacity(N%)`	0 to 100%	Transparency
`saturate(N%)`	0 to 300%	Boost or reduce color intensity
`sepia(N%)`	0 to 100%	Warm brownish tone

Combine them with spaces (not commas):

backdrop-filter: blur(8px) brightness(90%) saturate(180%);

The 5 Presets

Frosted Glass (classic glassmorphism)

.frosted {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  backdrop-filter: blur(12px) brightness(110%) saturate(160%);
  -webkit-backdrop-filter: blur(12px) brightness(110%) saturate(160%);
}

Dark Overlay

.dark-overlay {
  backdrop-filter: blur(8px) brightness(40%) contrast(120%);
  -webkit-backdrop-filter: blur(8px) brightness(40%) contrast(120%);
}

Vintage

.vintage {
  backdrop-filter: sepia(60%) contrast(110%) brightness(90%) saturate(80%);
  -webkit-backdrop-filter: sepia(60%) contrast(110%) brightness(90%) saturate(80%);
}

Noir

.noir {
  backdrop-filter: grayscale(100%) contrast(130%) brightness(80%);
  -webkit-backdrop-filter: grayscale(100%) contrast(130%) brightness(80%);
}

Browser Support

Browser	Version
Chrome	76+
Edge	79+
Firefox	103+
Safari	9+ (needs -webkit- prefix)

Always include both properties. The tool generates both automatically.

Performance Tips

Strong blur values are GPU-intensive. For animated or many glassmorphism elements:

.glass {
  /* Hint to the browser to promote to compositor layer */
  will-change: backdrop-filter;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

https://devnestio.pages.dev/css-backdrop-filter/

HTTP Cache-Control Builder: Toggle Directives, Detect Conflicts, Copy Code

Dev Nestio — Thu, 02 Jul 2026 14:44:01 +0000

Cache-Control is one of the most impactful HTTP headers for performance, but it is also one of the easiest to misconfigure. I built a visual builder that lets you toggle directives on and off, warns you about conflicting combinations, and generates code for Express, nginx, Apache, and CloudFront.

Tool

HTTP Cache-Control Builder
https://devnestio.pages.dev/cache-control-builder/

Features: 8 quick presets, 13 directives, conflict detection, and framework snippets.

no-store vs no-cache: The Key Distinction

This is the most common point of confusion:

Directive	Meaning
`no-store`	Never store this response anywhere
`no-cache`	Store it, but revalidate with the server before using it

no-cache does NOT mean "don't cache". It means "always check if the cache is still valid". When combined with ETag or Last-Modified, the server can return 304 Not Modified and save bandwidth.

The 8 Presets

Static assets (hashed filenames)

Cache-Control: public, max-age=31536000, immutable

When filenames include a content hash (app.a3f2c1.js), content never changes at that URL. immutable tells the browser to skip revalidation during max-age.

HTML pages

Cache-Control: public, max-age=0, must-revalidate

HTML is often the entry point for SPAs or contains dynamic content. Cache it (to get 304s) but always revalidate.

Authenticated API responses

Cache-Control: private, no-cache

private prevents CDNs from caching. no-cache forces revalidation on every request.

Never cache (sensitive data)

Cache-Control: no-store, private

CDN-heavy setup (longer CDN TTL, shorter browser TTL)

Cache-Control: public, max-age=3600, s-maxage=86400

s-maxage overrides max-age for shared caches (CDNs) only.

Stale-While-Revalidate

Cache-Control: public, max-age=60, stale-while-revalidate=86400

Serve stale content for up to 86400s while revalidating in the background. Great for content that can tolerate being slightly out of date.

Conflicts the Tool Detects

public + private — mutually exclusive
no-store + no-cache — no-store is stronger, no-cache is redundant
no-store + max-age — no-store overrides max-age
immutable + no-cache — contradictory ("never changes" + "always revalidate")
must-revalidate + no-store — can't revalidate if nothing is stored

Express Implementation

// Static assets
app.use('/static', express.static('public', {
  maxAge: '1y',
  immutable: true,
}));

// HTML entry point
app.get('/', (req, res) => {
  res.setHeader('Cache-Control', 'public, max-age=0, must-revalidate');
  res.sendFile(path.join(__dirname, 'public/index.html'));
});

// Private API
app.use('/api/me', (req, res, next) => {
  res.setHeader('Cache-Control', 'private, no-cache');
  next();
});

nginx

# Static assets
location /static/ {
    add_header Cache-Control "public, max-age=31536000, immutable" always;
}

# HTML
location / {
    add_header Cache-Control "public, max-age=0, must-revalidate" always;
}

# API
location /api/ {
    add_header Cache-Control "private, no-cache" always;
}

https://devnestio.pages.dev/cache-control-builder/

CORS Headers Generator: Stop Guessing, Start Copying

Dev Nestio — Thu, 02 Jul 2026 14:43:19 +0000

CORS errors are some of the most frustrating in web development. The configuration has many moving parts, and a single mistake — like using * with credentials — silently breaks your app.

I built a free tool that lets you configure CORS visually and get copy-ready code for Express.js, nginx, Apache, and Cloudflare Workers.

Tool

CORS Headers Generator
https://devnestio.pages.dev/cors-generator/

Configure origins, methods, allowed headers, exposed headers, credentials, and preflight max-age — then pick your framework.

How CORS Works

Browsers block cross-origin requests (different domain, port, or protocol) unless the server explicitly allows them via CORS headers.

# The browser sends a preflight OPTIONS request:
Origin: https://app.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, Authorization

# The server responds with:
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

The Most Common Mistakes

Wildcard + Credentials = broken

# This does NOT work:
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true   <- ignored by browsers!

When using credentials (cookies, Authorization headers), you must specify the exact origin:

Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Credentials: true
Vary: Origin

Multiple origins need dynamic responses

The Access-Control-Allow-Origin header can only contain one origin. For multiple allowed origins, check the request Origin header on the server and reflect it back:

const ALLOWED_ORIGINS = ['https://app.example.com', 'https://admin.example.com'];

const corsOptions = {
  origin: (origin, callback) => {
    if (!origin || ALLOWED_ORIGINS.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('CORS not allowed'));
    }
  },
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  maxAge: 86400,
};

app.use(cors(corsOptions));
app.options('*', cors(corsOptions)); // Handle preflight

Always add Vary: Origin when the response differs by origin — this prevents CDNs from caching the wrong origin's response.

nginx Configuration

# Single origin
add_header Access-Control-Allow-Origin "https://app.example.com" always;
add_header Access-Control-Allow-Credentials "true" always;
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
add_header Access-Control-Max-Age "86400" always;

# Handle OPTIONS preflight
if ($request_method = OPTIONS) {
  add_header Content-Length 0;
  add_header Content-Type text/plain;
  return 204;
}

Cloudflare Workers

export default {
  async fetch(request, env) {
    const origin = request.headers.get('Origin');
    const ALLOWED = ['https://app.example.com', 'https://admin.example.com'];
    const allow = ALLOWED.includes(origin) ? origin : null;

    const corsHeaders = {
      'Access-Control-Allow-Origin': allow || '',
      'Vary': 'Origin',
      'Access-Control-Allow-Credentials': 'true',
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
      'Access-Control-Max-Age': '86400',
    };

    if (request.method === 'OPTIONS') {
      return new Response(null, { status: 204, headers: corsHeaders });
    }

    const response = await fetch(request);
    const newHeaders = new Headers(response.headers);
    Object.entries(corsHeaders).forEach(([k, v]) => newHeaders.set(k, v));
    return new Response(response.body, { ...response, headers: newHeaders });
  }
};

Generate your CORS config in seconds — no more copy-pasting from StackOverflow.

https://devnestio.pages.dev/cors-generator/

TypeScript Utility Types Reference: All 22 Built-in Types with Examples

Dev Nestio — Thu, 02 Jul 2026 14:42:32 +0000

TypeScript ships 22 built-in utility types that transform existing types without re-declaring them. Here is an interactive reference covering all of them — with syntax, examples, TypeScript version requirements, and category filters.

Tool

TypeScript Utility Types Reference
https://devnestio.pages.dev/ts-utility-types/

Features: search by name or description, filter by category (Object / Union / Function / String / Async), copy syntax and examples in one click.

All 22 Types at a Glance

Object Utilities

Type	What it does
`Partial<T>`	Makes all properties optional
`Required<T>`	Makes all properties required
`Readonly<T>`	Makes all properties readonly
`Record<K, V>`	Object type with keys K and values V
`Pick<T, K>`	Subset of T properties
`Omit<T, K>`	T without properties K
`NoInfer<T>`	Prevents inference from a position (TS 5.4+)

Union Utilities

Type	What it does
`Exclude<T, U>`	Remove U members from union T
`Extract<T, U>`	Keep only U members from union T
`NonNullable<T>`	Remove null and undefined from T

Function Utilities

Type	What it does
`ReturnType<T>`	Return type of function T
`Parameters<T>`	Parameter types of function T as tuple
`ConstructorParameters<T>`	Constructor param types as tuple
`InstanceType<T>`	Instance type of constructor T
`ThisParameterType<T>`	The this param type of function T
`OmitThisParameter<T>`	Remove this param from function T
`ThisType<T>`	Mark this context type in object literal

Async

Type	What it does
`Awaited<T>`	Recursively unwrap Promise types (TS 4.5+)

String Utilities (TS 4.1+)

Type	What it does
`Uppercase<S>`	All chars to uppercase
`Lowercase<S>`	All chars to lowercase
`Capitalize<S>`	First char to uppercase
`Uncapitalize<S>`	First char to lowercase

Practical Examples

Partial for update payloads

interface User { id: number; name: string; email: string; }

type UserUpdate = Partial<User>;
// { id?: number; name?: string; email?: string; }

async function patchUser(id: number, changes: Partial<User>) { }

ReturnType from factory functions

function createStore() {
  return { count: 0, increment() { this.count++; } };
}

type Store = ReturnType<typeof createStore>;
// { count: number; increment: () => void; }

Awaited to unwrap async types

async function fetchUser(id: number): Promise<User> { }

type FetchResult = Awaited<ReturnType<typeof fetchUser>>;
// User

NoInfer to control inference (TS 5.4+)

function createState<T>(initial: T, fallback: NoInfer<T>): T {
  return initial ?? fallback;
}

createState(42, "hello"); // Error: string not assignable to number

String types for template literals

type Getter<K extends string> = `get${Capitalize<K>}`;
type GetName = Getter<"name">; // "getName"

type EnvKey<K extends string> = `VITE_${Uppercase<K>}`;
type Key = EnvKey<"apiUrl">; // "VITE_APIURL"

https://devnestio.pages.dev/ts-utility-types/

TCP/UDP Port Reference — Searchable Well-Known Port Numbers

Dev Nestio — Thu, 02 Jul 2026 04:08:29 +0000

Overview

TCP/UDP Port Reference is a searchable table of 100+ well-known and registered port numbers.

🔗 https://devnestio.pages.dev/tcp-port-ref/

Coverage by category

System (0–1023): echo, FTP, SSH, Telnet, SMTP, DNS, HTTP, HTTPS
Database: MySQL (3306), PostgreSQL (5432), Redis (6379), MongoDB (27017), Elasticsearch (9200)
Email: SMTP (25/587), POP3 (110/995), IMAP (143/993)
VPN: OpenVPN (1194), WireGuard (51820), L2TP (1701)
Containers: Docker (2375/2376), Kubernetes API (6443), etcd (2379/2380)
Messaging: AMQP/RabbitMQ (5672), Kafka (9092), MQTT (1883/8883)
Development: Common dev servers (3000, 5000, 8080, 9000)

Features

Search by port number (prefix match), service name, description, or category
Filter by TCP, UDP, or TCP/UDP
Sort by port number or service name
Color-coded protocol badges: TCP (blue), UDP (green), both (orange)

👉 Try it: https://devnestio.pages.dev/tcp-port-ref/

Timezone Converter — Convert Time Between World Timezones

Dev Nestio — Thu, 02 Jul 2026 04:08:04 +0000

Overview

Timezone Converter converts time between any world timezones using the browser's native Intl API.

🔗 https://devnestio.pages.dev/timezone-converter/

Features

Pick any date/time and source timezone
Add unlimited target zones to the comparison table
Shows UTC offset per zone (accounts for DST automatically)
ISO 8601 UTC output for copy-pasting into code
"Now" button → current local time
Full IANA timezone database via Intl.supportedValuesOf('timeZone')

No library needed

Everything uses native browser APIs:

// Format a UTC Date in a target timezone
const timeFmt = new Intl.DateTimeFormat('en-US', {
  timeZone: tz,
  hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
});

// Get offset label e.g. "GMT+9"
const parts = new Intl.DateTimeFormat('en', {
  timeZone: tz, timeZoneName: 'shortOffset', hour: 'numeric'
}).formatToParts(date);

DST handling is automatic — the Intl API always applies the correct offset for the given moment in time.

👉 Try it: https://devnestio.pages.dev/timezone-converter/

Luhn Algorithm Checker — Validate & Generate Credit Card Numbers

Dev Nestio — Thu, 02 Jul 2026 04:07:50 +0000

Overview

Luhn Algorithm Checker validates and generates numbers using the Luhn (mod 10) checksum.

🔗 https://devnestio.pages.dev/luhn-checker/

What it validates

Credit cards (Visa, Mastercard, Amex, Discover), IMEI codes, ISIN identifiers, and more.

The algorithm

From the rightmost digit, double every second digit
If doubling > 9, subtract 9
Sum all digits — if sum mod 10 = 0, valid

function luhn(digits) {
  let sum = 0;
  for (let i = 0; i < digits.length; i++) {
    let d = digits[i];
    if (i % 2 === 1) { d *= 2; if (d > 9) d -= 9; }
    sum += d;
  }
  return sum;
}

Features

Instant valid/invalid banner with color coding
Step-by-step digit breakdown table
Generate mode: enter prefix → get correct check digit
Card type detection (Visa, Mastercard, Amex, Discover, JCB, Diners)

👉 Try it: https://devnestio.pages.dev/luhn-checker/

CSS Filter Generator — Visual filter() Builder with Live Preview

Dev Nestio — Thu, 02 Jul 2026 04:07:27 +0000

Overview

CSS Filter Generator builds filter() CSS declarations visually.

🔗 https://devnestio.pages.dev/css-filter-gen/

10 filter controls

Brightness, Contrast, Saturation, Grayscale, Sepia, Invert, Hue Rotate, Blur, Opacity, Drop Shadow — all with sliders and live preview.

10 built-in presets

Grayscale, Sepia, Vivid, Cold, Warm, Invert, Blur, Matte, Neon, and None (reset).

Generated CSS example

.element {
  filter: brightness(110%) contrast(130%) saturate(200%) hue-rotate(270deg) drop-shadow(4px 4px 8px rgba(0,0,0,0.5));
}

Features

Upload your own image for realistic preview (local only, never uploaded)
Only active (non-default) filters appear in the output
Reset individual sliders or all at once
One-click CSS copy

👉 Try it: https://devnestio.pages.dev/css-filter-gen/

Roman Numeral Converter — Arabic ↔ Roman up to 3,999,999

Dev Nestio — Thu, 02 Jul 2026 04:07:14 +0000

Overview

Roman Numeral Converter converts between Arabic numbers and Roman numerals.

🔗 https://devnestio.pages.dev/roman-numeral/

Features

Arabic → Roman: supports 1 through 3,999,999
Roman → Arabic: validates canonical form with round-trip check
Extended range uses vinculum overline notation (M̄, D̄, C̄)
Step-by-step breakdown shows each symbol and its contribution
13 click-to-load examples

Algorithm

Greedy subtraction from a lookup table:

const ROMAN_MAP = [
  [1000000,'M̄'], [900000,'C̄M̄'], ..., [900,'CM'], ..., [1,'I']
];
while (rem >= val) { result += sym; rem -= val; }

Validation uses a round-trip check — re-encode the parsed number and compare with input. This rejects non-canonical forms like IIII or VV automatically.

👉 Try it: https://devnestio.pages.dev/roman-numeral/

Morse Code Converter — Text to Morse with Web Audio Playback

Dev Nestio — Thu, 02 Jul 2026 03:53:30 +0000

Overview

Morse Code Converter encodes text to Morse code and decodes Morse back to text, with real audio playback.

🔗 https://devnestio.pages.dev/morse-code/

Features

Text → Morse: all letters (A–Z), digits (0–9), punctuation
Morse → Text: decodes dot/dash sequences; / for word breaks
Audio playback via the Web Audio API with smooth tone fade-in/out
Adjustable WPM: 5–40 words per minute (PARIS standard)
Visual flash: indicator pulses in sync with audio
Reference table: all 36 character codes visible at a glance

Example

SOS → ... --- ...
HELLO WORLD → .... . .-.. .-.. --- / .-- --- .-. .-.. -..

Tech: sample-accurate audio scheduling

Timings use the Web Audio API scheduler rather than setTimeout, giving sample-accurate playback:

gain.gain.linearRampToValueAtTime(0.5, t + 0.005);    // fade in
gain.gain.setValueAtTime(0.5, t + dur/1000 - 0.005);  // sustain
gain.gain.linearRampToValueAtTime(0, t + dur/1000);   // fade out

Dot duration = 1200 / WPM ms (PARIS standard). Dash = 3× dot. Letter gap = 3× dot. Word gap = 7× dot.

👉 Try it: https://devnestio.pages.dev/morse-code/