Tag: JS

  • Własne style map w Google Maps

    Google Maps API posiada nowy oficjalny kreator styli map. Mniej doświadczonym użytkownikom (albo bardziej leniwym ;)) polecam Snazzy Maps z ogromną bazą gotowych styli.

  • Dokąd zmierza WordPress – epilog

    Po mojej prelekcji na WordCampie, która traktowała m.in. o tym czy jako developerzy WordPressa powinniśmy się bać o swoje dochody i przyszłość, odbyłem sporo rozmów oraz naszło mnie kilka przemyśleń do których chciałbym się odnieść jako uzupełnienie do mojej prezentacji.

  • Google Maps API od 22 czerwca wymaga kluczy API dla nowych stron

    Google Maps API od 22 czerwca wymaga kluczy API dla nowych stron

    Informacyjnie dla tych, którzy używają Google Maps API na swoich stronach – od 22 czerwca wszystkie zapytania do API dla nowych stron muszą zawierać klucz API. Wcześniej w wypadku małych lub lokalnych projektów klucz API nie był potrzebny do działania. W praktyce wygląda to tak, że strony na których wykorzystywaliśmy Google Maps API przed zmianami,…

  • Electron – wprowadzenie

    Electron – wprowadzenie

    W maju ukazała się wersja 1.0 Electrona – narzędzia do tworzenia aplikacji desktopowych z wykorzystaniem technologii webowych. Dla niewtajemniczonych – Electron to narzędzie, które wykorzystano przy tworzeniu takich aplikacji jak Slack, edytor Atom, Calypso dla WordPress.com czy Visual Studio Code. Ponieważ sam od dłuższego czasu korzystam z tego rozwiązania, chciałbym je Wam przybliżyć. Dlaczego? Bo Electron…

  • ECMAScript 2015 w pigułce

    ECMAScript 2015 w pigułce

    Jeżeli jeszcze nie pisaliście kodu z użyciem nowych elementów składni JavaScript to czas najwyższy nadrobić zaległości 🙂 Zacznijmy od tego, że składnia specyfikacji ES2015 (często nazywana też ES6) ma już bardzo dobre wsparcie w najnowszych wersjach przeglądarek – na bieżąco postępy można śledzić dzięki temu zestawieniu. Ale wcale nie trzeba się martwić o wsparcie przeglądarek…

  • Szablony w JavaScript z użyciem wp.template

    Szablony w JavaScript z użyciem wp.template

    Generowanie dużych ilości kodu HTML w JavaScript jest uciążliwe bez odpowiednich narzędzi. JavaScript dopiero niedawno wzbogacił się dzięki standardowi ES2015 (ES6) o wsparcie wielolinijkowych ciągów znaków. Jeżeli chcemy wspierać starsze przeglądarki to musimy skorzystać z innych rozwiązań. Handlebars czy Mustache wyglądają kusząco, ale warto pamiętać, że WordPress posiada już własny mechanizm szablonów dla JavaScript dostępny…

  • Awesomplete – proste tworzenie pól z podpowiedziami

    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.

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

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

  • Wewnętrzne linkowanie w ekranie personalizacji motywu

    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.

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

  • Komunikacja pomiędzy zakładkami z tą samą stroną WWW

    Komunikacja pomiędzy zakładkami z tą samą stroną WWW

    Ciekawe wykorzystanie localStorage do komunikacji pomiędzy zakładkami Krótki opis jak można wykorzystać zdarzenia emitowane podczas zapisu do localStorage do zaimplementowania komunikacji pomiędzy zakładkami zawierającymi daną stronę WWW lub webaplikację.

  • Podpowiedzi zamiast opisów opcji w ekranie personalizacji motywu

    Podpowiedzi zamiast opisów opcji w ekranie personalizacji motywu

    W poprzednim wpisie pokazałem podstawy API JavaScript dla ekranu personalizacji motywu. Pora wykorzystać praktycznie zdobytą wiedzę i przy okazji dowiedzieć się paru nowych rzeczy – w tym wpisie opiszę jak w prosty sposób zamienić opisy kontrolek na ikonki wyświetlające podpowiedzi.

  • Obsługa ekranu personalizacji motywu poprzez JavaScript

    Obsługa ekranu personalizacji motywu poprzez JavaScript

    W poprzednich wpisach pokazywałem obsługę ekranu personalizacji motywu z użyciem PHP – w tym oraz kilku kolejnych wpisach pokażę, że całkiem sporo można osiągnąć także po stronie przeglądarki korzystając z JavaScript.

  • PhotoSwipe – zaawansowany skrypt galerii

    PhotoSwipe – zaawansowany skrypt galerii

    PhotoSwipe – zaawansowana galeria niewymagająca jQuery Osobiście bardzo sobie cenię rozwiązania, które nie wymagają do działania wszechobecnego jQuery, a już szczególnie cenię rozwiązania, które mają szeroki wachlarz możliwości. PhotoSwipe posiada świetne wsparcie dla gestów na ekranach dotykowych (polecam się pobawić na tablecie), dobre wsparcie dla przeglądarek. Po kompresji waży ~14kb, ma dobrą dokumentację i jest…

  • Offline.js

    Offline.js

    Offline.js Prosta wtyczka JS, która pozwala wykryć brak połączenia z internetem. Przydatne we wszelkiego rodzaju aplikacjach webowych oraz dla osób, które mają mocno niestabilny internet 😉

  • Ukryte funkcje Emmeta, DPI, filmy o CSS oraz gra dla grafików – Front-endowe Inspiracje #4

    Ukryte funkcje Emmeta, DPI, filmy o CSS oraz gra dla grafików – Front-endowe Inspiracje #4

    Ukryte funkcje Emmeta Zbiór kilku ciekawych funkcji Emmeta – jeżeli korzystasz z tego rozwiązania w swoim edytorze – lektura obowiązkowa. Poradnik o DPI dla projektantów Wnikliwa analiza tematu rozdzielczości ekranów dla projektantów. C3.js Biblioteka do tworzenia wykresów bazująca na D3. Filmy o CSS Lista najważniejszych materiałów video dotyczących CSS z ostatnich lat. sweep.js Malutka biblioteka…

  • Favikonki, generator rozszerzeń dla Chrome, responsywne SVG i efekt powiększenia w CSS – Front-endowe Inspiracje #3

    Favikonki, generator rozszerzeń dla Chrome, responsywne SVG i efekt powiększenia w CSS – Front-endowe Inspiracje #3

    Extensionizr Generator dla tych, którzy szybko chcą sobie wygenerować bazę do stworzenia rozszerzenia dla przeglądarki Chrome. Wszystko co trzeba wiedzieć na temat favikonek A w zasadzie nie tylko favikonek, ale też innych rodzajów ikon, których wraz ze wzrostem rynku urządzeń mobilnych znacząco przybyło. JavaScript Quality Guide Gdyby ktoś szukał wytycznych jak pisać ładny i porządny…

  • Wykorzystanie menadżera mediów we własnych wtyczkach

    Wykorzystanie menadżera mediów we własnych wtyczkach

    Dzięki wykorzystaniu menadżera mediów we własnych wtyczkach możemy znacząco ułatwić życie użytkownikowi – nie musi on z pamięci wprowadzać adresów do wybranych grafik. W tym wpisie chciałbym pokazać jak łatwo dodać obsługę menadżera mediów do własnej wtyczki/motywu. Uproszczony schemat działania jakie chcemy osiągnąć prezentuje się następująco: Dodajemy do określonych przycisków akcję otwierania menadżera mediów po…

  • Front-endowe Inspiracje #2

    Front-endowe Inspiracje #2

    3 API JavaScript, które mogą się okazać przydatne w przyszłości Artykuł opisujący 3 API: Web Alarms API, Presentation API oraz Standby API, które są dopiero w początkowej fazie rozwoju, ale warto ten rozwój śledzić, gdyż mogą znacząco wzbogacić nasze webaplikacje. Polecam też lekturę wpisu o innych 5 API, które w przyszłości mogą znacząco usprawnić mobilne…