Forem: Usama Nazir

Convert Markdown to PDF Online - No Command Line Required

Usama Nazir — Tue, 04 Nov 2025 19:54:13 +0000

Convert Markdown to PDF Online - No Command Line Required

Have you ever struggled with converting Markdown files to PDF? Maybe you've tried Pandoc or other command-line tools, but they require installation, dependencies, and technical knowledge. What if I told you there's a better way?

The Problem with Traditional Markdown to PDF Conversion

Most developers face these issues:

❌ Pandoc - Requires installation, LaTeX dependencies, complex commands

❌ VS Code extensions - Limited formatting options, no live preview

❌ GitHub/GitLab export - Inconsistent styling, no customization

❌ Online tools - Break on images, tables, or code blocks

Introducing MarkdownToPDF.tech 🚀

I built a free online Markdown to PDF converter that solves all these problems. It works entirely in your browser - no installation, no command line, no sign-up required.

🔗 Try it now: www.markdowntopdf.tech

✨ Key Features

1. Real-Time Preview

Write Markdown on the left, see the PDF preview on the right. Instantly.

2. Full Markdown Support

✅ Headers, bold, italic, strikethrough
✅ Code blocks with syntax highlighting (190+ languages)
✅ Tables with proper formatting
✅ Images (local or URLs)
✅ Task lists (- [x] checkboxes)
✅ Blockquotes and nested lists
✅ Horizontal rules
✅ Links and footnotes

3. Advanced Features

🧮 Math equations with KaTeX ( $E=mc^2$ )
🧪 Chemistry notation with mhchem ( $\ce{H2O}$ )
💻 Syntax highlighting for code blocks
🎨 Custom fonts & sizing (16px to 24px)
📄 Professional typography (serif, sans-serif, monospace)

4. Perfect for ChatGPT Conversations

Copy ChatGPT responses in Markdown format and export them as beautiful PDFs. Perfect for:

Saving coding tutorials
Documenting technical discussions
Archiving research conversations
Creating study guides

📊 Real-World Use Cases

1. Documentation

Convert README files, technical docs, or API documentation to professional PDFs.

2. Academic Papers

Write papers with math equations, citations, and code examples.

3. Meeting Notes

Convert your Markdown notes from Obsidian, Notion, or any editor to PDF.

4. Blog Posts

Draft posts in Markdown, export to PDF for review or sharing.

5. Resumes & Reports

Create professional documents with clean formatting.

💡 Why I Built This

As a developer, I was frustrated with:

Installing Pandoc and managing LaTeX dependencies
Running complex command-line scripts
Dealing with broken formatting in online converters
No live preview while editing

I wanted a tool that just works - paste Markdown, get a beautiful PDF. No friction.

🛠️ Technical Stack

For the curious developers out there:

Frontend: Next.js 14 with TypeScript
Markdown Parser: Custom parser (now available as advanced-markdown npm package!)
Math Rendering: KaTeX with mhchem extension
Syntax Highlighting: highlight.js (190+ languages)
PDF Generation: Browser print API (no server processing!)
Styling: Tailwind CSS

🎁 Open Source Package

The Markdown parser is now available as an npm package:

npm install advanced-markdown

import { parse } from 'advanced-markdown';

const markdown = `
# Hello World
Math: $E = mc^2$
Chemistry: $\\ce{H2O}$
`;

const html = parse(markdown);

Features:

✅ Math equations (KaTeX)
✅ Chemistry notation (mhchem)
✅ Syntax highlighting
✅ TypeScript support
✅ ~12KB minzipped

📦 GitHub: github.com/themrsami/advanced-markdown

📦 npm: npmjs.com/package/advanced-markdown

🚀 Get Started

Visit markdowntopdf.tech
Paste your Markdown content
Click "Export" in the toolbar
Download your PDF

That's it! No account, no payment, no installation.

📝 Tips for Best Results

1. Use Proper Markdown Syntax

