Pag-unlad sa FrontEnd: CodePen o Sublime Text?

CodePen o dakilang teksto?

CodePen o Sublime Text? Kung pag-uusapan natin ang tungkol sa web programming, ang pangalan ng HTML, CSS at JavaScript ay dumating sa amin kaagad. Mayroong maraming mga paraan upang makarating doon. Kahit kung magbubukas kami ng isang notepad maaari kaming makakuha upang gumana sa pagsusulat ng "html". Totoo na upang makita ang resulta ng kung ano ang iyong pinaprograma mula sa isang pad, kakailanganin mo ng isang matrabahong pamamaraan upang mapansin ang pag-unlad.

Ang mga site na ito ay ang pangunahing palaruan para sa mga developer ng application para sa mga gumagamit ng araw. Upang matuto nang higit pa tungkol sa mga pakinabang at kawalan ng mga programang ito, susuriin namin ang mga ito nang malalim sa artikulong ito (hindi bababa sa, lahat ng alam natin). Tulad ng lagi kong sinasabi, tiyak na ang ilan sa iyo dito ay higit na nakakaalam ng paksa. Kung gayon, magbigay ng puna sa lahat ng bagay na makatakas sa atin dito. Kami ay magiging masaya upang talakayin!

Ngayon ay susuriin namin ang CodePen, JSBin, Plunkr, kahanga-hanga, CSSDeck, Dabblet, at LiveWeave. Alin ang pinakamahusay na kilala at ang mga tool na pinaka ginagamit sa kapaligirang ito. Marami pa, syempre.

Ngunit para sa inyong lahat na hindi alam kung ano ang tungkol sa FrontEnd o BackEnd, magpaliwanag tayo nang kaunti. Ang Front-End o interface ay ang visual na bahagi na makikita ng user sa pag-navigate sa web. Ang BackEnd ay magiging bahagi na kinokontrol ng administrator ng site. Sa pag-program, kung naglalagay ka ng code sa pamamagitan ng isang tool na ipinapakita ang resulta nang sabay-sabay, tatawagin itong front-end.

CodePen

Para sa marami ang pinaka kumpletong tool sa lahat ng sinasabi natin. Ginamit bilang isang tool sa web na ang pinakamalapit na bagay sa isang komunidad upang maipakita ang iyong trabaho. Isang uri ng Youtube mula sa programmer. Sa ito, makikita mo ang gawain ng mga programmer na kaakibat ng web at makipag-ugnay sa kanila kung sakaling mayroon kang anumang interes, tingnan ang kanilang profile, sundin ang mga ito sa mga network at mag-subscribe din sa kanilang channel upang matingnan ang lahat ng kanilang mga susunod na proyekto.

Pagtatanghal ng nilalaman, suporta at mga keyboard shortcut

Ang pagtatanghal ng CodePen ay ang pinaka-kagiliw-giliwSapagkat sa kaunting pag-click lamang, magagawa mo agad ang proseso. Na may napakahusay na pinaghiwalay na mga linya ng html, css at javascript. Bilang karagdagan sa visual na bahagi, na kung saan maaari mong interperse pataas at pababa upang malinaw na makita ang iyong pag-usad. Sa gayon ay tumutulong upang makilala ang bawat wika nang maayos. Isang bagay na madaling gamitin para sa mga mas bagong programmer.

Ang iyong suporta sa web, ginagawang mas matiis kung nais mong simulang gumamit ng isang bagay na hindi namin talaga alam. Hindi ibig sabihin na mas mabuti ito para sa iyo, depende ito sa mga pangangailangan na mayroon tayo. Ngunit oo, upang makilala nang kaunti ang kapaligiran bago gumawa na mag-install ng anumang bagay sa computer na "hindi kilalang" pinagmulan.

Kung ikaw ay isa sa mga nakasanayan na gumamit casi ganap na keyboard kapag nagtatrabaho, ang CodePen ay magiging maganda para sa iyo. Iba pang mga tool na kailangan plugin upang magamit ang mga keyboard shortcut upang punan ang kapaligiran. Ginagawa nitong medyo hindi komportable ang trabaho (bagaman kasing epektibo sa sandaling naka-install). CP. Isinasama ito bilang pamantayan ng isang system na gagawin mong punan ang parehong mga linya ng code na paulit-ulit, dahil maaaring sa isang listahan. Isusulat mo kung paano mo nais lumitaw ang listahan at i-click ang Tab.

Pinapayagan din ng bersyon ng Pro ang maraming iba pang mga pagpipilian para sa isang presyo ng € 9,00 para sa pangunahing pakete sa € 29,25 para sa "Super" na pakete. Makakapag-update sa maraming mga aparato nang sabay-sabay kung ano ang ginagawa namin sa isa. Isa ring mode ng kooperatiba, isang "mode ng guro", atbp. Makinabang kung nais mo dito.

