توسعه فرانت-اند یکی از زمینه‌های کاری محبوب در حوزه نرم‌افزار یا برنامه‌نویسی است. به طوری که این روزها بسیاری از افراد در حال توسعه فرانت-اند هستند. این یکی از بهترین مشاغل فناوری است، زیرا به شما امکان می‌دهد خلاقیت بیشتری به خرج دهید و با استفاده از کدنویسی، ایده‌های‌تان را زنده کرده و به منصه ظهور برسانید. فقط باید نسبت به کاری که انجام میدهید اشتیاق و علاقه داشته باشید.
توسعه فرانت-اند هر سال در حال بهبود است. فناوری‌ها، کتابخانه‌ها و ابزارهای زیادی وجود دارد که می‌توانید از آنها برای ایجاد رابط کاربری و توسعه برنامه‌های وب استفاده کنید. به نظر می‌رسد تعداد زیادی وظایف بر دوش یک توسعه‌دهنده فرانت-اند هست که باید روزانه آنها را انجام دهد. با این حال، ابزارها و روش‌های زیادی داریم که زندگی شما را آسان‌تر می‌کند.
در این مقاله قصد داریم لیستی از چند قطعه کد مفید را برای شما به اشتراک بگذاریم که می‌تواند زندگی‌تان را به عنوان یک توسعه‌دهنده وب راحت‌تر کند. بنابراین بیایید مستقیما به بررسی آنها بپردازیم.
1. ایجاد آکاردئون تنها با HTML
فقط با استفاده از HTML می‌توانید یک آکاردئون عالی ایجاد کنید. تگ <details> و <summary> به شما این امکان را می‌دهد.
به مثال زیر توجه کنید:
<div class="container">
<details>
<summary>
HTML stands for?
</summary> <p>HTML stands for hyper text markup language.</p>
</details>
</div>خروجی:
https://codepen.io/MehdiAoussiad/embed/gORjepX
همانطور که مشاهده می‌کنید، در داخل تگ details پرسش و پاسخ مد نظر را قرار میدهید. سوال یا عنوان با استفاده از تگ <summary> ایجاد می‌شود و پاسخ پس از تگ details می‌آید. با استفاده از قطعه کد بالا می‌توانید چندین پرسش به همراه پاسخ آنها ایجاد کنید.
2. Lazy Loading تصاویر با استفاده از HTML
خصوصیت Loading به ما اجازه می‌دهد تا بارگیری تصویر را تا زمان پیمایش روی آن به منظور بهبود عملکرد و زمان لودینگ صفحه به تعویق بیندازیم.
برای انجام این کار، فقط باید مقدار lazy را به خصوصیت loading بدهید.
به عنوان مثال:
<img src='imageSrc.jpg' loading='lazy' alt='image description'>3. مرکز قرار دادن یک div
با استفاده از ویژگی‌های CSS flexbox می‌توانید به راحتی یک فرزند div را درون والد خود در مرکز قرار دهید. فقط باید از ویژگی‌های flexbox در داخل عنصر والد استفاده کنید.
در اینجا مثالی از کد آورده شده است:
.parent{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}اگر هم با CSS flexbox آشنایی ندارید، می‌توانید این مقاله را بررسی نمایید.
4. طرح‌بندی شبکه‌ای خودکار و رسپانسیو
فرض کنید شما یک طرح‌بندی شبکه‌ای (Grid Layout) دارید که شامل دسته‌ای از تصاویر یا پست‌های وبلاگ است. برای اینکه این طرح به راحتی در تمام اندازه‌های صفحه به صورت خودکار واکنش‌گرا (responsive) باشد، می‌توانید از برخی ویژگی‌های CSS بهره بگیرید.
توابع گرید CSS مانند repeat() و minmax() برای شما این امکان را فراهم می‌کند. به مثال زیر توجه کنید:
.grid-layout{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 10px;
}با استفاده از قطعه کد بالا در طرح‌بندی گرید ما، همه مواردی که حداقل عرض آنها 250 پیکسل است به طور خودکار در همه اندازه صفحه نمایش متناسب می‌شوند. اگر برای مثال قصد دارید وبلاگ یا گالری تصاویر برای خود ایجاد کنید، حتما از این ویژگی عالی استفاده نمایید.
برای مشاهده تغییرات، می‌توانید این Codepen را با تغییر اندازه صفحه بررسی کنید.
5. کپی کردن متن در کلیپ بورد
وقتی صحبت از کپی کردن متن در کلیپ بورد می‌شود، یک قطعه کد جاوااسکریپت وجود دارد که بسیاری از توسعه‌دهندگان از آن استفاده می‌کنند. این یک شی navigator است. در بیشتر موارد شما نیاز به یک دکمه دارید که به کاربر اجازه می‌دهد متن را در کلیپ بورد کپی کند.
در اینجا یک مثال از کد وجود دارد:
function CopyText() {
// select the text element.
let text = document.getElementById("myText");
// select text.
text.select();
text.setSelectionRange(0, 99999);
// Copying the text inside the text field
navigator.clipboard.writeText(text.value);
//if you want an a copy alert.
alert("Copied the text: " + text.value);
}اکنون هر زمان که می‌خواهید متن را پس از کلیک روی دکمه کپی کنید، عنصر متن را انتخاب کرده و تابع کپی بالا را به کنترل کننده رویداد کلیک برای دکمه مورد نظر اضافه نمایید.
6. دکمه برگشت به بالا
این روزها اکثر وب سایت‌ها و برنامه‌های وب دکمه‌ای دارند که به کاربر اجازه می‌دهد به راحتی مستقیما به بالای صفحه اسکرول کند. برای انجام این کار، فقط کافی است از متد scrollTo(x, y) استفاده کرده و x و y را روی 0 تنظیم کنید.
به عنوان مثال:
const ScrollTop = () => window.scrollTo(0, 0);
ScrollTop();7. به راحتی یک Color Picker ایجاد کنید
می‌توانید با استفاده از HTML و بدون CSS یا جاوااسکریپت به سادگی یک انتخاب کننده رنگ ایجاد نمایید. فقط کافی است از تگ input استفاده کرده و یک نوع رنگ به آن بدهید.
در اینجا مثال کد آورده شده است:
<input type="color" value="#000">خروجی:
https://codepen.io/MehdiAoussiad/embed/eYvXZvv
جمع‌بندی
همانطور که در لیست بالا مشاهده کردید، اینها برخی از قطعه کدها یا همان اسنیپت‌های مفید و مهم هستند که می‌توانید در توسعه فرانت-اند از آنها بهره بگیرید. این که شما توسعه‌دهنده فرانت-اند هستید یا توسعه‌دهنده بک-اند، در هر صورت باید در برخی شرایط از این کدها استفاده کنید.
امیدوارم این مقاله برایتان مفید واقع شود. در صورت تمایل می‌توانید نظرات، پیشنهادها و انتقادات خود را در بخش زیر برای ما ارسال کنید تا بتوانیم سطح مقالات را در جهت بهبود روند آموزشی ارتقا دهیم.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید