DEV Community: Bilal Malik

Gridzzly: The Interactive React App That Writes CSS Grid for You

Bilal Malik — Sun, 14 Jun 2026 17:36:29 +0000

CSS Grid is one of the most powerful layout systems ever created. But let's be honest - remembering grid-template-columns, grid-area, and all those line numbers can be a headache, especially when you're just trying to prototype an idea.

That's why I built Gridzzly - a visual playground where you click and drag to create grid items, edit track sizes in real time, and export production‑ready HTML/CSS with one click.

Try it live
View on GitHub (open source)

What Makes Gridzzly Different?

Visual Drawing - Click and drag across the grid. Release to create a new grid item. No writing grid-row or grid-column manually.
Live Track Editing - Edit column/row sizes directly in inputs above the grid. Use 1fr, auto, 200px, minmax() - anything CSS Grid supports.
Instant Code Export - Switch between CSS and HTML tabs, copy the code, and paste it into your project.
Built‑in Templates & Random Generator - Stuck? Load a preset or hit "Random Pattern" for instant inspiration.
Overlapping Items - Place items on top of each other (great for magazine‑style layouts).
Dark Theme - Easy on the eyes for long coding sessions.

How It Works (Under the Hood)

The entire app is built with React and Tailwind CSS. The core logic lives inside a custom hook: useGridGenerator.js.

1. Grid State

We store:

Number of columns/rows
Gap values (in pixels)
Column/row size strings (e.g., ['1fr', '2fr', '1fr'])
Placed items: each item is an object { id, rStart, cStart, rEnd, cEnd }

2. Drawing Mechanism

When the user mouses down on a cell, we start tracking the starting row/column. On mouse move, we calculate the rectangle between the start and current cell, highlight all cells, and show a live badge (3 cols × 2 rows). On mouse up, we create a new item and reset the selection.

// Simplified from useGridGenerator.js
const startDrawing = (row, col) => {
  setIsDrawing(true);
  setStartCell({ row, col });
  setHighlightedCells([{ row, col }]);
};

const updateDrawing = (row, col) => {
  if (!isDrawing || !startCell) return;
  const rMin = Math.min(startCell.row, row);
  const rMax = Math.max(startCell.row, row);
  const cMin = Math.min(startCell.col, col);
  const cMax = Math.max(startCell.col, col);
  // highlight all cells from rMin..rMax, cMin..cMax
};

3. Code Generation

Every time the grid or items change, we generate fresh CSS + HTML. We even compress consecutive identical track sizes into repeat():

css

/* Instead of: */
grid-template-columns: 1fr 1fr 1fr 1fr;
/* We output: */
grid-template-columns: repeat(4, 1fr);

The generated HTML uses simple div elements with classes like .div1, .div2, and a .parent container.

Quick Usage Guide

Create a grid item: Click and drag across empty cells → release
Delete an item: Hover the item → click the × Resize a track: Click
the input above the grid (e.g., 1fr) → type a new value Change grid
Scroll through "Grid Patterns" → click any preview Random layout:
Click Random Grid Pattern Export code: Click Please May I have Some
Code → copy CSS or HTML

Why I Built This

I've taught CSS Grid to many developers, and the hardest part is always the mental model of grid lines and spanning. I wanted a tool that gives immediate visual feedback while generating real, copy‑pastable code – no vendor lock‑in, no weird abstractions. Just vanilla CSS Grid.

Whether you're:

Learning CSS Grid for the first time,
Prototyping a dashboard layout,
Or building a complex magazine‑style design,

Gridzzly helps you see what you're building and export it instantly.

Contributions Welcome

Found a bug? Have an idea for a feature? Open an issue or a pull request. The project is MIT licensed, so feel free to fork and build your own version.

Let's Connect

GitHub: @byllzz
Twitter: @bilalmlkdev

If you found this useful, please ❤️ the post and share it with your network.

Happy Gridding! 🎉

AI is writing our JS now. Are we becoming prompt engineers or losing real engineering skills?

Bilal Malik — Fri, 12 Jun 2026 04:26:48 +0000

I’ll be honest: I’ve been a frontend dev for years. I used to pride myself on knowing the weird corners of JavaScript - closures, prototypal inheritance, event loop nuances.

Then Copilot entered my editor.

Today, I barely write Array.reduce from memory. I type a comment like // group users by age and the AI does it. Perfectly. In seconds.

The moment I felt stupid
I pasted an AI-generated function that fetched data with retry logic. It worked. Tests passed. I deployed.

Two days later, a bug appeared: retries happened even on 4xx errors (which should fail immediately). A junior dev on my team spotted it. I hadn’t even read the retry condition carefully.

I realised: I’m not debugging my code anymore. I’m debugging AI-generated code that I don’t fully understand.

So let’s stop pretending
We all use AI now. But are we growing or just getting faster at shipping bugs?

Here’s what I genuinely want to know from this community:

Three real questions (please pick one to answer):
1. What’s the last non-trivial JS concept you had to actually learn (not just prompt) because AI failed you?
For me: AbortController with complex race conditions. AI kept giving me broken examples.

2. If I take away your AI autocomplete for a week, do you think your raw JS skill would feel the same, weaker, or… stronger?
Be honest - no one’s judging (yet).

3. Have you ever caught AI writing code that was confidently wrong in a way a human junior wouldn’t be?
Example: AI using == when === was critical, or mutating props directly in React.

The “big” claim I’ll defend in comments:
“By 2027, the biggest differentiator between senior and mid-level JS devs won’t be framework knowledge - it’ll be the ability to debug, refactor, and secure AI-generated code without introducing new bugs.”

Do you agree? Disagree? Think I’m overreacting?

Let’s make this useful
Upvote if you’ve ever merged AI code that you didn’t 100% understand.
Downvote if you review every AI suggestion line-by-line like it’s a code review from hell.

Then drop a comment with:

