20 przydatnych narzędzi Webmastera #1

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.

siema

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.

ietab

Shave

Shave to prosty plugin służący do przycinania tekstu. Dzięki temu tekst zawsze zmieści się w wyznaczonym kontenerze.

shave

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.

blisk

MixItUp

MixItUp to bardzo wydajna biblioteka JavaScript, która umożliwia animowane filtrowanie i sortowanie elementów.

mixitup

DomFlags

Przyśpiesz stylowanie z addonem do Chrome – DomFlags, który pozwala na oflagowanie elementów DOM.

domflags

Fontello

Fontello to świetne narzędzie, które pozwala na wybranie dowolnych ikon i pobranie ich w formie webfonta.

fontello

Animsition

Animsition to plugin umożliwiający płynne przejścia między podstronami. Oferuje kilkadziesiąt różnych animacji.

animsition

GTmetrix

GTmetrix to narzędzie służące do pomiaru prędkości strony. Dzięki niemu szybko przyśpieszysz każdą stronę.

gtmetrix

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.

snappysnippet

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.

facedetection

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.

dirtymarkup

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.

mjml

Modaal

Modaal to rozbudowany i elastyczny plugin do tworzenia okien modal. Posiada tryb pełnoekranowy, video, galerię i kilka innych.

modaal

RE-Build

RE-Build to narzędzie, które pozwala na budowę wyrażeń regularnych „naturalnym” językiem.

rebuild

intercooler.js

Użycie AJAX’a w atrybutach HTML? Dzięki intercooler.js to możliwe.

intercooler

Responsive Web Design Tester

Responsive Web Design Tester to dodatek do Chrome pozwalający na testowanie reponsywności.

rwdt

annyyang

annyyang to lekka biblioteka JS, która umożliwia sterowanie głosowe stroną.

ann

Comment.me

Comment.me pozwala na szybkie wygenerowanie zrzutu strony, na który można nanosić uwagi.

commentme

Progress Button Styles

Progress Button Styles to zestaw przycisków, które pokazują pasek postępu.

pbs

Spodobał Ci się artykuł? Dzięki naciśnięciu serduszka poniżej będę wiedział jakie treści tworzyć. Dzięki! :)

20 przydatnych narzędzi Webmastera #3 20 przydatnych narzędzi Webmastera #2
View Comments
  • 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.

  • I jeszcze animista.net – gigantyczny zestaw niestandardowych animacji 🙂

  • 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.