DEV Community: Yusuf Cengiz

Bug-reporting tools already exist. What still makes bugs hard to reproduce?

Yusuf Cengiz — Fri, 09 Oct 2026 12:56:05 +0000

Bug-reporting tools aren’t new.

Tools like Jam.dev already capture screen recordings and technical context. So the interesting question isn’t “How do we add a recording to a bug report?”

It’s: what still makes a bug hard to reproduce, even when you have that context?

A recording can show what someone clicked. But the issue might depend on their account state, the data they were viewing, timing, or something else that’s hard to recreate. And capturing more information isn’t always the answer either: too much noise makes the useful details harder to find, while collecting sensitive data creates its own problems.

A useful report still needs to make a few things clear:

Where did it happen?
What steps led to it?
What did the person expect to happen?
What happened instead?
Can someone else reproduce it?

The tricky part is getting that context without making the person reporting the bug fill out a long form or become a detective.

If you use Jam.dev, Marker.io, or something similar: what still sends you back to Slack to ask for more context? And what information would you not want a tool to capture automatically?

I’m exploring this space while building caes.dev. It’s early, and I don’t have a demo ready yet. The waitlist is at https://caes.dev.

How to build a Waitlist in 2 minutes (Next.js, Framer Motion & Notion API)

Yusuf Cengiz — Fri, 19 Jun 2026 03:02:45 +0000

Building a waitlist for a new project usually involves setting up a database, configuring an email service, and writing the same form boilerplate over and over again.

I wanted to simplify this process, so I built an open-source template that connects directly to Notion. Here is a quick breakdown of how it works and how you can use it for your next project.

The Stack 🛠️

Next.js (App Router): Fast, SEO-friendly, and handles our API routes seamlessly.
Framer Motion: I used this to create a really smooth layout animation. When the user hits "Join", the input collapses smoothly into a loading pill.
Notion API: Instead of setting up PostgreSQL or Firebase, I used Notion as a headless CMS/Database. Every email is saved as a new row in a Notion database.
Resend: For sending out the automated welcome emails.
How to Use It 🚀 I made the template completely open-source. You don't even need to touch the code to deploy it.

Click the "Deploy with Vercel" button on the GitHub repo.
Enter your NOTION_API_KEY and RESEND_API_KEY.
Your waitlist is live!
Check it out: 🔗 Live Demo: https://nextjs-waitlist-template-yc.vercel.app/ 💻 GitHub Repo: https://github.com/YusufCeng1z/nextjs-waitlist-template

I kept the code extremely modular. If you want to dive in, you can easily tweak the Framer Motion springs or change the design tokens in the Tailwind config.

If you find this template useful, I'd really appreciate a ⭐ on GitHub! Let me know what you think in the comments.

🚀 Open Source: Svelte 5 + GSAP Creative Agency Template

Yusuf Cengiz — Tue, 21 Apr 2026 21:22:25 +0000

Hey everyone 👋

I recently built and open-sourced a Svelte 5 + GSAP template focused on creating modern, animated landing pages (Awwwards-style).

👉 GitHub: https://github.com/YusufCeng1z/svelte-gsap-template

✨ Why I built this

While working with Svelte, I noticed that integrating GSAP can get messy:

You need to manually bind DOM elements
Run animations inside onMount
Handle cleanup yourself

Even though GSAP is powerful, the setup friction is real.

So I wanted to create a clean starter template that already includes:

Smooth scroll experience
Scroll-triggered animations
Reusable animation patterns
Modern UI structure

⚙️ Tech Stack

Svelte 5 (Runes)
GSAP (ScrollTrigger, timelines)
Tailwind CSS v4
Optional: Lenis for smooth scrolling

🎬 Features

⚡ Smooth scrolling experience
🎯 Scroll-triggered animations
🧱 Sticky & layered sections
💎 Glassmorphism UI elements
📱 Fully responsive design
🌙 Dark mode ready
🚀 Pre-rendered & fast