Your most recent “AI saved my day” story
Or your most recent “AI almost burned production” story

No middle ground. Let’s get loud.

It feels amazing. But last week, something scared me

Glyphic: A Browser-Based Typography Design Tool

Bilal Malik — Thu, 11 Jun 2026 06:07:27 +0000

Typography tools have always asked too much. An account here, a subscription there, a desktop app that takes 3 minutes to open. All you wanted was to write something and make it look good.Glyphic is a typography-first design workspace that runs entirely in your browser. Write content, style selected text, apply curated themes, adjust spacing, and export high-resolution images - no accounts, no uploads, no setup required. Everything stays on your device.

Try it live → | View on GitHub → (MIT licensed, open source)

Core Editing
Glyphic uses a live canvas preview that updates in real time as you type and format. The rich text toolbar applies formatting only to selected text, giving you precise control over individual words, lines, or paragraphs.

Supported formatting actions:

Bold, Italic, Underline, Strikethrough
Headings
Ordered and unordered lists
Case transforms - uppercase, lowercase, title case
Per-selection font sizing

Typography Controls
Fine-tune how your text sits on the canvas:

20+ Google Fonts spanning serif, sans-serif, monospace, and handwriting
Line height, letter spacing, word spacing
Internal padding
Drop caps - Standard, Large, and Huge variants

Theme System
Glyphic ships with 25+ curated themes across a range of styles: serif editorial, sans-serif minimal, monospace terminal, vintage, code block, and more.

Every theme supports full color overrides:

Background color
Text color
Texture intensity

Creative Tools
Kaomoji Library - Insert expressive text emoticons at cursor position. (｡◕‿◕｡)
Decorative Elements - Add inline decorative characters: dividers, bullets, stars, hearts, arrows, notes.
Paper Texture - A slider from 0% (clean) to 100% (heavy grain and noise) adds a physical feel to the canvas without affecting export quality.

Viewports
Switch between preset canvas dimensions to design for different contexts:

Social media
Desktop
Mobile

Themes are applied, previewed, and overridden non-destructively. Export-time overrides are independent from the editor canvas - what you see while editing and what you export can be two completely different things.

Export
Glyphic supports PNG and SVG export directly from the browser. Export-time color overrides allow you to customize output independently from the editor.

PNG Export scales up to 4320 × 4320 - available at 2×, 3×, and 4× depending on the resolution you need.
SVG Export produces vector output that is print-ready and editable in Figma, Illustrator, Inkscape, and more.

Keyboard Shortcuts
Ctrl + B for Bold, Ctrl + I for Italic, Ctrl + Ufor Underline.

Architecture
Glyphic is structured around three primary layers:

User Input → Text Toolbar → Formatting Engine
    → Canvas Renderer → Theme System
        → Export Module → PNG / SVG Output

Canvas Layer - Handles rendering, typography, textures, themes, and viewport dimensions.
Theme Layer - Manages theme presets, color overrides, random theme generation, and color state.
Export Layer - Powered by html-to-image. Handles PNG scaling, SVG generation, and export-time color overrides.

Component Reference
Canvas renders typography. TextToolbar handles formatting actions. Themes manages the theme gallery. ThemeColors powers the custom color picker. ViewPorts controls canvas dimensions. FontSelector and FontSize handle font selection and sizing. LineHeight and Padding manage spacing. DropCap applies editorial drop cap styling. KaomojiSelector handles kaomoji insertion. Decorations manages decorative elements. ExportOptions runs the export pipeline. Navbar handles global actions.

Run It Locally
Prerequisites: Node.js v18+ and npm.

bashgit clone https://github.com/byllzz/glyphic.git
cd glyphic
npm install
npm run dev        # Start dev server
npm run build      # Production build
npm run preview    # Preview production build locally

No API keys. No environment variables. Everything runs locally.

Privacy
Glyphic is fully local-first:

No accounts required
No tracking or analytics
No content uploads
Exports generated entirely in your browser
Nothing leaves your device

Contributing
Contributions are welcome. The most useful areas:

Themes - Add or modify theme presets in src/data/themes.js
Fonts - Add or modify available fonts in src/data/fonts.js
Other areas - Accessibility, export (PDF support, batch exports), mobile touch refinements.

Workflow: Fork → feature branch → develop → commit with Conventional Commits → open a PR with screenshots for any UI changes.

If Glyphic saved you from opening Canva or firing up Figma for something simple, a ⭐ on GitHub means a lot.

What feature would you want to see in Glyphic next? Drop it in the comments.

Moviio: The Cinematic Movie Carousel

Bilal Malik — Sun, 07 Jun 2026 16:52:52 +0000

Moviio: Movie Discovery That Feels Like Theater
Scrolling through Netflix lists feels like drowning in options. You want discovery, not a catalog. You want motion, not static tiles. You want to watch a trailer right now, not hunt for the YouTube link.

Moviio is a movie discovery app powered by TMDB. Browse popular, top-rated, and upcoming movies in a smooth 3D cinematic carousel. Drag, swipe, or use arrow keys to move through seven cards at a time. Search instantly with debounce - no page reloads, just fluid filtering. Tap a movie and watch the official trailer in fullscreen with YouTube's no-cookie embed.

The carousel is custom-built with GPU-optimized transforms, no heavy carousel library. Preloads the next batch of movies so scrolling feels instant. Infinite pagination means you never hit a wall. All interactions happen client-side. TMDB API calls go through a serverless proxy for speed.

Try it live →
View on GitHub → (MIT licensed, open source)

The Design Problem Solved
Most movie apps are grids. Grids are fast to load and cheap to build. They're also boring. Moviio flips the model - seven cards visible at once, cinematic layout, smooth drag-and-drop navigation that feels responsive because it uses translate3d transforms rendered on the GPU, not the main thread.

Trailers load dynamically and play in a fullscreen overlay that feels like a theater experience. Auto-quality playback scales from HD to 4K. Search results cache client-side so repeat searches are instant.

