DEV Community: Abdelrahman Ismail

Fixing Claude’s Image Problem — Because I Can Fix Her

Abdelrahman Ismail — Sat, 11 Apr 2026 09:28:42 +0000

Claude is a 10, but it can’t generate images.
Still, I had a feeling: I can fix her.

Turns out… you actually can.

Not by waiting for an official feature drop, but by wiring Claude into something that already does it well.

In this guide, we’ll plug Gemini (Google’s multimodal model) into Claude using MCP (Model Context Protocol), effectively turning Claude into a multi-model agent that can generate images on demand.

What’s Really Happening Here

You’re splitting responsibilities across models:

Claude → reasoning, instructions, orchestration
Gemini → image generation
MCP → the bridge that lets them talk

Step 1: Get Your Gemini API Key

Head over to:
👉 https://aistudio.google.com/api-keys

Create a new API key
Make sure billing is enabled (this matters for image generation)

Step 2: Plug Gemini into Claude (MCP Setup)

Now the fun part, connecting the two.

Open Claude Desktop:

Go to Settings → Developer → Edit Config
Open claude_desktop_config.json

Add this:

"mcpServers": {
  "gemini": {
    "command": "npx",
    "args": ["@houtini/gemini-mcp"],
    "env": {
      "GEMINI_API_KEY": "YOUR_API_KEY_HERE"
    }
  }
}

Replace "YOUR_API_KEY_HERE" with your actual key.

That’s it. You’ve just given Claude access to Gemini.

Step 3: When Things Break (Because They Might)

Let’s be real, this setup isn’t always plug-and-play.

Here’s what usually goes wrong:

Node.js version is too old → use v18+
npx isn’t working properly
API key has no billing attached
MCP server fails silently

What worked for me

I hit compatibility issues locally, so I Grabbed the MCP server logs and dropped them into Claude Code, and... as expected it fixed everything in minutes.

If you’re stuck, check the logs first. Always.

Step 4: Test It

Now try this:

“Hey Claude, use the Gemini MCP to generate an image of what the world might look like in five years.”

💡 Pro tip

Claude won’t always decide to use tools on its own, you need to nudge it clearly.

Final Thoughts

Claude didn’t need to change.

You just gave it access to the right tool.

And suddenly, a limitation turned into a capability.

Yeah… you fixed her. :D

📚 Resources

Once Upon a Time, Writing Code Was Fun

Abdelrahman Ismail — Tue, 24 Feb 2026 20:11:41 +0000

I’m one of those developers who’s had the privilege of writing code by hand in its rawest form, the kind who wrote every line by hand. No copilots. No prompts. Just raw logic, caffeine, and a blinking cursor.

And I’m glad I did.

I used to write code for work, in my free time, when I was stressed, when I was happy, In my dreams, I still write code. I did it because creating something, fixing issues, building systems... it was fun.

That feeling of fulfillment when you’d step back, look at what you built, and think:

I’m a genius. I did that.

Back then, you weren’t just assembling components, you were constructing mental models.
Every function passed through layers of thought. You traced edge cases before they existed and simulated failure before production ever had the chance to surprise you.
Every bug you fixed made you sharper.

You didn’t just write code.
You forged it.

We can still do that today.
The difference is: we don’t have to.

I remember one time I've built a complex component I was truly proud of. I called my friend and said:

“You have to see this... Yeah, I know it's past 2 a.m.”.

Not because anyone asked. Not because it was urgent.
But because I had built something difficult, and I needed someone to witness it.

That kind of excitement is hard to fake.

(And no, vibe coders, I’m not exaggerating.)

The AI Acceleration Paradox

Fast forward to today.

In the last few months, I’ve produced more code than I used to produce in an entire year. The output metrics look incredible. Productivity charts would love me.

But something feels… off.

It doesn’t feel like I built it.
It feels like the “9k Jr. developer” built it.

Yes, I review it.
Yes, I refine it.
Yes, I understand it.

But it didn’t originate from that deep cognitive grind.

It feels like someone defeated the final boss and rescued the princess for you. You get the credits… but you didn’t play the game.

And that’s the paradox:

When creation becomes effortless, accomplishment starts to feel weightless.

The Death of Flow

There’s another side effect no one talks about.

Flow state used to come naturally when writing complex systems. You’d get lost for hours, structuring logic, debugging edge cases, refining abstractions.

Now?

You describe what you want.
You wait.
You get distracted.

The AI finishes the job while you’re checking messages or scrolling social media, and you hit accept, accept, accept.

When you typed code, your brain and hands were synchronized. The struggle encoded the system into you.

AI removes friction, but friction was the encoding mechanism.

Typing Used to Be Joyful

This one surprised me.

Typing used to be satisfying. Mechanical keyboards (I have a couple of them), rapid thoughts turning into structured syntax, the physical rhythm of thinking through your hands.

Now it’s easier to dictate requirements. Easier to describe instead of construct.

But describing isn’t the same as building.

And building is where the joy lived.

The Ownership Gap in Production

Here’s where it gets serious.

A few weeks ago, something broke in production due to recent changes.

The old 9k would have known exactly where to look. Exactly how to fix it.

This time, I had to re-read my own system like a stranger.

That realization hit harder than the bug itself.

When code you wrote yourself fails in production, your brain already has a map. You can navigate quickly. You debug with intuition.

You could almost feel it:

“File XYZ, line 32. That’s where it’s failing.”

Because the entire codebase had passed through your brain, not just your eyes. You had simulated it. You had wrestled with it. You had lived inside it.

Now when something breaks?

You go back and read it line by line. Not because you’re incapable, but because you didn’t internalize it the same way. You reviewed it, but you didn’t forge it.

There’s a cognitive difference between:

Writing code
Reviewing code
Understanding code

We’re slowly shifting from the first to the third.

And that shift changes how deeply knowledge embeds itself.

I’m Not Complaining — I’m Observing

I’m not anti-AI. (Ironically, my initials are A.I.)

I’ve witnessed the rise of code. I’ve had the privilege of writing it by hand in its rawest form, and I’m glad I did. And I also see where things are heading.

AI is not going away. It will get better. Faster. More autonomous.

But the Game Has Changed
Maybe our role isn’t to type faster anymore.

Maybe it’s to:

Architect better.
Ask sharper questions.
Design deeper systems.
Understand trade-offs more clearly.
Own decisions rather than lines of code.

The craftsmanship is evolving. But we have to be intentional.

Because if we fully surrender the act of building, we might accidentally surrender the joy of building too.

So What Do I Think?

I think this moment feels uncomfortable because we’re in a transition era.

The developers who wrote everything by hand feel the shift most intensely. We remember what it felt like when the friction was part of the reward.

Sometimes I catch myself sounding like a grandpa already, talking about “the good old days” of writing code till 2 a.m.

