Dziś nikt już zapewne nie pisze stron w notatniku, nie porównuje kolorów „na oko’, czy składa sprite’y w Paincie. Obecnie sieć jest pełna wszelakich narzędzi, które skutecznie potrafią umilić i usprawnić naszą pracę web developera. Oszczędzamy nerwy, talary i … czas. A zatem coby go nie tracić, zapraszam na przegląd niektórych narzędzi których używam w swej pracy
1. Zeplin
Nr jeden na mojej liście. Niesamowicie skraca czas kodowania szablonów. Idealny do współpracy pomiędzy Grafikiem a Developerem. Jedyny minus, to na obecny czas nie posiada aplikacji desktopowej na Linuksa. Aplikacja ta pokazuje nam wyeksportowany przez grafika (z Photoshopa lub Sketch’a) widok projektu.
Elementy widoku są klikalne, po kliknięciu na interesujący nas obiekt, tekst czy grupę obiektów, po prawej stronie pokazują się nam wyrenderowane już style css (Less, Sass, SCSS, Stylus w zależności jakie wybierzemy) wraz z przykładową klasą. Jeśli będzie to tekst, to będziemy mogli go skopiować, poznać jego krój i wielkość fontu. Na głównym ekranie kiedy zaznaczymy jakiś obiekt dostaniemy informacje na temat jego długości, szerokości, odstępów od sąsiednich obiektów. tak jak to widać na zdjęciu poniżej:
Zeplin działa jako aplikacja na desctopy (Windows, Mac OS), jak i aplikacja webowa: https://zeplin.io/ . Na tej ostatniej niestety nie można eksportować plików z Photoshopa lub Skecha by przygotować projekt do kodowania. Zeplin ma rożne warianty cenowe. Istnieje jednakże wersja FREE z jednym aktywnym projektem, która wystarcza tak naprawdę dla początkującego Frontendowca lub gdy robimy jeden projekt na raz:) O tej aplikacji zrobię jeszcze osobny wpis
2. Koala
Pamiętam moją pierwszą przygodę z preprocesorami. Na początku był Less i z pomocą przyszedł mi darmowy program Koala, który to pozwalał kompilować Less, Scss etc. do zwykłego CSS i minifikować go.
Koala działa na wszystkich platformach, działa z prepocesorami Sass, LESS, ale także JavaScript. Przy czym dla JS pozwala tylko na minifikację/kompresję plików. Obsługuje też bardzo dobrą bibliotekę Compass
Jeśli nigdy nie zetknąłeś się jeszcze z preprocesorami to zacznij tę przygodę jak najszybciej a zobaczysz jak Twoja praca stanie się przyjemniejsza i wydajniejsza.
3. TypeWonder
Wybór odpowiedniego fonta jak potocznie można nazwać krój pisma, który błędnie nazywany jest czcionką to nie lada wyzwanie. Na szczęście jeśli nie jesteśmy designerami czy/lub grafikami problem zdaje się być dość odległy. Jednakże jeśli chcemy przetestować na naszej stronie, nowy krój to z pomocą przychodzi nam własnie TypeWonder. Aplikacja oferuje też wtyczkę wtyczkę do CHROME
Obsługa jest banalna:
- Wchodzimy na : http://typewonder.com/
- Wpisujemy adres swojej strony naciskamyj przycisk „Go!”.
- Wybieramy krój w okienku, które wyskoczy. Wyszukujemy fonty po nazwie lub mamy tez proste filtry. Oprócz tego możesz zmienić domyślny tekst na interesującą Cię frazę.
- Kiedy już wybierzemy naszego fonta, klikamy na Apply i radujemy oczy „nowym’ desingiem 🙂
4. Initializr
Jak często potrzebujemy gotowego pliku HTML wraz z podpiętymi, niezbędnymi skryptami czy stylami do treningu lub do początku wielkiego projektu. Aplikacja Initializr wyręcza nas w tym nudnym etapie projektu. Pozwala dołączyć wszystko co jest niezbędne do pracy. Za jej pomocą podepniemy Bootstrapa, sławną już Bibliotekę jQuery. Stworzone zostaną odpowiednie katalogi, nic tylko stworzyć i … tworzyć:) Polecam
Seria z narzędziami Frontendowca będzie się stale rozszerzać o użyteczne w tej pracy narzędzia, postaram się te najbardziej użyteczne zaszczycić wpisem ,a w nim opisem funkcji i to jak go używam:)
Najnowsze komentarze