DEV Community: Yalda Khoshpey

👋 Your README deserves better.

Yalda Khoshpey — Wed, 03 Jun 2026 14:10:14 +0000

Be honest.

How many times have you opened a GitHub profile and had no idea what that developer actually works with?

Repositories everywhere.
Lots of code.
But no quick overview.

A while ago, my sister and I ran into the same problem while working on our GitHub profiles.

So we decided to build a small open-source tool to solve it.

🚀 GitHub Languages Card

GitHub Languages Card transforms your GitHub profile into a clean visual language card that highlights the technologies you actually use.

No clutter.

No unnecessary statistics.

Just a simple visual representation of your stack.

🎯 Live Demo

🚀 See It in Action

🎨 Themes

One of the most fun parts of building this project was designing different themes.

Whether you prefer something minimal, colorful, or hacker-inspired, there's a theme for you.

My personal favorites:

🔥 dark-neon
💻 hacker
💖 pink

Because developer tools should have personality too.

💡 Why We Built It

Most GitHub profiles contain a lot of information, but very little of it is immediately visible.

We wanted a way to answer a simple question:

«What does this developer actually code in?»

Instead of forcing visitors to browse through repositories, GitHub Languages Card provides an instant overview.

⚙️ What It Does

The tool:

Fetches your public repositories
Analyzes the languages you use
Calculates language distribution
Generates a beautiful card ready to embed in your README
Supports multiple themes and customization options

All you need is your GitHub username.

🚀 Why You Might Like It

If your README feels:

Empty
Outdated
Generic
Hard to personalize

This tool can improve it in seconds.

Simply generate your card and add it to your profile.

🔥 Real Use Case

Imagine a recruiter, contributor, or fellow developer visiting your GitHub profile.

Instead of digging through repositories to understand your stack, they instantly see the technologies you use most.

It's a small detail, but it makes your profile more informative and visually appealing.

🧠 What We Learned Building It

This project was a great opportunity to learn more about:

Working with the GitHub API
Processing real-world repository data
Building developer-focused tools
Designing reusable open-source projects

It also reminded us that simple ideas can create meaningful improvements.

📦 Repository

Interested in the implementation?

👉 View the source code on GitHub

If you find it useful:

⭐ Star it
🍴 Fork it
🚀 Add it to your README

❤️ Final Thoughts

Not every project needs to be a massive application.

Sometimes the best projects are small tools that solve a real problem.

And if your README still looks a little too plain...

Maybe it's time to give it an upgrade.

😭 Your README is still looking like a ransom note? Go fix that right now. 🚨 Friendly reminder: your README is the outfit your project wears to the internet. Make it look good. 😎 This post might help.

Yalda Khoshpey — Wed, 03 Jun 2026 13:15:02 +0000

Vida Khoshpey

Jun 2

Make Your GitHub README Look Better with This Simple Languages Card 🥰

#opensource #github #webdev #beginners

2 min read

“What I Learned Building Real Projects with Node.js & Next.js in 2026

Yalda Khoshpey — Sun, 08 Feb 2026 10:46:53 +0000

I’ve been playing with Node.js and Next.js for a while now, and here’s the thing: building apps isn’t just about writing code it’s about making your life easier and your users happy.
Here are a few things I’ve learned the hard way:
Serverless isn’t scary. Using Next.js API routes changed the way I think about backend. Sometimes, less setup = more productivity.
Performance wins everything. Even small tweaks in Node.js‌ like caching responses or optimizing middleware can make a huge difference.
The right tools save sanity. Using SWR, React Query, or even plain fetch strategically made my apps faster and my dev workflow smoother.
Keep it readable. I’ve seen too many projects with spaghetti code. Next.js + Node.js lets you structure things neatly use it.
Experiment constantly. New features come every year. Don’t be afraid to try ISR, Edge Middleware, or new Node APIs.
Building web apps in 2026 is exciting. And if you focus on clarity, performance, and learning, Node.js + Next.js can make you look like a magician in front of your users. ✨
What’s the biggest lesson you’ve learned building apps this year? Let’s swap stories! 👇

Building a 3D Virtual Portfolio Room🏠

Yalda Khoshpey — Mon, 24 Nov 2025 14:54:51 +0000

Building a 3D Interactive Portfolio Room — Looking for Collaborators!

Hi everyone — I’d like to share a creative side project that I’ve been working on:

a 3D interactive room portfolio, built purely with HTML, CSS, and JavaScript, where certificates hang on the walls like art in a gallery.

👉 Repo: Repo

👉 Live Demo: Live Demo