The new generation might never experience that same kind of satisfaction, but they’ll probably experience a different one.

The challenge for us OGs isn’t to resist AI.

It’s to figure out how to use it without losing ourselves in the process.

Maybe the solution is simple:

Sometimes turn it off.
Sometimes write the complex thing yourself.
Sometimes struggle on purpose.

Because struggle isn’t inefficiency.
Sometimes, it’s meaning.

And yes… for the sake of full transparency:

I wrote this article with the help of AI.
I dictated most of it instead of typing.

Writing used to be fun too.

You Are Using TailwindCSS Wrong

Abdelrahman Ismail — Tue, 16 Dec 2025 20:25:28 +0000

I have mentioned before why I generally do not recommend using TailwindCSS as the primary styling approach in my projects, and I have explained that position in detail here. This time, however, I want to take a more pragmatic angle and talk about how TailwindCSS can be used correctly, without turning it into an anti-pattern.

Before diving in, let's go back in history.

A Short History of Styling on the Web

Once upon a time, there were happy dinosaurs… alright, that’s too far back. et’s return to the point where modern HTML and CSS became widely usable, roughly around the time HTML5 and CSS3 stabilized, the web started to scale very quickly. Around the same period, Twitter introduced Bootstrap, one of the first widely adopted component-based CSS libraries. Bootstrap was revolutionary for its time, it provided a consistent visual language, sensible defaults, and ready-made components that dramatically reduced the effort required to build interfaces.

However, Bootstrap came with trade-offs. It shipped with a very opinionated design system, which meant that many websites started to look the same. Of course, we can overwrite the styles and use themes, but the overflow was inevitable. Bootstrap shipped with a fixed HTML structure that you couldn't avoid, changing any element would break the whole style. You also had to memorize the whole structure or copy-paste it from the docs.

The Rise of Component Abstraction

With the rise of JS frameworks like React and Vue, they enhanced the developer experience (DX) significantly. Now we can achieve a better level of abstraction by encapsulating HTML markup and classes. You can use elements directly and configure them via props/attributes.

Instead of working directly with verbose markup like this:

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

bootstrap v5 model markup

We moved to a more expressive and maintainable abstraction:

<Modal
  open={open}
  onClose={handleClose}
  aria-labelledby="modal-modal-title"
  aria-describedby="modal-modal-description"
>
  <p>Modal body text goes here.</p>
</Modal>

MUI v7.x modal component usage

Here, the structural complexity is hidden inside the component. Consumers interact with a clear API instead of raw markup and fragile class structures.

The Real Problem Utility CSS Tried to Solve

Now imagine a common situation. You need to add a small padding to the inline start of an element, say 5px. You create a class like .padding-inline-start-5px. Later, you need 7px somewhere else, so you add .padding-inline-start-7px. Over time, this approach explodes into dozens or hundreds of micro-classes, including questionable ones like .padding-inline-start-7.8px.

At this point, TailwindCSS introduced a genuinely good idea, utility-first CSS. Instead of inventing arbitrary class names and values, Tailwind provides a constrained, consistent scale for spacing, colors, typography, and more. This system reduces decision fatigue and enforces visual consistency across a codebase.

That part is objectively strong.

So Why the Backlash Against TailwindCSS?

If TailwindCSS is so clever, why are many developers (including myself) often critical of it?

In my humble opinion, the issue is not the utility-classes concept itself, but how Tailwind is commonly introduced and adopted. It was presented as a framework with another level of abstraction, shipped only with the CSS part, without any HTML or JavaScript included, and you have the complete freedom to use it however you like.

That freedom, combined with its rapid popularity, caused confusion, especially among beginners. Many people started learning TailwindCSS before truly understanding CSS itself. Concepts like stacking contexts, margin collapsing, or layout flow issues remain mysterious if you never learned the underlying language.

To be fair, this is not unique to TailwindCSS. The same pattern exists with developers using React/Vue without a solid understanding of JavaScript. Still, Tailwind unintentionally amplifies this problem by making it possible to build UIs without ever writing or deeply understanding CSS.

How I Would Personally Use TailwindCSS

For me, TailwindCSS is not a styling philosophy, it is a utility library. I treat it the same way I treat Lodash in JavaScript, a collection of helpful tools that make common tasks easier, not a replacement for the language itself.

This is also why I appreciate projects like UnoCSS, which lean heavily into this idea and push it further in a more flexible direction, without trying to be a full standalone framework.

If I choose to use TailwindCSS, my approach is very strict:

Core components are written using plain CSS with semantic class names
Tailwind's CSS variables are used for design tokens (spacing, colors, typography)
Layout, animation, hover states, and complex interactions live in CSS classes, not inline utility chains
Utility classes are an exception for one-off adjustments, not the default

Examples

A Problematic Use of TailwindCSS

<div
  class="
    flex
    absolute
    text-center
    bg-white
    rounded-xl
    shadow-lg
    p-6
    w-80
  ">
  <h2>Hello Tailwind</h2>
</div>

This approach mixes layout, visual design, and semantics directly into the markup. Now imagine you need this card in 5 different places with slight variations. You'll be copying and modifying that entire class string each time. When design requirements change (and they always do), you'll need to hunt down every instance and update them individually.

A Cleaner Alternative: Using Tailwind's CSS Variables

<div class="card">
  <h2>Hello World</h2>
</div>

<style>
.card {
  /* Layout and behavior */
  display: flex;
  position: absolute;
  text-align: center;

  /* Tailwind design tokens */
  background-color: rgb(var(--color-white));
  border-radius: calc(var(--radius) * 3); /* rounded-xl */
  box-shadow: var(--shadow-lg);
  padding: calc(var(--spacing) * 6); /* p-6 */
  width: calc(var(--spacing) * 80); /* w-80 */
}
</style>

Adding Modifiers

<div class="card is-primary">
  <h2>Hello World</h2>
</div>

<style>
.card {
 ...

 &.is-primary {
   background-color: rgb(var(--color-blue-500));
   color: rgb(var(--color-white));
 }

 &.is-secondary {
   background-color: rgb(var(--color-gray-100));
   color: rgb(var(--color-gray-800));
 }
}
</style>

Yes, this is real CSS. Nesting is now part of the language itself, no preprocessors required.
CSS is still evolving, and it’s more powerful than many people think.
See MDN for details: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Nesting_selector

A Reasonable Use of TailwindCSS Utility Classes

<div class="card is-primary mt-5">
  <h2>Hello World</h2>
</div>

Addressing Common Counter-Arguments

Before we continue, let me address some common arguments I hear in favor of pure utility-first approaches:

"But colocation makes components more portable!"

True, but only if you never need to change them. The moment you have multiple instances with slight variations, you're either duplicating the entire class string or creating wrapper components anyway. Semantic classes with Tailwind variables give you the same portability with better maintainability.

