انگار این ماه اکتبر ماهیه که همه دارن آپدیت میدن.

این nextjs هم اومد آپدیت داد اما آپدیت معمولی نداد که یه دو تا باگ ساده رو فیکس کنه.
تمرکز اصلی این آپدیت روی سرعت توسعه، کاهش حجم، React 19.3 و ابزارهای AI Agent هستش.
برای اطلاعات بیشتر روی این متن کلیک کنید.

@ClickUniversity

وقتشه ماهم خودمونو یه تکونی بدیم اپدیت بشیم

همونطوری که میدونید و احتمالا هم خبر داشته باشید
فایرفاکس یه وی پی ان اضافه کرده داخل مرورگرش که ۵۰ گیگ ترافیک میده در صورتیکه وارد اکانت موزیلا خودت شده باشی.
به نظرم باید ازین کارش تقدیر کردو و استفاده کرد.
روی نت همراه اول خوب جواب میده.

فک کنم قبلا هم اشاره کردم یا نکردم دقیقا یادم نمونده.
خوب اشکال نداره دوباره میگم.
فرض کنید که داخل یه شرکت استخدام شدید و شمارو پای پروژه میزاره و توهم هیچی نمیدونی ازین کد ها تا زمانی که بخونیش.
خوب ایا مثل کتاب میخونی از بالا به پایین یا با قواعد میری جلو؟
فکرشو بکن پروژه با ابعاد بزرگ نه کوچیک اون هم بزرگ میخوای چکار کنی٬از بالا به پایین خوندن کد اون هم میان چند ده تا فایل!؟
اینجاست که این مقاله به عنوان منجی ظاهر میشه برات٬ حتما این مقاله رو بخونید مقاله با عنوان چطور کد بخونیم هست.
پیشنهاد من لینک مقاله رو به AI بدید و ازش بخوایید که عمیق و با مثال توضیح بده اگه زبانتون خوب نیست.

@h0meCode

گاهی خطرناک‌ترین راه برای دورزدن یک قفل، شکستن قفل نیست؛ راضی‌کردن صاحب کلید است.

@h0meCode

چرا بهترین برنامه نویس ها دارن کوچ میکنن به سمت لینوکس؟

ببین در ظاهر شاید این سوال ساده باشه و سریع جواب بدی و بگی : اره چون سبکه و مصرف رم کمتری داره بهتره و ازین جواب های کلیشه‌یی.
اما موضوع عمیق تر از اون چیزی هست که فکر میکنی، پیشنهاد من اینکه این ویدیو یوتیوب رو ببین تا دید عمیق تری داشته باشی نسبت به این موضوع و بفهمی که چرا بهترین برنامه‌نویس ها میرن سمت لینوکس.

@ClickUniversity

بقول یه دوستی:
بازار عاشق یک چیزه
عاشق حرفه ای هاست

@h0meCode

🚨 فقط با تغییر یک عدد، ممکنه اطلاعات دیگران رو ببینی!

تصور کن وارد حساب کاربریت شدی و آدرس پروفایلت اینه:
example.com/api/users/101
حالا فقط عدد 101 رو به 102 تغییر می‌دی…
و ناگهان اطلاعات یک کاربر دیگه برات نمایش داده می‌شه!
به این آسیب‌پذیری می‌گن IDOR.

🔍 این IDOR چیه؟
مخفف Insecure Direct Object Reference هست؛ یعنی برنامه به کاربر اجازه می‌ده با تغییر شناسهٔ یک منبع، به اطلاعاتی دسترسی پیدا کنه که مجوز دیدنش رو نداره.
مثلاً ممکنه یک سایت برای هر کاربر شناسه‌ای داشته باشه:
👤 کاربر 101 ← اطلاعات حساب خودش
👤 کاربر 102 ← اطلاعات حساب شخص دیگه
مشکل زمانی اتفاق می‌افته که سرور فقط بررسی کنه کاربر وارد حساب شده یا نه، اما بررسی نکنه که آیا اجازهٔ دسترسی به اطلاعات موردنظر رو هم داره یا نه!

🧪 یک مثال ساده برای برنامه‌نویس‌ها
فرض کن این API رو داری:
GET /api/users/101
کد ناامن ممکنه تقریباً این شکلی باشه:

app.get("/api/users/:id", async (req, res) => {
  const user = await userRepository.findOneBy({
    id: Number(req.params.id),
  });

  res.json(user);
});

این کد کاربر رو پیدا می‌کنه، اما به‌تنهایی بررسی نمی‌کنه که درخواست‌کننده اجازهٔ مشاهدهٔ اطلاعات اون کاربر رو داره یا نه.
🛡 چطور جلوش رو بگیریم؟
✅ هویت کاربر رو از سیستم احراز هویت معتبر بگیر.
✅ قبل از نمایش اطلاعات، مجوز دسترسی به همون منبع رو بررسی کن.
✅ برای اطلاعات خصوصی، صرفاً به مخفی بودن شناسه‌ها اعتماد نکن؛ شناسهٔ تصادفی هم جای کنترل دسترسی رو نمی‌گیره.
✅ برای هر درخواست، دسترسی رو در سمت سرور اعتبارسنجی کن.

