🔴 امروز 10 مهر، جشن باستانی مهرگانه؛

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

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

معنی کلمه مهرگان یعنی پیروزی نور بر تاریکی.

آچار فرانسه ریسپانسیو در CSS؛ آشنایی با ویژگی aspect-ratio

تا حالا براتون پیش اومده که بخواهید یک تصویر، ویدیو یا ظرف (Container) همیشه یک نسبت ابعاد مشخص (مثل مربع ۱:۱ یا مستطیل ۱۶:۹) رو حفظ کنه، حتی وقتی اندازه صفحه نمایش تغییر میکنه؟

قبل از این که ویژگی aspect-ratio به CSS اضافه بشه، طراحان وب مجبور بودند از ترفندهای عجیبی مثل تکنیک "Padding-bottom hack" (دادن پدینگ درصدی بر اساس عرض) استفاده کنند که کدها رو پیچیده و خواندنشون رو سخت می‌کرد. اما خوشبختانه امروزه با این ویژگی مدرن، کار بسیار راحت‌تر شده است.



چرا باید از aspect-ratio استفاده کنیم؟

جلوگیری از پرش محتوا (CLS): وقتی تصاویر یا ویدیوها لود میشن، فضای خالی خودشون رو از قبل رزوم می‌کنن و صفحه ناگهان به هم نمیریزه.
کدنویسی تمیز و کوتاه: نیازی به محاسبات پیچیده ریاضی یا کدهای اضافی نیست.* ریسپانسیو خودکار: به راحتی با تغییر سایز مرورگر، ابعاد عنصر متناسب با نسبت تعیین‌شده تغییر میکنه.

نحوه استفاده و مثال‌های کاربردی

نحوه‌ی نوشتن این ویژگی بسیار ساده است. شما فقط کافیه نسبت عرض به ارتفاع رو به شکل عرض / ارتفاع جلوی آن بنویسید:

.square-box {
  width: 100%;
  aspect-ratio: 1 / 1;
}


.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}


.hero-banner {
  width: 100%;
  aspect-ratio: 21 / 9;
}

نکته حرفه‌ای:
شما حتی میتونید مقادیر رو به صورت اعشاری هم وارد کنید؛ مثلاً aspect-ratio: 1.5 دقیقا همان کارکرد aspect-ratio: 3 / 2 رو داره. همچنین ترکیب این ویژگی با object-fit: cover روی تصاویر باعث میشه عکس‌ها بدون به هم خوردن دفرمه شدن، به زیبایی درون قاب خودشان جای بگیرند.

‏Idempotent & Safe methods در HTTP 🌐

‏دو مفهوم مهم HTTP که خیلی وقت‌ها با هم اشتباه گرفته می‌شن: Safe و Idempotent.


‏SAFE METHOD 🛡
‏یه متد وقتی Safe (ایمن) محسوب می‌شه که هدف اصلی ریکوئست فقط خوندن اطلاعات باشه و منجر به تغییر معنادار و عمدی resource نشه.

‏مثلا:

GET /users/1

‏اینجا فقط اطلاعات کاربر رو می‌خونیم. پس GET یه متد safe محسوب می‌شه.

‏البته سرور ممکنه برای این ریکوئست لاگ یا کش ایجاد کنه. این‌ها safe بودن GET رو نقض نمی‌کنن. چون منظور از تغییر، تغییر هدفمند و عمدی هست. مثل عوض کردن نام کاربر.

‏HEAD و OPTIONS هم safe هستن.
اما POST و PUT و PATCH و DELETE برای ایجاد تغییر طراحی شدن.


‏IDEMPOTENT METHOD 🔄
‏idempotent (هم توان؟!) بودن یعنی اگر یه ریکوئست رو چند بار اجرا کنیم اثر نهایی اون روی سرور با اجرای یک‌باره‌ ریکوئست یکسان باشه.

‏به زبون ریاضی:
f(f(x)) = f(x)

‏مثلا ‏اگر این ریکوئست رو هزار بار هم بفرستیم، در نهایت داریم: name = awat

PUT /users/1

{
    "name": "awat"
}

‏پس PUT با اینکه safe نیست، idempotent هست.

‏DELETE هم idempotent محسوب می‌شه:

DELETE /users/1

‏بار اول کاربر حذف می‌شه. ریکوئست‌های بعدی ممکنه 404 برگردونن، اما وضعیت نهایی همچنان اینه که کاربر حذف شده. دقیقا مثل دفعه اول.

‏مشخصه که همه متدهای safe تو دسته idempotentها هم قرار میگیرن.


‏و یه نکته مهم 🧨
‏idempotency فقط به اسم متد وابسته نیست. نحوه‌ پیاده‌سازی اندپوینت هم اهمیت داره.

‏مثلا

PUT /users/1