# H1 for main title
## H2 for sections
### H3 for subsections

2. Code Blocks with Language
\javascript const code = "Syntax highlighting works!"; \\

3. Tables Need Headers

| Column 1 | Column 2 |
|----------|----------|
| Data 1   | Data 2   |

4. Math Equations
Inline: $x^2 + y^2 = z^2$

Display: $$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$

🎨 Customization Options

Font Family: Serif, Sans-Serif, Monospace
Font Size: 16px - 24px
Typography: Professional spacing and line height
Themes: Light/Dark mode (coming soon!)

🌟 What's Next?

I'm actively working on:

[ ] Custom CSS themes
[ ] Template library (resume, paper, report)
[ ] Batch conversion (multiple files)
[ ] API for developers
[ ] Browser extension

💬 Feedback Welcome!

This tool is free and will always be free. If you find it useful:

⭐ Star the GitHub repo
🐦 Share on Twitter/X
💬 Leave feedback or feature requests
🐛 Report bugs on GitHub

🔗 Links

🌐 Web App: markdowntopdf.tech
📦 npm Package: advanced-markdown
💻 GitHub: themrsami/advanced-markdown
👨‍💻 Author: Usama Nazir

Have you tried it yet? What features would you like to see next? Drop a comment below! 👇

markdown #webdev #productivity #opensource #developer #tools

CSS Animations Tutorial: A Beginner's Guide

Usama Nazir — Tue, 14 Oct 2025 04:47:33 +0000

CSS animations can really help your website or brand pop by adding dynamic, eye-catching effects. If you're new to them, they might feel intimidating at first, but once you grasp the key properties, they're straightforward and fun to work with. This guide breaks down everything from the video, explaining the essential CSS animation properties step by step. We'll cover how to create animations, when to use them over transitions, and even how to make them interactive. Let's dive in!

When to Use Animations vs. Transitions

Before jumping into animations, it's worth asking: Do I really need a full animation, or would a simple transition do the trick?

Transitions are ideal for straightforward changes from one state to another, like hovering over an element to alter its color, size, or position. They handle single-step shifts smoothly, no matter how many properties you're changing.
Animations, on the other hand, shine when you need a sequence of multiple steps or an ongoing, looping effect (e.g., something spinning in the background). The animation property is a shorthand that combines several sub-properties to define these more complex behaviors.

If it's a one-and-done change, stick with transitions. For multi-step or continuous motion, animations are your go-to.

Setting Up Your First Animation with @keyframes

To create an animation, start by defining it with the @keyframes rule. This is where you outline the sequence of changes over time.

Name Your Animation: Choose a descriptive name, like spin. It's totally up to you—just make it memorable.
Define the Sequence: Use percentages to mark keyframes:
- 0%: The starting point.
- 100%: The ending point.
- Anything in between (e.g., 50%): Intermediate steps.

For example, to spin an element 360 degrees and turn it into a circle by the end:

   @keyframes spin {
     0% {
       /* Initial state (implied if not specified) */
     }
     100% {
       transform: rotate(360deg);
       border-radius: 50%;
     }
   }

Want to add complexity? At 50%, scale it up:

   @keyframes spin {
     0% {
       /* Starting point */
     }
     50% {
       transform: scale(2);
     }
     100% {
       transform: rotate(360deg) scale(2);  /* Keep the scale for the full effect */
       border-radius: 50%;
     }
   }

Key tip: If you're changing a property mid-animation (like scale), you must carry it forward to later keyframes if you want the change to persist. Otherwise, it'll revert smoothly to the next defined state.

To separate growing from spinning:

   @keyframes spin {
     0% {
       /* Square and unrotated */
     }
     50% {
       transform: rotate(0deg) scale(2);
       border-radius: 0;
     }
     100% {
       transform: rotate(360deg) scale(2);
       border-radius: 50%;
     }
   }

CSS will interpolate (blend) between keyframes automatically if something isn't specified, creating smooth transitions.

