نوشته های Peyman

تغییر بزرگ Android 16 در حالت Edge-to-Edge و راه‌حل برای React Native

Peyman — Tue, 04 Nov 2025 13:57:37 +0330

اندروید ۱۶ (API سطح ۳۶) یه تغییر اساسی آورده که شاید در نگاه اول ساده به‌نظر بیاد،ولی واقعاً تأثیر زیادی روی ظاهر و رفتار اپ‌هامون می‌ذاره — مخصوصاً برای ما که با React Native کار می‌کنیم.بیاین باهم ببینیم دقیقاً چی عوض شده، چرا مهمه، و چطور می‌تونیم باهاش کنار بیایم.💡 داستان از کجا شروع شد؟از اندروید ۱۵ (API 35) گوگل تصمیم گرفت که اپ‌ها باید edge-to-edge بشن.یعنی محتوای اپ از بالا تا پایینِ واقعی صفحه (زیر نوار وضعیت و نوار ناوبری) کشیده بشه.ولی اون موقع یه راه فرار وجود داشت — اگه توی تم اپ می‌نوشتی:trueمی‌تونستی بگی:"نه گوگل! من نمی‌خوام محتوای اپم تا لبه بره، بذار پایینش فاصله باشه."اما حالا توی Android 16 گوگل گفته:تمومه. دیگه نمی‌تونی از edge-to-edge فرار کنی.اون attribute به‌طور کامل حذف و بی‌اثر شده.📱 Edge-to-Edge یعنی چی دقیقاً؟یعنی اپت کل صفحه رو می‌گیره — از زیر نوار وضعیت تا زیر gesture bar (نوار پایین گوشی).خود سیستم UI مثل نوار پایین یا بالای گوشی روی محتوای تو می‌افته، نه اینکه براش فضا نگه داره.یه نگاه تصویری:قدیما (Android 13 و پایین‌تر):+--------------------------+ | Status Bar (24px) | |--------------------------| | App Content | |--------------------------| | Navigation Bar (48px) | +--------------------------+ الان (Android 16):+--------------------------+ | Status Bar (overlay) | |--------------------------| | App Content (زیر status bar) | |--------------------------| | Gesture Bar (overlay) | +--------------------------+ یعنی محتوای اپت تا ته صفحه کشیده می‌شهو اگه خودت فاصله‌ی لازم رو ندی، مثلاً متن یا دکمه‌هات ممکنه برن زیر gesture bar.⚙️ چرا این موضوع مهمه برای React Nativeتوی React Native خیلی وقت‌ها برای تشخیص ارتفاع صفحه از این دو استفاده می‌کنیم:Dimensions.get('screen') Dimensions.get('window') قبلاً فرق بین این دوتا معمولاً ارتفاع نوار ناوبری (Navigation Bar) بود.اما از اندروید ۱۶ به بعد، چون اپ تا لبه می‌ره، این دوتا یکی می‌شن.یعنی این تیکه کد:const screenHeight = Dimensions.get('screen').height; const windowHeight = Dimensions.get('window').height; const navBarHeight = screenHeight - windowHeight; دیگه به‌جای ۴۸ یا ۲۴، عدد صفر برمی‌گردونه 😅و در نتیجه کلی از تنظیمات ظاهری‌مون مثل bottom sheet یا modal اشتباه کار می‌کنن.🧠 راه‌حل: یه Helper بنویسمن برای اینکه این مشکل رو توی کل پروژه به‌صورت یکدست حل کنم، یه ساختار مرکزی طراحی کردم.اول باید ارتفاع نوار وضعیت (StatusBar) و نوار ناوبری (NavigationBar) رو بگیریم:NAVIGATION_BAR_HEIGHT: initialWindowMetrics?.insets?.bottom, STATUS_BAR_HEIGHT: StatusBar.currentHeight,بعد دو بخش اصلی توی فایل کانفیگ ساختم:SCREEN_METADATA → اطلاعات مربوط به وضعیت صفحه و دستگاه (مثل notch، fullscreen و API level)OffsetCalculator → تابعی که با توجه به نوع کامپوننت و موقعیت (بالا/پایین) مقدار فاصله رو محاسبه می‌کنه🧱 مرحله ۱ — تعریف Screen Metadata{ API_LEVEL: 36, SCREEN_METADATA: { HAS_NOTCH: DeviceInfo.hasNotch(), STATUS_BAR_HEIGHT: StatusBar.currentHeight, OS_NAVIGATION_BAR_HEIGHT: initialWindowMetrics?.insets?.bottom, IS_FULL_SCREEN: API_LEVEL > 34 ? initialWindowMetrics?.insets?.bottom < 48 : true, }, }این اطلاعات به من کمک می‌کنه تا در همه‌جا بدون نگرانی از جزئیات دستگاه، به‌صورت یکدست با layout کار کنم.⚙️ مرحله ۲ — ساخت Offset Calculatorحالا یه تابع نوشتم که دوتا ورودی می‌گیره:component: اسم بخشی از اپ (مثلاً drawer، tabbar، chat و غیره)section: کدوم قسمت (بالا یا پایین)نمونه ساده‌ش:export default function OffsetCalculator(component = '', section = 'bottom') { const { API_LEVEL, SCREEN_METADATA } = AppConfig; const { HAS_NOTCH, IS_FULL_SCREEN, OS_NAVIGATION_BAR_HEIGHT } = SCREEN_METADATA; let offset = 0; switch (component) { case 'drawer': offset = section === 'top' ? (HAS_NOTCH ? AppSizes[15] : 0) : (IS_FULL_SCREEN ? AppSizes[15] : AppSizes[45]); break; case 'tabBarContainer': if (API_LEVEL > 34) { offset = IS_FULL_SCREEN ? -OS_NAVIGATION_BAR_HEIGHT / 1.5 : OS_NAVIGATION_BAR_HEIGHT / 1.2; } else { offset = IS_FULL_SCREEN ? -OS_NAVIGATION_BAR_HEIGHT * 2.5 : -OS_NAVIGATION_BAR_HEIGHT * 1.2; } break; // ... و همین‌طور برای سایر کامپوننت‌ها } return offset; }حالا هر جای اپ (از Splash گرفته تا Chat و Drawer)، فقط کافیه این تابع رو صدا بزنم تا فاصله مناسب خودش رو حساب کنه.🚀 مزایای این روش✅ فقط یک نقطه مرکزی برای تنظیم Offsetها✅ راحت برای آپدیت در نسخه‌های آینده Android✅ سازگار با گوشی‌های دارای Notch یا بدون اون✅ یکپارچگی کامل بین Android 14، 15 و 16✅ دیگه لازم نیست برای هر کامپوننت جداگانه safe area بنویسی💭 جمع‌بندیتغییر Edge-to-Edge در Android 16 فقط یه تغییر ظاهری نیست — یه تحول ساختاری در نحوه تعامل اپ با سیستم UI محسوب میشه.با مدیریت برنامه‌نویسی‌شده و متمرکز Offsetها، می‌تونی اپ React Native خودت رو در برابر نسخه‌های آینده هم آینده‌نگر و مقاوم کنی.دفعه بعدی که دیدی یه دکمه یا تب‌بار چسبیده به Gesture Bar، نترس 😄فقط OffsetCalculator رو صدا بزن!

چرا پیچ گوشتی تو جیب نگه داشتن ایده بدیه (و چطور این مشکل رو تو کامپیوتر حل کنیم!)

Peyman — Wed, 25 Dec 2024 20:13:04 +0330

بعضی کارها انقدر ساده‌ان که انجام دادنشون مشکلی نداره، اما وقتی مجبور میشی روزی ده بار انجامشون بدی، رسماً روان آدمو بهم می‌ریزن. 😵‍💫مثلاً فرض کن پیچ گوشتی لازم داری، ولی هربار باید از ته خونه بری برش داری و برگردونی (مثلا توی اتاقت که انتهای خونست و از توی کمد دیواری دوم سمت راست )برش داری بیاری استفاده کنی و بعدش برش گردونی سرجاش . مثلا: تو آشپزخونه نیاز به پیچ گوشتی داری پس گردش بیخودی اول، بعد از ده دقیقه توی پارکینگ نیاز به پیچ گوشتی داری پس گردش بیخودی دوم،بعد از نیم ساعت تو ماشینت نیاز به پیچ گوشتی داری پس گردش بیخودی سومو...هر بار که این اتفاق میفته، یه "گردش بیخودی" رقم می‌خوره!حالا این فقط یه مثال فیزیکیه. تو دنیای کامپیوتر هم دقیقاً همین ماجرا رو داریم. باید هر بار برای اجرای یه ابزار یا استفاده از یه API، مسیر طولانی یا کلید رو دستی وارد کنیم. خسته‌کننده‌س، نه؟ 😬فرض کن می‌خوای توی پروژه‌ات از ابزارهای مختلف مثل Android Emulator یا Node.js استفاده کنی. هر بار که بخوای این ابزارها رو اجرا کنی، باید مسیر کاملشون رو بنویسی. مثلاً برای اجرای Android Emulator، باید چیزی شبیه این تایپ کنی: C:\Users\YourName\AppData\Local\Android\Sdk\emulator\emulator -avd Pixel_4_API_33حالا اگه ده بار نیاز باشه که از ابزار Emulator استفاده بشه که شبیه ساز اندروید مربوط به Pixel_4 رو برات اجرا کنه که پوست آدم کنده میشه چون خیلی طولانیه و هر بار نوشتنش واقعاً خسته‌کننده می‌شه. حالا مشکل اینجاست که اگر این مسیر تغییر کنه یا پروژه به سیستم دیگه منتقل بشه، دوباره باید همه جا این مسیر رو اصلاح کنی.ولی نگران نباش! راه‌حلش رو داریم: متغیرهای محیطی!کافیه بیای این مسیر طولانی رو یک بار به متغیر محیطی (مثل PATH) اضافه می‌کنی. مثلاً در ویندوز مسیر C:\Users\YourName\AppData\Local\Android\Sdk\emulator رو به متغیر PATH اضافه می‌کنی.وقتی این کار رو کردی، می‌تونی فقط با نوشتن دستور زیر توی ترمینال یا powershell یا ... ، بدون نیاز به مسیر کامل، Emulator رو اجرا کنی:emulator -avd Pixel_4_API_33مثال دیگه ای هم هست:فرض کن توی پروژه‌ای نیاز به یک کلید API داری (مثل کلید Google Maps). اگر این کلید رو مستقیم توی کد بذاری، این مشکلات پیش میاد:اگر کدت رو روی گیت (Git) آپلود کنی، کلیدت لو میره.اگر بخوای محیط پروژه رو تغییر بدی (تست، توسعه یا پروداکشن)، باید هر بار کلید رو دستی توی کد عوض کنی.راه‌حل اینه که کلید رو به یک متغیر محیطی مثل API_KEY اضافه کنی. بعد توی کدت به‌جای نوشتن مستقیم کلید، از این متغیر استفاده می‌کنی:const apiKey = process.env.API_KEY

برنامه نویسی، قیمه ها تو ماست ها، و تجربه...

Peyman — Thu, 28 Nov 2024 16:50:41 +0330

این نوشته صرفا تجربه شخصی من از مشکلیه که برام پیش اومد شما میتونین زرنگ تر باهوش تر و باسواد تر از من باشین و توی کارتون دچار این مشکل نشیناز اونجایی که تعداد کتابخونه ها و پلاگین هایی که توی برنامه نویسی به کمکمون میان انقدر زیاده که به نظر غیر قابل شمارش میاد ولی طبیعتا بعضی از اونها خیلی معروف میشن مثل Eslint که احتمالا اگر دلتون بخواد کدتون تر و تمیز باشه محاله که اسمش رو نشنیده باشین و انقدری جدی و سختگیر وامیسته بالاسر کدتون انگار که یه معلم خیلی جدی داره ایراداتونو میگیره حتی کوچکترین موارد رو هم بهتون اخطار میده اگه فاصله کمو زیاد بذارین زیر همون قسمت به صورت خط چین بهتون اخطار میده و هزاران مورد دیگه از طرفی اگه برنامه نویس وب باشین و با Javascript سر و کله زده باشین میدونین که یکی از ویژگیهاش که اوایل به عنوان نقطه قوتش شناخته میشد الان به طرز عجیبی توی دسته بندی نقاط ضعفش محسوب میشه و اون هم اینه که متغیرهای شما نیازی به اینکه نوع داده مشخص داشته باشن ندارنولی خب این افسانه بعد از گسترده شدن این زبان و همچنین بوجود اومدن کتابخونه ها و فریمورک های متنوع دیگه ای مثل vue , angular, react, node و .... که هم فرانت و هم بکند دولوپر ها ازشون بی بهره نیستن تبدیل شد به یک سری عذاب ادامه دار که وسط کار میدیدی که برنامه ای که براش کلی وقت گذاشتی و اجراش کردی مرد و یه صفحه سفید اومد بالا و اصطلاحا crash کرد حالا چرا؟ چون یکی از متغیر هات که باید عدد میگرفت رشته گرفته 😒حالا این مرض چطوری درمان میشد؟ به عنوان یه برنامه نویس از جلو توی ری اکت باید یه بسته نرم افزاری نصب میکردی به اسم Proptype که بعدتوی کامپوننتی که توسعه دادی و نوع داده ای اون پراپ هایی که کامپوننتت از بقیه کامپوننت ها میگیره رو توش تعریف میکردی اما این راه حل جلوی بروز مشکل رو نمیگرفت عملا یچیزی مثل مسکن بود ولی درمان نبود و از اونجایی که بهترین درمان پیشگیریه جهان رفت به سمت توسعه جاوا اسکریپت برمبنای " نوع داده ای" که عملا وارد تایپ اسکریپت شدیم.اینکه دقیقا typescript چی هست و چیکار و میکنه و چیا نیاز داره که در این مقال نمیگنجد ولی تعریف عمومیش همینه که همون جاوااسکریپته که باید نوع داده ای رو مشخص کنی و اگر نکنی و یا اگر متغیرت رشته ای باشه بیای بهش عدد بدی همونجا کلی ارور و ... میگیری و میفهمی داری اشتباه میزنیاما Typescript چه ربطی به Eslint داشت؟درموارد خیلی نادر پیش میاد که این دوتا باهم سازگار نیستن هر کدومو که فعال میکنی اون یکی غیر فعال میشهقضیه آشپز که دوتا شد غذا یا شور میشه یا بی نمکبرای من هم این اتفاق افتاد و یکی دوروزی گشتم دنبال یه کتابخونه خوب که بتونم مشکل رو حل کنم، اگه برای شما هم این اتفاق افتاد که بعد از نصب Typescript، دیگه ارور Eslint نگرفتین بدونین اونقدری حرفه ای نشدین که Eslint ارور ها تون رو نگیره و اون وسط یه تداخلی پیش اومده که باید رفع شه 😊چطوری؟ با نصب typescript-eslint/eslint-plugin و typescript-eslint/parser عملا این دوتا کار رو براتون درمیارن و دوباره با ارور های Eslint مواجه میشین

تراوشات ذهنی در باب چالش، امید، قهوه

Peyman — Sun, 24 Nov 2024 12:27:18 +0330

خیلی از اوقات که توی زندگی دچار روز مرگی میشیم، از شرایط موجود ناراحتیم و غر میزنیم و دنبال یه راه حلی برای ایجاد یک تغییر توی موقعیتمون هستیم تصمیم میگیریم پامونو از منطقه امنمون بیرون بذاریم خب در نظر اول خیلی تصمیم خوبیه و چرا که نه؟ ولیمنطقه امنمون چی میتونه باشه؟میتونه رابطه ای که درگیرشیم، شغلی که توشیم حتی جایی که زندگی میکنیم باشه، خیلی هیجان انگیزه که به امید یه تغییر خونمون رو عوض کنیم و مستقل شیم، رشته ای که بهش خیلی هم علاقه نداریم رو رها کنیم و بریم پی چیزی که حس میکنیم رسالت ما توی این دنیاست رو انجام بدیم از شغلمون بیایم بیرون و بدوییم سمت شغلی که برای دی ان ای کوفتی ما ساخته شده و اصلا اگه من هستم به این دلیله که اون کار مخصوص رو انجام بدم اما زهی خیال باطل...چرا؟ چون دنیا واقعا اینقدرا هم رنگی رنگی نیست چون ما فکرمیکنیم که اماده تغییر شرایط هستیم و سختی ها از دور کوچیک به نظر میان میدونی من فکر میکنم زندگی کلا همین افت و خیز هاست یعنی صبح بلند شی بری یه مساله ای رو حل کنی که شرایط پیش اومدن مساله بزرگ تر برات بوجود بیاد و عملا توی یک چرخه حل مشکل کوچیک برای ایجاد شدن یک مشکل بزرگ و حل اون برای ایجاد یک مشکل بزرگتر و الی آخر بیفتیماصلا کلا کدوم ما تو زندگی رفتیم تلاش کردیم و بردیم؟ تاجاییکه یادمه زندگی اینجوری بوده: برنامه ریزی کن، تلاش کن، ببازدوباره برنامه ریزی کن تلاش کن ببازسه باره برنامه ریزی کن تلاش کن ببازته تهش سه سانت جلو میریم دوسانت عقب برمیگردیمواسه همینه که وقتی از خیلیا میپرسی اگه برگردی عقب استارتاپتو میزنی؟ ازدواج میکنی؟ شغلتو عوض میکنی؟ فلان رشته رو میخونی؟ معمولا میگن نهحالا ما چیکار کنیم؟ با انرژی بد و بی هیچ نور و انگیزه ای رشته زندگی رو پیش ببریم و تو تاریکی قدم بزنیم؟ خب نه ما یه مفهوم انتزاعی خیلی سطحی ای به نام امید داریم که عملا باهاش هیچ کاری هم نمیشه کرد تنها کاری که ازش برمیاد اینه که چایی تلخ حقایق رو با اون شیرینی خیلی کمی که داره قابل تحمل کنه عملا نقشش درحد همون تیکه شکلاتیه که کنار قهوه میذارن قرار نیست تلخی قهوه ات کم شه و این حقیقت من رو یاد اون ضرب المثل انگلیسی میندازه که اگه داره بهت تجاوز میشه لااقل شل کن لذت ببری، امید اینجا نقشش همون شل کنندهست

مهارت از طریق تجربه یا تئوری؟

Peyman — Fri, 21 Jun 2024 14:13:13 +0330

وقتی که واقعا وارد دنیای برنامه نویسی میشیم مسایلی پیش میاد که ما حتی اگر استاد تئوریات هم باشیم مواجهه باهاشون خارج از انتظارات ماست و اینجاست که میگن بسوزه پدر تجربه. و این تجربیات راهی برای کسب ندارن مگر با کار کنجکاوی کردن در مورد زوایای مختلفشون.اگر مدتی برنامه نویسی کرده باشید و مخصوصا توی جاوا اسکریپت و یا کتابخونه های مربوطش سرو کله زده باشین احتمالا با ternary expression یا short circuiting آشنا هستید و همونطور که میدونید دونستن اینکه truthy یا falsy بودن یعنی چی از بدیهیات هست.و احتمالا هر کسی که به تازگی وارد دنیای برنامه نویسی شده هم میدونه که خروجی یک عبارت شرطی با && در شرایطی که یکی از متغیر های درگیر false باشه همیشه false خواهد بود:false && true === falseحالا اگر برنامه نویس سمت فرانت اند باشین خیلی پیش میاد که شرط رندر شدن یک کامپوننت رو truthy بودن عملوند و operand دیگری قرار بدین یعنی چی؟ let a= true; a &&

Every thing is all right ازونجایی که a یک مقدار truthy هست تگ p در خروجی رندر میشه و ما با جمله Every thing is all right روبرو میشیم. در حالیکه اگر مقدار a برابر با false, undefined و یا هر مقدار falsy دیگه ای بود تگ p برای ما رندر نمیشد.اما آیا واقعا تمام مقادیر falsy شرط بالا رو در همه موقعیت ها دارند؟جواب تئوریک : بلهجواب مبتنی بر خبرگی و تجربه: خیراما در چه موقعیت هایی تجربه با تئوری متناقض درمیاد؟ مثال زیر رو در نظر بگیرید؟{numberOfPeople && }بافرض اینکه اگر numberOfPeople عددی بجز صفر بود انتظار داریم رندر شه و در غیر این صورت هیچ چیزی رندر نشه (که با فرضیات تئوریک ما، انتظاری جز این هم نمیره).ولی توی React همچین کدی در خروجی مقدار 0 رو رندر میکنه. درحالیکه 0 یک مقدار falsy هست.چرا؟ چون React تمام مقادیر عددی و رشته ای رو توی خروجی نمایش میده بنابراین اگر numberOfPeople مقدار false و یا undefined برمیگردوند همه چیز طبق انتظار ما پیش میرفت ولی چون داره 0 برمیگردونه، حتی با اینکه 0 مقدار falsy هست ولی چون نوعش عددی و number هست در خروجی 0 برای ما نمایش داده میشه.برای بررسی بیشتر این مورد و راه های جایگزین میتونین بجای short-circuiting از ternary expression ها استفاده کنید و یا از boolean cast استفاده کنیدضمنا برای مثال های بیشتر میتونین به استک اور فلو مراجعه کنید.

React Life Cycle

Peyman — Sat, 24 Feb 2024 16:23:34 +0330

توی مدت زمانی که داریم از یک کامپوننت توی برناممون استفاده میکنیم این کامپوننت وارد فاز های مختلفی از طول حیاتش میشه دقیقا عین هر آیتم دیگه ای توی دنیای واقعی.Mount:اولین لایف سایکل یا چرخه حیات مربوط به زمانیه که یک کامپوننت بوجود میاد و برای اولین بار رندر میشه اصطلاحا بهش میگنMount شده. این جا نقطه ایه که state ها و props های اولیه ساخته میشن و یجورایی کامپوننت ما تازه متولد میشه.Rerender:حالا که کامپوننت ما رندر شده و میشه روی صفحه دیدش این امکان وجود داره که بارها و بارها این کامپوننت ری رندر بشه اما دقیقا چه زمانی این اتفاق میفته؟ طبیعتا هر زمانی که state ها تغییر پیدا کنن اما این تنها زمانی نیس که کامپوننت ما ری رندر میشه بلکه هر زمان که:1- props ای توسط کامپوننت دریافت شه2- کامپوننت والد مربوط به کامپوننت ما ری رندر شه ویا3- context تغییر بکنه کامپوننت ما دچار ری رندر میشه اما نکته ای که هست اینه که این فاز الزاما نیاز نیست برای تمام کامپوننت ها اتفاق بیفته گاها مواردی وجودداره که کامپوننت بوجود میاد و ازبین میره بدون اینکه حتی یک بار ری رندر صورت بگیرهUnmount:و طبیعتا فاز عمر کامپوننت که توی این مرحله برنامه ما نه با این کامپوننت و نه با هیچ یک از state و یا Props هاش هیچ کاری نداره و این کامپوننت و تمام متعلقاتش ازبین میرن توی این فاز.

هوک زیر یک دقیقه

Peyman — Wed, 21 Feb 2024 17:27:49 +0330

برای اینکه بدونیم هوک چیه فقط کافیه حواسمون به یه نکته باشه، اون چیه؟ اینه که ماداریم راجبه ری اکت صحبت میکنیم نه بوکس یا ابزار😂 اما در واقع اینه که خیلی قدیما مثلا قبل از عرضه نسخه 16.8ری اکت، قابلیت هاییکه توی class component های ری اکت داشتیم توی function component ها نمیتونستیم پیاده کنیممثلا چه قابلیت هایی؟ 1- استیت ها. عملا تا زمانیکه هوک ها معرفی نشده بودن function component ها نمیتونستن از استیت ها استفاده کنن یا به قول معروف stateless بودن2- لایف سایکل ها. که این مورد هم با اضافه شدن useEfftect توی فانکشن کامپوننت ها حل شداما حالا نه تنها میشه کدهای خواناتری نوشت بلکه کدهامون به روز تره و به نظر من فهم راحت تری هم داره البته میگن فهم هوک ها شروع راحتی داره ولی ادامه داشتن این فهمیدن پروسه سختیه.😂چطوری از useState استفاده کنیم؟کل چیزی که در مورد این هوک باید بدونیم اینه که خروجیش یه آرایست که خونه اول مقدار استیت فعلی رو توش نگه میداره و خونه دوم یه تابعیه که میاد و استیت رو آپدیت میکنهاما بین setState توی کلاس کامپوننت ها و useState توی فانکشن کامپوننت ها چه فرقی وجودداره؟خب عملا هدفشون یکیه اما توی کلاس ها وقتی که ما از setstate استفاده میکنیم استیت جدید اصطلاحا merge میشه و به استیت قبلی اضافه میشه در صورتیکه توی useState استیت جدید میاد و جایگزین استیت قبلی میشه (replace)پس اگه توی استیتمون یه آبجکتی داشته باشیم که فقط یدونه از المان هاش رو بخوایم تغییر بدیم با useState اگر حواسمون به المان های دیگه نباشه عملا بعد ازآپدیت شدن یه دونه آبجکت با یدونه المان خواهیم داشتstate = { instance={id: 'sth', name: 'abc' } } که اگه بی دقتی کنیم و حین آپدیت فقط یکیشونو تغییر بدیم خروجی میشه : state = { instance={name: 'def' } }مشخصا توی مثال بالا فقط اومدیم و name رو آپدیت کردیم نظریه نامحبوب نامطلوب : هرچند که به طور کلی استفاده از هوک ها خیلی جذاب و راحت به نظر میاد ولی یه ری اکت کار واقعی اونیه که خاک کلاس کامپوننت ها و this.stateهارو چشیده باشه😂

کلوچه ای که نقطه ضعف اعصابم شد

Peyman — Thu, 13 Jul 2023 16:16:04 +0330

کلا وقتی که میری سمت سرور کد بزنی سروکله زدن با مفاهیمی مثل Cookie, session,jwt و این دست مسایل به یچیز روتین و عادی تبدیل میشه در کل من بعید میدونم کسی بگه من بکند / سرور کارم ولی بلد نیستم با این آیتم ها کار کنم . اما داستان من در این باره به کجا میرسه و چرا اعصابمو بردم به یه شهر قشنگ؟ چون فکرمیکردم میدونم دقیقا دارم چیکار میکنم ولی خب دقیقا نمیدونستم دارم چه غلطی میکنم (یه حس کاملا روتین توی کدنویسی)قضیه کجا دارک میشه؟ اونجایی که فریمورک یا زبانی که داری باهاش کار میکنی رو تسلط نداری و خب اصولا نیازی هم نیست که مسلط به سرتاپای زبانت باشی صرفا باید بلد باشی کد بزنی و سینتکس رو میسپری به هنر سرچ(نظر کاملا شخصی) و خب همین رویکرد دهنمو صاف کرد چون مفهوم کوکی رو از روزی که مرورگرمو باز کردم میدونم چه کوفتیه و اصلا کیه که ندونه ؟ کوکی ها باعث میشن وبسایت ها شمارو به خاطر بیارن و دیگه هر بار که وارد اون وب سایت میشی نیاز نباشه لاگین کنی یا اگه توی فروشگاه اینترنتی رفتی و سبد خریدت رو پر کردی اگه برق رفت و بعد یه ساعت برگشتی نبینی که سبد خریدت صفر شده و از اول بری سراغ پر کردنش پس اگه بخوام جمع بندی کنم یه سری فایلای تکستی هستن که توش یه چوسه دیتاهای دم دستی از یوزر رو نگه میدارن و خب روی خود کلاینت ست میشن (برخلاف سشن که میره سمت سرور)اما چطوری از کوکی ها توی Node js یا Express js (یه فریمورکی از نود جی اس) استفاده کنیم؟از اونجایی که من خودم اخیرا با این فریمورک دارم یه کارای جزیی میکنم و خب بگی نگی هم باهاش حال کردم رفتم سمت استفاده از کوکی اگه نمیدونین middleware ها چین ، path تو اکسپرس چیه یا اصلا چطوری یه سرور اکسپرسی رو باید بالا بیاریم که خب یه سرچ بزنین چون ساده تر از چیزیه که فکرمیکنین احتمالا یه سری پست راجبه اکسپرس بذارم چون باحالهاما واسه اینکه بتونیم تو نود کوکی ست کنیم یکی دوتا راه خیلی ساده داره ، من از اولیش میگم:const express=require('express'); const app=express(); app.get('/cookie',(request,response)=>{ response.setHeader('set-cookie',"name=value) response.send('cookie is set') } app.listen(5000,()=>console.log('Server ☑'))اگه همچین کدی رو پیاده کنین خب اول یه سرور اکسپرسی میسازین بعد یه نمونه از سرور میگیرین به اسم app ،روش یه middleware برای متد get از http میسازین که اگه آدرس cookie/ رو get کردیم یه سرور بیاد یه هدر set-cookie با اسم name و مقدار value بسازه و در نهایت هم این سرور قراره روی پورت 5000 ران بشه و وقتی که ران شد یه پیام ☑Server توی ترمینال بهمون نشون بده. خروجی یچیزی مثل زیر میشه:سرور اکسپرس رو پورت مدنظر ست شدهکوکی ای که ست شدهممکنه این سوال پیش بیاد که خب این کوکی ای که ست شده تا کی اعتبار داره که خب تواین حالت همونطور ک توی Expires/Max-age اپلیکیشن میبینیم مادامی که این سشن (صفحه مرورگر) فعاله این کوکی هم فعاله و وقتی صفحه بسته شه خب اون هم ازبین میره راه دوم برای ست کردن کوکی:راه دیگه ای هم وجود داره که بتونیم کوکی ست کنیم کافیه که پکیج cookie-parser رو نصب کنیم. بعد از نصب تو سرور اکسپرس یه بار با middleware صداش میزنیم و دیگه هرجایی که با کوکی ها کار داشتیم میتونیم ازش استفاده کنیم:const express=require('express'); **const cookieParser=require('cookie-parser') const app=express(); **app.use(cookieParser()) app.get('/cookie',(request,response)=>{ **response.cookie(name,value) response.send('cookie is set') } app.listen(5000,()=>console.log('Server ☑'))فقط کافیه کدهای ** رو تو پروژمون پیاده کنیم همونطور که مشخصه دیگه با ست هدر برای کوکی کاری نداریم و فقط کافیه که به response تابع cookie رو ست کنیم:response.cookie(name,value,{maxAge:10000})این امکانو بهمون میده که به کوکی ایکه داریم ست میکنیم یسری آپشن هم اضافه کنیم مثل maxAge,sameSite,secretو... که خب چیزی که در حال حاضر بهش نیاز داریم یه maxAge هست که مدت زمانی که کوکی ما قراره زنده باشه رو نشونمون میده:حالا اگه بخوایم به این کوکی هایی که ست کردیم دسترسی داشته باشیم چی؟ یعنی مثلا وقتی که میخوایم وارد سایت میشیم سرور بدونه که ما نیم ساعت پیش هم همینجا بودیم و بهمون دیتای اضافه نشون نده/یاازمون دیتای اضافه نخواد.خب در این صورت باید کوکی ای که ست شده رو به سرور برگردونیم قاعدتا با یچیزی مثل cookie-parser کد ما خیلی چیز خاصی نیاز نداره :app.get('/cookie',(request,response)=>{ res.send(request.cookies) }بدون cookie-parser هم که فقط کافیه از هدر هایی که ست شده استفاده کنیم و به کوکی ها برسیم:app.get('/cookie',(request,response)=>{ res.send(request.headers.cookie) }اما یه چیزی که منو خیلی درگیر خودش کرد این بود که خب من توی کدم فقط دنبال ساخت کوکی و گرفتنش نبودم در اصل توی کار داشتم این قضیه رو چک میکردم که اگر کاربر وارد شده دیگه نیاز نباشه که صفحه لاگین رو ببینه ولی هر کاری میکردم کوکی ست نمیشد که نمیشد. اینجا دقیقا جایی بود که به هرچی کلوچس تو دنیا لعنت فرستادم اصلا لعنت به کسی که کلوچه رو وارد تکنولوژی کرد یچیز خمیری شیرین چرا باید بیاد تو برنامه نویسیخلاصه که منطقا نمیشه دیگه کدمو اینجا بذارم اما اشاره کنم که من کوکی پارسر روداشتم و واسه ریکوست زدن به سرورم داشتم از fetch استفاده میکردم و خب در این موارد معمولا مرورگر ها ارور میدن که از CORS جلوگیری کنن و نصب یه اکستنشن CORS Unblock مشکل رو حل میکنه اما نباید یادتون بره که هروقت به این مورد برخوردید کوکیتون ست نمیشه مگر اینکه (( credentials )) رو ست کرده باشید:const sent = await fetch(`http://localhost:روت/پورت?sth=${**}&password=${**}`, { method: "GET", headers: { "Content-Type": "application/json", }, credentials: "include", }و بعد ست کردن credentials بود که کوکی منم ست شد?

از اسپاگتی و نوشابه تا ادمین

Peyman — Wed, 22 Feb 2023 12:38:51 +0330

اصلا چرا باید درگیر مفهومی مثل شی گرایی یا OOP بشیم ؟ این پارادایم توسعه داده شد تا ما راحتتر بتونیم کد ها رو دسته بندی کنیم ، نگهداری کنیم و حتی بهتر از همه اینا ، با این پارادایم کد های ما خیلی منعطف تر میشنقبل از اینکه با این پارادایم آشناشیم همیشه کدها در هم و برهم بود،احتمالا برای اینکه یه کارو انجام بدیم چهار بار یک تیکه کدو تکرار میکردیم و تازه بدتر ازهمه این بود که اگر میخواستیم بریم سراغ یه پروژه دیگه احتمالا هیچ کدوم از دستوراتی که توی کد قبلی زده بودیم بدردمون نمیخورد و باید از اول شروع میکردیم به نوشتن چون انقدر همه چیز در هم و برهم بود که احتمالا اگر بعد یک ماه میرفتیم سراغش هیچی ازش نمیفهمیدیم ، انگار یه ظرف ماکارونی جلومونه که هرچند که خوشمزس ولی معلوم نیست چی توشه اصلا واسه همین اون مدل کد زدن معروف شد به Spaghetti code اما لب کلام OOP چیه؟ یه راهی جلوپامون میذاره که یک سری شی object رو از کدمون بسازیم . اما چطوری؟ قبلا از کلاس استفاده میکردیم.کلاس چیه؟کلاس نقشست ، اون اشیایی که قراره بسازیم یه ساختار دارن قاعده و قانون دارن مثلا شرایطوقوانینی که تو تولید شیر کاکائو وجود داره تو تولید نوشابه وجود نداره حالا هی بیایم به این خط تولید(کدمون) بگیم شیرکاکائو(شی) بساز ولی دستور ساخت(کلاس) نوشابه رو بهش بدیم!!!هرچند این قوانین مفهومی و انتزاعی باشن اما همونطور که گفتم اصل و اساس ایجاد آبجکت ها تو دنیای واقعی هستند، نقشه ای که برای ساختن خونه طراحی میشه هم یک کلاسه و خونه هایی که تو دنیای واقعی بر اساس اون نقشه درست میشن هم شی هستند. اما این اشیایی که از کلاس ها ایجاد میشن یک اسم دیگه هم دارن و معروفند به نمونه یا instance. ما میتونیم هزاران instance متفاوت داشته باشیم که از یک کلاس دارن استفاده میکنن مثل کلاس ماشین که یک نمونش میشه بنز یک نمونش هم میشه پراید(!!!) هردوشون وسیله نقلیه هستند اما(این کجا و آن کجا) تفاوت های فاحشی هم باهم دارن ولی خب با توجه به تفاوت هاشون هردو چهارتا چرخ دارن، یک فرمون، موتور و ...پس چطور باید این کلاس ها رو طراحی کنیم؟چطور باید مسایل دنیای واقعی رو توی کلاس ها پیاده سازی کنیم؟بصورت کلی 4 تا قاعده اساسی توی شی گرایی وجود دارن که میتونن به ما کمک کنن که یک کلاس رو به خوبی بتونیم پیاده سازی کنیم :1)انتزاع یا abstraction: یعنی ساده سازی، یعنی یک سری فرآیند هایی که دستو پا گیرن رو از جلوی دستو پا برداریم مثلا چی؟مثلا ما میخوایم یه صفحه نمایش داشته باشیم اگر از انتزاع استفاده نکنیم باید برای هر عملی که توی یک صفحه نمایش اتفاق میفته یک دکمه برای کاربر اضافه کنیم مثلا تنظیم نور،دکمه خاموش و روشن کردن صفحه،میزان سردی و گرمی رنگ ها ، دمای صفحه نمایش چقدر شده ، پورت ورودیش چندتا خالی مونده ، و هزاران مسایل مربوط به داخل و خارج اون صفحه نمایش که اصلا در حالت عادی یک کاربر نیازی نداره بدونه در دنیای واقعی تمام این فعالیت ها ازدید کاربر پنهان شدن و کاربر فقط با دکمه روشن و خاموش کردن صفحه نمایش کار داره و بقیه موارد نه اینکه بدرد نخور باشند، فقط دم دست کاربر نیستن2) کپسوله سازی encapsulation: یعنی بیایم قسمت های مختلف یک کلاس رو خصوصی کنیم که از بیرون از کلاس به اون بخش ها دسترسی نداشته باشیم به مثال بالا دقت کنیم یک بار دیگه ، صفحه نمایش ما قابلیت اندازه گیری دمای داخل خودش رو داره بنابراین یک متد و فرآیندی برای این قضیه داخل این صفحه نمایش فعاله ولی آیا این فرآیند باید از خارج از صفحه نمایش بشه کنترلش کرد ؟ قطعا پاسخ نه خواهد بود.3)ارث بری inheritance: برای این مورد بیاین مثال رو به یک مثال واضح تر تبدیل کنیم، درنظربگیرید که ما موجودیتی به اسم یوزر توی برناممون داریم همچنین به جز اون موجودیتی به عنوان ادمین هم داریم خب قاعدتا بدون شک ، موجودیت ادمین موارد مشترک زیادی با یوزر داره مثل نام کاربری پسورد و...user{ username password email login(password){ // some code } makeCall(){ // some code } }================================================== admin{ username password email permissions login(password , Auth){ // some code } makeCall(){ // some code } runningSessions(user){ //some code } }توی oop وقتی دو تا کلاس داریم که خیلی شبیه به همدیگه هستن و پراپرتی های یکسان دارن از ارث بری استفاده میکنیم توی این حالت یک کلاس والد parent و یک کلاس فرزند یا child داریم کلاس فرزند از والد ارث میبره، توی مثال ما {}()username password email login(password){ } makeCall تماما از یوزر به ادمین به ارث رسیدن4)چندریختی polymorphism: وقتی میگیم چندریختی منظورمون دقیقا همون چندتا شکل وقیافه داشتنه این قابلیت کمکی که میتونه بهمون کنه اینه که میتونه متد هایی که از والدش به ارث برده رو بازنویسی (overwrite)کنه مثلا موجودیت ادمین برای لاگین شدن به کد دو عاملی هم نیاز داره و برخلاف والدش که تنها یک پارامتر password رو برای متد لاگین نیازداشت {}(login(password، توی ادمین میبینیم که پارامتر auth هم اضافه شده{}login(password , Auth).

چه رویداد هایی دارن پشت صحنه یک صفحه وب اتفاق میفتن؟

Peyman — Sat, 18 Feb 2023 14:56:37 +0330

توی این بلاگ قصد دارم در مورد چند تا Dom Event که در چرخه حیات یک صفحه وب اتفاق میفتن صحبت کنم اما نکته اول اینه که اصلا چرخه حیات یا life cycle یعنی چی؟ازلحظه اولی که یک صفحه وب در دسترس قرار میگیره تا لحظه ای که از اون صفحه خارج بشیم رو اصطلاحا چرخه حیات اون صفحه میدونیمDomContentLoadedاولین رویدادی که میخوایم راجع بهش صحبت کنیم Dom Content Loaded هست که به محض این که سند HTML کاملا پارس میشه( فرآیند دانلود شدن کامل صفحه HTML و تبدیل شدن به DOM tree) توسط خود document فراخونی میشه اما قبل ازاینکه Dom Content Loaded بتونه اتفاق بیفته تمام اسکریپت ها باید دانلود و اجرا بشن بنابراین سایر منابع مثل تصاویر یا هر منبع دیگه ای (به جزhtml و js scripts همونطوریکه بالاتر هم اشاره کردم)خیلی مورد توجه این Event نیست#code1 document.addEventListener('DOMContentLoaded',(e)=>{ console.log('Html parsed',e); });حالا دقیقا بعد ازاین خطه که میتونیم کدهایی رو بنویسیم که نیاز داریم بعد از اینکه DOM لود شده اجرابشن و خب ما تقریبا میخوایم تمام کدمون دقیقا بعد از اینکه DOM آماده شد اجرا بشه. اما این جمله معنیش این نیست که ما وابسته کد بالاییم که وب اپلیکیشنمون کار کنه. اما چرا؟چون ما تگ رویایی script رو داریم که معمولا قبل ازاینکه تگ body رو ببندیم فراخونیش میکنیم و این تگه که میاد و جاوا اسکریپت رو به HTML ایمپورت میکنهپس آخرین چیزی که HTML میخونه ایمپورت کردن جاوااسکریپته#code2