آموزش برنامه نویسی | init_code
3.92K subscribers
18 photos
398 videos
8 files
17 links
💻 از اولین خط کد تا اجرای پروژه.

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

🛠 کد بزن، بساز، تکرار کن.

زیر مجموعه تیم شب تاب
Download Telegram
🌱 روز مهندس مبارک 💻

به همه‌ی مهندس‌های کامپیوتر؛
از برنامه‌نویسی و شبکه
تا امنیت، آزمون‌های IT و هوش مصنوعی

مهندسی یعنی
حل مسئله،
ساختن راه‌حل،
و جلو بردن دنیا با منطق و دانش.

اگه امروز اینترنت، نرم‌افزار و دنیای دیجیتال سر پاست،
به‌خاطر فکر مهندس‌های کامپیوتره 🚀
2
🔥 Race Condition

(شرط مسابقه؛ وقتی دو تا نخ کامپیوتر رو به گا می‌دن!)

تا حالا شده یه برنامه بنویسی، ۹۹٪ مواقع درست کار کنه، یه موقع خاص بترکونه؟ احتمالاً مشکلت Race Condition بوده. یعنی دو تا ترد (Thread) همزمان رفتن سراغ یه دیتا و به هم ریختن!

---

🧠 ماجرا چیه؟

فرض کن دو تا نفر می‌خوان همزمان از یه در وارد بشن. گیر می‌کنن وسط. توی برنامه‌نویسی هم همینطوره. دو تا ترد همزمان می‌آن یه متغیر رو تغییر می‌دن، نتیجه چیزی می‌شه که انتظار نداری!

---

💣 مثال کلاسیک (حساب بانکی):

balance = 1000

def withdraw(amount):
if balance >= amount: # خط ۱: چک کردن موجودی
balance -= amount # خط ۲: برداشت پول

حالا دو تا ترد همزمان می‌آن ۱۰۰۰ تومن بردارن:

· ترد A: خط ۱ رو می‌خونه، می‌بینه موجودی هست
· ترد B: خط ۱ رو می‌خونه، می‌بینه موجودی هست (هنوز A کم نکرده!)
· ترد A: خط ۲ رو اجرا می‌کنه، balance میشه ۰
· ترد B: خط ۲ رو اجرا می‌کنه، balance میشه -۱۰۰۰

نتیجه: یکی ۱۰۰۰ تومن اضافه برداشت کرد!

---

🎭 سناریوی واقعی (فاجعه Knight Capital):

سال ۲۰۱۲، شرکت Knight Capital یه باگ Race Condition توی سیستم معاملاتیش داشت. توی ۴۵ دقیقه، ۴۴۰ میلیون دلار ضرر کردن. تقریباً ورشکست شدن. همه‌ش به خاطر یه باگ کوچولوی هم‌زمانی!

---

🛠 راه‌حل‌ها:

۱. Lock (قفل):

import threading

lock = threading.Lock()
balance = 1000

def withdraw(amount):
with lock: # فقط یه ترد می‌تونه وارد این بخش بشه
if balance >= amount:
balance -= amount

۲. Atomic Operations:
بعضی عملیات‌ها ذاتاً امن هستن. مثلاً counter += 1 توی پایتون امن نیست، ولی توی زبان‌های دیگه می‌شه از متغیرهای اتمی استفاده کرد.

۳. Transactional Memory:
مثل دیتابیس فکر کن. یا همه عملیات انجام بشه، یا هیچکدوم.

---

📊 انواع Race Condition:

نوع توضیح مثال
Check-Then-Act چک می‌کنی بعد اقدام می‌کنی همون مثال حساب بانکی
Read-Modify-Write می‌خونی، تغییر می‌دی، می‌نویسی counter++
Double-Checked Locking دو بار چک می‌کنی توی Singleton pattern

---

🛡️ ابزارای پیدا کردن Race Condition:

ابزار زبان کاربرد
ThreadSanitizer C/C++/Go آنالیز همزمانی
Intel Inspector C++ تجاری و حرفه‌ای
Checker Framework Java بررسی تایم‌های کامپایل
RaceR Python بررسی کد پایتون

---

🔥 مثال توی وب (وب‌سایت‌ها):

توی وب هم Race Condition هست. مثلاً:

· کد تخفیف رو چند بار بزنی
· ثبت سفارش رو همزمان بزنی
· انتقال موجودی رو همزمان بزنی