What You Get
Filter tabs for Popular, Top-Rated, and Upcoming with an animated indicator that moves smoothly between them. Drag on desktop, swipe on mobile, keyboard arrows for accessibility - every input method works perfectly. Movie metadata displays rating, release year, language, and type. No accounts. No tracking. No backend UI complexity.

Run It Locally

bashgit clone https://github.com/byllzz/moviio.git
cd moviio
npm install

Add your TMDB API key to .env:

VITE_TMDB_API_KEY=your_key_here
bashnpm run dev

Open http://localhost:5173. The serverless API proxy handles TMDB calls securely.

Stack
React for components. Custom carousel engine with zero carousel libraries. TMDB API for movie data. YouTube IFrame API for trailers. Tailwind CSS for styling. GPU-optimized transforms for motion. Vercel for deployment.

If Moviio helped you discover your next favorite film, a ⭐ on GitHub means a lot.

What's the coolest movie you discovered on Moviio? Drop it in the comments ..

Asciiara: Transform Text Into 35+ Hand-Crafted ASCII Fonts

Bilal Malik — Sun, 07 Jun 2026 16:44:04 +0000

Asciiara: Transform Text Into 35+ Hand-Crafted ASCII Fonts
Ever wanted your terminal to scream? To look like 1980s arcade art or a glitched-out matrix dream? ASCII art died around 2005 but somehow it never stayed dead.

Asciiara transforms plain text into stunning hand-crafted ASCII and Unicode fonts. 35+ custom fonts across five style groups - Artistic (Epic, Graffiti, Isometric, Glitch, Matrix), Classic ASCII (Big, Blocky, Shadow, Wave), Stylized (Script, Gothic, Braille), Structured (Circuit, Neon, Typewriter), and Text Styles for tweaking case and formatting.

Apply 28+ creative filters on top. Chromatic aberration, rainbow gradients, flip vertically or horizontally, strikethrough, underline, or wrap in code comment syntax for bash, Python, SQL, JSON, you name it. Test every font in a gallery view. Export as high-quality PNG. All in the browser, no backend, no accounts.

Try it live → | View on GitHub → (MIT licensed, open source)

How It Works
Every font is hand-authored - no stealing from figlet or external ASCII libraries. Multi-line character grids, box-drawing matrices, Unicode glyph maps, all written by hand. The engine uses O(1) lookups so text transforms instantly, no lag, no heavy library overhead.

The filter system is modular. Stacking a rainbow gradient, flip horizontally, and bash comment syntax happens in real-time. State persists to localStorage so your drafts survive page refreshes. Image generation injects theme-aware backgrounds and captures the DOM for perfect PNG exports.

100% client-side. Zero network latency. Zero tracking.

Responsive Everywhere
Keyboard, mouse, or touch - the interface adapts. Light and dark themes with seamless transitions. 1-click copy to clipboard. Native browser sharing. The carousel of fonts scrolls smoothly, previewing every style instantly.

Run It Locally

bashgit clone https://github.com/byllzz/asciiara.git
cd asciiara
npm install
npm run dev

Open http://localhost:5173. No API keys. No environment variables. Everything runs locally.

If Asciiara turned your boring text into glitched-out art, a ⭐ on GitHub means a lot.

What's your favorite ASCII font? Drop it in the comments

PaletteSnap: Digitizing a 1930s Japanese Color Masterpiece with 162 Traditional Pigments.

Bilal Malik — Sun, 07 Jun 2026 16:38:51 +0000

PaletteSnap: Wada Sanzō's 1930s Color Archive, Digitized
Color theory died in the 1930s in Japan and nobody told the web it was supposed to stay dead.

PaletteSnap is a digital archive of Wada Sanzō's seminal Dictionary of Color Combinations — a masterpiece of early 20th-century color study. 162 traditional Japanese pigments, historical color harmonies mapped across 2-color, 3-color, and 4-color plates, and the exact proportional weights from the original print. Brought to the browser with archival precision and monumental typography.

Explore it live → | View on GitHub → (MIT licensed, open source)

What You're Exploring
Immerse yourself in 162 individual pigments — each one a piece of Japanese color history. Every pigment shows its hex value, auto-converts to RGB and CMYK, and displays proportional weight bars so you understand the exact balance intended in the original 1930s designs.

Then there are the Plates — historical color harmonies mapped directly from Wada's originals. Two-color combinations for restraint. Three-color for complexity. Four-color for boldness. Real color theory from nearly a century ago, still relevant because math doesn't age.

Search by pigment name, hex code, or color family. Real-time filtering. Smart UI that never gets buried — mix-blend-mode ensures navigation stays visible no matter what color intensity you're viewing.

The Design Problem Solved
Most color tools are bright white interfaces with a small color swatch. PaletteSnap flips it. The entire background becomes the pigment itself. Navigation uses mix-blend-difference to maintain legibility across any color intensity automatically. You're immersed in color, not staring at it through a window.

Typography is editorial — Playfair Display in serif italics, using CSS clamp for fluid scaling. It feels like holding a premium art book, not clicking buttons on a generic web app. The aesthetic matters when you're preserving history.

Responsive Everywhere
Fluid grid layout optimizes for mobile and desktop without compromise. Full-screen color immersion on any device. Custom ghost scrollbar blends seamlessly with whatever pigment you're viewing. The UI dissolves into the experience.

The Architecture
React 19 with TypeScript handles the component layer. React Router manages navigation between pigments and plates. Tailwind CSS v4 provides utility styling, with inline styles for the monumental color backgrounds - Tailwind's JIT can't handle real-time color injection, so the engine bypasses it entirely by injecting variables directly into the DOM.

Framer Motion smooths transitions. The harmony engine analyzes color plates to display precise weight distribution from the originals — not guessed proportions, but historically accurate balances.