"CSS files become bloated and unmaintainable!"

This was true before component-scoped CSS and CSS modules. Modern tooling (CSS Modules, Vue scoped styles, CSS-in-JS, Svelte, etc.) eliminates this problem entirely. Your component styles live with your component.

"Finding unused CSS is harder than unused utilities!"

With component-scoped styles, unused CSS is automatically removed when you delete the component. With Tailwind utilities, PurgeCSS helps, but you still need to be careful about dynamic class names.

Where TailwindCSS Actually Makes Sense

There is one modern context where TailwindCSS not only makes sense, but can arguably be the right choice, which is vibe coding.

When you are prototyping with AI tools, the primary goal is often speed and visual correctness, not long-term maintainability. You care about the result on the screen, not the elegance of the CSS architecture. In that scenario, stopping to design semantic class names, think about abstraction layers, or carefully structure styles can feel like unnecessary friction.

Utility-first CSS works well here because:

The feedback loop is extremely fast
Styles live close to the markup AI is generating or modifying
You avoid writing and debugging CSS files manually
Visual tweaks are trivial and disposable

In other words, TailwindCSS aligns very well with an exploratory, throwaway mindset. If the code is not meant to live long, evolve carefully, or be maintained by a team, then optimizing for speed over structure is a rational trade-off.

This is also why Tailwind pairs naturally with AI tools. Large language models are good at composing utility class strings, but much worse at maintaining coherent, evolving CSS architectures across diffrent files.

Final Thoughts

TailwindCSS is not wrong. Using it as a replacement for CSS is. When treated as a utility layer on top of solid CSS knowledge and component design, it can be extremely effective. When used as a shortcut to avoid learning CSS fundamentals, it quickly turns into technical debt.

The SEO Game Has Changed

Abdelrahman Ismail — Thu, 15 May 2025 10:15:14 +0000

If ChatGPT Can't Find You, Do You Even Exist?

The rise of AI-powered tools like ChatGPT, Perplexity, and Google's new AI search is reshaping how we think about content discovery. Traditional SEO (Search Engine Optimization) is no longer enough. Today, it's just as important to consider how your content surfaces in AI-generated responses, not just in Google's search results.

Being on page two of Google used to be a death sentence. Now, it's worse: if AI tools can't find or quote you, you're invisible.

TL;DR

GEO builds on traditional SEO, but the game has changed:

Instead of asking "How do I rank on page one?", ask "How do I become a trusted source AI will quote?"

SEO vs. GEO: What's the Difference?

SEO focuses on optimizing content for traditional search engines like Google, through keywords, backlinks, metadata, and technical optimization to improve visibility on search results pages.

GEO (Generative Engine Optimization) is a newer concept: optimizing your content to be referenced or quoted by generative AI tools. Unlike search engines that show ranked lists, AI tools like ChatGPT or Perplexity generate direct, conversational answers.

Why This Matters

Google processes over 14 billion searches per day.
ChatGPT receives about 37.5 million prompts daily, with 1 in 5 U.S. internet users engaging monthly.
Perplexity AI saw over 67 million visits in a single month, with an average session lasting nearly 11 minutes.

These numbers highlight a growing trend: users increasingly prefer concise, AI-driven answers over scanning through search results.

How to Optimize for Generative Engines

1. Focus on User Intent, Not Just Keywords

AI understands natural language and context better than traditional search algorithms. Keyword stuffing is outdated. Instead, design content around what users actually want to learn or achieve.

Tactics:

Build content around natural language questions and clear answers.
Use headings like "What is…", "How to…", and "Why does…" to mimic real queries.
Use conversational language; avoid keyword stuffing.
Explore "People Also Ask", Reddit, Quora, and AI prompt analysis to find real questions people ask.

Example: Instead of "best coffee beans 2025", write "What are the best coffee beans to buy in 2025 and why?"

2. Use Multiple Content Formats

AI models are rapidly becoming multimodal, capable of processing not just text, but images, videos, and audio. Diversifying your content helps broaden its reach and discoverability.

Tactics:

Repurpose blog posts into short videos, podcasts, slideshows.
Use diagrams, charts, infographics, and code snippets to illustrate ideas.
Always include alt text, transcripts, and captions—AI tools parse these.

3. Track Mentions by AI, Not Just Backlinks

Traditional SEO measures success via backlinks. In the AI age, it's also critical to know when and how AI tools are using your content.

Tactics:

Use tools like Sourceful, Diffbot, or Chatbase to detect AI citations.
Add structured data, FAQ schemas, and summaries, they help AI index your content more effectively.
Monitor AI referrer traffic using UTM links and server logs.

Final Thought

Write for humans. Format for machines.

Whether it's SEO or GEO, that's the formula. Don't just aim for visibility—build trust and clarity so AI tools choose you as the source worth quoting.

The Truth About Vibe Coding: From Zero Swift to App Store

Abdelrahman Ismail — Tue, 22 Apr 2025 18:09:19 +0000

How It All Started

Recently, I challenged myself to build a complete iOS app, using a programming language I had never written a line of code in, and launch it on the App Store — all in just three days.

No preparation, no planning, no prior experience.

Just pure Vibe Coding 🔥.

In this article, I will share:

How I built it,
Whether AI can truly replace engineers,
And how we, as developers, should prepare for the future.

Choosing the Tools

To push myself outside my comfort zone, I picked Swift — a language completely different from what I usually work with (like Flutter or React Native).

The app idea was simple:

An application that transforms a child's drawing into an AI-generated artwork.

For the AI part, I decided to use the Gemini API, because it supports image-to-image generation — you send a drawing, ask for modifications, and get a beautiful, AI-enhanced result.

I opened Xcode, Cursor, and ChatGPT...

And just started coding.

Vibe Coding in Action

The first thing I did was ask ChatGPT to generate an initial prompt for Cursor.

I pasted it in, crossed my fingers…

And yes, the app started taking shape!

Until… I hit the first real roadblock.

When trying to process an image, the app crashed. No response from Gemini. No output.

I tried everything:

Asking Cursor to fix the code,
Switching models AI model in Cursor to Gemini itself,
Share the docs link with the AI Agent
Debugging blindly.
Try to say: Pleaaase work!

After an hour and a half of dead ends, I realized:

"Enough playing around."

I went back to the official documentation, read it carefully (like any Software Engineer would do), wrote the full server logic myself in Node.js to validate it would work and…

Boom! It worked flawlessly.

Once the logic was stable, I told Cursor:

"Please translate this Node.js logic into Swift."

Within two hours, I had a fully working MVP:

An app that converts kids' drawings into stunning AI-powered artworks.

Pushing to Production

Now that the MVP was ready, I moved full speed ahead:

