#عمومی
♦️ یه نقشه راه بیسیک برای Front-end:

🔹 ۱. آشنایی با طرز کار وب و مرورگرها (۱ تا ۲ روز): مفاهیمی مثل HTTP/HTTPS یا DNS و Domain Names رو یاد بگیرید و آشنایی خلاصه از طرز کار اینترنت و مرورگرها داشته باشین.

🔹 ۲. راه‌اندازی فضای کار (۱ روز): ادیتورتون (معمولا VSCode) رو مشخص کنید، اکستنشن‌های پرکاربرد مثل Prettier، Live Server،Copilot و... رو نصب کنید و یه آشنایی مختصری در صورت امکان از ترمینال ادیتور داشته باشین.

🔹 ۳. آشنایی HTML + CSS (حدود ۱ ماه): این دو تا پایه اساسی هر وبسایتی هستن، HTML اسکلت سایت و CSS ویژگی‌های ظاهری اون رو مشخص می‌کنه. لازم نیست تو یک ماه همه‌چیز درباره CSS رو بدونین، همه این مراحل وقتی به مرحله‌های بعدی میرید یادگیریشون همچنان ادامه داره.

🔹 ۴. یادگیری JavaScript (۱ تا ۲ ماه): اصول تعامل کاربر با سایت وابسته به این زبانه. اگه قبلا برنامه‌نویسی کار نکردین حتما اصول پایه‌ای مثل متغیرها، فانکشن‌ها و ... رو خوب یاد بگیرید و بعدا سراغ ویژگی‌های جدیدتر(ES6+) برید. سعی کنید با پروزه عملی و تمرین در کنار آموزش یاد بگیرید.

🔹 ۵. آشنایی با Git و GitHub (۱ هفته): از گیت برای ذخیره‌سازی و ثبت تغییرات تو کدتون استفاده کنید. سعی کنید این مرحله رو حین یادگیری جاوااسکریپت و پروژه‌های تمرینیتون انجام بدین.

🔹 ۶. یادگیری کتابخونه‌ها وFramework ها (۱ تا ۲ ماه): اپشن‌های زیادی هست مثل Vue, Angular,Svelte، ولی برای شروع توصیه می‌شه اول React رو یاد بگیرید چون استانداردترین فریمورک/کتابخونه هست و یادگیریش نسبت به بقیه ساده‌تره، اما در نهایت انتخاب با خودتونه. علاوه بر این یادگیری کتابخونه‌های مثل Redux Toolkit و Framer Motion توصیه میشه.

❗️ جزئیات چیزایی که تو هر زبان یا کتابخونه باید بلد باشین تو عکسا آورده شده.


👨‍💻 @Weblify_Tutorials 🎨

#معرفی_ابزار
♦️ معرفی سایت: Calltoinspiration

🔹 حتما تا حالا شده موقع طراحی UI با کمبود ایده مواجه بشین. مثلا بخواین یه دکمه‌ یا یه فرم درست کنید ولی با خودتون بگید کاش برای طراحی ظاهریش یه ایده‌ی جدید داشتم ولی هرچی فکر می‌کنین ایده جدیدی به ذهنتون نمی‌رسه!

🔹 این وبسایت دقیقا به حل همین مشکل کمک می‌کنه، یعنی برای هرجور کامپوننت رابط کاربری که می‌خواین طراحی کنین بهتون ایده میده، و باعث میشه سریع‌تر، بهتر و خلاقانه‌تر کامپوننت‌هاتون رو طراحی کنید. برای طراحی:
▪️Form
▪️Alert
▪️Tab
▪️Dropdown
▪️Button

و... خیلی کامپوننت‌های دیگه میتونین از این سایت ایده بگیرین! مثلا دو تا عکسی که گذاشتم ایده برای فرم Log in هست.

❗️ پ.ن: برای ورود احتمالا طبق معمول باید از فیلترشکن استفاده کنید..


👨‍💻 @Weblify_Tutorials 🎨

لینک سایت:
Calltoinspiration.com


👨‍💻 @Weblify_Tutorials  🎨

#آموزشی
♦️ هوک use در ری‌اکت:

🔹 این هوک تقریبا جدیده، و تو ورژن ۱۹ ری‌اکت معرفی شده. از این هوک میتونین برای گرفتن مقادیر Context ها و Promise ها استفاده کنین.

🔹 این هوک سینتکس خیلی ساده‌ای داره:

const value = use(resource);

که بجای resource، نام Context یا Promise مد نظرتون رو مینویسین و مقدارشون به متغیر value برگردونده میشه.