All color data lives in a structured JSON database mapping Wada Sanzō's exact hex values and nomenclature from the Dictionary of Color Combinations. Archival fidelity built in.

Run It Locally

bashgit clone https://github.com/byllzz/palettesnap.git
cd palettesnap
npm install
npm run dev

Open http://localhost:5173. No environment variables needed.

For production:

bashnpm run build
npm run preview
Type checking and linting:
bashnpm run type-check
npm run lint

Stack
React 19 for components. React Router v7 for navigation. TypeScript for type safety (currently being migrated across components). Tailwind CSS v4 for utilities. Framer Motion for animations. Vite for fast builds. Vercel for deployment.

Contribute
The TypeScript migration is in progress - components are being converted from JSX to TSX with proper type interfaces. Check src/types/index.ts for existing interfaces. Add new components as .tsx files with proper prop typing.

Other good contributions: expand the pigment database, add new historical plates, improve accessibility with keyboard navigation and screen reader support, optimize the mix-blend-mode contrast logic, or enhance the search algorithm.

bashgit checkout -b feature/your-amazing-feature
git commit -m "feat: your description"
git push origin feature/your-amazing-feature

Why This Exists
Wada Sanzō's Dictionary of Color Combinations is one of the most important color theory texts ever published. It deserved to be lost to history in a library basement. Instead, PaletteSnap preserves it digitally with archival precision and modern web design.

If PaletteSnap inspired your next color palette, a ⭐ on GitHub means a lot.

What's your favorite pigment you discovered? Drop it in the comments 👇

An open-source CSS animation library with a live preview grid, creator suite, and community submissions

Bilal Malik — Wed, 03 Jun 2026 04:28:10 +0000

CSSFrames: GPU-Accelerated Motion Without the Runtime Weight:
JavaScript animation libraries like GSAP, Framer Motion, and anime.js are powerful tools - but they come with a cost. Bundle weight, parsing overhead, potential layout thrashing, and the complexity of managing animations at runtime.

What if there was a better way?
CSSFrames is a curated library of production-ready motion presets built entirely on pure CSS keyframes. Browse, preview, customize, and export — all without touching JavaScript. No runtime overhead. No layout shifts. No dropped frames.

Try it live
View on GitHub (MIT licensed)

The Problem With JavaScript Animations
Every animation library comes with a runtime cost. The browser must:

Parse and execute JavaScript
Calculate animated values in real-time
Trigger layout recalculations (reflow)
Repaint affected DOM nodes

For simple, repeatable animations, this is overkill. CSS keyframes, by contrast, are declarative, precomputed, and offloaded directly to the GPU.

The Solution: Pure CSS, Pure Performance
CSSFrames runs every animation on just two GPU-composited properties: transform and opacity. This means:

✓ Zero layout shifts - no reflow or repaint
✓ GPU acceleration - animations render on the compositor thread
✓ Drop-in ready - one class, instant animation
✓ Framework agnostic - works in React, Vue, plain HTML, anywhere

Just add a class. The animation handles the rest.

What CSSFrames Includes:
1. Live Preview Grid
Every preset previews in real-time on authentic UI elements: buttons, cards, loaders, icons, and text. Switch to Theater Mode to focus on a single animation full-screen. Understand what each preset does before you export.

2. Creator Suite
Built on Monaco Editor, the Creator Suite lets you author custom keyframes without leaving the browser. Set duration, tweak easing curves, preview live, and export instantly. Perfect for building brand-specific motion systems.

3. One-Click Export
Every animation exports in multiple formats:

Raw CSS — @keyframes definition + class
Tailwind Config — Ready-to-paste keyframes and animation blocks
Metadata — Duration and easing values for documentation

4. Community Grid
Developers can submit custom presets that persist via a REST API (powered by Railway). Browse and use animations created by the community. Every submission is live for all users — no build step required.

What's Included
Seven animation categories:
Buttons · Loaders · Entrances · Text · Cards · Icons · Shapes

Preset types:
Shimmer sweeps, typewriter effects, morphing blobs, staggered reveals, glitch systems, pulse rings, stroke-draw animations — all GPU-composited, all pure CSS.

The Stack

Frontend: React + Vite
Styling: Tailwind CSS
Code Editor: Monaco Editor
Syntax Highlighting: Prism.js
Backend API: Express.js
Hosting: Vercel (frontend) · Railway (API)

Get Started
Clone the repository and run locally:

bashgit clone https://github.com/byllzz/cssframes.git
cd cssframes
npm install
npm run dev

To run the community API server:

bashcd server
npm install
npm start
Then add this to your .env:
VITE_API_URL=http://localhost:3001

Why This Matters
CSSFrames solves a real problem: developers often reach for heavy animation libraries when CSS alone can deliver the same results - faster, lighter, and more reliably.

If CSSFrames helped you build smoother, more performant UI without bloating your bundle, a ⭐ on GitHub would mean a lot.

What's your favorite preset? Drop it in the comments below 👇

Created a developer excuse generator with 6 situations, 4 tones, and custom excuses

Bilal Malik — Wed, 03 Jun 2026 04:23:20 +0000

Excusify: A Excuse Generator for Engineering Teams:
We've all been there. The standup starts in three minutes. The bug is still unfixed. The deploy failed. Your PR has been waiting for review for two days. And somehow, "I don't know" doesn't cut it in a professional setting.

Excusify is a tongue-in-cheek solution to a real problem: how to communicate setbacks with confidence, context, and just the right tone. Pick your situation, select your audience, and get a believable, shareable excuse in seconds.

Try it live
View on GitHub (MIT licensed, open source)

The Premise
Engineering moves fast. Things break. Deadlines slip. Deployments fail. Sometimes you need to communicate what happened — and how you say it matters.

Excusify curates 72 hand-written excuses across six common engineering situations and four distinct tones.Every excuse gets its own shareable URL, and there's a seed-based Excuse of the Day that the entire community sees together.

It's lighthearted. It's useful. And it works.