🧠 Key Idea

Instead of scattering GSAP logic everywhere, the template:

Keeps animations structured and reusable
Makes it easier to scale animation-heavy UIs
Reduces boilerplate for every new project

📸 Use Cases

Portfolio websites
Creative agency landing pages
Product showcases
Experimental UI projects

🧩 Why GSAP with Svelte?

Svelte has built-in animations, but:

They’re great for simple transitions
GSAP shines for complex timelines & scroll effects

This template tries to combine the best of both worlds.

💬 Feedback

This is still evolving, so feedback is super welcome 🙌

If you find bugs, have ideas, or want improvements — feel free to open an issue or PR.

⭐ If you like it, consider starring the repo!

Thanks!

Svelte Bash: A Lightweight Terminal Component for Svelte 5 (Autoplay, VFS, Themes, Custom Commands)

Yusuf Cengiz — Thu, 11 Dec 2025 01:17:31 +0000

If you're building with Svelte 5 and you’ve ever needed a clean, lightweight, fully-typed terminal UI, I built something you might like.

Meet Svelte Bash — a zero-dependency, ~4kb gzipped, highly customizable terminal emulator component made specifically for Svelte 5 applications.

It includes everything you expect from a terminal component (and more):
Autoplay mode, virtual file system, custom commands, deep theming, history navigation, accessibility, and full TypeScript support.

GitHub : https://github.com/YusufCeng1z/svelte-bash

- Live : https://svelte-bash.netlify.app/

🌟 Why I Built Svelte Bash

I needed a terminal component for demos, documentation, and interactive tutorials — something lightweight, theme-able, and easy to embed in any Svelte page.
Most solutions were either too heavy or not Svelte-native.

So I built Svelte Bash from scratch with these goals:

Modern Svelte 5 features
Zero dependencies
Small enough for landing pages
Realistic terminal behavior
Easily extendable with your own commands

⚡ Key Features

✅ 1. Autoplay Mode (Scripted Demos)

Perfect for landing pages, tutorials, and docs.
Commands type and execute automatically.

<Terminal 
  autoplay={[
    { command: 'git status' },
    { command: 'git commit -m "wip"', output: '...' }
  ]}
/>

✅ 2. Virtual File System (VFS)

Svelte Bash includes a mini virtual file system with real commands:

ls
cd
pwd
cat

You define your structure like this:

<script>
  const fileSystem = {
    'readme.md': '# Hello World',
    src: {
      'app.js': 'console.log("Hi")'
    }
  };
</script>

<Terminal structure={fileSystem} />

✅ 3. Custom Commands

Add your own CLI commands — sync or async.

<Terminal
  commands={{
    hello: () => "Hello from Svelte Bash!",
    echo: (args) => args.join(' '),
    fetchdata: async () => {
      const res = await fetch('https://api.example.com');
      return await res.text();
    }
  }}
/>

✅ 4. Deep Theming (Dark, Light, Dracula, Matrix + Custom Themes)

Use built-in presets or provide your own colors:

<Terminal 
  theme={{
    background: '#1a1b26',
    foreground: '#a9b1d6',
    prompt: '#7aa2f7',
    cursor: '#c0caf5'
  }}
/>

✅ 5. Fully Typed with TypeScript

Every prop, command, and VFS entry includes precise TypeScript definitions.

✅ 6. Lightweight & Fast

Zero dependencies
~4kb gzipped
Optimized for Svelte 5 runes
No runtime overhead

Ideal for production sites, documentation, and portfolio sections.

📦 Installation

npm install svelte-bash

🧩 Basic Usage

<script>
  import { Terminal } from "svelte-bash";
</script>

<Terminal user="guest" machine="dev" />

🧭 Use Cases

Developer portfolios
Landing page demos
Interactive documentation
Web-based CLI tools
Coding tutorials
Onboarding experiences

⭐ If You Like It, Please Star the GitHub Repo

