🔶 سایت Upload.am یک سرویس آپلود و دانلود ارمنستانی است که ۲۵ گیگابایت فضای رایگان در اختیار کاربران قرار می‌دهد.

همچنین، امکان خرید پلن ‌های آن با ارز های دیجیتال فراهم است؛ بنابراین کاربران ایرانی می‌توانند بدون دردسر و با استفاده از ارز دیجیتال، پلن خود را ارتقا دهند.

البته نسخه Free فقط فایل ها در ۳۰ روز نگه می دارد و بعد از آن حذف می شوند و اگر می خوای فایل ها حذف نشوند باید نسخه Keep رو خریداری کنید.

https://upload.am

#معرفی

سلام، خسته نباشید 🌱
یه نکته‌ی کوچیک راجع به Tailwind CSS می‌خواستم بگم که شاید به کارتون بیاد.

توی طراحی معمولاً برای هر سکشن یا بخشی که می‌خوایم پیاده‌سازی کنیم، یه Width، Height و... مشخص شده که معمولاً بر اساس Pixel هست.

حالا برای تبدیل این مقدارها به مقادیر Tailwind، معمولاً می‌تونیم از مقادیر موجود توی داکیومنت خود Tailwind استفاده کنیم؛ ولی خب بعضی وقتا ممکنه داکیومنت برامون باز نشه، بهش دسترسی نداشته باشیم یا اصلاً حوصله‌ی باز کردنش رو نداشته باشیم 😄

اینجا یه راه خیلی ساده داریم 👇

مثلاً فرض کنید عرض سکشن ما 250px هست و می‌خوایم مقدار مناسبش رو برای Tailwind پیدا کنیم.

کافیه 250 رو تقسیم بر 4 کنیم:

250 ÷ 4 = 62.5

پس مقدار Tailwind ما میشه:

w-62.5

البته بسته به نیازتون می‌تونید مقدار رو گرد کنید و از "w-62" یا مقدار دقیق‌تر استفاده کنید.

🔸 دلیلش هم اینه که مقیاس پیش‌فرض Tailwind معمولاً بر اساس هر واحد = 0.25rem هست که در تنظیمات پیش‌فرض، معادل 4px در نظر گرفته میشه.

پس به‌صورت خلاصه:

Pixel ÷ 4 = مقدار Tailwind

مثلاً:

100px → 25
200px → 50
250px → 62.5
400px → 100

یه ترفند ساده‌ست، ولی وقتی زیاد با Tailwind کار کنید، خیلی به دردتون می‌خوره. 🚀

📌 حلقه‌ها در جاوااسکریپت؛ کدت رو چندباره کن بدون خستگی!

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



🔁 for کلاسیک
وقتی تعداد دفعات مشخصه:

for (let i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

🔁 while
وقتی شرط نامشخصه و ممکنه اصلاً اجرا نشه:

let n = 3;
while (n > 0) {
  console.log(n--);
}

🔁 do...while
حداقل یک بار اجرا میشه، حتی اگر شرط غلط باشه:

let x = 10;
do {
  console.log(x);
} while (x < 5); // چاپ ۱۰

🔁 for...of (مدرن)
برای آرایه‌ها و اشیاء قابل تکرار (iterable):

const colors = ['red', 'green', 'blue'];
for (let c of colors) {
  console.log(c);
}

🔁 for...in
برای کلیدهای object (با احتیاط استفاده کن):

const user = {name: 'Ali', age: 25};
for (let key in user) {
  console.log(key, user[key]);
}

⚠️ نکته مهم:
از for...in روی آرایه استفاده نکن (ترتیب رو رعایت نمیکنه و خواص اضافی رو هم میاره). به جاش از for...of یا forEach استفاده کن.

✅ عملکرد:
حلقه‌های for و while سرعت بالایی دارن، ولی برای خوانایی کد، for...of و متدهای مدرن مثل map، filter رو ترجیح بده.

🔴 امروز 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

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

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

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

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

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

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

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

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