Ditty | دیتی

🔺قابلیت Type Predicate توی تایپ‌اسکریپت چیه؟ 🤔 - تایپ‌اسکریپت یه قابلیت کاربردی داره به اسم Type Predicate که کمک می‌کنه نوع یک مقدار به شکل یک خاص‌تر و مشخص‌تر برای ما در دسترس باشه - برای مثال توی شرایطی که نوع یک مقدار ممکنه عدد باشه یا رشته، این قابلیت به ما کمک می‌کنه که از نوع اون مقدار قطعیت داشته باشیم. به قول معروف عملیات Narrowing رو برامون راحت‌تر می‌کنه - توی این پست ابتدا با مفهوم Narrowing آشنا می‌شیم و بعد Type Predicate رو بررسی می‌کنیم: ditty.ir/549 #typescript

🔺قابلیت Type Predicate توی تایپ‌اسکریپت چیه؟ 🤔 - تایپ‌اسکریپت یه قابلیت کاربردی داره به اسم Type Predicate که کمک می‌کنه نوع یک مقدار به شکل یک خاص‌تر و مشخص‌تر برای ما در دسترس باشه - برای مثال توی شرایطی که نوع یک مقدار ممکنه عدد باشه یا رشته، این قابلیت به ما کمک می‌کنه که از نوع اون مقدار قطعیت داشته باشیم. به قول معروف عملیات Narrowing رو برامون راحت‌تر می‌کنه - توی این پست ابتدا با مفهوم Narrowing آشنا می‌شیم و بعد Type Predicate رو بررسی می‌کنیم: ditty.ir/549 #typescript

سلام دوستان عزیزم. من قصد دارم دوباره فرصتی رو بذارم، تا اگه راهنمایی، کمک و مشورت توی حوزه کاری احتیاج دارین تا جایی که از دستم بر بیاد راهنماییتون کنم و پاسخ بدم - پیامتون رو تا آخر وقت دوشنبه به ایمیل زیر بفرستین. و لطفاً واضح و جامع توضیح بدین تا بهتر بتونم راهنمایی کنم: alinazari.work@gmail.com - ممکنه با تأخیر جواب بدم، که از همین الان عذر می‌خوام :) اما حتماً سعی می‌کنم که پاسخگو باشم منتظرتون هستم 🖐🌹

🔺سرویس‌ ورکر (Service Worker) چیه؟ 🤔 - سرویس ورکر به اسکریپت‌هایی گفته میشه که پشتِ پردهٔ برنامه‌های فرانت‌اندی اجرا میشن. به طوری که کاربر و Main Thread وجود اونها رو حس نمی‌کنه - با سرویس‌ورکرها می‌تونیم: • به شکل حرفه‌ای ریسورس‌ها رو کش کنیم و برنامه‌های آفلاین داشته باشیم • عملیات و پردازش‌های سنگین انجام بدیم • به کاربرا Push Notification ارسال کنیم • و ... - مهمترین هدف سرویس‌ورکر کم کردن حجم کارهای Main Thread هست. کارهایی که باعث افت کیفیت و سرعت برنامه‌های ما می‌شدن - توی این قسمت می‌خوایم با سرویس‌ورکرها آشنا بشیم و ببینیم که چطوری می‌تونیم از این تکنیک برای Cache کردن ریسورس‌هامون استفاده کنیم: ditty.ir/546 #frontend

🔺با HTTP Caching و نحوهٔ کارکرد اون توی مرورگر آشنا بشیم - توی این پست می‌خوایم با چند هدر HTTP آشنا بشیم که بطور اختصاصی برای Caching و مدیریت ذخیره‌سازی اطلاعات استفاده میشن - این تکنیک با حذف کردن درخواست‌های HTTP اضافی، استفاده از پهنای باند رو به شکل قابل توجهی کاهش میده که نتیجهٔ اون افزایش سرعت و عملکرد برنامه‌های فرانت‌اندی هست - جدیدترین پست دیتی: ditty.ir/545 #frontend

🔺 توی برنامه‌های فرانت‌اندی، آیا تفاوت Building و Bundling رو می‌دونیم؟ 🤔 تفاوت Minify و Uglify چطور؟ - توی این پست دیتی می‌خوایم ۶ واژه که شبیه به هم هستن رو بررسی کنیم: ditty.ir/543 #frontend

🔺یک منبع به‌روز و پر از آموزش و نکتهٔ برای فرانت‌اند: https://frontendmasters.com/guides/front-end-handbook/2024 #links

