FrontEnd Development: CodePen же Sublime Text?

CodePen же бийик текстпи?
CodePen же Sublime Text? Эгерде биз веб-программалоо жөнүндө айта турган болсок, анда HTML, CSS жана JavaScript аталышы бизге дароо келет. Ал жакка баруунун бир нече жолу бар. Ал тургай, эгер биз блокнот ачсак, анда "html" деп жазып, ишке киришсек болот. Программанын натыйжасын көрүү үчүн, прогрессти байкоо үчүн оор процедура талап кылынат.

Бул сайттар күндүн колдонуучулары үчүн тиркеме иштеп чыгуучулар үчүн негизги оюн аянтчалары болуп саналат. Бул программалардын артыкчылыктары жана кемчиликтери жөнүндө көбүрөөк билүү үчүн, аларды ушул макалада терең талдап чыкканы жатабыз (жок дегенде, билгенибиздин бардыгы). Мен ар дайым айтып жүргөндөй, бул жерде сиздердин айрымдарыңыз бул теманы көбүрөөк билишет. Эгер ошондой болсо, анда бизден качып кеткендердин бардыгына комментарий бериңиз. Биз талкуулаганга кубанычтабыз!

Бүгүн биз CodePen, JSBin, Plunkr, sublime талдоо жүргүзөбүз, CSSDeck, Dabblet жана LiveWeave. Бул чөйрөдө кайсынысы эң белгилүү жана эң көп колдонулган шаймандар. Албетте, дагы көп.

Бирок FrontEnd же BackEnd эмне жөнүндө экендигин билбеген баарыңыздар үчүн бир аз түшүндүрүп берели. Front-End же интерфейс - бул чабыттоочу колдонуучу Интернетте көрө алган визуалдык бөлүгү. BackEnd сайттын администратору көзөмөлдөгөн бөлүк болот. Программалоодо, натыйжаны бир эле учурда чагылдырган курал аркылуу код киргизсеңиз, анда бул алдыңкы орун деп аталат.

CodePen

Көпчүлүк эң толук курал баардыгы жөнүндө. Сиздин ишиңизди көрсөтүү үчүн жамаатка эң жакын нерсе болгон веб куралы катары колдонулат. Бир түрү Youtube программисттен. Ушуну менен, сиз желеде байланышкан программисттердин ишин көрө аласыз жана сизде кандайдыр бир кызыгуу жаралган учурда, алар менен байланышып, алардын профилин көрүп, тармактарда ээрчип, ал тургай алардын каналына жазылып, келечектеги бардык долбоорлорун көрө аласыз.

Мазмундун презентациясы, колдоо жана тез баскычтар

CodePen презентациясы баарынан кызыктууАнткени бир нече чыкылдатуу менен, сиз дароо процесстен өтүп кетсеңиз болот. HTML, css жана javascriptтин абдан жакшы бөлүнгөн саптары менен. Визуалдык бөлүктөн тышкары, сиз илгерилөөңүздү ачык-айкын көрүү үчүн өйдө-ылдый кесилише аласыз. Ошентип, ар бир тилди жакшы айырмалоого жардам берет. Жаңы программисттер үчүн ыңгайлуу нерсе.

Веб-колдоо, биз чындыгында биз жакшы билбеген нерсени колдоно баштаганда, аны чыдамдуу кылат. Бул сиз үчүн жакшы дегенди билдирбейт, бул биздеги муктаждыктардан көз каранды. Бирок, ооба, "белгисиз" чыккан компьютерге бир нерсе орнотууга милдеттенүүдөн мурун айлана чөйрөнү бир аз жакшыраак билүү үчүн.

Эгерде сиз колдонууга көнгөндөрдүн бири болсоңуз дээрлик сиз иштегенде толугу менен клавиатура, CodePen сиз үчүн сонун болот. Башка шаймандар керек плагиндер айлана-чөйрөнү толтуруу үчүн тез баскычтарды колдоно билүү. Бул жумушту бир аз ыңгайсыз кылат (орнотулгандан кийин эле натыйжалуу болот). CP. Ал стандарттуу тутумду бир тизмеге киргизилгендей эле, кайталанган коддордун саптарын толтурууга түрткү берет. Сиз тизменин кандайча пайда болушун каалайсыз жана Вкладканы чыкылдатыңыз.