همه اینا می‌تونن باگ امنیتی ایجاد کنن.

---

#RaceCondition #Concurrency #ThreadSafety #ParallelProgramming #PythonThreading #Mutex #Semaphore #AtomicOperation #KnightCapital #SoftwareBug #Programming #Coding #SoftwareEngineering #WebSecurity #CriticalSection #Deadlock #شرط_مسابقه #برنامه‌نویسی_همزمان #باگ_نرم‌افزاری #امنیت_برنامه‌نویسی #آموزش_برنامه‌نویسی

---

هزاران آموزش برنامه‌نویسی
@init_code

---

تا حالا با Race Condition تو کدت مواجه شدی؟
می‌دونستی یه باگ کوچولو ۴۴۰ میلیون دلار ضرر زد؟
به نظرت چطور میشه از این باگ‌ها جلوگیری کرد؟
اگه این پست به دردت خورد، ریکشن بزن. حمایت نکنی، می‌آم ترد می‌ندازم تو کدت! 😂
👍3
درود رفقا ...👋
حالتون چطوره ؟
👌3
🎓 چرا داشتن نمونه‌کار از مدرک مهم‌تره؟!

یه سؤال... 🤔

فرض کنید دو نفر برای استخدام اومدن.

👤 نفر اول:

- ۱۰ تا مدرک رنگارنگ داره.
- کلی دوره گذرونده.
- اما وقتی می‌پرسی «چی ساختی؟» میگه: «فعلاً چیزی نساختم...» 😐

👤 نفر دوم:

- شاید فقط چند تا دوره دیده باشه.
- ولی یه سایت طراحی کرده، یه اپلیکیشن ساخته، چند تا پروژه روی گیت‌هاب داره و می‌تونه کارهاش رو نشون بده. 😎

حالا به نظرتون شرکت کدومو انتخاب می‌کنه؟ 👀

جواب تقریباً مشخصه...

شرکت‌ها دنبال کسی هستن که بتونه کار انجام بده، نه کسی که فقط ثابت کنه چند تا ویدیو دیده! 😅

مدرک خوبه، ولی مدرک به تنهایی نمیگه شما بلدی باگ حل کنی، پروژه جمع کنی یا توی یه تیم کار کنی.

اما نمونه‌کار یه چیز دیگه‌ست...
نمونه‌کار یعنی:
💻 «ببین! اینو خودم ساختم.»

این جمله از هزار تا مدرک تأثیرگذارتره. 🔥

پس اگه تازه شروع کردین، به جای اینکه فقط دوره پشت دوره ببینین، دست به کد بشین.

حتی یه ماشین‌حساب ساده، یه لیست کارها (To-Do)، یه سایت شخصی یا یه پروژه کوچیک، ارزشش از ده‌ها ساعت آموزش بدون تمرین بیشتره.

🎯 یادتون باشه:

برنامه‌نویس با پروژه رشد می‌کنه، نه با جمع کردن PDF و مدرک!

حالا نوبت شماست... 👇

اگر امروز بخواین خودتون رو به یک شرکت معرفی کنین، چند تا پروژه دارین که با افتخار نشونشون بدین؟ 👀


