W tym artykule przedstawię Ci zestaw narzędzi, które ułatwią Ci pracę. Część z nich wykorzystuję regularnie w trakcie swojej pracy, a część traktuję jako ciekawostkę, która jednak może okazać się dla Ciebie użyteczna.

Optimizilla

Optimizilla to narzędzie służące do szybkiego i prostego kompresowania zdjęć. Narzędzie to umożliwia ustawienie stopnia kompresji oraz natychmiastowego podglądu. Można również skompresować kilka zdjęć jednocześnie i wygenerować gotową paczkę.

Befunky

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

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.

Sizzy

Sizzy to narzę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.

Front-End Handbook

Jest to całkiem spore kompendium linków dedykowanych frontendowi. 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

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, to możesz wysłać request do autora, aby go dodał.

Hemingway Editor

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

To narzędzie 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

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

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.

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

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

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

CSS reference to 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

Jeśli 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:

• https://www.uplabs.com
• https://www.awwwards.com
• http://collectui.com
• https://land-book.com
• https://www.bestofthemes.com
• https://www.siteinspire.com/websites

Podsumowanie

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

Czy wiesz, że devszczepaniak.pl jest na Facebooku?

Chcesz otrzymywać informację o nowych wpisach zaraz po publikacji?
Koniecznie zaobserwuj devszczepaniak.pl na Facebooku.

Udostępnij wpis

Szukasz taniego i dobrego VPS? Skorzystaj z Mikrusa i przy zakupie odbierz dodatkowy miesiąc usługi za darmo!

Chcesz docenić moją pracę? Postaw mi kawę!