Tech Stuff – Telegram
فرستادن تابع به ref در React

توی React می‌تونیم به جای استفاده از useRef، یه تابع مستقیم به ref بدیم و رفتار المنت‌ها رو موقع رندر و unmount مدیریت کنیم.

@techstuff100
👍8🔥1🎉1
Tech Stuff
Photo
توی نسخه‌های قبل موقع unmount شدن المنت، React اون تابع رو با null صدا می‌زد. توی React 19 می‌تونیم برای توابع ref‌مون یه تابع cleanup تعریف کنیم که در این صورت، اون مرحله صدا زدن تابع با null موقع unmount اسکیپ میشه.

@techstuff100
👍4🔥2👏1
تجربه مصاحبه با دیجی‌کالا

تابستون ۱۴۰۳ برای موقعیت شغلی Front-End Engineer در دیجی‌کالا رزومه فرستادم. اواخر مرداد، تیم Talent Acquisition باهام تماس گرفتن و برای دو روز بعد، مصاحبه الگوریتمی به صورت live coding تنظیم شد.

طول مصاحبه الگوریتمی ۳۰ دقیقه بود و از طریق MS Teams برگزار شد. یکی از مصاحبه‌کننده‌ها سر وقت حاضر شد، ولی برای مصاحبه‌کننده دوم حدود ۳ دقیقه منتظر موندیم. چون ایشون حاضر نشدن، مصاحبه رو دونفره شروع کردیم.

مصاحبه فقط شامل یک سوال بود: آرایه‌ای از رشته‌ها داده شده، و باید پیدا می‌کردیم چندتا از این رشته‌ها معکوسشون (reverse) هم داخل آرایه وجود داره. مثلا برای آرایه زیر، جواب ۲ هست:
["ac", "bc", "ca", "cb", "zz"]

راه‌حلی که پیاده‌سازی کردم اینطوری بود که یه شمارنده‌ count و یه آبجکت (در JS) یا هش‌مپ برای ذخیره وجود هر عضو (یعنی حالت flag) تعریف کردم. یه بار روی آرایه لوپ زدم، و اگه عضو فعلی داخل هش‌مپ نبود، reverse اون عضو رو توی هش‌مپ true کردم. در غیر این صورت، مقدار count رو افزایش دادم. طبیعتا پیچیدگی زمانی O(n) می‌شد.

@techstuff100
👍52
Tech Stuff
تجربه مصاحبه با دیجی‌کالا تابستون ۱۴۰۳ برای موقعیت شغلی Front-End Engineer در دیجی‌کالا رزومه فرستادم. اواخر مرداد، تیم Talent Acquisition باهام تماس گرفتن و برای دو روز بعد، مصاحبه الگوریتمی به صورت live coding تنظیم شد. طول مصاحبه الگوریتمی ۳۰ دقیقه بود…
فضای مصاحبه و رفتار مصاحبه‌کننده خوب بود؛ ولی با اینکه سوال رو حل کرده بودم، در پایان مصاحبه حس خوبی نداشتم.

حدود یک ماه از مصاحبه گذشت و خبری از ایمیل پذیرش یا رد شدن نیومد. فکر کردم که رد شدم و تقریبا بی‌خیال قضیه شده بودم که دوباره تماس گرفتن برای هماهنگی مصاحبه دوم (مصاحبه فنی) که اواخر شهریور برگزار شد. این مصاحبه یک ساعته بود و از طریق Skype انجام شد.