JSBin

Ang JSBin ay isang tool na maaari naming maging karapat-dapat bilang direkta. Dahil sa sandaling pumunta ka sa web domain nito, handa na itong simulang iguhit ang iyong susunod na proyekto, nang walang pagkaantala. At bagaman ang kauna-unahang pagtatanghal nito ay hindi masyadong kaakit-akit, komportable ito.

Ang JSBin ay simple, na may pangunahing istrakturang nilikha sa html upang hindi mag-aksaya ng oras, makikialam ka sa pagitan ng iba't ibang mga wika upang makumpleto ang trabaho. Una mayroong HTML, pagkatapos CSS, Javascript at sa wakas ang iyong trabaho sa biswal. At bagaman tila mas mahirap ito, magkakaroon ka ng parehong mga uri ng mga shortcut nang hindi nag-i-install ng anuman. Direkta mula sa browser.

Gayunpaman, natagpuan ko na mas hindi komportable na tingnan nang tama ang code, sa sandaling ito ay nakatago dahil sa mga kasunod na haligi. Dahil, sa laptop, dapat kang sumuko o bumaba kasama ang trackpad at hindi ito masyadong likido.

Mayroon lamang itong dalawang installment, libre o bayad. Ito ay medyo mas mahal kaysa sa CodePen, kahit na kung babayaran mo ito taun-taon, mas kapaki-pakinabang ito, kung makakabayad ka ng € 120.

CSSDeck

CSSDeck

Ang kapaligiran sa pagtatrabaho ng CSSDeck naiiba sa nakikita sa itaas. Nahahati sa dalawang haligi lamang, visual-code, gumagana ang CSSDeck na may 3 mga hilera pababa kung saan hinahati nito ang iba't ibang mga uri ng wika. Na may isang pagtatanghal sa anyo ng isang social network at isang mas malinis na kapaligiran sa trabaho na may ilaw na kulay. Mukhang isang simpleng tool. Bagaman minsan, hindi nangangahulugang ito ay negatibo.

Sa higit sa animnapung libong mga nakarehistrong gumagamit at higit sa dalawang daan at limampung libong mga proyekto na nilikha, ang paghahanap at paghahanap ng gusto mo ay hindi magiging mahirap. Ang wika tulad ng lagi, kung maaari itong maging isang abala para sa mga hindi nakakaalam ng Ingles, ngunit sa ito pula panlipunan Napakahalaga ng imahe, kaya sa palagay ko hindi ito hamon.

plunkr

plunkr ito ang hindi gaanong kaakit-akit na tool na napag-alaman ko sa ngayon. Ang pagtatanghal ay pinagsama-sama sa mga mensahe at kakulangan ng mga imahe. Ang paglo-load ng nilalaman ay mabagal at hindi masyadong kapaki-pakinabang sa unang tingin. Bilang karagdagan, ang pag-order ayon sa petsa ay gumagawa ng anumang iskedyul, kahit gaano kasimple, ay maaaring maging sa unang posisyon. Upang makakita ng isang bagay na mas kawili-wili dapat kang pumunta sa tab na nagsasabing: «Karamihan sa Viewed«. Iyon ay, kung hindi mo pa ito naisalin sa Google dati.

Sabihin din na ayon sa web, ang mga ito ay nasa bersyon 1.0.0. Kaya't ipinapaliwanag nito nang kaunti ang disenyo, ang pagtatanghal at ang mga posibleng pagkakamali na mahahanap mo kapag nagba-browse sa web.

Bilang kalamangan, kung naubusan ka ng mga ideya, hindi mo na kailangang umalis o magbukas ng isa pang tab sa Plunkr, dahil direkta mula sa kanang sidebar maaari kang maglakad kasama ang iba pang mga proyekto at agad na matingnan ang mga ito. Gagawa nitong mas madali para sa iyo upang mangolekta ng mabilis na mga ideya at ilapat ang mga ito sa iyong proyekto nang sabay.

dabblet

dabblet ito ay isang simpleng tool, pumunta ka at lumikha. Bagaman maaari kang magparehistro at magkaroon ng iyong username sa pamamagitan ng GitHub, hindi ito isang bagay na namumukod-tangi nang labis sa web. Na may isang background sa isang dilaw hanggang pula na gradient, sa visual na bahagi at isang puting background sa bahagi ng code (tulad ng normal), ipinakita ang proyekto ng Dabblet, bagaman maaari mo itong baguhin mula sa tab na CSS. Para sa akin, mas mabuti na blangko ito, dahil ang gradient na lahat ng nagbibigay ay kaunti buhay a

