CodePen: Built, Test, Share and Discover HTML, CSS, and JavaScript

Codepen: לבנות, לבדוק ולגלות קוד חזיתי

אתגר אחד עם מערכת ניהול תוכן הוא בדיקה והפקה של כלי תסריט. אמנם זה לא דרישה עבור רוב המו"לים, אבל כפרסום טכנולוגי, אני אוהב לשתף מדי פעם סקריפטים עובדים כדי לעזור לאנשים אחרים. שיתפתי כיצד להשתמש JavaScript לבדיקת חוזק הסיסמה, איך ל בדוק את תחביר כתובת הדוא"ל עם ביטויים רגולריים (רגקס), ולאחרונה הוסיף זאת מחשבון לחיזוי השפעת המכירות של ביקורות מקוונות. אני מקווה להוסיף עשרות כלים לאתר אבל וורדפרס לא בדיוק תורמת לפרסום כזה ... זו מערכת תוכן ולא מערכת פיתוח.

אז, כדי שהסקריפטים הקטנים שלי עובדים, אני נהנה להשתמש בהם קוד פן. CodePen הוא כלי מאורגן למשעי עם פאנל HTML, פאנל CSS, פאנל JavaScript, קונסולה ופורסם של הקוד שהתקבל. לכל פאנל יש מידע כאשר אתה מעביר העכבר מעל אלמנטים כדי שתבין מה אפשרי, כמו גם קידוד צבעים של HTML, CSS ו- JS שלך כדי לעזור לך לערוך ולכתוב בצורה קלה יותר.

CodePen היא סביבת התפתחות חברתית. בבסיסו, הוא מאפשר לך לכתוב קוד בדפדפן, ולראות את התוצאות שלו בזמן שאתה בונה. עורך קוד מקוון שימושי ומשחרר למפתחים מכל מיומנות, ומעצים במיוחד לאנשים הלומדים לקודד. CodePen מתמקד בעיקר בשפות חזיתיות כמו HTML, CSS, JavaScript ותחביר לעיבוד מראש שהופכים לדברים האלה.

אודות CodePen

באמצעות CodePen הצלחתי לבצע את כל העבודה הדרושה פרסם את המחשבון הטמנתי באתר. רוב היצירות ב- CodePen הן ציבורי ומקור פתוח. הם יצורים חיים שאנשים אחרים והקהילה יכולים לקיים איתם אינטראקציה, החל בלב פשוט, ועד להשאיר תגובה, ועד זיוף ושינוי לצרכים שלהם.

CodePen - מחשבון לחיזוי השפעת המכירות של ביקורות מקוונות

באמצעות CodePen, אתה יכול לשנות את התצוגה שלך אם ברצונך שהחלונות יהיו בצד שמאל, ימין או תחתון תוך כדי עבודה ... או להציג את ה- HTML בכרטיסיה חדשה. התצוגה זו לצד זו פועלת בצורה מדהימה לבדיקת ההגדרות הרספונסיביות שלך מכיוון שתוכל להתאים את גודל החלונית הניתנת לצפייה.

אתה יכול לארגן כל אחד מתסריטי העבודה שלך בעטים, לשלב אותם לפרויקטים (עורך רב קבצים), או אפילו לבנות אוספים. זה בעצם אתר עבודות פורטפוליו עבור קוד חזיתי שבו אתה יכול לעקוב אחר מחברים אחרים, להזין פרויקטים אחרים משותפים בציבור כדי לשנות, ואפילו ללמוד כיצד לעשות דברים מהנים באמצעות אתגרים.

אתה יכול לשמור כ- GitHub Gist, לייצא בקובץ zip ואפילו שבץ את העט במאמר כזה:

ראו את העט
השפעת מכירות צפויה של ביקורות מקוונות
by Douglas Karr (@douglaskarr)
on קוד פן.


אחת המגבלות של עורך העט היא נפח הקוד העצום. ייתכן שלעולם לא תיתקל בבעיה זו, שכן העורך צריך להיות בסדר עם מאות או אפילו אלפי שורות קוד. אבל כאשר הם מתחילים להכות 5,000 - 10,000 שורות קוד או יותר, תראה שהעורך מתחיל להיכשל. עם זאת, תוכל להוסיף הפניות חיצוניות לגליונות סגנונות או ל- JavaScript המתארח במקום אחר!

אני ממליץ לך להירשם. אתה מנוי לדוא"ל השבועי שלהם ותוכל להוסיף גם את העדכון לעדכון ה- RSS שלך, כך שתוכל לראות עטים שפורסמו לאחרונה. ואם תתחיל לחפש או לגלוש שם בעטים הציבוריים, תמצא כמה פרויקטים מדהימים ... המשתמשים די מוכשרים!

עקבו Douglas Karr על קודפן

הגרסה בתשלום, CodePen Pro, מציעה המון תכונות נוספות לשיפור הפונקציונליות או הצוותים - כולל שיתוף פעולה, תהליכים, אירוח נכסים, תצוגות פרטיות ואפילו פרויקטים פרוסים עם דומיין או תת-דומיין משלך. וכמובן, CodePen מספק מאגר נהדר עם שילוב Github שבו כל הצוות שלך יכול לעבוד. אם אתה רק רוצה לבדוק איזה קוד פשוט כמוני, CodePen הוא כלי שלא יסולא בפז.

מה אתה חושב?

אתר זה משתמש Akismet כדי להפחית דואר זבל. למד כיצד הנתונים שלך מעובדים.