مرجع تخصصی آموزش برنامه نویسی
@init_code
🔥31
حالا نمونه کار چی بزنیم ؟🥴
🥰4
🚀 کدنویسی تمیز؛ تفاوت یک برنامه‌نویس معمولی و حرفه‌ای!
یه سؤال مهم... 🤔
فرض کنید دو برنامه‌نویس وارد یک تیم می‌شن.
👤 برنامه‌نویس اول:
کدهاش اجرا می‌شن.
پروژه رو تحویل می‌ده.
اما وقتی نفر بعدی کدهاشو می‌بینه، چیزی جز پیچیدگی و سردرگمی پیدا نمی‌کنه! 😐
👤 برنامه‌نویس دوم:
کدهاش خوانا و مرتب هستن.
اسم متغیرها معنی دارن.
هر بخش از برنامه وظیفه مشخصی داره.
هر کسی می‌تونه کدهاشو بفهمه و توسعه بده. 😎
حالا به نظرتون کدوم برنامه‌نویس ارزش بیشتری برای یک تیم داره؟ 👀
جواب مشخصه...
شرکت‌ها فقط دنبال کسی نیستن که «کد بزنه»؛
دنبال کسی هستن که کد درست، قابل فهم و قابل توسعه بنویسه. 🔥
کدنویسی تمیز یعنی:
کدی که خودت چند ماه بعد هم بفهمیش.
کدی که هم‌تیمی‌هات ازش متنفر نشن! 😄
کدی که راحت‌تر تغییر کنه و باگ کمتری داشته باشه.
یادتون باشه:
💻 کدی که فقط کامپیوتر بفهمه کافی نیست؛ انسان‌ها هم باید بتونن بخوننش.
چند نکته ساده برای شروع:
🔹 اسم‌های واضح برای متغیرها انتخاب کن.
🔹 کدهای تکراری ننویس.
🔹 توابع کوتاه و مرتب بساز.
🔹 همیشه به فکر کسی باش که بعداً کد تو را می‌خواند.
🎯 یک برنامه‌نویس حرفه‌ای فقط با تعداد خطوط کدش شناخته نمی‌شود؛
با کیفیت کدی که می‌نویسد شناخته می‌شود.
حالا یک سؤال:
وقتی به کدهای قدیمی خودت نگاه می‌کنی، هنوز راحت می‌فهمیشون؟ یا میگی: «این رو من نوشتم؟!» 😂
شب‌تاب | آموزش و رشد در دنیای IT
@init_code
4🔥1
Clean Code؛
وقتی که کد رو فقط برای کامپیوتر نمی‌نویسی! 💻

ببین رفیق، کامپیوتر خیلی صبوره؛ هر چی بهش بگی اجرا می‌کنه، حتی اگه کدت مثل آشفتگیِ ذهنیِ یه برنامه‌نویسِ شب‌زنده‌دار باشه! اما مشکل کجاست؟ مشکل وقتیه که خودت (یا همکارت) یه ماه دیگه بخوای برگردی سر کدت و با خودت بگی: «این کد رو کدوم موجودِ فضایی نوشته؟!» 👽

۳ قانون طلایی برای اینکه کدِت، کدِ واقعی باشه:

۱. اسم‌ها، هویت هستن! 🏷️
به جای var d = 30;
بنویس days_until_deadline = 30;. متغیرت باید جوری باشه که بدون نیاز به مترجم، داستان رو بگه.علاوه بر اون سعی کن واسه کد هات کامنت بنویسی ، برای اینکه وقتی دو سال دیگه برنامه ت رو باز کردی نگی «این کد اینجا چه غلطی می کنه!؟»

۲. توابع، تک‌وظیفه‌ای باشن! 🛠️
یه تابع نباید همزمان ایمیل بفرسته، دیتابیس رو آپدیت کنه و ناهار بپزه! هر تابع فقط یه کار انجام بده، اما اون کار رو با دقتِ یه جراح انجام بده.

۳. کپی-پیست، یعنی مرگِ خلاقیت! 🚫

