DEV Community: Amrzlabs

[Boost]

Amrzlabs — Sun, 28 Jun 2026 20:42:44 +0000

Amrzlabs

Jun 28

How to Give Your Website a "Hand-Drawn" Look with Just ONE Word 🦋

3 min read

[Boost]

Amrzlabs — Sun, 28 Jun 2026 00:34:02 +0000

Amrzlabs

Jun 28

How to Give Your Website a "Hand-Drawn" Look with Just ONE Word 🦋

3 min read

How to Give Your Website a "Hand-Drawn" Look with Just ONE Word 🦋

Amrzlabs — Sun, 28 Jun 2026 00:27:59 +0000

We all love that quirky, sketchy, hand-drawn aesthetic on websites. It adds personality, makes your portfolio stand out, and gives a warm, human touch to digital interfaces.

But normally, achieving this look is a CSS nightmare. You either have to mess with complex clip-path properties, heavy SVG filters, or write hundreds of lines of custom CSS border-radius hacks.

What if I told you that you could apply this effect to any HTML element using exactly one word?

Enter Butterfly CSS.

What is Butterfly CSS?

an ultra-lightweight framework that changes how we style HTML. Instead of stacking endless utility classes, it uses simple, descriptive "attribute-based fast typing".

It was built with creativity in mind, and one of its coolest built-in features is the handdrawn attribute.

Step 1: Add the Butterfly CSS CDN

Since Butterfly CSS is incredibly light, you don't need a complex build step, Webpack, or npm installs. Just drop the CDN links into the <head> of your HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Sketchy Website</title>

    <!-- Add Butterfly CSS -->
    <link rel="stylesheet" href="[https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/butterflycss.css](https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/butterflycss.css)">
    <!-- Optional: Add JS engines for layout handling and dark mode -->
    <script src="[https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/df.js](https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/df.js)"></script>
    <script src="[https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/vf.js](https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/vf.js)"></script>
</head>
<body>
    <!-- Your content will go here -->
</body>
</html>

Step 2: The Magic Word

Now for the fun part. To make any element look like it was sketched with a pen, you simply add the handdrawn attribute to your HTML tag.

Butterfly CSS automatically applies a filter that distorts the borders and text to look like a living sketch.

Example: A Hand-Drawn Button

<button btn='purple' handdrawn>
    Hover over me!
</button>