{
    "operation": "increment_age"
}

‏هر بار که ریکوئست رو می‌فرستیم یه واحد به سن اضافه میشه.

‏اینجا اجرای دوباره ریکوئست، اثر جدیدی ایجاد می‌کنه؛ بنابراین این عملیات idempotent نیست.

‏البته گفتیم HTTP متد PUT رو idempotent معرفی کرده. پس این اندپوینت درست طراحی نشده و برای این عملیات بهتره از PATCH استفاده کنیم.

حالا‏ خود PATCH تو کدوم دسته‌ست؟
ضمانت ‏خاصی براش نداریم. این موضوع به نحوه طراحیمون بستگی داره.

‏مثلا این یه عملیات idempotent هست:

PATCH /users/1

{
    "name": "awat"
}

‏اما اگر همچین اندپوینتی داشته باشیم:

PATCH /users/1

{
    "operation": "increment_age"
}

‏نتیجه می‌شه:
18 >> 19 >> 20

‏پس non-idempotent محسوب میشه.


‌‏POST و خطر Retry ☠️
‏POST رسما idempotent تعریف نشده. این موضوع تو عملیات‌های حساسی مثل تراکنش اهمیت زیادی داره.

‏مثلا:

POST /payments

{
    "amount": 100
}

‏فرض کنید پرداخت با موفقیت انجام می‌شه، اما به هر دلیلی کلاینت برای همین پرداخت دوباره درخواست بفرسته.

‏اگر سرور این دو ریکوئست رو دو تراکنش متمایز در نظر بگیره، مبلغ دو بار از موجودی کاربر کسر میشه.

‏برای جلوگیری از این مشکل می‌تونیم از idempotency key داخل هدر استفاده کنیم:

POST /payments
Idempotency-Key: abc123

{
    "amount": 100
}

‏سرور این کلید و نتیجه تراکنش رو ذخیره می‌کنه. اگر همون ریکوئست دوباره با کلید "abc123" فرستاده شه (retry)، سرور به جای انجام دوباره تراکنش، نتیجه قبلی رو برمی‌گردونه.

البته این کلید باعث نمیشه POST ماهیت idempotent بگیره؛ ما با این مکانیزم صرفا یه عملیات مشخص رو در برابر ریکوئست‌های تکراری مقاوم می‌کنیم.


‏پس دو سوال متفاوت داریم:
‏Safe:

‏هدف از طراحی این عملیات تغییر عمدی در سرور بوده؟

‏Idempotent:

‏اگر همین ریکوئست رو دوباره بفرستیم، وضعیت نهایی سرور مثل نتیجه اجرای اول باقی می‌مونه؟

مطالعه بیشتر در MDN 🤓
Safe
Idempotent
Idempotency-Key header


@awat_dev

اگ طرحی ندارید یا فکر میکنید طرح از کجا بیارید هوش مصنوعی
https://stitch.withgoogle.com/
کمکتون میکنه فقط کافیه بگین چه وبسایتی میخواین بهتون دیزاین رو تحویل میده یعنی تو توضیح می‌دی چه سایتی می‌خوای؛ مثلاً فروشگاه لباس فارسی، و هوش مصنوعی بر اساس توضیحاتت طرح صفحات رو تولید می‌کنه

💾 لوکال استورج در جاوااسکریپت چیه؟
با localStorage می‌تونیم اطلاعات رو داخل مرورگر ذخیره کنیم؛ به‌طوری که بعد از رفرش صفحه یا بستن مرورگر هم باقی بمونن. 🚀

🔹 ذخیره اطلاعات

localStorage.setItem("name", "Mohsen");

🔹 دریافت اطلاعات

localStorage.getItem("name");

🔹 حذف یک مقدار

localStorage.removeItem("name");

🔹 حذف تمام اطلاعات

localStorage.clear();

📌 نکته مهم: مقادیر LocalStorage به‌صورت رشته (String) ذخیره می‌شن. برای ذخیره آبجکت و آرایه از JSON.stringify() و برای بازیابی اون‌ها از JSON.parse() استفاده می‌کنیم.
⚠️ اطلاعات حساس مثل رمز عبور رو داخل LocalStorage ذخیره نکنید.

🚀 یه متد خفن توی جاوااسکریپت: reduce()

با reduce() می‌تونی کل یه آرایه رو به یه مقدار تبدیل کنی؛ مثلاً مجموع اعدادش رو حساب کنی 👇

const nums = [10, 20, 30, 40];

const sum = nums.reduce((acc, num) => acc + num, 0);

console.log(sum); // 100

💡 acc مقدار جمع‌شده‌ست و num عدد فعلی.

خلاصه بگم: هر وقت خواستی آیتم‌های یه آرایه رو پردازش کنی و به یه نتیجه برسی، reduce() به کارت میاد. 😎

