DEV Community: Youssef Abdulaziz

🔥𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗮𝗻 𝗻𝟴𝗻 𝗖𝗹𝗼𝗻𝗲 𝗶𝗻 𝗩𝘂𝗲

Youssef Abdulaziz — Sat, 30 Aug 2025 13:22:51 +0000

Ever thought about how tools like hashtag#𝗻𝟴𝗻 or hashtag#𝗭𝗮𝗽𝗶𝗲𝗿 build their visual automation editors?

Turns out, with hashtag#Vue it’s easier than you’d think.

✨ Features:
• Custom styled nodes (dark mode, Tailwind)
• Connectable edges
• Background grid

This is just the first step toward building your own workflow editor. Add draggable node creation, triggers, and persistence — and you’re halfway to making your own n8n clone in Vue 🚀

Here’s a minimal flow editor using 𝘃𝘂𝗲–𝗳𝗹𝗼𝘄 :

<script setup>
import { ref } from "vue"
import { VueFlow, useVueFlow } from "@vue-flow/core"
import { Background } from '@vue-flow/background'
import "@vue-flow/core/dist/style.css"

const nodes = ref([
    {
      id: '1',
      type: 'input',
      data: { label: 'Node 1' },
      position: { x: 250, y: 0 },
      class: "p-3 text-slate-50 bg-[#342c3e] rounded-md shadow-md",
    },
    {
      id: '2',
      type: 'output',
      data: { label: 'Node 2' },
      position: { x: 100, y: 100 },
      class: "p-3 text-slate-50 bg-[#342c3e] rounded-md shadow-md",
    },
    {
      id: '3',
      data: { label: 'Node 3' },
      position: { x: 400, y: 100 },
      class: "p-3 text-slate-50 bg-[#342c3e] rounded-md shadow-md",
    }
  ])

  const edges = ref([
    { id: 'e1-2', source: '1', target: '2', animated: true },

    { id: 'e1-3',source: '1',target: '3',label: 'edge with text' },
  ])

</script>

<template>
  <div class="w-[500px] h-[500px] mx-auto">
    <div class="w-[500px] h-[500px] rounded-2xl overflow-hidden">

                        <!-- Flow Canvas -->
      <VueFlow class="basic-flow dark" :nodes="nodes" :edges="edges">

        <Background pattern-color="#7e7e7e" :gap="16" />

      </VueFlow>

    </div>
  </div>
</template>

Learned Fundamentals of Frontend Architecture

Youssef Abdulaziz — Sat, 23 Aug 2025 17:12:04 +0000

Just wrapped up the Fundamentals of Frontend Architecture course on frontendatscale.com by Maxi Ferreira —and honestly, it flipped the way I think about building frontends.

Frontend isn’t just components and APIs—it’s architecture:
🔹 How do you make a codebase scalable as the team grows?
🔹 How do you balance DX vs performance?
🔹 How do you make sure your design decisions last longer than the sprint?

Some of my favorite insights:
✨ Thinking in architectural drivers (what really shapes your system)
✨ Using the C4 model to visualize architecture clearly
✨ Riskstorming before coding—spotting problems early
✨ Documenting with ADRs so decisions don’t get lost in Slack threads

The best part? It made me look at frontend less like “features shipping” and more like designing systems that can evolve.
If you’re a frontend dev aiming to level up to architect thinking, this is 100% worth it. 🔥

🧠 How defineModel Works in Vue 3 — A Modern Deep Dive

Youssef Abdulaziz — Thu, 21 Aug 2025 15:25:33 +0000

Vue 3.4 introduced a shiny new compiler macro called defineModel, and it’s one of those features that makes you wonder: why did we ever write props + emits manually?

If you’ve ever built components that need v-model, you know the drill: props for modelValue, an emit for update:modelValue, and a bit of boilerplate to wire them together. defineModel takes all of that and turns it into a single, clean line of code.

Let’s peel back the curtain and see what’s really happening.

✨ The Simple Example

Here’s a minimal parent + child setup:

App.vue

<script setup>
   import { ref } from 'vue'
   import TextInput from './TextInput.vue'

   const textModel = ref('')
</script>

<template>
  <TextInput v-model="textModel" />
  <p>Name: {{ textModel }}</p>
</template>

TextInput.vue

<script setup>
   const modelValue = defineModel()
</script>

<template>
    <input v-model="modelValue" />
</template>

That’s it. No props. No emits. Just defineModel.

🛠️ What Vue Compiles It Into

When you hit save, Vue’s compiler does the heavy lifting. defineModel() gets expanded into a useModel call plus generated props + emits.