Pro версиясы, ошондой эле "Супер" топтому үчүн 9,00 еврого чейинки негизги пакет үчүн 29,25 еврону түзгөн дагы көптөгөн мүмкүнчүлүктөрдү берет. Бир эле нерсени бир эле учурда бир нече түзмөктө жаңырта алуу. Ошондой эле кооперативдик режим, "мугалим режими" ж.б. Эгер бул жерде кааласаңыз, пайда көрүңүз.

JSBin

JSBin - бул түздөн-түз квалификациялуу курал. Веб-доменине киргенден кийин, кийинки долбоорду түзүүнү баштоого даяр болот, кечиктирбестен. Анын биринчи коюлушу анчалык жагымдуу болбосо дагы, ыңгайлуу.

JSBin жөнөкөй, убакытты текке кетирбөө үчүн HTML түзгөн негизги структурасы менен, сиз ишти аягына чыгаруу үчүн ар кайсы тилдердин ортосунда аралашып кетесиз. Алгач HTML, андан кийин CSS, Javascript жана акыры сиздин визуалдык жумуштарыңыз бар. Бул кыйыныраак көрүнгөнү менен, эч нерсени орнотпой эле, жарлыктардын түрлөрү сизде болот. Түздөн-түз браузерден.

Бирок, кодду кийинки тилкелерден улам жашырылып калгандан кийин, аны туура көрүү ыңгайсыз деп таптым. Ноутбуктун жардамы менен, менен баш тартып же ылдый түшүрүш керек такта жана ал өтө суюк эмес.

Акысыз же акы төлөнүүчү эки гана бөлүктөн турат. Бул CodePenге караганда бир аз кымбатыраак, бирок аны жыл сайын төлөсөңүз, 120 евро төлөсөңүз, кыйла пайдалуу.

CSSDeck

CSSDeck
Нын иштөө чөйрөсү CSSDeck жогоруда көрсөтүлгөндөн айырмаланып турат. Визуалдык-код деген эки тилкеге ​​гана бөлүнгөн CSSDeck 3 тилке менен иштейт, анын жардамы менен тилдин ар кандай түрлөрү бөлүнөт. Коомдук тармак түрүндөгү презентация жана таза түстөгү таза иштөө чөйрөсү менен. Бул жөнөкөй курал окшойт. Кээде болсо да, бул терс дегенди билдирбейт.

Алтымыш миңден ашуун колдонуучу катталып, эки жүз элүү миңден ашуун долбоор түзүлгөндө, издөө жана издөө кыйын болбойт. Англис тилин билбегендер үчүн ыңгайсыздык жарата турган болсо, тил ар дайымкыдай эле, бирок ушул жагынан коомдук желе Сүрөт абдан маанилүү, андыктан мен аны чоң чакырык деп эсептебейм.

Plunkr

Plunkr ал ушул кезге чейин кезиккен эң аз жагымдуу курал. Презентация билдирүүлөрдө жана сүрөттөрдүн жетишсиздигинде аглютинацияланган. Мазмунду жүктөө жай жана бир караганда анчалык деле пайдалуу эмес. Мындан тышкары, дата боюнча буйрутма берүү канчалык жөнөкөй болсо дагы, биринчи позицияда болушу мүмкүн. Андан да кызыктуу нерсени көрүү үчүн төмөнкү өтмөктө өтүңүз: «көп көрүлгөн«. Башкача айтканда, буга чейин Google менен которбогон болсоңуз.

Ошондой эле, Интернеттеги маалыматка ылайык, алар 1.0.0 версиясында. Ошентип, бул дизайн, презентация жана Интернетте кароодо мүмкүн болгон каталар жөнүндө бир аз түшүндүрмө берет.

Артыкчылык катары, идеяңыз түгөнүп калса, сиз Plunkrде башка өтмөктү таштап же ачуунун кажети жок, анткени оң капталдан башка долбоорлор менен жүрүп, аларды дароо көрө аласыз. Бул ыкчам идеяларды чогултууну жана аларды бир эле учурда өз долбооруңузга колдонууну жеңилдетет.

Дабблет

Дабблет бул жөнөкөй курал, сиз кирип түзөсүз. GitHub аркылуу катталып, колдонуучу атыңызды ала алсаңыз дагы, Интернетте анчалык деле айырмаланган нерсе эмес. Фонду сарыдан градиентке чейин, визуалдык бөлүктө жана код бөлүгүндө ак түстү (кадимкидей), Dabblet долбоору сунушталат, бирок аны CSS табулатурасынан өзгөртө аласыз. Мен үчүн бул бош болгону жакшы, анткени берген градиенти бир аз жашоо a

