Idagbasoke Iwaju: CodePen tabi Ọrọ Giga?

KooduPen tabi Ọrọ giga? Ti a ba sọrọ nipa siseto wẹẹbu, orukọ HTML, CSS ati JavaScript wa si wa lẹsẹkẹsẹ. Awọn ọna pupọ lo wa lati de sibẹ. Paapaa, ti a ba ṣii iwe akọsilẹ kan a le gba lati ṣiṣẹ kikọ "html". O jẹ otitọ pe lati wo abajade ohun ti o n ṣe siseto lati paadi kan, iwọ yoo nilo ilana iṣiṣẹ lati ṣe akiyesi ilọsiwaju.

Awọn aaye wọnyi ni awọn aaye ere idaraya akọkọ fun awọn oludasile awọn ohun elo fun awọn olumulo ti ọjọ naa. Lati ni imọ siwaju sii nipa awọn anfani ati ailagbara ti awọn eto wọnyi, a yoo ṣe itupalẹ wọn jinna ninu nkan yii (o kere ju, ohun gbogbo ti a mọ). Bi Mo ṣe sọ nigbagbogbo, dajudaju diẹ ninu awọn ti o wa nibi mọ koko-ọrọ diẹ sii. Ti o ba bẹ bẹ, ṣe alaye lori ohun gbogbo ti o salọ wa nibi. A yoo dun lati jiroro!

Loni a yoo ṣe itupalẹ CodePen, JSBin, Plunkr, didara julọ, CSSDeck, Dabblet, ati LiveWeave. Ewo ni o mọ julọ julọ ati awọn irinṣẹ ti a lo julọ ni agbegbe yii. O wa diẹ sii, dajudaju.

Ṣugbọn fun gbogbo ẹnyin ti ko mọ kini FrontEnd tabi BackEnd jẹ nipa, jẹ ki a ṣalaye diẹ. Iwaju-Ipari tabi wiwo jẹ apakan iwoye ti olumulo lilọ kiri yoo ni anfani lati wo lori oju opo wẹẹbu. BackEnd yoo jẹ apakan ti olutọju aaye n ṣakoso. Ninu siseto, ti o ba tẹ koodu sii nipasẹ ohun elo ti o ṣe afihan abajade nigbakanna, eyi ni yoo pe ni opin-iwaju.

CodePen

Fun ọpọlọpọ ọpa ti o pari julọ ti gbogbo ohun tí a ń sọ. Ti a lo bi ọpa wẹẹbu ti o jẹ ohun ti o sunmọ julọ si agbegbe lati fi iṣẹ rẹ han. A irú ti Youtube lati ọdọ komputa. Ninu eyi, iwọ yoo ni anfani lati wo iṣẹ ti awọn olutẹpa eto ti o somọ pẹlu oju opo wẹẹbu ati kan si wọn ni ọran ti o ba ni iwulo eyikeyi, wo profaili wọn, tẹle wọn lori awọn nẹtiwọọki ati paapaa ṣe alabapin si ikanni wọn lati wo gbogbo awọn iṣẹ akanṣe wọn ni ọjọ iwaju.

Igbejade ti akoonu, atilẹyin ati awọn ọna abuja keyboard

Igbejade CodePen jẹ ohun ti o wuni julọNitori pẹlu awọn jinna diẹ, o le ṣiṣẹ nipasẹ ilana lẹsẹkẹsẹ. Pẹlu awọn ila ti a ya sọtọ ti html, CSS ati JavaScript. Ni afikun si apakan iwoye, eyiti o le ṣaakiri si oke ati isalẹ lati wo ilọsiwaju rẹ kedere. Nitorinaa ṣe iranlọwọ lati ṣe iyatọ ede kọọkan daradara. Ohunkan ti o wa ni ọwọ fun awọn olutọsọna tuntun.

Atilẹyin wẹẹbu rẹ, mu ki o ni irọrun diẹ sii nigbati o ba fẹ bẹrẹ lilo nkan ti a ko mọ gaan gan-an. Iyẹn ko tumọ si pe o dara fun ọ, o da lori awọn aini ti a ni. Ṣugbọn bẹẹni, lati mọ agbegbe diẹ diẹ ti o dara ṣaaju ṣiṣe lati fi sori ẹrọ ohunkohun lori kọnputa ti orisun “aimọ”.

Ti o ba jẹ ọkan ninu awọn ti o lo lati lo casi keyboard patapata nigbati o ba n ṣiṣẹ, CodePen yoo jẹ iyanu fun ọ. Awọn irinṣẹ miiran nilo afikun lati ni anfani lati lo awọn ọna abuja bọtini itẹwe lati kun agbegbe. Eyi jẹ ki iṣẹ naa rọrun diẹ diẹ sii (botilẹjẹpe gẹgẹ bi o ti munadoko lẹẹkan ti a fi sii). CP. ṣepọ bi boṣewa eto ti yoo jẹ ki o fọwọsi ni awọn ila kanna ti koodu ti o tun ṣe, bi o ṣe le wa ninu atokọ kan. O kọ bi o ṣe fẹ ki atokọ naa han ki o tẹ Tab.

