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

تجربه اولم توی شروع همکاری یه چالش فنی بود که بهش برخوردم!
اما نه یه چالش فنی که مثلا داخل پروژه باشه و من ندونم چطور حلش کنم؛ بلکه توی مهارت فنی خودم بود.

تا قبل از اینکه توی فوتبالی شروع به همکاری کنم، یه career gap تقریبا ۶ ۷ ماهه رو بخاطر یه سری شرایط و صد البته یه تصمیم اشتباه تجربه کردم.

تجربه های جالبی توی این تایم بدست اوردم ولی مهم ترین چیزی که از دست دادم sharp بودن مغزم توی حل مسئله و پیاده سازی راه حل ها بود!

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

ولی وقتی رسید به مصاحبه live coding، تازه فهمیدم که چه بلایی سر خودم و اونهمه مهارت اوردم…

همینطور این چالش همچنان توی فرایند technical onboarding همراهم بود.
و حقیقتا به قول تیم لید فرانتمون: واقعا فرانت اند خیلی فرراره.

نتیجه گیری:
هیچوقت اپدیت شدن و اموزش دیدن رو به کار کردن توی پروژه های واقعی ترجیح ندید. همیشه توی پروژه باشید و با چالش های مختلف درگیر باشید.
هرچقدر که مهارت فنیتون verbally (کلامی و لفظی) قوی باشه، اگه technically (فنی و عملی) سریع و sharp نباشید اونقدر شاید توی فضای عملی بدردتون نخوره.

به شخصه ترجیح میدم درگیر کار و تسک های مختلف باشم و همزمان به صورت دغدغه محور یا use-case oriented آموزش دیدن رو پیش ببرم.

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

راه حل اینه که حتی اگر جایی مشغول نیستید برای خودتون پروژه های بزرگ و پر از فیچر تعریف کنید (که حداقل ۷۰ درصدش خارج از چیزایی باشه که بلدید. تا مجبور به یادگیری بشید). و همزمان با این پروژه مسائل مختلفی که نیاز همین پروژه هست رو یاد بگیرید.
این مدل یادگیری رو واقعا تجربه کردم و بخش زیادی از دانش فنیم رو مدیون این سبک از یادگیری هستم.

توی تیم درگیر فرایند performance optimization یک اپلیکیشن کاملا client side هستم
که با react + vite نوشته شده و در حال توسعه هست (احتمالا به زودی نسخه MVP هم لانچ میشه).

خب تا قبل از اون همچین تجربه ای رو فقط با nextjs داشتم. که nextjs برای یه همچین منظوری ساخته شده. و تا قبل از اینکه شما وارد فضای performance optimization بشید خودش خیلی چیزارو هندل کرده. من جمله عکس ها و رندر کردنشون در بهترین حالت ممکن (که هنوز هم میبینم بعضیا با اینکه سابقه خیلی زیادی دارن عکس هاشون توی نکست یا سایز مناسبی نداره یا fetchpriority مناسبی نداره یا بدتر از همه CLS خیلی زیادی ایجاد میکنه بخاطر اشتباه سایز دادن)

ولی توی ریکت ما داریم از img element دیفالت خود jsx استفاده میکنیم. و نداشتن یک کامپوننت built-in چالش های مختلفی رو ایجاد میکنه. از جمله همین layout shift که بدترین تجربه ی ممکن رو میتونه برای کاربر ایجاد کنه.

و دقیقا وقتایی که دارید یه پروژه ای رو با ریکت میزنید و میبینید با اینکه ui خیلی خوبی داره ولی اونقد حس حرفه ای بودن و سریع بودن نداره. خیلی از مشکلات تجربه کاربری که داره بخاطر برطرف نکردن CLS یا cumulative layout shift هست.
وقتی توی لود اولیه بعد از پارس شدن استایل ها تازه سایز عکسا مشخص میشه و همه چی بالا پایین میپره توی اون لود اولیه. متریکی که برای گوگل به شدت مهمه.

و اما مسائلی که سعی کردم رعایتشون کنم تا به یک پیشرفت پرفورمنس حدودا ۳۰ درصدی برسم (رسوندنش از ۶۰ به ۸۰ و بالاتر)

اول از همه بهبود متریک CLS بود:
برای عکس هام width و height مشخص کردم توی همون jsx. و همین تمام مسئله ی CLS رو برطرف کرد.

