СПОДЕЛИ

Front-end веб развивачите имаат голема обврска кога станува збор за распоредите на страницата кои треба да работат исто кај сите веб прелистувачи. Со текот на времето ова станува сé полесно заради понапредните прелистувачи и подобрите алатки за развој.

Сите добро знаеме за HTML и CSS, но малкумина знаат за Sass и Haml. Front-end развојот продолжува да напредува и токму затоа главната работа на развивачите е да ги следат промените.

Ако не сте сигурни во вашите front-end вештини, или ако сакате да си ги освежите знаењата и да дознаете повеќе за поновите техники, тогаш овој текст е за вас. Во него ќе позборуваме за популарните алатки и ресурси кои секој front-end развивач треба да ги употребува, или барем да ги познава.

CSS претпроцесори

Еден од најпознатите CSS претпроцесори е Sass, а по него доаѓа Less. Станува збор за две библиотеки со код, кои обработуваат прилагодена CSS синтакса за креирање на подинамички и помодуларен код.

Терминот “Sass” се однесува на технологија и синтакса. Sass датотеките може да бидат и SCSS датотеки. Less е истата работа, но со поинаква синтакса.

Sass и Less во суштина не се јазици, туку екстензии на CSS. Sass/Less кодот се компајлира во чист CSS.

Најголемата разлика помеѓу Sass и Less, освен синтаксата, е начинот на кој тие функционираат. Sass работи на Ruby, а Less на JavaScript (или со Node.js).

Сепак, имајте на ум дека CSS претпроцесирањето бара предзнаење во команди од терминал (CLI команди). Не мора да сте стручњак, но би требало да знаете да работите со основни команди на командна линија. На пример, најбрзиот начин за да компајлирате Sass датотека е да напишете нешто налик ова во терминалот:

sass input.scss output.css

Еве неколку ресурси кои ќе ви помогнат да научите повеќе за CSS претпроцесорите:

Git контрола на верзии

Менаџирањето на  проекти и контролата на верзиите се неопходни за секој веб проект. Заедниците како GitHub го направија “Git” добро познат во технологијата.

Но, како тој работи и зошто би ви бил неопходен?

Git е систем за контрола на верзии кој им дозволува на развивачите да програмираат без да ја презапишуваат или поништуваат претходно завршената работа. Тоа е можно преку разгранувањето кое помага различни снимки од екранот од вашиот проект да се зачуваат како архива. Со Git може да го разграните сопствениот, моментален проект, да да се обидете да додадете нова опција или карактеристика, и потоа, ако ви се допаѓа да ја зачувате гранката, или ако не ви се допаѓа да ја избришете.

Инсталацијата на Git  е супер лесна на сите оперативни системи. Кривата на учење е многу подетална бидејќи ќе треба да научите нови термини како потврди, гранка, одјави се,итн.

Со ова упатство за почетници и многу вежби, Git полека ќе се вклопи во вашиот front-end работен тек.

Едната од најголемите пречки кои ќе мора да ги надминете е учењето како да работите со Git преку командна линија. Ова е методот кој повеќето програмери го претпочитаат и употребуваат на дневна основа. Сепак, ако сакате полесен вовед, може да почнете со  Git GUI апликацијата. Бесплатните опции, како официјалната GitHub апликација, ви нудат едноставен начин на кој може да почнете да работите со Git.

Мојот совет е да одите полека, бидејќи лесно може да дојдете до точка да се откажете ако контролата на верзии ви е непознат концепт. Учете со прилагодено темпо за вас и никако не се откажувајте!

Еве неколку одлични веб сајтови на кои може да ги научите и повежбате основите на Git:

JavaScript библиотеки

Front-end развојот несомнено се движи кон целосна поддршка на JavaScript. Од динамички елементи на страница, до прилагодени анимации, JavaScript е основна алатка за секој веб проект.

Во последно време повеќето развивачи се потпираат на JavaScript библиотеките наспроти генеричките JS скрипти. Ова е одлично, особено бидејќи овие библиотеки ги отстрануваат тешките концепти и го олеснуваат креирањето со техники од типот на Ajax. Единствен недостаток е тоа што заради големиот број на различни библиотеки, тешко може да одлучите од каде да почнете.

Најдобро е да го научите само она што ви е потребно кога ќе ви биде потребно. Освен ако не сте некој кој сака да пишува код од забава, најдобро е да совладате само неколку библиотеки. jQuery е најдоброто место од каде може да почнете. Тоа е една од петте најупотребувани JavaScript библиотеки.

Имајте ги во предвид и понапредните алатки како Backbone.js или Angular.js. И двете се open source библиотеки креирани за структурирање на веб апликации кои се базираат на JavaScript. Овие алатки се многу моќни, иако не би имало никаква логика да ги употребувате на едноставен WordPress блог.