Open-source projects grow with community support.
If Svelte Bash helps you in any way, a GitHub star would mean a ton to me — it boosts the project’s visibility and helps more Svelte developers discover it.

👉 GitHub: https://github.com/YusufCeng1z/svelte-bash

Thank you in advance! ❤️

💬 Feedback & Contributions

I’d love to hear your suggestions, feature ideas, or bug reports.
Issues and PRs are always welcome.

🚀 Build a Production-Ready Blog with SvelteKit in 5 Minutes

Yusuf Cengiz — Mon, 08 Dec 2025 02:08:27 +0000

Modern, fast, customizable — and fully open source.

Creating a blog with SvelteKit can be incredibly fun… until you start dealing with SEO, dark mode, styling, content setup, authors, tags, routing, RSS, sitemap, and more.

I’ve been there.

That’s why I built the SvelteKit Shadcn Blog Starter — a clean and production-ready template that lets you launch a modern blog in minutes instead of hours.

👉 GitHub: https://github.com/YusufCeng1z/sveltekit-shadcn-blog-starter

✨ What You Get Out of the Box

⚡ 5-minute setup
📝 Write posts in Markdown
🎨 Beautiful UI with shadcn-svelte
🔍 SEO-ready (RSS, Sitemap, OG tags)
🌙 Dark mode included
📱 Fully responsive
🔎 Built-in search
👤 Multi-author support

Whether you're building a personal blog, a dev blog, or a content-heavy site — this starter gives you everything you need.

💡 Why I Built This Starter

When I built my first SvelteKit blog, I spent days:

choosing a UI library
setting up MDsveX
configuring SEO
building tag pages
adding dark mode
writing RSS feed + sitemap logic

It took way too long.

So I built a starter that handles all this for you.
Clone → write content → deploy. That’s it.

🚧 Features Overview

📝 Content Management

Write posts using Markdown + Svelte components
Automatic tag pages
Multi-author setup
Built-in search
SEO-friendly slugs

🎨 Design & UX

shadcn-svelte UI components
Tailwind CSS styling
Dark/light theme detection
Fully mobile-friendly layout

🔍 SEO & Performance

Auto-generated sitemap.xml
Auto-generated RSS
Perfect Open Graph metadata
SvelteKit optimizations by default
TypeScript everywhere

🚀 Quick Start

# Clone the repository
git clone https://github.com/YusufCeng1z/sveltekit-shadcn-blog-starter.git
cd sveltekit-shadcn-blog-starter

# Install dependencies
npm install

# Run the dev server
npm run dev

Open http://localhost:5173 and start creating your content.

🗂 Project Structure

sveltekit-blog-starter/
├── src/
│   ├── lib/
│   │   ├── components/     # UI + shared components
│   │   └── config/         # Site config
│   ├── posts/              # Markdown blog posts
│   └── routes/
│       ├── blog/           # Blog list + blog post pages
│       ├── authors/        # Author pages
│       ├── tags/           # Tag archive pages
│       ├── sitemap.xml/    # Sitemap generator
│       └── rss.xml/        # RSS feed generator
└── static/                 # Images & assets

✍️ Creating Your First Post

Create a new Markdown file under src/posts/:

---
title: "My First Blog Post"
description: "A short description of the post"
date: "2025-12-08"
tags: ["tutorial", "getting-started"]
author: "your-author-id"
---

# Welcome!

Start writing your content here…

Everything updates automatically:

Blog page
Tags
Author route
RSS + sitemap

⚙️ Configuration

Modify the site config at:

src/lib/config/site.ts

export const siteConfig = {
    name: "My SvelteKit Blog",
    url: "https://yourdomain.com",
    description: "A modern blog built with SvelteKit",
    links: {
        twitter: "https://twitter.com/yourusername",
        github: "https://github.com/yourusername",
    },
};

☁️ Deployment

✨ Recommended: Netlify

