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

@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

خبر ماله ۶ ساعت قبله

پس تا انترنت بازه لذت ببرید

@h0meCode

بیا باهم فرض کنیم که یک کامپوننت React ساختیم. اول همه‌چیز مرتبه، اما با اضافه شدن قابلیت‌های جدید، کدها شلوغ میشن. حالا پیدا کردن یک باگ مثل پیدا کردن سوزن تو انبار پر از کاهه٬ و تغییر یک قسمت ممکنه که قسمت دیگری رو خراب کنه. تنها راهیی که داریم اینکه کد رو بازآرایی (Refactoring) کنیم حالا از کجا باید شروع کنیم؟
شما درین مقاله خواهید فهمید که از کجا باید شروع کنید قبل شروع باید چکار کنید؟

پ.ن:مقاله به زبان فارسیه.

🔗 Link

@h0meCode

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

آموزش CSS و ساخت انیمیشن‌های جذاب

یادگیری عمیق React

فهمیدن دلیل رفتار کدها، نه فقط حفظ کردنشون

مثال‌های تعاملی برای امتحان کردن چیزهایی که یاد می‌گیری

هدف اینه که فقط کد ننویسی؛ بفهمی پشت صحنه چه اتفاقی می‌افته!
درعین حال یه رابت کاربریه دل نشینی داره.

پ.ن:حتما ازین سایت برای افزایش دانش فرانتتون استفاده کنید.

@h0meCode

یه نکته در خصوص فن بیان بگم :
اگر تو جمعی داشتین صبحت میکردین و احساس کردین که تمرکزشون داره کم میشه به حرف های شما به مدت ۵ یا ۱۰ ثانیه مکث(سکوت) کنین و بعد ادامه بدین.
این مکث کردن ها خیلی مفیده و باعث میشه که دوباره شنونده به حرف شما گوش کنه.

@h0meCode

۸ کانال یوتیوب که اگه برنامه‌نویسی می‌کنی، بهتره بشناسی!

۱. برای دنبال کردن اخبار و ترندهای تکنولوژی
🔹 Fireship
ویدیوهای کوتاه، سریع و جذاب درباره تکنولوژی، برنامه‌نویسی و هوش مصنوعی؛ مخصوص وقتایی که حوصله ویدیوهای طولانی نداری.

🔹 ThePrimeTime
برای وقتایی که فقط خبر خوندن کافی نیست و دوست داری درباره اتفاقات دنیای برنامه‌نویسی بیشتر بدونی و تحلیل‌های متفاوت بشنوی.

🔹 Theo (t3.gg)
اگه با React، Next.js و ابزارهای جدید وب سروکار داری، ویدیوهاش می‌تونن کمکت کنن از تغییرات و بحث‌های روز این حوزه عقب نمونی.

۲. برای یادگیری و ساخت پروژه
🔹 freeCodeCamp
یه منبع عالی برای یادگیری رایگان؛ از پایتون و طراحی وب گرفته تا بک‌اند، دیتابیس و هوش مصنوعی. خیلی از آموزش‌هاش هم پروژه‌محورن.

🔹 Traversy Media
اگه دوست داری به‌جای تئوری، بیشتر دست‌به‌کد بشی، آموزش‌ها و پروژه‌های این کانال انتخاب خوبین.

🔹 Web Dev Simplified
برای یاد گرفتن مفاهیم جاوااسکریپت و فرانت‌اند به زبون ساده و قابل‌فهم، مخصوصاً وقتی یه مفهوم برات جا نمی‌افته.

۳. برای عمیق‌تر شدن توی بک‌اند و معماری سیستم
🔹 ByteByteGo
اگه برات سواله سیستم‌های بزرگی مثل نتفلیکس چطور کار می‌کنن یا چطور باید یه سیستم مقیاس‌پذیر طراحی کرد، این کانال رو از دست نده.

🔹 Hussein Nasser
برای کسایی که می‌خوان فراتر از کدنویسی برن و درباره دیتابیس، شبکه، بک‌اند و چیزایی که پشت صحنه اتفاق می‌افته بیشتر بدونن.

اینو مثل یه گنج پیش خودت نگهش دار.

@h0meCode

بازی GTA 1 (نسخه ۱۹۹۷) رو توی مرورگرت بازی کن!

یک توسعه‌دهنده وب تونسته موتور بازی خاطره‌انگیز GTA 1 رو از صفر و با استفاده از JavaScript و WebGL بازسازی کنه!

نکته جالب‌تر؟ نویسنده پروژه گفته که بیشتر بخش‌های کدنویسی این بازی رو با کمک هوش مصنوعی Gemini انجام داده!
پروژه هنوز کاملاً کامل نشده، اما الان هم به راحتی داخل مرورگر (بدون نیاز به نصب هیچ ابزاری) قابل بازی کردنه.
اسم این پروژه یی که شروع کرده گذاشته GTA.js.

🔗 Game

@ClickUniversity

پیشنهاد میکنم یک بار هم که شده بازیش کنید تجربه خوبی رو داره

@ClickUniversity