CodePen: ساخته شده ، آزمایش ، اشتراک گذاری و کشف HTML ، CSS و JavaScript

Codepen: ساخت ، آزمایش و کشف کد Front-End

یک چالش با سیستم مدیریت محتوا ، آزمایش و تولید ابزارهای اسکریپت است. گرچه این مورد برای اکثر ناشران الزامی نیست ، اما به عنوان یک نشریه فناوری ، من دوست دارم هر از گاهی اسکریپت های فعال را برای کمک به افراد دیگر به اشتراک بگذارم. من نحوه استفاده را به اشتراک گذاشته ام جاوا اسکریپت برای بررسی قدرت رمز عبور، چگونه نحو آدرس ایمیل را با عبارات منظم بررسی کنید (Regex) ، و اخیراً این را اضافه کرده است ماشین حساب برای پیش بینی تأثیر فروش بررسی های آنلاین. من امیدوارم که ده ها ابزار در سایت اضافه کنم ، اما وردپرس دقیقاً برای انتشار چنین نشانی ندارد ... این یک سیستم محتوا است ، نه یک سیستم توسعه.

بنابراین ، برای اینکه اسکریپت های کوچک من کار کنند از استفاده لذت می برم CodePen. CodePen ابزاری منظم و منظم است که دارای یک پنل HTML ، یک پنل CSS ، یک پنل جاوا اسکریپت ، کنسول و کد منتشر شده است. هر پانل هنگام قرار دادن عناصر بر روی آن اطلاعاتی را در اختیار شما قرار می دهد تا بفهمید چه چیزی ممکن است ، همچنین کدگذاری رنگ HTML ، CSS و JS برای کمک به شما در ویرایش و نوشتن آسان تر.

CodePen یک محیط توسعه اجتماعی است. در قلب خود ، به شما اجازه می دهد تا کدی را در مرورگر بنویسید ، و هنگام ساختن نتایج آن را مشاهده کنید. یک ویرایشگر کد آنلاین مفید و آزادکننده برای توسعه دهندگان هر مهارت و به ویژه توانمندی برای افرادی که کدنویسی را یاد می گیرند. CodePen در درجه اول روی زبانهای جلویی مانند HTML ، CSS ، JavaScript و نحوهای پیش پردازش که به این موارد تبدیل می شوند تمرکز دارد.

درباره CodePen

با CodePen ، من توانستم تمام کارهای لازم را انجام دهم ماشین حساب را منتشر کنید من در سایت تعبیه شده است. بیشتر آثار موجود در CodePen به صورت عمومی و منبع باز است. آنها موجوداتی زنده هستند که افراد دیگر و جامعه می توانند با آنها ارتباط برقرار کنند ، از یک قلب ساده ، تا گذاشتن یک نظر ، تا چنگ زدن و تغییر برای نیازهای خود.

CodePen - محاسبه گر برای پیش بینی تأثیر فروش بررسی های آنلاین

اگر می خواهید در هنگام کار ، پنجره ها در سمت چپ ، راست یا پایین قرار بگیرند ، می توانید نمای خود را تغییر دهید یا HTML را در برگه جدید مشاهده کنید. نمای ساید بای ساید برای آزمایش تنظیمات پاسخگو شما فوق العاده خوب عمل می کند زیرا شما می توانید اندازه صفحه قابل مشاهده را تنظیم کنید.

شما می توانید هر یک از اسکریپت های کاری خود را در Pens مرتب کنید ، آنها را در Projects (ویرایشگر چند پرونده) ترکیب کنید ، یا حتی مجموعه هایی بسازید. این اساساً یک سایت نمونه کارها برای کد جلویی است که در آن می توانید نویسندگان دیگر را دنبال کنید ، سایر پروژه های به اشتراک گذاشته شده عمومی را برای تغییر در چنگال خود قرار دهید و حتی یاد بگیرید که چگونه از طریق چالش ها کارهای جالب را انجام دهید.

شما می توانید به عنوان GitHub Gist ذخیره کنید ، در فایل zip صادر کنید و حتی آن را صادر کنید جاسازی کردن قلم در مقاله ای مانند این:

قلم را ببینید
تأثیر فروش پیش بینی شده در بازبینی های آنلاین
by Douglas Karr (douglaskarr)
on CodePen.


یکی از محدودیت های ویرایشگر Pen ، حجم زیاد کد است. ممکن است هرگز با این مسئله روبرو نشوید ، زیرا ویرایشگر باید با صدها یا حتی هزاران خط کد خوب باشد. اما هنگامی که آنها شروع به زدن 5,000 تا 10,000 خط یا بیشتر کد می کنند ، ویرایشگر شروع به خرابی می کند. با این حال ، می توانید منابع خارجی را به صفحه های سبک یا جاوا اسکریپت که در جای دیگری میزبانی شده اضافه کنید!

من شما را به ثبت نام تشویق می کنم. شما در ایمیل هفتگی آنها مشترک خواهید شد و همچنین می توانید خوراک را به خوراک RSS خود اضافه کنید تا بتوانید قلم های تازه منتشر شده را مشاهده کنید. و اگر شروع به جستجو یا مرور قلم های عمومی در آنجا کنید ، پروژه های خارق العاده ای خواهید یافت ... کاربران کاملاً با استعداد هستند!

دنبال کردن Douglas Karr در Codepen

نسخه پولی ، CodePen Pro ، تعداد زیادی ویژگی اضافی برای بهبود عملکرد یا تیم ها - از جمله همکاری ، فرآیندها ، میزبانی دارایی ، نمایش خصوصی و حتی پروژه های مستقر در دامنه یا زیر دامنه خود را ارائه می دهد. و البته ، CodePen یک مخزن عالی با ادغام Github فراهم می کند که در آن کل تیم شما می تواند کار کند. اگر می خواهید چند کد ساده را همانطور که هستم آزمایش کنید ، CodePen ابزاری ارزشمند است.

شما چه فکر میکنید؟

این سایت از Akismet برای کاهش هرزنامه استفاده می کند. بدانید که چگونه نظر شما پردازش می شود.