Void(0) Company 😍
Next Generation Tooling


آقای Evan You خالق فریمورک vue.js و vite اومده یه کمپانی جدید زده به اسم Void-Zero و میخواد یه Tollchain برای JS بسازه و با کنار هم قراردادن بهترین ابزار ها یه چیز قوی بسازه.

برای بحث build از Vite برای بحث testing از Vitest و برای bundeler از Rolldown و برای langunage toolchain هم از Oxc بهره میبرند.

دارن یه ابزار خفن به جامعه جاوا اسکریپت اضافه میکنند و هدفشون اینه این ابزار یکپارچه و سریع باشه

و چون شخص Evan You شروع کننده هست یعنی جامعه ویو با این ابزار جلو میان و قراره یه ابزار خفن داشته باشیم که بتونیم همه جا استفاده کنیم هم سریع باشه هم خوب.

و چون جامعه ویو و ویت باهاش هست نیاز نیست از صفر بسازن.

برای اطلاعات بیشتر میتونید سایتشون رو بررسی کنید که اطلاعات دقیق تر و کامل تری داشته باشید:
🌐 سایت رسمی
⚜️ گیت هاب

🔖 #Javascript, #JS, #جاوااسکریپت

👤 Matin Soleymani

💎 Channel: @DevelopixJavascript

✨ با استفاده از کتابخونه Cursify می‌تونید افکت‌های انیمیشنی زیبایی به Cursor موس در محیط وب بدید. این کتابخونه با React و Typescript و Tailwind و Framer Motion ساخته شده و به‌راحتی در پروژه‌ها به‌صورت کامپوننت قابل استفاده است.

🌐 Website

💎 Channel: @DevelopixJavascript

سلام
پرسشنامه‌ پیش رو با هدف درک بهتر رفتار و نیازهای کسب‌وکارهای اینترنتی ایرانی در استفاده از ابزارهای پرداخت توسط یک تیم پژوهشی مستقل طراحی شده است. نتایج این پژوهش به ما کمک می‌کند تا ابزارهایی کارآمدتر و منطبق با نیازهای واقعی شما ارائه دهیم. تکمیل این پرسشنامه کاملاً بی‌نام است و هیچ اطلاعات شخصی از شما ذخیره نخواهد شد. پاسخ‌های شما نقش کلیدی در بهبود خدمات ابزارهای پرداختی اینترنتی در کشور دارد، بنابراین از شما خواهشمندیم با دقت و صداقت به سوالات پاسخ دهید. زمان لازم برای تکمیل: حدود 5 دقیقه لطفاً برای شروع پرسشنامه، روی لینک زیر کلیک کنید و ما را در این مسیر همراهی کنید.
.
https://survey.porsline.ir/s/lEtAnSw8
.
سپاس فراوان از همکاری صمیمانه شما

🔒🔑 انواع روش‌های احراز هویت در بک‌اند

توی پست امروزمون می‌خواهیم بپردازیم به مبحث احراز هویت (authentication) که یکی از مهم‌ترین مباحث در بک‌اند هست. ✅

چند نکته قبل از شروع:
به هیچ وجه رمز کاربر نباید به صورت خام داخل دیتابیس یا هر جای دیگر ذخیره شود. ❌
از متدهای هشینگ (hashing) قوی استفاده کنید، مثل SHA-256 یا SHA-512.
اگر از جاوااسکریپت برای پروژه‌تان استفاده می‌کنید، می‌توانید از کتابخانه bcrypt استفاده کنید.
تعداد دفعاتی که یک کاربر می‌تواند پشت سرهم درخواست ارسال کند را محدود کنید تا از حملات brute force جلوگیری شود.

1️⃣ Password-based authentication
در این روش، کاربر فقط باید یک رمز وارد کند تا لاگین کرده و به اندپوینت‌های محافظت‌شده دسترسی پیدا کند.
اینجا نه توکنی وجود دارد و نه چیزی که منقضی شود و از ادامه دسترسی کاربر جلوگیری کند.
این روش اصلاً مناسب نیست و فقط برای یادگیری یا پروژه‌های ساده مناسب است.

2️⃣ Token-based authentication
یکی از مفیدترین و مهم‌ترین روش‌های احراز هویت که همه با آن آشنایی داریم.
و البته، اسم JWT به گوش همه خورده است.

در این روش، وقتی کاربر وارد می‌شود، برای او دو توکن رمزنگاری‌شده ساخته می‌شود:

