Posted by Tpk on

Szybkie kodowanie, przegląd dostępnych edytorów i instalacja Emmet!

Cześć! W dzisiejszym wpisie poruszę temat szybkiego kodowania – co zrobić aby szybciej i wydajniej pisać strony internetowe oraz skrypty www? Podstawowym i niezmiernie ważnym elementem webmaster’a lub front-end developer’a jest dobry edytor. Nie mam tu oczywiście na myśli notatnika – o nie! Wiele osób zaczynających swoją przygodę z kodowaniem stawia na początku na domyślny windows’owy notatnik i choć w przypadku tak prostych technologi jak HTML/CSS/JS nie ma to zbyt dużego znaczenia to jest to moim zdaniem duży błąd.  Dlatego pierwsze co powinniśmy zrobić to zadbać o komfort pracy – gdyż ta będzie wymagała od nas kilkugodzinnego siedzenie za biurkiem. Obecnie najlepszymi edytorami z jakimi miałem do czynienia są:

NotePad++ – Prosty i bardzo rozbudowany notatnik który oferuje podkreślanie składni, podpowiedzi, motywy czy dodatkowe pluginy dzięki którym staje się bardziej funkcjonalny. Sama aplikacja pisana jest w C++ dlatego uruchamia się w mgnieniu oka i równie szybko jest gotowa do działania a przy tym zajmuje mało miejsca. Dodatkowo NotePad++ jest dostępny w wersji portable a więc w wersji nie potrzebującej instalacji. Jego jedyną wadą jest brak możliwości pisania wieloliniowego co nie raz przydaje.

Brackets – Genialne narzędzie od firmy Adobe udostępnione na licencji open source. Zaawansowany program oferujący podgląd rzeczywisty, kolorowanie tekstu, pisanie wieloliniowe i wiele wiele więcej. Również jak w przypadku notepada’a możemy skorzystać z dodatkowych motywów oraz pluginów. Minusem oprogramowania jak dla mnie jest czas uruchamiania (musimy poczekać kilka cennych sekund zanim wszystko będzie gotowe do działania). Stąd oprogramowanie daje wrażenie ociężałego.

Sublime Text 2 – Kolejny ciekawy i naprawdę bogaty w funkcje program, niestety płatny. Oczywiście można korzystać z wiecznej wersji testowej która co jakiś czas atakuje nas komunikatem o możliwości zakupu programu. Jedno co naprawdę spodobało mi się w tej aplikacji to nawigacja. Po prawej stronie ekranu pokazuje nam się dodatkowy pasek dzięki któremu możemy szybko przemieszczać w tekście. Mimo modowania pozostałych edytorów żadna zmiana nie pozwoliła na dodanie równie funkcjonalnej i wygodnej w użytkowaniu linijki. Koniec końców posiada to samo co powyższe edytory.

Atom – Kultowy program do edycji tekstu ()

Wybór pozostawiam wam – osobiście nie mam ulubieńca ale najczęściej używam Notepad’a / Atom’a.
Kontynuując chciałbym wam jeszcze opowiedzieć trochę o wspomnianym wyżej dodatku Emmet gdyż to on w dużej mierze ułatwia nam koderom (front’endowcom) prace.
Tak więc ów plugin dodaje do naszego edytora (i jest on dostępny dla każdego z wyżej wymienionych) dodatkowe skróty myślowe.
Aby wam to lepiej wytłumaczyć zainstalujcie sobie go a następnie wpiszcie w edytor:

html:5

Koniecznie pamiętając aby ustawić kursor na końcu. Teraz naciśnijcie TAB (w przypadku problemów należy zmienić makra w ustawieniach edytora).
Emmet automatycznie zamieni ten urywek kodu w gotowy szkielet nowego dokumentu HTML 5:

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
</head>
<body>

</body>
</html>

Np. zapisując:

div#container>p*6>a[href=”#”]

Wynikowo, otrzymamy całkiem pokaźnych rozmiarów kod:

<div id=”container”>
<p><a href=”#”></a></p>
<p><a href=”#”></a></p>
<p><a href=”#”></a></p>
<p><a href=”#”></a></p>
<p><a href=”#”></a></p>
<p><a href=”#”></a></p>
</div>

Nieprawdaż, że to świetne? Ten mod przyśpieszy nieco twój współczynnik generowania kodu o jakieś 25% jak nie więcej.
Ponadto dostępne jest o wiele więcej skrótów dzięki którym możemy skrócić czas jaki potrzebujemy na napisanie naszej strony.
Oprócz HTML’a znajdziemy również skróty języka CSS czy XSL.
Całą ich listę znajdziecie w dokumentacji tutaj.
Co do instalacji samego pluginu – w zależności od programu, może się ona nieco różnić choć zasada jest podobna:

Notepad++ -> Pluginy -> PluginManager -> Show PluginManager -> Z listy dostępnych wtyczek wyszukujemy Emmet i zaznaczamy -> Install.

Brackets -> Menadżer rozszerzeń () -> W prawym górnym rogu wyszukujemy Emmet i wybieramy Zainstaluj.

Sublime Text 2 -> wchodzicie na  stronę -> kopiujecie kod -> uruchamiacie program -> z menu View wybieracie Show Console i wklejacie kod -> restartujemy aplikacje -> naciskacie kombinacje klawiszy Ctrl + Shift + P i wpisujecie Package Control: Install Package -> gdy wszystko się wykona wpisujecie Emmet i zatwierdzacie enterem.

Atom -> File > Settings > + Install, wpisz „emmet”, znajdź i zainstaluj dodatek – gotowe 😉

Dzięki takim działaniom przyśpieszycie sobie znacząco prace i będziecie zadowoleni zarówno wy jak i wasi przyszli klienci.
Jeżeli jesteście raczkujący to warto zainteresować się również szybkim pisaniem na klawiaturze bo to również przyniesie w późniejszym czasie wymierne korzyści.
Na koniec chciałbym jeszcze wspomnieć, że warto uczyć się skrótów klawiszowych – np. Ctrl + S (zapisz), Ctrl + N (nowy dokument) to nic nie kosztuje a takie działania przerodzą się w dobre nawyki które niejeden początkujący wam zazdrości.
Jeżeli znacie jeszcze lepsze tipsy na ułatwienie sobie życia piszcie śmiało w komentarzach!

Posted by Tpk on

Witaj, świecie – start blog’a o programowaniu i komputerach!

Witajcie!

Oto pierwszy startowy wpis blog’a o programowaniu, komputerach, pasjach i informatyce czyli życiu technika informatyka 😉 Jeżeli jesteście twórcami witryn, webmasterami, początkującymi programistami lub komputerowymi świrami czy kimkolwiek z poza tej grupy zapraszam Was do śledzenia na bieżąco nowych wpisów. Chciałbym wam przedstawić tutaj również swoje przemyślenia i uwagi odnośnie projektowania stron, utartych standardów, skrótów, trików i tipsów które niewątpliwie ułatwią wam prace z komputerem i nie tylko. Ten blog ma być pewnego rodzaju eksperymentem w którym podzielę się z wami moim doświadczeniem oraz wiedzą z zakresu programowania które zdobyłem dotychczas i które ciągle rozwijam. Czasami mogą się pojawić ciekawostki nie powiązane tematycznie ze stroną które mam nadzieje przypadną Wam do gustu. Tym krótkim wstępem oficjalnie otwieram mój skromny blog.