🔺تصاویر، فونت‌ها، اسکریپت‌ها و فایل‌های یک برنامهٔ فرانت‌اندی رو چطوری مدیریت کنیم؟ 🤔 - یکی از مهارت‌هایی که به‌عنوان توسعه‌دهندهٔ فرانت‌اند باید اون رو بلد باشیم، نحوهٔ مدیریت Asset های برنامه هست - توی این پست نکته‌ها و تجربیاتی رو برای مدیریت Asset ها (فایل‌ها و تصاویر و ...) توی برنامه‌های فرانت‌اند براتون به اشتراک گذاشتم: ditty.ir/540 #tips

سلام دوستان، عیدتون مبارک 👋 - نسخهٔ PDF برای ۸۰ سوال مصاحبهٔ فرانت‌اند و ۷۰ سوال مصاحبهٔ جاوااسکریپت رو می‌تونین دانلود کنین 👇 • 80 FE Interview Questions • 70 JavaScript Interview Questions #interview

🔺توی جاوااسکریپت و مبحث پرامیس‌ها، تفاوت متدهای race و any چیه؟ متد all و allSettled چطور؟ 🤔 - این متدها که از Promise به صورت استاتیک قابل دسترس هستن (یعنی مثلاً ()Promise.resolve یا ()Promise.race) کاربردهای زیادی دارن و بهمون کمک می‌کنن یک برنامهٔ سریع‌تر و پویاتر داشته باشیم. توی این پست این متدها رو بررسی می‌کنیم و با مثال‌هایی از کاربرد اونها توی دنیای واقعی آشنا می‌شیم: ditty.ir/537 #javascript

🔺ترفند ری‌اکتی - توی ری‌اکت وقتی از useState استفاده می‌کنیم، برای مقدار اولیه اون، بجای پاس دادن مقدار به‌صورت مستقیم می‌تونیم اون رو توی یک کال‌بک محصور کنیم (مثل عکس) - توی عکس همونطور که می‌بینیم، تابعی داریم به اسم heavyCalculation که مثلاً کار سنگینی انجام میده و می‌خوایم خروجی اون رو به عنوان مقدار useState قرار بدیم - می‌تونستیم این کار رو بدون استفاده از کال‌بک هم انجام بدیم، که توی این حالت باید بدونیم که هر بار که این کامپوننت رندر میشه، تابع پاس داده‌شده هم مجدد اجرا میشه. که اگه عملیات ما سنگین باشه باعث افت عملکرد کامپوننت میشه - حالا وقتی که تابع یا یک عملیات سنگین رو توی یک کال‌بک محصور می‌کنیم، ری‌اکت توی رندر ابتدایی، این کال‌بک رو اجرا و توی رندرهای بعدی از خروجی این کال‌بک (که توی رندر ابتدایی محاسبه شده) استفاده می‌کنه. یعنی فقط یک بار اجرای اون عملیات سنگین - از این ترفند بهتره زمانی استفاده کنیم که واقعاً عملیات سنگینی داریم که هر بار اجرای اون، عملکرد کامپوننت رو تحت تأثیر قرار میده - مشاهدهٔ نمونه عملی #react

سال قبل کلی پیام از شما گرفتم که مشکلات و دغدغه‌هاتون رو با من در میون گذاشتین. اگه بخوام همه این تجربه رو توی یک جمله خلاصه کنم، میشه: «یکمی بیشتر با هم مهربون باشیم» سال نو همگی دوستان مبارک باشه 👋 #1403

🔺آشنایی با ویژگی‌های جدید جاوااسکریپت (ES14) - توی اکمااسکریپت ١۴ ویژگی‌های جالبی رو داریم از جمله چند متد کاربردی مربوط به آرایه‌ها - توی این پست با این ویژگی‌ها که توی جدیدترین نسخه‌های جاوااسکریپت و تایپ‌اسکریپت در دسترس هستن آشنا بشیم: https://ditty.ir/536 #javascript

🔺ـReact Strict DOM چیه؟ 🤔 - اگه تجربه توسعه برنامه‌های موبایلی با React Native رو داشته باشین، می‌دونین که استفاده از کامپوننت‌های ری‌اکت نسخه وب توی نِیتیو خیلی هم ساده نیست. و باید از یک‌سری کامپوننت‌های خاص استفاده کرد - مثلاً توی نیتیو نمی‌تونیم از div استفاده کنیم و بجاش باید از المنت View استفاده کرد - اما فیسبوک این پکیج (که فعلاً آزمایشی هست) رو چند روز پیش منتشر کرده که اجازه میده کامپوننت‌هایی داشته باشیم که به قول معروف Universal و عمومی‌تر هستن و کمک می‌کنن راحت‌تر بتونیم از کامپوننت‌های موجود بین برنامه‌های وب و نیتیو استفاده کنیم - برای مثال بجای استفاده از div و یا View، از یک المنت خاص به اسم html.div استفاده می‌کنیم. و این ابزار پشت پرده کار تبدیل رو به‌صورت خودکار انجام میده 🔗 مشاهده نمونه #react