Access Token
Refresh Token
تفاوت‌ها:
مدت زمان انقضای Access Token کوتاه است (بین ۱۵ دقیقه تا ۱ ساعت).
مدت زمان انقضای Refresh Token طولانی‌تر است (بیش از ۷ روز).
هر وقت که Access Token منقضی می‌شود، با استفاده از Refresh Token، یک Access Token جدید دریافت می‌کنیم.

سوال مهم: توکن‌ها کجا ذخیره و ارسال می‌شوند؟
توکن‌ها می‌توانند:

در هدرها (Headers) ارسال شوند.
یا در کوکی‌ها ذخیره شوند.
نکته: اگر توکن در کوکی ذخیره می‌شود، باید حتماً نکات امنیتی خاصی رعایت شود.

نکته: اگر Refresh Token منقضی شود، کاربر باید مجدداً لاگین کند.

محتوای JWT:
توکن JWT معمولاً حاوی اطلاعات رمزنگاری‌شده مثل id، email و... است. (رمز عبور نباید ذخیره شود.)
این توکن از بخش‌های زیر تشکیل شده است:

Header
Payload
Signature
کاربرد:
این روش معمولاً همراه با احراز هویت دو مرحله‌ای (2FA) استفاده می‌شود.
علاوه بر رمز عبور، یک کد به ایمیل یا شماره تلفن ارسال می‌شود که باید وارد شود.

3️⃣ Biometric authentication
در این روش، احراز هویت با استفاده از صدا، اثر انگشت، چشم، یا ویدئو انجام می‌شود.
این روش بیشتر در سامانه‌های حساس مثل دولتی یا بانکی استفاده می‌شود و عمومیت چندانی ندارد.

4️⃣ Social media authentication
در این روش، کاربر از طریق اکانت شبکه‌های اجتماعی یا سرویس‌های معتبر، احراز هویت می‌کند.

ویژگی‌ها:
بسیار محبوب و کاربرپسند است.
معمولاً با اکانت‌های گوگل (جیمیل)، فیسبوک، گیت‌هاب و... انجام می‌شود.
سرعت بالایی دارد، چون اکثر کاربران اکانت جیمیل‌شان روی مرورگر فعال است و با یک کلیک، احراز هویت کامل می‌شود.


امیدوارم از این پست خوشتون اومده باشه 😊
هر سوالی هم داشتید می‌تونید در بخش نظرات بپرسید 🙏

🔖 #Javascript, #JS, #جاوااسکریپت

👤 soroushGH

💎 Channel: @DevelopixJavascript

💎 وبسایت UIVerse منبعی غنی از کامپوننت‌های پر استفاده و زیبا برای طراحی UI هست که می‌تونید به‌راحتی کدهای مربوط به کامپوننت‌های مورد علاقه‌تون دریافت کنید. لازم به‌ذکر هست که تمامی کامپوننت‌ها Open-Source هستند و بدون مشکل می‌تونید استفاده کنید.

🌐 UIVerse.io

💎 Channel: @DevelopixJavascript

چطور در مسیر مهاجرت سورپرایز نشیم؟ 🎯✈️🌍

با داشتن اطلاعات دقیق و واقعی 📊، می‌توانید از غافلگیری‌ها دور بمانید 😌✨ و مسیر مهاجرتی‌تان را با اطمینان بیشتری طی کنید. 💪🚀


✅ با سفارش گزارش شخصی‌سازی‌شده دیرکشن، آگاهانه از میان ۴۰۰ برنامه مهاجرتی 🗂️ در ۱۸ کشور 🌎 و با کمک هوش مصنوعی 🤖 برای مهاجرت خود تصمیم بگیرید

دریافت گزارش

Bun v 1.2

بان نسخه جدیدش رو منتشر کرده.

✅ اپدیت های جدید بان در این نسخه :

1. سازگاری بیشتری با nodejs داره.
2. به صورت built-in از s3 پشتیبانی میکنه.
3. به صورت built-in از Postgres پشتیبانی میکنه و به زودی قراره mysql هم اضافه بشه.
4. فایل bun.lock قبلا به صورت باینری بوده ولی با فیدبک‌هایی که از کامیونیتی دریافت کردند به فایل متنی تغییر دادند.
5. میتونید html به صورت خیلی ساده از طریق بان ایمپورت کنید ( خودش مینیفای میکنه باندل میکنه هم js رو هم css رو )

و به صورت کلی پرفرمنس بهتر شده ، سرعت بهتر شده و...

فیچر های دیگری هم در این نسخه عرضه شده که میتونید با مشاهده وبلاگ بان مطالعه کنید.