نکتهٔ مهم: ورود موفق به سایت به معنی اجازهٔ دسترسی به اطلاعات همهٔ کاربران نیست!

@h0meCode

وقتی بینهایت تب باز کردی توی VS Code و نمیتونی همه رو دونه دونه ببندی

Ctrl + k

و بلافاصله W رو بزن.
سورپرایز میشی \;

#تکنیک
🐾 @CodeCat_Dev

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

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

Link

@h0meCode

کار با CSS در جاوااسکریپت قراره ساده‌تر بشه!

🧑‍💻 خوب حالا این CSS Typed OM چیه؟

وقتی با JavaScript استایل یک عنصر رو می‌خونیم، معمولاً مقادیر CSS رو به‌صورت رشته دریافت می‌کنیم؛ مثلاً 100px. برای انجام محاسبات روی این مقدار، باید رشته رو پردازش کنیم و واحدش رو جدا کنیم.

اما CSS Typed OM این امکان رو فراهم می‌کنه که مقادیر CSS رو به‌صورت آبجکت‌های جاوااسکریپت با نوع مشخص مدیریت کنیم! خلاصه بگم واحد css و مقدار عددی رو از هم جدا میکنه.
📌 یک مثال ساده:
در روش معمول:

const styles = getComputedStyle(element);

console.log(styles.width);
// "100px"

با CSS Typed OM:

const width = element.computedStyleMap().get("width");

console.log(width.value); // 100
console.log(width.unit);  // "px"

حالا می‌تونیم مقدار عددی و واحد CSS رو جداگانه دریافت کنیم و راحت‌تر باهاشون کار کنیم.
✨ خبر جذاب‌تر چیه؟
توسعه‌دهنده‌ای به نام Bramus یک Polyfill با نام css-typed-om منتشر کرده که تلاش می‌کنه این API رو در مرورگرهایی که پشتیبانی بومی مناسبی ندارن، در دسترس قرار بده.
📦 نصب با npm:

npm install css-typed-om

و استفاده در پروژه:

import "css-typed-om";

🎯 این CSS Typed OM کجا کاربرد داره؟
▫️ ساخت کتابخانه‌های انیمیشن
▫️ محاسبات پیچیده روی مقادیر CSS
▫️ کار با واحدهای مختلف CSS
▫️ توسعه ابزارهای پیشرفته فرانت‌اند

پ.ن: پشتیبانی مرورگرها یکسان نیست و Polyfill هم نمی‌تونه تمام قابلیت‌های پشتیبانی‌نشده موتور CSS رو اضافه کنه.

@h0meCode

الان تلگرام بهم ی زیر ساختی داده برای لانچ کردن ربات دیکه خداحافظی با هاست.

ربات باید با جاوااسکریپت ساخته بشه😂

@h0meCode

مگه غیر اینه.

@h0meCode

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

@Igyuhhh_bot

و اینم از اولین ربات که روی این سرویس لانچه.

و همونطوری که گفتم باید کد ها با زبان js زده بشه
و یکمی سخته ارتباط گرفتن باهاش.
این رباتی که ساختم کد هاشو از ai گرفتم و اینکه کار ساده یی رو انجام میده نمایش اطلاعات اکانت شما.

و جالبی ماجرا اینجاست که با هر VPN حال نمیکنه به سختی تونستم به یه اپی تمیز وصل بشم اونم با windscribe که جواب گو بود.

منظور از محیط توسعه یعنی اینکه حالت توسعه لایو نداره که مثلا من بیام کد رو تغییر بدم همون لحظه تغییرات رو در ربات ببینم بدون اینکه کدهارو پوش بکنم.

@h0meCode

🚀 میانبرِ میان‌برها: چرا Supabase بازیِ ساختِ اپلیکیشن رو عوض کرد؟

تا حالا شده یه ایده‌ی خفن تو سرتون داشته باشید، ولی وقتی فکر کردید که چقدر باید درگیر تنظیم سرور، نوشتن کدهای تکراریِ لاگین، کانفیگ دیتابیس و مدیریت فایل بشید، کلاً پشیمون بشید؟ حقیقت اینه که ساختن بک‌اند از صفر، گاهی اوقات مثل این می‌مونه که برای پختن یه املت، اول برید مرغداری بزنید!

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

یه مثال ساده خارج از دنیای کد
فرض کنید می‌خواهید یک کافه‌ی مدرن افتتاح کنید.

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

روش Supabase: کلید یک کافه‌ی آماده، مجهز و مدرن رو بهتون تحویل می‌دن؛ دستگاه‌های قهوه‌ساز وصله، سیستم حسابداری فعاله، دزدگیر روشنه و درِ کافه بازه. شما فقط روی طعم قهوه و جذب مشتری تمرکز می‌کنید.

این Supabase دقیقاً همین کافه‌ی آماده‌ست برای برنامه‌نویس‌ها!

