Home-theater-designers
תחילת העבודה עם פיתוח אתרי אינטרנט של JavaScript יכולה להיות תהליך מתסכל, אך ישנם כלים הקלים.
CodePen.io היא סביבת קידוד בדפדפן המיועדת הן ללימוד קוד והן לאבני טיפוס במהירות עם רעיונות מינימליים.
במאמר זה, אנו בוחנים כמה מתכונות האתר וכיצד הן יכולות לעזור לך להפוך למתכנת טוב יותר.
מהו CodePen?
CodePen מספק משהו שנקרא a עֵט , הכולל שלושה חלונות שונים עבור HTML, CSS ו- JavaScript, בתוספת חלונית תצוגה מקדימה המתעדכנת בזמן אמת בזמן ההקלדה.
למרות שהוא משמש לעתים קרובות למפתחי אתרים כדי להציג רעיונות לאתרים, הוא גם מקום מצוין ללמוד את היסודות של פיתוח אינטרנט חזיתי. להלן התכונות הבולטות ביותר שעליך לדעת בעת שימוש ב- CodePen.
1. מעבדים מוקדמים
מעבדים מוקדמים הם שפות מתפרשות או מורכבות שנועדו לפשט את הקידוד. הם יכולים להוסיף תכונות לשפה לנוחות, ולהקל על הקריאה של הקוד. בפיתוח אתרים משתמשים בשילוב של מעבדי קדם HTML, CSS ו- JavaScript ליצירת קוד נקי במהירות.
אם אתה לומד פיתוח אתרים ורוצה לנסות מעבדי קדם שונים, CodePen מאפשר לך להחליף מעבדים מראש ולראות את הקוד שהוא אוסף בזמן אמת. לכל אחת משלוש החלוניות באפליקציית CodePen יש תפריט נפתח בפינה השמאלית העליונה. בחר הצג HTML/CSS/JS מורכב כדי לראות כיצד יתפרש הקוד.
בעט זה, יצרנו אתר פשוט באמצעות המל ו סאס לעצב קצת טקסט כותרת. בחירה צפה מקובץ מציג את ה- HTML וה- CSS הסטנדרטיים. בדוגמה זו ההבדל הוא מינימלי. עם זאת, תוך לימוד שפה חדשה, זה יכול להיות שימושי לראות כיצד נראה הקוד הקוד שעובד מראש.
2. משאבים חיצוניים
לצד תמיכה מקורית במעבדים קודמים, CodePen תומך בסקריפטים חיצוניים. זה הופך אותו למקום המושלם לקבל ניסיון מעשי עם ספריות עבור הפרויקטים האישיים שלך, או להתחדש בספריות אפליקציות אינטרנט פופולריות כמו React.
כדי להוסיף ספרייה חיצונית, פתח את הגדרות החלונית על העט שלך, ועבור לכרטיסיית JavaScript. ישנן שתי דרכים להוספת משאבים, על ידי הוספת כתובת האתר של המשאב באופן ידני, או על ידי חיפוש.
השתמשנו בתכונה זו בכיסוי המאמר שלנו אנימציה אינטרנטית עם mo.js , יחד עם עיבוד מוקדם של בבל.
ראה את העט דוגמה ל- Mojs MUO מאת איאן ( @ברדוקטורוס ) ב- CodePen.
כן, ניתן להטמיע עטים של CodePen! קדימה, לחץ על חלונית התצוגה המקדימה למעלה כדי לראות את תוצאות ההדרכה Mo.js!
ניתן לייבא עטים אחרים בדומה לספריות חיצוניות. המשמעות היא שאתה יכול לקחת אלמנטים מהעטים שנכתבו בעבר לשימוש כמו מודולים בעטים החדשים שלך. משתמש CodePen של אדם סקר פשוט עט הוא דוגמה טובה לכך.
3. תבניות
כאשר אתה לומד מושגים חדשים או בוחן רעיונות חדשים, אתה משתמש לעתים קרובות ברכיבים דומים וחוזר על אותם שלבים בתחילת העבודה. CodePen מאפשר יצירת עטים של תבניות שיכולות לחתוך את החזרה, ולתת לך להגיע לעניין.
כדי ליצור תבנית, פתח עט חדש, בצע את השינויים ובחר את תבנית המחוון בתפריט ההגדרות.
https://vimeo.com/221428690
עד לאחרונה, משתמשים בחינם יכולים ליצור רק שלוש תבניות, אך כעת לכל המשתמשים יכולים להיות כמה תבניות בחשבון שהם רוצים. מושלם להתחלת רעיון חדש במינימום עיכוב!
4. שיתוף פעולה אופנתי
היכולת לשתף פעולה וללמד עם CodePen עשויה להיות הנכס הגדול ביותר שלה. יש כבר שפע של כלי שיתוף פעולה מעולים למתכנתים, אך הגישה של CodePen פשוטה ואינטואיטיבית.
משתמשי המקצוענים ב- CodePen יכולים ליצור עט חדש ולפתוח אותו לשיתוף פעולה תחת שינוי תצוגה תַפרִיט. זה משנה את הקישור של העט להזמנה הניתנת לשיתוף המתאימה למספר משתנים של אנשים בהתאם לתוכנית CodePen Pro שלך.
סטופ קוד מערכת חריגה משירות Windows 10
במקרה זה, כתבתי HTML בזמן שחבר עדכן את ה- CSS בזמן אמת, עם סמן שכותרתו זיהה היכן הם עובדים.
כל מי שיש לו את הקישור יכול להצטרף ולהשתמש בפונקציית הצ'אט בדפדפן, ללא קשר אם הוא משתמש מקצוען או אפילו בעל חשבון CodePen. בתנאי שהשמירה האוטומטית כבויה רק בעל העט יכול לשמור את כל השינויים, מה שהופך אותה לדרך בטוחה לפתוח את הקוד בפני אחרים ללא סיכון.
אופיו הפתוח של מצב זה מועיל למתחילים מכיוון שאתה יכול להזמין כמעט כל אחד בעט שלך להדריך אותך בקונספט קשה. זהו גם מצב שימושי להכיר את דרכך מכיוון שהוא מושלם לראיין עובדים פוטנציאליים, וכבר יש שימשו בצורה מקצועית בדרך זו !
5. פרופסור מוד
מצב פרופסור מאפשר למשתמש פרו אחד לארח חדר שבו רק הם יכולים לערוך את הקוד. בין 10-100 משתמשים יכולים לצפות ולשוחח בהתאם לתכנית המקצוענים של המארח.
מצב הפרופסור מאפשר גמישות בין למידה בכיתה ללמידה מרחוק, או שילוב של השניים. שימוש במצב פרופסור יאפשר לאנשים מאחור בכיתה לחוות את אותה חוויה של אלה שבחזית, ולמורה להציג תיקוני באגים אשר יתעדכנו בזמן אמת.
6. מצב מצגת
מצב המצגת מתוכנן, באופן לא מפתיע, עם הצגת קוד בראש. האפליקציה מוצגת בתצוגה פשוטה יותר, המיועדת לעבודה עם מקרני תקורה. CodePen ייעל את מצב המצגת לשימוש בחיבורי אינטרנט במהירות נמוכה יותר וחומרה חלשה יותר.
קוראים ממולחים אולי כבר הבינו שהגרסה החינמית של CodePen תספק בדיוק את הפונקציה הזו, אם כי למצב Pro יש כמה תכונות שימושיות. ניתן לשנות במהירות את הפריסה, את גודל הגופן ואת העיצובים כדי להתאים כמעט לכל הגדרה, והצגת הקישור לעט מעלה כתובת URL מקוצרת בגודל ג'מבו, מה שהופך את שיתוף הפרויקט לקל יותר.
השינויים הקטנים הללו, יחד עם היכולת להגדיל את חלון התצוגה המקדימה כך שיתאים למה שאתה מציג, הופכים את מצב המצגת למושלם הן למורים והן למפתחים המציגים רעיונות לעמיתים. מצב מצגת הוא גם דרך נקייה ופשוטה להציג קוד אם אתה מוצא את עצמך מתראיין לעמדת תכנות.
7. דפוסים
חיפוש ההשראה הופך להיות הרבה יותר קל עם אוספי CodePen תבניות עיצוב .
כל קטגוריה היא אוסף של קוד דוגמה המסופקים על ידי משתמשי CodePen למשימות ספציפיות. האם אתה מחפש דרך ליצור כפתורים דינאמיים לאתר שלך? תפריט אקורדיון? יש שפע של קטגוריות שיתאימו כמעט לכל דוגמה.
דפוסים אלה הם גם דרך מצוינת ללמוד כיצד פועלים כפתורים אינטראקטיביים, והדרכים השונות שבהן ממשקי משתמשים דינמיים יכולים לפעול.
8. אמט
אמט , הידועה בעבר בשם Zen Coding, נחשבת באופן כללי לחוסך הזמן הגדול ביותר לפיתוח HTML ו- CSS. התוסף לוקח חלק מהקוד שאתה מוצא את עצמך כותב הרבה וממיר אותם לקיצורי דרך פשוטים.
עדיף לראות אותו בפעולה מאשר להסביר אותו, אז קח את ההגדרה הרגילה עבור מסמך HTML:
הוספת זה לכל מסמך HTML צומצמה לשתי פעולות. באמצעות Emmet, הקלד ! ופגע ב כרטיסייה מַפְתֵחַ. קֶסֶם!
Emmet פעיל כסטנדרט ב- CodePen והוא שימושי במיוחד אם אתה מנסה ללמוד מושג חדש ב- JavaScript וצריך ליצור את ה- HTML ו- CSS התומך במהירות.
התפתח עם CodePen לחוויה טובה יותר
CodePen הוא כלי מצוין למפתחי אתרים, והתחום צומח ללא הרף. JavaScript היא שפה מצוינת ללמוד לעתיד בפיתוח אתרים.
כיצד לעצור שיחות טלפון לא רצויות בניי
ישנם כמה הדרכות וקורסים מעולים לאנשים שרוצים להתחיל עם JavaScript, ו- CodePen היא סביבה מצוינת לבחון את הכישורים החדשים שלך.
לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל 8 אתרי האינטרנט הטובים ביותר להורדת ספרי שמע בחינםספרי שמע הם מקור בידור מצוין והרבה יותר קל לעיכול. להלן שמונה האתר הטוב ביותר שבו תוכל להוריד אותם בחינם.
קרא הבא נושאים קשורים- תִכנוּת
- HTML
- בניית אתרים
- JavaScript
- CSS
איאן באקלי הוא עיתונאי, מוזיקאי, מבצע ומפיק וידאו עצמאי המתגורר בברלין, גרמניה. כשהוא לא כותב או על במה, הוא מתעסק עם מוצרי אלקטרוניקה DIY או קוד בתקווה להפוך למדען מטורף.
עוד מאת איאן באקליהירשם לניוזלטר שלנו
הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!
לחצו כאן להרשמה