הן למתחילים הרוצים ללמוד, והן עבור אנשי מקצוע מנוסים, ישנם אתרי אינטרנט המאפשרים לנסות שורות קוד ולראות את התוצאה בתצוגה מקדימה וכמעט בזמן אמת. אלה יישומים אמיתיים שהמסך מחולק לשניים, שמצד אחד כותבים את הקוד שיכול להיות HTML, CSS, PHP, Javascript או אחר, ומצד שני, לאחר לחיצה על מקש לביצוע, אתה באמת רואה איך זה נראה אם הקוד הזה היה באתר אינטרנט.
אלה אינם עורכי קוד פשוטים, אלא מקומות בהם תוכלו לבדוק את תכנותיכם מבלי לדאוג לטעות ולגלות במהירות היכן נמצאות השגיאות. Codepen ו- JSFiddle הם שני האתרים הפופולריים ביותר בקטגוריה זו, אך יש גם אלטרנטיבות רבות.
קרא גם: שפות תכנות עיקריות המשמשות לאפליקציות ואתרים
1) קוד פן
CodePen הוא האתר הפופולרי ביותר ומשמש מתכנתים מכיוון שהוא בחינם, אינטואיטיבי ונוח לשימוש. לאחר שהפכת לסטנדרט בעולם המתכנתים, פשוט חפש בגוגל כדי למצוא דפים שכבר נערכו על ידי Codepen ובדוק מיד אם זה מה שחיפשת. חלונות הצפייה הגמישים והביצוע המיידי של הקוד הכתוב הופכים אותו למושלם מספיק לנסות אנימציות JavaScript ו- CSS, יתר על כן הוא יכול להתחבר בקלות לסקריפטים חיצוניים (React, Vue וכל דבר אחר שניתן להשיג באמצעות CDN).
CodePen ראוי למקום הראשון בקטגוריה זו, עם זאת, חלק מהתכונות בתשלום, כגון קידוד שיתופי ותצוגות חיות של עמוד מלא (צפיות חי חלקיות הן בחינם).
2) JSFiddle
במקום השני (אם כי כרונולוגית הוא אחד העתיקים ביותר) בעולם האתרים לכתיבה ולניסיון של קוד תכנות הוא JSFiddle, שמכוון מעל לכל ליצירה ובדיקה של JavaScript. ניתן להשתמש בו גם עבור HTML ו- CSS ומאחר שהוא תומך בטיפים להשלמת קוד ויכול להיות שעדיף על קוד פן עבור פחות מנוסים.
נקודה גדולה לטובת JSFiddle היא שהיא מציעה מצב שיתוף פעולה בחינם (כולל צ'אט קולי וטקסט), כך שתוכלו לעבוד על הקוד בו זמנית עם אנשים אחרים.
3) גליץ '
אתרי קוד רבים מאפשרים לקודד HTML / CSS / JS וליצור דפי אינטרנט סטטיים, ואילו גליץ ' מציע שטח אחסון פנוי קטן לחיסכון בפרויקטים ומקלה על ביצוע קוד בצד השרת Node.js. אתה יכול לתכנת בשיתוף פעולה עם גליץ ',
זה מגיע גם עם מספר תכונות פנטסטיות אחרות: קידוד שיתופי, בקרת גרסאות, משאבי למידה רבים, אינטגרציה טובה עם GitHub, הטמעה קלה, קהילה לבקש עצה, פרויקטים שכבר עשויים לשנות או להשתמש בחופשיות ואת שילוב Visual Studio. זוהי דרך נהדרת, מהירה וקלה להפעיל יישום אינטרנט (או ללמוד כיצד לעשות זאת).
4) CodeSandbox
CodeSandbox דומה לגליץ 'אבל קצת יותר מורכב ושלם. ל- CodeSandbox יש ממשק גמיש יותר להתאמה אישית, מאפשר לכם להפיץ אפליקציות אינטרנט שלמות, יש מרחב לשמירת קבצים ועושה את רוב העבודה הבסיסית, מה שמותיר למתכנת רק את המשימה של הכתיבה.
5) Repl.it
Repl.it הוא סביבת פיתוח לבדיקת סוגים שונים של שפות תכנות כמו Python עם תמיכה בקוד קדמי וקוד אחורי, היא מאפשרת להפיץ אתרים ואפליקציות, יש לה אינטגרציה עם GitHub וממשק אינטואיטיבי. זה אולי קצת קשה מדי לכל מי שרק מנסה לתכנן דפי אינטרנט, אבל עבור מתכנתים שכבר מנוסים זה משאב שיש לקחת בחשבון. אם אתם מתכננים רק חזיתית או אם אתם חדשים בקוד, אך אם אתם מתכננים הכל באופן קבוע, כדאי לבחון זאת.
6) Liveweave הוא עורך אתרים הדומה מאוד ל- JSFiddle, איתו ניתן לכתוב ולבדוק קוד לשימוש באתרים, עם פונקציונליות תצוגה מקדימה חיה, רמזי קוד ל- HTML5, CSS3, JavaScript ו- jQuery ומאפשר להוריד את הפרויקט כקובץ. zip. אתה יכול גם להוסיף ספריות חיצוניות כמו jQuery, AndgularJS, Bootstrap די בקלות.
7) CodeSandbox הוא מרחב מקוון בחינם בו תוכלו להתחיל פרויקטים של אפליקציות אינטרנט באמצעות מסגרות שונות, כמו React, Vue, Angular ועוד.
8) StackBlitz הוא עורך יישום ג'אווה סקריפט מצוין, התומך במסגרות שונות כמו Vue ו- React.
9) להבות, אתר מינימליסטי, מושלם לביצוע בדיקות מהירות.
10) JSBin, גרסה מינימליסטית יותר של JSFiddle, לכתוב קוד דף אינטרנט ולראות איך הוא נראה.
11) CSSDeck הוא אתר פשוט לבדיקת כמה רעיונות בסיסיים ל- HTML / CSS ו- JS.
12) ICECoder, סביבה מקוונת נוספת לבדיקת קוד, המחייבת להוריד תוכנה הפועלת בדפדפן וניתן להשתמש בה גם במצב לא מקוון.
13) Plunker, כלי חזיתי המאפשר לכתוב קוד, קבצים ודפי אינטרנט ולשמור אותם ב- Github.
14) Scrimba הוא שילוב חדשני של עורך וידאו וקוד המהווה סביבת למידה מושלמת עבור סטודנטים ומי שרוצה ללמוד.
15) WebMaker, יוצר יישומי אינטרנט עם פונקציונליות לא מקוונת ואינטגרציה עם CodePen.
16) דאבל, לנסות ולכתוב קוד HTML / CSS / JS עם גרפיקה נחמדה ומתקן אוטומטי לקוד CSS.
17) PlayCode הוא גם סביבה לבדיקה בזמן אמת של קוד HTML / CSS / JS.
19) JSItor היא אלטרנטיבה נוספת ל- Codepen ו- JSFiddle, שם ניתן לכתוב קוד על ידי שילוב HTML, CSS ו- Javascript ולראות מיד את התוצאה.
קרא גם: אתרים ללימוד תכנות באמצעות משחק עם קורסים ואתגרים אינטראקטיביים
אלה אינם עורכי קוד פשוטים, אלא מקומות בהם תוכלו לבדוק את תכנותיכם מבלי לדאוג לטעות ולגלות במהירות היכן נמצאות השגיאות. Codepen ו- JSFiddle הם שני האתרים הפופולריים ביותר בקטגוריה זו, אך יש גם אלטרנטיבות רבות.
קרא גם: שפות תכנות עיקריות המשמשות לאפליקציות ואתרים
אתרים לבחינת קוד מקוון
1) קוד פן
CodePen הוא האתר הפופולרי ביותר ומשמש מתכנתים מכיוון שהוא בחינם, אינטואיטיבי ונוח לשימוש. לאחר שהפכת לסטנדרט בעולם המתכנתים, פשוט חפש בגוגל כדי למצוא דפים שכבר נערכו על ידי Codepen ובדוק מיד אם זה מה שחיפשת. חלונות הצפייה הגמישים והביצוע המיידי של הקוד הכתוב הופכים אותו למושלם מספיק לנסות אנימציות JavaScript ו- CSS, יתר על כן הוא יכול להתחבר בקלות לסקריפטים חיצוניים (React, Vue וכל דבר אחר שניתן להשיג באמצעות CDN).
CodePen ראוי למקום הראשון בקטגוריה זו, עם זאת, חלק מהתכונות בתשלום, כגון קידוד שיתופי ותצוגות חיות של עמוד מלא (צפיות חי חלקיות הן בחינם).
2) JSFiddle
במקום השני (אם כי כרונולוגית הוא אחד העתיקים ביותר) בעולם האתרים לכתיבה ולניסיון של קוד תכנות הוא JSFiddle, שמכוון מעל לכל ליצירה ובדיקה של JavaScript. ניתן להשתמש בו גם עבור HTML ו- CSS ומאחר שהוא תומך בטיפים להשלמת קוד ויכול להיות שעדיף על קוד פן עבור פחות מנוסים.
נקודה גדולה לטובת JSFiddle היא שהיא מציעה מצב שיתוף פעולה בחינם (כולל צ'אט קולי וטקסט), כך שתוכלו לעבוד על הקוד בו זמנית עם אנשים אחרים.
3) גליץ '
אתרי קוד רבים מאפשרים לקודד HTML / CSS / JS וליצור דפי אינטרנט סטטיים, ואילו גליץ ' מציע שטח אחסון פנוי קטן לחיסכון בפרויקטים ומקלה על ביצוע קוד בצד השרת Node.js. אתה יכול לתכנת בשיתוף פעולה עם גליץ ',
זה מגיע גם עם מספר תכונות פנטסטיות אחרות: קידוד שיתופי, בקרת גרסאות, משאבי למידה רבים, אינטגרציה טובה עם GitHub, הטמעה קלה, קהילה לבקש עצה, פרויקטים שכבר עשויים לשנות או להשתמש בחופשיות ואת שילוב Visual Studio. זוהי דרך נהדרת, מהירה וקלה להפעיל יישום אינטרנט (או ללמוד כיצד לעשות זאת).
4) CodeSandbox
CodeSandbox דומה לגליץ 'אבל קצת יותר מורכב ושלם. ל- CodeSandbox יש ממשק גמיש יותר להתאמה אישית, מאפשר לכם להפיץ אפליקציות אינטרנט שלמות, יש מרחב לשמירת קבצים ועושה את רוב העבודה הבסיסית, מה שמותיר למתכנת רק את המשימה של הכתיבה.
5) Repl.it
Repl.it הוא סביבת פיתוח לבדיקת סוגים שונים של שפות תכנות כמו Python עם תמיכה בקוד קדמי וקוד אחורי, היא מאפשרת להפיץ אתרים ואפליקציות, יש לה אינטגרציה עם GitHub וממשק אינטואיטיבי. זה אולי קצת קשה מדי לכל מי שרק מנסה לתכנן דפי אינטרנט, אבל עבור מתכנתים שכבר מנוסים זה משאב שיש לקחת בחשבון. אם אתם מתכננים רק חזיתית או אם אתם חדשים בקוד, אך אם אתם מתכננים הכל באופן קבוע, כדאי לבחון זאת.
6) Liveweave הוא עורך אתרים הדומה מאוד ל- JSFiddle, איתו ניתן לכתוב ולבדוק קוד לשימוש באתרים, עם פונקציונליות תצוגה מקדימה חיה, רמזי קוד ל- HTML5, CSS3, JavaScript ו- jQuery ומאפשר להוריד את הפרויקט כקובץ. zip. אתה יכול גם להוסיף ספריות חיצוניות כמו jQuery, AndgularJS, Bootstrap די בקלות.
7) CodeSandbox הוא מרחב מקוון בחינם בו תוכלו להתחיל פרויקטים של אפליקציות אינטרנט באמצעות מסגרות שונות, כמו React, Vue, Angular ועוד.
8) StackBlitz הוא עורך יישום ג'אווה סקריפט מצוין, התומך במסגרות שונות כמו Vue ו- React.
9) להבות, אתר מינימליסטי, מושלם לביצוע בדיקות מהירות.
10) JSBin, גרסה מינימליסטית יותר של JSFiddle, לכתוב קוד דף אינטרנט ולראות איך הוא נראה.
11) CSSDeck הוא אתר פשוט לבדיקת כמה רעיונות בסיסיים ל- HTML / CSS ו- JS.
12) ICECoder, סביבה מקוונת נוספת לבדיקת קוד, המחייבת להוריד תוכנה הפועלת בדפדפן וניתן להשתמש בה גם במצב לא מקוון.
13) Plunker, כלי חזיתי המאפשר לכתוב קוד, קבצים ודפי אינטרנט ולשמור אותם ב- Github.
14) Scrimba הוא שילוב חדשני של עורך וידאו וקוד המהווה סביבת למידה מושלמת עבור סטודנטים ומי שרוצה ללמוד.
15) WebMaker, יוצר יישומי אינטרנט עם פונקציונליות לא מקוונת ואינטגרציה עם CodePen.
16) דאבל, לנסות ולכתוב קוד HTML / CSS / JS עם גרפיקה נחמדה ומתקן אוטומטי לקוד CSS.
17) PlayCode הוא גם סביבה לבדיקה בזמן אמת של קוד HTML / CSS / JS.
19) JSItor היא אלטרנטיבה נוספת ל- Codepen ו- JSFiddle, שם ניתן לכתוב קוד על ידי שילוב HTML, CSS ו- Javascript ולראות מיד את התוצאה.
קרא גם: אתרים ללימוד תכנות באמצעות משחק עם קורסים ואתגרים אינטראקטיביים
