Zestaw przydatnych narzędzi dla web developera

W tym artykule przedstawię ci całkiem spory zestaw narzędzi, które ułatwią Ci pracę. Część z nich wykorzystuję regularnie w trakcie swojej pracy, natomiast część traktuję jako ciekawostkę. Nie przedłużając, przejdźmy do narzędzi:

Optimizilla

https://imagecompressor.com – narzędzie to służy do szybkiego, prostego kompresowania zdjęć. Optimizilla umożliwia nam ustawienie stopnia kompresji oraz natychmiastowego podglądu. Możemy również skompresować kilka zdjęć jednocześnie i wygenerować gotową paczkę.

Befunky

https://www.befunky.com – jeśli potrzebujesz nałożyć proste filtry graficzne lub tekst na zdjęcie, a nie chcesz używać skomplikowanych programów graficznych, to Befunky będzie dobrym wyborem. W swojej darmowej wersji oferuje takie opcje jak przycinanie, kadrowanie, skalowanie, wcześniej wspomniane filtry i tekst oraz proste ramki i kolaże. Oprócz tego posiada ono wersję Plus, która oferuje całkiem szerokie spektrum możliwości, z których jednak nie miałem okazji skorzystać. W ramach ciekawostki – miniatury na ten blog tworzę właśnie w Befunky.

Ngrok

https://ngrok.com – jeśli tworzysz stronę na lokalnym serwerze i chcesz komuś pochwalić się efektami swojej pracy, to możesz skorzystać z Ngrok. Narzędzie to pozwala “wystawić na świat” naszą lokalną aplikację. Instalacja i konfiguracja trwa dosłownie chwilę i jest stosunkowo prosta. Płatne warianty oferują znacznie więcej możliwości takie jak tworzenie whitelist z adresami IP, czy też tworzenie subdomen.

Narzędzia - Sizzy

Sizzy

https://sizzy.coSizzy to marzędzie pozwala nam na szybkie i wygodne przetestowanie strony na różnych urządzeniach i rozdzielczościach. Po podaniu adresu strony otrzymujemy widoki dla różnych urządzeń mobilnych. Oprócz tego możemy również na każdym z widoków wyświetlić klawiaturę systemową, oraz obracać obraz do pozycji horyzontalnej, tak jak na rzeczywistym urządzeniu. Aplikacja oferuje 8 widoków, w tym widoki dla iPada, iPhone 6, iPhone 7 Plus czy też Nexus 7.

Front-End Hanbook

https://frontendmasters.com/books/front-end-handbook/2018 – jest to całkiem spore kompedium linków odnośnie frontendu. Mimo, tego, że jest to źródło z 2018 to jest ono jak najbardziej aktualne. Oprócz zestawów narzędzi są tam też infografiki i wykresy oraz linki do wartościowych artykułów.

Devhints.io

https://devhints.io – Znajdziesz tam zestawy gotowych snippetów z popularnymi fragmentami kodu, konfiguracjami, czy poleceniami. Devhints może się przydać, jeśli potrzebujemy na szybko odświeżyć sobie wiedzę, lub chcemy uniknąć googlowania i przeszukiwania wątków na Stack Overflow. Jeśli nie znajdziesz potrzebnego Ci snippetu możesz wysłać request do autora, aby go dodał. 🙂

Narzędzia - Hemingway Editor

Hemingway Editor

http://www.hemingwayapp.com – jeśli tworzymy treści na stronę w języku angielskim, a nie jesteśmy drugim Szekspirem, to Hemingway Editor może okazać się bardzo pomocny. Edytor ten nie tylko wskaże nam błędy, ale też wróci uwagę na inne, równie ważne aspekty językowe. Edytor wskaże nam zdania, które mogą być trudne w odczytaniu i zrozumieniu, podpowie nam kiedy użyć strony biernej, podpowie prostsze alternatywy dla wyrazów, czy zaznaczy powtórzenia. Jeśli ktoś chce nauczyć się dobrze pisać w języku angielskim, to nie pożałuje, jeśli skorzysta z tego edytora!

whatwebcando.today

https://whatwebcando.today – to narzędzia pozwala na sprawdzenie jakie API są dostępne w przeglądarce z jakiej obecnie korzystamy. Oprócz tego po wybraniu danego API otrzymamy zestaw instrukcji w jaki sposób możemy je wykorzystać. Polecam uruchomić aplikację na desktopie, a następnie na urządzeniu mobilnym i sprawdzić jakie możliwości oferują różne urządzenia. Oprócz tego mamy dostęp też do danych i wykresów pokazujących jak wygląda wsparcie przeglądarek dla danych API.

