🔰اگر در مرحله اپلای هستید
پیشنهاد میکنم حتما ویدئوهای چنل زیر رو قبل از مصاحبه ببینید:
👇👇👇👇
https://www.youtube.com/@CareerVidz
پیشنهاد میکنم حتما ویدئوهای چنل زیر رو قبل از مصاحبه ببینید:
👇👇👇👇
https://www.youtube.com/@CareerVidz
🔰تبدیل دیزاین به کد با یک کلیک
این سرویس در حال حاضر رایگان است و شما می توانید نسخه بتا رو تست کنید
👇👇👇👇
https://www.locofy.ai/
این سرویس در حال حاضر رایگان است و شما می توانید نسخه بتا رو تست کنید
👇👇👇👇
https://www.locofy.ai/
🔰چطور برای موقعیت Senior Front-End Engineer مصاحبه کنیم؟
credit:https://twitter.com/realmaxtsh
👇👇👇
در این #رشتو میخوام یه سری مواردی که توی مصاحبه های موقعیت سنیور فرانت اند خیلی برای خود من به شخصه مهم هست اشاره بکنم و یه لیست خوب ازشون بسازم ولی قبلش باید یه نکته راجب مصاحبه های رایج بگم.
بدترین مدل ارزیابی تو مصاحبه پرسیدن سوالای تستیه! مثلا console.log( folan === folan) خب این الان چیو قراره برسونه؟ نتیجه اینو کسی حفظ باشه چه نتیجه ای داره؟ این سبک سوالات چرت و پرت و بی خاصیت هست که فقط من رو یاد کنکور و تست زنی و این سبک های فایده و آسیب زا میندازه.
نتنها هیچ خاصیتی ندارن، دونستشون هیچ ضرورتی خیلی وقت ها نداره چون use case عملیاتی ازشون اتفاق نمی افته یا بیافته هم سریع با یه سرچ میشه پیداش کرد. بیشتر شبیه دیکشنری های لغت میمونه که انگار میخوایم بشینیم 8000 صفحه دیکشنری آکسفورد رو حفظ بکنیم!
بیزنس ها دنبال حفظیات افراد نیستن، بیزنس ها کلی مشکل و مسئله دارن و دنبال یه نفر میگردن بتونه بیزنسشون رو بشناسه و راه حل خوب ارائه بده. در ضمن مصاحبه برای موقعیت سنیور علاوه بر اینکه نیازمند سنجیدن تجربه فرد بر اساس ادعای خودش هست، نیازمند سنجیدن وضعیت سافت اسکیل اش هم هست.
من اگه بخوام حقوق خوب بدم و یه نفر رو بیارم توی تیمم تا به عنوان سنیور کار بکنه، باید من هم بتونم باهاش کار بکنم و سر مسائل به توافق برسیم و کار ها رو جمع کنیم. باید فرد مصاحبه گر این موضوع رو هم به عنوان بخشی از مصاحبه در بیاره، فقط بعد فنی هم مطرح نیست.
حالا بریم سراغ اصل داستان، توی مصاحبه فنی سنیور فرانت اند چیا بپرسیم؟
سوال اول: من میام میگم مشکل من cache کردن asset هام توی Client-Side ام هست، از مصاحبه شونده میپرسم که راجب Cache تو مرورگر و Service Worker چی میدونی؟ قبلا کار کردی؟ استراتژی های استاندارد کش چیه؟
هر کدوم چه use case هایی داره؟
فایل های image, font, json رو چطور باید کش بکنیم.
فایل های JS و css و html رو چطور کش بکنیم و ...
یا میام راجب پرفورمنس و پترن های مختلفش توی React میپرسم که چطوری بتونیم بهبودش بدیم.
پترن های Rendering رو بشناسه و بدونه برای کجا خوبه.
یه سوال دیگه این مثلا میتونه باشه که من یه ابزار Conversation دارم که AI هست و یوزر چت میکنه، نحوه ارتباط اینها با Back-End از طریق network چطوری انجام میشه و چه روشی براش هست؟
توی فرانت اگه سابقه چت به 1000 تا چت برسه چطوری باید اینارو رندر کنیم که صفحه laggy نشه؟
یه سوال دیگه اینه که من میخوام تغییراتی که توی state های صفحه میدم رو با یه نفر دیگه share بکنم. مثلا یه صفحه باز کردم 10 تا کانفیگ رو تغییر دادم و میخوام اینو با یه نفر دیگه share کنم راه حل چیه؟
یه سوال دیگه اینه که من وب اپم 50 تا صفحه داره و هر صفحه 200 کیلوبایت یا بیشتر حجم کدش هست، چطوری صفحه بندی رو توی فرانت مدیریت بکنم توی client-side router که باندل سایزم استاندارد باشه؟ چه روش هایی برای این حل این مشکل وجود داره؟
بعدی: با توجه به مدل بیزنس ما، چه سیستم authentication و authorization برای کلاینت میشه پیاده کرد؟ چه retry policy روی ریکوئست های نتوورک API هامون باید بذاریم؟ چطوری رفرش توکن رو مدیریت کنیم، چه زمانی توکن و رفرش توکن باید valid باشه و چه زمانی کاربر مجبور بشه لاگین کنه؟
سوال بعدی: چطوری role-base فیچر هارو بذاریم؟ چطوری صفحه هارو role base کاربر ها بتونن ببینن یا نبینن؟
سوال بعدی: من میخوام یه سیستم دیزاین برای theme ام بسازم، چه راه حلی با توجه به ساختاری که داریم ارائه میدی؟ چطوری کمپوننت هارو بسازیم و بتونیم شیر کنیم و ...
سوال بعدی: fetch as render یا fetch in parallel with render چطوریه؟ توی ریکت چطوری میشه با این روش تجربه کاربری بهتری ارائه داد؟
سوال بعدی: ما توی react چطوری با به کار بردن مفهوم colocation میتونیم performance رو بهبود بدیم؟
برای ذخیره اطلاعات توی مرورگر چه روش هایی هست؟ local storage و indexDB, session storage و cache و cookie هر کدوم رو قبلا چه استفاده ای داشتی و راجبشون توضیح بده.
سوال بعدی: من میخوام real-time notification داشته باشم، چه ابزار هایی رو باید استفاده کنم؟ پوش نوتیفیکشن توی سرویس وورکر چطور کار میکنه؟ لایف سایکل سرویس وورکر چیه؟
بعدی: چطوری CSRF و XSS رو باهاش مقابله کنیم؟
سوال بعدی: فلگ های ست کردن توی کوکی که خیلی مهم هستن چین و توضیح بده مثلا same-site چیکار میکنه، http only چیکار میکنه، secure چیکار میکنه؟ میشه کوکی رو از سمت سرور ست کرد یا نه؟
اگه نه چرا اگه آره چرا؟ اگه میشه ست کرد چطوری توی فرانت باید کوکی رو توی درخواست برگردونیم؟
بعدی: یه سری API های مهم مرورگر رو بگو و چیکار میکنن مثلا broadcast channel رو کار کردی؟ کاربردش چیه؟
credit:https://twitter.com/realmaxtsh
👇👇👇
در این #رشتو میخوام یه سری مواردی که توی مصاحبه های موقعیت سنیور فرانت اند خیلی برای خود من به شخصه مهم هست اشاره بکنم و یه لیست خوب ازشون بسازم ولی قبلش باید یه نکته راجب مصاحبه های رایج بگم.
بدترین مدل ارزیابی تو مصاحبه پرسیدن سوالای تستیه! مثلا console.log( folan === folan) خب این الان چیو قراره برسونه؟ نتیجه اینو کسی حفظ باشه چه نتیجه ای داره؟ این سبک سوالات چرت و پرت و بی خاصیت هست که فقط من رو یاد کنکور و تست زنی و این سبک های فایده و آسیب زا میندازه.
نتنها هیچ خاصیتی ندارن، دونستشون هیچ ضرورتی خیلی وقت ها نداره چون use case عملیاتی ازشون اتفاق نمی افته یا بیافته هم سریع با یه سرچ میشه پیداش کرد. بیشتر شبیه دیکشنری های لغت میمونه که انگار میخوایم بشینیم 8000 صفحه دیکشنری آکسفورد رو حفظ بکنیم!
بیزنس ها دنبال حفظیات افراد نیستن، بیزنس ها کلی مشکل و مسئله دارن و دنبال یه نفر میگردن بتونه بیزنسشون رو بشناسه و راه حل خوب ارائه بده. در ضمن مصاحبه برای موقعیت سنیور علاوه بر اینکه نیازمند سنجیدن تجربه فرد بر اساس ادعای خودش هست، نیازمند سنجیدن وضعیت سافت اسکیل اش هم هست.
من اگه بخوام حقوق خوب بدم و یه نفر رو بیارم توی تیمم تا به عنوان سنیور کار بکنه، باید من هم بتونم باهاش کار بکنم و سر مسائل به توافق برسیم و کار ها رو جمع کنیم. باید فرد مصاحبه گر این موضوع رو هم به عنوان بخشی از مصاحبه در بیاره، فقط بعد فنی هم مطرح نیست.
حالا بریم سراغ اصل داستان، توی مصاحبه فنی سنیور فرانت اند چیا بپرسیم؟
سوال اول: من میام میگم مشکل من cache کردن asset هام توی Client-Side ام هست، از مصاحبه شونده میپرسم که راجب Cache تو مرورگر و Service Worker چی میدونی؟ قبلا کار کردی؟ استراتژی های استاندارد کش چیه؟
هر کدوم چه use case هایی داره؟
فایل های image, font, json رو چطور باید کش بکنیم.
فایل های JS و css و html رو چطور کش بکنیم و ...
یا میام راجب پرفورمنس و پترن های مختلفش توی React میپرسم که چطوری بتونیم بهبودش بدیم.
پترن های Rendering رو بشناسه و بدونه برای کجا خوبه.
یه سوال دیگه این مثلا میتونه باشه که من یه ابزار Conversation دارم که AI هست و یوزر چت میکنه، نحوه ارتباط اینها با Back-End از طریق network چطوری انجام میشه و چه روشی براش هست؟
توی فرانت اگه سابقه چت به 1000 تا چت برسه چطوری باید اینارو رندر کنیم که صفحه laggy نشه؟
یه سوال دیگه اینه که من میخوام تغییراتی که توی state های صفحه میدم رو با یه نفر دیگه share بکنم. مثلا یه صفحه باز کردم 10 تا کانفیگ رو تغییر دادم و میخوام اینو با یه نفر دیگه share کنم راه حل چیه؟
یه سوال دیگه اینه که من وب اپم 50 تا صفحه داره و هر صفحه 200 کیلوبایت یا بیشتر حجم کدش هست، چطوری صفحه بندی رو توی فرانت مدیریت بکنم توی client-side router که باندل سایزم استاندارد باشه؟ چه روش هایی برای این حل این مشکل وجود داره؟
بعدی: با توجه به مدل بیزنس ما، چه سیستم authentication و authorization برای کلاینت میشه پیاده کرد؟ چه retry policy روی ریکوئست های نتوورک API هامون باید بذاریم؟ چطوری رفرش توکن رو مدیریت کنیم، چه زمانی توکن و رفرش توکن باید valid باشه و چه زمانی کاربر مجبور بشه لاگین کنه؟
سوال بعدی: چطوری role-base فیچر هارو بذاریم؟ چطوری صفحه هارو role base کاربر ها بتونن ببینن یا نبینن؟
سوال بعدی: من میخوام یه سیستم دیزاین برای theme ام بسازم، چه راه حلی با توجه به ساختاری که داریم ارائه میدی؟ چطوری کمپوننت هارو بسازیم و بتونیم شیر کنیم و ...
سوال بعدی: fetch as render یا fetch in parallel with render چطوریه؟ توی ریکت چطوری میشه با این روش تجربه کاربری بهتری ارائه داد؟
سوال بعدی: ما توی react چطوری با به کار بردن مفهوم colocation میتونیم performance رو بهبود بدیم؟
برای ذخیره اطلاعات توی مرورگر چه روش هایی هست؟ local storage و indexDB, session storage و cache و cookie هر کدوم رو قبلا چه استفاده ای داشتی و راجبشون توضیح بده.
سوال بعدی: من میخوام real-time notification داشته باشم، چه ابزار هایی رو باید استفاده کنم؟ پوش نوتیفیکشن توی سرویس وورکر چطور کار میکنه؟ لایف سایکل سرویس وورکر چیه؟
بعدی: چطوری CSRF و XSS رو باهاش مقابله کنیم؟
سوال بعدی: فلگ های ست کردن توی کوکی که خیلی مهم هستن چین و توضیح بده مثلا same-site چیکار میکنه، http only چیکار میکنه، secure چیکار میکنه؟ میشه کوکی رو از سمت سرور ست کرد یا نه؟
اگه نه چرا اگه آره چرا؟ اگه میشه ست کرد چطوری توی فرانت باید کوکی رو توی درخواست برگردونیم؟
بعدی: یه سری API های مهم مرورگر رو بگو و چیکار میکنن مثلا broadcast channel رو کار کردی؟ کاربردش چیه؟
🔰اگه دوست دارید که سیستم دیزاین رو با مثال های باحال از پروژه های مشابه Whatsapp, instagram و.. یاد بگیرید این سایت رو چک کنید.
البته فقط مباحث System Design رو کاور نکرده و مباحث دیگه ای هم توی سایتش پیدا میشه مثل ssh، الگوریتم و..
👇👇👇
https://techbyexample.com/whatsapp-system-design/
البته فقط مباحث System Design رو کاور نکرده و مباحث دیگه ای هم توی سایتش پیدا میشه مثل ssh، الگوریتم و..
👇👇👇
https://techbyexample.com/whatsapp-system-design/
Welcome to Tech by Example
Whatsapp System Design - Welcome to Tech by Example
Overview While answering any system design question it is important to keep in mind that system design questions can be really broad. Hence never directly jump to the solution. It is good to discuss the use cases with the interviewer so as to grasp what he…
🔰 از این پس میتونید از آدرس زیر برای سفارش پروژه های خودتون توسط تیم reactapp.ir در حوزه‌های طراحی وب سایت فروشگاهی، نرم افزارهای سازمانی، اپلیکیشن های موبایل، طراحی Ui/Ux و ... اقدام کنید.
👇👇👇
https://fardadmehr.reactapp.ir/
👇👇👇
https://fardadmehr.reactapp.ir/
🔰برای مشتری سایت یا اپلیکیشن طراحی کردید و دستمزدتون رو‌نداده؟
از این repo استفاده کنید
👇👇👇
https://github.com/kleampa/not-paid
از این repo استفاده کنید
👇👇👇
https://github.com/kleampa/not-paid
GitHub
GitHub - kleampa/not-paid: Client did not pay? Add opacity to the body tag and decrease it every day until their site completely…
Client did not pay? Add opacity to the body tag and decrease it every day until their site completely fades away - kleampa/not-paid
🔰یک راهنمای سریع برای مشخص کردن type برای env در Vite, Node و DOM
credit: https://www.linkedin.com/posts/mapocock_heres-a-quick-guide-on-how-to-type-your-activity-7164216960161955840-bw1d
credit: https://www.linkedin.com/posts/mapocock_heres-a-quick-guide-on-how-to-type-your-activity-7164216960161955840-bw1d
This media is not supported in your browser
VIEW IN TELEGRAM
🔰وقتی کارفرما پول رو نمیده 😁
#fun
#fun
🔰تغییرات جدید React 19
👇👇👇
useFormStatus: https://react.dev/reference/react-dom/hooks/useFormStatus
useFormState: https://react.dev/reference/react-dom/hooks/useFormState
useOptimistic: https://react.dev/reference/react/useOptimistic
use (hook): https://react.dev/reference/react/use
<meta>: https://react.dev/reference/react-dom/components/meta
👇👇👇
useFormStatus: https://react.dev/reference/react-dom/hooks/useFormStatus
useFormState: https://react.dev/reference/react-dom/hooks/useFormState
useOptimistic: https://react.dev/reference/react/useOptimistic
use (hook): https://react.dev/reference/react/use
<meta>: https://react.dev/reference/react-dom/components/meta
react.dev
useFormStatus – React
The library for web and native user interfaces
🔰Retry Pattern in JavaScript
credit: https://www.linkedin.com/posts/muhamadzolfaghari_retrypattern-javascript-axios-activity-7181971545886507009-IhaG
credit: https://www.linkedin.com/posts/muhamadzolfaghari_retrypattern-javascript-axios-activity-7181971545886507009-IhaG