سورسِ ماجرا چیه و چطور کار می‌کنه؟
سوپابیس در واقع یک جایگزین متن‌باز (Open Source) برای فایربیسه که مغزِ متفکرش یک دیتابیس قدرتمند به اسم PostgreSQL هست. این یعنی شما همون راحتی و سرعتِ سرویس‌های ابری رو دارید، اما پشت صحنه به یک دیتابیس رابطه‌ایِ فوق‌العاده حرفه‌ای وصل هستید.

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

دیتابیس SQL آماده با رابط کاربری گرافیکی جذاب و منظم

احراز هویت (Authentication) کاربران با ایمیل، گوگل، گیت‌هاب و... فقط با یک کلیک

تولید خودکار API (هم REST و هم Realtime) بدون اینکه حتی یک خط کد اضافه برای روت‌ها بنویسید

بخش Storage برای آپلود و مدیریت فایل‌ها، آواتارها و تصاویر کاربران

سوپابیس چه فرقی با بقیه گزینه‌ها داره؟
بیایید اون رو با ابزارهای دیگه مقایسه کنیم تا تصویرش روشن‌تر بشه:

در مقایسه با PostgreSQL خام: پست‌گرس پادشاه دیتابیس‌های رابطه‌ایه، اما راه‌اندازی و نگهداری سرورش، تنظیم امنیتِ ردیف‌ها (RLS) و ساختن لایه‌ی API براش زمان‌بره. سوپابیس تمام این کارهای خسته‌کننده رو بسته‌بندی کرده و آماده‌ست.

در مقایسه با فایربیس (Firebase): فایربیس بر پایه‌ی دیتابیس NoSQL (Firestore) ساخته شده که برای داده‌های پیچیده و رابطه‌ای گاهی دردسرساز میشه. از طرفی فایربیس کاملاً انحصاریِ گوگل است؛ اما سوپابیس متن‌بازه، قفل‌شدگیِ شرکتی (Vendor Lock-in) نداره و هر وقت خواستید می‌تونید کل سیستم رو روی سرور شخصی خودتون بیارید بالا.

در مقایسه با MongoDB: مونگو دی‌بی برای داده‌های غیرساختاریافته عالیه، اما مدیریت رابطه بین داده‌ها توش به مراتب سخت‌تر از جدول‌های مرتبِ سوپابیس (که روی پایه‌ی قدرتمند SQL کار می‌کنن) است.

کلام آخر
اگر می‌خواهید پروژه‌ی بعدی‌تون رو با سرعتِ جت جلو ببرید، درگیر پیچیدگی‌های فرساینده‌ی سرور و امنیت نشید و در عین حال قدرتِ یک دیتابیس واقعی و حرفه‌ای رو زیر دستتون داشته باشید، سوپابیس دقیقاً همون چیزیه که بهش نیاز دارید. زمانِ طلاست؛ به‌جای بازآفرینیِ چرخ، سوارِ موشک بشید! 🚀

@h0meCode

هوش مصنوعی تو صنعت آهنگ ریده
حالم داره ازین اهنگ هایی که ai ساخته بهم میخوره

@h0meCode

یک گنجینه برای توسعه‌دهندگان فرانت‌اند!

اگه برنامه‌نویس فرانت‌اند هستی و همیشه دنبال ابزارهای جدید، کتابخانه‌های کاربردی و منابع آموزشی می‌گردی، این ریپازیتوری گیت‌هاب رو از دست نده!

Frontend Resources

این ریپازیتوری مجموعه‌ای از منابع مفید برای توسعه‌دهندگان فرانت‌اند رو در یک جا جمع‌آوری کرده تا راحت‌تر ابزارهای موردنیازت رو پیدا کنی.
چه چیزهایی می‌تونی پیدا کنی؟

منابع یادگیری HTML و CSS

ابزارها و منابع JavaScript و TypeScript

کتابخانه‌ها و ابزارهای React
منابع طراحی UI/UX
ابزارهای تست و دیباگ
ابزارهای بهینه‌سازی عملکرد وب‌سایت

منابع امنیت و توسعه وب

ابزارها و سرویس‌های کاربردی برای توسعه‌دهندگان

چرا ارزش بررسی داره؟

به‌جای اینکه برای پیدا کردن هر ابزار ساعت‌ها جست‌وجو کنی، می‌تونی از این مجموعه شروع کنی و منابع موردنیازت رو سریع‌تر پیدا کنی.

@ClickUniversity

سلام به عزیزان گلم
یادتون هست که قبل یه پست گذاشتم در باره اینکه چطور کد رو بخونیم.
اما من اومدم اونرو با مثال و ساده توضیح دادم البته با کمک ai چون کار سریعتر بیش بره
و شماه میتونید با لینک زیر ٬مقاله رو بخونید.

https://aboli.me/articles/howReadCode.html

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

@h0meCode

چ کسی درین مبارزه پیروز خواهد بود؟😂

Nodejs or python?

#fun

@h0meCode