Awesomplete – proste tworzenie pól z podpowiedziami

Awesomplete

Powyższy skrypt można łatwo wykorzystać do stworzenia pola z podpowiedziami pojawiającymi się podczas wpisywania. W niektórych wypadkach nie wymaga on dodatkowego kodu JavaScript. Całość zajmuje po skompresowaniu 2kB i nie wymaga do działania dodatkowych bibliotek JavaScript.

Chrome na OS X i debugowanie elementów pokazywanych przy zdarzeniu onmouseenter

Debugowanie styli CSS elementów, które pokazywane są z użyciem zdarzeń obsługiwanych przez JavaScript w Chrome jest uciążliwe, ponieważ w odróżnieniu od Firefoksa Chrome przy inspekcji elementów nie wywołuje zdarzeń do nich przypisanych.

Zupełnym przypadkiem odkryłem ostatnio ciekawą metodą debugowania takich elementów:

W skrócie:

  1. Uruchamiamy narzędzia developerskie
  2. Najeżdżamy na interesujący nas element
  3. Z użyciem skrótów klawiaturowych przełączamy się na sąsiedni ekran
  4. Przesuwamy kursor w dół tak żeby po powrocie na pierwotny ekran znajdował się on nad obszarem narzędzi developerskich
  5. Powracamy na pierwotny ekran
  6. Możemy debugować wybrany element

Całość bazuje na tym, że Chrome przy zmianie ekranów nie wywołuje zdarzeń związanych z kursorem podpiętych do elementów.

Możecie przetestować tę metodę na tym prostym demo.

P.S. Jeżeli znacie inną metodę aby rozwiązać problem debugowania tego typu elementów, dajcie znać w komentarzach – może istnieje jakaś flaga dla Chrome, która wywołuje eventy przy inspekcji elementów.

P.S.2. Powyższa metoda działa też w Safari

P.S.3. Ten sam sposób można wykorzystać do robienia screenshotów tego typu elementów np. programem Skitch, pod warunkiem, że zakończymy zaznaczanie obszaru screenshota na narzędziach developerskich.

conditioner.js – moduły JS wczytywane warunkowo i zależnie od środowiska

conditioner.js

Kolejna biblioteka korzystająca z dobroci atrybutów data-*. Możemy uzależnić wczytywanie modułów w JS od rozmiaru okna, elementu lub dostępności konkretnych funkcji np. obsługi gestów dotykowych.

intercooler.js – AJAX poprzez atrybuty HTML-a

intercooler.js – wykorzystanie atrybutów HTML-a do wykonywania zapytań AJAX-owych

Powyższa biblioteka prezentuje ciekawe podejście do wykonywania zapytań z użyciem AJAX-a. Informacje o typie zapytania, jego adresie oraz zachowaniu przeglądarki po wykonaniu zapytania, przechowywane są w postaci atrybutów linków. Ciekawe rozwiązanie do wykorzystania w mniejszych projektach, gdzie potrzeba w łatwy sposób zaimplementować podstawowe zapytania AJAX-owe.