یه نکته ای رو میخواستم بگم در مورد کد زدنه

وقتی دارید کد میزنید مراحلی که پیش میرید رو برا خودتون بگید با خودتون حرف بزنید روش حل اون مسئله یا کد رو با خودتون بلند بگید
تست کنید ضرر نمیکنید یهو جرقه میخوره جواب مسئله حل نشدنی که داشتید حل میشه 😜

همیشه شاد باشید.

بچه ها یچیزی دوستانه بهتون بگم وقتی با ویدیو کد میزنید حتمی بعدش چند بار دوباره همون مسئله رو حل کنید کدشو بدون اینکه ویدیو رو ببینید بزنید اونجاست که به خطا و ارور میخورید

با یکبار ویدیو دیدن و یکبار کد زدن یاد نمیگیرید و متوجه نمیشید کامل حتمی بعد ویدیو دوباره کد رو حذف کنید خودتون سعی کنید بدون کمک بزنید کد رو

قول میدم بهتون با اینکار بهتر از قبل تون میشید.

لینک های دانلود دوبله دوره جاوااسکریپت جوناس:

فصل اول - فصل دوم - فصل سوم - فصل چهارم - فصل پنجم - فصل ششم - فصل هفتم - فصل هشتم - فصل نهم - فصل دهم - فصل یازدهم - فصل دوازدهم - فصل سیزدهم - فصل چهاردهم - فصل پانزدهم - فصل شانزدهم - فصل هفدهم - فصل هجدهم - فصل نوزدهم - فصل بیستم

فایل های مورد نیاز دوره

لینک های دانلود دوبله دوره ریکت جوناس:

فصل اول - فصل دوم - فصل سوم - فصل چهارم - فصل پنجم - فصل ششم - فصل هفتم - فصل هشتم - فصل نهم - فصل دهم - فصل یازدهم - فصل دوازدهم - فصل سیزدهم - فصل چهاردهم (چون تقریبا نیازی بهش ندارید، دوبله نشده) - فصل پانزدهم - فصل شانزدهم - فصل هفدهم - فصل هجدهم (بخش اول - بخش دوم) - فصل نوزدهم - فصل بیستم - فصل بیست و یکم - فصل بیست و دوم - فصل بیست و سوم - فصل بیست و چهارم - فصل بیست و پنجم - فصل بیست و ششم - فصل بیست و هفتم - فصل بیست و هشتم - فصل بیست و نهم (بخش اول - بخش دوم - بخش سوم) - فصل سی ام

فایل های مورد نیاز دوره

بزودی یکسری از دوره های رایگان بعضی از مباحث که فکر میکنم خوبن رو قرار میدم

خب یکسری دوره های مربوط به فرانت اند رو میخوام بزارم براتون

دوره html css ( صوفی لرن ) کامل و جامع رایگان

https://youtube.com/playlist?list=PLOjAN00I0bBc&si=ZjnFSxeRlis9WwHE

دوره فلکس باکس ( سالار حقیقت نیا ) رایگان

https://youtube.com/playlist?list=PLprvbQiR3cN-fVGiLy0DrevvfjJaFUNFq&si=AP6fuKwhV63lN6yT

دوره فلکس باکس ( سبز لرن )

https://sabzlearn.ir/course/flex-box/

دوره فلکس باکس ( میلاد بهرامی ) رایگان

https://youtube.com/playlist?list=PLhpS3tgUDZcpcJ9hfsSXZN0xEbNkBcR0n&si=_r9hahFObfmezdy4

دوره سی اس اس گرید ( سبز لرن )

https://sabzlearn.ir/course/css-grid/

دوره تیلویند ( سالار حقیقت نیا )

https://youtube.com/playlist?list=PLprvbQiR3cN9Mt_rINlJX6UOn4utVPBX2&si=86RV8F_6_4SB3rLI

دوره تیلویتد ( میلاد بهرامی )

https://youtube.com/playlist?list=PLhpS3tgUDZcp1fZLQu5I58ubM8B5ahBya&si=sKVvaBAFt10mcmk0

دوره گیت و گیت هاب ( میلاد بهرامی )

https://youtube.com/playlist?list=PLhpS3tgUDZcpamFNTdjXyRKzFGaBAkcLq&si=s6X7aqx2WXVPpeyK

دوره جاواااسکریپت

صوفی لرن (پیشنهادی) پولی
https://soufilabs.ir/pages/single-course.html?course=khore-javascript


دوره جاوالسکریپت ( سالار حقیقت نیا )

https://youtube.com/playlist?list=PLprvbQiR3cN_s_scnGOn8hsp0QFHLz4uD&si=4tBMJ--G7f4phwfW

دوره جاوااسکریپت و ریکت ( جوناس )

https://t.me/undefinedee/273

