چرا باید از Codepen استفاده کنیم؟
یکی از بهترین پلتفرمها برای طراحان و توسعهدهندگان وب، Codepen است. این پلتفرم به توسعهدهندگان اجازه میدهد که بتوانند از کدهای نوشته شده توسط توسعهدهندگان دیگر الهام بگیرند و یا از آن کدها در پروژههای خود استفاده کنند و حتی به راحتی آن کد را تغییر بدهند. وبسایت Codepen در واقع “یک زمین بازی برای طراحان وب” است.
شروع کار با Codepen
برای شروع کار در این وبسایت ابتدا باید یک “Pen” ایجاد کنید که هر کدام از این Pen ها میتواند از HTML ، CSS و یا جاوااسکریپت تشکیل شود. بعد از آن میتوانید این Pen ها را در پروفایل خود به نمایش بگذارید و از مخاطبان بازخوردهای مختلفی دریافت کنید.
چرا از Codepen استفاده کنیم؟
خیلی از امکانات Codepen به صورت رایگان عرضه میشود و مهمتر از آن در سطح جهانی فعالیت میکند و کاربران زیادی دارد. این جامعه گسترده هم باعث میشود نمونه کارهای زیادی در Codepen موجود باشد. برای مثال خیلی راحت میتوانید کلمه Button را در Codepen جستجو کنید تا دکمههای مختلف و متنوعی رو ببینید.
اما Codepen امکانات خیلی بیشتری دارد و در ادامه به چند مورد میپردازیم.
پشتیبانی از پیشپردازندههای مختلف
اگر برای کدنویسی HTML، CSS و یا جاوااسکریپت از پیشپردازنده استفاده میکنید، Codepen کار شما را راحت میکند. Codepen از پیشپردازندههای HAML، Slim، Markdown و Pug برای HTML پشتیبانی میکند. برای CSS هم از Less، Sass، SCSS، Stylus و PostCSS پشتیبانی میکند. اگر توسعهدهنده جاوااسکریپت هستید، میتوانید از Babel، LiveScript، CoffeeScript و TypeScript هم استفاده کنید.
همچنین با یک کلیک میتوانید به راحتی Normalize.css و Reset.css را به Pen خود اضافه کنید.
نمایش کدهای شما با کمک تگها
شما میتوانید به Pen های خود تگهای مختلف مثل “Button” و یا “Loader” اضافه کنید تا توسط موتورهای جستجو در دسترس باشد و کاربران زیادی آنها را پیدا کنند.
افزودن Pen ها به کلکسیون
در Codepen میتوانید کلکسیونهای مختلفی با موضوعات متفاوت ایجاد کنید و Pen های مورد علاقه خود را به این کلکسیونها اضافه کنید.
8 حالت برای نمایش
در Codepen میتوانید Pen ها را در ۸ حالت مختلف ببینید که ۴ حالت آن فقط برای کاربرانی که نسخه حرفهای را خریداری کردند فعال میشود. ولی کاربران عادی میتوانند از ۴ حالت باقیمانده استفاده کنند که هر کدام از این حالات را به شما معرفی میکنم.
Editor View: حالت پیشفرض نمایش Pen است. در این حالت میتوانید به طور مستقیم کدها را ویرایش کنید و نتیجه را به صورت آنی ببینید.
Full Page View: در این حالت تمام صفحه به نمایش Pen اختصاص پیدا میکند و در قالب یک iframe نمایش داده میشود.
Details View: در این حالت میتوانید کامنتها، تگها و دیگر جزئیات یک Pen را ببینید.
Debug View: این حالت شبیه Full Page View است ولی با ۳ تفاوت:
- سربرگ Codepen وجود ندارد
- صفحه در iframe قرار نمیگیرد (به راحتی میتوانید source کد را ببینید)
- هیچ عنصری در نمایش کد شما دخالت داده نمیشود.
این حالت برای تست و برطرف کردن خطاهای کد استفاده میشود.
۴ حالت نمایش دیگر برای کاربران ویژه Codepen وجود دارد.
Presentation Mode: در این حالت سربرگ سایت پنهان میشود تا بتوانید به راحتی Pen را برای ارائه آماده کنید.
Professor Mode: برای ارتباط مدرس و دانشجویان از این حالت استفاده میکنیم. در یک طرف مدرس بر روی کد کار میکند و در طرف دیگر دانشآموزان کد را مشاهده میکنند.
Collab Mode: در این حالت ۲ یا چند توسعهدهنده میتوانند همزمان بر روی کد کار کنند و خروجی آن را مشاهده کنند.
Live View: با استفاده از این حالت میتوانید به صورت مستقیم خروجی کار را بر روی یک یا چندین دستگاه ببینید. این حالت برای بررسی و تست خروجی بر روی چند دستگاه استفاده میشود.
Codepen پلتفرم فوقالعاده مفیدی است و میتواند برای طراحان و توسعهدهندگان وب الهامبخش باشد. در عین حال میتواند نمونه کار مناسبی برای طراحان و توسعه دهندگان وب باشد تا این افراد بتوانند مهارتها و ایدههای خود را به نمایش بگذارند.
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.