W tym artykule poznasz 20 narzędzi, które mogą okazać się przydatne w Twoich kolejnych projektach. Nie przedłużając, przejdźmy do pierwszego z nich.
Siema.js
Siema.js to lekka (2kb) karuzela autorstwa Pawła Grzybka. Plugin nie posiada żadnych stylów, więc będziesz mógł bez problemów dodać swoje.
IE Tab
IE Tab to addon do Google Chrome, który umożliwia szybki test strony w Internet Explorer. Dodatek tworzy w przeglądarce nową kartę, która działa jak IE. Niestety, rozszerzenie działa tylko do Chrome w wersji 45.
Shave
Shave to prosty plugin służący do przycinania tekstu. Dzięki temu tekst zawsze zmieści się w wyznaczonym kontenerze.
Blisk
Blisk – przeglądarka stworzona z myślą o Web Developerach. Zawiera emulatory telefonów i tabletów, odświeżanie strony po zmianach w pliku i zaawansowane opcje debugowania.
MixItUp
MixItUp to bardzo wydajna biblioteka JavaScript, która umożliwia animowane filtrowanie i sortowanie elementów.
DomFlags
Przyśpiesz stylowanie z addonem do Chrome – DomFlags, który pozwala na oflagowanie elementów DOM.
Fontello
Fontello to świetne narzędzie, które pozwala na wybranie dowolnych ikon i pobranie ich w formie webfonta.
Animsition
Animsition to plugin umożliwiający płynne przejścia między podstronami. Oferuje kilkadziesiąt różnych animacji.
GTmetrix
GTmetrix to narzędzie służące do pomiaru prędkości strony. Dzięki niemu szybko przyśpieszysz każdą stronę.
SnappySnippet
SnappySnippet to addon Chrome, który pozwala na wyciągnięcie kodu HTML i CSS z dowolnego elementu i przesłanie ich do Codepen/jsFiddle.
Face Detection
Face Detection to plugin jQuery pozwalający na wykrywanie twarzy na zdjęciach i filmach. Działa zaskakująco szybko i jest w pełni darmowy.
Dirty Markup
Dirty Markup pozwala uporządkować kod HTML/CSS/JS przy użyciu tylko jednego kliknięcia. Oferuje kilka opcji wcięć, długość linii i typ wcięcia.
MJML App
MJML App to edytor, który pozwala na szybkie tworzenie responsywnych szablonów email. Umożliwia dwie opcje podglądu wiadomości – w wersji desktopowej i mobilnej.
Modaal
Modaal to rozbudowany i elastyczny plugin do tworzenia okien modal. Posiada tryb pełnoekranowy, video, galerię i kilka innych.
RE-Build
RE-Build to narzędzie, które pozwala na budowę wyrażeń regularnych „naturalnym” językiem.
intercooler.js
Użycie AJAX’a w atrybutach HTML? Dzięki intercooler.js to możliwe.
Responsive Web Design Tester
Responsive Web Design Tester to dodatek do Chrome pozwalający na testowanie reponsywności.
annyyang
annyyang to lekka biblioteka JS, która umożliwia sterowanie głosowe stroną.
Comment.me
Comment.me pozwala na szybkie wygenerowanie zrzutu strony, na który można nanosić uwagi.
Progress Button Styles
Progress Button Styles to zestaw przycisków, które pokazują pasek postępu.
20 przydatnych narzędzi Webmastera #3
Przeczytaj artykuł
IE Tab to tylko z Chrome 45 i starszym, na nowszym polityka bezpieczeństwa nie pozwala uruchomić pluginu.
Ostatnia aktualizacja z plikiem „iehelper.exe” do pobrania też jakoś nie chce działać, żadna strona się nie ładuje.
Dzięki za informację, uzupełniłem wpis 🙂
I jeszcze animista.net – gigantyczny zestaw niestandardowych animacji 🙂
Świetne narzędzie! 🙂
jedyne czego bym się przyczepił to re-build do tworzenia wyrażeń regularnych… właśnie zapoznałem się dokładnie z dokumentacją tego na git i szczerze mówiąc nie rozumiem w ogóle sensu stosowania tego narzędzia zamiast po prostu zwykłej składni regexp. Zamiast uczyć się składni RegExp (którą później możemy wykorzystać w innych językach programowania i nie tylko) to uczymy się nowych elementów, specyficznych tylko dla re-build.
var amount = RE.matching("$").then.capture( RE.oneOrMore.digit .then.noneOrOne.group(".", RE.oneOrMore.digit) ).regex; //kontra: var amount = /$(d+(?:.d+)?)/Gdzie tu sens stosowania czterolinijkowego kodu w miejsce krótkiego regexp?
W takim krótkim przykładzie sensu nie ma, ale przy dłuższych wyrażeniach re-build znacznie poprawia czytelność i ułatwia debugowanie.