Applying the Animation to an Element

Once your keyframes are set, attach the animation to your HTML element (e.g., a div):

.element {
  animation-name: spin;
  animation-duration: 3s;  /* How long the full cycle takes */
}

On page load, it'll run once and snap back to the start. Now, let's tweak it with more properties for control.

Fine-Tuning with Animation Properties

These properties let you customize timing, speed, repetition, and more. They can all be shorthand-ed into one animation line, but we'll break them down.

animation-duration

Sets the length of one cycle. Shorter for quick effects, longer for deliberate ones.

Example: animation-duration: 0.5s; (fast) vs. 3s (slower).

animation-timing-function

Controls the speed curve, how the animation accelerates or decelerates.

Default: ease (slows at each step for smoothness).
linear: Constant speed throughout.
Others: ease-in (starts slow), ease-out (ends slow), ease-in-out (slow at both ends).

Easing makes things feel more natural, like in video editing.

animation-delay

Pauses before starting.

Example: animation-delay: 1s; (waits 1 second).

animation-iteration-count

How many times it repeats.

Default: 1.
A number like 3 for finite loops.
infinite for endless playback (great for backgrounds).

animation-direction

Changes playback order.

Default: normal (0% to 100%).
reverse: Backwards (100% to 0%).
alternate: Switches direction each cycle (forward, then reverse) for multi-iterations.

animation-fill-mode

Decides what happens after the animation ends.

Without it: Snaps back to initial state.
forwards: Holds the final keyframe's styles (e.g., stays as a circle).

This gives animations a permanent impact.

animation-play-state

Makes animations interactive!

Default: running.
Set to paused on events like :hover:

  .element:hover {
    animation-play-state: paused;
  }

Or vice versa: Pause by default, run on hover.

With JavaScript: Add buttons to toggle via element.style.animationPlayState = 'paused' or 'running'. Simple click listeners create play/pause controls.

Using the Animation Shorthand

Combine everything in one property for cleaner code:

animation: spin 3s ease 1s infinite alternate forwards running;

Order: name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state.

Practice Exercise: Building a Loading Animation

Let's apply this to a real example. A glowing square that rotates in 3D for a loading spinner.

HTML:

<div class="loading"></div>

CSS Setup:

.loading {
  width: 100px;
  height: 100px;
  border: 2px solid blue;
  border-radius: 10px;
  box-shadow: 0 0 10px blue, 0 0 20px blue;  /* Glow effect */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  animation: loading 2s ease-in-out infinite;
}

Keyframes:

@keyframes loading {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  33% {
    transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);
  }
  67% {
    transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
  }
}

It rotates on X, Y, then Z axes. Since 180° looks like 0°, the loop resets seamlessly without visible jumps.

There you have it. A complete rundown on CSS animations. Experiment with these properties to bring your designs to life! If you're into web development, check out more tutorials for deeper dives.

Getting Tailwind CSS Running in React and Next.js (Without the Headaches)

Usama Nazir — Thu, 09 Oct 2025 04:21:57 +0000

A practical guide to setting up Tailwind CSS in modern React and Next.js projects, covering both version 3 and 4 installations, solving the dark mode implementation puzzle, and sharing real-world patterns that actually help you build faster.

The first time I tried Tailwind, I stared at someone's code with about fifteen class names on a single div and thought "this is madness." Two weeks later, I was building faster than I ever had with traditional CSS. Funny how that works.

If you're setting up Tailwind for the first time, you'll probably hit the same confusing spots I did, especially around which version to use and how to make dark mode actually work. Let me save you some Googling.

Why Tailwind Feels Weird at First

Traditional CSS has you writing in separate files, coming up with clever class names, then wondering six months later what .card-wrapper-container was supposed to mean. Tailwind flips this entirely by letting you compose styles directly in your markup using pre-built utility classes.