همیشه در حال پیدا کردن بهترین کامیت:😂😂

منم همینطور 😂😂

میخوام در مورد سوالی که همیشه مطرح میشه نظر خودمو بگم

همیشه افرادی هستن که براشون سواله آیا با پیشرفت هوش مصنوعی خوبه من حوضه فرانت اند رو ادامه بدم یا نه؟ یا اصلا بیام سمت برنامه نویسی یا نه هوش مصنوعی جای برنامه نویس ها رو میگیره؟

نوع سوال ها فرق داره اما وقتی وارد میشی تهش میرسیم به جایگاه برنامه نویس و هوش مصنوعی

دوستان به نظر من هوش مصنوعی العان در حال حاضر جای برنامه نویس رو نمیگیره و توی کد زدن به برنامه نویس کمک میکنه که سرعت کد زدنش افزایش پیدا بکنه و پروژه رو در زمان کمتری کامل کنه
هوش مصنوعی جای برنامه نویس های جونیور و سینیور رو نمیگیره فقط داره نحوه کار برنامه نویسا رو تغییر میده
هوش مصنوعی همینطور که گفتم یه ابزاره که به برنامه نویس کمک میکنه اما تضمین کننده نتیجه نیست
هوش مصنوعی میتونه کد بزنه اما برنامه نویس باید کد رو تمیز کنه باید امنیت و عملکرد اون کد با نیاز پروژه رو بررسی کنه
در ضمن کد نویسی فقط کد نویسی نیست ، فهم مسئله راه حل برای حل مشکل پروژه معماری دیباگ کردن و تصمیم گیری فنی پروژه بخش مهمی هستن که توسط برنامه نویس انجام میشه و هوش مصنوعی نمیتونه جاش رو بگیره

به جای ترسیدن از هوش مصنوعی یاد بگیریم چطور ازش استفاده کنیم تا بتونیم خروجی بهتری بگیریم

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

متد includes در جاوااسکریپت

این متد یکی از کاربردی ترین متد های جاوااسکریپت که داخل آرایه و یا یک متن رو بررسی میکنه و میبینه که مثلا عدد ۵ داخل آن وجود داره یا نه

مثال برای آرایه :

const fruits = ["apple", "banana", "orange"];

console.log(fruits.includes("banana");  // true 

console.log(fruits.includes("grape");  // false 

در مثال بالا میبینید که ما یک متغییر تعریف کردیم به نام fruits که داخلش یک آرایه قرار دادیم و داخل آرایه چند مقدار گذاشتیم

پایین متغییر لاگ گرفتیم برای بررسی و متد includes رو روی متغیر fruits فراخانی میکنیم

این متد میاد داخل متن یا آرایه دنبال کلمه ای که مشخص کردیم میگرده اگر وجود داشت اون مقدار داخل آرایه یا متن در جواب true رو بر میگردونه ولی اگر وجود نداشت false رو بر میگردونه

خب حالا بریم سراغ مثال متنی

const text = "I love JavaScript";

console.log(text.includes("JavaScript")); // true
console.log(text.includes("Python"));     // false

در مثال بالا یک متن هست که یک متن در مورد جاوااسکریپت نوشته شده داخل متغیر و بعد لاگ گرفته و با متد includes اول دنبال کلمه Javascript بوده که چون داخل کلمه داخل متن هست مقدار true رو بر میگردونه

داخل لاگ بعدی دنبال کلمه Python بوده و چون داخل متن نبوده false رو برگردونده

📌 متد forEach در جاوااسکریپت

متد forEach برای پیمایش آرایه و اجرای یک تابع برای هر عنصر استفاده می‌شه.

🔹 مثال کاربردی:

const names = ["Ali", "Sara", "Mohsen"];

names.forEach((name) => {
  console.log(name);
});

📤 خروجی:

Ali
Sara
Mohsen

💡 چند نکته مهم:

- روی هر عنصر آرایه، تابع رو اجرا می‌کنه.
- به‌صورت پیش‌فرض مقدار جدیدی برنمی‌گردونه ("undefined").
- برای متوقف کردن حلقه با break مناسب نیست.
- اگه به اندیس هر عنصر نیاز داشته باشی، می‌تونی پارامتر دوم رو بگیری:

names.forEach((name, index) => {
  console.log(index, name);
});

✅ کِی ازش استفاده کنیم؟

وقتی می‌خوای روی تمام عناصر آرایه عملی انجام بدی؛ مثلاً نمایش نام‌ها، چاپ اطلاعات یا اضافه کردن رویداد به عناصر صفحه.

موقع کد زدن گوش بدید ❤️

توی تلگرام باگ جدیدی پیدا شده که با کلیک روی این لینک اکانت تلگرام شما پاک میشه.

روی هر لینکی کلیک نکنید!