(Pro Tip: The handdrawn attribute makes the element's font very sketchy as well. If you want the box to be sketchy but the text to remain perfectly crisp, you can simply override the font-family on the text inside!)

Why This is Awesome

Clean Markup: Your HTML stays incredibly readable. You instantly know what handdrawn does just by looking at it.
Rapid Prototyping: If you are building a quick landing page, a hackathon project, or a personal portfolio, you can achieve a unique design in seconds.
Zero CSS Bloat: You aren't writing custom SVG filters or hunting down third-party libraries just for a border effect.

Conclusion

If you are tired of building the same rigid, pixel-perfect, boxy websites and want to inject some fun back into your front-end development, give Butterfly CSS a try. The handdrawn attribute is just the beginning—it also features built-in clip-path shapes, pulse animations, a birthday-paper confetti effect, and effortless dark mode styling.

full handdrawn example(buttermonials):

:to copy this template code for free visit directly:

https://butterflycss.amrzlabs.com/buttermoials

Have you tried Butterfly CSS yet? Let me know in the comments!

[Boost]

Amrzlabs — Fri, 26 Jun 2026 14:54:13 +0000

Amrzlabs

Jun 25

5 game-changing new tools for developers and any one in 2026

3 min read

From Viral Vanity Metrics to Real Conversions: Lessons from My Product Launch

Amrzlabs — Fri, 26 Jun 2026 06:56:52 +0000

I’ve learned some hard truths during the launch of my project, Butterfly CSS. If you are building in public, you’ve likely felt the gap between "getting eyes on your product" and "getting people to actually use it." Here is what I’ve gathered so far:

The LinkedIn vs. Dev.to Paradox
LinkedIn is a powerhouse for Brand Awareness. I’ve seen posts about Butterfly CSS hit thousands of views in a day, but those are often passive eyes. On the flip side, Dev.to feels quiet in comparison, but the conversion is entirely different. People there are actually clicking through to see the documentation or try the library. Plus, nailing your SEO keywords in Dev.to titles is a massive win for long-term organic traffic.
The Product Hunt "Trap"
Don't rush to Product Hunt or similar platforms before you have a community. It’s a painful lesson, but these platforms aren't necessarily "meritocracies." Success there is often tied to your existing social capital. If you launch Butterfly CSS into the void without a base, you’ll just end up frustrated. Build the community first; the launch comes later.
The "Nano-Second" Rule
Users have zero patience. I’ve observed this firsthand with the interactive elements in my site: if a button doesn't respond in a split second, you lose the user. Performance isn't just a technical metric; it is a fundamental UX and marketing decision. If they have to wait, they leave. Simple as that.
Visuals Drive the Algorithm
Never underestimate the power of an eye-catching thumbnail. It changes everything for your reach—especially on LinkedIn. A great hack? Use tools like NotebookLM to synthesize your project into clean, engaging visual cards. It’s how I’ve been trying to bridge the gap between a complex project and a digestible social media post.

The takeaway: Metrics are fun, but building something people actually interact with is where the real work happens.

Have you noticed these same patterns in your own launches? How are you handling the balance between reaching a wide audience and finding your real users?

buildinpublic #webdev #butterflycss #startup #ux #marketing

Between Bitter Truth and Motivating Encouragement: A Comparison of AI Model Styles

Amrzlabs — Fri, 26 Jun 2026 05:34:42 +0000

I have noticed that AI models have become very distinct in their personalities and goals in recent versions. I observed that ChatGPT tends to downplay everything, trying to be factual and sometimes even discouraging, while Gemini aims to motivate you and often makes you feel like you are on the right track.

For example, I said: "What do you think? My first LinkedIn post about my project reached 4,000 views in one day."

Gemini's response:
"This is an excellent and impressive achievement for a first post! Reaching 4,000 views in one day on LinkedIn means the content you provided was engaging and resonated with your network, or performed well within the platform's algorithms."

ChatGPT's response:
"This is an encouraging indicator that the way the idea was presented can attract attention but This does not necessarily mean the project will be commercially successful, but it shows there is initial interest worth building upon.

i also tried sayong what do u think of this hero section design

gemini:

The design "Screenshot 2026-06-11 154028.png" possesses a highly unique and distinctive visual character. It adopts a "Playful UI" style, making it an excellent fit for a CSS library aimed at developers seeking unconventional, creative touches.
Design Analysis:
Visual Identity: The color palette (shades of pink and purple) is harmonious and conveys a vibrant feel. The use of "hand-drawn" style typography reinforces the impression that the library is easy and fun to use.
User Experience: Including a "Feedback Agent" directly on the homepage is an excellent idea for fostering user interaction and boosting engagement.
Layout: The layout is clear and simple; elements are arranged so that the reader can quickly grasp the library's purpose.
Areas for Improvement: There are some issues with text contrast, particularly in the sentence describing the library; light pink text on a white background can be difficult for some users to read, which impacts accessibility.
Valuation:
Determining a price for the design is highly subjective and depends on whether you are selling it as a template or as a custom project.
If it is just a "Hero Section" interface: As a piece of artwork or UI design, the price could range from $50 to $150, depending on the quality of the accompanying code and the level of element interactivity. Market Value: If this design is part of a successful open-source project, its true value lies in its ability to attract developers and establish a strong brand identity for the library—an asset that could be worth thousands of dollars in marketing value over the long term.
Tip: To enhance the value of this design, try increasing the color contrast of the explanatory text to ensure a comfortable user experience; this is what distinguishes a "beautiful" design from a "professional" one.

chatgpt

As a hero section, I'd say it has personality, but it still feels more like an indie open-source landing page than a polished commercial framework homepage.
Rating
Aspect Score
Creativity 9/10
Visual hierarchy 6.5/10
Typography 6/10
Spacing 7/10
Professionalism 6/10
Memorability 9/10
Overall 7.3/10
What I like
The hand-drawn aesthetic is distinctive.
Pink branding is memorable.
The butterfly logo fits the framework name.
It immediately communicates that this isn't another Bootstrap clone.
What hurts it
The text below "butterfly css" is hard to read because of mixed colors and examples inside the sentence.
The hero feels somewhat empty vertically.
The feedback widget on the left competes with the main CTA.
The navbar links are tiny.
The scribble under the title looks playful, but slightly reduces the premium feel.
The "Get started" button could stand out more.Dollar value
This depends heavily on context.
As a Dribbble concept
~$30–80

In your opinion, is being reserved always better, or does a model's encouragement and enthusiasm sometimes motivate you to keep going?
do u feel it seems like the differnce between passpartout and fogg ?

[Boost]

Amrzlabs — Fri, 26 Jun 2026 03:50:23 +0000

Amrzlabs

Jun 25

5 game-changing new tools for developers and any one in 2026

3 min read

This Brilliant Tool Reimagines Searching the Web as a Distraction-Free Social Feed

Amrzlabs — Thu, 25 Jun 2026 22:05:55 +0000

*
The traditional way of searching the web is broken. You type a query, look at a list of blue links, click one, get bombarded by cookie banners and ads, go back, and repeat.

Arabinum is a fresh, innovative project that completely fixes this broken user experience. 🛠️

The Magic Inside Arabinum:

See Before You Click: It aggregates results from Google Search, and other platforms, but reformats them into a fluid social feed. You can actually see what is inside the website content before deciding to step into it.
Distraction-Free YouTube Search: Want to look up a programming tutorial without getting sucked into a rabbit hole of recommended gaming videos or unskippable ads? Arabinum lets you search and watch YouTube videos in a completely clean, isolated interface.

It is a fantastic tool for developers and researchers who need information fast without the modern web's clutter.

Check it out here: Arabinum 🚀

👉 How much time do you lose to internet distractions daily? Let's talk in the comments!

sick of Boring, Corporate Looking Websites? Try This Fun CSS Framework! 🎨

Amrzlabs — Thu, 25 Jun 2026 21:53:57 +0000

Let’s be honest: modern web design can feel a little repetitive. Everything is a perfectly sharp, clean, corporate box built with Tailwind or Bootstrap. If you want to make something that stands out and feels alive, you need Butterfly CSS. 🦋

What is it?

Butterfly CSS is an attribute-based CSS framework designed to give your websites a unique, playful, hand-drawn look with absolute zero effort.

Why you'll love it:

Attribute-Based Simplicity: No massive string of utility classes. You just add straightforward HTML attributes. Want a button to look sketchy? Add handdrawn. Want it turn into flying butterfly? Add butterfly='fly'.
Unique Style: It instantly injects personality into your project, making it look like a creative sketch while maintaining perfect responsive layouts.
Built-in Power: It comes with easy dark-mode handling, flexible flexbox grids, and a beautiful color palette out of the box.

Perfect for portfolios, indie games, or indie hacker side-projects that need to catch a user's eye instantly.

Explore the framework here: Butterfly CSS ✨

👉 Would you use a hand-drawn style for your next side project? Let me know!

How to Run OpenAI & Claude on the Frontend Without Leaking Your API Keys 🤯

Amrzlabs — Thu, 25 Jun 2026 21:50:16 +0000

We've all been there: you want to build a cool AI-powered feature for your frontend app, but then reality hits. You have to spin up a Node/Python backend just to hide your OpenAI or Anthropic API keys so no one steals them and runs up your bill.

Not anymore. Puter.js completely flips the script. 🔄

What is it?

Puter.js is a serverless JavaScript library that lets you build full-stack, AI-powered applications directly in the browser.

Why it’s a game-changer:

Zero Backend Required: You can call models like GPT-4o, Claude, and DALL-E directly from your client-side JavaScript.
No API Keys to Manage: You don't hardcode any keys. Puter handles the authentication.
Users Pay, Not You: When a user interacts with your app's AI features, Puter bills their account or usage limits, not yours. You can build viral AI apps without worrying about a surprise $10,000 bill! 💸
All-in-One Cloud: Beyond AI, it gives you instant access to cloud storage, NoSQL databases, and hosting with simple JS commands.

If you want to prototype and deploy AI apps at lightning speed, check out docs.Puter.com!

👉 *Have you built anything with Puter yet? Let me know in the comments!

5 game-changing new tools for developers and any one in 2026

Amrzlabs — Thu, 25 Jun 2026 21:44:37 +0000

If you are tired of the same old standard frameworks and APIs, it's time to shake things up. 🌪️ The web is evolving fast, and independent developers are releasing tools that completely rethink how we build, browse, and secure our applications. 🚀

Whether you want to run AI directly in your frontend without paying for API keys, build hand-drawn UI layouts in seconds, or browse the web without distractions, this list has you covered. Here are five incredible tools you need to try right now. 👇

1. Puter.js – Serverless AI on the Frontend (No API Keys Needed!) 🧠💻

Have you ever wanted to build an AI-powered frontend app but didn't want the headache of managing backend servers, billing, or hiding your OpenAI API keys? Puter.js is the answer. 🎯

It is a serverless JavaScript library that lets you integrate models like GPT-4o, Claude, and DALL-E directly into your client-side code.

The Magic 🪄: You don't paste any API keys. When a user interacts with the AI feature, Puter handles the authentication and billing on the user's end, meaning they pay for their usage, not you! 💸
Capabilities 🛠️: Cloud storage, NoSQL databases, static hosting, and AI chat/vision/TTS—all accessible via simple <script> tags.

2. RapidAPI – The Ultimate Code-Generating API Hub ⚡🔌

Integrating data from mainstream platforms can be a nightmare of documentation reading. 📚📉 RapidAPI solves this by acting as a massive hub for almost any API you can think of.

The Magic 🪄: It offers APIs for giants like Google, Amazon, Facebook, YouTube, and Product Hunt all in one dashboard. 🌐
Developer Friendly 🤝: Once you select the API and your parameters, RapidAPI instantly generates the exact code snippet for your request in virtually any syntax or language (Fetch, Axios, Python, PHP, etc.). You just copy, paste, and keep building. 🧱

3. Arabinum – Search Engine Meets Social Feed 🔍📰

Browsing the web usually means opening a search engine, clicking a link, getting distracted by pop-ups, hitting the back button, and repeating. 🔄 Arabinum is a brand-new, brilliant project that completely reimagines this flow.

The Magic 🪄: It takes search results (including Google Search, arXiv papers, and YouTube) and reformats the content into a fluid, distraction-free social feed. 📱
Why it's awesome ⭐: You can see exactly what's inside a website before you click into it. Plus, the YouTube search feature lets you watch videos without the clutter of ads or algorithm-driven suggested videos dragging you down a rabbit hole. 🕳️🐇

4. Porda AI – The First Super-Fast Halal Vision Extension 🛡️👁️

For Muslims navigating the modern web, avoiding inappropriate visual content can be a massive challenge. Porda AI is a highly innovative Chrome extension designed specifically to solve this. 💡

The Magic 🪄: It uses a custom-trained, optimized machine learning model that runs directly in your browser to detect and blur/block haram objects in both images and videos in real-time. ⏱️
Why it stands out 🌟: It’s lightning-fast, works entirely offline for privacy 🔒, and offers various covering options (solid colors, full blur) while preserving the surrounding safe content like text and subtitles. 📖

5. Butterfly CSS – Effortless Hand-Drawn UIs & Animations 🦋🎨

If you are bored of rigid, corporate-looking interfaces, Butterfly CSS is an attribute-based CSS framework that makes your website look uniquely creative with zero effort. ✨

The Magic 🪄: Instead of writing complex CSS, you just add simple HTML attributes. Want to make a button look hand-drawn? Just add the handdrawn attribute. ✍️ Want to add an instant flying animation? Just drop in butterfly='fly'. 🦅
Features 🚀: It comes packed with incredibly easy responsive flexboxes and massive scalability. It’s perfect for side projects, portfolios, or anything that needs a touch of personality.

Which of these tools are you trying first? Drop your thoughts in the comments below! 💬👇

day 2 of building arabinum|turning results into feed

Amrzlabs — Sat, 20 Jun 2026 23:30:35 +0000

hi devs im amr kilany frontend developer aged 16 building arabinum because i have been bored of google blue links that makes you have to go through many websites till you find what you are searching for and make searching not funny just informative

in alpha version:
i built an mvp with google an youtube results
but i have tackled some issues :

1:some website doesnt have visual img to show

2:i havent yet added ai over view because it requires backend to make your api safe also its usually not free for ever

whats new in beta version:

1:i found out a service called puter js after searching which provides very smart ai approch:
it runs on their servers no need to have backend server or api key and also you pay nothing the user is the only one who pays if quota exceeded on their account and also provides search web before response tool but i faced an issue that urls cited in the response doesnt work i will work on that on day 3

2:fixed broken images issue :
i used a tool i found out called thum.io that provide free yet limited quota to get whats in the website api without key it has free 1000 requests per month ,frankly i dont know how they collect your usage history since they dont use neither sign up nor api key but it may use ip address ,what do u think?

3:made youtube videos appear in page with iframe in my wesite making user stays as long as i can to get the most of the user experience on clarity
finally here is the link you can try our website for free:
arabinum wesite