لینک وبلاگ :
https://bun.sh/blog/bun-v1.2

🔖 #Javascript, #JS, #جاوااسکریپت

👤 Matin Soleymani

💎 Channel: @DevelopixJavascript

یه ابزار خوب برای فرانت دولوپرها

این ابزار میتونه از طریق swagger v2 یا openAPI v3 بیاد درخواست های fetch رو بنویسه و میتونه بیاد validation با zod و به صورت type-safe براتون انجام بده. ( از فرمت های yaml و json پشتیبانی میکنه )

❇️ نحوه کار :
این ابزار رو به صورت dev dependencies نصب میکنید و یک فایل config داره که مشخص میکنید و به سادگی با یه دستور fetchها یا validationهای شما آماده است.

⚙️ کانفیگ :
اگر در داکیومنت Orval توجه کنید از انواع موارد مختلف پشتیبانی میکنه ، برای مثال شما میتوانید از axios یا fetch api یا react query یا vue query یا انگیولار یا zod ( برای valition ) و تا ترکیبی از fetch و validation بهرمند شوید.

📖 برای مطالعه بیشتر حتما به داکیومنت Orval مراجعه کنید.

https://orval.dev

🔖 #Javascript, #JS, #جاوااسکریپت

👤 Matin Soleymani

💎 Channel: @DevelopixJavascript

🎉 معرفی Vue 3.6 (نسخه آلفا) — آغاز دوران Vapor

به‌تازگی Vue 3.6 به‌صورت آلفا منتشر شده و یکی از بزرگ‌ترین تحولات تاریخ این فریم‌ورک رو میبینیم: حالت Vapor.
در این نسخه، حالت جدیدی به نام Vapor Mode معرفی شده که به‌طور کامل بدون استفاده از Virtual DOM کار می‌کند! این یعنی عملکرد بسیار سریع‌تر، مصرف حافظه کمتر و...
برای استفاده از این قابلیت جدید، فقط کافیه در تگ <script setup> به صورت زیر از دستور vapor استفاده کنید

<script setup vapor>
  // کدهای شما اینجاست...
</script>

برای اینکه خودتون تفاوت رو حس کنید، برید به Vue Playground، نسخه 3.6-alpha2 رو انتخاب کنید و هم با حالت عادی و هم با vapor رو تست کنید.

🔖 #Javascript, #JS, #جاوااسکریپت #vue

👤 Matin Soleymani

💎 Channel: @DevelopixJavascript

🎉 Nuxt V4
به تازگی نسخه جدید (V4) فریمورک ناکست منتشر شد...

🔥 تغییرات مهم در Nuxt 4:

🔹 ساختار جدید پروژه (پوشه app/)
ساختار پروژه حالا به صورت زیره و کدهای اپلیکیشن در app/ قرار می‌گیرن:

my-nuxt-app/
├─ app/
│  ├─ pages/
│  ├─ components/
│  ├─ layouts/
│  └─ app.vue
├─ server/
├─ shared/
├─ public/
└─ nuxt.config.ts

🔄 دیتا فچینگ بهینه تر شده
🔧 تجربه TypeScript بهبودیافته
⚡️ سرعت CLI بهتر شده
🎨 قالب‌های UI جدید اضافه شده

و Nuxt 3 تا پایان ژانویه 2026 آپدیت‌های نگه‌داری رو دریافت می‌کنه.

برای مطالعه بیشتر میتونید به وبلاگ ناکست سر بزنید.

🔖 #Javascript, #JS, #جاوااسکریپت, #nuxt, #vue

👤 Matin Soleymani

💎 Channel: @DevelopixJavascript

🤝 اگر تو پروژه‌های React هنوز برای data fetching از useEffect + fetch استفاده می‌کنی، زمان آشنایی با TanStack Query (react-query) رسیده.

این لایبرری مشکل مدیریت state سرور (data از API) رو حل می‌کنه؛ مثل:
• کش‌کردن requestها
• refetch خودکار داده‌ها
• مدیریت loading / error
• همگام‌سازی دیتا بین تب‌ها و کامپوننت‌ها

نتیجه؟ کد کمتر، باگ کمتر، UX روان‌تر. مخصوصاً تو dashboardها، panelهای ادمین، یا هر جایی که چندین API call داری.

نصب:

npm install @tanstack/react-query

نمونه استفاده ساده:

import { QueryClient, QueryClientProvider,
  useQuery } from '@tanstack/react-query';

const queryClient = new QueryClient();

