چگونه در سال ۱۳۹۷ یک برنامه‌نویس Front End عالی باشیم؟

اگر نگاهی به وب‌سایت‌های کاریابی آنلاین مثل جابینجا داشته باشید، خیلی زود متوجه می‌شوید که انبوهی از شرکت‌ها به دنبال برنامه‌نویس Front End هستند. از آن‌جایی که امروزه رابط کاربری وب‌سایت‌ها و وب‌اپلیکیشن‌ها بسیار جذاب‌تر از گذشته شده و این جذابیت لایه‌هایی از پیچیدگی را به این حرفه اضافه کرده‌است، نیاز به نیروهای متخصص در این زمینه بیشتر از گذشته حس می‌شود.و اما چگونه می‌توان یک برنامه‌نویس Front End قدرتمند شد؟ برنامه‌نویسی که بتواند با یک حقوق خوب از شغل خود لذت ببرد و با چیزهایی که می‌سازد،‌ دنیا را جای بهتری برای زندگی کند.۱) با HTML شروع کنید.هر ساختمانی نیاز به یک بدنه دارد. اول از همه این زبان را به خوبی یاد بگیرید. سعی کنید دست کم ۵ صفحه با HTML ایجاد کنید. به ساختار و چیدمان تگ‌های‌تان توجه کنید. Semantic Tags را بشناسید و نحوه‌ی استفاده از آن‌ها را یاد بگیرید. نگران ظاهر صفحه‌ی‌تان نباشید، فقط روی استفاده‌ی درست از تگ‌ها تمرکز کنید.۲) و حالا CSS را شروع کنید.ساختمان شما نیاز به یک ظاهر زیبا دارد. CSS را خوب مطالعه کنید. بدانید که CSS Box Model چیست. درمورد Flexbox و CSS Grid مطالعه کنید. می‌دانید فرق padding با margin چیست؟سعی کنید صفحات‌تان جذاب باشند. در این زمینه Animations و Transitions را مطالعه کنید.کاربران موبایل و تبلت را فراموش نکنید. CSS Media Queries به شما کمک می‌کنند که صفحات خود را برای دستگاه‌های مختلف بهینه کنید.با دانشی که کسب کردید، ۵ صفحه‌ای که در مرحله‌ی قبل ایجاد کردید را زیباتر کنید.۳) پایه‌های جاوا اسکریپت را یاد بگیرید.وب‌اپلیکیشن شما باید بتواند با کاربران تعامل کند و به رفتار آن‌ها پاسخ مناسب دهد. اگر کاربری رو دکمه‌ای کلیک کرد، چه اتفاقی باید بیافتد؟ اگر داخل یک فیلد متنی نوشت، چه؟برای این گونه موارد، لازم است که پایه‌های جاوا اسکریپت را خوب یاد بگیرید. جاوا اسکریپت به صفحات شما جان می‌بخشد.می‌دانید که DOM چیست؟ یاد بگیرید که چطور با استفاده از DOM می‌توانید عناصر داخل صفحه را تغییر دهید. مفاهیمی مانند Hoisting و Event Bubbling و Prototype را یاد بگیرید.مفاهیم دیگری مانند Scope و Context هم هستند که دانستن آن‌ها، کمک شایانی به شما می‌کند.باید بدانید که XHR چیست و چگونه با آن می‌توان یک درخواست Ajax ایجاد کرد. درمورد XML و JSON مطالعه کنید و تفاوت‌های آن‌ها را بدانید.درمورد ES6 و نسخه‌های جدیدتر آن مانند ES7 و ES8 مطالعه کنید. دانستن ES6 شما را یک برنامه‌نویس Front End متمایز می‌کند.یاد بگیرید که چگونه می‌توانید برنامه‌های جاوا اسکریپتی‌تان را به تکه‌های کوچک‌تر و قابل استفاده‌ی مجدد تبدیل کنید. به عبارت دیگر، Writing modular JavaScript را گوگل کنید.۴) چند وب‌سایت ایجاد کنید، آن‌ها را ریسپانسیو کنید و کمی هم با جاوا اسکریپت آن‌ها را پویا و زنده کنید.برای این کار، می‌توانید وب‌سایت‌هایی که روزانه به آن‌ها سر می‌زنید و به آن‌ها علاقه‌مند هستید را یک‌بار دیگر خودتان ایجاد کنید. می‌توانید سایت Dribbble را ببینید، یکی از طرح‌ها را انتخاب کرده و آن را پیاده‌سازی کنید.۵) شما آماده‌ی استخدام شدن هستید.در این مرحله، با توجه به دانشی که کسب کرده‌اید به راحتی می‌توانید پروژه‌های تجاری بگیرید و آن‌ها را انجام بدهید. با اولین درآمدتان، لطفا من را به صرف یک لیوان شکلات داغ دعوت کنید :)ما در باسلام هم به دنبال نیروهای Front End هستیم. اگر مایلید که همراه با تیم باسلام، نقشی در حل مشکلات اقتصادی کشور داشته باشید، بسیار استقبال می‌کنیم.۶) برای کار تیمی، لازم است که Git را یاد بگیرید.برای یاد گرفتن Git نگران نباشید. به جرأت می‌توانم بگویم که ساده‌تر از تمامی مواردی است که تا به این مرحله یاد گرفتید. چند ساعتی را برای مباحث پایه‌ای گیت، مانند نحوه‌ی commit کردن، نحوه‌ی ایجاد پروژه در Github و نحوه‌ی push و pull کردن صرف کنید. مابقی را می‌توانید سر فرصت و هر زمان که نیاز داشتید یاد بگیرید.۷) با NodeJS آشنا شوید و به آن محبت کنید.برای یک برنامه‌نویس Front End خوب، NodeJS یک دوست بسیار گران‌بها و ارزشمند است. کمی برای آن وقت بگذارید. اما نه برای این که پروژه‌های Back End بزنید، بلکه بتوانید از قدرت آن برای انجام کارهای مختلف‌تان استفاده کنید.۸) تا کی می‌خواهید همه چیز را خودتان بسازید؟ با استفاده از NPM از کدهای دیگران استفاده کنید.ابزاری مانند NPM به شما کمک می‌کند که ماژول‌ها و کتابخانه‌هایی که برنامه‌نویس‌های دیگر به زبان جاوا اسکریپت نوشته‌اند را به پروژه‌ی‌تان اضافه کرده و از آن‌ها استفاده کنید. با این کار، سرعت‌تان در انجام پروژه‌ها بسیار بالاتر می‌رود و جلوی اختراع دوباره‌ی چرخ را می‌گیرید.بعد از یادگیری NPM، به صورت خودکار Yarn را هم می‌آموزید.ادامه دارد...