Reaktywacja animacji SVG za pomocą JavaScript

Niedawno w ramach konkursu  organizowanego przez Kodu.je wykonałam projekt animacji grafiki SVG. Mogę się pochwalić, że jury konkursu przyznało mojej animacji wyróżnienie, z czego się bardzo cieszę. 🙂 Efekty mojej pracy można oglądać na CodePenie:

See the Pen SVG animation by SowaProgramuje (@sowaProgramuje) on CodePen.

Jak dodać klasę na elemencie SVG za pomocą JavaScript?

Podczas pracy nad tym projektem napotkałam na pewien problem. Chciałam żeby klasa ze zdefiniowaną animacją była nadawana, a następnie usuwana po konkretnym interwale czasowym. W ten sposób chciałam ponownie zainicjować animację, dlatego potrzebowałam nadać klasę elementowi SVG za pomocą JavaScript. Ku mojemu zaskoczeniu .className() nie zadział

Trochę mi zajęło czasu, żeby rozwiązać ten problem, z pomocą przyszedł StackOverflow. Dotarłam do informacji, że na elemencie SVG klasę w czystym JavaScript można nadać za pomocą .element.classList.add().

Pamiętaj, manipulacja SVG różni się od manipulacji HTML. Jest to dość obszerny i ciekawy temat warty zgłębienia.

Reaktywacja animacji SVG za pomocą JavaScript

Animacja w CSS może być nieskończona (animation-iteration-count: infinite;), bądź wykonana konkretną ilość razy (animation-iteration-count: 2;). Animację można również opóźnić (animation-delay: 200ms;), ale działa to jedynie raz, na początku animacji. Stąd pojawiła się potrzeba napisania funkcji, która pozwoli na zatrzymanie i ponowne wznowienie animacji, co umożliwi jej zapętlenie i jednocześnie dodanie interwałów, w których animacja nie jest wykonywana.

Przykładowo: animujemy symbol Yin yang i chcemy, żeby obrócił się o 360 stopni, zatrzymał się się na 2 sekundy i następnie ponownie wykonał obrót o 360 stopni oraz chcemy aby ten cykl się powtarzał w nieskończoność.

See the Pen SVG animation reactivate by SowaProgramuje (@sowaProgramuje) on CodePen.

Aby uzyskać taki efekt napisałam funkcję w JS. Przyjmuje ona 4 argumenty:

  • id elementu, który chcemy animować – w kodzie nadajemy id na danym elemencie
  • animationTime – czyli całkowity czas animacji; i tutaj uwaga – jeśli wykonują się np. 3 powtórzenia  (animation-iteration-count: 3;), musimy pomnożyć czas trwania jednej animacji (animation-duration: 500ms) przez ilość powtórzeń. W tym przypadku animationTime wyniesie 1500ms.
  • interval – czas pomiędzy zakończeniem jednego powtórzenia animacji a rozpoczęciem kolejnego
  • animationDelay – opóźnienie animacji; dlaczego się zdecydowałam na to rozwiązanie? Napotkałam na buga, wydaje mi się, że był związany z ładowaniem się stylów oraz funkcją .setTimeout(), ale niestety nie byłam sama w stanie zidentyfikować problemu (jak wiele muszę jeszcze się nauczyć!). Domyślam się, że nie jest to najpiękniejsze rozwiązanie, może ktoś będzie umiał jakoś inaczej to rozgryźć. Należy jednocześnie pamiętać, że animation-delay w CSS powinien wynosić zero.

W funkcji wzięłam pod uwagę to, że dany element może mieć już wcześniej nadaną klasę. Nie nadpisuję jej, tylko dodaję dodatkową klasę, która jest taka sama jak id. Tutaj niestety należy pamiętać, że przy takim rozwiązaniu klasa z animacją zadeklarowaną w CSS musi być taka sama jak id elementu. Nie jest to do końca optymalne rozwiązanie, dlatego zastanawiam się jak można to udoskonalić. Jak masz jakieś sugestie to napisz w komentarzu.

Myślę, że zagadnienie animacji plików SVG jest bardzo ciekawe i na pewno będę je jeszcze zgłębiać. Jeśli masz jakieś uwagi lub pytania, daj znać w komentarzu 🙂

Chciałam Ci podziękować za to, że jesteś na tym blogu 🙂

10 błędów początkujących Frontend Developerów część 1

błędy frontend deweloperów

W programowaniu od samego początku warto dbać o dobre praktyki. Jednak czasami w trakcie nauki można przeoczyć lub zbagatelizować pewne kwestie. Stąd u początkujących Frontend Developerów pojawiają się błędy w kodzie. Razem z Mariuszem Bugajskim, autorem bloga blog.bugajsky.pl i zwycięzcą konkursu Daj się Poznać 2017, zdecydowaliśmy się napisać serię postów o tej tematyce, aby pomóc w eliminacji takich błędów.

