Biblioteka do której link umieściłem we wstępie jak sam jej opis mówi, jest narzędziem pozwalającym na łatwe kontrolowanie przepływu kodu JavaScript w zależności od aktualnie aktywnego „breakpointu”.
Można by zapytać czym w takim razie są owe breakpointy postaram się wyjaśnić to jak najdokładniej potrafię. Wyobraźmy sobie sytuację w której piszemy stronę internetową, jednak aby wyświetlała się ona poprawnie musimy mieć mechanizm pozwalający na ukrycie lub wyświetlenie niektórych elementów tylko i wyłącznie dla określonego rozmiaru ekranu, jest to naturalna potrzeba i większość frameworków CSS takich jak bootstrap taki mechanizm posiada.
Przykładowe breakpointy mogłyby wyglądać tak:
@media (max-width: 180px) { .pokaz-dla-malych-urzadzen { display: block; } .ukryte-na-malych-urzadzeniach { display: none; } } @media (min-width: 181px){ .pokaz-dla-malych-urzadzen { display: none; } .ukryte-na-malych-urzadzeniach { display: block; } }
podsumowując powyższy zapis oznacza, że dla ekranu o szerokości <=180 pikseli elementy z klasą pokaz-dla-malych-urzadzen mają ustawioną właściwość display na block dla ekranów o szerokości >=181 pikseli te same elementy będą ukryte (display:none) w zasadzie to cała teoria i magia owych breakpointów.
Przejdźmy zatem do rzeczy, co z kodem JavaScript, tutaj wkracza przytoczona przeze mnie biblioteka Responsive Bootstrap Toolkit.
Myślę że nie ma sensu rozwodzić się nad tym jak ta biblioteka działa, najważniejsze to stwierdzić o niej 2 zasadnicze rzeczy: po pierwsze biblioteka naprawdę działa, po drugie choć w nazwie biblioteki widnieje bootstrap to możemy jej używać z każdym frameworkiem CSS. Na stronie repozytorium, widnieją doskonałe przykłady tego jak biblioteki używać, więc uznałem, że nie ma sensu w przepisywaniu tego jeszcze raz.
Ponad rok temu opisywałem wam inicjatywę Josha Lockharta, która ma za zadanie zebranie w jednym miejscu wszystkich najlepszych praktyk i sprawdzonych źródeł wiedzy związanych z PHP. Inicjatywa spodobała mi się do tego stopnia, że umieściłem na blogu baner promujący ten projekt.
Kwestą czasu było pojawienie się podobnych projektów dotyczących innych języków i wychodząc z tego właśnie założenia znalazłem niedawno projekt HTML & CSS The Right Way. Projekt ten prowadzony jest przez Reinora Boulangera, któremu przyświecał bardzo podobny cel co Lokhartowi czyli zgromadzenie sprawdzone źródła i najlepsze praktyki z tworzeniem dotyczących wybranej technologii. W swoim projekcie pan Boulanger nie ogranicza się tylko do opisu zagadnień związanych z HTML i CSS – wspomina także o JS – i właśnie JavaScript będzie dotyczył kolejny projekt z cyklu „The Right Way”.
JavaScript The Right Way jest projektem Williama Oliveira i sporej ilości innych osób (pełna lista na stronie projektu). Jak wiadomo JS już od dawna jest wykorzystywany do zupełnie innych celów niż pierwotnie przewidzieli to jego projektanci – tak więc na stronie projektu znajdziecie także informacje o silnikach używanych do tworzenia gier uruchamianych w przeglądarce a także sporo materiałów dotyczących node.js.
Nie pozostaje więc nic innego tylko czytać i wprowadzać w życie dobre praktyki programowania – to zawsze procentuje. Do przeczytania już wkrótce!
The post Front – End The Right Way appeared first on Michał Janicki.
]]>