Развивачите кои бараат предизвици може да научат еден од JS јазиците за претпроцесирање како CoffeeScript, TypeScript, или LiveScript. Сите три јазици се компајлираат во JavaScript, иако нудат многу варијации на оригиналната синтакса.

Вистинската моќ на JavaScript дури сега се открива. Со алатки како Node.js може да направите цели сервери да работат на JavaScript основа. Да не споменуваме дака необработената JavaScript може да се извршува во конзолниот прозорец на прелистувачот, што дополнително ја зголемува моќта на front-end развивачите.

Независно дали сте апсолутен почетник или искусен развивач, секогаш имате што да научите. Следниве ресурси се навистина корисни.

HTML претпроцесори

Популарноста на CSS претпроцесирањето доведе до развој на HTML претпроцесирање за front-end развивачи. Ова функционира на истиот начин какоSass/Less каде пишувате синтакса и компајлирате за да добиете необработен, чист HTML код.

HTML претпроцесирањето може да ве спаси од пишување на синтакса која се повторува, како на пр. затварање на тагови. Иако претпроцесирањето е многу корисно, бара одредени прилагодувања.

Haml и Jade се двата најпопуларни избори со многу различни стилови на синтакса, а  Slim е третата опција. Сите три се open source и се во постојан развој, па навистина не може да згрешите со изборот.

Haml и Slim работат на Ruby, со тоа што Haml е алтернатива на ERB правење образци. Иако Haml е одличен за еазвивачи во Rails, тој може да е многу корисен и за front-end развивачи независно од тоа дали знаат да пишуваат back-end код или не.

Jade работи на Node.js. Може да се употребува исклучиво за Node апликации или како самостојно решение за front-end развивачи на кои им се допаѓа синтаксата на Jade.

Нема точен и погрешен избор, бидејќи станува збор за многу слични опции. Општо, оние кои го сакаат Ruby се држат до Haml, иако многумина одат кон Jade, особено сега, како резултат на  моменталниот тренд за употреба на  Node.js во веб развојот.

Вистината е дека сега за сега само мал број на развивачи задолжително го имаат HTML претпроцесирањето во својот работен тек, но важно е да ги знаете можностите ред да ослучите и самите. Можеби ќе оодлучите дека сакате да пишувате статички HTML, а можеби ќе се потпрете на Haml/Slim/Jade. Доволно е да ја препознавате нивната синтакса за да сте во предност.

Погледнете ги овие корисни Check out these handy teaching resources to delve deeper:

JS Task Runners

Автоматизираните извршувачи на задачи се најновите алатки за front-end. Концептот првично може да ве збуни, но извршувачите на задачи навистина може да го подобрат вашиот работен тек со можност за многу прилагодливи опции.

Двата најпознати се Gulp и Grunt. Ќе забележите дека работат на JavaScript, но имаат потреба и од терминал. Како сето тоа функционира?

И Gulp и Grunt се инсталираат преку Node Package Manager (NPM)  преку командна линија. Библиотеките може да извршуваат JS команди од засебни датотеки, особено  gulpfile.js и gruntfile.js.

Овие датотеки може да се многу мали или многу големи, во зависност од тоа колку задачи сакате да автоматизирате. Погледнете го овој Gulpfile.js за да видите како изгледа.

Ако никогаш не сте го направиле ова претходно, сега најверојатно сте збунет. Не грижете се. Фокусирајте се на концептите и опциите кои ви ги обезбедуваат овие .js датотеки со задачи.

Може да додадете JS код кој ги автоматизираше задачите како процесирање на Sass датотеки, процесирање на Haml, па дури и JS јазици како CoffeeScript. Ќе забележите дека секој од овие упатува на NPM пакет кој е однапред напишан за Gulp. Ова значи дека не мора да пишувате сопствена Sass скрипта за автоматско компајлирање, бидејќи таа е веќе напишана.

За да научите како функционираат овие алатки сигурно ќе ви е потребно подолго време. Концептот можеби ви звучи познато и слично со процесот на учење на Git, и тоа е една од работите која почетниците ги предомислува. Меѓутоа, окако еднаш ќе ги разбирете основите и ќе видите како тие влијаат на вашиот работен тек, никогаш нема да сакате да се вратите назад.

Еве неколку места од каде може да почнете:

Заклучок

Сите овие алатки се релативно нови и напредувале многу во последните неколку години. Светот на front-end развојот нуди многу импресивни алатки за напреден работен тек, и се надеваме дека овој напис ќе ви понуди почетна точка доколку мислите дека некоја од компонентите ви недостасува.

Ти се допадна овој напис?
Стани член на клубот на веб професионалци Еверест и прв добивај информации кои можат да ти помогнат за твојот натамошен професионален развој.
И ние како и ти ги мразиме спамерите. Твојата email адреса никогаш нема да биде (про)дадена некому. Чесен збор.
  • Ficiani

    Секоја чест 🙂