Pamiętaj:

  1. Unikaj nadużywania id
  2. Unikaj nadawania stylów elementom w HTML
  3. Nie ładuj wszystkich skryptów w sekcji head dokumentu
  4. Nadawaj nazwy w języku angielskim
  5. Zmieniaj nazwy klasy/id/funkcji we wszystkich miejscach gdzie są używane
  6. Uważaj na ścieżki do plików
  7. Pamiętaj o semantyce
  8. Strzeż się literówek
  9. Pamiętaj o initial-scale=1 w meta tagu viewport
  10. Unikaj niepotrzebnego zagnieżdżania i nadużywania tagów div
  11. Bonus 😉

Poniżej znajdziesz wyjaśnienie do każdego z tych podpunktów.

1. Unikaj nadużywania id

Nie wszystkie elementy w Twoim kodzie HTML muszą mieć id. Nadanie id powinno być przemyślane i mieć swój konkretny cel. Jeśli nie zamierzasz stylować danego elementu używając id, bądź manipulować nim poprzez użycie JavaScript, nie jest ono potrzebne. Pamiętaj również, że id jest unikatowe – tylko jeden element na stronie może mieć dane id.

Można np. używać pseudoselektorów (tj. first-child), które umożliwiają wybieranie elementów bez nadawania im klasy czy id.

See the Pen Good example of naming by SowaProgramuje (@sowaProgramuje) on CodePen.

Tutaj stylujemy bezpośrednie dzieci elementu o klasie .menu oraz korzystamy z pseudoselektora, dzięki któremu nie musimy stylować elementu przez id.

2. Unikaj nadawania stylów elementom w HTML

Pamiętaj, że HTML jest językiem do opisywania struktury, dlatego unikaj dodawania stylów na poszczególnych elementach za pomocą atrybutu <style> (style inline). Najlepiej zapisywać style w jednej regule w CSS.

Dlaczego należy tak robić?

Ponieważ jest to antypattern, czyli łamanie podstawowych założeń. W razie jakiś problemów z kodem będzie Ci dużo łatwiej go debugować, jeśli style będą tylko w CSSie. Nie będziesz musieć przeszukiwać dwóch różnych plików lub co gorsza nadpisywać kodu. To prowadzi do bałaganu, a tego każdy Frotend Developer powinien unikać jak ognia.

Czasami bywa tak, że manipulujemy kodem używając do tego JavaScript. Na przykład po kliknięciu na button zmieni on kolor z czerwonego na niebieski. W tym przypadku najlepiej jest nadać elementowi klasę, która będzie nadawała mu dane styl.

Używając jQuery i metody .css() nadajemy atrybut w HTML

See the Pen Change button color jQuery by SowaProgramuje (@sowaProgramuje) on CodePen.

Używając metody .addClass() nie dodajemy stylów inline tylko klasę

See the Pen NgYeXR by SowaProgramuje (@sowaProgramuje) on CodePen.

3. Nie ładuj wszystkich skryptów w sekcji head dokumentu

Jeśli nie potrzebujesz, aby kod JavaScript był ładowany w sekcji head, należy umieścić go przed tagiem zamykającym body. Wynika to z tego, że skrypty ładują się synchronicznie, czyli jeśli masz przykładowo 5 różnych skryptów które ładujesz w sekcji head to muszą się one w całości pobrać zanim w ogóle dojdzie do budowania DOM, co znacznie opóźni ładowanie strony internetowej. Dlatego jeśli nie potrzebujesz, aby skrypt odpalił się przed załadowaniem DOM umieszczaj go przed </body>.

4. Nadawaj nazwy w języku angielskim

W programowaniu bardzo duży nacisk stawia się na uniwersalność kodu. Stąd nadawanie nazw klas, funkcji itd. w innym języku niż angielski może przysporzyć problemy. Wyobraź sobie co by było, gdybyś trafił / trafiła do projektu, w którym nazwy pisane są w języku Swahili. Mogłoby być dość ciężko ze zrozumieniem co w danym kodzie się dzieje. Dlatego pamiętaj, używaj języka angielskiego, obecnie jest to standard w tej branży i tego się trzymajmy. 😉 Więcej o nadawaniu nazw pisałam tutaj.

5. Zmieniaj nazwy klasy/id/funkcji we wszystkich miejscach gdzie są używane