اگه داری یه تیکه کد رو دو بار تکرار می‌کنی، یعنی داری به اصل DRY (Don't Repeat Yourself) خیانت می‌کنی. اون رو به یه تابع تبدیل کن و با کلاس جلو برو!

خلاصه کلام:
کد تمیز، یعنی احترام به آینده‌ی خودت. جوری بنویس که اگه فردا کد رو دیدی، به جای فحش دادن، به خودت افتخار کنی! 😎🚀

#برنامه‌_نویسی #Clean_Code

هزاران آموزش برنامه نویسی!
@init_code
🔥5🥰1
داستان دونات و کد تمیز!» 🍩

یکبار یه برنامه‌نویس توی مصاحبه گفت:
«من کدهای تمیز می‌نویسم چون از دونات بدَم میاد!» 🤔

همه تعجب کردن. پرسیدن: «چه ربطی داره؟»

گفت: «چون وقتی یک دونات رو نصف می‌کنی، می‌بینی که یه سوراخ توی وسطشه!
دقیقاً مثل یه تابع که هزار خط کد توی خودش قایم کرده؛
ظاهرش قشنگه، اما وقتی ورداریش می‌بینی هیچی توش نیست!»

🤯 این یه مثال بامزه‌ست، اما راستش رو بخواید، خیلی از برنامه‌نویس‌ها همین کار رو می‌کنن!

📌 تفاوت برنامه‌نویس معمولی و حرفه‌ای اینجاست:

· معمولی: یه تابع ۱۵۰ خطی می‌نویسه که همه چیز توش هست.
· حرفه‌ای: همون قابلیت رو با ۶ تا تابع ۱۰ خطی پیاده‌سازی می‌کنه که هرکدوم یه کار مشخص انجام می‌دن.

💡 اصل اولیه:
اگه یه تابع، کار بیشتری از اسمش انجام بده، یعنی یه جای کار میلنگه!
مثلاً تابع saveUser() نباید ایمیل هم بفرسته یا لاگ بنویسه!

🔧 امشب که رسیدی خونه، ببین چندتا تابع توی پروژه‌ات هست که دارند چندکاره‌ان؟
همون‌ها رو بشکن به قطعات کوچیک‌تر و از امروز عاشقِ «تک‌مسئولیتی» شو.
4🔥1
«نشانه‌های یک برنامه‌نویس تنبل (از نوع بد!)»

🤔 برنامه‌نویس تنبل کیست؟
کسی که کد می‌نویسه اما به فردا فکر نمی‌کنه.

برنامه‌نویس تنبل، همون کسیه که:
متغیرها رو با اسم‌های x، y و z نام‌گذاری می‌کنه.
توابع ۲۰۰ خطی می‌نویسه که همزمان هم محاسبه می‌کنه، هم ذخیره می‌کنه، هم لاگ می‌نویسه!
فکر می‌کنه کامنت‌های اضافه، نشون‌دهنده‌ی سواد بالای اونه! (درحالی که فقط کد رو شلوغ‌تر می‌کنه)

اما یه برنامه‌نویس حرفه‌ای، «تنبلِ خوب» هست:
از ابزارها و کتابخانه‌ها برای کم‌کردن کد تکراری استفاده می‌کنه.
کد رو تا حد امکان ساده می‌کنه، چون می‌دونه قراره بارها و بارها برگرده و تغییرش بده.
همیشه به فکر اینه که چطور با کمترین خط کد، بیشترین کار رو انجام بده، بدون اینکه کیفیت رو قربانی کنه.

🔑 حقیقت تلخ:
کدهای پیچیده، فقط باعث می‌شن بقیه فکر کنن تو خیلی باهوشی! اما در واقعیت، تیم رو کند و ناکارآمد می‌کنن.

🎯 هدف نهایی کدنویسی:
کدت رو طوری بنویس که یه برنامه‌نویس تازه‌کار هم بتونه بخونه و بفهمه. این نشون‌دهنده‌ی قدرت واقعیه، نه پیچیدگی.
🔥3
مهندسی معکوس؛ وقتی کدت ازت متنفر می‌شه!😅

تا حالا شده برگردی به کد ۶ ماه پیش خودت و بگی:
«اینو من نوشتم؟! چه غلطی کردم؟!»

اگه جوابت «آره» هست، نگران نباش؛ تنها نیستی!
ولی اگه جوابت «نه، هنوزم راحت می‌فهممش» هست، یعنی «اصول کدنویسی تمیز» رو رعایت کردی.

🛑 چرا کدهای قدیمی رو نمی‌فهمیم؟
چون اون موقع فقط به فکر «اجرا شدن» بودیم، نه به فکر «خونده شدن»!

📌 یه برنامه‌نویس حرفه‌ای همیشه از خودش ۳ تا سوال می‌پرسه وقتی کد می‌نویسه:
۱. اگر یه نفر دیگه این رو بخونه، می‌فهمه؟
۲. اگر خودم ۶ ماه دیگه بخونمش، معذب می‌شم؟
۳. آیا راه ساده‌تری برای نوشتن این بخش وجود نداره؟

🔑 راه‌حل معجزه‌آسا:
قبل از اینکه کدت رو کامیت کنی، ۵ دقیقه بشین و فقط کدت رو بخون.
انگار که یه نفر دیگه نوشته. هرجا احساس کردی «این چیه؟» یا «چرا اینجوری شده؟» یعنی باید اصلاحش کنی.

💬 تا حالا شده از دست کدهای قدیمی خودت فرار کنی؟
ما که می‌دونیم اکثرتون «بله» می‌گید! 😂
🤣3🤷‍♀1👍1🔥1
📦 داستان کارتن‌های اسباب‌کشی!

تا حالا اسباب‌کشی کردین؟

● یه اشتباه رایج اینه که همه‌چیز رو داخل یه کارتن بزرگ می‌ریزن.
■ لباس، کتاب، ظرف، کابل، کفش...
■ روز اسباب‌کشی شاید کار راحت‌تر بشه.
■ اما وقتی می‌رسی خونه‌ی جدید، تازه بدبختی شروع می‌شه!
● برای پیدا کردن یه شارژر، باید نصف کارتن رو خالی کنی.

بعضی پروژه‌های برنامه‌نویسی هم دقیقاً همین شکلی هستن...

یه فایل utils که ۳ هزار خط کده.
یه کلاس که از ساختن کاربر گرفته تا ارسال ایمیل و پرداخت آنلاین، همه‌چیز رو انجام می‌ده.

شاید اولش سریع‌تر به نظر برسه، اما هر بار که بخوای چیزی رو تغییر بدی، باید بین انبوهی از کدها دنبالش بگردی.

📌 کدهای بزرگ، همیشه نشونه‌ی پروژه‌ی بزرگ نیستن. خیلی وقت‌ها فقط نشونه‌ی دسته‌بندی اشتباه هستن.

همون‌طور که موقع اسباب‌کشی وسایل رو توی چند کارتن جدا می‌ذاری، توی برنامه‌نویسی هم هر فایل و هر کلاس باید جای مشخصی داشته باشه.
- آخرش هم خودت از خودت تشکر می‌کنی...

شب‌تاب | آموزش و رشد در دنیای IT
@init_code
2
دیباگ کردن؛ یا من یا این کُد!🔎💥

برنامه‌نویسی ۹۰٪ش لذته، اون ۱۰٪ باقی‌مونده‌ش هم دیباگ کردنه که توش ساعت‌ها زل می‌زنی به مانیتور و با کدات حرف می‌زنی: «آخه عزیزِ من، تو که دیشب درست کار می‌کردی، چی شد یهو زدی به تیپ‌وپایِ دیتابیس؟!» 🤦‍♂️

چند مرحله‌ی کلاسیکِ یه برنامه‌نویس موقع دیباگ:
۱. انکار: «امکان نداره کدم غلط باشه، حتماً کامپیوتر قاطی کرده!»
۲. خشم: «کدوم احمقی این متد رو نوشته؟... آهان، خودم بودم؟!»
۳. چونه‌زنی: «خدایا فقط این ارور رو حل کن، قول میدم دیگه کد کثیف ننویسم!»
۴. افسردگی: چک کردنِ ده باره‌ی همون خطی که مطمئنی درسته.
۵. پذیرش: دیدنِ یه Semicolon یا یه فاصله‌ی اضافه که ۵ ساعته داره به ریشِ ما می‌خنده! 🤡

نکته اخلاقی:
اگه بعد از ساعت‌ها دیباگ کردن هنوز راه حل رو پیدا نکردی، فقط برو یه لیوان چای بخور و برگرد. کدها هم مثل آدم‌ها، وقتی زیاد بهشون فشار میاری، لجبازتر میشن! ☕️

دیباگ کردن، هنرِ زل زدن به ارور و وانمود کردن به اینکه همه‌چی تحت کنترله! 🤓💥

دیباگ کردن همون لحظه‌ایه که کدت به‌جای همکاری، تصمیم می‌گیره شخصیت واقعی‌شو نشون بده!
تو هم می‌مونی، یه ارور عجیب، و یه نگاه عمیق به مانیتور که انگار قراره با تله‌پاتی مشکل حل بشه. 😅

ولی واقعاً برای دیباگ چه کار کنیم؟

- اول متن ارور رو کامل بخون؛ بله، همون چیزی که معمولاً ردش می‌کنیم!
- اسم خطا یا بخش مهمش رو عیناً توی گوگل سرچ کن.
- خطی که ارور داده رو بررسی کن؛ خیلی وقت‌ها مشکل دقیقاً همون‌جاست، نه ۲۰۰ خط پایین‌تر!
- با print یا لاگ گرفتن، مقدار متغیرها رو چک کن.
- اگه خیلی قفل شدی، یه استراحت کوتاه بزن؛ بعضی باگ‌ها فقط با چای حل می‌شن ☕️

حقیقت تلخ اما آموزشی:
۹۰٪ دیباگینگ یعنی:
«این ارور چی میگه؟»
۱۰٪ باقی‌مونده هم یعنی:
«آها... یه تایپ اشتباه بوده.» 🤦‍♂️

پس دفعه بعدی که برنامه منفجر شد، نترس؛
ارورها دشمن نیستن، فقط خیلی بد حرف می‌زنن!

#برنامه‌نویسی #دیباگ #برنامه_نویس #کدنویسی #طنز_برنامه_نویسی #دیباگینگ #CodeLife #Debugging

هزاران آموزش برنامه نویسی
@init_code
مقایسه دو فریمورک جنگو و فلسک!
دو فریمورک بک اند نویسی در پایتون

اگر می‌خواهی چرخ را از اول اختراع نکنی و سریع به نتیجه برسی، برو سراغ Django؛ اما اگر می‌خواهی خودت همه چیز را از صفر و دقیقاً طبق سلیقه خودت بسازی، Flask رفیقته! 🔥

هزاران آموزش برنامه نویسی
@init_code
Forwarded from ShabTab Team
پیج اینستا

https://www.instagram.com/shabtab_team


کانال یوتیوب

https://youtube.com/@shabtab-team


کانال برنامه نویسی شب تاب

https://t.me/init_code



کانال کوییز

https://t.me/ShabtabQuiz



سایر کانال ها بزودی جوین شید و لینک رو به اشتراک بزارید
🚀 فرانت‌اند و جاوااسکریپت؛ ۵ تا چیزی که باید بلد باشی:

۱. DOM بازی با دست یا کتابخونه
document.querySelector() رو بلد باش، ولی بدون که React قراره جاش رو بگیره.

۲. Event Loop (همون ترتیب عجیب اجرا)

setTimeout(() => console.log('دیره'), 0);
Promise.resolve().then(() => console.log('زودتر'));
// خروجی: زودتر → دیره
۳. Async/Await برای گرفتن دیتا
با fetch راحت درخواست بزن و خطاها رو با try/catch بگیر.

۴. ۳ تا متد طلایی آرایه‌ها
map() برای تبدیل، filter() برای غربال، reduce() برای جمع‌بندی (جایگزین حلقه‌های قدیمی).

۵. ابزارهای امروزی
Vite برای باندل سریع، TypeScript برای تایپ امن، و ESLint برای کد تمیز.

---

تمرین عملی: یه TODO List بساز با add/delete/edit و توی مرورگر ذخیره‌ش کن.

نظرت چیه؟ کدومش برات گنگ‌تره؟ بگو تا مفصل‌تر بگم. 👇

#جاوااسکریپت #فرانت‌اند #کدنویسی
✨️🦦 کنترل تلویزیون رو تصور کن؛
== == == == == ==
• برای روشن کردن تلویزیون، فقط یه دکمه رو فشار می‌دی.
لازم نیست بدونی داخلش چه مدارهایی هست یا سیگنال چطور ارسال می‌شه.

همین سادگی باعث می‌شه همه بتونن ازش استفاده کنن.

• برنامه‌نویسی هم همینطوره.
وقتی یه کلاس یا یه تابع، استفاده‌ی ساده‌ای داشته باشه، بقیه لازم نیست درگیر جزئیات داخلیش بشن.
== == == == == ==
📌 هرچقدر استفاده از کدت ساده‌تر باشه، احتمال استفاده‌ی درست ازش بیشتره.
== == == == == ==
❗️پیچیدگی، اگه جایی هم وجود داره، بهتره پشت صحنه بمونه.
شب‌تاب | آموزش و رشد در دنیای IT
@init_code
🥰1
عنوان: فرانت‌اند حرفه‌ای؛ فراتر از سینتکس، نبرد با پیکسل‌ها و نخ‌ها

اگر فکر می‌کنید سخت‌ترین جای جاوااسکریپت، مدیریت Promise.allSettled یا پیاده‌سازی یه custom Hook پیچیده‌ست، لطفاً تا خط بعدی رو نخونید. جای شما روی صندلی‌های معمولیه.

دنیای حرفه‌ای جایی‌ست که دیگه کدتون رو صرفاً برای ماشین‌ مجازی (V8) می‌نویسید؛ بلکه باید برای پردازنده گرافیکی (GPU)، موتور رندرینگ (Blink/WebKit) و حتی هسته‌های فیزیکی پردازنده (CPU Cores) هم کد بزنید. اینجا خبری از دامنه‌ی useEffect نیست؛ جنگ اصلی سر ۶۰ فریم ثانیه‌ی پایداره تو یه اپ با دیتای لحظه‌ای.

۱. قتل‌گاه رندرینگ (Layout Thrashing)
همه می‌دونن تغییر style.width باعث Reflow میشه، اما دولوپر ارشد می‌دونه که خوندن offsetHeight بلافاصله بعد از اون تغییر، توی یه حلقه، یعنی کشتن صریح مرورگر! چون مرورگر مجبور میشه صف تغییرات رو بشکنه و سخت‌افزار رو مجبور به محاسبه‌ی اجباری (Forced Synchronous Layout) کنه.
اینجا راه‌حل، استفاده از الگوی FastDom یا جداسازی فازهای Read و Write با requestAnimationFrame نیست؛ راه‌حل واقعی، مهندسی معکوس درخت رندر و استفاده از تکنیک contain: layout style paint در CSS هست تا به مرورگر بگید "این بخش رو از بقیه‌ی جهان جدا کن و ری‌کالکولیشن رو محدود کن".

۲. توهم لایه‌ها (Compositing & Layers)
اگه فکر می‌کنید will-change: transform یک داروی معجزه‌آسه، سخت در اشتباهید. استفاده‌ی بی‌رویه ازش، معادل ریختن بمب روی حافظه‌ی GPU هست؛ چون مرورگر برای هر المان، یه لایه‌ی مجزا (RenderLayer) توی حافظه‌ی ویدئویی اختصاص میده.
متخصص واقعی می‌دونه چطور با دیباگر لایه‌های کروم (Layers Panel) تعداد لایه‌ها رو زیر ۵۰ تا نگه داره و فقط برای المان‌های متحرک (مثل نقشه یا منوی کشویی) از transform: translateZ(0) استفاده کنه تا ترکیب (Compositing) روی GPU انجام بشه و CPU آزاد بمونه برای پردازش منطق سنگین.

۳. موازی‌سازی واقعی با SharedArrayBuffer و Atomics
اینجا دیگه Web Worker ساده جواب نمیده؛ چون انتقال داده با postMessage همچنان از ساختار Structured Clone استفاده میکنه که یعنی کپی شدن حافظه (حداقل برای دیتای سنگین).
راه نجات، حافظه‌ی مشترک (SharedArrayBuffer) هست. اینجا شما یه بافر خام رو بین ترد اصلی و تردهای کارگری به اشتراک می‌ذارید و با استفاده از قفل‌های سطح پایین (Atomics.wait / Atomics.notify)، هماهنگ‌سازی می‌کنید. مثلاً وقتی یه دیتاست ۱۰۰ مگابایتی از وب‌سوکت میاد، توی Worker اون رو پردازش (مثلاً رمزگشایی Protobuf) می‌کنید، بدون اینکه حتی یک بایت از حافظه‌ی اصلی رو کپی یا بلوکه کنید. اما اخطار جدی: مدیریت Atomics یعنی شبیه‌سازی Mutex در جاوااسکریپت؛ یه اشتباه توی قفل‌گذاری، کل ترد اصلی رو قفل می‌کنه (اگه از Atomics.wait در ترد اصلی استفاده کنید، مرورگر هنگ می‌کنه!).

۴. بهینه‌سازی بارگذاری با Streams API در لایه‌ی فرانت
روزهایی که منتظر می‌موندید تا کل پاسخ ۵۰ مگابایتی fetch بیاد تا JSON.parse کنید، تموم شده. با ReadableStream، می‌تونید پاسخ رو تکه‌تکه (Chunk) پردازش کنید، در حالی که هنوز هدر پاسخ اومده. ترکیب این تکنیک با WebAssembly برای پردازش باینری، یعنی شما قبل از اینکه ریکت حتی شروع به رندر کردن کنه، دیتا رو هضم و نرمالیزه کردید.

---

📌 چالش فنی برای اساتید محض:
چه کسی تا حالا توی محیط Production، با چالش OOM (Out of Memory) ناشی از زیاد شدن تعداد RenderLayers مواجه شده؟ یا تجربه‌ی استفاده از SharedArrayBuffer برای همگام‌سازی یه پلیر ویدیویی با انیمیشن‌های CSS رو داره؟
راه‌حل‌هاتون برای جلوگیری از Starvation (گرسنگی کشی) توی Workerها چیه؟
کامنت‌ها منتظر تجربه‌های خونین شما از میدان جنگ رندرینگ هست! 💀⚡️
Forwarded from ShabTab Team
کتابچه_ی_صفر_تا_صد_آی_تی_شب_تاب_تیم.pdf
22 MB
کتابچه 0 تا 100 تقدیم به همه ی دانشجویان تا میتونید فروارد کنید تا رایگان در اختیار همه قرار بگیره


https://t.me/ShabTab_Team
4