Want padding? Add p-4. Different padding on tablets? Use md:p-6. Change text color? Try text-slate-700. Your first reaction will be "wow, this looks messy." Push through that feeling for an afternoon of building something real. You'll notice you're staying in one mental context instead of jumping between files, and that speeds up everything.

The clever bit happens during your build. Tailwind scans your entire codebase for class names and generates CSS containing only what you actually used. Despite having thousands of utilities available in Tailwind's system, your production bundle stays surprisingly lean.

Should You Use Version 3 or 4?

Version 3 is what you'll find in most production codebases right now. It works great and isn't going anywhere soon. Version 4 launched late last year with a Rust-based engine that makes builds faster and simplifies setup by removing the PostCSS requirement in most cases.

My advice? Use v3 if you're working on an existing project or collaborating with a team that hasn't upgraded yet. Choose v4 for new personal projects where you want the latest improvements. Both versions work nearly identically once installed, so switching later isn't painful.

Setting Up in React with Vite

I'll show you v4 since it's simpler. Start by creating your project:

npm create vite@latest my-app -- --template react-ts
cd my-app

Install Tailwind with its Vite plugin:

npm install tailwindcss @tailwindcss/vite

The magic happens in your vite.config.ts file. You're telling Vite to process Tailwind during the build:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(), // This hooks Tailwind into Vite's build pipeline
  ],
})

Now update your src/index.css file to just this single line:

@import "tailwindcss";

That's genuinely it for v4. No config file needed. The new engine automatically finds your component files and scans them. Start your dev server with npm run dev and you can immediately use classes like bg-blue-500 or rounded-lg in your components.

Next.js Setup

Next.js works a bit differently because it has PostCSS built in already. Create your Next.js project:

npx create-next-app@latest my-app --typescript --app
cd my-app

Install Tailwind with its PostCSS plugin:

npm install tailwindcss @tailwindcss/postcss

Create a postcss.config.mjs file in your project root:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

Update your app/globals.css:

@import "tailwindcss";

The Next.js documentation covers additional patterns, but this gets you running. The import in your root layout stays the same, and Tailwind automatically discovers your Next.js project structure.

Making Dark Mode Actually Work

Dark mode trips everyone up at first because you need to coordinate between Tailwind's CSS system and JavaScript that toggles classes. Here's the clearest path forward.

First, tell Tailwind to watch for a dark class. In your global CSS file (after the Tailwind import), add this:

@import "tailwindcss";

/* This tells Tailwind: apply dark: variants when a parent element has the dark class */
@variant dark (&:where(.dark, .dark *));

Now create a theme toggle component. This needs to manage three things: checking if the user has a saved preference, respecting their system preference if they don't, and updating both the DOM and localStorage when they toggle:

import { useEffect, useState } from 'react';

export function ThemeToggle() {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    // Check localStorage first
    const saved = localStorage.getItem('theme');
    // Fall back to system preference
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    const initial = saved || (prefersDark ? 'dark' : 'light');
    setTheme(initial);

    if (initial === 'dark') {
      document.documentElement.classList.add('dark');
    }
  }, []);

  const toggle = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);

    // Update the DOM immediately
    document.documentElement.classList.toggle('dark');

    // Save for next visit
    localStorage.setItem('theme', newTheme);
  };

  return (
    <button
      onClick={toggle}
      className="p-2 rounded-lg bg-gray-200 dark:bg-gray-800"
    >
      {theme === 'light' ? '🌙' : '☀️'}
    </button>
  );
}

There's one annoying problem here. When someone visits your site with dark mode enabled, there's a brief flash of light mode before React loads and runs this code. The browser renders HTML before JavaScript executes.

For Next.js projects, fix this by adding a tiny script that runs before React hydrates. Create a component:

export function ThemeScript() {
  const script = `
    (function() {
      const theme = localStorage.getItem('theme');
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

      if (theme === 'dark' || (!theme && prefersDark)) {
        document.documentElement.classList.add('dark');
      }
    })();
  `;

  return <script dangerouslySetInnerHTML={{ __html: script }} />;
}

