Moje prezentacje z WordCamp Lublin 2017

Kolejny udany polski WordCamp za nami 🙂 W tym roku przygotowałem dwie prezentacje – jedną z myślą o odbywającym się w piątek Contributor Day, a drugą na pierwszy dzień konferencji.

Na Contributor Day udało nam się przejrzeć 14 motywów – dla tych, którzy nie mogli się pojawić zamieszczam moją prezentację, która krótko opisuje jak przeglądać motywy oraz na jakie aspekty zwracać uwagę – sporządziłem ją na bazie oficjalnych wytycznych oraz przeglądu informacji od zespołu Theme Review, które pojawiają się na ich oficjalnym blogu:

W tym roku na WordCampie powróciłem do bardziej technicznych tematów i przygotowałem prezentację o tym na co warto zwrócić uwagę tworząc desktopową aplikację w Electronie korzystającą z WordPressowego REST API:

Sam kod (aplikacji oraz wtyczki) można znaleźć na Githubie.

Jeśli chodzi o same wrażenia i przemyślenia po konferencji to spodziewajcie się ich niebawem 🙂

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, nadal działają poprawnie, gdyż jak napisano w oficjalnym oświadczeniu:

Existing applications have been grandfathered based on their current usage to ensure that they continue to function both now and in the future. We will also be proactively contacting all existing API key users who, based on usage growth patterns, may be impacted in the future.

Zatem nie należy się dziwić, że na jednych stronach witryny mapy działają, a na innych mamy taki komunikat:

api-error

Po prostu API bez kluczy nie działa dla adresów dla których nie było wywołań przed 22 czerwca.

Informacje jak wygenerować klucz API dla swojej strony znajdziecie tutaj.

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 idealnie nadaje się do tworzenia aplikacji, które korzystają np. z WordPressowego REST API – nie trzeba się uczyć zbyt wielu rzeczy jeżeli mamy na swoim koncie aplikacje SPA.

Czytaj dalej Electron – wprowadzenie

Gdzie szukać informacji o planach rozwoju przeglądarek internetowych?

Po tym jak w ostatnim czasie Mozilla stworzyła stronę stanu implementacji standardów sieciowych w Firefoksie, wszystkie najważniejsze silniki przeglądarek posiadają już strony, gdzie możemy sprawdzić na jakim etapie znajduje się implementacja nowinek technologicznych:

Chrome (Blink)

Edge (Edge HTML)

Firefox (Gecko)

Safari (Webkit)

Jest to szczególnie istotne dla osób, które tworzą wewnętrzne rozwiązania, które nie muszą działać na wszystkich możliwych przeglądarkach. To samo w przypadku osób, które tworzą np. aplikacje w Electronie albo NW.js.

Oczywiście do zbiorczego sprawdzania kompatybilności nadal niezastąpione jest CanIUse.

P.S. Strona statusu dla Webkita powstała na WordPressie 🙂

 

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 – istnieją preprocesory takie jak Babel, które kompilują kod zgodny z ES2015 do składni zgodnej z ES5, która jest wspierana przez większość istniejących przeglądarek. Jeżeli korzystasz z Gulpa, to warto wyposażyć się w tym celu w moduł gulp-babel.

Tak – większość nowinek ze specyfikacji ES2015 da się zapisać w formie kodu zgodnego z ES5, co udowadnia ta strona – swoją drogą stanowi ona niezłe kompendium wiedzy na temat składni ES5 🙂

Dla tych, którzy już trochę czasu z ES2015 spędzili, polecam świetny blog Alexa Rauschmayera, który skupia się często na bardzo subtelnych niuansach specyfikacji.

Aby być na bieżąco z nowinkami w specyfikacji ECMAScript, polecam zapisać się do tego newslettera – co tydzień otrzymasz 5 linków, dotyczących różnych ciekawostek i nowinek związanych z ECMAScript.

Swoją drogą o ile ES2015 wprowadził mnóstwo nowinek to kolejne wydania specyfikacji ECMAScript już nie będą tak obszerne i planowany jest dla nich roczny cykl wydawniczy.

Szybkie generowanie plików tłumaczeń dzięki Gulp i gulp-wp-pot

Tworząc wtyczki i motywy dla szerszego grona użytkowników warto zadbać o dostarczenie pliku POT, który może być wykorzystany do generowania plików językowych naszego rozszerzenia.

Z racji tego, że używam Gulpa do automatyzacji zadań takich jak minifikacja plików, generowanie plików źródłowych czy komplikacja SASS, to nie mogło też zabraknąć w moim zestawie narzędzia do automatycznego generowania plików POT – gulp-wp-pot.

Z racji tego, że pliki POT generuje się zwykle pod koniec prac nad konkretnym wydaniem rozszerzenia to sugeruję utworzenie oddzielnego zadania, które będzie uruchamiane tylko przy okazji zadania wykonującego operacje przygotowania paczki do wydania.

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 dzięki funkcji wp.template.

Jest to silnik szablonów wykorzystywany w bibliotece Underscore.js z własną składnią podobną do tej znanej z Mustache by uniknąć konfliktów z niektórymi konfiguracjami PHP. W tym wpisie przyjrzymy mu się bliżej 🙂 Czytaj dalej Szablony w JavaScript z użyciem wp.template