„FrontEnd Development“: „CodePen“ ar „Sublime“ tekstas?

„CodePen“ ar didingas tekstas?
„CodePen“ ar „Sublime“ tekstas? Jei kalbėsime apie žiniatinklio programavimą, HTML, CSS ir „JavaScript“ pavadinimas mums pasirodys iškart. Yra keli būdai ten patekti. Net, jei atidarome bloknotą, galime pradėti dirbti rašydami „html“. Tiesa, kad pamatytumėte to, ką programuojate, rezultatą iš padėklo, jums reikės sunkios procedūros, kad pastebėtumėte pažangą.

Šios svetainės yra pagrindinės žaidimų aikštelės, skirtos programų kūrėjams dienos vartotojams. Norėdami sužinoti daugiau apie šių programų pranašumus ir trūkumus, šiame straipsnyje juos nuodugniai išanalizuosime (bent jau viską, ką žinome). Kaip aš visada sakau, tikrai kai kurie iš jūsų čia daugiau žino šią temą. Jei taip, pakomentuokite viską, kas čia mūsų išvengia. Mes mielai diskutuosime!

Šiandien mes analizuosime „CodePen“, „JSBin“, „Plunkr“, didingus, CSSDeck, Dabblet ir LiveWeave. Kurie yra geriausiai žinomi ir šioje aplinkoje dažniausiai naudojami įrankiai. Žinoma, jų yra ir daugiau.

Visiems, kurie nežinote, kas yra „FrontEnd“ ar „BackEnd“, paaiškinkime šiek tiek. „Front-End“ arba sąsaja yra vaizdinė dalis, kurią naršantis vartotojas galės pamatyti žiniatinklyje. „BackEnd“ bus ta dalis, kurią valdo svetainės administratorius. Programuojant, jei įvesite kodą per įrankį, kuris vienu metu rodo rezultatą, tai bus vadinama „front-end“.

„CodePen“

Daugeliui išsamiausias įrankis iš visų, apie kuriuos kalbame. Naudojamas kaip žiniatinklio įrankis, kuris yra arčiausiai bendruomenės, rodantis jūsų darbą. Savotiškas Youtube nuo programuotojo. Čia galite pamatyti programuotojų, susijusių su žiniatinkliu, darbą ir susisiekti su jais, jei susidomėjote, pamatyti jų profilį, sekti juos tinkluose ir net užsiprenumeruoti jų kanalą, kad galėtumėte peržiūrėti visus būsimus jų projektus.

Turinio, palaikymo ir sparčiųjų klavišų pristatymas

„CodePen“ pristatymas yra pats įdomiausiasNes vos keliais paspaudimais galite iš karto atlikti procesą. Labai gerai atskirtos html, css ir javascript eilutės. Be vizualinės dalies, kurią galite kirsti aukštyn ir žemyn, kad aiškiai matytumėte savo pažangą. Taip padedant gerai atskirti kiekvieną kalbą. Kažkas, kas praverčia naujesniems programuotojams.

Jūsų žiniatinklio palaikymas, daro jį lengviau pakeliamą, kai norite pradėti naudoti tai, ko iš tikrųjų nelabai žinome. Tai nereiškia, kad jums geriau, tai priklauso nuo mūsų poreikių. Bet taip, šiek tiek geriau pažinti aplinką prieš įsipareigojant ką nors įdiegti „nežinomos“ kilmės kompiuteryje.

Jei esate iš tų, kurie įpratę naudoti casi dirbant klaviatūra, „CodePen“ jums bus nuostabi. Reikia kitų įrankių papildiniai kad galėtumėte naudoti sparčiuosius klavišus, kad užpildytumėte aplinką. Dėl to darbas tampa šiek tiek nepatogesnis (nors toks pat veiksmingas jį įdiegus). CP. standartiškai integruoja sistemą, kuri privers užpildyti tas pačias kodo eilutes, kurios kartojasi, nes tai gali būti sąraše. Jūs rašote, kaip norite, kad sąrašas būtų rodomas, ir spustelėkite skirtuką.

„Pro“ versija taip pat leidžia daug daugiau variantų už 9,00 EUR už pagrindinį paketą kainą iki 29,25 € už „Super“ paketą. Galimybė vienu metu atnaujinti keliuose įrenginiuose tai, ką darome viename. Taip pat bendradarbiavimo būdas, „mokytojo režimas“ ir kt. Naudokitės, jei norite čia.