و بهبود LCP:
چیزی که اینجا کمکم کرد به نتیجه خیلی خوبی برسم
اول از همه کاهش سایز تصاویری بود که داشتیم
هرچند عکس ها سایز خیلی کوچیکی داشت ولی همچنان میشد قضیه رو با تبدیل فرمتشون به webp یا avif بهتر کرد.
و همینطور عکس هایی که توی لود اولیه کاربر باید میدید مخصوصا عکس های داخل header رو preload کردم تا خیلی سریع کاربر ببینه و مرورگر قبل از هرچیزی اون عکس هارو دانلود کنه و نگه داره.
که سرعت paint مرورگر نیاد پایین.

همینطور code splitting که به عنوان تسک اصلی مشخص شده بود ولی من پامو فراتر از اون گذاشتم.
کامپوننت route هارو همرو lazy load کردم
و از suspense boundary استفاده کردم تا مرورگر بعد از اینکه وارد اون route شدیم کامپوننت مربوط بهش رو دانلود کنه و نمایش بده.
این کار کمک میکنه توی لود اولیه جاوا اسکریپت اضافه ای دانلود نکنیم و کوچیک تر بودن سایز باندل یا همون js مون به لود سریع تر صفحه خیلی کمک میکنه.

همچنین از rollup-plugin-visualizer استفاده میکنم تا موقع بیلد حتما بهم نشون بده چه ماژول هایی داریم و اگر سایز ماژولی به طور نا متعارف و غیر بهینه ای بزرگه یه trade-off براش انجام بدیم.
یعنی چک کنیم که آیا جایگزینی وجود داره؟
آیا ما داریم واقعا از همه ی پتانسیل ها و فیچر های این ماژول (لایبرری بیشتر منظورمه) استفاده میکنیم؟
اگر جایگزینی داره همین پرفورمنس رو به ما میده؟ و ...

و همچنین به عنوان یه نکته کنکوری که هرجایی بهتون نمیگن:
‍این کانفیگ توی vite.config

‍      // .1
      sourcemap: false, 

     // .2
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString();
            }
          },
        },
      },

اولیش که مربوط به sourcemap میشه
که با تولید نکردن فایل های sourcemap
بخش های مختلف باندل رو به سورس اصلی map نمیکنه
که اول از همه نکته امنیتی خیلی مهم داره و مهم تر از اون باعث کاهش حجم خروجی نهایی میشه.

و کانفیگ بعدی که باعث میشه هر پکیجی که از node modules ایمپورت شده به عنوان یک chunk جداگونه تولید بشه
یعنی که باندل جداگونه یا فایل js جداگونه که باعث میشه:
۱. کش بهتر مرورگر
یعنی اگه فقط توی بروز رسانی فقط یکی از این موراد (لایبرری ها یا chunk ها) تغییر کنه. بقیه شون توی کش مرور گر باقی میمونن
۲. لود اولیه سریع
مرورگر فقط باندلی که لازم داره رو واکشی میکنه.
۳. تحلیل بهتر ساختار باندل
مثل همون ابزاری که گفتم ‍‍`rollup-plugin-visualizer`
وقتی از اینجور ابزار ها استفاده کنیم راحت تر میتونیم بفهمیم کد ها از کجا میان و تصمیم گیری و تحلیل برامون راحت تر میشه

نکته کنکوری رو از دست ندید 😉

اگر برای تابستون برای خودتون پلن های خفنی دارید؛ ولی دغدغه هایی شبیه به اینا دارید:

۱. نمیدونم از‌کجا شروع کنم. بین تکنولوژی های زیادی گم شدم و حس میکنم همشون لازمه و کارم خیلی سخته.

۲. من کدمو نوشتم، ولی نمیدونم درسته یا نه. بابت کدی که نوشتم اعتماد به نفس ندارم.

۳. مصاحبه ها نابودم میکنن! چرا مصاحبه هارو قبول نمیشم با اینکه پروژه هم زدم؟

۴. رزومه ساختم ولی هیچجا جواب نمیدن. نکنه مشکل از خودمه؟

۵. از بقیه خیلی عقبم…

و دغدغه های این چنینی

من تا آخر ماه در حد چند تا تایم مشاوره برام خالی شده میتونید برای هماهنگ کردن بهم پیام بدید🤍

این بار قراره نتیجه بگیرید.✅

@erfundev

بعد از چند سال تلاش برای رسیدن به کد تمیز و پرفورمنس بالا به صورت همزمان
فهمیدم که این دو خیلی کم پیش میاد که در کنار هم حضور داشته باشن.
و برای هرکدوم باید trade-off انجام داد.
همیشه پرفورمنس متوسط و کار راه بنداز مساوی با تجربه‌ی کم توسعه دهنده نیست. شاید موضوع مهم تری برای پیاده سازی وجود داره که اولویتش نسبت به پرفورمنس و سرعت لود بیشتره.

