טיפים למתחילים

Codepen הוא אתר סופר קל פופולרי עט למטה עובד קוד משולב קוד מיד. אם אתה לא יודע מה Codepen הוא או לא שמעתי על זה לפני, זה בעצם קוד המקור באינטרנט (בואו נקרא לזה OSCP כדי להישמע nerdier) עבור שלושת musketeers של קידוד חזיתי; HTML, CSS ו JavaScript.

ישנם אחרים דומים OSCPs שם כמו JSFiddle, JS bin, CSSDeck & Dabblet. Codepen הוא בהחלט אחד הידועים ביותר בקרב מפתחי קצה. ללא ado נוספת, בואו לקפוץ ישר לתוך כמה עצות בסיסיות ושימושיות עבור באמצעות Codepen.

1. לחצן הפעלה

אם אתה לא אוהד של הדרך הפלט של הקוד שלך Codepen שומר מרענן בזמן אתה מקליד, אתה יכול ביטול הצטרפות “תצוגה מקדימה של עדכון אוטומטי” אפשרות, ולקבל במקום זאת לחצן הפעלה. כאשר תלחץ עליו, תוכל לראות ולעדכן את הפלט של הקוד שלך מתי שאתה רוצה.

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

2. מספר הגדלת / ירידה

הגדל או הקטן את המספרים בקוד שלך ב- Codepen מבלי להקליד את המספרים החדשים. כל שעליך לעשות הוא להשתמש בשילוב המפתח של Ctrl / Cmd ו החצים למעלה ולמטה.

3. מספר סמנים

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

4. הודעות קונסולות צבעוניות שונות

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

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

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

5. ייצוא

לאחר השמירה, א עט (ישות אחת Codepen) ניתן לייצא כקובץ ZIP עם כל שלה HTML, CSS ו קוד JS בקבצים. יש גם אפשרות לשמור את העט כתמצית של גיטאב (מאגר Git). ניתן למצוא את הלחצן 'ייצוא' בפינה השמאלית התחתונה של כל עט.

6. מצא והחלף

חיפוש והחלפה - מבצע חיוני עבור אנשים שנוטים לשנות את שמות המשתנים שלהם מדי פעם. Ctrl / Cmd + Shift + F הוא מקש משולב פתח את ה “חיפוש והחלפה” שיח.

7. אמט טאבגר

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

8. קבל קבצי קוד אישי

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

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

9. בדוק JavaScript המשתנים

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

10. הפעל עט תבנית

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