FrontEnd Development: CodePen või Sublime Text?

CodePen või ülev tekst?

CodePen või Sublime Text? Veebiprogrammeerimisest rääkides tulevad kohe meelde nimed HTML, CSS ja JavaScript. Alustamiseks on mitu võimalust. Võite isegi avada tekstiredaktori ja hakata kirjutama "html" . Tekstiredaktoris oma koodi tulemuste nägemiseks on aga vaja mõnevõrra töömahukat protsessi, et märgata edusamme.

Need saidid on igapäevakasutajatele mõeldud rakenduste arendajate peamised mänguväljakud . Nende programmide eeliste ja puuduste kohta lisateabe saamiseks analüüsime neid selles artiklis põhjalikult (vähemalt kõike, mida me teame). Nagu ma alati ütlen, olen kindel, et mõned teist siin teavad selle teema kohta rohkem. Kui jah, siis palun kommenteerige midagi, mis meil siin kahe silma vahele on jäänud. Meile meeldiks seda arutada!

Täna analüüsime CodePeni, JSBini, Plunkrit, Sublime Texti , CSSDecki, Dabbletit ja LiveWeave'i. Need on selles keskkonnas tuntuimad ja enimkasutatavad tööriistad. Muidugi on neid veel.

Aga neile, kes ei tea, mis on FrontEnd või BackEnd, selgitame veidi. FrontEnd ehk liides on visuaalne osa, mida kasutaja veebisaidil näeb . BackEnd on osa, mida haldab saidi administraator. Programmeerimisel nimetatakse frontendiks seda, kui sisestate koodi tööriista kaudu, mis kuvab tulemust samaaegselt.

CodePen

Paljude jaoks on see kõigist neist, mida oleme arutanud, kõige põhjalikum tööriist . Veebiplatvormina kasutatuna on see kõige lähedasem kogukonnale oma tööde esitlemiseks – omamoodi YouTube programmeerijatele. Siin saate vaadata saidiga seotud programmeerijate töid, võtta nendega ühendust, kui olete huvitatud, vaadata nende profiile, jälgida neid sotsiaalmeedias ja isegi tellida nende kanaleid, et näha kõiki nende eelseisvaid projekte.

Sisu, tugi- ja kiirklahvide esitlus

CodePeni liides on kõige huvitavam aspekt , kuna saate protsessiga koheselt alustada vaid mõne klõpsuga. Sellel on selgelt eraldatud read HTML-i, CSS-i ja JavaScripti jaoks. Lisaks visuaalsetele elementidele saate koodi sirvida, et oma edusamme hõlpsalt näha, mis aitab teil keeli eristada. See on eriti kasulik algajatele programmeerijatele.

Selle veebitugi teeb asja lihtsamaks, kui soovid hakata kasutama midagi, millega sa pole eriti tuttav. See ei tähenda tingimata, et see kõigile parem on; see sõltub sinu vajadustest. Kuid see aitab sul keskkonnast paremini aru saada, enne kui otsustad oma arvutisse "tundmatust" allikast pärit faili installida.

Kui olete üks neist, kes on harjunud kasutama casi täiesti klaviatuur, kui töötate, on CodePen teie jaoks suurepärane. Muud tööriistad vajavad pluginad osata keskkonna täitmiseks kasutada klaviatuuri otseteid. See muudab töö veidi ebamugavamaks (kuigi sama tõhus, kui see on installitud). CP. integreerib standardina süsteemi, mis paneb teid täitma samu koodiridu, mida korratakse, nagu see võiks olla loendis. Kirjutate, kuidas soovite loendi kuvada, ja klõpsake vahekaarti.

Pro versioon lubab ka palju rohkem võimalusi hinnaga 9,00 eurot põhipaketi eest ja 29,25 eurot paketi “Super” eest. Võimalus samaaegselt mitmes seadmes värskendada seda, mida me ühes teeme. Samuti ühistu režiim, "õpetaja režiim" jne. Kasu, kui soovite siin.

JSBin

JSBin on tööriist, mida võib kirjeldada kui lihtsat . Kui olete selle veebisaidile ligi pääsenud, on see valmis viivitamatult oma järgmise projekti planeerimist alustama. Ja kuigi selle esialgne liides ei pruugi olla eriti ahvatlev, on see kasutajasõbralik.

JSBin on lihtne, HTML-is loodud põhistruktuur, et mitte aega raisata, põigite töö lõpuleviimiseks erinevate keelte vahel. Kõigepealt on HTML, seejärel CSS, Javascript ja lõpuks visuaalselt teie töö. Ja kuigi see tundub keerulisem, on teil sama tüüpi otseteed ilma midagi installimata. Otse brauserist.

Siiski leidsin, et koodi õigesti vaatamine on ebamugavam, kui see on selle taga olevate veergude taha peidetud. Sülearvutis tuleb puuteplaadiga üles või alla kerida , mis pole eriti sujuv.

Sellel on ainult kaks osamakse, tasuta või tasuline. See on natuke kallim kui CodePen, kuigi kui maksate seda aastas, on see tasuvam, kui saate maksta 120 eurot.

CSSDeck

CSSDeck

CSSDecki tööruum erineb varasemast . CSSDeck on jagatud vaid kaheks veeruks (kood ja visuaal) ning kasutab erinevat tüüpi keeli eraldamiseks kolme rida allpool. Sellel on sotsiaalvõrgustiku stiilis liides ja puhtam, heledamate värvidega tööruum. See tundub küll lihtsa tööriistana, aga see pole tingimata halb asi.