„JSBin“

JSBin yra įrankis, kurį galėtume kvalifikuoti kaip tiesioginį. Kadangi, patekę į jo žiniatinklio domeną, jis bus pasirengęs nedelsdamas pradėti rengti kitą projektą. Ir nors pirmasis jo pastatymas nėra labai patrauklus, jis yra patogus.

„JSBin“ yra paprastas, pagrindinė struktūra sukurta HTML formatu, kad nebūtų gaištamas laikas. Norėdami užbaigti darbą, įsiterpsite tarp skirtingų kalbų. Pirmiausia yra HTML, tada CSS, „Javascript“ ir galiausiai jūsų darbas vizualiai. Nors atrodo sunkiau, nieko neįdiegę turėsite tos pačios rūšies sparčiuosius klavišus. Tiesiogiai iš naršyklės.

Tačiau man buvo nepatogu teisingai peržiūrėti kodą, kai jis paslėptas dėl tolesnių stulpelių. Kadangi su nešiojamuoju kompiuteriu turite atsisakyti arba nusileisti Trackpad ir tai nėra labai skysta.

Ją sudaro tik dvi nemokamos arba mokamos įmokos. Tai yra šiek tiek brangiau nei „CodePen“, nors jei mokate jį kasmet, tai yra pelningiau, jei galite sumokėti 120 eurų.

CSSD deklas

CSSD deklas
Rygos darbo aplinka CSSD deklas skiriasi nuo aukščiau matyto. Padalintas tik į du stulpelius („Visual-code“), CSSDeck veikia 3 eilutėmis žemyn, kuriomis skirstomi skirtingi kalbos tipai. Su pristatymu socialinio tinklo forma ir švaresne darbo aplinka, šviesiomis spalvomis. Tai atrodo paprasta priemonė. Nors kartais tai nereiškia, kad tai neigiama.

Kai sukurta daugiau nei šešiasdešimt tūkstančių registruotų vartotojų ir sukurta daugiau nei du šimtai penkiasdešimt tūkstančių projektų, ieškoti ir rasti tai, ko norite, nebus sunku. Kalba, kaip visada, jei tai gali sukelti nepatogumų tiems, kurie nemoka anglų kalbos, tačiau šioje kalboje socialinis tinklas Vaizdas yra labai svarbus, todėl nemanau, kad tai didelis iššūkis.

Plunkr

Plunkr tai mažiausiai patraukli priemonė, su kuria susidūriau iki šiol. Pristatymas sutelktas žinutėmis ir vaizdų trūkumu. Turinio įkėlimas yra lėtas ir iš pirmo žvilgsnio nėra labai naudingas. Be to, užsakant pagal datą bet koks tvarkaraštis, kad ir koks paprastas, gali būti pirmoje pozicijoje. Norėdami pamatyti ką nors įdomesnio, turėtumėte pereiti į skirtuką, kuriame sakoma: «Labiausiai žiūrimi«. Tai yra, jei dar neišvertėte „Google“.

Taip pat pasakykite, kad pagal internetą jie yra 1.0.0 versijoje. Taigi tai šiek tiek paaiškina dizainą, pristatymą ir galimas klaidas, kurias pastebite naršydami internete.

Kaip pranašumas, jei pritrūksite idėjų, jums nereikės palikti ar atidaryti kito „Plunkr“ skirtuko, nes tiesiai iš dešinės šoninės juostos galite vaikščioti su kitais projektais ir juos iškart peržiūrėti. Tai palengvins greitų idėjų rinkimą ir pritaikymą savo projektui tuo pačiu metu.

Dabletas

Dabletas tai yra paprastas įrankis, jūs einate ir kuriate. Nors galite užsiregistruoti ir turėti savo vartotojo vardą per „GitHub“, tai nėra kažkas, kas labai išsiskiria žiniatinklyje. Kai fonas yra nuo geltonos iki raudonos gradiento, vaizdinėje dalyje ir baltas fonas kodo dalyje (kaip įprasta), pateikiamas „Dabblet“ projektas, nors jį galite pakeisti skirtuke CSS. Man geriau, kad jis būtų tuščias, nes to gradiento mažai kas suteikia gyvenimas a