Include it in your root layout's head:

import { ThemeScript } from './ThemeScript';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <ThemeScript />
      </head>
      <body>{children}</body>
    </html>
  );
}

Now you can use dark mode variants throughout your components like bg-white dark:bg-slate-900 or text-gray-900 dark:text-gray-100, and they'll switch automatically when someone toggles the theme.

Patterns That Make Life Easier

After building with Tailwind for a while, these practices consistently help.

Install the Prettier plugin for Tailwind. It automatically sorts your classes in a consistent order, which stops git diffs from getting messy when everyone orders utilities differently.

Grab the Tailwind CSS IntelliSense extension for VS Code. It autocompletes class names, shows you the actual CSS on hover, and warns you about typos. This genuinely speeds up learning because you discover utilities without constantly checking docs.

Keep your Tailwind config minimal. Only extend the theme when you need consistent custom values across many components. For one-off situations, arbitrary values like bg-[#1a73e8] work fine. I've seen configs balloon to hundreds of lines that nobody remembers.

Don't forget accessibility. Tailwind styles visual appearance but doesn't add semantic meaning. Always use proper HTML elements, test with keyboard navigation, and add ARIA attributes where needed.

When Styles Aren't Working

If you're seeing unstyled components, walk through this checklist. It catches most issues.

First, verify your import. Make sure you're importing the CSS file in your app's entry point. In React with Vite, that's src/main.tsx. In Next.js, it's your root layout.

Second, for v3 setups, confirm PostCSS is configured correctly and the plugins are installed. Version 4 doesn't have this dependency, which is why I recommend it for new projects.

Third, check for typos in class names. The IntelliSense extension helps enormously by underlining invalid classes.

Fourth, clear your build cache and restart the dev server. Sometimes the build process gets stuck, especially after changing config files.

One particularly frustrating bug happens when styles work in development but break in production. This usually means you're dynamically constructing class names like text-${color}-500. Tailwind scans for complete strings during build. Either use complete class names or add them to the safelist configuration.

Where to Learn More

The official Tailwind documentation is genuinely excellent and searchable. Start there when you need to find specific utilities or understand configuration options.

Tailwind UI is a commercial component library, but even the free examples teach you solid patterns for responsive design and component architecture. I learned a lot just by reading through their example code.

Follow the Tailwind Labs blog to stay current with v4 developments. The team writes clear explanatory posts about new features and design decisions.

The Learning Curve Is Worth It

Tailwind changed how I build interfaces. The first few hours feel awkward because you're fighting muscle memory from traditional CSS. But once the utility-first approach clicks, you'll find yourself prototyping ideas much faster because you're staying in one mental context.

Success with Tailwind isn't about memorizing classes. That's impossible. Instead, internalize the mental model of composing designs from small, purposeful utilities. Start with layout basics like flexbox and spacing. Gradually explore responsive variants and transitions. When you see a site you like, inspect it and learn from their patterns.

Remember that Tailwind is a tool, not a religion. Write custom CSS when you need precise control. Use CSS modules for complex animations. Your goal is building excellent user experiences, and Tailwind is simply one way to get there faster.

About the Author

I'm Usama Nazir, a full stack developer specializing in React, Next.js, and TypeScript. I write about modern web development patterns and share practical insights from real-world projects at usama.codes. When I'm not building scalable web applications, I'm exploring new tools and helping other developers navigate the ever-evolving JavaScript ecosystem.

More from my blog:

Sora 2 Invite Code: How to Get Access to OpenAI Sora 2 - A complete guide to accessing OpenAI's latest AI video generator
Check out more articles on React, Next.js, and modern web development

Premium Responsive Navbar

Usama Nazir — Mon, 18 Aug 2025 04:41:48 +0000

Premium Look Navigation Bar for different purposes. added sections with ids. smooth animations. color changing animations. includes tailwindcss and google fonts. make sure you include tailwind and google fonts in your file.