🎨 What Is This Project?

It’s an experimental portfolio template (not a finished product) — you can walk around a room, rotate your view, zoom in and out, and click on certificates to view them in full.
Everything is done using CSS 3D transforms, so there’s no heavy graphics engine — just creative use of basic web technologies.
Includes ambient sound effects, smooth animations (like an opening door), and keyboard interactions (+/- to zoom, Enter to open door, 0 to reset view).
Fully responsive, working on both desktop and mobile.
Licensed under MIT, so it’s completely open for collaboration.

🌱 Why I Built It

I wanted a unique way to present certificates — something immersive instead of a typical flat layout.
It began as a mock portfolio, but I plan to expand it into something more complete and practical.
It’s also a fun area to experiment with 3D on the web using nothing more than CSS + JS — no WebGL or Three.js.

🧩 What’s Still Missing (and Where I Need Help)

Since this is currently a mock portfolio, several parts feel unfinished. Here’s where collaboration would be amazing:

Dynamic content: certificates are static for now; a JSON-driven setup would make it easier to update.
CMS integration: ideally users could manage certificates and content through an admin panel.
Performance improvements: heavy 3D transforms can lag on low-end devices.
Design polish: smoother UX, improved interactions, better mobile layout.
Room extensibility: more room types, more layouts, custom themes.
Accessibility: better screen-reader support, ARIA roles, improved keyboard flow.

🤝 Why You Should Join Me

If you enjoy creative UI, web design, or 3D experiments, this project can be a fun playground:

Hands-on experience with CSS 3D transforms and animation.
A chance to collaborate on an open-source project with real potential.
A unique opportunity to rethink portfolio presentation visually.
Meaningful GitHub contributions through new features, refactors, or optimizations.

🚀 How to Contribute

Here are ways you can get involved:

Fork the repo and explore the code.
Open issues for bugs, ideas, or needed improvements.
Submit pull requests — from dynamic loading to accessibility updates.
UI/UX design contributions: mockups, themes, layouts, visual ideas.
General feedback: try the live demo and tell me what feels off or what could be better.

🔭 Next Steps (My Vision)

Make the room fully data-driven (JSON or API).
Add an admin panel for managing certificates.
Offer multiple room themes (gallery, studio, minimalist, etc.).
Smooth out animations and interactions for a more polished experience.
Turn the project into a reusable portfolio template anyone can adopt.

If you made it this far — thank you! 🙏

I’d be excited to team up with developers, designers, or anyone curious to help grow this project.

Drop a comment, open an issue, or send a PR.

Let’s turn this mock portfolio into a fully polished, collaborative web experience.

The Psychology of Code: Why Users Fall in Love with Certain UIs😃

Yalda Khoshpey — Thu, 30 Oct 2025 14:01:31 +0000

Ever wonder why some applications feel like magic while others just... don't? It's not just about fancy animations or beautiful colors. There's actual psychology behind why users emotionally connect with certain interfaces.

The Love at First Sight Effect

// It's not just about clean code - it's about emotional impact
const firstImpression = () => {
  const loadingTime = getLoadingTime(); // Should be < 3 seconds
  const visualHierarchy = establishVisualHierarchy(); // Guides user attention
  const emotionalTrigger = usePositiveEmotions(); // Colors, images, micro-interactions

  return loadingTime < 3000 && visualHierarchy && emotionalTrigger;
};

Psychological Principles in Action

Hick's Law in Navigation

Less choices = Faster decisions

/* Good: Progressive disclosure */
.primary-nav {
  display: flex;
  gap: var(--space-md);
}

.secondary-nav {
  display: none; /* Revealed when needed */
}

.primary-nav:hover + .secondary-nav {
  display: flex; /* Contextual appearance */
}

The Zeigarnik Effect

Users remember incomplete tasks

// Progress indicators create psychological engagement
const OnboardingFlow = () => {
  const [currentStep, setCurrentStep] = useState(0);
  const totalSteps = 5;

  return (
    <div>
      <ProgressBar 
        current={currentStep} 
        total={totalSteps} 
        // Creates psychological urge to complete
      />
      {/* Step content */}
    </div>
  );
};

Case Study: Why Everyone Loves These Apps

✨ Duolingo's Gamification