Added multiple artistic styles,
Improved the UI,
Created a Cloud Function to hide the API key "(I know some basic security procedures, don't I?)",
Built a Landing Page (or rather, let Cursor build it 😉).

Finally, I submitted the app to the App Store.

Rejected!! 😂

Apple sent me a list of required changes.

Did I read it carefully?

Of course not.

I just fed it to Cursor and said:

"Fix these issues for me."

Resubmitted.

Rejected again!

(This time for missing a Terms & Conditions link.)

After fixing that manually and adding a few final tweaks,

the app was finally approved and went live!

You can check it here: https://www.aidoodles.app/

Can Anyone Build an App with AI?

After this experience, let's answer a few burning questions:

Can anyone use AI to build production-grade apps?

— Absolutely not.

Is Vibe Coding just a passing trend?

— Definitely not.

Vibe Coding is a powerful tool — but only in the right hands.

To succeed, you must already be a skilled developer who understands:

When to rely on AI,
When to intervene manually,
How to validate and refine the output.

If you lack strong fundamentals, you will quickly hit walls you cannot overcome.

Most studies confirm it too:

Senior Developers benefit from AI coding tools much more than Juniors.

If you do not understand the code that AI generates, you cannot trust it — no matter how good it looks at first glance.

The Real Mindset for Vibe Coding

To properly apply Vibe Coding, you need to change your mindset:

Treat the AI as a very fast, very junior developer.
You are still the senior engineer — reviewing, steering, and making the critical decisions.

In practice:

Never let AI write unchecked code without reviewing every line.
If something looks suspicious or illogical, trust your judgment — not the AI.
Understand all the code generated. If you don't, don't approve it — no matter how well it "seems" to work.
Use AI for speeding up routine work, not making fundamental system design decisions.
Never use AI in a domain where you are not already an expert.

You must always stay in the driver's seat.

Otherwise, you are just rolling dice and hoping for the best — not engineering.

Until AI can genuinely replace a senior engineer's depth of understanding (which is still very far away), Vibe Coding should remain a partnership:

AI accelerates,
You validate and finalize.

Final Thoughts

The future belongs to the developers who master the art of working with AI efficiently and intelligently.

Those who learn to harness Vibe Coding will become the 9k Developers companies will fight over.

Speed without quality is useless.
The best engineers move fast, but also maintain high standards.

Thanks for reading.

Stay fast, stay sharp.

How to Become a 9k Developer

Abdelrahman Ismail — Fri, 18 Apr 2025 21:20:08 +0000

In software development, reaching "9k" isn’t just about being good.

It’s about being world-class — standing so far above the average that your decisions, your code, and your impact are unmistakable.

Some call it being a 10x Developer — I prefer calling it a 9k Developer.

If you know Dota 2, you know that hitting 9k MMR means you’re among the best of the best — the top 0.001% of players in the most competitive, highest-paid esport in the world.

And if you’re an anime fan, you’ll never forget the iconic moment from Dragon Ball Z when Vegeta roared:

“It’s over 9000!”
A power level so high, it shattered the scouter.

Vegeta its over 9000

After more than a decade in this industry, here’s what I’ve learned it truly takes to reach that level.

1. Master the Fundamentals

Frameworks change. Trends rise and fall. New tools appear and fade.

But fundamentals — the real core of software engineering — stay forever.

To build anything great, you must deeply understand algorithms, data structures, how networks operate, how APIs communicate, and how databases work under the hood.

It’s not about memorizing syntax. It’s about mastering systems thinking: seeing architecture, predicting failure points, and designing resilient solutions.

Tools are temporary. Foundations are permanent.

2. Focus on Impact, Not Output

Writing more code doesn’t mean you’re doing more valuable work.

The 9k Developer measures their worth not by how much they build, but by what changes because of it.

They solve meaningful problems.

They make systems faster, safer, simpler.

They elevate business outcomes, not just ship product features.

They raise their team's knowledge, not just their own résumé.

Every day, they ask themselves:

“What improved because I was here?”

Lines of code are cheap. Impact is rare.

3. Practice Relentlessly (and Intelligently)

You don’t become elite through occasional effort.

You get there through deliberate, relentless practice — every single day.

The 9k Developer codes constantly. They study better code than their own. They build side projects, dive into open-source, read architecture papers, analyze real-world systems, and seek uncomfortable feedback.

It’s not mindless grinding — it’s smart, intentional practice.

Consistency beats intensity. Every. Single. Time.

4. Embrace AI as a Force Multiplier

The 9k Developer doesn’t fear AI — they master it intelligently.

They integrate tools like GitHub Copilot, Cursor, Gemini, and ChatGPT into their workflow — not as crutches, but as force multipliers.

They automate the repetitive, accelerate the mundane, and use AI to spark creativity, brainstorm designs, and even critique their own solutions.

They don’t see AI as competition. They see it as an extension of their own skills.

They stay pragmatic — leveraging machines where it makes sense and focusing human brilliance where it matters most.

In the new era of development, those who work with AI will replace those who fight against it.

5. Surround Yourself with Excellence

Growth happens fastest when you’re surrounded by people who challenge you.

The 9k Developer seeks out teams and communities where standards are high, feedback is honest, and mediocrity isn’t tolerated.

They contribute to open-source projects with strict code reviews.

They invite criticism from engineers better than themselves.

They place themselves in rooms where they are not the smartest — because that’s exactly where growth happens.

Exposure to excellence rewires your standards faster than any solo grind ever could.

6. Stay Ahead of the Meta

The tech world doesn’t sit still.

Languages evolve. Architectures shift. Security standards tighten. Entire paradigms are born.

The 9k Developer stays ahead — not by chasing every trend, but by sharpening a deep radar for meaningful change.

They study architectures like event-driven and serverless systems.

They internalize new disciplines like observability, compliance, and data ethics.

They explore new frameworks thoughtfully, without abandoning the core principles that stand the test of time.

Curiosity keeps them sharp. Adaptability keeps them relevant.

In a world that moves fast, learning fast is the only sustainable advantage.

7. Stay Humble, Stay Hungry

The higher your skill level, the easier it becomes to slip into arrogance.

Don't.

The 9k Developer knows that mastery is an endless road.

Every success is just the beginning of a new challenge.

Real strength comes from humility, curiosity, and respect — for the craft, and for the people around them.

They treat juniors, seniors, managers, and non-technical colleagues with patience and kindness.

They remain teachable, even after mastering more than most will ever know.

Humility is not weakness.

It’s what makes greatness sustainable.

8. Take Care of the Player, Not Just the Game

You can't win if you destroy yourself along the way.

The 9k Developer knows their mind, body, and spirit are their greatest assets.

They prioritize sleep.

They move daily.

They cultivate hobbies beyond coding.

They nurture relationships and families that ground them.

Burnout isn’t a badge of honor — it’s a silent defeat.

The 9k Developer plays the long game, building not just technical skills, but resilience.