The Six Situations
Every engineer recognizes these:
SituationThe RealityBug Still ExistsIt worked on your machine, didn't it?Missed DeadlineScope creep is real, but you can't say that.Production Went DownYou inherited someone else's mess.PR Not ReviewedFour pings and counting.Deploy FailedThe CI/CD pipeline had other plans.Missed StandupYou were "in deep focus work."

Four Tones for Every Audience
The same situation plays differently depending on who you're talking to:

1. Professional - Measured, forward-looking. For your PM and stakeholders.
2. Chaotic - Honest frustration with a laugh. For your tech lead and peers.
3. Desperate - Raw vulnerability. For your immediate team.
4. Corporate BS - Buzzword-heavy, non-committal. For management and executives.

Each situation × tone combination has a hand-crafted excuse. No filler. All believable.

Sharing Built In
Generated excuses are meant to be shared. Excusify includes multiple export options:

1. Download as PNG - Tweet-ready excuse card via html2canvas
2. Native Share - One-click compose for Twitter, LinkedIn, Slack, and WhatsApp
3. Copy to Clipboard - Pre-formatted for Slack's bold and quote syntax
4. Shareable URL - Every excuse gets a unique link, encoded in the URL parameters
5. Deep Links - Direct sharing to messaging apps

Share it. Send it. Own the situation.

The Little Details That Matter

Favorites & History
Star your best excuses - they persist to localStorage. Your last 10 excuses live in history with a "show all" toggle. Capped storage prevents bloat while keeping your go-to excuses within reach.

Full Keyboard Navigation
Speed matters. Hit Space to generate, C to copy, F to favorite, S/T to switch situation and tone pickers, and ? to reveal the shortcuts overlay. Power users never need to touch the mouse.

Synthesized Sound Feedback
Every generated excuse comes with subtle, synthesized audio feedback. No external sound files — everything is generated in-browser via the Web Audio API. A small UX detail that makes interaction feel snappy.

Excuse of the Day (Seed-Based)
Using a date-based seed, the same excuse generates for every user on the same day. It creates a shared experience: "Did you see today's excuse?" Community inside a joke.

Generational Counter
An all-time counter tracks total excuses generated across all user sessions. It's a completely useless metric — but it somehow feels important.

Run It Locally
Clone and start developing in seconds:

bashgit clone https://github.com/byllzz/excusify.git
cd excusify
npm install
npm run dev

How to Contribute
Found a situation we missed? Thought of a better tone? Want to add translations or improve accessibility?
Good first contributions:

Add new situations to situations.js and excuses.js
Create new tones following the pattern in tones.js
Refine the custom AI excuse templates
Translate excuses to a new language (locale file)
Improve accessibility — ARIA labels, focus management, keyboard shortcuts

Contribution workflow:

bashgit checkout -b feat/your-feature 
git commit -m "feat: your short description" 
git push origin feat/your-feature

Keep PRs focused - one feature or fix per request.

Closing
Excusify is tongue-in-cheek, but it solves a real communication problem: how to own your mistakes with confidence and the right tone for the audience.

If Excusify helped you survive a standup, a ⭐ on GitHub means a lot.

What's your favorite generated excuse? Drop it in the comments below 👇

Built a minimalist typing speed tester with real-time WPM, CPS, and post-session analytics

Bilal Malik — Wed, 03 Jun 2026 04:20:46 +0000

BitType: The Minimalist Typing Test Built for Focus
The typing test ecosystem is broken. The good ones are drowning in ads, account requirements, leaderboards, and social features you never asked for. The clean ones are so bare-bones they give you a single WPM number and nothing else.

There's no middle ground - until now.

BitType is a distraction-free typing environment designed for speed runners and learners alike. Real-time WPM and accuracy tracking, instant keystroke feedback, and a comprehensive post-session analytics dashboard. No signup. No ads. No clutter.

Try it live
View on GitHub (MIT licensed )

The Problem With Typing Tests
Typing test tools tend to fall into two extremes:

1. Bloated: Wrapped in ads, account systems, leaderboards, and social sharing. Metrics refresh too fast to read. The interface competes for your attention.

2. Too minimal: A single WPM number with no breakdown. No feedback on where you're losing accuracy. No insight into what went wrong.

BitType rejects both extremes. It's a clean, focused interface backed by real analytics - enough depth to diagnose your performance, enough simplicity to keep you focused.

What You Get:
1. Real-Time Keystroke Telemetry
Forget waiting until the end of the word for feedback. WPM and accuracy update with every single character you type. The timer starts automatically on your first keystroke for precision tracking. You see the signal as it happens.

2. Instant Visual Feedback
Correct keystrokes style subtly. Mistakes appear immediately in red. Real-time feedback reinforces muscle memory - you know the instant something is wrong, not five words later when you've already committed the error to memory.

3. Adaptive Word Generation
Every session generates a fresh randomized paragraph. No memorizing the same sentence to artificially inflate your score. The test stays hard. Your improvements stay real.

The Session Flow:
Start:
Text appears on screen. Type immediately - the timer triggers on your first keystroke.

Mid-session:
Every character updates WPM and accuracy live. Correct keystrokes style subtly. Errors flash red. You're always getting feedback.

End:
Type the final character. State flushes automatically and the analytics dashboard loads instantly.

Next round: Hit "Back to Training" for a new randomized paragraph and run again.
It's frictionless. No animations. No distractions. Just you and the text.

The Small Details That Matter:
Performance Titles
After each session, the engine evaluates your speed and precision and awards a title:

Speed Demon - High velocity paired with strong accuracy
Perfect Typist 🏆 - Earned through 100% precision

It's a small detail, but hitting a personal best feels hollow if the only reward is a number. Titles make milestones meaningful.

Precision Timing
Keystroke tracking uses the high-resolution timing API for zero-lag measurement. No artificial delays. No jank. Every millisecond counts when you're measuring performance.

