ארבעטן אויף אַ קאָמפּלעקס פּרויעקט, צי איר זענט אַ יקספּיריאַנסט פּראָגראַמיסט אָדער אַ פרעשמאַן, איר וועט כּמעט מסתּמא טרעפן פּראָבלעמס. ווען איר שפּאַלטן דיין פּרויעקט אין פילע מאַדזשולז, ישוז אויפשטיין, מאכן עס מער שווער צו שפּור אַראָפּ ערראָרס און געפֿינען סאַלושאַנז. אין אנדערע צושטאנדן, דיבאַגינג יחיד ינסטאַנסיז קען זיין שווער ווייַל איר האָט נישט דיסקאַווערד די געהעריק לייזונג צו דעם פּראָבלעם איר האָט ארבעטן אויף.
עס אויך אַקערז ווי אַ שטיק פון קאָד ביי געלעגנהייט, וואָס קען קוקן קאָמפּליצירט אין דער צייט. דזשאַוואַסקריפּט איז איינער פון די וועב-באזירט שפּראַכן וואָס איז גאָר פּשוט צו לערנען. פשוט קאַטער דיין דעסקטאַפּ בלעטערער און נאַוויגירן צו דעוועלאָפּער מכשירים (יוזשאַוואַלי F12), און איר זענט פאַרטיק! איר קענט עקספּערימענט מיט JS אָן איר דאַרפֿן צו ינסטאַלירן אָדער לויפן קיין קאָמפּליצירט ווייכווארג.
צו אָנהייבן, אַלע איר דאַרפֿן איז אַ בלעטערער. עס איז ווונדערלעך צו האָבן אַלע דעם פּאַשטעס רעכט אויס פון די קעסטל, אָבער עס זענען מאל ווען איר דאַרפֿן מער. פֿאַר בייַשפּיל, רעכן איר ווילן צו עקספּערימענט מיט אַ נייַע וועב אַפּי וואָס איר האָט לעצטנס דיסקאַווערד אָבער טאָן נישט וועלן צו אָנהייבן אַ נייַע פּרויעקט.
אין דעם פּאָסטן, מיר וועט פאַרגלייַכן און קאַנטראַסט די דריי מערסט פאָלקס JS פּלייגראַונדז, CodePen, CodeSandbox און StackBlitz. לאמיר אנהייבען!
קאָדעקס
פראָנטענד וועב אַנטוויקלונג מכשירים זענען שטענדיק יוואַלווינג, און טעקסט רעדאקציע זענען אַ גרויס קאָמפּאָנענט פון די לעצטע טעקנאַלאַדזשיז וואָס מאַכן אַ דעוועלאָפּער ס לעבן סימפּלער. אַחוץ סטאַנדאַלאָנע טעקסט רעדאקציע אַזאַ ווי Atom אָדער Notepad ++, עס איז געווען אַ יקספּלאָוזשאַן פון בלעטערער-באזירט רעדאקציע אין די לעצטע יאָרן וואָס טאָן ניט דאַרפן פּראָגראַם ינסטאַלירונג און העכערן מיטאַרבעט.
CodePen איז אַן "אָנליין קהל פֿאַר טעסטינג און פּריזענטינג באַניצער-באשאפן HTML, CSS און דזשאַוואַסקריפּט קאָד סניפּאַץ" וואָס אָפפערס פאַנטאַסטיש אַפּערטונאַטיז צו לערנען ווי צו שרייַבן פראָנטענד וועב זייַטלעך בעסער.
CodePen גיט איר צוויי "מאָדעס." דער ערשטער און מערסט קאַמאַנלי געניצט איז די פּען. עס איז אַזוי פּשוט ווי קליקינג אַ קנעפּל און זיין טראַנספּאָרטאַד רעכט צו דער רעדאַקטאָר. פֿון דאָרט איר קענען אַקסעס אַ פאָרויסיקע ווייַזונג טאַפליע און יקערדיק HTML, CSS און JS עדיטינג פֿענצטער.
עס איז קיין "טעקע סיסטעם," "ינטעלליסענסע," אָדער עפּעס אַנדערש - נאָר פּשוט סינטאַקס כיילייטינג און שנעל קאַמאַנדז ווי פּריטיפיי. אין די אָפּציעס קוויטל, איר קענט אויסקלייַבן פון אַ ריסטריקטיד קייט פון פּרעפּראַסעסערז פֿאַר אַלע דריי שפּראַכן (אַזאַ ווי TypeScript פֿאַר JS) אָדער לייגן קאַנעקשאַנז צו פונדרויסנדיק קוואלן.
אויב איר נאָר דאַרפֿן עפּעס געטאן פֿאַר פריי, איינער פון די רעדאקציע וועט זיין גענוג. איך וואָלט פֿאָרשלאָגן CodePen פֿאַר עפּעס וואָס טוט נישט דאַרפן אַ פּלאַץ פון סעטאַפּ אָדער לייברעריז - פשוט HTML, CSS און JS מיט אַפּשאַנאַל פאַר-פּראַסעסערז אויף שפּיץ. אויב איר ווילן צו נוצן די שפּילפּלאַץ צו פֿאַרבעסערן דיין בייַזייַן אויף געזעלשאַפטלעך מידיאַ אָדער אַנטוויקלען אַ פערזענלעכע פּאָרטפעל, CodePen איז אַ בעסער אָפּציע.
פּרעמיע ווערסיע
איר האָבן אַ ביסל מער אַלטערנאַטיוועס צו אויסקלייַבן אויף CodePen. אויב איר באַצאָלן אַניואַלי, איר קענען באַקומען איינער פון דריי פּרעמיע פּלאַנז פֿאַר $ 12, $ 19 אָדער $ 39 יעדער חודש. איר קענט שאַפֿן אַ ינפאַנאַט נומער פון פּריוואַט פּענס, אַרטיקלען און זאַמלונגען אויף קיין פון די דריי לעוועלס.
איר וועט אויך באַקומען די פּראָ אָפּצייכן (אַ געזעלשאַפטלעך בוסט), אַקסעס אין לעבן מיטאַרבעט מאָדע, קיין גאַנצע און מער. עס זענען אויך זיכער מאַנשאַפֿט-ספּעציפיש סטראַטעגיעס און אנדערע קרייַז-ריי דיסטינגקשאַנז. קוק זייער באַאַמטער בילינג באָרד פֿאַר מער אינפֿאָרמאַציע.
שליסל פֿעיִקייטן
חוץ קריייטינג HTML, CSS און דזשאַוואַסקריפּט אין CodePen, עס זענען עטלעכע מער טינגז וואָס שטעלן עס באַזונדער.
- פאַקטיש-צייט וויוינג פון דיין קאָד איז מעגלעך. עס טוט נישט דאַרפן זאַמלונג.
- עקספּערימענטינג אַלאַוז איר צו לערנען נייַע טינגז.
- שאַפֿן קליינטשיק פּרובירן קאַסעס צו קוקן פֿאַר און אַדרעס פּראָבלעמס.
- ווייַזן דיין ווונדערלעך ווערק.
- שאַפֿן און קראָם פּענס פֿאַר שפּעטער נוצן.
- פּרוּווט די קאָד פון אנדערע דעוועלאָפּערס און זען עס אין קאַמף.
אַדוואַנטאַגעס
- צו אָנהייבן, עס איז קיין פּרייַז.
- געבויט-אין לערנען רעסורסן.
- מיטאַרבעטן מיט אנדערע און פאַרגלייַכן פּראַדזשעקס צו זען ווו זיי קענען גיין אין דער צוקונפֿט.
- די וי איז פּשוט צו נוצן און סטרייטפאָרווערד.
דיסאַדוואַנטידזשיז
- די קאָד ביבליאָטעק איז קליין, אַוטאָ-קאָד קאַמפּלישאַן איז ינאַדאַקוואַט. עס איז נאָר גוט פֿאַר איין-בלאַט פּראַדזשעקס און קענען נישט שעפּן עפּעס ביגער.
- אויף CodePen, איר קענען מאַכן פּריוואַט פּענס, אָבער איר וועט דאַרפֿן צו אַפּגרייד צו אַ פּראָ מיטגלידערשאַפט ($ 9 / חודש).
קאָדעקסאַנדבאָקס
CodeSandbox איז אַ וועב-באזירט קאָד רעדאַקטאָר. עס אָטאַמייץ טראַנספּירינג, פּאַקקאַגינג און דעפּענדענסי פאַרוואַלטונג פֿאַר איר, אַלאַוינג איר צו בויען אַ נייַע פּרויעקט מיט אַ איין גיט. נאָך איר האָבן באשאפן עפּעס פאַסאַנייטינג, איר קען טיילן עס מיט אנדערע דורך פשוט טיילן דעם וועבזייטל.
דער רעדאַקטאָר איז קאַמפּאַטאַבאַל מיט קיין דזשאַוואַסקריפּט פּראַדזשעקס, כאָטש עס ינקלודז זיכער רעאַקט-ספּעציפיש פֿעיִקייטן, אַזאַ ווי די אָפּציע צו ראַטעווען די פּרויעקט אין אַ שאַפֿן-רעאַגירן-אַפּ מוסטער.
יעדער פּרויעקט איר בויען אין קאָדעסאַנדבאָקס הייבט מיט אַ מוסטער. עס קענען אָדער פאַרבינדן צו אַ ספּעציפיש ביבליאָטעק, פריימווערק אָדער רונטימע (אַרייַנגערעכנט Node.js) אָדער נוצן פשוט נאָרמאַל וועב טעקנאַלאַדזשיז. נאָך סעלעקטינג אַ מוסטער, איר וועט זיין געשיקט צו דער רעדאַקטאָר, ווו איר וועט געפֿינען אַלע די נייטיק טעקעס און די פאָרויסיקע ווייַזונג פֿענצטער איז שוין אָפֿן.
איר האָט אַקסעס צו אַ "טעקע סיסטעם" אין אַלע סאַנדבאָקסעס, וואָס מיטל איר קענען שאַפֿן נייַע טעקעס, נוצן מאַדזשולז (אַרייַנגערעכנט NPM פּאַקאַדזשאַז) און ינטעראַקט מיט סטאַטיק אַסעץ. עס איז אויך די געלעגנהייט צו מאָדיפיצירן די מוסטער-ספּעציפיש קאַנפיגיעריישאַן טעקעס.
איר קען אפילו בויען דיין אייגענע טעמפּלאַטעס פֿאַר דיין יינציק נוצן-פאַל, גאַנץ מיט טעקע סטרוקטור און דיפּענדאַנסיז, פיל ווי אין אַ IDE. ווייַל די געצייַג איז לינגקט צו Github, איר קענען געשווינד דזשענערייט קאַמיץ און עפֿענען פּרס. איר קענט גלייך צעוויקלען דיין אַפּלאַקיישאַן צו ZEIT אָדער Netlify.
קאָדעסאַנדבאָקס מאַנשאַפֿט פּראָ
CodeSandbox, אַ האָלענדיש געשעפט וואָס אַלאַוז דעוועלאָפּערס צו בויען אַ בלעטערער-באזירט וועב אַפּ אַנטוויקלונג זאַמדקאַסטן, האט אַפישאַלי באפרייט אַ מיטאַרבעט פּלאַטפאָרמע וואָס אַלאַוז טימז צו אַרבעטן אויף קאָד אין די וואָלקן. די נייַע פּראָדוקט, Team Pro, איז אַ ניט-קאָד לייזונג געבויט פֿאַר גאַנץ פּראָדוקט טימז, ריינדזשינג פון דיזיינערז און מאַנאַדזשערז דורך קוואַליטעט אַשוראַנס (קאַ) טימז און ווייַטער.
פּראַדזשעקס זענען צוגעשטעלט אין אַ באַניצער-פרייַנדלעך צובינד פֿאַר ווער עס יז וואָס וויל צו מאַכן אָדער אָננעמען ענדערונגען צו אַ וועב אַפּלאַקיישאַן, ויסמיידן אָלטערנאַטיוו מעטהאָדס אַזאַ ווי שיקן הערות און רעקאַמאַנדיישאַנז צו דעוועלאָפּערס צו ויספירן די ענדערונגען, פאָרן זיי צוריק פֿאַר דיסקוסיע און איבערחזרן דעם פּראָצעס.
שליסל פֿעיִקייטן
- א וועב-באזירט קאָד רעדאַקטאָר און פּראָוטאַטייפּ געצייַג.
- פֿאַר היגע נוצן, אַ זאַמדקאַסטן קענען זיין דאַונלאָודיד לייכט אין אַ פאַרשלעסלען טעקע.
- פּראָגראַממינג איז געטאן אין זאַמדבאָקסעס, וואָס קענען זיין שערד מיט קאָוווערקערז.
אַדוואַנטאַגעס
- אַ ימפּרוווד באַניצער דערפאַרונג און מער קאָנטראָל איבער דער רעדאַקטאָר.
- די לעבן פאָרויסיקע ווייַזונג שטריך קענען זיין מאַדאַפייד און וויוד אין אַ באַזונדער פֿענצטער.
- דער קאָד איז אויטאָמאַטיש פאָרמאַטטעד און כולל אַ CLI (codesandbox-cli)
- שטיצן פֿאַר אַוואַנסירטע נפּם מאַדזשולז.
- פייַן טעות אַרטיקלען מיט רעקאַמאַנדיישאַנז.
- עס ימפּרוווז די דיבאַגינג דערפאַרונג דורך פּראַוויידינג אַ בעסער וואָקזאַל, פּרובירן צוקוקער און אַרויסגעבן צוקוקער.
דיסאַדוואַנטידזשיז
- דער סוף קאַנסומער איז יקספּאָוזד צו פילע פּערסאַנאַלאַזיישאַנז.
- שלעפּן און קאַפּ טעקעס פֿון אַ היגע קאָמפּיוטער טוט נישט אַרבעטן רעכט.
- א זיכער טעקע סטרוקטור מוזן זיין נאכגעגאנגען אין קאָדעסאַנדבאָקס.
- די פאַנגקשאַנאַליטי פון אַ פּריוואַט זאַמדקאַסטן איז בלויז בנימצא פֿאַר פּייטראַנז.
סטאַקקבליטז
StackBlitz איז אַ וויסואַל סטודיאָ קאָוד פּאַוערד אָנליין IDE פֿאַר וועב אַפּלאַקיישאַנז. די פּלאַטפאָרמע איז ווי אָפּרופיק און אַדאַפּטאַבאַל ווי די דעסקטאַפּ ווערסיע. StackBlitz איז אַן אָנליין IDE וואָס קומט פאַר-לאָודיד מיט ווינקלדיק און רעאַגירן אַנטוויקלונג מכשירים.
Thinkster.io האָט געבויט דעם פאַנטאַסטיש פּרויעקט צו מאַכן עס ווי פּשוט ווי מעגלעך צו אָנהייבן מיט דיין אַנגולאַר אָדער רעאַקט פּרויעקט אָן זאָרג וועגן די דעפּענדענסי ינסטאַלירונג אָדער בויען סעטטינגס. StackBlitz גיט אַ פּלאַץ פון אַמייזינג און יינציק פֿעיִקייטן וואָס קיין אנדערע אָנליין קאָד רעדאַקטאָר האט איצט. ווי אַ רעזולטאַט, עס איז ווערטיק צו פאָרשן StackBlitz ווייַטער און אַנטדעקן וואָס דעם אָנליין IDE האט צו פאָרשלאָגן.
Stackblitz איז גאָר פאַרגלייַכלעך צו די גאַנץ IDE, ספּעציעל אויב איר קענען נישט זאָגן זייַ געזונט צו VS קאָד ווייַל די געצייַג איז באזירט אויף עס. דער פּעקל האט אַ פאַרשיידנקייַט פון פֿעיִקייטן וואָס לאָזן איר צו אָנהייבן און פאָרזעצן צו שאַפֿן אַ פול-סטאַק אַפּלאַקיישאַן.
דער פּראָגראַם איז פּאַוערד דורך וויסואַל סטודיאָ, וואָס איז באַוווסט צווישן דעוועלאָפּערס. אָפפלינע עדיטינג איז די סטאַנדאַוט שטריך פון די פּרויעקט. צו מאַכן דעם מעגלעך, די Stackblitz מאַנשאַפֿט באשאפן אַן אין-בלעטערער וועבסערווער. ווען איר דרוקן, עס אויטאָמאַטיש ינסטאָלז דיפּענדאַנסיז, קאַמפּיילז, באַנדאַלז און איז הייס רילאָודינג.
פּרעמיע ווערסיע
קאַדעט, אַסטראָנאַווט און קאַמאַנדער זענען בארעכטיגט פֿאַר פריי, ריספּעקטיוולי $ 8 / חודש און $ 29 / חודש. אַסטראָנאַווט און קאַמאַנדער ינקלודז אַ נומער פון פֿעיִקייטן ווי אַנלימאַטאַד פּריוואַט פּראַדזשעקס, אַנלימאַטאַד טעקע ופּלאָאַדס, פאַרבעטן צו די סלאַקק קאַנאַל פון די האַרץ מאַנשאַפֿט, און אַזוי אויף. פֿאַר מער אינפֿאָרמאַציע, זען די באַאַמטער בילינג באָרד.
שליסל פֿעיִקייטן
- אַדינג NPM פּאַקאַדזשאַז צו דיין פּרויעקט.
- דאַנק צו אַ ראָמאַן אין-בלעטערער דעוו סערווער, איר קענען רעדאַגירן אָפפלינע.
- א כאָוסטיד אַפּ URL וואָס אַלאַוז אונדז צו אַקסעס (און טיילן) אונדזער לעבן אַפּ אין קיין צייט.
- אנדערע נאָוטאַבאַל וויסואַל סטודיאָ קאָוד פֿעיִקייטן אַרייַננעמען ינטעלליסענסע, פּראָיעקט זוכן (קמד / קטרל + פּ), גיין צו דעפֿיניציע, און אנדערע.
אַדוואַנטאַגעס
- Firebase ס קייפּאַבילאַטיז פֿאַר דיפּלוימאַנט.
- דער רעדאַקטאָר איז טאַקע גרינג צו נוצן און גאָר שנעל.
- יוזערז האָבן אַקסעס צו package.json, index.html און index.js.
- שאַרעאַבלע מקור קאָד וואָס קענען אויך זיין עמבעדיד.
- לעבן פאָרויסיקע ווייַזונג אויף אַ גרויס אָפּטיילונג פון די בלאַט, מיט די אָפּציע צו עפֿענען אויף אַ אַנדערש בלאַט אויב נייטיק.
- בשעת אָפפלינע, עדיטינג
- סמאַרט קאַמפּלישאַנז און ימפּרוווד ינטעלליסענסע.
- די האַרץ פון סטאַקקבליץ איז עפענען מקור.
דיסאַדוואַנטידזשיז
- איר טאָן ניט האָבן השפּעה אויף דעם בנין אָדער די דעוועלאָפּער סערווער ווייַל די זענען געראטן דורך די שאַפֿן-רעאַגירן-אַפּ באַפֿעל.
- אין רעאַקט, אַ פונדאַמענטאַל טעקע סטרוקטור זאָל זיין באמערקט.
- עס איז ניט מעגלעך צו פֿאָרמאַט קאָד אויטאָמאַטיש, כאָטש עס איז מעגלעך צו טאָן עס מאַניואַלי.
סאָף
נאָוואַדייַס, אַ קאָודינג שפּילפּלאַץ ווי די וואָס מיר האָבן געזען אויבן קען זיין געוויינט צו גאָר בויען קיין וועב פּרויעקט. עס איז ניט דאַרפֿן צו ינסטאַלירן קאַמבערסאַם IDEs אויף דיין פּיסי ווען איר קענען בויען, דיבאַגינג, פּרובירן און צעוויקלען גלייַך פֿון דיין וועב בלעטערער.
אין מיין מיינונג, StackBlitz וואָלט זיין בעסטער צווישן זיי ווייַל עס איז אַ וועב-באזירט IDE וואָס אַלאַוז דזשאַוואַסקריפּט, אַנגולאַר און אנדערע אַנטוויקלונג פראיעקטן רעכט אויס פון די קעסטל, מיט קיין נויט צו ינסטאַלירן קיין היגע אַנטוויקלונג ינווייראַנמאַנץ ווי Node.js, npm, אָדער ווינקלדיק. עס גיט די זעלבע דערפאַרונג ווי ניצן וויסואַל סטודיאָ קאָוד לאָוקאַלי. אין פאַקט, ווייַל StackBlitz איז געטריבן דורך וויסואַל סטודיאָ קאָוד, עס פילז ווי שנעל און ווערסאַטאַל ווי די דעסקטאַפּ ווערסיע.
וואָס פון CodePen, CodeSandbox און StackBlitz איז דיין גיין-צו געצייַג? לאָזן אונדז וויסן אין די באַמערקונגען.
אבאטיע
דאַנקען פֿאַר דעם גרויס אַרטיקל, אַמאָל איך געזען stackblitz.com, איך וויסן אַז דאָס איז וואָס איך ווילן.