They don’t just build careers.

They build lives worth living.

9. It is a Mindset

Becoming a 9k Developer isn’t about raw talent or lucky breaks.

It’s about focus, discipline, humility, pragmatism, and relentless evolution.

It’s about setting your standards higher than anyone else would ever dare set for you.

It’s about showing up every day, training harder, thinking sharper, and living more intentionally.

“If you want to be 9k...
Think like 9k.
Eat like 9k.
Live like 9k.”

Final Words

I’m not claiming to have it all figured out.
I’m still learning, still growing, still making mistakes — and proud of it.

Becoming a 9k Developer isn’t about numbers, titles, or accolades.
It’s about constantly evolving into the best version of yourself.

Everyone has their own 9k to reach.
What matters most is that you keep moving toward it — one step, one challenge, one breakthrough at a time.

The CSS I Knew Has Evolved: Advanced Features, New Identity

Abdelrahman Ismail — Mon, 02 Dec 2024 16:07:47 +0000

The world of frontend development has changed drastically since I began my journey as a front-end developer a decade ago. CSS itself has not only evolved in capabilities but also embraced a fresh, modern identity with a new logo that symbolizes this evolution.

Lucky for me, I didn't start in the dark days of table-based layouts, but I did witness the rise of Flexbox and the bittersweet death of float and clear CSS properties. If you’re unfamiliar with these terms, you might want to take a nostalgic look at Bootstrap 3’s grid system.

The death of Internet Explorer marked a turning point. The web technologies started evolving at lightning speed, making it both exciting and challenging to keep up.

Here’s a look at some modern CSS features I wish had existed when I started my journey as in web development. These advancements would’ve saved me countless hours of frustration and made CSS development a lot more fun.

Centering a Dev

There are plenty of memes mocking CSS for lacking an easy way to center a div element. Luckily, those dark days are gone we now have the single CSS property place-content

Centering Vertically and Horizontally

Using Grid, you can center elements effortlessly:

.is-centered {
  display: grid;
  place-content: center;
}

Alternatively, Flexbox offers another simple solution:

.is-centered-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

Vertically Centering a Block-Level Element

With the introduction of the align-content property for block layouts, you can now center a div vertically using align-content, which works properly without requiring a flexbox wrapper.

.is-vertically-centered {
    display: block;
    align-content: center;
}

Nested Selectors

Preprocessors also introduced nested selectors, which make styles more structured and readable. Without them, we were stuck duplicating selectors like this:

.button {
  color: red;
}

.button:hover {
  color: white;
}

Today, native CSS lets you write:

.button {
  color: red;

  &:hover {
    color: white;
  }
}

It’s cleaner, it’s readable, and it’s finally supported in all modern browsers.

`:is()` and `:where()`

Selectors just got a lot smarter with these pseudo-classes. They let you simplify complex styles that previously required lots of duplication:

article:is(.featured, .highlighted):is(:hover, :focus) > h2:is(.title, .subtitle) {
    color: blue;
}

Without :is(), the same CSS would’ve looked like this monstrosity:

article.featured:hover > h2.title,
article.featured:focus > h2.subtitle,
article.highlighted:hover > h2.title,
article.highlighted:focus > h2.subtitle {
    color: blue;
}

9k tip: The difference between :is() and :where() lies in specificity. While :is() inherits the specificity of its most specific argument, :where() always has zero specificity. perfect for low-priority defaults.

Container Queries

Responsive design has always revolved around viewport widths, but container queries take a more intuitive approach: responsiveness based on an element’s parent container.

@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

This is a game-changer for modular and reusable components. Let’s start adopting it more widely, folks!

The clamp() Function

Once upon a time, I worked on a typography-heavy project that required fonts to scale fluidly with the viewport. My first instinct? Use something like font-size: 0.5vw; that would do the trick, right?

WRONG! It was a nightmare. We had to carefully control how the font resized relative to the viewport, which involved complex mathematical equations. Plus, we needed to ensure the text wouldn't become too large or too small.

Then I discovered a treasure—an article that addressed exactly this use case. It resulted in a monster of a Stylus-CSS mixin that handles all the corner cases (remember, it was the preprocessor era 🙃)

When I learned that the clamp() function is now supported natively, I was both excited and surprised, given its specific use case.

Now you can achieve similar results much more elegantly by combining the clamp, min, and max functions

width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));

Honorable Mention: Modern Color Features

CSS color management has evolved dramatically, offering a plethora of new systems and tools. Features like color-mix() and support for LCH and LAB color spaces deserve their own article. stay tuned for that!

Resources:

Tailwind CSS: Why It's Not My Cup of Tea

Abdelrahman Ismail — Sun, 30 Jul 2023 18:35:01 +0000

Like everything, there are people who support and oppose certain things. For example, sushi may be someone's favorite food, while others can't stand its smell.

Tailwind is no exception; some developers love using it, while others do not. Although it is well-supported by a large community, I personally prefer not to use it in my upcoming projects. In this article, I will represent the "NO" camp and share my thoughts on why.

TLDR;

Despite Tailwind CSS's popularity, it has issues like complex maintainability, reduced readability, overuse of utility classes, and limited customizability. It complicates version control, disrupts traditional coding separation, and could make projects overly dependent on it. As CSS continues to evolve and become more efficient, the value of utility-based CSS frameworks like Tailwind could diminish.

Maintainability

First, my concerns about Tailwind CSS are related to maintainability. Tailwind encourages the use of utility classes directly in your markup, which can lead to an incredibly cluttered HTML structure. Although utility classes can be very powerful, they can create a spaghetti-like effect when used extensively. This can create significant readability and maintainability issues, especially with more extensive projects.

Essentially, this approach makes your markup include the presentation layer again, resulting in a messy and unstructured codebase. This means you have redundant CSS that you never want to change, and you have to endlessly tweak the markup to get things looking right. You may be building a library of components, but it will just result in endlessly repeated markup.

Furthermore, Tailwind's approach can significantly increase the size of the codebase, impacting the load time of web pages. Although we have PurgeCSS, which can remove unused styles, it has its own challenges. Implementing it effectively can be a complex task and can create additional maintenance burdens.

Readability

Reading a series of classes sequentially can be a tedious task, especially when there are multiple media queries containing different values. It can be difficult to determine which value applies to which screen. This is especially true when multiple developers are contributing to the codebase and do not follow a consistent order when sorting the classes.

It would be helpful to have a tool that enforces class order, such as the stylelint-order plugin for CSS.

A screenshot from a newly created Nextjs project

Additionally, if you use a well-structured markup and follow one of the CSS naming conventions like SUIT, BEM, or others, you can easily understand the HTML markup you are reading. Considering the given example below, You can easily understand that there is a list with several items, and the that the .card__title element is a child of the .card component.