Kapag nag-e-edit ka, maaari mong i-configure ang mga tab na nakikita mo madali Kahit na kung nais mong lumipat sa mga haligi o mga hilera para sa komportableng pagtingin depende sa tao na nag-e-edit. Ang pagbabago ng laki ng font, pag-save bilang hindi nagpapakilala nang hindi nagrerehistro o pagpapatunay ng HTML code ay mas maraming mga posibilidad na inaalok ng Dabblet sa unang tingin. Bagaman hindi ito ang unang pagpipilian na pipiliin ko, maaaring isaalang-alang sa mga hinaharap na bersyon kung nai-update ang mga ito.

Isa sa mga bagay na hindi ko nagustuhan ang pinakamaliit, ngunit ang magagaling na mga programmer na maaaring magustuhan, iyon ay wala kang pagpipilian upang i-tabulate ang isang label at isulat ito mismo. Iyon ay, ilagay ang HTML at i-click ang tab at isulat ang "html" at "/ html" na awtomatiko. Isang bagay na sa iba pang mga application kung ito ay tapos na.

LiveWeave

liveweave

LiveWeave Ito ay halos kapareho sa iba, wala itong maialok ng iba sa mga tuntunin ng pagiging kapaki-pakinabang. Ang binibigyang diin namin tungkol sa proyektong ito ay ang disenyo nito, isang madilim na kulay na katulad ng CodePen ngunit may isang parisukat na pamamahagi. Ang kakayahang baguhin ang laki tikman. Mayroon ding malinaw na mode at ang «wala sa linya« kung saan ang code na iyong na-edit ay hindi makikita sa visual, hanggang sa maisaaktibo mo ito. Hindi ito isang tampok na nahanap mo na napaka kapaki-pakinabang, bilang isang taga-disenyo, mahalaga na laging makita kung ano ang ie-edit mo sa real time, ngunit may makakahanap sa iyo ng ilang sigurado na paggamit. At bagaman, tulad ng lagi, maaari kang magparehistro, ang gumagamit ay walang nangungunang papel. Dahil, kahit na hindi ka nagrehistro, mai-save mo ang iyong proyekto.

Napakaganda Teksto

Ang tool na ito Ito ay ganap na naiiba mula sa kung ano ang iyong nakita sa ngayon sa pagtatasa. Ang Sublime Text ay hindi bilang isang mapagkukunan sa web, ngunit bilang isang application. Sa isang banda, tiyak na mas kapaki-pakinabang ang pagkakaroon nito sa desktop. Lalo na dahil sa posibleng pag-crash ng internet o pag-freeze dahil sa labis at sa posibleng pagkawala ng trabaho. Sa kabilang banda, hindi ito tulad ng visual na tool tulad ng mga nauna. Bukod sa walang posibilidad ng isang pamayanan na magbahagi ng mga proyekto.

Narito ang lahat ay mula sa simula. Dapat kang lumikha ng mga tab upang mailagay ang mga linya ng code at palitan ang pangalan ng mga ito upang malaman kung alin ang. Kung ang una ay HTML, ang pangalawang CSS ... o kabaligtaran. Wala rin itong mga shortcut para sa kung ano ito ganap na manu-manong, maliban sa mga quote.

Konklusyon

Ang lahat ng mga programa ay pareho sa ilang mga personal na ugnayan ng bawat kumpanya na humantong sa pagkakaroon ng kalamangan at kahinaan sa kanila. Ang bawat isa ay pipili ng isa na pinakaangkop sa kanila, ang aking rekomendasyon ay ang paggamit ng CodePen o CSSDeck para sa kapaligiran at ang social network na hinahawakan nito. Ngunit, kung nagustuhan mo ang isa pa, mag-iwan ng komento at ipaliwanag ang iyong mga dahilan, tiyak na magiging kapaki-pakinabang ang mga ito.


Maging una sa komento

Iwanan ang iyong puna

Ang iyong email address ay hindi nai-publish. Mga kinakailangang patlang ay minarkahan ng *

*

*

  1. Responsable para sa data: Miguel Ángel Gatón
  2. Layunin ng data: Kontrolin ang SPAM, pamamahala ng komento.
  3. Legitimation: Ang iyong pahintulot
  4. Komunikasyon ng data: Ang data ay hindi maiparating sa mga third party maliban sa ligal na obligasyon.
  5. Imbakan ng data: Ang database na naka-host ng Occentus Networks (EU)
  6. Mga Karapatan: Sa anumang oras maaari mong limitahan, mabawi at tanggalin ang iyong impormasyon.