🔺تجربهٔ مصاحبه فرض کنین چنین سوالی ازتون پرسیده میشه: «برای شروع یک پروژه چه ابزارهایی رو انتخاب می‌کنید؟» - جواب غلط: «من برای شروع یک پروژه از Next.js و GraphQL و تایپ‌اسکریپت و تیلویند و استوری‌بوک و [+۱۰۰ ابزار دیگه که نشون بدیم چقدر خفن و با کاربلد هستیم]» - چرا این جواب غلطه؟ چون با حداقل اطلاعات و چشم‌بسته داریم چنین جوابی رو می‌دیم و بنابراین نشون‌دهندهٔ تعصب هست. شما برای شغل ری‌اکتی اقدام کردین و مصاحبه‌کننده قطعاً می‌دونه که شما در حالت عادی از چنین ابزارهایی استفاده می‌کنین. یک مصاحبه‌شونده و یک مصاحبه‌کنندهٔ سالم از تعصب خوشش نمیاد. و تعصب هم یعنی یک هم‌تیمی مغرور و غیر قابل انعطاف. - جواب درست: «کاملاً بستگی داره. من قبل از شروع پروژه بررسی می‌کنم که موضوع پروژه چیه، چقدر زمان و بودجه در نظر گرفته شده. در واقع باید ابتدا اولویت‌ها رو بررسی کنیم و همچنین ببینیم افرادی که توی پروژه دخیل هستن چه مهارت‌هایی دارن. و براساس این اطلاعات حتی شاید مجبور بشیم با ابزارهایی کار کنیم که تابحال تجربهٔ نداشتیم.» - در واقع بهتره که از تکنیک پست قبل هم استفاده کنین. مثلاً به مصاحبه‌کننده بگید که «کاملاً بستگی داره» و ازش بخواین که بیشتر توضیح بده. مثلاً: «راستش بسته به اینکه موضوع پروژه و نیازهای ما چه چیزهایی هستن، ابزارهای متفاوتی رو میشه به کار گرفت. امکانش هست لطفاً بیشتر درباره این موارد توضیح بدین تا جواب بهتری می‌تونم بدم؟» اون هم مشتاقانه جواب میده «بله بله! البته! ببینید، ... » و شما هم زمان بیشتری بدست میارین تا به سوال فکر کنین و هم جواب مرتبط‌تری می‌دین :) - اگه نهایتاً می‌خواید ابزار خاصی رو نام ببرید، قبل از مصاحبه باید بدونین که شرکت از چه استکی استفاده می‌کنه. و جوابتون رو مرتبط با اون استک بدین. #tips

🔺 تجربه مصاحبه دوستان توی #مصاحبه وقتی از شما سوالی میشه، فوراً شروع نکنین به جواب دادن. سعی کنین اطلاعات بیشتری از سوال بدست بیارین. مثلاً از شما پرسیده میشه که بزرگترین چالشی که توی آخرین پروژه‌تون داشتین چی بوده. شما اینجا بهتره تلاش کنین که منظور سوال رو متوجه بشین. چه نوع چالشی منظورش هست؟ فنی؟ ارتباطی؟ یک جواب مناسب می‌تونه این باشه: «راستش توی پروژه قبلی چالش‌های مختلفی داشتیم. هم فنی و هم غیر فنی. اما میشه لطفاً مشخص کنین که چه نوع چالشی منظورتون هست؟» با این کار هم سوال رو دقیق‌تر متوجه میشین و می‌تونین جواب مناسب‌تری بدین، و هم زمان بیشتری برای فکر کردن به جواب بدست میارین. #tips

دوستان عزیزم 🙋‍♂️ توی کار و حرفه و زندگیتون اگه سوالی دارین، راهنمایی میخواین، درد دل دارین گله و شکایت دارین میخواین یکی به حرفاتون گوش بده نیاز به مشورت دارین من مایلم قسمتی از وقتم رو در اختیارتون قرار بدم و خوشحال میشم اگه بتونم کمکتون کنم این ایمیل من هست: alinazari.work@gmail.com من شنبه و یکشنبه (٢٨ و ٢٩ بهمن) پیام‌هاتون رو میخونم. لطفاً تا قبل از این تاریخ پیام‌هاتون رو به اون آدرس بفرستین. امیدوارم بتونم تا حد توانم کمکتون کنم.

🔺همزمان که به روز ولنتاین نزدیک میشیم، بد نیست کدهای HTTP رو با مثال‌هایی از این روز یاد بگیریم: HTTP codes as Valentine’s Day comics #fun

🔺می‌خواید به صورت عملی ببینید #جاوااسکریپت چطوری عملیات Async رو مدیریت می‌کنه؟ اینجا رو ببینید:👇 https://www.jsv9000.app #links