Ẹya Pro tun gba ọpọlọpọ awọn aṣayan diẹ sii fun idiyele ti € 9,00 fun package ipilẹ si € 29,25 fun package “Super”. Ni anfani lati ṣe imudojuiwọn ni awọn ẹrọ pupọ nigbakanna ohun ti a ṣe ni ọkan. Tun ipo iṣọkan, “ipo olukọ”, ati bẹbẹ lọ. Anfani ti o ba fẹ nibi.

JSBin

JSBin jẹ ọpa ti a le ṣe deede bi taara. Niwọn igba ti o ba lọ si aaye ayelujara rẹ, yoo ṣetan lati bẹrẹ fifa soke iṣẹ akanṣe rẹ, laisi idaduro. Ati pe botilẹjẹpe ipilẹ akọkọ rẹ ko ṣe ifamọra pupọ, o jẹ itunu.

JSBin jẹ rọrun, pẹlu ipilẹ ipilẹ ti a ṣẹda ni html nitorina ki o ma ṣe padanu akoko, iwọ yoo dapọ laarin awọn ede oriṣiriṣi lati pari iṣẹ naa. Ni akọkọ HTML wa, lẹhinna CSS, Javascript ati nikẹhin iṣẹ rẹ ni wiwo. Ati pe botilẹjẹpe o dabi pe o nira julọ, iwọ yoo ni awọn oriṣi awọn ọna abuja kanna laisi fifi ohunkohun sii. Taara lati aṣawakiri.

Sibẹsibẹ, Mo ti rii diẹ korọrun lati wo koodu naa ni deede, ni kete ti o farapamọ nitori awọn ọwọn atẹle. Niwon, pẹlu kọǹpútà alágbèéká, o gbọdọ fi silẹ tabi isalẹ pẹlu awọn trackpad ati pe kii ṣe omi pupọ.

O ni awọn ipin diẹ meji nikan, ọfẹ tabi sanwo. Eyi jẹ diẹ gbowolori diẹ sii ju CodePen, botilẹjẹpe ti o ba sanwo rẹ lododun, o jẹ ere diẹ sii, ti o ba le san € 120.

CSSDeck

Awọn ṣiṣẹ ayika ti CSSDeck yato si eyi ti a ri loke. Pin si awọn ọwọn meji nikan, koodu-iworan, CSSDeck n ṣiṣẹ pẹlu awọn ori ila 3 isalẹ eyiti o pin awọn oriṣiriṣi ede. Pẹlu igbejade ni irisi nẹtiwọọki awujọ kan ati agbegbe iṣẹ iṣẹ afọmọ ni awọ ina. O dabi pe ohun elo ti o rọrun. Botilẹjẹpe nigbami iyẹn ko tumọ si pe o jẹ odi.

Pẹlu diẹ ẹ sii ju awọn olumulo ti a forukọsilẹ ti o to ọgọta ati diẹ sii ju awọn iṣẹ akanṣe ti o ṣẹda ti o ṣẹda, wiwa ati wiwa ohun ti o fẹ kii yoo nira. Ede naa bi igbagbogbo, ti o ba le jẹ aiṣedede fun awọn ti ko mọ Gẹẹsi, ṣugbọn ninu eyi netiwọki awujo Aworan naa ṣe pataki pupọ, nitorinaa Emi ko ro pe o jẹ ipenija nla.

plunkr

plunkr o jẹ ohun elo ti o wuyi ti o kere ju ti Mo ti rii kọja. A ṣe agbejade igbejade ni awọn ifiranṣẹ ati aini awọn aworan. Ikojọpọ akoonu jẹ o lọra ati kii ṣe iwulo pupọ ni wiwo akọkọ. Ni afikun, aṣẹ nipasẹ ọjọ ṣe iṣeto eyikeyi, bii bi o ṣe rọrun, le wa ni ipo akọkọ. Lati wo nkan ti o dun diẹ sii o yẹ ki o lọ si taabu ti o sọ pe: «julọ ​​ti wò«. Iyẹn ni pe, ti o ko ba ti tumọ rẹ pẹlu Google tẹlẹ.

Tun sọ pe ni ibamu si oju opo wẹẹbu, wọn wa ninu ẹya 1.0.0. Nitorinaa eyi ṣe alaye diẹ nipa apẹrẹ, igbejade ati awọn aṣiṣe ti o ṣeeṣe ti o wa nigba lilọ kiri lori ayelujara.

Gẹgẹbi anfani, ti o ba pari awọn imọran, iwọ kii yoo ni lati lọ kuro tabi ṣii taabu miiran ni Plunkr, nitori ni taara lati apa ọtun o le rin pẹlu awọn iṣẹ miiran ki o wo wọn lesekese. Eyi yoo jẹ ki o rọrun fun ọ lati gba awọn imọran iyara ati lo wọn si iṣẹ akanṣe rẹ ni akoko kanna.