Twój kod nie działa, a chwilę wcześniej zmieniłeś / zmieniłaś klasę bądź id jakiegoś elementu lub nazwę funkcji? Istnieje spore prawdopodobieństwo, że nazwa nie została uaktualniona wszystkich miejscach, w których jest używana. Jeśli chcesz zmienić nazwę – użyj wyszukiwania we wszystkich plikach i zastąp konkretną nazwę.

6. Uważaj na ścieżki do plików

Nie wyświetla się jakaś grafika w Twoim projekcie? A może nie ładują Ci się style? Pierwsza rzecz jaką należy sprawdzić w takiej sytuacji to ścieżka do pliku, którą podałeś/podałaś. Sprawdź też czy nie zrobiłeś literówki w nazwie pliku lub folderu, oraz czy rozszerzenie pliku się zgadza np.: pułapką jest .jpg oraz .jpeg.

<img src=”heroimage.jpg”> – w przypadku, gdy plik heroimage.jpg znajduje się w tym samym folderze co dany plik HTML

<img src=”folderName/heroimage.jpg”> – w przypadku, gdy heroimage.jpg w podfolderze folderu, w którym jest plik HTML

<img src=”/folderName/heroimage.jpg”> – w przypadku, gdy heroimage.jpg jest w rootcie

<img src=”../heroimage.jpg”>w przypadku, gdy heroimage.jpg poziom wyżej (gdy musisz się cofnąć)

7. Pamiętaj o semantyce

Semantyka to dostosowanie tagów w htmlu do tego czym są dane elementy na stronie tj. jeśli chcesz zrobić listę używaj tagu <ul> bądź <ol> a nie <p>.

To nie jest semantyczny kod:

See the Pen Non semantic code by SowaProgramuje (@sowaProgramuje) on CodePen.

To jest semantyczny kod:

See the Pen Example of semantic code by SowaProgramuje (@sowaProgramuje) on CodePen.

To nie zawsze jest takie oczywiste np.: jeśli tworzymy menu to również używajmy listy, a nie divów i paragrafów. Tak samo jeśli chcemy opisać input to używaj tagu <label> a nie <p>, ponieważ <label> jest stworzony właśnie do tego.

Nie nadużywaj tagu <h1>, jest zarezerwowany dla najważniejszych treści na stronie np. : tytuł artykułu.

8. Strzeż się literówek

Literówki to kolejny powód dla którego Twój kod może nie działać. Zanim poprosisz o pomoc starszego programistę upewnij się, że dobrze przepisałeś nazwę klasy, funkcji czy jakiegoś atrybutu. Mi osobiście kilka razy zdarzyło się zamiast src=” ” napisać scr=” ” i potem się bardzo dziwiłam, że zdjęcie się nie ładowało.

Jak uniknąć literówek?

  • Korzystaj z wtyczek do edytorów, które automatycznie podpowiadają konkretne własności, wartości, nazwy metod i funkcji.
  • Kopiuj nazwy klas, id – w ten sposób unikniesz niepożądanych problemów

9. Pamiętaj o initial-scale=1 w meta tagu viewport

Twoja strona nie jest responsywna pomimo, że dodałeś media queries? Upewnij się, że w sekcji head dokumentu masz meta tag:

<meta name=”viewport”, content=”initial-scale=1.0”, content=”width=device-width” >

Dlaczego jest to potrzebne?

To powoduje, że strona skaluję się do takiej szerokości jakiej jest dane urządzenie, na którym wyświetlana jest strona.

Na portalu CSS-tricks jest artykuł na ten temat.

10. Unikaj niepotrzebnego zagnieżdżania, a także nadużywania tagów div

Struktura w HTML powinna być wykonana jak najmniejszą ilością elementów. Jeśli potrzeby dwie kolumny i w każdej paragraf to nie zagnieżdżaj ich w divy tylko nadaj im szerokość po 50%.  Tak samo jeśli chcesz aby np. span zajmował całą szerokość rodzica, to nie wrappuj go w diva tylko nadaj mu display block.

Przykład zbyt dużego i niepotrzebnego zagnieżdżenia:

See the Pen Divitis by SowaProgramuje (@sowaProgramuje) on CodePen.

Poprawny sposób:

See the Pen Paragraf by SowaProgramuje (@sowaProgramuje) on CodePen.

Rezultat jest ten sam, ale w przykładzie drugim mamy bardziej przejrzystą strukturę.  Trzymajmy się zasady KISS (Keep it simple Stupid)

Bonus! 🙂

11. Usuwaj martwy kod

Martwy kod (ang. dead code) to fragment kodu, który nic nie wnosi do naszego projektu: tj. kod który jest zakomentowany bądź np. funkcja, która nigdzie nie jest i nigdy nie zostanie wykorzystana. Jeśli jakiś fragment kodu nie jest potrzebny należy go usunąć. Najlepiej jest to zrobić podczas refactoringu.