Run It Locally
Clone the repository and start typing:

bashgit clone https://github.com/byllzz/bittype.git
cd bittype

Open index.html directly in your browser. No dependencies. No installation. No friction.

Why This Matters
Typing speed tools don't need to be complicated. They don't need to monetize you or distract you. They need to be fast, honest, and useful — and BitType delivers exactly that.

If BitType helped you hit a new personal best, a ⭐ on GitHub means a lot.

What's your personal best WPM? Drop your score in the comments below!

Favicon generator with Lanczos3 rendering that exports a full PWA bundle - no upload limits, no watermarks

Bilal Malik — Wed, 03 Jun 2026 04:18:02 +0000

Favicraft: Production-Grade Favicon Generation in One Click
Every web project needs a favicon. And every time, it's the same exhausting dance: find a random online tool, upload your logo, download a blurry 16x16 PNG that looks like it was downscaled with a potato, spend 20 minutes hunting for a site.webmanifest generator, then manually craft browserconfig.xml for Windows tiles.

There has to be a better way.
**Favicraft **is a high-fidelity favicon generator that handles the entire pipeline — from your raw image to a complete, production-ready PWA bundle. Upload once. Download a ZIP. Paste into your project. Done.

Try it live
View on GitHub (MIT licensed)

The Problem With Favicon Tools
Most favicon generators solve about 30% of the problem:

- Blurry downscaling - Bilinear resizing destroys edge clarity at small sizes
- Incomplete exports - No Apple Touch icons, no Android PWA sizes, no Windows tiles
- Manual configuration - You write site.webmanifest yourself, or it doesn't get generated at all
- Paywalls - Premium tiers unlock features that should be free
- Watermarks - Your favicon gets branded with someone else's logo

Favicraft eliminates every friction point. It's a complete favicon solution from raw image to production deployment.

What You Get

Lossless Downsampling via Lanczos3
The difference between a sharp favicon and a blurry one comes down to the resizing algorithm. Most tools use bilinear interpolation — fast but visually destructive. Favicraft uses Lanczos3, a kernel-based resampling method that preserves edge definition and color accuracy across every size from 16px to 512px.

The result: favicons that stay crisp at any resolution, across any device.

Every Size, Every Format
A modern web project needs more than just the classic 16x16 ICO. Favicraft generates the complete set automatically:

favicon.ico - Multi-size ICO for browser tabs
favicon-16x16.png & favicon-32x32.png - Standard and retina browser tabs
apple-touch-icon.png - iOS home screen (180x180)
android-chrome-192x192.png & android-chrome-512x512.png - Android PWA splash screens
site.webmanifest - PWA manifest with auto-generated metadata
browserconfig.xml - Windows tile configuration

One upload. All formats. No hunting through documentation.

Automatic Manifest & Header Generation
The painful part of favicon setup isn't the images — it's the configuration files. Most tools dump a ZIP and leave you to figure out site.webmanifest yourself.

**Favicraft **generates both site.webmanifest and browserconfig.xml automatically, with correct metadata fields pre-populated. Better yet, it outputs the exact and tags you need to paste into your HTML

. No guessing. No documentation hunting. Copy, paste, done.

Live Asset Preview & Testing
Before you download, inspect your generated favicons in real-time. Test them against light, dark, and glass UI themes to ensure they render correctly across different browser contexts. Color space analysis and metadata inspection help you catch issues before they ship.

Zero-Compromise Compression
All assets are packed using DEFLATE L9 compression into a single ZIP bundle. Optimized file sizes without sacrificing quality.

Complete Privacy
All processing runs client-side. No image uploads to a server. No logging. No tracking. Your favicon stays yours.

How It Works:
Upload: Your image is ingested and analyzed for color space and dimensions.
Resize: Each required size (16px through 512px) is recalculated using Lanczos3 filtering, preserving edge clarity and color fidelity.
Generate: Manifest files are created automatically with correct PWA metadata and Windows tile configuration.
Deliver: All assets are compressed with DEFLATE L9 and bundled into a production-ready ZIP file.

Why Lanczos3 Matters
Most tools downscale using bilinear interpolation — it's fast, but it blurs edges and loses detail. Lanczos3 uses a more sophisticated kernel to preserve micro-scale clarity, keeping your favicon crisp at any resolution. The difference is subtle at 32px, but at 16px — the size that matters most in browser tabs — it's the difference between professional and blurry.

What's Inside the ZIP
FilePurposefavicon.icoClassic multi-size ICO for broad browser supportfavicon-16x16.pngBrowser tab standard sizefavicon-32x32.pngBrowser tab retina (high-DPI displays)apple-touch-icon.pngiOS home screen (180×180)android-chrome-192x192.pngAndroid PWA home screenandroid-chrome-512x512.pngAndroid PWA splash screensite.webmanifestPWA manifest (auto-generated)browserconfig.xmlWindows tile configuration (auto-generated)

The Details That Matter

Auto-Generated Configuration Files
Here's what sets Favicraft apart: most tools give you the images and make you figure out the configuration. Favicraft generates site.webmanifest with the correct name, icons, theme_color, and display fields automatically. It even outputs the exact and tags you need in your HTML. Zero manual configuration. Copy. Paste. Done.

Optimized for Modern Web Standards
Favicons aren't just a visual detail — they're part of the PWA specification. Favicraft bundles everything a modern web app needs: proper manifest structure, cross-platform icon sizes, Windows tile support, and Apple Touch icon sizing. Your favicon works everywhere, on every device.

The Tech Stack:

Next.js - Framework and serverless API routes
Sharp - Professional-grade Lanczos3 image processing
DEFLATE L9 - Maximum compression for bundle export
Vercel - Global deployment with instant cold starts

Simple, purposeful, and battle-tested.

Run It Locally
Clone the repository and start generating:

bashgit clone https://github.com/byllzz/favicraft.git
cd favicraft
npm install
npm run dev