dabblet

dabblet o jẹ ohun elo ti o rọrun, o wọle ki o ṣẹda. Botilẹjẹpe o le forukọsilẹ ki o ni orukọ olumulo rẹ nipasẹ GitHub, kii ṣe nkan ti o duro pupọ lori oju opo wẹẹbu. Pẹlu ipilẹṣẹ ni ofeefee kan si gradient pupa, ni apakan wiwo ati ipilẹ funfun ni apakan koodu (bi o ṣe jẹ deede), a gbekalẹ iṣẹ akanṣe Dabblet, botilẹjẹpe o le yipada lati taabu CSS. Fun mi, o dara lati ni ofo, nitori igbasẹ yẹn gbogbo eyiti o fun ni diẹ Vida a

Nigbati o ba n ṣatunkọ, o le tunto awọn taabu ti o rii awọn iṣọrọ. Paapaa paapaa ti o ba fẹ yipada si awọn ọwọn tabi awọn ori ila fun wiwo itura ti o da lori eniyan ti n ṣatunṣe. Yiyipada iwọn font, fifipamọ bi ailorukọ laisi fiforukọṣilẹ tabi jẹrisi koodu HTML jẹ awọn aye diẹ sii ti Dabblet nfun ni wiwo akọkọ. Botilẹjẹpe kii ṣe aṣayan akọkọ ti Emi yoo yan, o le jẹ lati ṣe akiyesi ni awọn ẹya iwaju ti wọn ba ni imudojuiwọn.

Ọkan ninu awọn ohun ti Mo fẹran ti o kere julọ, ṣugbọn ti awọn oluṣeto eto nla le fẹ, ni iyẹn o ko ni aṣayan lati ṣajọ aami kan ki o jẹ ki o kọ ara rẹ. Iyẹn ni pe, fi HTML sii ki o tẹ taabu naa ki o kọ “html” ati “/ html” ni adaṣe. Nkankan pe ninu awọn ohun elo miiran ti o ba ti ṣe.

LiveWeave

LiveWeave O jọra gaan si awọn miiran, ko ni nkankan ti awọn miiran ko le pese ni awọn iwulo iwulo. Ohun ti a ṣe afihan nipa iṣẹ yii ni apẹrẹ rẹ, awọ dudu ti o jọmọ CodePen ṣugbọn pẹlu pinpin onigun mẹrin. Ni anfani lati yi iwọn pada lati lenu. Ipo ti o mọ tun wa ati «jade ti laini« ibiti koodu ti o ṣatunkọ ko ni farahan ninu wiwo, titi ti o fi muu ṣiṣẹ. Kii ṣe ẹya ti o rii pe o wulo pupọ, bi onise apẹẹrẹ, o ṣe pataki lati nigbagbogbo rii ohun ti o ṣatunkọ ni akoko gidi, ṣugbọn ẹnikan yoo rii pe o lo diẹ fun daju. Ati pe botilẹjẹpe, bi igbagbogbo, o le forukọsilẹ, olumulo ko ni ipa idari. Niwọn igba, paapaa ti o ko ba forukọsilẹ, o le fipamọ idawọle rẹ.

gíga Text

Ọpa yii O yatọ patapata si ohun ti o ti rii bẹ ni itupalẹ. Text gíga kii ṣe bi orisun wẹẹbu, ṣugbọn bi ohun elo kan. Ni ọwọ kan, o daju pe o wulo diẹ sii lati ni lori deskitọpu. Paapa nitori awọn ijamba intanẹẹti ti o ṣeeṣe tabi didi nitori apọju ati isonu ti o ṣeeṣe ti iṣẹ. Ni apa keji, kii ṣe ojulowo irinṣẹ bi awọn ti iṣaaju. Yato si ko ni seese ti agbegbe lati pin awọn iṣẹ akanṣe.

Nibi ohun gbogbo wa lati ibẹrẹ. O gbọdọ ṣẹda awọn taabu lati gbe awọn ila ti koodu sii ki o fun lorukọ mii lati mọ eyi ti o jẹ. Ti akọkọ ba jẹ HTML, CSS keji ... tabi ni idakeji. O tun ko ni awọn ọna abuja fun ohun ti yoo jẹ patapata Afowoyi, ayafi fun awọn avvon.

Ipari

Gbogbo awọn eto jọra pẹlu awọn ifọwọkan ti ara ẹni ti ile-iṣẹ kọọkan ti o yori si nini awọn aleebu ati awọn konsi ninu wọn. Olukuluku yoo yan eyi ti o dara julọ fun wọn, iṣeduro mi ni lati lo CodePen tabi CSSDeck fun ayika ati nẹtiwọọki awujọ ti o ṣakoso. Ṣugbọn, ti o ba fẹran ẹlomiran diẹ sii, fi asọye silẹ ki o ṣalaye awọn idi rẹ, wọn yoo jẹ iwulo nit surelytọ.