Podsumowanie

Postaraj się aby dbanie o dobrą jakość kodu stało się Twoim nawykiem. To naprawdę nie kosztuje wiele, a robi ogromną różnicę.

Spodobał Ci się ten artykuł i chcesz dowiedzieć się więcej? Koniecznie odwiedź bloga Mariusza Bugajskiego, tam niebawem znajdziesz nasz kolejny wartościowy post z tej serii.

Masz jakieś pytania? Daj znać w komentarzu

12 przydatnych narzędzi Frontend Developera

frontend developer narzędzia

frontend developer narzędzia

Oto 12 darmowych narzędzi online, które są przydatne w pracy Frontend Developera.

1. Generator cieni

Problem z tworzeniem cieni na elementach w CSSie? Korzystaj z tego generatora, zdecydowanie ułatwia sprawę 😉

generator box-shadow
źródło: http://www.cssmatic.com/box-shadow

2. Generator gradientów

Potrzebujesz na swojej stronie użyć gradientu? Nie ma sprawy, oto proste narzędzie do mieszania kolorów i generowania kodu.

generator gradientów
źródło: http://www.colinkeany.com/blend/

3. Cubic Bézier generator

Dla fanów CSSa i animacji polecam ten generator krzywych Béziera. Dzięki nim twoje animacje będą ciekawsze i bardziej efektowne.

krzywa beziera
źródło: http://cubic-bezier.com/

4. Lorem impsum

Znajdziesz tu przykładowe teksty: paragrafy krótkie i długie, a także elementy list. Wystarczy tylko skopiować i wkleić do swojego projektu.

lorem ipsum generator
źródło: http://lorem2.com/

5. Font awesome

Szukasz darmowych ikon? Font awesome to miejsce, które ci się bardzo spodoba. Zostało stworzone z myślą o frontend developerach. Ikony dostępne jako czcionka. Wersja premium jest płatna.

font awesome
źródło: http://fontawesome.io/

6. Google fonts

Szeroki wybór darmowych czcionek – prosto do Twojego projektu.

google fonts
źródło: https://fonts.google.com/

7. Walidator

Chcesz mieć pewność, że Twój kod jest poprawny? Skorzystaj z walidatora W3C (World Wide Web Consortium). Wklej swój HTML i sprawdź czy nie masz żadnych błędów. Pliki CSS możesz sprawdzać pod tym adresem: https://jigsaw.w3.org/css-validator/

walidator
źródło: https://validator.w3.org/

8. Can I use… ?

Zastanawiasz się czy to co chcesz użyć w swoim kodzie jest wspierane przez wszystkie przeglądarki? Wejdź na Can I use, tam znajdziesz potrzebne informacje.

can i use
źródło: https://caniuse.com/

9. Compress jpg

Kompresja plików jest istotna pod kątem optymalizacji stron internetowych. Warto o to zadbać z wielu powodów m.in. prędkość ładowania stron będzie dużo szybsza.

compress jpg
źródło: http://compressjpeg.com/

10. Pexels

Portal z darmowymi stockowymi zdjęciami. Bez obawy możesz je wykorzystywać do celów prywatnych jak i komercyjnych. Zdjęcia mają licencję Creative Commons Zero (CC0), co oznacza, że nie musisz podawać autora zdjęcia.

pexels
źródło: https://www.pexels.com/

11. HTTP status dogs

Co łączy protokół HTTP i psa? Kod odpowiedzi! Jeśli masz problem z zapamiętaniem znaczenia kodu odpowiedzi koniecznie odwieź tą stronę 😉

Wolisz koty? Zerknij tutaj 😉

http status dogs
źródło: https://httpstatusdogs.com/

12. Stack Overflow

Nie jest to do końca narzędzie, ale prawie każdy developer z tego korzysta. Masz problemu z kodem? Poszukaj odpowiedzi na StackOverflow. Jak nie znajdziesz rozwiązania zawsze możesz zadać pytanie, deweloperzy z całego świata gromadzą się tam aby pomagać sobie nawzajem. 

stack overflow
źródło: https://stackoverflow.com/

Dodatkowo:

13. Avocode

Aplikacja do dzielenia się plikami graficznymi, kooperacji, generowania snippetów kodu, eksportowania grafik, mierzenia paddingów, marginesów. W przeciwieństwie do poprzednich narzędzi ta aplikacja płatna, ale ma darmowy okres próbny. Więcej o Avocode pisałam w tym artykule.

Avocode
źródło: https://avocode.com/

 

A jakie jest Twoje ulubione narzędzie, które pomaga ci w pracy? Podziel się  w komentarzu!