Oskad kasutada erinevaid tekstiredaktoreid nagu Notepad, Notepad++, Sublime Text, Brackets jne? Ei kahtlegi selles. Kuid iga programm tahab mingit moodi eriline olla- teistest “10-korda-parem”. Selle õpetuse eesmärk on õppida, kuidas saada paremaks Brackets tekstiredaktori kasutamisel.

Tutvustus ja allalaadimine

Brackets on Adobe poolt loodud vabavaraline tektiredaktor, mis on mõeldud eelkõige veebiprogejatele ja -disaineritele. Programmi allalaadimiseks mine aadressile http://brackets.io/ ja lae alla viimane versioon (hetkel 1.7).

Projektiga alustamine ja koodi kirjutamine

Kui hakkad töötama suurema projektiga kui üks dokument, siis vali menüüst File>Open Folder. See võimaldab sul kõiki projektiga faile kiirelt luua, avada ja muuta.

HTML koodi kirjutamisel kirjuta ainult sildi nimi (ilma “nokkadeta”) ja vajuta TAB. Näiteks h1  -TAB-> <h1>. Kui koodi kirjutamisel tekib vihjeaken (näiteks CSS või PHP), siis valiku kinnitamiseks vajuta ENTER. Kui suutsid vihjeakna ära kaotada, siis aab selle tagasi tuua Ctrl+Space abil.

Brackets võimaldab kasutada kiiresti ka kohatäite teksti “lorem ipsum”. Selleks kirjuta lihtsalt lorem ja vajuta TAB.

Aeg-ajalt juhtub, et vaja korraga ära muuta mitu ühesugust märki, silti vms. Sel juhul aitab sind, kui selekteerid soovitud teksti ja vajutad Ctrl+B.

Ctrl+D teeb selekteeritud tekstist koopia.

Vaated ja kujundus

Vaikimisi on Brackets heleda taustaga. Selle muutmiseks vali menüüst View>Themes>Brackets Dark.

Soovid tööd teha kahes aknas korraga, siis saad jagada selle horisontaalselt või vertikaalselt pooleks View>Horizontal Split  või Vertical Split. Kiiresti saad valida küljelt, milline fail kus avatakse. Hetkel on seal kirjas näiteks Left ja Right. Lihtsalt lohista fail õige sildi alla.

Laiendused

Brackets võimaldab lisada väga palju kasulikke laiendusi. Laiendused peidavad end paremal küljel olevas menüüs Extension Manager. Näeb välja nagu LEGO klots.

Sellel klikkides avaneb aken, kus on kolm menüüd:

• Available – võimalikud laiendused; leia soovitud laiendus ja kliki nupul ‘Install’
• Themes – saad muuta koodi kuvamist
• Installed – juba paigaldatud laiendused, mille eemaldamiseks kliki nupul ‘Remove’

Panen kirja mõningad laiendused, mida ise kasutan:

• Beautify – muudab su koodi treppmise ilusaks
• Brackets Color Pallete – võimalus võtta pildist klikkides värvikoode
• Autoprefixer – lisab CSS koodi vajalikud veebilehitsejate prefiksid automaatselt
• HTML skeleton – loob kiiresti HTML5 dokumendi struktuuri

Kui hakkad töötama PHP, WordPressi, MySQL vms, siis piilu, kas on midagi head olemas.

Ainult Bracketsis

Bracketsis on mõningad omadused, mis on kaasas ainult selle programmiga.

Live Preview

Live Preview võimaldab näha tulemusi samaaegselt koodi lisamisega. Hetkel töötab ainult Google Chrome veebilehitsejaga.

Quick View

Quick View võimaldab näha CSS värvi hiirega üle värvikoodi lohistades.

Quick Edit

Huvitav võimalus otse HTML dokumendis lisada elemendile uus reegel ja seda muuta dokumendits lahkumata. (Eelnevalt peab CSS fail olema lingitud). Tee soovitud HTML elemendil parem klikk ja vali Quick Edit.

See suurub HTML koodi laiali ja kuvab nupu New Rule. Kui sellele klikid, siis tehakse CSS faili uus reegel ja saad lisada kujunduse. NB! Uus reegel lisatakse CSS faili lõppu.