TextInput.vue (source) | Compiled (JS)

<script setup>
   const modelValue = defineModel()
</script>

<template>
  <input v-model="modelValue" />
</template>

import { useModel as _useModel } from 'vue'

const __sfc__ = {
  __name: 'TextInput',
  props: {
    "modelValue": {},
    "modelModifiers": {},
  },
  emits: ["update:modelValue"],
  setup(__props, { expose: __expose }) {
    __expose();

    // 👇 defineModel turns into useModel
    const modelValue = _useModel(__props, "modelValue")

    return { modelValue }
  }
}

function render(_ctx, _cache, $props, $setup) {
  return _withDirectives(
    _openBlock(),
    _createElementBlock("input", {
      "onUpdate:modelValue": $event => ($setup.modelValue = $event)
    }, null, 512),
    [[_vModelText, $setup.modelValue]]
  )
}

🔍 Breaking It Down

So what exactly is happening here?

⚡ Props & Emits are generated for you:

   props: { modelValue: {}, modelModifiers: {} },
   emits: ["update:modelValue"]

⚡ defineModel turns into useModel:

   const modelValue = useModel(__props, "modelValue")

This creates a local ref that:

Reads from props.modelValue
Emits update:modelValue when assigned to

⚡ Template reactivity stays clean: The v-model="modelValue" in your template is just sugar. Under the hood, it compiles into:

   onUpdate:modelValue: $event => ($setup.modelValue = $event)

Which calls the setter from useModel and triggers the parent update.

🚀 Why This Matters

Less boilerplate → No more writing props + emits manually.
Cleaner mental model → Treat your model like a local ref.
Type safety → Works with TypeScript generics (defineModel<string>()).
Multiple models → Add more with defineModel('name'), defineModel('content').

🧠 The Mental Model

Think of defineModel like this:

Parent v-model  ⇄  Child’s local ref (via useModel)

The child sees a normal reactive ref (modelValue).
The parent gets updates automatically, without extra emits.
Both stay in sync.

💡 Final Thoughts

Vue’s defineModel is one of those quality-of-life upgrades that make your codebase cleaner and your brain lighter. Instead of wiring up props and emits by hand, you just declare a reactive ref, and Vue does the rest.

It’s reactivity the way it should feel: local when you need it, two-way when you want it.

🚀 How I Conquer New Tools, Frameworks & Software Like a Pro ⚔️💻

Youssef Abdulaziz — Fri, 06 Jun 2025 20:58:17 +0000

As developers, we're constantly bombarded with shiny new frameworks, libraries, tools, and trends. One week it's all about Vue, the next it's Astro, and before you know it, everyone's raving about tRPC or Bun.

📦 Staying up-to-date can feel like chasing a speeding train... but over time, I've developed a battle-tested strategy to learn new tech efficiently without burning out. Whether it's a hot new JS framework or a powerful dev tool, this is how I level up quickly and actually enjoy the ride.

🧭 1. Skim the Docs — Understand the "Why"

Before I touch a line of code, I scan the official documentation. I don’t go too deep yet. I'm looking for:

What problem does this solve? 🤔
How is it different from what I already know?

Example: With Vue, I immediately saw how it tackled reactivity and templating in a super clean, elegant way. I was hooked 💚

Docs are great for getting the philosophy and mental model of the tool.

🎯 2. Try the Interactive Tutorial (If Available)

If there’s an interactive playground or guided tutorial (looking at you Vue, Angular, Svelte 🫶), I’m in. These are gold:

No setup, no stress
Learn by doing 🛠️
Immediate feedback

This step gives me that quick “aha!” moment 💡 that motivates me to keep going.

🎬 3. Watch a Crash Course (Shoutout Traversy Media! 🙌)

Next, I jump into YouTube. And when I say YouTube, I really mean Traversy Media. Brad's crash courses are 🔥

"React Crash Course 2024 - Traversy Media"
"Tailwind CSS in 30 Minutes - Traversy Media"

They’re fast-paced, practical, and cover the essentials:

Project structure 🏗️
Syntax and conventions
Real-world examples

Watching a good crash course feels like upgrading my brain in 45 minutes ⏱️💡

🧪 4. Build a Tiny Project (or Two)

Time to get my hands dirty.

I build something small:

A weather app ☀️❄️
A notes app 📝
A to-do list ✅

It doesn’t have to be perfect—it just needs to exist. This is where the real learning kicks in:

I run into bugs 🐞
I read docs deeper 📘
I get comfortable with the tooling 🛠️

📚 5. Go Deep — Full Course, Full Docs, All-In Mode

Now I’m ready to commit.