اگر به عنوان فرانت اند دولوپر هنوز توی پیاده سازی کردن ui ها مشکل دارید و فکر میکنید css در مواقعی خیلی براتون پیچیده میشه. حتی وقتی پیچیدگی ظاهری خاصی وجود نداره.
پیشنهاد میکنم طرز فکر box model رو تقویت کنید توی‌ خودتون.
نگاهی که همه چیز رو با باکس هایی از بزرگ به کوچیک تقسیم بندی میکنیم تا ریز ترین جزئیات رو با بهترین کیفیت پیاده سازی کنیم.

موضوعی که امروز با یکی از رفقایی که تازه با html css شروع کرده حدودا یک ساعت توی گوگل میت بررسی کردیم و خفن ترین نتیجه رو گرفتیم. حقیقتا من که خیلی کیف کردم از اینکه تونستم در این حد مسئله رو برای کسی که تازه شروع کرده ساده کنم (با حفظ تمام جزئیات در عین سادگی).😁

دونستن اینکه شما توی کدوم مرحله هستید
به من کمک میکنه دغدغه شمارو بیشتر بدونم
تا از تجربه ها و مطالعاتم مناسب ترین محتوارو براتون بذارم🤍😉

پس حتما شرکت کنید توی این poll

سلام دوستان
امیدوارم همگی در سلامت و امنیت کامل باشید🤍🇮🇷

رفقایی که گزینه «در جست و جوی کار» رو از نظر سنجی بالا انتخاب کردند؛ توجهشون رو به این پیام جلب میکنم.
یکی از واقعی ترین و با ارزش ترین تجربه های من در مراحل آخر پیدا کردن موقعیت شغلی مناسب بعد از کلی تلاش هست.
امیدوارم استفاده کنید و به دردتون بخوره.

به زودی تجربیات بیشتری روهم باهاتون به اشتراک میذارم.
از نوشتن رزومه اصولی تا نکاتی که واقعا هرکسی بهتون نمیگه❤️‍🔥

و‌ اینم نکات مهم توی مرحله مصاحبه. از دید یک مصاحبه کننده (خودم😁)

این دوتارو خواستم یه ریپلای بزنم روشون برای رفقای عزیزی که تازه به جمعمون اضافه شدن

به زودی محتوای جدید هم براتون میذارم🤝

در امان باشید❤️

توی این ویس خودمونی اما پر از نکته‌های ناب، برای اونایی صحبت کردم که واقعاً دارن تلاش می‌کنن و می‌خوان به جای نتیجه‌های نصفه‌نیمه، واقعاً استخدام باکیفیت و درست‌حسابی رو تجربه کنن. اگر دولوپر باانگیزه‌ای هستی که شاید تجربه زیادی نداشته باشی ولی می‌خوای شانس استخدامت رو چند برابر کنی، این ویس دقیقا برای توئه — با راه‌حل‌هایی که از دل تجربه و شناخت واقعی بازار کار اومده.

حتی اگر این ویس رو گوش میدید، تبریک میگم، شما جزو اون چند درصد دولوپری هستید که نتیجه میگیرن. چون خیلیا حتی به خودشون زحمت نمیدن این ویس رو گوش بدن و دور از انتظار هم نیست 😉

بین چند راهی گیر کردین؟
این ویس برای شماس.
فقط گوشش بدین و انجامش بدین همین

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

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

آفرین. رویا فروشی😂
گول نخورید.
داستان خودتونو داشته باشید.

🔴 نکات قابل توجه:
۱. حرفم به این معنی نیست که اگر محتوای یه دوره رو برای خودتون مناسب میبینید توش شرکت نکنید. صرفا ازتون میخوام به حرف کسی تکیه نکنید. هیچوقت و هیچجا.
۲. و همینطور نمیخوام هدف گذاری شخصی رو بی ارزش و غیر معتبر معرفی کنم یا بشناسم. نه اینطور نیست. با هدف گذاری مسیر و چشم انداز شخصیتون مشخص میشه و این فوق العادس.
۳. چطور توی مسائل این چنینی بهتر بشیم و هر محتوا و حرفی که میشنویم رو تحلیل شده و فیلتر شده باور کنیم؟ --> تفکر نقاد یاد بگیرید. (Critical thinking)