cantunsee.space

https://cantunsee.space – ta aplikacja to nie tyle narzędzie, co test naszej spostrzegawczości. Za każdym razem otrzymujemy 2 fragmenty widoku aplikacji i musimy wybrać właściwy, zgodny ze standardami UI. Czasami sprawa jest prosta i różnicę widać na pierwszy rzut oka, jednak im dalej w las, tym więcej drzew. Niektóre z przykładów potrafią różnić się grubością linii o 1-2 piksele, czy też delikatnie podkręconym cieniem, i wybranie właściwego nam sprawić niemały kłopot. Do każdego przykładu po dokonaniu wyboru otrzymujemy wyjaśnienie wraz z podaniem właściwej odpowiedzi. Osobiście dotarłem do samego końca z całkiem dobrym rezultatem i dzięki temu w mojej codziennej pracy znacznie bardziej zacząłem zwracać uwagę na drobne detale, które połączone tworzą piękną całość.

regex101

https://regex101.com – narzędzie to już pojawiło się na moim blogu w artykule o wyrażeniach regularnych w JavaScript. Aplikacja oferuje zarówno instrukcję do tworzenia wyrażeń regularnych, jak i gotowe środowisko do pisania i testowania wyrażeń. Dodatkowo po stworzeniu wyrażenia otrzymujemy jego szczegółowe objaśnienie.

Narzędzia - checklista

frontendchecklist.io

https://frontendchecklist.io – proces tworzenia witryny internetowej często potrafi być długi, żmudny i bardzo skomplikowany. Konsekwencją tego jest to, że o niektórych rzeczach możemy po prostu zapomnieć. Z pomocą przychodzi Front-End Checklista. Lista ta zawiera 88 punktów, o których należy pamiętać podczas tworzenia strony WWW – całkiem sporo co nie? Oprócz tego każdy punkt ma zaznaczony priorytet. Dodatkową zaletą jest możliwość tworzenia własnych checklist i generowania raportów.

gitignore.io

https://www.gitignore.io – wiem, że do tworzenia pliku .gitignore nie jest potrzebna wyższa matematyka, jednak i do tego powstało gotowe narzędzie. Jedyne co podajemy to informacje takie jak system operacyjny, czy środowisko programistyczne i po chwili możemy cieszyć się gotowym plikiem .gitignore.

Clip path maker

http://bennettfeely.com/clippy – to proste narzędzie pozwala nam na automatyczne wygenerowanie kodu css korzystającego z clip-path, czyli narzędzia do tworzenia customowych kształtów za pomocą CSS. Do dyspozycji dostajemy już gotowe kształty, ale dostajemy też możliwość modyfikowania ich i tworzenia własnych.

cssreference.io

https://cssreference.io – przystępna, krótka i schludna dokumentacja dla CSS’a. Osobiście wolę korzystać z MDN’a, natomiast na pewno komuś przypadnie do gustu! Do każdej właściwości CSS otrzymujemy obrazek lub animację z przykładem.

Carbon

https://carbon.now.sh – jesli potrzebujesz stworzyć fragment kodu w postaci obrazka, to Carbon jest narzędziem idealnym do tego celu. Aplikacja posiada wsparcie dla wielu języków oraz gotowy zestaw różnych motywów, dzięki którym możemy zmodyfikować nasz snippet. Pierwotnie na moim blogu korzystałem właśnie z tego narzędzia. Problemem natomiast był brak możliwości kopiowania kodu (w końcu to tylko obrazek), przez co zrezygnowałem z tego narzędzia, na rzecz dedykowanej biblioteki do umieszczania fragmentów kodu na stronie.

Inspiracje dla designerów

Na sam koniec wpisu zostawiłem listę stron z inspiracjami dla designerów i developerów, z których można czerpać garściami podczas tworzenia nowych projektów:

Podsumowanie

Mam nadzieję, że poznałeś dziś choć jedno narzędzie, które faktycznie Ci się przyda i które będziesz wykorzystywać w swojej pracy. Napisz mi proszę w komentarzu jakie jeszcze narzędzia znasz i są godne polecania!