🔹 خب مثلا چرا بجای useContext باید بخوایم از use استفاده کنیم؟ کاربرد این هوک برمیگرده به مهم‌ترین تفاوتش با هوک‌های دیگه داخل React: برخلاف هوک‌های عادی می‌تونیم از این هوک داخل بلوکهای if و else و شرطی هم استفاده کنیم!

🔹 دریافت Context با use:

  if (someCondition) {
    const theme = use(ThemeContext);
    return <button className={theme}>Click me</button>;
  }
  return <button>Default</button>;
}

دقت کنید که داخل بلوک if از use استفاده کردیم که با useContext قابل انجام نبود.

🔹 دریافت Promise با use: ولی مهم‌ترین کاربرد این هوک میتونه برای وقتی باشه که بخوایم عملیات ناهماهنگ انجام بدیم. مثلا برای دریافت اطلاعات از سرور:

// Server Component
export default function App() {
  const messagePromise = fetchMessage();
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <MessageComponent messagePromise={messagePromise} />
    </Suspense>
  );
}

// Client Component
function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  return <p>{message}</p>;
}

تو کد بالا کامپوننت اول رو برای فچ کردن اطلاعات از سرور ساختیم و دومی رو برای نشون دادن اطلاعات به کاربر.
تو این شرایط اسنفاده از ترکیب use و یک کامپوننت </Suspense> می‌تونه جایگزین خلاصه تری برای useEffect باشه. تا وقتی که Promise در حالت تعلیق هست، عبارت Loading... توسط کامپوننت Suspense نشون داده میشه، اما به محض انجام شدن Promise مقدار نهاییش با use دریافت و در message ذخیره میشه و میتونیم اونو به کاربر مشون بدیم.


👨‍💻 @Weblify_Tutorials  🎨

#خبر

♦️ جایگزین جدید Date به زودی در JavaScript:

🔹 نحوه کار با زمان و تاریخ در جاوا اسکریپت به زودی بجای شی Date، با Temporal ها انجام میشه. سیستم پیش فرض جاوا اسکریپت تا الان برای بدست اوردن تاریخ و زمان از ساعت لوکال خود کاربر استفاده میکنه، یعنی شما در نود درصد مواقع اگه نیاز به کار کردن با زمان دقیق و یا ساعت کشورهای مختلف داشتید، باید از کتابخونه‌هایی مثل Moment.js یا Date-nfs استفاده میکردید. ولی با اضافه شدن Temporal ها احتمالا دیگه نیتزی به این کتابخونه‌ها نیست.

🔹 چندتا از ویژگی‌هایی Temporal ها:

▪️محاسبه زمان مناطق و کشورهای مختلف بدون نیاز به کتابخانه خارجی

▪️محاسبه تفاوت دقیق دو زمان

▪️تبدیل زمان به رشته‌هایی با فرمت دلخواه

▪️محاسبه تاریخ در تقویم های مختلف مثل میلادی، شمسی و ...

🔹در حال حاضر قابلیت کار کردن با Temporal به صورت آزمایشی تو کروم و فایرفاکس و سافاری فعال هست. کد زیر یه نمونه ساده از استفادش هست که تایم دقیق امریکا رو برمیگردونه:

const dateTimeInNewYork =
 Temporal.Now.plainDateTimeISO
("America/New_York");
console.log(dateTimeInNewYork);

👨‍💻 @Weblify_Tutorials  🎨

#آموزشی
♦️ تفاوت zoom و scale در CSS:

🔹 شاید اسم ویژگی zoom کمتر به گوشتون خورده باشه، چون به تازگی اضافه شده، ولی این ویژگی هم مثل ویژگی transform:scale باعث تغییر اندازه عناصر میشه اما با یه تفاوت مهم:

🔹 ویژگی zoom برخلاف scale باعث جابجایی عناصر دیگه داخل صفحه میشه، برای مثال تو این تصویر اندازه عکس بالایی رو با scale و عکس پایینی رو با zoom نصف کردیم. تغییر اندازه با zoom، عنصرهای دیگه رو هم در نظر گرفته و متن جابجا میشه تا فضاهای خالی رو پرکنه اما با scale فضاهای خالی‌ای که بوجود اومدن پر نمیشن، و داخل layout تغییری ایجاد نمی‌کنه.

🔹 پس فقط در صورتی که نیاز دارین تغییر اندازه یک عنصر موقعیت بقیه عنصرها رو هم تغییر بده از zoom استفاده کنین، این ویژگی با هر تغییر اندازه، موقعیت تمام عنصرهای داخل صفحه رو دوباره محاسبه می‌کنه و بخاطر همین هم از لحاظ محاسباتی نسبت به scale سنگین‌تره، اما کاربرد خودش رو داره.


👨‍💻 @Weblify_Tutorials  🎨

