🔰چطور برای موقعیت 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 رو کار کردی؟ کاربردش چیه؟
👍14🔥6❤5
🔰اگه دوست دارید که سیستم دیزاین رو با مثال های باحال از پروژه های مشابه 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…
❤5🔥3
🔰 از این پس میتونید از آدرس زیر برای سفارش پروژه های خودتون توسط تیم reactapp.ir در حوزه‌های طراحی وب سایت فروشگاهی، نرم افزارهای سازمانی، اپلیکیشن های موبایل، طراحی Ui/Ux و ... اقدام کنید.
👇👇👇
https://fardadmehr.reactapp.ir/
👇👇👇
https://fardadmehr.reactapp.ir/
👍8👏2❤1👎1
🔰برای مشتری سایت یا اپلیکیشن طراحی کردید و دستمزدتون رو‌نداده؟
از این 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
😁20👍3👌2🤬1
🔰یک راهنمای سریع برای مشخص کردن 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
👍5🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
🔰وقتی کارفرما پول رو نمیده 😁
#fun
#fun
😁23🤣6👍2
🔰تغییرات جدید 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
👍8
🔰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
🔥5👍2❤1
🔰تجربه مصاحبه فنی با اسنپ فود برای موقعیت کاری FrontEnd
👇👇👇
https://www.linkedin.com/posts/mrghazian_snapp-snappfood-aetaedaepaevaeqaev-activity-7188851770637336578-Zh3m
پی نوشت: به نظر من این نوع مصاحبه ها اصلا معتبر نیست و ارزشی نداره
ولی خب برای موفق شدن تو مصاحبه ها، باید پاسخش رو دونست
👇👇👇
https://www.linkedin.com/posts/mrghazian_snapp-snappfood-aetaedaepaevaeqaev-activity-7188851770637336578-Zh3m
پی نوشت: به نظر من این نوع مصاحبه ها اصلا معتبر نیست و ارزشی نداره
ولی خب برای موفق شدن تو مصاحبه ها، باید پاسخش رو دونست
Linkedin
تجربه مصاحبه فنی با اسنپ فود موقعیت کاری فرانت اند Front end | Mohammad Reza G.
تجربه مصاحبه فنی با اسنپ فود موقعیت کاری فرانت اند Front end
متاسفانه من که به آرزوم نرسیدم که اسنپ فود قبول شم امیدوارم کمکی کرده باشم تا شماها قبول بشید.
در مورد فضای مصاحبه بخوام بگم خیلی خوب و دوستانه بود و انگار یک میتینگ مبادله اطلاعات بود
سوالات:
۱…
متاسفانه من که به آرزوم نرسیدم که اسنپ فود قبول شم امیدوارم کمکی کرده باشم تا شماها قبول بشید.
در مورد فضای مصاحبه بخوام بگم خیلی خوب و دوستانه بود و انگار یک میتینگ مبادله اطلاعات بود
سوالات:
۱…
👍4👎3🔥3
🔰ویژگی های جدید css(به شدت پیشنهاد میکنم این ویدئو رو ببینید)
👇👇👇
https://www.epicweb.dev/talks/less-cruft-more-power-leverage-the-power-of-the-web-platform
👇👇👇
https://www.epicweb.dev/talks/less-cruft-more-power-leverage-the-power-of-the-web-platform
Epic Web Dev
Less Cruft, More Power: Leverage the Power of the Web Platform
Una Kravets explores CSS evolution, emphasizing scroll animations, accessibility, UI positioning, and progressive enhancement for better user experiences.
🔥6👍2
🔰یه پکیج خیلی خوب پیدا کردم که گفتم با شما هم share کنم، هم formatter هست و هم linter برای پروژه های تایپ اسکریپتی و جاوااسکریپتی.، اسمش biome هست و وب سایت شونم:
biomejs.dev
Credit: https://x.com/ellwilltell/status/1804595817652556282
biomejs.dev
Credit: https://x.com/ellwilltell/status/1804595817652556282
👍10🔥6😍1
حتما نگاهی خروجی نظر سنجی stackoverflow بندازید، میتونه براتون جذاب باشه 🚀
https://survey.stackoverflow.co/2024
https://survey.stackoverflow.co/2024
survey.stackoverflow.co
2024 Stack Overflow Developer Survey
In May 2024, over 65,000 developers responded to our annual survey about coding, the technologies and tools they use and want to learn, AI, and developer experience at work. Check out the results and see what's new for Stack Overflow users.
👍3🔥3