DEV Community: clark

Add advanced summaries to my site with vibe coding

clark — Mon, 13 Oct 2025 07:34:57 +0000

The legacy features of YouTube Summarizer were built without vibe coding. The new features were implemented with Cursor while keeping the original stack and codebase. New capabilities include:

We also added Favorites, which lets you create and browse collections (sharing will likely come later).

Benefits I got from vibe coding:

It’s easier to get started making changes. Instead of recalling the directory structure to know where to begin, I can simply tell Cursor which route to modify and let it explore the codebase. This makes it faster to start, especially when switching across multiple projects.
It helps me start projects with unfamiliar stacks much faster. For example, I wasn’t familiar with GitHub Pages before, but for a simple project gallery, I could start and build iteratively with Cursor and learn the platform along the way.

vibe coding으로 내 사이트에 고급 요약 기능 추가하기

Relive Pokémon: Spark Your Creativity with the Odluck Random Generator

clark — Thu, 14 Aug 2025 06:30:59 +0000

Remember the days of chasing Pokémon as a kid? Pikachu's "100,000 Volts" and Charizard's "Blast of Fire"—these bring back so many childhood memories! I recently discovered the Odluck Random Pokémon Generator, a super cool web tool that lets developers relive those classic moments!

Feature Highlights
Random Pokémon Generation: Generate 1-4 Pokémon with one click, including their stats (e.g., Pikachu's Electric-type ⚡️, Charizard's Fire + Flying-type 🔥).
Versatile Randomness: Generate numbers, passwords, colors, and more to meet your development and creative needs.
Lightweight and Efficient: Purely front-end implementation with responsive design, runs smoothly on mobile and PC, and is ad-free.
Developer-Friendly: Intuitive UI and a huge API potential for creative projects or test data generation.

My Experience

After trying it out, I generated a "dream team" of Pikachu, Bulbasaur, and Charmander, with their stats clearly visible! The random color feature also generates gradients, perfect for UI design inspiration. In terms of code implementation, Odluck utilizes JavaScript to efficiently handle random logic, resulting in superior performance.

Why recommend it?

Creative Inspiration: Provides inspiration for game development, UI design, or writing.

Team Fun: Compete with colleagues to create random teams for a fun experience.

Technical Inspiration: Its lightweight front-end architecture offers developers valuable insights into its randomization algorithm.

Visit odluck and generate your own Pokémon team! Share your results in the comments. Mine is Pikachu + Charizard. What's yours?

Easily create a Roblox-style avatar

clark — Tue, 12 Aug 2025 10:04:17 +0000

Hi everyone! I’ve been tinkering with a fun web tool lately — Roblox Avatar Maker, a completely free, browser-based avatar generator inspired by the cartoony style of Roblox. I wanted to share the story behind its development and how it can help you unleash your creativity. I’d also love to hear any subsequent questions and suggestions from contributors!

Why did I create this tool? I’ve always found Roblox’s cartoony style incredibly appealing, but I’m afraid similar avatar tools often require payment or have limited customization. So, I wanted to create a simple and fun tool that allows anyone to design an avatar anytime, anywhere, whether for social media, gaming, or just for fun. AvatarMaker’s goals are: zero-features, free, and fun. I hope it will refresh your creative side and bring a fun perspective!

AvatarMaker focuses on the following points to make your experience easy and fun:

Unique Design: All assets are original, Roblox-style, and experimental, giving you your own unique anime avatar.
Plenty of Options: Customize your background, hairstyle, emoji, clothing, and wallet with over 100,000 combinations, with new assets constantly being updated.
Faster: Runs in your browser, requiring no server connection, so you can open and use it instantly, even on mobile devices.
Free: Generate downloadable avatars with transparent background support and use them with complete ease.

As a front-end enthusiast, I implemented real-time rendering using HTML5, the Canvas API, and a bit of WebAssembly, striving to ensure the tool runs smoothly even on low-end devices. The biggest challenges were managing assets and generating random avatars — I wrote a small algorithm to ensure each “random” avatar was both visually appealing and unique. The whole process was quite mind-numbing, but seeing the finished product is incredibly satisfying!
Technically, I used p5.js for image rendering and Tailwind CSS for a responsive layout, ensuring seamless compatibility across mobile, tablet, and desktop. The completely serverless design is not only fast but also protects your privacy. I hope these efforts will make your experience even better!

AvatarMaker was created to provide a tool that makes it easy for everyone to unleash their creativity. Whether you’re looking to design an avatar for your social media profile or just have fun, I hope it helps. Go check it out at https://avatarmaker.fun/! If you have any questions, find a feature you’re not using smoothly, want to add new assets, or discover a bug, please let me know in the comments section and I’ll work hard to improve it. Feedback from the developer community is incredibly important to me; let’s work together to make this tool even better!
Thank you to the DEV.to community! I look forward to hearing your thoughts~😄

How to view psd files?

clark — Tue, 12 Aug 2025 09:47:42 +0000

Hello everyone, let me introduce myself. My name is Clark, and as described on my homepage, I’m a programmer and illustrator. At work, I often need to work with PSD files. How can I quickly identify minor issues? Today, I’d like to introduce a tool I developed: DK-JS PSD Viewer.

DK-JS PSD Viewer is a free online tool with the following features:
No installation required: It supports browsers like Chrome and Firefox.
Local processing: No file upload required, secure and fast.
Easy to use: Drag and drop PSD files to view layers, and supports JPG/PNG export.

Parsing PSD files in the browser relies on the following technologies:
Parsing: Uses psd.js to extract layers and pixel data, running completely locally and protecting privacy.
Rendering: Uses HTML5 Canvas to draw layers, supporting zooming and exporting.
Optimization: Chunked loading and deferred rendering reduce memory usage.

Instructions:
Open DK-JS PSD Viewer.
Drag and drop or select a PSD file.
View layers, zoom, or export.
Try DK-JS PSD Viewer for free! Leave us a comment with any suggestions or requests, and we’ll continue to improve it. Want to explore more tools? Visit https://dk-js.com.