Түзөтүп жатканда, көрүнүп турган өтмөктөрдү конфигурациялай аласыз оңой. Түзөтүп жаткан адамга жараша ыңгайлуу көрүү үчүн тилкелерге же катарларга өтүүнү кааласаңыз дагы. Шрифттин көлөмүн өзгөртүү, HTML кодун каттабай же тастыктабастан белгисиз катары сактоо - бул Dabblet бир караганда сунуш кылган көбүрөөк мүмкүнчүлүктөр. Мен тандаган биринчи вариант болбосо да, алар жаңыртылса, кийинки нускаларда эске алышы мүмкүн.

Мага эң жакпаган, бирок мыкты программисттерге жаккан нерселердин бири ушул сизде энбелгини таблицага киргизип, өзү жазууга мүмкүнчүлүк жок. Башкача айтканда, HTML коюп, кошумча барагын чыкылдатып, "html" жана "/ html" деп жазыңыз. Эгерде ал аткарылса, башка колдонмолордо бир нерсе.

LiveWeave

liveweave
LiveWeave Бул башкаларга абдан окшош, башкаларда пайдалуулук жагынан сунуштай албаган эч нерсе жок. Бул долбоордо баса белгилеп кетчү нерсе, анын дизайны, CodePenге окшош күңүрт түстө, бирок төрт бурчтуу бөлүштүрүлгөн. Өлчөмүн өзгөртө алуу татып көрүү. Ошондой эле так режим жана «саптан тышкары« сиз жөндөгөн код визуалда чагылдырылбайт, аны активдештирмейинче. Бул мен үчүн өтө пайдалуу эмес, анткени мен дизайнер катары редакторлоп жаткан нерсени ар дайым реалдуу убакытта көрө берсеңиз болот, бирок кимдир бирөө аны бир аз пайдаланышы мүмкүн. Ошондой эле, ар дайымкыдай эле, сиз каттала аласыз, бирок колдонуучу жетектөөчү ролду ойнобойт. Катталбасаңыз дагы, долбооруңузду сактай аласыз.

улуу Text

бул курал ал буга чейин талдоодо көргөндөн таптакыр башкача. Sublime Text веб-ресурс катары эмес, тиркеме катары колдонулат. Бир жагынан, аны иш тактада алуу пайдалуураак болот. Айрыкча ашыкча иштен жана мүмкүн болгон жумуштан айрылуунун кесепетинен интернет бузулуп же тоңуп калгандыктан. Экинчи жагынан, ал мурункулардай визуалдык курал эмес. Мындан тышкары, коомчулуктун долбоорлорду бөлүшүү мүмкүнчүлүгүнө ээ эмес.

Бул жерде баары нөлдөн. Коддордун саптарын жайгаштыруу үчүн өтмөктөрдү түзүп, алардын кайсынысы экендигин билүү үчүн атын өзгөртүү керек. Эгерде биринчиси HTML болсо, экинчиси CSS .. же тескерисинче. Ошондой эле, ал эмне боло тургандыгы жөнүндө эч кандай кыска жол жок цитаталардан тышкары толугу менен кол менен.

жыйынтыктоо

Бардык программалар ар бир компаниянын айрым жеке мамилелери менен окшош, аларда оң жана терс жактарын алып келет. Ар бири өзүнө ылайыктуусун тандайт, Менин сунушум, айлана-чөйрө жана ал иштеп жаткан социалдык тармак үчүн CodePen же CSSDeck колдонуу. Бирок, дагы бирөөсү жаккан болсо, комментарий калтырып, себептериңизди түшүндүрүп берсеңиз, алар пайдалуу болот.


Макаланын мазмуну биздин принциптерге карманат редакциялык этика. Ката жөнүндө кабарлоо үчүн чыкылдатыңыз бул жерде.

Комментарий биринчи болуп

Комментарий калтырыңыз

Сиздин электрондук почта дареги жарыяланбайт. Милдеттүү талаалар менен белгиленет *

*

*

  1. Маалыматтар үчүн жооптуу: Мигель Анхель Гатан
  2. Маалыматтын максаты: СПАМды көзөмөлдөө, комментарийлерди башкаруу.
  3. Мыйзамдуулук: Сиздин макулдугуңуз
  4. Маалыматтарды берүү: Маалыматтар үчүнчү жактарга юридикалык милдеттенмелерден тышкары билдирилбейт.
  5. Маалыматтарды сактоо: Occentus Networks (ЕС) тарабынан уюштурулган маалыматтар базасы
  6. Укуктар: Каалаган убакта маалыматыңызды чектеп, калыбына келтирип жана жок кыла аласыз.