Requires Node.js v18+. No environment variables needed. Open http://localhost:3000 and start uploading.

Why This Matters
Favicon generation shouldn't be a chore. It shouldn't require multiple tools, manual configuration, or compromise on quality. Favicraft proves that one well-built tool can handle the entire workflow - fast, private, and professional.

If Favicraft saved you from a blurry favicon and an hour spent hunting for configuration files, a ⭐ on GitHub means a lot.

What's your favorite favicon you've created? Drop it in the comments below 👇

Code snippet that exports PNG & SVG. No sign-up, fully in the browser

Bilal Malik — Wed, 03 Jun 2026 04:14:04 +0000

SnippitKit: Code Snippets That Actually Look Good
Every developer has faced this moment: you've written something worth sharing - a clever pattern, a tricky fix, a tutorial worth documenting - and you want to share it beautifully. But a plain code block on Twitter looks generic. A screenshot of your editor looks amateurish. The popular snippet tools are bloated, require accounts, or lock you into their aesthetic.

There's friction where there shouldn't be.

**SnippitKit **removes it. Paste your code, pick a theme and font, adjust the layout, and export a polished PNG or SVG in seconds. No accounts. No bloat. No compromise on customization.

Try it live
View on GitHub (MIT licensed)

The Problem With Code Snippet Sharing
Plain code blocks are functional for documentation. But for blog covers, social media, tutorials, and technical articles, they're invisible. The tools that solve this fall into predictable traps:

Bloated: Overloaded with features you don't need, animation you didn't ask for, and metrics dashboards.

Paywalled: Free tier is crippled. Export sizes are limited. Watermarks are mandatory until you pay.

Aesthetic lock-in: You get their themes, their fonts, their style. No way to customize beyond swapping colors.

SnippitKit rejects all three. It's minimal, fully customizable, and completely free. One tool. No accounts. Export whatever you want.

What You Get:

1. Syntax Highlighting That Works Instantly
Powered by Prism.js with intelligent language autoloading, every code snippet highlights correctly the moment you paste it. Select a language from the dropdown — highlighting applies instantly. No manual setup. No broken syntax. Prism handles all the heavy lifting behind the scenes.

2. Themes & Gradient Backgrounds
Choose from a curated set of preset themes, each with carefully chosen gradient backgrounds. Toggle between dark and light modes to suit your use case - dark for blogs, light for presentations. All theme data is stored in JSON, making it trivial to add your own custom themes without touching the component logic.

3. Dynamic Font Selection
Browse and load Google Fonts directly from the interface. Pick a typeface, and only that font downloads - no bloated font bundles. Clean typography matters when you're sharing code. Monospace fonts like JetBrains Mono, Fira Code, and Cascadia Code render with proper ligatures. The font picker loads instantly and supports searching.

4. Complete Layout Control
Every visual detail is adjustable. Set padding, border radius, and font size with numeric inputs. Live preview updates in real-time as you tweak — no guessing. No export-then-regret cycle. See exactly what you'll ship before you click export.

5. Accessible, Keyboard-First UI
Custom select menus with full keyboard navigation — arrow keys move between options, Enter selects, Escape closes. ARIA labels throughout. No mouse required if you prefer the keyboard.

The Architecture You'll Appreciate!

JSON-Driven Configuration
Here's what makes SnippitKit maintainable: themes, fonts, and languages are all data-driven. Every theme is a JSON object. Every language is an entry in a language JSON file. Want to add a new gradient theme? Add one line to the themes JSON. Want to support a new language? One entry in the language file. No digging through React components. No refactoring. The UI and the data are cleanly separated.

This design makes it trivial to extend without breaking anything. Community contributions are easy because contributors only need to understand JSON, not component architecture.

The Tech Stack
Simple, purposeful tools with no unnecessary dependencies:

HTML5 + CSS3 + JavaScript (ES6+) - Core logic and styling
Prism.js - Syntax highlighting with intelligent language autoloading
dom-to-image-more - High-quality PNG and SVG export from the DOM
Google Fonts API - Dynamic font loading on demand
Devicons (jsDelivr) - Language and technology icons
Vite - Fast dev server and optimized bundling
Vercel - Instant global deployment

No bloated frameworks. No unnecessary dependencies. Fast startup. Small bundle. Ships instantly.

Run It Locally
Clone and start creating:

bashgit clone https://github.com/byllzz/snippitkit.git
cd snippitkit
npm install
npm run dev

Open http://localhost:5173. No environment variables needed. The entire app runs instantly.

How to Contribute
Contributions improve SnippitKit for everyone. Good first issues:

Add new theme presets to the themes JSON file
Expand the language definitions with additional languages
Improve SVG export fidelity and scaling
Suggest new font size or padding presets
Enhance accessibility — focus management, screen reader testing, keyboard navigation

Contribution workflow:

bashgit checkout -b feat/your-feature
# make your changes
git commit -m "feat: your short description"
git push origin feat/your-feature

Keep PRs focused - one feature or fix per request.

If SnippitKit helped you share code that actually looks polished, a ⭐ on GitHub means a lot.

Type scale generator that exports CSS, Tailwind v3/v4 & Style Dictionary tokens - all in the browser

Bilal Malik — Wed, 03 Jun 2026 04:01:54 +0000

TypoScale: Modular Typography Without the Math
Every time you start a new design system, the same ritual repeats. Open a calculator. Pick a base font size. Choose a modular ratio. Hand-compute every single step in the scale. Paste values into CSS variables. Then, inevitably, the designer asks: "What if we changed the base from 16px to 17px?"

You start over.

Existing type scale tools help, but they're incomplete. They calculate the scale, sure. But they don't export to Tailwind v4's theme syntax. They don't generate Style Dictionary JSON for design tokens. They don't let you preview your actual Google Font pairing before you commit. And they definitely don't let you share your exact scale with teammates without an account.