This is where I:

Take a 30h+ Udemy course 🧠🎓
Read the entire documentation, start to finish 📘✅
Read articles, Medium posts, and Dev.to tips 📝

This step transforms me from a hobbyist into someone who could use the tool in production with confidence 💪

👥 Bonus: Join the Community

Don't sleep on community learning!

Join Discord servers 🗨️
Follow Reddit threads 🧵

There’s so much value in seeing how others use the same tool, solve weird bugs, or share tips from the trenches 🚧

💡 Final Thoughts

There’s no one-size-fits-all approach to learning something new in tech—but this method has saved me time, stress, and a ton of rabbit holes 🐇🕳️

TL;DR:

🧭 Skim the docs

⚡ Do interactive tutorials

🎬 Watch a crash course (Traversy FTW!)

🛠️ Build small projects

📚 Go deep with courses & docs

Learning something new should feel exciting—not exhausting. So keep shipping, stay curious, and don’t forget to have fun along the way! 🧠✨

Happy learning! 🚀

Building Headless Components in Vue — The Right Way

Youssef Abdulaziz — Fri, 30 May 2025 17:04:20 +0000

Reusable UI components often break once you change the design. Solution? Go headless.

A headless component:

"Exposes data & logic (but no styling)"
"Lets you plug in any markup/UX you want"
"Keeps behavior testable and DRY"

Example: a headless dropdown:

const useDropdown = () => {
  const isOpen = ref(false)
  const toggle = () => isOpen.value = !isOpen.value
  return { isOpen, toggle }
}

<template>
  <button @click="toggle">Toggle</button>
  <div v-if="isOpen"><slot /></div>
</template>

Benefits:

"📦 Easy to theme"
"✅ Easier snapshot testing"
"🧠 Decouples logic from layout"

This is what libraries like Radix and Headless UI follow. You can build your own system for any internal tools.

The “Good Enough” Refactor Rule for Fast Teams

Youssef Abdulaziz — Fri, 30 May 2025 15:46:57 +0000

I used to chase perfection — refactor deeply, clean every file, remove every legacy prop.

But on fast-moving teams, that’s a luxury.

Now I follow a rule I call: “Clean What You Touch.”

That means:

Only refactor the parts you already changed in a PR

Leave clear TODOs in comments, not Jira

Propose full refactors during quiet sprints, not delivery weeks

This keeps tech debt manageable without slowing features.

It also shows your team you can balance speed and craftsmanship — a signal of seniority that doesn’t need a title.

The Silent Frontend Bottleneck: Communication Between Modules

Youssef Abdulaziz — Fri, 30 May 2025 15:38:05 +0000

Everyone talks about optimizing load time, but here’s an underrated bottleneck: module communication.

Vue’s Composition API gives you tools like provide/inject, stores, and custom composables… but when should you use which?

My go-to rules:

If two sibling components talk → shared composable or scoped store

If parent provides data → props or provide/inject

If data needs to survive route changes → Pinia/global store

What kills DX is mixing strategies. I once saw a component that injected data from one parent, pulled another from global store, and passed props to a nested modal — impossible to test.

Typescript enums: not magic, just objects⚡🧠

Youssef Abdulaziz — Sun, 01 Dec 2024 05:35:19 +0000

It was my usual 4am 🕓 psycho-dev 🧠 study session, and the topic at hand was TypeScript ⚡. After watching some (1 to 1M) 📺 5-minute videos on YouTube and interrogating ChatGPT 🤖 for a couple of minutes ⏱️, finally... I understood how TypeScript enums translate to JavaScript! 🎉🚀.

For those who dont know what enums are:
In TypeScript, enums (short for enumerations) are like a toolbox 🧰 of named constants. They help you group related values and assign them easy-to-remember names, making your code more readable and error-resistant 🚀.

🛠️ Types of Enums:

Numeric Enums 🔢 => Each member gets a number (0, 1, 2…).

enum Direction {
  Up,     // 0
  Down,   // 1
  Left,   // 2
  Right   // 3
}

String Enums 🔤 => Each member has a string value, making debugging easier.

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT"
}

Heterogeneous(mixed) Enums 🎲 => Mix numeric and string values (rarely used but possible).

TS enums to JS objects 🔢⇨📦

It's near 5:30am now and I finally get it! I finally understand how this:

enum Direction {
  Up,     // 0
  Down,   // 1
  Left,   // 2
  Right   // 3
}

makes this Js code possible:

console.log(Direction["Down"]) // 1

First, lets see how tsc (typescript compiler) compiles the enum:

From what I see, the compiler made an IFFE (famously known as iffy) function which is "Immediately Invoked Function Expression". I..FF..E it's in the name. From its name, the function is immediately executed.

The compiler also initialized a variable name Direction which is undefined for the moment.

Now lets look inside. The anonymous function inside the iffy has one paramater which is treated as an object inside the function, the object that resembels the enum.

That parameter is fed to the function as an argument for the iffy. If its null or undefined (which is our case) it will be assigned an empty object

Now to juicy parts....

Direction[Direction["Up"] = 0] = "Up";

Javascript executes the most inner square brackets to the outer brackets,
so Direction["Up"] = 0 is executed first and an entry "Up" is added to the Direction object

{
    Up: 0,
}

But the outer brackets also expects a value ( 0 in our case)

For the surprise of everyone (even javascript 😒), the assignment operation returns the assigned value

console.log(x=546) // returns 546. Try it in browser console yourself

so the inner bracket assigns 0 to "Up" and also returns 0 for the outer bracket to create another entry in Direction Object.

Long story short, this line creates Bidirectional Mapping(only with numeric enums) inside the Direction object.

//step 1
Direction[Direction["Up"] = 0] = "Up";

/*

Direction ={
Up:0
}

*/

//step 2
Direction[0] = "Up";

/*

Direction ={
Up:0,
0:"Up",
}

*/

After line #1 of the function, this is our Direction object

Direction = {
    Up: 0,
    0: "Up",
}

Now u know the drill. After the function completes execution, Direction looks like this

{
    Up: 0,
    0: "Up",

    Down: 1,
    1: "Down",

    Left: 2,
    2: "Left",

    Right: 3,
    3: "Right",
}

It's 6:45am , I gotta get to bed. Do NOT wake me up before 9. I absolutely don't wanna hear your comments or questions, but I do expect a follow, a like and a share maybe.

VueJs Reactivity... And How does it work

Youssef Abdulaziz — Sat, 30 Jul 2022 00:53:00 +0000

One of the main features of any modern JavaScript framework is reactivity. in this article you're gonna understand how Vue.Js tackles this by :

Understanding the problem.
Vue's solution to that problem.

The Problem

You're coding using vanilla JavaScript and the code calculates the total price of some products and logs it...

Now our price has gone up to 20 per product, let's log the price again....
to our surprise it's still 10 but why?! that's supposed to be 40, right? WRONG.

Take a good look at the code again, the calculation only happens once. We never told JavaScript to track any changes nor we told it that the total price calculation is meant to update according to changes, and here's where The Reactive Vue really shines...

Vue's solution

The approach is that we want to be able to store the critical value in some sort and be able to track it and trigger the effect when the value changes.

The calculation is wrapped in a function called "effect" and stored for later use when our value(price) changes. For that to happen, there are 3 main operations(functions) to run:

track() -> to actually save our code
effect() -> the actual behavior/calculation
trigger() -> to run the effect/s

Brainstorming...

Can there be multiple effects? How does Vue handle that?
What happens when we want to track multiple properties?
What if we track objects...?

I'll answer all that in the upcoming post as well as your questions. Feel free to ask me about anything, it's ok we're all learning here.

Leave a ♥️ for the post if it was useful to reach more devs 🧑‍💻🧑‍💻...
Follow me for more related content...

recourses:
https://www.youtube.com/c/VueMastery

Why React but not Vue!!

Youssef Abdulaziz — Fri, 15 Jul 2022 18:04:26 +0000

I am a Vue developer and recently started to learn React.It's the first time I write code while being angry at it 😂😂, I wonder why would someone choose the scramble(in my opinion) of React over the convenience and organisation of Vue.

I want to hear your opinion about this if you have experience in React or vue or both of them.

Hardstuck Fresh Graduate

Youssef Abdulaziz — Fri, 27 May 2022 11:16:19 +0000

I'm 1 month away from graduating with a BSc in software engineering. I've always seen myself as a freelance developer but that is kinda hard to start with and even if I wanted to work with a company, their demands will be 1yr experience at minimum.

Although I don't have that much of professional work experience, I`ve done a few projects that verifies my skills.

The question is how can I start my freelance career(or corporate career) giving that internship opportunities hardly exist in my country (Egypt) and nearly everyone want seniors with 5+ yrs. It`s really disappointing.

How many Vue stores do I need?

Youssef Abdulaziz — Fri, 06 May 2022 18:50:28 +0000

I'm making an e-commerce like app using VueJs and I'm learning state management with Pinia.

I`m kinda confused with how many stores do I need to integrate in my app or how many pieces of state do I need to manage. I wanna know how you determine the number of stores as an experienced developer