#خبر
♦️ مدیرعامل OpenAI میگوید شرکت دچار کمبود کارت گرافیک است:

🔹 سم آلتمن، مدیرعامل شرکت OpenAI اعلام کرد که به دلیل کمبود GPU ناچار شده‌اند تا انتشار آخرین مدل ChatGPT یعنی ورژن 4.5 را به تعویق بندازند.

🔹 او در پستی در X گفت که نسخه جدید ChatGPT "غول‌آسا" و "پر هزینه" است، و برای دسترسی عموم به آن به ده‌ها هزار کارت گرافیک بیشتر نیاز است. این نسخه ابتدا برای کاربران ChatGPT Pro و هفته بعد برای کاربران ChatGPT Plus فعال می‌شود.

🔹 علاوه بر این، نسخه جدید ChatGPT قیمتی معادل 75$  به ازای هر ۱ ملیون توکن یعنی تقریبا 750000 کلمه دارد که حدود 15 برابر مدل ChatGPT-4o است.


👨‍💻 @Weblify_Tutorials  🎨

#عمومی
♦️ دولوپر T شکل:

🔹 سعی کنید تو یه حوزه تخصص عمیق داشته باشید و عین حال یک دانش حداقلی از سایر حوزه‌ها هم داشته باشید!

👨‍💻 @Weblify_Tutorials  🎨

#عمومی
♦️ اپل اولین گوشی تاشو خود را به احتمال زیاد تا ۲۰۲۶ معرفی می‌کند:

🔹 طبق شایعات، اولین آیفون تاشو اواخر ۲۰۲۶ یا اوایل ۲۰۲۷ وارد بازار می‌شود. این گوشی دارای نمایشگر داخلی به طول ۷.۸ اینچ و نمایشگر خارجی ۵.۵ اینچی خواهد بود که شایعات قبلی را تایید می‌کند.

🔹 جنس بدنه آن از تیتانیوم خواهد بود و ضخامت آن هنگام تا شدن به ۹ تا ۹.۵ میلی‌متر می‌رسد. دوربین پشت دارای دو لنز و دوربین سلفی تک‌لنزی هم در حین تاخوردگی و هم حین باز بودن قابل دسترسی است.

🔹 این گوشی از FaceID استفاده نمی‌کند و فقط دارای یک حسگر اثر انگشت در لبه است. قیمت پیش‌بینی شده برای آن بین ۲۰۰۰ تا ۲۵۰۰ دلار و یا حتی بیشتر است.

👨‍💻 @Weblify_Tutorials  🎨

#آموزش
♦️ یک روش بهتر بحای استفاده از عبارات شرطی

🔹 برای مثال، فرض کنید میخوایم با React و TypeScript کدی بنویسیم که برای ۳ سطح کاربری admin, editor و user دسترسی‌های مختلفی که هر کدوم دارن رو نمایش بده. (۴ دسترسی create, read, update, delete)

❌  روش عادی (Conditional Rendering):

type UserType = "admin" | "editor" | "user"
type User = { name: string; type: UserType };

const users: User[] = [
  { name: "john", type: "admin" },
  { name: "mike", type: "editor" },
  { name: "abdelrahman", type: "user" },
];

export default function Test() {
  const actions = ["create", "read", "update", "delete"];

  return (
    <div>
      {users.map((user) => (
        <div key={user.name}>
          {/* we need to render actions depending on user type */}
          <p>{user.name}</p>
          <div className="flex items-center">
            user actions:
            {user.type === "admin" && actions.map((a) => <Action a={a} key={a} />)}
            {user.type === "editor" && actions.filter((a) => a !== "create").map((a) => <Action a={a} key={a} />)}
            {user.type === "user" && actions.filter((a) => a === "read").map((a) => <Action a={a} key={a} />)}
          </div>
        </div>
      ))}
    </div>
  );
}

function Action(props: { a: string }) {
  const { a } = props;
  return <p className="px-2 py-1 border-[1px] mx-2 rounded-md">{a}</p>;
}

به طور خلاصه تو این روش باید نوع کاربر رو تک تک چک کنیم و با استفاده از اپراتور شرطی && بسته به نوع کاربر یک کامپوننت Action برای هر اجازه ایجاد کنیم. اکه بخوایم در آینده تعداد کاربرا و دسترسی‌ها رو بیشتر کنیم، این روش دردسرساز میشه.

✅ اما روش بهتر (نگاشت دادن هر سطح کاربری با دسترسی‌ها در یک Record یا Object) :

type UserType = "admin" | "editor" | "user";

type User = { name: string; type: UserType };

const users: User[] = [
  { name: "john", type: "admin" },
  { name: "mike", type: "editor" },
  { name: "abdelrahman", type: "user" },
];

