inspect-onmouseenter-elements-in-chrome

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.

intercooler-js

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.

theme-customizer-internal-linking

Wewnętrzne linkowanie w ekranie personalizacji motywu

Ostatni pokazałem jak można stworzyć podpowiedzi z opisów kontrolek – w tym wpisie pokażę jak na bazie opisów paneli, sekcji oraz kontrolek stworzyć wewnętrzne linkowanie pomiędzy elementami ekranu personalizacji motywu. Wykorzystamy w tym celu kilka opisywanych wcześniej przeze mnie funkcji API oraz fakt, że opisy elementów mogą zawierać kod HTML. Czytaj dalej

html-inspector

HTML Inspector

HTML Inspector – skrypt sprawdzający strukturę strony

HTML Inspector to ciekawy skrypt, który pozwala sprawdzić jakość generowanego na stronie kodu HTML – informacje o potencjalnych błędach i problemach zwracane są w konsoli JavaScript. Skrypt pozwala też na nadpisanie domyślnej konfiguracji co umożliwia wykluczenie z ostrzeżeń komunikatów, które należy pominąć (np. w wypadku klas automatycznie generowanie przez WordPressa i nieużywanych w kodzie CSS).

print-themes

Dostosowanie motywów WordPressa do druku

Przygotowanie wsparcia wersji drukowanej w motywach dla WordPressa

Obecnie ładna wersja do druku to często pomijany aspekt stylowania motywów – istnieje jednak wiele rodzajów witryn, gdzie wersja drukowana może być pomocna dla użytkownika – najprostszy przykład to wszelkie blogi kulinarne (choć oczywiście są ludzie, którzy zaryzykują zalanie tabletu w kuchni ;)). Największa zaletą przygotowania wersji drukowanej jest to, że jej stylowanie nie wymaga z reguły zbyt dużo czasu.

Grafika we wpisie powstała na bazie zestawu Hand Drawn Web icons.

O WordPressie dla webdeveloperów