Frontend with Erfun👨🏻‍💻 – Telegram
Frontend with Erfun👨🏻‍💻
221 subscribers
40 photos
21 videos
4 files
76 links
اینجا یه سری رفیقیم که میخوایم کنار هم خیلی استاندارد از
تجربیات مثبت و منفی همدیگه در مسیر پیشرفت استفاده کنیم🤍
Download Telegram
#تجربه
این یکیم برای کسایی که عجله دارن برای زودتر جای خوب استخدام شدن 😁

به عنوان یه فرانت اند دولوپر حرفه ای شما باید 2 تا مهارت فنی رو به خوبی توی خودتون پیشرفت بدید

1. پیاده سازی کامپوننت های مختلف
2. مدیریت درست استیت ها در طول برنامه و صفحه ها و کامپوننت های مختلف

برای نشون دادن مورد اول توی رزومتون باید یه نمونه کار پیاده سازی سیستم دیزاین داشته باشید.
سیستم دیزاین چیزی نیست بجز همین ui library هایی که میبینید.
با یه دیزاین خیلی قشنگ و اصولی یه سیستم دیزاین کامل پیاده سازی کنید که هر کامپوننتش variant های مختلفی داشته باشه. و اون روی توی storybook داکیومنت کنید. یا یه داکیومنت اختصاصی براش درست کنید و لینکشو بذارید داخل رزومتون


و برای نشون دادن اینکه میتونید به خوبی با استیت های برنامه بازی کنید و توی مراحل و بخش های مختلف به خوبی باهاشون کار کنید، بهترین ایده ساخت یک یا دو تا بازی هست 😁 بله درسته! بازی
یه بازی پیدا کنید و بسازیدش با هر چیزی که کار میکنید. اصلا فرقی نداره
مهم اینه که شما تفکر الگوریتمی و مهارتتون رو بتونید به خوبی نشون بدید

یه چند تا نمونه اینطوری داشته باشید. و یه سری وبسایت و اپلیکیشن خوب و کامل برای اینکه نشون بدید توی پروژه های واقعی هم میتونید از اینا استفاده کنید.

اینم از این
سوالی چیزی هست در خدمتم 😍🔥
اگه چیزی براتون گنگه و درکش نمیکنید بگید تا براتون توضیح بدم.
یکی از مواردی که به تمیز بودن و maintabile بودن پروژه کمک میکنه و توی مقیاس های بالا کمکتون میکنه توسعه ی راحت تری داشته باشید فایل و فولدر بندی تمیز و اصولی پروژه هست

برای این کار الگو یا pattern های متنوعی معرفی شده ولی بنظر من یکی از جذاب تریناشون فولدر بندی بر اساس features هست

به این صورته که بخش های عمومی که توی اکثر پروژه ها وجود داره رو داخل خودش داره فقط یه بخشی به اسم features بهش اضافه میشه

و هدف این فولدر بندی اینه که اگر یک فیچر رو توی پروژه دیگه ای لازم داشتید مستقیما همون فیچر رو کپی کنید و اونطرف پیست کنید.
این نحوه ی فولدر بندی با الگوی feature based هست
👍1
یه توضیحی بدم که هر کدوم از فولدرا چی داخلشون قرار میگیره و چطوریه کارش؟
Frontend with Erfun👨🏻‍💻
این نحوه ی فولدر بندی با الگوی feature based هست
توضیحات اینکه توی هر فولدر چه فایل هایی قرار میگیره و اون فایل ها برای چی هستن
🔥4
میخوام با دوتا تیکه کد بهتون تفاوت کدنویسی senior developer و junior developer رو نشون بدم
junior button.png
214.7 KB
این یک کامپوننت button هست که معمولا جونیور ها مینویسن
👍1
senior button.png
720.6 KB
و این مدل سنیورش😁
👍2
Frontend with Erfun👨🏻‍💻
senior button.png
دوس دارید براتون قشنگ توضیح بدم که چی به چیه؟ و بدونید که یه سنیور چه چیزایی رو در نظر میگیره؟
👍3
اینم از توضیحات کد senior level که براتون فرستادم😁
عکس کد رو باز کنید و ویس هارو گوش بدید
قطعا کلی نکته گفتم که توی این سطح هم کمکتون میکنه و شمارو حتی یه لول میکشونه بالا😍✌🏻
6
Frontend with Erfun👨🏻‍💻
#road_map اول از همه میخوام واسه دوستانی که تازه شروع کردن یه مسیر مشخص کنم که از روش مرحله به مرحله پیش برن تا زودتر به درآمد اولشون برسن 1. Html 2. Css 3. Javanoscript (intermediate) 4. Git/github 5. React.js (intermediate) 6. Tailwindcss 🔴 توی این مرحله…
با توجه به این نقشه راهی که براتون گذاشتم
وقتی به مرحله advanced ریکت میرسید باید این موارد رو به خوبی بدونید:
Virtual DOM
Reconciliation algorithm
Diffing algorithm
Fiber reconciler
Stack reconciler
Fiber VS. stack
State batching
State transition
Reusable components
SOLID principles in react components

و یه سری design pattern:
Custom hooks
Context api
Compound components
HOC

Provider pattern
State management with useReducer
Props combination
ForwardRef
useImperativeHandle

واسه کسایی میگم که ریکت رو یاد گرفتن و میخوان مباحث عمیق تری رو ازش بدونن🤍
7
جایی اگه سوالی براتون پیش اومد حتما بپرسید❤️
5
This media is not supported in your browser
VIEW IN TELEGRAM
مهندس ارشد فرانت اند توی دیجیکالا😁
همایش فرانت چپتر هستیم جاتون خالیه✌🏻🔥
🔥10
بچه ها بیاین یه چالش جاوا اسکریپتی باهم حل کنیم!
نظرتونه؟