const userActionsStates: Record<UserType, string[]> = {
  admin: ["create", "read", "update", "delete"],
  editor: ["create", "read", "update"],
  user: ["read", "update"],
};

export default function Test() {
  return (
    <div>
      {users.map((user) => (
        <div key={user.name}>
          {/* we need to render actions depending on user type */}
          <p>{user.name}</p>
          <div className="flex items-center">
            user actions:
            {userActionsStates[user.type].map((a) => (
              <Action key={a} a={a} />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

function Action(props: { a: string }) {
  const { a } = props;
  return <p className="px-2 py-1 border-[1px] mx-2 rounded-md">{a}</p>;
}

بجای اینکه if و else یا هرجور عبارت شرطی دیگه‌ای بنویسیم، نوع کاربرا و دسترسی‌هاشون رو داخل یه ساختمان داده مناسب مثل Record دخیره میکنیم، و با استفاده از متود map برای هر کدوم از دسترسی‌های هر کاربر یک کامپوننت Action درست می‌کنیم. برای ایجاد کاربر با دسترسی‌های جدید فقط کافیه یک سطر به Record مون اضافه کنیم و در کل خیلی خواناتره.


👨‍💻 @Weblify_Tutorials  🎨

#معرفی_ابزار
♦️ ۴ سایت برای تمرین و یادگیری توسعه Front-end:

🔹 سایت FreeCodeCamp:
یکی از بهترین وبسایت‌ها برای یادگیری Front-end با بیش از ۷۰۰۰ آموزش و چالش‌های متعدد.

🔹 سایت CssBattle:
سایتی هست که چالش‌های اختصاصی CSS رو می‌تونید داخلش انجام بدید. یک طرح داده می‌شه و شما باید با حداقل کد CSS اون‌ رو پیاده‌سازی کنید.

🔹 سایت JavaScript30:
۳۰ پروژه JavaScript که برای انجام طی یک ماه طراحی شده، همه پروژه‌ها دارای ویدئوی آموزشی هستن.

🔹 سایت FrontendMentor:
تو این سایت چالش‌های مختلف تو هر سطحی می‌تونید پیدا کنید. تو این چالش‌ها باید یه صفحه طراحی کنید که بسته به سطح شما می‌تونه یه طرح ساده باشه یا یه Web App کامل و برای انجام اون‌ها باید از هر سه مهارت HTML, CSS و JavaScript استفاده کنید.

👨‍💻 @Weblify_Tutorials  🎨

#آموزش
♦️ تفاوت عملگرهای ؟؟ و ||:

🔹 از هر دو عملگر برای دادن مقدار پیش‌فرض به متغیر سمت چپشون استفاده می‌کنیم، اما چطور؟

🔹 عملگر || هر وقت عبارت سمت چپش falsy باشه (یعنی null, undefined, 0, false یا رشته خالی '')، بجاش مقدار سمت راست رو در نظر می‌گیره مثلا:

const count = 0; const testCount = count || 10;

عملگر || چک می‌کنه که مقدار testCount یک مقدار falsy هست و اگه بود بهش مقدار ۱۰ رو میده.

🔹 عملگر ؟؟ هم همین‌طور عمل می‌کنه ولی فقط وقتی که مقدار عبارت null یا undefined باشه، یعنی اگه مقدار false, 0 یا رشته خالی بتشه همون مقدار رو برمیگردونه.

let value = 0; const testValue = value ?? 'Default Value';

و اینجا خروجی همون صفر باقی میمونه.

👨‍💻 @Weblify_Tutorials  🎨

#عمومی
♦️مراقب پکیج‌های NPM ای که نصب می‌کنید باشید

🔹 به تازگی ۶ پکیج آلوده در npm پیدا شدند که مربوط به گروه هکر Lazarus کره شمالی می‌شوند و برای دزدیدن و استخراج اطلاعات حساس استفاده می‌شدند.

🔹 این ۶ پکیج‌ اغلب اسمی مشابه پکیج‌های شناخته شده دارند:

❌ is-buffer-validator
❌ yoojae-validator
❌ event-handle-package
❌ array-empty-validator
❌ react-event-dependency
❌ auth-validator

🔹خوشبختانه قبل اینکه تعداد دانلودهای پکیج‌ها بالا برود از npm برداشته شدند (با ۳۳۰ دانلود)

🔹 گروه Lazarus فقط محدود به npm نشده و قبلا فعالیت‌های مشابهی در Github و PyPI داشته.

🔹 این گروه مسئول حملات بزرگی از جمله دزدی ۱.۵ بیلیون دلار ارز دیجیتال از صرافی ByBit است.

👨‍💻 @Weblify_Tutorials  🎨