function Todos() {
  const { data, isLoading, error } = useQuery(['todos'], () =>
    fetch('/api/todos').then(r => r.json())
  );

  if (isLoading) return <span>Loading...</span>;
  if (error) return <span>Error!</span>;
  return <ul>{data.map(t => <li key={t.id}>{t.title}</li>)}</ul>;
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  );
}

مستندات رسمی و مثال‌های بیشتر:
Docs
GitHub

امتحانش کن تو پروژه بعدی‌ات؛ مخصوصاً جاهایی که چند بار از یک API استفاده می‌کنی یا نیاز به refetch هوشمند داری. 🚀

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #React #TanStack_Query #Frontend #State_Management

👤 Developix

💎 Channel: @DevelopixJavascript

👇 خروجی نهایی این کد JavaScript چیست؟

در این مثال از closure و رفتار hoisting برای توابع و متغیرها استفاده شده است. با دقت ترتیب اجرا و نوع متغیرها را بررسی کنید:

function makeCounter() {
  console.log(typeof count);

  var count = 0;

  return function(step) {
    count += step;
    return count;
  };
}

const c1 = makeCounter();
const c2 = makeCounter();

console.log(c1(1));
console.log(c1(2));
console.log(c2(5));

خروجی دقیق این کد در کنسول چیست؟ (هر خط را به ترتیب بنویسید)

🔖 #Javascript #JS #جاوااسکریپت

👤 Developix

💎 Channel: @DevelopixJavascript

در کد زیر هدف این است که هر ثانیه مقدار متغیر count یک واحد زیاد شود و در نهایت بعد از ۳ ثانیه در console لاگ شود. اما مقدار نهایی لاگ‌شده درست نیست. مشکل کجاست و این کد را چطور اصلاح می‌کنید تا مقدار صحیح لاگ شود؟

نکته: به رفتار var داخل حلقه و زمان اجرای setTimeout دقت کنید.

🔖 #Javascript #JS #جاوااسکریپت

👤 Developix

💎 Channel: @DevelopixJavascript

🚀 ساخت یک TODO List ساده با Vanilla JavaScript (بدون فریم‌ورک)

گاهی برای تمرین مفاهیم modern JS لازم نیست سراغ React یا Vue رفت؛ یک TODO List ساده با Vanilla JavaScript می‌تواند کلی چیز مثل DOM، event handling و localStorage را روشن کند 🤓

این ایده بر اساس مثال‌های رسمی DOM و Storage در MDN است:
MDN querySelector
MDN localStorage

در این مینی‌پروژه:

✅ با querySelector و addEventListener کار می‌کنی
✅ آیتم‌ها را در localStorage نگه می‌داری تا با رفرش صفحه نپرند
✅ یک ساختار کد تمیز و قابل‌گسترش می‌سازی

ایدهٔ سناریو 📝
فرض کن می‌خواهی کارهای روزانه‌ات را روی مرورگر ثبت کنی؛ اضافه‌کردن task، حذف‌کردن، و این‌که با بستن تب همه چیز نپره. همین.

نمونه کد مینیمال (index.html + script.js در یک فولدر بگذار):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Todo Vanilla JS</title>
  <style>
    body { font-family: sans-serif; max-width: 480px; margin: 40px auto; }
    li { display: flex; justify-content: space-between; margin: 4px 0; }
    button { margin-right: 8px; }
  </style>
</head>
<body>
  <h1>Todo List</h1>
  <input id="todo-input" placeholder="New task..." />
  <button id="add-btn">Add</button>
  <ul id="todo-list"></ul>

  <script>
    const input = document.querySelector("#todo-input");
    const addBtn = document.querySelector("#add-btn");
    const list = document.querySelector("#todo-list");

    let todos = JSON.parse(localStorage.getItem("todos") || "[]");

    function save() {
      localStorage.setItem("todos", JSON.stringify(todos));
    }

    function render() {
      list.innerHTML = "";
      todos.forEach((text, index) => {
        const li = document.createElement("li");
        li.textContent = text;

        const removeBtn = document.createElement("button");
        removeBtn.textContent = "x";
        removeBtn.addEventListener("click", () => {
          todos.splice(index, 1);
          save();
          render();
        });

        li.prepend(removeBtn);
        list.appendChild(li);
      });
    }

    addBtn.addEventListener("click", () => {
      const value = input.value.trim();
      if (!value) return;
      todos.push(value);
      input.value = "";
      save();
      render();
    });

    render();
  </script>
</body>
</html>

چند نکته‌ی کاربردی 💡

