blog.pomek.pl

ToDo: Tu powinna być jakaś mądra, życiowa sentencja…

Dump Links #4

Kategoria: Dump Links Data publikacji:

Następne wydanie „Dump Links” zawiera serię artykułów i narzędzi do tworzenia podstawowej, a jednocześnie zaniedbanej warstwy naszej aplikacji - HTML & CSS. Każdy front-endowiec powinien zapoznać się z tymi artykułami, bo dzięki temu nasza aplikacja może wiele zyskać.

Na każdej stronie możemy wyróżnić kilka warstw - treść, prezentację oraz zachowanie. Te warstwy posiadają swoją nazwę - Progressive Enhancement. Znam również jeszcze jeden dobry artykuł na temat PE, w całości po polsku.

Ktokolwiek kto musiał wrócić do swojego projektu po jakimś czasie i nie pamiętał gdzie znajdują się elementy tego projektu, wie jak ważne jest utworzenie spójnej i przemyślanej architektury. Jakiś czas temu miałem okazję przeczytać artykuł „Semantic Markup with Foundation 5 and Sass”. Tobie również polecam go przeczytać. Autor pokazuje jak w sposób semantyczny i logiczny możemy organizować elementy w projekcie. Alternatywnie, możesz skorzystać z gotowego generatora o nazwie Yeoman. To narzędzie wygeneruje strukturę projektu za Ciebie.

Przejdźmy do prezentacji - często bazuje ona na arkuszach stylów (CSS). Nie wiem jak Ty, ale ja każdym projekcie próbowałem czegoś nowego, lepszego niż użyłem w poprzednim projekcie. Na początku, kiedy mamy mało kodu, nie mamy żadnego problemu z nawigacją pomiędzy plikami. Problem zwiększa się wprost proporcjonalnie do ilości napisanego kodu. Style CSS mogą również mogą być czytelne, uporządkowane i napisane obiektowo. Najbardziej w tym artykule lubię sekcję „The Namespaces”. Dzięki korzystaniu z przedrostków, żaden programista nie będzie wchodził innemu programiście w drogę.

CSS w połączeniu z SVG i JS-em oferuje potężne możliwości. Możemy tworzyć ciekawe animacje obramowania, efekty rozmycia obiektów lub mieszania obrazów. Ta ostatnia opcja jest bardzo dobrze znana użytkownikom pakietu Adobe Photoshop. Jeśli obszernie korzystasz z formatu SVG, rozważ optymalizację tych plików. Sugeruję, aby użyć localStorage w celu cache'owania naszych zasobów.

Akapit wcześniej wspomniałem o właściwości background-blend-mode. Niestety, jej wsparcie przez różne przeglądarki wciąż nie jest kompletne, więc nie możeby bezpiecznie tego użyć, ponieważ nie wszyscy użytkownicy zobaczą końcowy efekt. Na szczęście jest alternatywa. CamanJS to biblioteka, która pozwala manipulować obrazami. Nie zdradzając efektów, zapraszam do zapoznania się z artykułem „Manipulating Images on Web Pages with CamanJS”, który wyjaśni co to jest CamanJS i jak się to je.

Zakładam, że każdy z nas już używa preprocesorów do tworzenia arkuszy. Jeśli nie - powinieneś zapoznać się z zasadami tworzenia w SASS-ie. Dlaczego? odpowiedź jest równie prosta. Zaoszczędzisz sporo czasu, jak również sam kod będzie poukładany. Swoją drogą, sprawdź również możliwości i dostępne dyrektywy w CSS-ie. Czy jest coś, czego wcześniej nie znałeś?

Mam nadzieję, że po zapoznaniu się z powyższymi linkami, Twoja wiedza na temat tworzenia aplikacji choć odrobinę się powiększy. Zachęcam do pozostawienia jakiegokolwiek feedbacku w komentarzach. Jeśli chciałbyś, aby w następnej serii został umieszczony artykuł, który Twoim zdaniem jest interesujący, zostaw do niego link w komentarzu. Na pewno się z nim zapoznam.

Jeśli nie miałeś jeszcze okazji zapoznać się z poprzednimi wydaniami „Dump Links”, zachęcam do nadrobienia zaległości.

Do usłyszenia wkrótce!

PS: Czy spotkałeś się z problemem pozycjonowania ikon względem ich etykiet tekstowych? Mam na to rozwiązanie ;)