Rohkem kui kuuekümne tuhande registreeritud kasutaja ja enam kui kahesaja viiekümne tuhande loodud projektiga ei ole otsitava leidmine keeruline. Nagu ikka, võib keel olla takistuseks neile, kes inglise keelt ei oska, kuid see sotsiaalvõrgustik seab esikohale visuaalid, seega ma ei arva, et see suureks väljakutseks saab.

plunkr

Plunkr on seni kõige vähem meeldiv tööriist, millega olen kokku puutunud . Esitlus on sõnumitest pungil ja piltidest puudu. Sisu laadib aeglaselt ja pole esmapilgul eriti kasulik. Lisaks tähendab kuupäeva järgi sortimine seda, et ükskõik kui lihtne programm võib ülaosas kuvada. Huvitavamate asjade leidmiseks peate minema vahekaardile „ Enim vaadatud ”. See tähendab, et kui te pole seda veel Google'iga tõlkinud.

Samuti väärib mainimist, et veebisaidi andmetel on nad praegu versioonil 1.0.0. See selgitab mõningaid kujundusi, esitlusi ja võimalikke vigu, millega saidi sirvimisel kokku puutuda võib.

Lisaboonusena ei pea te ideede otsa saamise korral Plunkris lahkuma ega uut vahekaarti avama, kuna saate teisi projekte sirvida otse paremalt külgribalt ja neid koheselt vaadata. See teeb kiirete ideede kogumise ja nende kohese projektis rakendamise palju lihtsamaks.

Tupsuke

Dabblet on lihtne tööriist; logite sisse ja loote . Kuigi saate registreeruda ja konto luua GitHubi kaudu, pole see veebisaidil silmapaistev funktsioon. Dabbleti projekti visuaalses osas on kollasest punaseni gradienttaust ja koodiosas valge taust (nagu tavaliselt), kuigi saate seda CSS-i vahekaardilt muuta. Isiklikult eelistan hoida seda valgena, kuna gradient lisab vaid veidi visuaalset huvi .

Redigeerimise ajal saate hõlpsalt seadistada, milliseid vahekaarte näete . Mugavama vaatamiskogemuse saamiseks saate isegi veergude ja ridade vahel vahetada, olenevalt sellest, kes redigeerib. Fondi suuruse muutmine, anonüümne salvestamine ilma registreerimiseta ja HTML-koodi valideerimine on teised funktsioonid, mida Dabblet esmapilgul pakub. Kuigi see pole minu esimene valik, on see kindlasti midagi, mida tulevaste versioonide puhul kaaluda, kui neid uuendatakse.

Üks asi, mis mulle kõige vähem meeldis, aga mis võiks kogenud programmeerijatele meeldida, on HTML-i automaatse silti sisestamise võimaluse puudumine . Teisisõnu, te ei saa HTML-i sisestades vajutada tabulaatoriklahvi ja lasta "html" ja "/html" automaatselt sisestada. Seda pakuvad ka teised rakendused.

LiveWeave

eluspunumine

LiveWeave on väga sarnane teiste sarnaste programmidega; see ei paku funktsionaalsuse osas midagi sellist, mida teised ei paku. Selle projekti juures paistab silma disain: tume värviskeem, mis sarnaneb CodePeniga, kuid ruudukujulise paigutusega. Suurust saab vastavalt oma soovile reguleerida . Samuti on olemas hele režiim ja " võrguühenduseta " režiim , kus muudetud koodi ei kajastu visuaalselt enne, kui selle aktiveerite. See pole funktsioon, mida ma isiklikult eriti kasulikuks pean; disainerina on alati oluline näha, mida sa reaalajas muudad, aga keegi leiab sellest kindlasti kasu. Ja kuigi registreeruda saab, pole kasutajakogemus nagu alati peamine prioriteet. Isegi ilma registreerimata saate oma projekti salvestada.

Sublime Text

See tööriist on täiesti erinev kõigest, mida olete selles analüüsis seni näinud . Sublime Text ei ole veebiressurss, vaid rakendus. Ühelt poolt on see kindlasti kasulikum oma töölaual, eriti arvestades võimalikke internetikatkestusi või hangumisi, mis võivad tekkida liigsest kasutamisest ja töö kaotamisest. Teisest küljest pole see visuaalselt nii atraktiivne kui eelmised tööriistad. Lisaks puudub sellel projektide jagamiseks mõeldud kogukond.

Kõik algab siin nullist . Koodiridade paigutamiseks peate looma tabulaatorid ja need eristamiseks ümber nimetama. Näiteks kui esimene on HTML, siis teine ​​CSS või vastupidi. Samuti pole otseteid, seega toimub kõik täielikult käsitsi, välja arvatud jutumärgid.

Järeldus

Kõik programmid on sarnased, kusjuures iga ettevõte pakub oma unikaalseid nüansse, mis annavad neile eeliseid ja puudusi. Igaüks valib endale sobivaima. Soovitan kasutada CodePeni või CSSDecki nende kasutajasõbraliku liidese ja sotsiaalmeedia funktsioonide tõttu . Aga kui eelistate mõnda muud, jätke kommentaar ja põhjendage oma valikut; olen kindel, et need on abiks.


Lisa eelistatud allikana Google'is