• JSON.parse و JSON.stringify این‌جا برای تبدیل آرایه به string و برعکس استفاده شده؛ دقیقا مطابق چیزی که MDN برای localStorage پیشنهاد می‌دهد.
• همیشه قبل از push، مقدار input را .trim() کن تا task خالی ذخیره نشود.
• با جداکردن تابع‌های save و render، بعدا راحت می‌شود featureهایی مثل edit یا checkbox برای completed اضافه کرد.

این الگوی کوچک، بیس خیلی از appهای واقعی است: گرفتن input کاربر، update کردن state، sync با UI و نگه‌داشتن داده در storage. یک بار از اول تا آخر با حوصله بساز، بعدش هر فریم‌ورکی را راحت‌تر می‌فهمی ✨

امتحانش روی یک فایل ساده HTML حس خوبی از «چیزی که خودم ساختم و کار می‌کند» می‌دهد؛ اگر دوست داشتی گسترشش بده و برای بقیهٔ devها بفرست 🌱

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #DOM #localStorage #Vanilla_JS #Frontend

👤 Developix

💎 Channel: @DevelopixJavascript

‌‎پاک‌سازی توابع با تکنیک «Early Return» در JavaScript 🚿

یکی از ساده‌ترین و مؤثرترین تکنیک‌های Clean Code در جاوااسکریپت، استفاده از Early Return است؛ یعنی به‌جای پیچوندن منطق داخل ifهای تودرتو، در همان اول تابع، شرایط نامعتبر را سریع برگردانیم.

این تکنیک توابع را:

• کوتاه‌تر و خواناتر می‌کند ✨
• از Nested if‌های عمیق جلوگیری می‌کند
• باعث می‌شود مسیرهای خطا و edge caseها واضح‌تر دیده شوند


نمونه کد قبل از refactor (کد سخت‌خوان)

function createUser(data) {
  if (data) {
    if (data.email) {
      if (data.password && data.password.length >= 8) {
        // save to DB
        return { ok: true, user: data };
      } else {
        return { ok: false, error: 'Weak password' };
      }
    } else {
      return { ok: false, error: 'Email is required' };
    }
  } else {
    return { ok: false, error: 'No data' };
  }
}

این تابع کارش را انجام می‌دهد، اما هر شرط جدیدی که اضافه شود، عمق ifها بیشتر می‌شود و دیباگ سخت‌تر.


Refactor با Early Return ✅

function createUser(data) {
  if (!data) {
    return { ok: false, error: 'No data' };
  }

  if (!data.email) {
    return { ok: false, error: 'Email is required' };
  }

  if (!data.password || data.password.length < 8) {
    return { ok: false, error: 'Weak password' };
  }

  // happy path
  return { ok: true, user: data };
}

الان:

• هر شرط invalid در بالا «قطع» می‌شود 🔪
• مسیر اصلی (happy path) در انتها واضح و تمیز است
• اضافه‌کردن شرط جدید فقط یعنی اضافه کردن چند خط دیگر بالای happy path


نمونه در Express / Node.js 🌐

app.post('/login', async (req, res) => {
  const { email, password } = req.body;

  if (!email || !password) {
    return res.status(400).json({ message: 'Missing credentials' });
  }

  const user = await findUserByEmail(email);
  if (!user) {
    return res.status(404).json({ message: 'User not found' });
  }

  const valid = await comparePassword(password, user.passwordHash);
  if (!valid) {
    return res.status(401).json({ message: 'Invalid password' });
  }

  // happy path
  res.json({ token: createToken(user) });
});

هر مرحله نامعتبر به‌سرعت return می‌شود و منطق login مثل یک «چک‌لیست» خطی خوانده می‌شود.

نکته مهم 🔍

Early Return با Single Responsibility خیلی خوب جفت می‌شود؛ اگر تابع خیلی طولانی شد، علاوه بر early return، آن را به چند تابع کوچک‌تر با نام‌های خوب بشکنید.

منابع برای مطالعهٔ بیشتر:
• MDN – Control Flow
• Refactoring.Guru

این سبک نوشتن را کم‌کم در هندلرهای Express، سرویس‌های Node.js یا حتی توابع React خودتان وارد کنید؛ بعد از مدتی، خواندن و نگه‌داری کد برای خودتان و تیم‌تان به‌وضوح راحت‌تر می‌شود 🙌

🔖 #Javascript #JS #جاوااسکریپت #clean_code #early_return #javascript #nodejs #express #refactoring

👤 Developix

💎 Channel: @DevelopixJavascript