פיתוח FrontEnd: CodePen או טקסט נשגב?

CodePen או טקסט נשגב?

CodePen או טקסט נשגב? אם אנחנו מדברים על תכנות אתרים, השם של HTML, CSS ו- JavaScript מגיע אלינו מיד. ישנן מספר דרכים להגיע לשם. אֲפִילוּ, אם נפתח פנקס רשימות נוכל להתחיל לעבוד בכתיבת "html". נכון שכדי לראות את התוצאה של מה שאתה מתכנת מתוך רפידה, תזדקק להליך מייגע כדי להבחין בהתקדמות.

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

היום אנו הולכים לנתח את CodePen, JSBin, Plunkr, נשגב, CSSDeck, Dabblet ו- LiveWeave. מהם הידועים ביותר והכלים הנפוצים ביותר בסביבה זו. יש כמובן יותר.

אבל עבור כל מי שלא יודע על מה FrontEnd או BackEnd, בואו נסביר קצת. ה- Front-End או הממשק הם החלק הוויזואלי שהמשתמש המנווט יוכל לראות באינטרנט. ה- BackEnd יהיה החלק שמנהל האתר שולט בו. בתכנות, אם תזין קוד באמצעות כלי שמציג את התוצאה בו זמנית, זה ייקרא front-end.

קוד פן

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

הצגת תוכן, תמיכה וקיצורי מקשים

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

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

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

גרסת ה- Pro מאפשרת גם אפשרויות רבות נוספות במחיר של 9,00 € לחבילה הבסיסית ועד 29,25 € לחבילת "סופר". היכולת לעדכן במספר מכשירים בו זמנית את מה שאנחנו עושים באחד. גם מצב שיתופי, "מצב מורה" וכו '. תרוויחו אם תרצו כאן.

JSBin

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

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

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

יש לו רק שני תשלומים, בחינם או בתשלום. זה קצת יותר יקר מקודפן, אם כי אם אתה משלם את זה מדי שנה, זה משתלם יותר אם אתה יכול לשלם 120 יורו.

CSSDeck

CSSDeck

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

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

פלונקר

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

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

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

קשקוש

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

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

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

LiveWeave

אריגה חיה

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

טקסט נשגב

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

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

מסקנה

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


השאירו את התגובה שלכם

כתובת הדוא"ל שלך לא תפורסם. שדות חובה מסומנים *

*

*

  1. אחראי לנתונים: מיגל אנחל גטון
  2. מטרת הנתונים: בקרת ספאם, ניהול תגובות.
  3. לגיטימציה: הסכמתך
  4. מסירת הנתונים: הנתונים לא יועברו לצדדים שלישיים אלא בהתחייבות חוקית.
  5. אחסון נתונים: מסד נתונים המתארח על ידי Occentus Networks (EU)
  6. זכויות: בכל עת תוכל להגביל, לשחזר ולמחוק את המידע שלך.