12 przydatnych narzędzi Frontend Developera

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!