While if used a bunch of utility styling classes that do not have any semantic meaning. It would be hard decrypting the meaning of this puzzle!

<div class="list">
  <div class="list__item">
    ...
  </div>
  <div class="list__item">
    <div class="card">
      <h2 class="card__title">Awesome</h2>
    </div>
  </div>
  <div class="list__item">
    ...
  </div>
</div>

Separation of Concerns

Next is the age-old principle of separation of concerns. Tailwind muddles the boundary between styling and markup. Traditionally, we separate HTML (structure), CSS (presentation), and JavaScript (behavior) to create more manageable, understandable codebases. But with Tailwind, the HTML gets polluted with styling information, which not only makes the HTML harder to read but also breaks this principle.

To be clear, there's nothing wrong with bending or breaking principles if it serves your specific use case better, we have now CSS-in-JS and HTML-in-JS. but this doesn't seem to be a popular opinion when using Tailwind CSS. This departure from the conventional methodology can be a point of friction for developers who prefer keeping things separated.

Utility Classes

Utility classes are useful for web design, but Tailwind overuses them. Utility classes should be helper classes used in specific and limited situations where they are needed, not the default dominant approach. For me I would consider using Tailwind if it were presented as a set of utility classes that can be added on top of a perfectly working app. Similar to the Underscore.js library, which provides functions that can be used to make things easier and faster.

Cascading and Modifiers

Tailwind make it difficult to take advantage of one of the main benefits of Cascading Style Sheets (CSS), which is its ability to cascade.

For example, imagine you have a navbar that changes its style when scrolling. With CSS, you can simply add the class .navbar--scrolling, which will change the style of the navbar and its children.

However, achieving the same effect using Tailwind requires conditionally adding/removing classes for both the navbar and each of its children.

Tailwind does not make it easy to switch between multiple themes. If you want to implement different color schemes or themes, you have to define classes for each theme. This can be a tedious and time-consuming process, especially for larger projects with many themes.

Tailwind’s @apply

According to Tailwind documentation, if there are too many classes or reusable classes, it is recommended to use @apply.

Creating reusable classes is the best way to solve the mentioned above problems with Tailwind. However, could we achieve the same functionality with better readability by simply using plain CSS or preprocessors?

.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

I aware that Tailwind can create a similar layout by using even spacing values and font sizes, so developers don't have to memorize padding, margins, etc. values for the entire website. However, This would be a valid point if we didn't already have CSS variables or preprocessors that solved this issue before Tailwind was created.

Limited Customizability

Another point to consider when discussing Tailwind CSS is its limitation on customizability. While Tailwind prides itself on being highly customizable, the truth is that this flexibility is largely confined to the configuration file. Yes, you can customize your color palette, typography, and spacing scales, but any custom styles outside of these presets involve manually writing CSS. This could negate the utility-first approach, especially if you're working on a design-heavy project that requires unique, non-reusable styles.

Learning Curve

Despite being touted as a simpler alternative to traditional CSS, Tailwind comes with its own learning curve. You need to familiarize yourself with its utility classes and syntax, which can take time and effort. Moreover, since it's a low-level utility-first framework, there can be a steep learning curve for developers who are more accustomed to semantic CSS.

Also, its extensive list of utility classes can be overwhelming for beginners. While it offers flexibility, it also demands that you know what you're doing. Hence, mistakes can be costly in terms of time and effort.

Moreover, if you or your team have already invested a lot in learning and getting proficient with CSS, adding Tailwind to the stack might seem like unnecessary overhead.

Increased Complexity in Version Control

When multiple developers are working on a project, conflicts are bound to arise. With Tailwind's approach of putting styling within HTML tags, it increases the complexity of managing these conflicts. The HTML structure could potentially change every time there's a visual change. Compare this to traditional CSS where markup and styles are separate; conflicts tend to be less complicated and more manageable.

Misleading for Newcomers

Many newer web developers have turned to using Tailwind as their go-to CSS framework, which has become a popular trend in the web development community. However, many individuals endorse it without fully understanding the underlying principles of CSS, such as cascading and specificity.

Although this cannot be directly considered a problem with Tailwind, it should be mentioned.

Dependency and Future Proofing

Lastly, the use of Tailwind CSS makes a project heavily dependent on it. If Tailwind becomes deprecated or the community moves to a new favorite, transitioning could be a complex and time-consuming process. While no library or framework can guarantee perpetual support, the risk associated with this kind of tight coupling is something to consider.

Final thoughts

It's also important to remember that CSS, as a language, continues to evolve and adapt. CSS Houdini is on the horizon, with the potential to make many of the arguments for Tailwind redundant. The premise of utility-based CSS loses ground when CSS itself becomes more powerful and efficient.

I don't discourage anyone from using Tailwind if it suits their needs, it's worth noting that every solution has its pros and cons. While Tailwind may provide solutions for some developers and offer a different development experience, there are also challenges you may face. In this overview, I've aimed to provide you with an idea of these challenges so that you can be prepared and choose your tools wisely.

AI-Powered Tools to Get Your Next Software Job Offer

Abdelrahman Ismail — Wed, 14 Oct 2020 15:28:18 +0000

Finding your perfectly-fit job should not be rocket science, especially for the new job seekers.
There are lots of articles that explain how to write a killer technical resume, I will focus here on the tools that could help you build your resume, audit it, and automate the job-searching-process.

Create a Resume

If you are using Microsoft Word for creating your resume, I can't judge you (I used to use HTML and CSS for mine), but come on... there are hundreds of tools online to finish this task for you already with great results, and here is some:

If you already have a LinkedIn portfolio (which you should have Mr. 🤓), you can extract your data into a resume file. To access the resume builder:

Click the Me icon at the top of your LinkedIn homepage.
Click View profile.
Click the More… button in the introduction card.
Select Build a resume from the dropdown.
Edit the content then save it as a pdf

Canva

If you’d like to have a more vivid resume with more design details, Canva will perfectly suit your needs. With a variety of pre-made resume designs that you can pick from.

Canva Resume Templates

Zety

Zety is a great website if you're focusing only on the resume details and don't like to get involved with the design headache.

The best thing about Zety is that it has a wizard that takes you through several steps to generate your resume, and each step gives you suggestions and tips which are extremely helpful. Another great thing I really liked; you can fill the data with your current resume or start from scratch.

Unfortunately, they don't have a free option to download your resume 😢. But, I think $2.70 is a good deal compared to the service you will get.

Resume Lab

Resume Lab is another great platform that focuses on create Resumes, CVs, and covers letters. They also have A fully complementary blog with over 250+ custom-tailored career guides and white-paper studies.

Their system has a unique feature, which compares your resume's strength to other resumes in real-time.

Audit Your Resume

The fastest way to improve your chances of being accepted on the job is to have artificial intelligence on your side.