برخی از سوال‌هایی که پرسیده شد:
۱. مفهوم event loop
۲. اسکوپ‌ها (scope) و TDZ
۳. خروجی کد (پست بعدی)
۴. روش‌های ذخیره‌سازی داده در مرورگر و تفاوت‌هاشون
۵. هدر set-cookie
۶. مفهوم event bubbling
۷. استفاده از preventDefault برای تگ‌های a
۸. مفاهیم debounce و throttle
۹. پوزیشن‌های CSS
۱۰. قوانین هوک‌ها
۱۱. توضیح useEffect و useLayoutEffect و تفاوت‌هاشون
۱۲. توضیح توابع cleanup در useEffect
۱۳. توضیح event batching
۱۴. مفاهیم LCP، CLS و Performance وب
۱۵. مفاهیم و جزئیات memo و useMemo
و ۳-۴ تا سوال دیگه که دقیق یادم نیست.

فرایند مصاحبه بیشتر شبیه به یک گفت‌وگوی فنی بود و در فضایی صمیمی پیش رفت. مصاحبه‌کننده هم بسیار حرفه‌ای و خوش‌برخورد بودن.

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

@techstuff100
👍103👏1
ارتباط بین پنجره‌ها با postMessage

این متد جاوااسکریپت، بهمون اجازه می‌ده از یه صفحه‌ وب (مثلا یه iframe) به یه صفحه دیگه (مثلا parentش) پیام بفرستیم. توی این پست به همراه مثال توضیحش دادم.

@techstuff100
👍15👏1🎉1
فایل .gitattributes در گیت

ممکنه پیش بیاد یه پروژه رو کلون کنیم، بعد ببینیم یه سری فایل EOL (End Of Line) عجیب‌غریب باز می‌شن یا وقتی diff می‌گیریم پر از تغییرات بی‌ربطه. توی این موقعیت فایل .gitattributes می‌تونه کمک‌مون کنه.

فرض کنید توی یه تیمی کار می‌کنیم که اعضاش رو ویندوز، مک و لینوکس هستن. هر کی با ادیتور و تنظیمات خودش. حالا یه نفر یه فایل .bat می‌نویسه که رو ویندوز باید با CRLF باشه، ولی یکی دیگه با LF کامیتش می‌کنه، و اسکریپت دیگه اجرا نمی‌شه. یا مثلا یه فایل go رو که باید با LF باشه، یکی دیگه با CRLF ذخیره کرده. با .gitattributes می‌تونیم از این ناهماهنگی‌ها جلوگیری کنیم و یه سری قانون برای Git تعریف کنیم که همه اعضای تیم رعایتش کنن.

توی این مثال تعریف کردم که:
- فایل‌های .bat باید همیشه با CRLF باشن.
- فایل‌های go فقط با LF ذخیره بشن.
- فایل‌های .png و .noscript هم باینری در نظر گرفته بشن تا Git نخواد روشون diff بگیره.

@techstuff100
👍11
از Accessibility Tree View تو DevTools کروم می‌تونیم برای بررسی دسترسی‌پذیری سایت‌مون استفاده کنیم. این ابزار نشون می‌ده یه المنت چجوری توسط screen reader خونده میشه؛ مثل role، name و ARIA attributes.
از DevTools پنل Elements و دکمه accessibility می‌تونیم فعالش کنیم.

@techstuff100
👍14👏1
قفل خوش‌بینانه و بدبینانه (Pessimistic / Optimistic Locking)

گاهی وقتا نیاز داریم مطمئن باشیم داده‌ای که داریم تغییرش می‌دیم، وسط کار توسط کس دیگه‌ای دستکاری نشده. چنین مواقعی قفل‌گذاری (Locking) می‌تونه کمکمون کنه.۲ تا از انواع قفل، قفل خوش‌بینانه (Optimistic) و بدبینانه (Pessimistic) هستن.

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

لینک مقاله:
https://newsletter.systemdesigncodex.com/p/pessimistic-vs-optimistic-locking

@techstuff100
👍6
اصول DRY ،AHA و WET

تو این پست درباره‌ی سه اصل مهم برنامه‌نویسی صحبت کردم و با مثال توضیح دادم که همیشه abstraction‌ بهترین راه نیست و چه وقتایی بهتره تکرار داشته باشیم.

@techstuff100
👍151🔥1