*TypoScale * fixes all of that in one place. Generate modular scales, preview them in real fonts, export to multiple formats, and share instantly.

Try it live
View on GitHub (MIT licensed)

The Problem With Typography Scales
Type scales follow simple math — multiply a base size by a ratio, repeat. But the implementation is scattered across tools that don't talk to each other:

The calculator approach: You find a type scale generator, plug in numbers, copy values into a spreadsheet. Change the base size? Start again.

The preview problem: You generate tokens but have no idea how they'll actually look in your chosen fonts. You apply them to your design, realize they don't work, and repeat the entire process.

The format fragmentation: You need Tailwind v4's theme syntax, but the tool only exports v3 config. Or it exports CSS, but you need Style Dictionary. You end up using three different tools and manually converting between formats.

The collaboration gap: You tune a perfect scale on your machine, send a screenshot to your designer, and they can't reproduce it. No shareable configuration. No way to iterate together.
TypoScale eliminates every friction point.

What You Get:

1. Intelligent Modular Scale Generation
Pick from nine built-in ratios — Minor Second (1.067), Major Second (1.125), Perfect Fourth (1.333), Golden Ratio (1.618), and more. Each ratio has a mathematical relationship that produces harmonious, proportional sizes. Or enter any custom ratio you want.

Set your base font size (typically 16px, but whatever your design system uses). Add steps above and below independently — some scales need five sizes, others need ten. TypoScale generates the entire scale instantly, preserving mathematical precision at every step.

2. Google Fonts Pairing & Live Preview
Search 1000+ Google Fonts directly in the tool. Separate pickers for display, body, and monospace typefaces — because a scale that looks great in Playfair Display won't work in your body copy unless you test it together.

Fonts load on demand, no bloat. Once selected, an editorial layout renders showing every scale step in your actual chosen fonts. Drag to resize and watch the hierarchy respond. This is the moment you discover whether your scale works in reality, not just in theory.

3. WCAG Contrast Verification Built In
Every scale step displays a WCAG AA/AAA pass/fail badge calculated against your chosen background color. Tiny type that barely clears accessibility standards gets flagged inline. No opening a separate contrast checker tab. No external tools. The safety check lives right where you need it.

Four Export Formats, One Click
Once your scale is perfect, export in the format your project needs:

CSS Custom Properties - Variables for vanilla CSS projects:

css:root {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
  --font-size-base: 1rem;      /* 16px  */
  --font-size-lg:   1.333rem;  /* 21px  */
  --font-size-xl:   1.777rem;  /* 28px  */
}

Tailwind v4 theme Syntax - Modern Tailwind projects:
css@import "tailwindcss";

theme {
  --font-family-display: 'Playfair Display', Georgia, serif;
  --font-size-base: 1rem;
  --font-size-lg:   1.333rem;
  --font-size-xl:   1.777rem;
}

*Tailwind v3 Config * - Existing Tailwind projects:

jsmodule.exports = {
  theme: {
    extend: {
      fontSize: {
        base: ['1rem',      { lineHeight: '1.5' }],
        lg:   ['1.333rem',  { lineHeight: '1.4' }],
        xl:   ['1.777rem',  { lineHeight: '1.3' }],
      },
    },
  },
}

Style Dictionary JSON - Design token systems:

json{
  "typography": {
    "scale": {
      "base": { "value": "1rem", "type": "fontSizes" },
      "lg":   { "value": "1.333rem", "type": "fontSizes" },
      "xl":   { "value": "1.777rem", "type": "fontSizes" }
    }
  }

The Collaboration Game-Changer: Shareable URLs
Here's where TypoScale separates from every other type scale tool.
Your entire configuration — base size, ratio, font selections, step count, even background color — is encoded into the URL using Zustand's URL persistence. No database. No backend. No accounts.

Tune a scale. Copy the URL. Send it to your designer.

They open it and see exactly what you built. They can tweak the ratio, change the base size, try different fonts — all in real-time. Changes reflect in the URL. They send you the updated link. You load it, see their suggestions, iterate together.

This transforms type scale design from a one-way handoff into actual collaboration. It's a small technical detail that completely changes the workflow.

The Architecture
The scale math lives in pure utility functions (scaleAlgorithms.ts) with zero framework coupling - easy to unit test and reuse elsewhere. Token generation is isolated in tokenGenerators.ts. Both are excellent targets for contributions and modifications.

The Stack:

React + Vite - Fast development and optimized bundling
TypeScript (strict mode) - Type safety throughout the codebase
Tailwind CSS - Utility-first styling
Zustand - Lightweight state management with built-in URL persistence
Lucide React - Clean, consistent icon set
Vercel - Instant global deployment

Minimal dependencies. Maximum clarity.

Run It Locally
Clone and start designing:

bashgit clone https://github.com/byllzz/typoscale.git
cd typoscale
npm install
npm run dev

Open http://localhost:5173. The tool works immediately with a curated fallback list of 28 popular Google Fonts.

To unlock the full 1000+ Google Fonts library, add a Google Fonts API key:

bashcp .env.local.example .env.local
# Edit and add: VITE_GOOGLE_FONTS_KEY=your_key_here

How to Contribute
TypoScale improves with community contributions. Good first issues:

Add new scale ratio presets with documentation
Write unit tests for scaleAlgorithms.ts and tokenGenerators.ts
Build a fluid type scale preview mode
Enhance accessibility - ARIA labels, keyboard navigation, screen reader testing

Contribution workflow:

bashgit checkout -b feat/your-feature
# make your changes
npm run type-check
npm run lint
git commit -m "feat: your short description"

Keep PRs focused — one feature or fix per request.

TypoScale proves that one well-designed tool can handle modular typography, from generation to collaboration to deployment.

If TypoScale saved you from hand-calculating 1.333rem for the hundredth time, a ⭐ on GitHub means a lot.

What's your favorite type scale ratio? Drop it in the comments below 👇