Grammarly

Grammarly without saying is your superhero; it can save you from embarrassing situations, such as sending your profile with a typo or a grammatical error. You can use it to audit your resume writing tone and grammar.

Their monthly subscription costs A LOT, but for one who is not working as a copywriter, the free plan is more than enough.

Resume Worded

Resume Worded is an AI-powered platform that provides you with detailed feedback on your resume and LinkedIn profile. It gives you some free hints to improve it, and they promise you that finding your dream job is certain and they may be right.

I gave it a try myself; I thought that my resume should get high results, but out of 100, I got only 61. I have a lot of things to improve here.

It tested my resume data in four domains: impact, brevity, style, and skills and it gave specific details on points of strength and weakness, and how you can improve it.

Resume Worded analysis

Automate Your Job Search

Searching for the perfectly-fit software engineering job over dozens of working websites is time consuming stressful work. LoopCV thought they could save your time and efforts, and automate this whole process because modern problems require modern solutions.

Modern problems require modern solutions

LoopCV

LoopCV collects millions of job postings, from most jobs websites all over the internet.

You upload your resume and define your job's top preferences you are looking for. And here comes the magic: they match your profile with all the posts, and they start sending emails on behalf of you to each job that matches you. You can change your preferences, try different templates, and make the job search fun.

In the dashboard, you can see the emails you sent, the open rates, and more. You can even create A/B testing for different emails.

What drives me crazy, is the fact that the system is smart enough that it could fill the job forms from your resume data. 🤯

LoopCV dashboard

You can create a free loop now, hunting a specific job title, with no hidden fees.

After using LoopCV, post your experience on trustpilot, and mention your recommendations if you have any.

Final Thoughts

Finding a new job is for sure a hard task, for both the developer and the recruiter, but you can reduce the efforts, and work smart not hard; by using tools that help you achieve your target. And good luck with finding your dream job!

Now that you may have benefited from those tools, please add in the comments below your experience, and any other tools that are related to this post. 🤓👇

Resources

Neomorphism designs, UI components library

Abdelrahman Ismail — Sun, 26 Jan 2020 20:30:34 +0000

Every while a new design trend arise and became the dominator of the shape of the period. Recently, the neomorphic design style becoming very trending and is gaining more and more popularity.

The Neomorphism Design

You can form this effect, by adding two shadows to your flat-designed elements, one is a light shadow from the top left of the element, and the other is a dark shadow towards the bottom right. the combination of both creates the effect of the elements pushing themselves through your display.

You can read more about how to apply this technic in-depth here: Design trends: Neomorphic design.

The first time I saw this design concept, I immediately loved it. I started to apply it to some basic web components; buttons, inputs, etc..

Then I had an idea, why not create a full set of UI components based on this concept.

I reviewed the most famous frameworks and components libraries structure and concepts, to design the structure I will follow. In the end, I summed up to:

Each component will have five sizes (xs, sm, md, lg, xl).
Components size will depend on its font-size only; when change the component's font-size property, its width, height, margin, and padding will be changed respectively because they all are in em unit.
The grid will have also five media breaking points (xs, sm, md, lg, xl).
Shadows depth will have five levels, in addition to two shadows style emboss and deboss.
Classes naming conventions will be a modified version of SUIT naming convention
The components are written in Stylus because it's the best 🤪🤪.

After TWO days of hard work 🤓🤓, and lots of potions coffee. I want to introduce Neomorphism, UI components library. (creative name, right? 🤷‍♂️🤷‍♂️)

ismail9k / neomorphism

UI components library in the new neomorphism design style

Final words

This project very far from completion, it still work-in-progress. I plan to include more components, and support dark-theme too, and maybe in the future expose it as React/Vuejs components. I just wanted to share it as early as possible, to gather feedback, and maybe to force myself, to dedicate more time to work on it 😭😭. Thank you for reading.

My 2020 Portfolio

Abdelrahman Ismail — Wed, 01 Jan 2020 12:22:06 +0000

I want to share my new portfolio with you: https://ismail9k.com ✌️✌️

I have added a hidden funny page, which you can access, by right click on the figure in the intro section, or touch it for one second on mobile devices. 🤫🤫

Please let me know what you think about it, thank you, and happy new year DEV folks 🥳🥳

Use SVG Icons with Vue.js

Abdelrahman Ismail — Sun, 24 Nov 2019 19:40:28 +0000

Many developers prefer to use the font-icons over the SVG ones because it has a simpler syntax, and it integrates seamlessly with almost any front-end component library.

In this article, I will try to demonstrate the technics I follow to make it easily to SVG icons.

TL;DR

You can find the final component here: AppIcon.vue.

Using

First, let's look at an SVG heart-icon syntax:

<svg viewBox="0 0 24 24">
    <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" />
</svg>

You see here that most icons are alike, except for the path's d attribute, which describes the icon shape. So, we can wrap this into a useable Vue component, which accepts the icon's path as a prop.

// AppIcon.vue
<template>
  <svg class="icon" style="width:24px;height:24px" viewBox="0 0 24 24">
    <path :d="path" />
  </svg>
</template>

<script>
export default {
  name: 'AppIcon',
  props: {
    path: String,
  },
};
</script>

Although we have wrapped our icon into a usable component, we can enhance this more. We can store all the app icons paths in a js object, to make it easier to access the icon using its name rather than the long initiative path.
To get your icon's path, you can use your custom-designed icons, or get them from this awesome website: https://materialdesignicons.com/.

I also use Svgus app to manage my icons sets.

// icons.json
{
  "heart": "M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
}

// AppIcon.vue
<template>
  <svg
    class="icon"
    style="width:24px;height:24px"
    viewBox="0 0 24 24"
  >
    <path :d="path" />
  </svg>
</template>

<script>
import icons from './icons.json';

export default {
  name: 'AppIcon',
  props: {
    name: String,
  },
  computed: {
    path() {
      return icons[this.name];
    },
  },
};
</script>

You can also use the npm package @mdi/js, to easily import icons' path, instead of copying and pasting it.

// icons.js
import { mdiHeart } from '@mdi/js';

export default {
  heart: mdiHeart
};

Now we can use our icon-component easily across the app

<app-icon name="heart" />

Styling

To use our icons we should able to resize it and change its color easily.
SVGs use width/height properties to control its size, and fill/stroke properties to control its colors. Unlike font-icons which use font-size and color to control the icon visuals.
Let's suppose you are using bootstrap as your main components library. If you added an SVG icon inside a button before the text, you will find it's very challenging to set the icon size and colors, without explicitly setting the icon's fill in normal status and hover status and size to much the button size.

We will map the properties of the icon to be controlled using font-size and color. Now when the element font-size changes the icon will follow its size. And by following when the button's color changes the icons will too.
🧙‍♂️ Let's use this magical snippet to achieve this:

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