Just push to GitHub → Click New site from Git → Deploy.

Works great with zero config.

Other supported adapters:

Vercel
Cloudflare Pages
Node.js
Static adapters

Simply install the correct SvelteKit adapter.

🔧 Customization

Customize UI with Tailwind classes
Edit or extend shadcn components
Replace layout styles
Add your brand colors
Add or remove sections easily

The starter is intentionally simple and flexible.

⭐ Show Your Support

If this starter saved you time (and headaches), consider starring the repo — it really helps others find it:

👉 https://github.com/YusufCeng1z/sveltekit-shadcn-blog-starter

❤️ Built by Yusuf Cengiz

Have suggestions or ideas?
Open an issue or reach out on GitHub!

From Next.js to SvelteKit 5 + Tailwind CSS v4: Building a High-Performance Landing Page Template

Yusuf Cengiz — Sat, 06 Dec 2025 03:07:04 +0000

🚀 The Motivation: Why Port a Next.js Template to SvelteKit?

I’ve always admired the clean, modern look of Cruip's popular Next.js landing page template. While Next.js is a fantastic framework, SvelteKit's promise of minimal output, nearly zero client-side JS, and superior raw performance was too compelling to ignore.

This project was born out of the desire to take a beloved Next.js design and rebuild it entirely using the latest and fastest components of the SvelteKit ecosystem—specifically Svelte 5 Runes and Tailwind CSS v4. It demonstrates just how simple and fast it is to build a truly production-ready page with SvelteKit.

🌟 Introducing: Simple SvelteKit Landing Page Template

I've preserved Cruip's original design while completely reconstructing the architecture using SvelteKit's best practices. This wasn't just a visual copy; it was an exercise in leveraging SvelteKit's newest features.

✨ Key Features and Tech Stack Highlights

Category	Technology / Feature	Description
Framework	SvelteKit	File-based routing, excellent SSR/SSG support, and built-in tooling.
Reactivity	Svelte 5 Runes	Built with Svelte 5's new reactivity primitives: `$props()`, `$state()`, and `$derived()`.
Styling	Tailwind CSS v4	Utilizes the new Oxide engine and CSS-first configuration for speed and cleaner setup.
Animation	AOS (Animate On Scroll)	Integrated for smooth reveal effects as the user scrolls down the page.
Architecture	Route Groups	Isolated layouts for authentication pages (`src/routes/(auth)`) for clear separation of concerns.
Performance	Optimized Output	Minimal JavaScript bundle size resulting in outstanding performance metrics.

🛠️ The Next.js to SvelteKit Migration Process

The core steps in the migration involved:

Component Translation: Converting the Next.js/React components into native Svelte components (.svelte). This required mapping props to Svelte's $props() or export let, and local state management to the powerful Svelte 5 $state().
Routing Adaptation: Moving from the Next.js routing logic (whether pages or app directory) to SvelteKit's src/routes structure using +page.svelte and +layout.svelte. Crucially, I implemented Route Groups ((auth)) to isolate the sign-in/sign-up layout.
Styling Setup: Configuring Tailwind CSS v4 according to its new specification and integrating it seamlessly within the SvelteKit global styles structure.

This journey reaffirmed how logical and developer-friendly SvelteKit's approach to routing and component architecture is.

💻 Getting Started

You can clone and run the template immediately:

Clone the Repository:

git clone https://github.com/YusufCeng1z/sveltekit-tailwind-landing-page-template.git
cd sveltekit-tailwind-landing-page-template

Install Dependencies:
```
npm install
```
Start the Development Server:
```
npm run dev
```

🔗 Resources

Find the full source code, a live demo, and more details here:

GitHub Repository: YusufCeng1z/sveltekit-tailwind-landing-page-template
Live Demo: svelte-landing-page.netlify.app

I hope this project inspires the SvelteKit community and serves as a fast, high-quality starting point for your next venture! Feel free to drop your comments and feedback below.