Redaguodami galite sukonfigūruoti matomus skirtukus lengvai. Net jei norite pereiti prie stulpelių ar eilučių, kad būtų patogiau žiūrėti, atsižvelgiant į redaguojamą asmenį. Šrifto dydžio keitimas, išsaugojimas kaip anonimas neregistruojant ar nepatvirtinant HTML kodo yra daugiau galimybių, kurias „Dabblet“ siūlo iš pirmo žvilgsnio. Nors pasirinkčiau ne pirmą variantą, galbūt į tai reikės atsižvelgti būsimose versijose, jei jos bus atnaujintos.

Vienas iš dalykų, kuris man patiko mažiausiai, bet kuris gali patikti puikiems programuotojams, yra tas jūs negalite pažymėti etiketės lentele ir leisti jai pačios parašyti. Tai yra, įdėkite HTML ir spustelėkite skirtuką ir automatiškai parašykite „html“ ir „/ html“. Kažkas, kad kitose programose, jei tai bus padaryta.

„LiveWeave“

gyvas pynimas
„LiveWeave“ Jis labai panašus į kitus, neturi nieko, ko kiti negalėtų pasiūlyti naudingumo požiūriu. Ką mes akcentuojame šiame projekte, yra jo dizainas, tamsi spalva panaši į „CodePen“, bet su kvadratiniu paskirstymu. Galimybė pakeisti dydį paragauti. Taip pat yra aiškus režimas ir «neprisijungęs« kur jūsų redaguojamas kodas nebus rodomas vaizde, kol jo neaktyvinsite. Tai nėra funkcija, kuri jums atrodo labai naudinga, nes jūs, kaip dizaineris, svarbu visada pamatyti, ką redaguojate realiuoju laiku, tačiau kažkas tikrai ras jums tam tikrą naudojimą. Nors, kaip visada, galite užsiregistruoti, vartotojas neturi pagrindinio vaidmens. Kadangi, net ir nesiregistruodami, galite išsaugoti savo projektą.

Sublime Tekstas

Šis įrankis jis visiškai skiriasi nuo to, ką matėte iki šiol analizuojant. „Sublime Text“ nėra kaip interneto šaltinis, bet kaip programa. Viena vertus, tikrai naudingiau jį turėti darbalaukyje. Ypač dėl galimų interneto gedimų ar užšalimų dėl pertekliaus ir galimo darbo praradimo. Kita vertus, tai nėra tokia vizuali priemonė kaip ankstesnės. Be to, neturi galimybės bendruomenei dalytis projektais.

Čia viskas yra nuo nulio. Norėdami įdėti kodo eilutes ir pervardyti jas, kad žinotumėte, kuri yra, turite sukurti skirtukus. Jei pirmasis yra HTML, antrasis CSS .. arba atvirkščiai. Ji taip pat neturi nuorodų, kokia ji bus visiškai rankiniu būdu, išskyrus kabutes.

Išvada

Visos programos yra panašios su tam tikrais asmeniniais kiekvienos įmonės bruožais, dėl kurių jose yra privalumų ir trūkumų. Kiekvienas išsirinks sau tinkamiausią, mano rekomendacija yra naudoti „CodePen“ arba „CSSDeck“ aplinkai ir jos valdomam socialiniam tinklui. Bet jei dar labiau patiko, palikite komentarą ir paaiškinkite priežastis, jos tikrai bus naudingos.


Straipsnio turinys atitinka mūsų principus redakcijos etika. Norėdami pranešti apie klaidą, spustelėkite čia.

Būkite pirmas, kuris pakomentuos

Palikite komentarą

Jūsų elektroninio pašto adresas nebus skelbiamas. Privalomi laukai yra pažymėti *

*

*

  1. Atsakingas už duomenis: Miguel Ángel Gatón
  2. Duomenų paskirtis: kontroliuoti šlamštą, komentarų valdymą.
  3. Įteisinimas: jūsų sutikimas
  4. Duomenų perdavimas: Duomenys nebus perduoti trečiosioms šalims, išskyrus teisinius įsipareigojimus.
  5. Duomenų saugojimas: „Occentus Networks“ (ES) talpinama duomenų bazė
  6. Teisės: bet kuriuo metu galite apriboti, atkurti ir ištrinti savo informaciją.