As you can see now, the icon's size will depend on the element's font-size. And luckily for us, the currentColor value is here to save our day, and also it's supported in all browsers (even IE 9 😲).

Let's refactor our component, to make our icon flexible enough, and also accepts color status and different sizing.

I useed 1.2em instead of 1em as the default value. This will give a better visual harmony

// AppIcon.vue
<template>
  <svg
    viewBox="0 0 24 24"
    class="icon"
    :class="styleClasses"
  >
    <path :d="path" />
  </svg>
</template>

<script>
import icons from "./icons.json";

export default {
  name: 'AppIcon',
  props: {
    name: String,
    size: String,
    color: String,
  },
  computed: {
    path() {
      return icons[this.name];
    },
    styleClasses() {
      return [this.size, this.color].map(val => val && `is-${val}`);
    },
  },
};
</script>

<style>
/* default */
.icon {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
}

/* sizes */
.icon.is-large {
  width: 2em;
  height: 2em;
}
.icon.is-medium {
  width: 1.6em;
  height: 1.6em;
}
.icon.is-normal {
  width: 1.2em;
  height: 1.2em;
}
.icon.is-small {
  width: 1em;
  height: 1em;
}
.icon.is-tiny {
  width: 0.8em;
  height: 0.8em;
}

/* colors */
.icon.is-primary,
.icon.is-blue {
  fill: #2196F3
}
.icon.is-success,
.icon.is-green {
  fill: #4CAF50
}
.icon.is-danger,
.icon.is-red  {
  fill: #F44336
}
.icon.is-warning,
.icon.is-orange {
  fill: #FF9800
}
</style>

Performance

The AppIcon component we created earlier is relatively simple. It doesn’t manage any state, watch any state passed to it, and it has no lifecycle methods. It can be perfectly refactored into a functional-component. Since functional components are usually much faster than normal components, this will boost our app performance, especially if we are using many icons.

template-based functional components, introduced in Vue 2.5.0+.

<template functional>
  <svg
    viewBox="0 0 24 24"
    class="icon"
    :class="$options.methods.getStyleClasses(props)"
  >
    <path :d="$options.methods.getPath(props)" />
  </svg>
</template>

<script>
import icons from "./icons";

export default {
  name: "AppIcon",
  props: {
    name: String,
    size: String,
    color: String,
  },
  methods: {
    getPath(props) {
      return icons[props.name];
    },
    getStyleClasses(props) {
      return [props.size, props.color].map(val => val && `is-${val}`);
    },
  },
};
</script>

The downside of using functional components is it requires you to explicitly add attributes and events-listener to the root element, to make it behave as a normal component.

<template functional>
  <svg
    viewBox="0 0 24 24"
    class="icon"
    :class="$options.methods.getStyleClasses($options)"
    v-bind="data.attrs"
    v-on="listeners"
  >
    <path :d="$options.methods.getPath($options)" />
  </svg>
</template>

Compare after refactor component

Accessibility

The last piece in our puzzle is to make our icons accessible, for screen-readers and every user for our app.
To achieve this, we will add a title element inside our icon with the icon name, and add aria-role, you can also add a description for a long icon description.

<template functional>
  <svg
    viewBox="0 0 24 24"
    class="icon"
    :class="$options.methods.getStyleClasses(props)"
    v-bind="data.attrs"
    v-on="listeners"
  >
    <title>{{ props.title || props.name }}</title>
    <desc v-if="props.desc">{{ props.desc }}</desc>
    <path :d="$options.methods.getPath(props)" />
  </svg>
</template>

<script>
import icons from './icons.json';

export default {
  name: "AppIcon",
  props: {
    name: String,
    size: String,
    color: String,
    title: String,
    desc: String,
  },
  methods: {
    getPath(props) {
      return icons[props.name];
    },
    getStyleClasses(props) {
      return [props.size, props.color].map(val => val && `is-${val}`);
    },
  },
};
</script>

AppIcon component after accessibility support

Consolation

We have reviewed how we can easily integrate SVG icons with our Vue apps.
You can find the final component in this repo.

ismail9k / use-svg

SVG icons components

Thanks for reading 😄😄

DEV Community: Abdelrahman Ismail

Fixing Claude’s Image Problem — Because I Can Fix Her

What’s Really Happening Here

Step 1: Get Your Gemini API Key

Step 2: Plug Gemini into Claude (MCP Setup)

Open Claude Desktop:

Add this:

Step 3: When Things Break (Because They Might)

What worked for me

Step 4: Test It

💡 Pro tip

Final Thoughts

📚 Resources

Once Upon a Time, Writing Code Was Fun

The AI Acceleration Paradox

The Death of Flow

Typing Used to Be Joyful

The Ownership Gap in Production

I’m Not Complaining — I’m Observing

So What Do I Think?

You Are Using TailwindCSS Wrong

A Short History of Styling on the Web

The Rise of Component Abstraction

The Real Problem Utility CSS Tried to Solve

So Why the Backlash Against TailwindCSS?

How I Would Personally Use TailwindCSS

Examples

A Problematic Use of TailwindCSS

A Cleaner Alternative: Using Tailwind's CSS Variables

Adding Modifiers

A Reasonable Use of TailwindCSS Utility Classes

Addressing Common Counter-Arguments

Where TailwindCSS Actually Makes Sense

Final Thoughts

The SEO Game Has Changed

If ChatGPT Can't Find You, Do You Even Exist?

TL;DR

SEO vs. GEO: What's the Difference?

Why This Matters

How to Optimize for Generative Engines

1. Focus on User Intent, Not Just Keywords

2. Use Multiple Content Formats

3. Track Mentions by AI, Not Just Backlinks

Final Thought

The Truth About Vibe Coding: From Zero Swift to App Store

How It All Started

Choosing the Tools

Vibe Coding in Action

Pushing to Production

Can Anyone Build an App with AI?

The Real Mindset for Vibe Coding

Final Thoughts

How to Become a 9k Developer

1. Master the Fundamentals

2. Focus on Impact, Not Output

3. Practice Relentlessly (and Intelligently)

4. Embrace AI as a Force Multiplier

5. Surround Yourself with Excellence

6. Stay Ahead of the Meta

7. Stay Humble, Stay Hungry

8. Take Care of the Player, Not Just the Game

9. It is a Mindset

Final Words

The CSS I Knew Has Evolved: Advanced Features, New Identity

Centering a Dev

Centering Vertically and Horizontally

Vertically Centering a Block-Level Element

Nested Selectors

:is() and :where()

Container Queries

The clamp() Function

Honorable Mention: Modern Color Features

Resources:

Tailwind CSS: Why It's Not My Cup of Tea

TLDR;

Maintainability

Readability

Separation of Concerns

Utility Classes

Cascading and Modifiers

`:is()` and `:where()`