معرفی Codepen

سایت Codepen را می توان یک محفل دوستانه برای طراحان وب دانست که جهت تست باگ ها یا همکاری در زمینه وب مورد استفاده قرار می‌ گیرد. تمامی محتویات سایت روی پایه Pen قرار دارند. وجود پروفایل برای هر فردی از سری امکانات سایت Codepen به شمار می رود. در ادامه، سامانه فعال شده سعی دارد تا به ارائه مطالبی در این زمینه بپردازد.

معرفی سایت Codepen

cv سایت Codepen این فرصت را برای شما ایجاد می کند تا در یک محیط باز بتوانید پیشرفت کنی و باعث پیشرفت دیگران نیز بشوید. در Codepen هر یک از نمونه کارها یک pen نامیده می شود؛ حتی شما می‌توانید از CSS، HTML و جاوا اسکریپت نیز استفاده کنید. ثبت نام در Codepen به راحتی انجام می شود؛ از این رو می توانید به سادگی در این سایت ثبت نام کنید و یک پروفایل شخصی داشته باشید و نمونه کارهای خود را برای سایر افراد به نمایش بگذارید.

امکانات و ویژگی‌ های منحصر به فرد سایت Codepen

سایت Codepen امکاناتی را برای کاربران خود فراهم کرده است که آن را از سایر رقبایش متمایر می کند. در ادامه به شرح اطلاعاتی در رابطه با آنها می پردازیم.

• تنظیمات مربوط به CSS 

سایت Codepen امکاناتی را برای شما فراهم می کند تا بتوانید به سرعت فایل CSS خود را بنویسید. شما می توانید انتخاب کنید تا فایل های Reset.css یا Normalize.css به صورت خودکار در پروژه شما قرار داده شوند. حتی می‌ توانید به جای CSS از SASS، LESS یا Styuls استفاده کنید.

در صورتی که از صحیح بودن کدهای خود اطمینان ندارید، امکانی در سایت Codepen به نام CSSLint وجود دارد که با استفاده از آن به راحتی می توانید کدهای خود را مورد آزمایش قرار دهید؛ بدین صورت خطاهای آن برای شما مشخص می شوند.

• استفاده از HTML, CSS و جاوا اسکریپت

سایت Codepen از امکانات ویژه ای از جمله HTML, CSS و جاوا اسکریپت پشتیبانی می کند. برای CSS می توانید از SASS, SCSS, Less و Sylus و برای HTML می توانید از Slim, Mark down, HAML و حتی Jade استفاده کنید. در رابطه با جاوا اسکریپت نیز می توانید از Coffee Script یا LiveScript استفاده کنید؛ همچنین این امکان نیز وجود دارد که از منو مخصوص آخرین نسخه از jQuery یا AngulareJS را در نسخه خود قرار دهید.

• تگ ها و کلکسیون ها

شما به راحتی می توانید به pen های خود تگ (برچسب) اضافه کنید؛ بدین صورت pen های شما در جستجو کاربران به راحتی نمایش داده می شوند. برای مثال می توانید کلمات کلیدی مثل Button یا Loader در نمونه کارهای خود استفاده کنید. همچنین در صورتی که تمایل دارید می توانید یک کلکسیون از pen های مرتبط ایجاد کنید. برای مثال کلکسیون های Path drawing و Reapeating Patterns که توسط موسس های Codepen ایجاد شده‌ اند.

• Vim و Emmet

سایت Codepen جهت توسعه سریع تر و دقیق تر بکار می رود. توسعه سریع تر آن هدفی است که Emmet آن را دنبال می کند. ادیتور Codepen این شرایط را برای شما به وجود می آورد که برای ایجاد یک pen از Emmet یا Vim استفاده کنید. با استفاده از این امکانات می توانید سرعت پروژه خود را بهبود ببخشید.

نمایش pen در حالت های مختلف

سایت Codepen از چندین حالت نمایش برای pen های شما برخوردار است و هرکدام از آنها مزایای خاص خود را دارند.

• حالت Editor View: این حالت پیشفرض سایت Codepen است که در این قسمت می توانید سایز بخش ادیتور را کم یا زیاد کنید یا وضعیت هر کدام از زبان ها را به حالت نمایش یا پنهان تغییر دهید.
• حالت Details View: این حالت به شما این امکان را می دهد تا جزئی ترین اطلاعات را در رابطه با pen ها از قبیل برچسب های آن، نظرات مربوط به pen و امتیازات و سایر موارد آن را مشاهده کنید.
• حالت Full Page View: این حالت برای نمایش دادن تمام صفحه خروجی یک pen است و تنها در بخش پایین، فوتر سایت Codepen را مشاهده می کنید.
• حالت Debug View: این حالت یکی از بهترین حالت ها برای توسعه دهندگان سایت است. با استفاده از این حالت می توانید یک پروژه را تست و خطاهای آن را نیز برطرف کنید.

نمایش pen در حالت های حرفه ای

در صورتی که پروفایل کاربری خود را به یک پروفایل حرفه‌ ای تغییر دهید، به حالت های نمایش بیشتری دسترسی خواهید داشت.

• حالت Presentation Mode: این حالت یک حالت ویژه جهت ارائه pen خودتان است. در چنین حالتی Header سایت نیز برداشته می شود و به راحتی می توانید اندازه و رنگ فونت را تغییر بدهید.
• حالت Live View: این حالت برای تست روی چند دیوایس بکار می رود و این امکان را به شما می دهد تا در هر لحظه که در کد تغییری اعمال کنید، در همان لحظه در خروجی تغییر آن اعمال شود.
• حالت Collb Mode: این حالت برای همکاری روی یک پروژه استفاده می شود و این امکان را برای شما فراهم می کند تا به طور همزمان بیش از یک نفر تغییراتی را روی کدها اعمال کنند. این حالت مجهز به امکان گفتگو نیز است.
• حالت Professor Mode: این حالت برای پروفسورها و استادان عزیز ایجاد شده است. این حالت شرایطی را برای سایر کاربران فراهم می کند تا کدهای شما را به صورت زنده تماشا کنند‌. همچنین در این حالت امکان گفتگو در میان استاد و دانشجو نیز وجود دارد.

وبلاگ نویسی

وبلاگ نویسی که به تازگی به امکانات Codepen اضافه شده است، به کاربران این امکان را می دهد تا درست همانند یک وبلاگ در رابطه با کدهای خود بنویسند.

• امکان اشتراک گذاری مطالب در مورد Codepen

این ویژگی را می توان مهم ترین ویژگی سایت Codepen دانست که آن را از سایر رقبایش متمایز کرده است. سایت Codepen با فراهم کردن این ویژگی به سایر کاربران این امکان را می دهد تا نظرات خود را در رابطه با Codepen به اشتراک بگذارند. این امکان می تواند منجر به گسترش اجتماع و یادگیری همگانی شود.

• ایده های الهام بخش و خاص

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

جمع بندی

سایت Codepen را می توان یکی از بزرگترین سایت ها در این زمینه دانست که کاربران بسیاری نیز دارد‌؛ از این رو به طور قطع ثبت نام و استفاده از این سایت برای شما بسیار مفید خواهد بود. می‌توانید از سایر طرح های موجود در این سایت ایده بگیرید و گاهی اوقات یک pen طراحی کنید و برای سایر کاربران به نمایش بگذارید.