با نکاتی که بالاتر تو پیامام بهتون گفتم دیگه امکان اینکه به پروژه اول و تجربه اولتون‌ نرسید خیلی کمه (ولی همچنان اگه مشکلی هست من‌ پشتتون هستم)

ولی وقتی میرسید به پروژه اول
این موارد باعث استرس میشه براتون:
ترس از شکست خوردن
فشار برای اثبات خودت
نابلدی با ابزارها و تکنولوژی‌ها
ابهام در خواسته‌ها یا نیازمندی‌ها
ترس از سوال پرسیدن
کمال‌گرایی
فشار زمانی و ددلاین
ترس از نظر بقیه
نبود تجربه در شکستن تسک‌ها
عدم اطمینان به تصمیمات فنی

کوتاه مختصر مفید و درجه یک برا همشون راه حل بدم بهتون:

جواب و راه حل برای تک تک مشکلات بالا 👆🏻

ویس کاملا یهویی و بدون برنامه ریزی قبلی.
کاملا صادقانه از دل تجربه هام😁❤️

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

از اون موقع همیشه راجع به این موضوع تحقیق کردم و هرروز سعی کردم یه روش جدید رو امتحان کنم تا بتونم به اصطلاح به peak productivity level برسونم خودمو. (بالاترین سطح بهره وری)

از شب کار کردن و مصرف کافئین و امتحان کردن سبک زندگی های مختلف و انواع رژیم های غذایی و ...
رسیدم به این چند تا نکته:
‍
۱. اگه میخواید بدنتون خوب بهتون جواب بده. باید خوب ازش درخواست کنید!
با اذیت کردن بدنتون. کم خوابی. بد خوراکی. کم فعالیتی. استراحت مناسب نداشتن و خوردن تغذیه هایی که صرفا واسه چند ساعت فشار خون رو میبره بالاتر و سیگنال بیدار بودن موقتی به مغزتون میده دارید به زور یه چیزی رو ازش میخواید و جواب لازم رو بهتون نمیده.

۲. خواب با کیفیت == زندگی با کیفیت
یه ساعت ثابتی رو برای خوابیدن و از خواب بیدار شدنتون بسازید.
معجزه‌ش رو باید بیاید و برام تعریف کنید:)
در کنار بقیه عواملی که به خواب با کیفیت کمک میکنه مثل زود شام خوردن و نخوردن قهوه و چایی قبل از خواب و به میزان خوب آب خوردن و نور مناسب و حالت بدنی مناسب، این هم کاریه که به شدت تاثیر میذاره و باعث میشه در طول روز احساس خستگی و خواب آلودگی نداشته باشید.

۳. هیدراته بودن بدن و مغز باعث شفافیت فکر و در نهایت بازدهی بیشتر مغز میشه
این دقیقا چیزیه که شما نیاز دارید!
آرامش سطحی با نیکوتین یا انرژی موقتی با شکلات و کافئین شمارو به ماده ای که سبک زندگیتون رو آروم آروم به سر حد نابودی میرسونه عادت میده!
ولی آب کافی، یه مغز با کیفیت و sharp بهتون تحویل میده.

۴. یه تایمی رو در معرض نور آفتاب قدم بزنید و ذهنتون رو خالی کنید

۵. ارتباطات انسانی رو حفظ کنید. سعی کنید در طول روز با همکارتون، خانواده، رفقا و عزیزانتون به صورت حضوری یا تلفنی صحبت داشته باشید

۶. از مدیتیشن به عنوان ابزاری که خطوط نا مرتب ذهنتون رو سازماندهی میکنه استفاده کنید

۷. مطالعه کنید و در کنار کار اصلیتون در روز یک فعالیه جانبی هم داشته باشید که خارج از فضای کار اصلیتون باشه

--------------------------

در نهایت چیزی که شما نیاز دارید این نیست که فقط امروز بازدهی فوق العاده ای داشته باشید.
بهره وری پایدار موضوعیه که خیلی باید بهش اهمیت بدید.
به این معنیه که اگر ۳۰ سال کاری زندگیتون هرروز به میزان متوسط و خوبی کار کنید نتایج خیلی بزرگتری میگیرید تا اینکه یه مدت کوتاهی در بهترین حالت ممکن چند ماه تا چند سال بیشترین بهره وری رو داشته باشید و بعد از اون درگیر خدایی نکرده بیماری و محدودیت های فیزیکی سخت و هزینه بر باشید.

این پیامو تو این چنل گذاشتم.

چون که همه چیز فقط کدنویسی نیست😁
موفق و خوشحال باشید همیشه🤍