با ما باش قراره اتفاقای خوبی بیفته :)

#عمومی
♦️ یه نقشه راه بیسیک برای 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  🎨