· Variable rewards (unexpected bonuses)
· Progress visualization (streaks, levels)
· Loss aversion (don't break the streak!)

✨ Notion's Empowerment

· Sense of control (customizable everything)
· Cognitive ease (familiar metaphors)
· Achievement (checkboxes, databases)

✨ Linear's Flow State

· Reduced cognitive load (minimal interface)
· Instant feedback (quick actions)
· Predictable patterns (muscle memory)

Practical Psychological Patterns You Can Implement Today

The "IKEA Effect" - Love Through Labor

const CustomizableDashboard = () => {
  const [userCustomizations, setUserCustomizations] = useState({});

  // Users value what they help create
  return (
    <DraggableWidgets 
      onRearrange={(newLayout) => {
        setUserCustomizations(newLayout);
        // Users feel ownership = emotional attachment
      }}
    />
  );
};

Social Proof - The Bandwagon Effect

const SocialValidation = () => (
  <div className="social-proof">
    <span>📊 Join 15,238 developers who love this tool</span>
    <RecentActivity 
      users={['Sarah', 'Mike', 'Alex']} 
      action="just customized their workspace"
    />
  </div>
);

Scarcity & Urgency

const LimitedFeature = ({ availableSpots }) => (
  <div className={`feature-card ${availableSpots < 10 ? 'urgent' : ''}`}>
    <h3>Early Access Feature</h3>
    <p>Only {availableSpots} spots remaining</p>
    {/* Triggers FOMO (Fear Of Missing Out) */}
  </div>
);

The Dark Patterns to Avoid 🚫

// Don't be this person
const darkPatterns = {
  forcedContinuity: true, // Hard to cancel subscriptions
  confirmShaming: true,   // "No thanks, I hate saving money"
  hiddenCosts: true,      // Surprise fees at checkout
  misdirection: true      // Tricking users into actions
};

Measuring Emotional Response

// Beyond traditional analytics
const measureUserHappiness = () => {
  const metrics = {
    timeToSmile: measureFirstPositiveReaction(),
    frustrationClicks: countRapidClicks(),
    returnFrequency: trackVoluntaryReturns(),
    featureAdoption: measureOrganicUsageGrowth()
  };

  return calculateHappinessScore(metrics);
};

Key Takeaways 🎯

Users don't buy features - they buy better versions of themselves
Emotional design > Perfect pixels
Psychological principles are your secret weapon
Test for emotional response, not just functionality

Your Turn!

What's the most emotionally engaging UI you've ever used? Share your examples and let's discuss what psychological principles they're leveraging!

Have you intentionally used psychology in your designs? I'd love to hear about your experiences in the comments below! 💬

help us with Django

Yalda Khoshpey — Thu, 23 Oct 2025 17:52:56 +0000

Vida Khoshpey

Oct 23 '25

🚀 Help Needed: Review & Deploy My Django Project (Ready-Aim-Learn)

#help #django #webdev #python

2 min read

From Tutorial Hell to Clarity: How I Knew I Was Leveling Up as a Developer🚀

Yalda Khoshpey — Thu, 23 Oct 2025 13:40:00 +0000

We’ve all been there: stuck in “tutorial hell,” copying code without fully understanding it, and feeling like an imposter. But there comes a point in every developer’s journey when things start to click. Here’s how I realized I was transitioning from a beginner to a proficient developer—and the signs that you might be, too.

You Focus on the "Why," Not Just the "How"

Early on, I’d ask, “How do I build this feature?” But as I grew, my questions shifted:

· Why is this architecture better?
· What are the trade-offs of this library?
· How will this code scale?

When you start thinking critically about decisions—not just following steps—you’re leveling up.

Debugging Feels Like Detective Work

I used to panic when I encountered bugs. Now, I get excited. Tracing errors, reading stack traces, and isolating issues became a puzzle to solve—not a nightmare to dread.

You Embrace the Unknown

As a beginner, I wanted clear answers. As a pro, I’m comfortable with ambiguity. Starting a new project without a tutorial? No problem. I’ve learned to research, experiment, and adapt.

You Care About Maintainability

I once wrote clever, complex code to show off. Now, I strive for simplicity and readability. Clean code isn’t just a buzzword—it’s a commitment to your future self and your team.

You Read Code More Than You Write It

I spend hours reviewing docs, exploring source code, and studying pull requests. Understanding existing code is just as important as writing new code.

You Take Ownership of Mistakes

Blaming external factors is easy. Admitting, “I broke this, and I’ll fix it,” is a sign of maturity. Growth happens when you take responsibility.

Final Thoughts

Becoming a “pro” isn’t about knowing everything—it’s about building the confidence to learn, adapt, and solve problems efficiently. The journey never truly ends, and that’s what makes it exciting.

What was your “aha!” moment? Share your story in the comments below😃❤️‍🔥

These 5 Coding Habits Separate a Good Developer from a Great One

Yalda Khoshpey — Fri, 17 Oct 2025 12:29:49 +0000

Over the years,working across different teams, I've noticed that great developers—beyond mastering frameworks and languages—have these habits ingrained in their DNA:

🧠 Thinking 'Why' Before 'How' They take the time to understand why a feature is being built before writing a single line of code. This understanding profoundly influences the architecture and technical choices.
📚 Documenting as Part of the Coding Process Not just for others, but for their "future self"! A simple comment, a clear README, or API docs can save the entire team hours of frustration.
🔍Intentional Code Reviews When reviewing others' code, they're not just looking for bugs. They're looking for clarity, simplicity, and cohesion with the overall architecture. Their critique is constructive, never personal.
⏱️ Time-Blocking for Refactoring They know the first solution isn't always the best one. They proactively block time in their calendar for refactoring and cleaning up code. It's an investment, not a waste of time.
🎯 Testing for Failure, Not Just Success Their unit tests don't just cover the happy path; they cover edge cases and failure states. They make it a non-negotiable habit.

What do you think? Which of these habits is the hardest to develop? Or what other habit would you add to this list? 👇

[Boost]

Yalda Khoshpey — Sun, 12 Oct 2025 13:38:09 +0000

3 Common Frontend Interview Questions🚀

Yalda Khoshpey ・ Oct 12 '25

#frontend #javascript #react #interview

3 Common Frontend Interview Questions🚀

Yalda Khoshpey — Sun, 12 Oct 2025 13:38:01 +0000

Hey developers! 👋

Today, let's break down three common frontend interview questions. The goal isn't to memorize answers, but to deeply understand the concepts behind these questions.

Let's dive in!

Question 1: JavaScript | Difference between `let`, `const`, and `var`

This classic question tests your understanding of Scope and Hoisting.

Short Answer:

var: Has Function Scope, can be redeclared. (Older, less recommended)
let: Has Block Scope, cannot be redeclared, but its value can be reassigned.
const: Has Block Scope, must be initialized during declaration, and its assignment cannot be changed (though the contents of objects/arrays can be modified).

Detailed Explanation with Code:

// Example with var (Function Scope)
function varExample() {
  if (true) {
    var name = "Ali";
  }
  console.log(name); // "Ali" - because var escapes the if block!
}
varExample();

// Example with let and const (Block Scope)
function letConstExample() {
  if (true) {
    let age = 30;
    const city = "Tehran";
    console.log(age); // 30
    console.log(city); // Tehran
  }
  // console.log(age); // Error! age is not defined here
  // console.log(city); // Error! city is not defined here
}
letConstExample();

// const with objects and arrays
const person = { name: "Sarah" };
person.name = "Mona"; // ✅ Allowed! We're modifying the content, not reassigning the constant.
// person = { name: "Mona" }; // ❌ Error! Cannot reassign the constant variable.

const numbers = [1, 2];
numbers.push(3); // ✅ Allowed
// numbers = [4, 5]; // ❌ Error!

Why this question is asked:
The interviewer wants to gauge your familiarity with modern ES6 concepts,memory management, and error prevention in code.

Question 2: React | Class Components vs. Hooks (like useState)

This question assesses your understanding of React's evolution and the rationale behind introducing Hooks.

Short Answer:
Hooks were introduced in React 16.8 to give functional components the ability to use state and lifecycle features.This led to reduced complexity, better reusability, and improved code readability.

Detailed Explanation with Code:

// Old way: Class Component
class OldCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

// Modern way: Functional Component with useState Hook
import { useState } from 'react';

function NewCounter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Advantages of using Hooks:

· Less and cleaner code: No need for constructor and this binding.
· Reusable logic: You can build your own custom hooks.
· No this confusion: Functional components don't have this.

Question 3: CSS | Explain different position values (relative, absolute, fixed, sticky)

This question tests your understanding of Layout and element positioning.

Short Answer:

· static: Default. Element flows in normal document order.
· relative: Positioned relative to its normal position.
· absolute: Positioned relative to nearest positioned ancestor (not static).
· fixed: Positioned relative to the viewport (stays on screen during scroll).
· sticky: Hybrid of relative and fixed. Acts relative until a scroll threshold, then acts fixed.

Detailed Explanation with Code (HTML/CSS):

<div class="container">
  <div class="box static">Static</div>
  <div class="box relative">Relative (top: 10px)</div>
  <div class="box absolute">Absolute (top: 50px)</div>
  <div class="box fixed">Fixed (bottom: 10px)</div>
  <div class="box sticky">Sticky (top: 0)</div>
</div>

.container {
  position: relative; /* Becomes the parent for absolute positioning */
  height: 2000px; /* To see fixed and sticky effects */
}

.box {
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
}

.static { position: static; }
.relative { position: relative; top: 10px; left: 20px; }
.absolute { position: absolute; top: 50px; right: 0; }
.fixed { position: fixed; bottom: 10px; right: 10px; }
.sticky { position: sticky; top: 0; }

Why this question is asked:
Because mastering element positioning is essential for building any complex layout.

Conclusion

Learning these fundamental concepts is essential not just for interviews, but for writing clean, maintainable code. Always ask "why" behind the concepts.

Question for you: What's the most interesting interview question you've been asked that taught you something new? Share in the comments! 👇

[Boost]

Yalda Khoshpey — Tue, 07 Oct 2025 16:00:25 +0000

🤖 The AI Revolution Is Here And It's Changing Everything

Yalda Khoshpey ・ Oct 7 '25

#programming #ai #discuss

🤖 The AI Revolution Is Here And It's Changing Everything

Yalda Khoshpey — Tue, 07 Oct 2025 15:53:59 +0000

I've been coding for years, but nothing prepared me for how AI would transform my daily workflow. Here's what I've learned:

🔥 How AI Is Actually Helping Me Code Better

From Googling to "Prompt Engineering"

· Instead of searching for hours, I now have conversations with AI
· But here's the catch: writing good prompts is the new superpower
· The better my questions, the better the answers

AI as My 24/7 Pair Programmer

· Instant code reviews and suggestions
· "What edge cases am I missing? - AI actually catches them!
· Learning new frameworks in days instead of weeks

The Creativity Multiplier

· "Show me 5 different ways to implement this feature"
· "Optimize this algorithm for better performance"
· AI doesn't replace my creativity - it amplifies it

⚠️ The Dark Side Nobody Talks About

The Copy-Paste Trap
I've seen developers blindly copy AI code without understanding it.This is dangerous because:

· You stop learning the "why" behind solutions
· Security vulnerabilities get copied without scrutiny
· When things break, you have no idea how to fix them

The Skill Erosion Risk
If we let AI do all the heavy lifting,are we still growing as engineers?

🚀 Here's How I'm Staying Relevant

Focus on Architecture, Not Implementation
AI writes great functions,but it can't design your entire system (yet!)
Master the Art of Code Review
Now more than ever,we need to critically evaluate AI-generated code
Double Down on Soft Skills

· Understanding business requirements
· Communicating with stakeholders
· Mentoring junior developers

Become an AI Whisperer Learning to guide,correct, and collaborate with AI tools

💭 The Big Question

Are we becoming AI managers instead of coders? And is that a bad thing?

I'd love to hear your experience:

· How has AI changed YOUR coding workflow?
· Are you worried or excited about the future?
· What skills are you focusing on now?

Let's have an honest conversation about where our profession is heading! 👇

DEV Community: Yalda Khoshpey

👋 Your README deserves better.

🎯 Live Demo

📦 Repository

😭 Your README is still looking like a ransom note? Go fix that right now. 🚨 Friendly reminder: your README is the outfit your project wears to the internet. Make it look good. 😎 This post might help.

Make Your GitHub README Look Better with This Simple Languages Card 🥰

“What I Learned Building Real Projects with Node.js & Next.js in 2026

Building a 3D Virtual Portfolio Room🏠

Building a 3D Interactive Portfolio Room — Looking for Collaborators!

🎨 What Is This Project?

🌱 Why I Built It

🧩 What’s Still Missing (and Where I Need Help)

🤝 Why You Should Join Me

🚀 How to Contribute

🔭 Next Steps (My Vision)

The Psychology of Code: Why Users Fall in Love with Certain UIs😃

help us with Django

🚀 Help Needed: Review & Deploy My Django Project (Ready-Aim-Learn)

From Tutorial Hell to Clarity: How I Knew I Was Leveling Up as a Developer🚀

These 5 Coding Habits Separate a Good Developer from a Great One

[Boost]

3 Common Frontend Interview Questions🚀

Yalda Khoshpey ・ Oct 12 '25

3 Common Frontend Interview Questions🚀

Question 1: JavaScript | Difference between let, const, and var

[Boost]

🤖 The AI Revolution Is Here And It's Changing Everything

Yalda Khoshpey ・ Oct 7 '25

🤖 The AI Revolution Is Here And It's Changing Everything

Question 1: JavaScript | Difference between `let`, `const`, and `var`