به عنوان توسعه دهندگان جاوااسکریپت، تعداد زیادی از مواردی که انتظار می‌رود بدانیم بسیار زیاد است و هر روز گسترده‌تر می‌شوند. با توجه به وجود بسیاری از زبان‌ها، ابزارها و فناوری‌های مختلف که برای رقابت در بازار هستند، تشخیص اینکه چه چیزی را باید در اولویت قرار دهیم دشوار است. آیا باید مهارت خود را در TypeScript ارتقا دهیم؟ یا باید در Svelte متخصص شویم؟ آیا در آینده هم کد جاوااسکریپت خواهیم نوشت یا این یک "WebAssemble" واقعی است؟ به نظر من، اگر واقعا می‌خواهیم بازده سرمایه گذاری خود را به حداکثر برسانیم، یکی از بهترین مواردی که می‌توانیم روی آن تمرکز کنیم CSS است.
این ممکن است یک انتخاب عجیب به نظر برسد، اما صادقانه بگویم بهتر شدن در CSS تأثیر زیادی بر زندگی و حرفه من به عنوان یک توسعه دهنده داشته است. در این مقاله، برخی از دلایلی را که به نظر من ایده خوبی است، بیان می‌کنم.
مخاطبان هدف
این مقاله در درجه اول برای توسعه دهندگان فرانت-اند و فول-استک به ویژه برای افرادی که از استفاده از فریمورک‌های مدرن جاوااسکریپت مانند React لذت می‌برند اما CSS را گیج کننده و ناامید کننده می‌دانند، نوشته شده است.
خواندن این مطالب کیفیت زندگی شما را بهبود می‌بخشد
در طی چند ماه گذشته با بسیاری از توسعه دهندگانی که CSS را منسوخ می‌دانند صحبت کرده‌ام. من یک فرضیه در این باره دارم.
CSS یک زبان کاملا ضمنی است و این امر تا حد زیادی به مکانیزم‌های پنهان در اعماق خصوصیات CSS متکی است. وقتی این مکانیسم‌ها به روشی کار می‌کنند که ما انتظار نداریم، در تاریکی به سر می‌بریم و نمی‌دانیم که چه خبر است.
این را با زبانی مانند TypeScript مقایسه کنید. وقتی اشتباه می‌کنیم، یک راهنمای مفید ظاهر می‌شود تا به ما بفهماند چه اشتباهی انجام داده‌ایم. حتی در جاوااسکریپت، استثناها ما را به جهت درست هدایت می‌کنند (به علاوه ویژگی‌های دیگری مانند linting، breakpoint، log و ...).
وقتی به هر زبانی کد می‌نویسیم، به مدل ذهنی خود از نحوه کار آن زبان اعتماد می‌کنیم. اگر مدل ذهنی ما ناقص یا نادرست باشد، احتمال زیادی وجود دارد که نتوانیم به نتیجه مورد انتظار خود برسیم. در CSS این عدم انطباق‌ها به دلیل ضمنی بودن آن بسیار رایج است.
بیایید به یک مثال ساده نگاه کنیم.
در CSS از ویژگی z-index می‌توان برای انتقال یک عنصر جلو یا پشت عنصر دیگر استفاده کرد. در زیر باکس صورتی روی باکس خاکستری قرار می‌گیرد، زیرا مقدار z-index آن بزرگتر است:
حتی در شرایطی که کاملا مشابه هستند، به نظر می‌رسد این قانون نقض می‌شود. مقادیر z-index تغییر نکرده‌اند، اما اکنون باکس صورتی در پشت باکس خاکستری قرار دارد:
همانطور که غالبا در CSS اتفاق می‌افتد، ویژگی z-index بیش از آن چیزی است که به چشم می‌آید.
اگر می‌خواهید نحوه استفاده مرورگر از مقادیر z-index را بفهمید، باید درباره چیدمان عناصر و مکانیزم ضمنی که نحوه استفاده از این مقادیر را کنترل می‌کند، بیاموزید.
این تقصیر شما نیست. بیشتر منابعی که CSS را آموزش می‌دهند، به جای عمیق‌تر کردن و یادگیری مواردی مانند چیدمان عناصر، بر خصوصیات سطحی و ترفندهای شسته و رفته تمرکز می‌کنند.
خصوصیاتی مانند z-index یا position به عنوان ورودی در الگوریتم‌های مختلف استفاده می‌شوند. به جای یادگیری خصوصیات ظاهری، باید یاد بگیریم که این الگوریتم‌ها چگونه کار می‌کنند.
وقتی این نوع رویکرد را در پیش می‌گیریم، تأثیر متحولی بر توانایی ما در CSS دارد. ما یک شهود بسیار قوی‌تر و قابل پیش بینی‌تری ایجاد می‌کنیم و اعتماد به نفس ما در این خصوص افزایش می‌یابد. همچنین می‌توانیم هر نمونه‌ای را به یک طرح واکنش گرا و کاربردی تبدیل کنیم و بدانیم که می‌توان هر مشکلی را که به وجود می‌آید حل کنیم.
طی سال‌های گذشته، من با صدها توسعه دهنده جاوااسکریپت در مورد CSS صحبت کرده و متوجه یک موضوع مشترک شده‌ام. بسیاری از توسعه دهندگان جاوااسکریپت احساس می‌کنند مغز آنها برای درک CSS آماده نیست و تصور می‌کنند فقط افراد خاصی قادر به انجام کار حرفه‌ای با آن هستند.
من به شما قول می‌دهم این چنین نیست. هیچ کس با مهارت CSS متولد نشده است. شما کاملا می‌توانید در CSS متخصص شوید.
تنها باید در HTML و JS مهارت کافی کسب کنید. این کار شما را کاملا مجهز می‌کند و در نهایت همه ابزارها را جمع آوری کرده‌اید و اکنون می‌توانید هر چیزی را بسازید.
CSS و توسعه دهندگان
ما عمدتا کارهای فرانت-اند را به دو دسته تقسیم بندی می‌کنیم:
"Back of the front-end": توسعه دهندگان جاوااسکریپت که بر روی معماری، عملکرد و منطق برنامه تمرکز دارند.
"Front of the front-end": طراحان /UX UI که بر HTML / CSS ، انیمیشن، قابلیت دسترسی و ظاهر برنامه تمرکز دارند.
اگر خود را یک "back of the front-end" می‌دانید، آیا هنوز برایتان مهم است که CSS یاد بگیرید؟ فکر می‌کنم برای اکثر افراد جواب مثبت باشد.
وقتی به مهارت‌ها و علایق خودم نگاه می‌کنم و به آن فکر می‌کنم، واقعا هیچ توسعه دهنده‌ای را نمی‌شناسم که به طور کامل در هر دو طرف قرار بگیرد.
در زیر بخش‌هایی از توسعه فرانت-اند وجود دارد که با CSS سر و کار ندارند:
- بهینه سازی روند ساخت Webpack
- حفظ و نگهداری زیرساخت‌های تست end-to-end
- تغییر پایگاه کد جاوااسکریپت برای استفاده از تایپ اسکریپت
اگر در یک شرکت فناوری مانند مایکروسافت یا گوگل کار می‌کنید، شاید واقعا 100 درصد از وقت خود را صرف کارهایی از این قبیل می‌کنید و سالهاست که هیچ CSS نمی‌نویسید. در این صورت CSS برایتان در اولویت نیست.
اما اکثریت قریب به اتفاق توسعه دهندگان فرانت-اند در چنین شرایطی نیستند. در مکان‌هایی که من کار کرده‌ام - سازمانی مانند DigitalOcean و Khan Academy - همه توسعه دهندگان مقداری از وقت خود را صرف نوشتن CSS کرده‌اند.
در جامعه توسعه وب این تصور رایج وجود دارد که مهارت CSS توسط کارفرمایان ارزشیابی نمی‌شود و اگر یکی از آن مشاغل پردرآمد را می‌خواهید باید مهارت جاوااسکریپت خود را قوی کنید.
درست است که کارفرمایان تمایل دارند مهارت‌های جاوااسکریپت را در اولویت قرار دهند، به ویژه برای نقش‌های بالاتر، اما در اینجا یک تعامل جالب وجود دارد.
کارفرمایان در واقع به توسعه دهندگانی نیاز دارند که در JS ، CSS و HTML مهارت داشته باشند. برای ساخت فرانت-اند هر 3 فناوری لازم است. از آنجا که بسیاری از توسعه دهندگان جاوااسکریپت ضعف CSS در مهارت‌های خود دارند، به تبع تمایل کمتری هم به یادگیری آن پیدا می‌کنند.
یکی از بهترین راه‌های برجسته سازی و پیشرفت در حرفه خود این است که در یک حوزه مرتبط به عنوان بالاتر از حد متوسط شناخته شوید. سطح متوسط مهارت در مورد جاوااسکریپت بسیار ناچیز است، زیرا بسیاری از توسعه دهندگان منحصرا بر روی آن تمرکز دارند. با اینکه میانگین سطح مهارت CSS کمی پایین‌تر است.
CSS دشوار است
واضح است که CSS برای یادگیری یا استفاده موثر زبان ساده‌ای نیست. این منحنی یادگیری شبیه به سبک TypeScript دارد.
وقتی یادگیری TypeScript را شروع می‌کنید، می‌بینید که کارها خیلی راحت می‌شوند و همه چیز آماده است:
function addNumbers(n1: number, n2: number): number {
return n1 + n2;
}اگرچه سعی می‌کنید از TypeScript در یک پروژه واقعی استفاده کنید، همه چیز سریع حالت واقعی پیدا می‌کند:
اگر خوب دقت کنید، متوجه می‌شوید که هشدار مشاهده شده دارای یک نوار پیمایشی است.
CSS هم مشابه همین است. هنگامی که شما یادگیری CSS را شروع می‌کنید، امری ساده است. خصوصیات بصری هستند و می‌توانند به سرعت در جای خود قرار گیرند:
.warning-text {
color: red;
font-style: italic;
}وقتی می‌خواهید یک برنامه وب کامل بسازید، برنامه‌ای که با دستگاه‌ها و مرورگرهای مختلف سازگار باشد، همه چیز ناگهان متوقف می‌شود.
برخی از توسعه دهندگان هستند این تصور اشتباه را دارند که CSS آسان است. CSS آسان نیست، اما خبر خوب این است که کمی یادگیری عمیق می‌تواند کمک زیادی کند. اگر ما از قانون 80/20 استفاده کنیم و به بخش‌های کاربردی زبان بپردازیم، می‌توانیم به سرعت شگفت آور شویم.
CSS و یافتن شغل
فکر می‌کنم فرآیند پیدا کردن شغل الان شاید کمی بهتر شده باشد. چند سال پیش، یک فرآیند طاقت فرسای 8 مصاحبه را پشت سر گذاشتم. 4 مورد از این مصاحبه‌ها فنی بود، اگرچه از من سوالی در مورد React یا Javascript یا CSS یا هر چیز مرتبط با توسعه وب پرسیده نشد. الگوریتم‌ها و ساختارهای داده مواردی اند که هنگام کار در قسمت فرانت-اند دارای اهمیت بالایی نیستند.
خوشبختانه به نظر می‌رسد که روند در حال تغییر است. امروزه بیشتر شرکت‌ها سعی می‌کنند کارهای روزمره را در مصاحبه‌های شغلی و فرایندهای استخدام مد نظر قرار دهند. هنگامی که در Gatsby Inc - شرکت توسعه دهنده فریمورک Gatsby.js مصاحبه کردم، از من خواسته شد که یک کامپوننت Modal / Dialog ایجاد کنم.
طراحی modalها به شدت به مهارت نیاز دارند. اما یک چیز کاملا قطعی است: درک بالای مکانیزم CSS کمک بسیاری در این مورد می‌کند.
در ابتدای این مقاله، ما به چند قطعه کد نگاه کردیم و دیدیم که چگونه z-index می‌تواند غیر قابل پیش بینی به نظر برسد. از آنجا که من با طرز چیدمان عناصر آشنایی داشتم، توانستم راه حل خود را پیدا کرده و یک روش بهتر تولید کنم.
برای اینکه واضح‌تر متوجه قضیه شوید، نمی‌گویم CSS به تنهایی بلیط شما برای یک کنسرت پردرآمد است. بعد آن مصاحبه، من در حال ارتقای دسته دیگری از مهارت‌ها نیز هستم از جمله React و JavaScript. اگر این مطلب را می‌خوانید، شک ندارم که از قبل با جاوااسکریپت و اکوسیستم مدرن فریمورک ها و ابزارهای آن تبحر کافی دارید. افزودن CSS به مهارت‌هایتان می‌تواند یک مزیت رقابتی بسیار قدرتمند ایجاد کند.
CSS برای توسعه دهندگان JavaScript
از اواسط سال 2020 من در حال توسعه دوره‌ای به نام CSS برای توسعه دهندگان جاوااسکریپت هستم. این یک دوره آنلاین است که به شما کمک می‌کند درک عمیق‌تری از عملکرد CSS کسب کنید.
همچنین سال‌ها برای آموزش این موارد انگیزه داشتم، زیرا خودم این تحول را پشت سر گذاشته بودم. من از سال 2006 شروع به نوشتن CSS کردم و صادقانه بگویم که به مدت یک دهه با آن درگیر بودم.
به علاوه با صرف زمان بیشتر در مستندات MDN و گاه فرو رفتن در مشخصات CSSWG، در CSS بهتر شدم. هر زمان که چیزی برای من منطقی نبود، از این فرصت استفاده می‌کردم و درباره سیستم‌های مربوطه بیشتر می‌آموختم. دیگر کپی / پیست کردن از StackOverflow وجود نداشت و بدون درک عمیق بی فایده بود. این روند سال‌ها به طول انجامید، اما کاملا یک سرمایه گذاری ارزشمند بود.
در مارس 2020 من دچار یک آسیب دیدگی شدم که باعث شد نتوانم از صفحه کلید یا ماوس به مدت یک سال استفاده کنم. من وقت زیادی برای تفکر داشتم و فهمیدم که بیش از هر چیزی می‌خواهم روی تدریس تمرکز کنم.
هدف نهایی شغلی من اکنون این است که به یک راهنما تبدیل شوم تا به دیگران کمک کنم مهارت‌های لازم را برای تحقق اهداف خود به دست آورند.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید