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

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

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.
Czytaj dalej Podpowiedzi zamiast opisów opcji w ekranie personalizacji motywu

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.

Czytaj dalej Obsługa ekranu personalizacji motywu poprzez JavaScript

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 wydane na mojej ulubionej licencji – MIT.

Z tego co wyczytałem na stronie projektu autor odradza tworzenie publicznie dostępnej wtyczki dla WordPressa wykorzystującej PhotoSwipe, gdyż sam takową tworzy 🙂

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 do tworzenia płynnych przejść kolorów z użyciem przestrzeni kolorów HSL i HUSL. Dla niewtajemniczonych polecam ten wpis.

Colorrun – gra dla grafików

Prosta gra skupiająca się na wybieraniu jaśniejszego koloru z dwóch widocznych na ekranie. Aby nie było za łatwo – trzeba to robić w coraz krótszym czasie.

Beautiful Open

Kolekcja ładnych witryn powiązanych z projektami Open Source.

perfBar

Biblioteka do analizy wydajności stron.

uilang

Ciekawy koncept stworzenia prostego narzędzia do tworzenia animacji z użyciem języka naturalnego.

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 kod w JavaScript, to warto przejrzeć powyższy poradnik

Tworzenie responsywnych grafik SVG

W czasach gdy format SVG staje się coraz bardziej popularny ze względu na wyświetlacze o wysokiej rozdzielczości, warto poznać techniki, które umożliwiają tworzenie grafik wyświetlających się różnie w zależności od rozmiaru ekranu.

PatternBold

Mała kolekcja wzorów tła wykonanych w SVG wraz z prostym generatorem pozwalającym określić rozmiar, kolor i rodzaj wzoru.

Monocle

Świetny efekt, który można ciekawe wykorzystać w wielu rodzajach aplikacji.

Kalkulator maksymalnych rozmiarów zdjęć wyświetlanych w iOS

Proste narzędzie, które pozwala szybko sprawdzić czy rozmiary naszego obrazka nie przekraczają wymiarów obsługiwanych przez poszczególne urządzenia z iOS.

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:

  1. Dodajemy do określonych przycisków akcję otwierania menadżera mediów po ich kliknięciu
  2. Definiujemy właściwości okna menadżera mediów wykorzystywanego przez nasz skrypt
  3. Dodajemy obsługę operacji wyboru obrazka
  4. Dodajemy obsługę operacji zamknięcia menadżera

Jak widać sama idea nie wygląda zbyt skomplikowanie – na szczęście większość operacji wykonywania jest po stronie skryptów menadżera mediów – musimy obsłużyć tylko kluczowe operacje takie jak wybór zdjęcia i zakończenie korzystania z menadżera. Czytaj dalej Wykorzystanie menadżera mediów we własnych wtyczkach

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 wersje stron internetowych.

jstinytest – najprostsza biblioteka do testów jednostkowych w JavaScript

Jeżeli nie macie czasu lub ochoty rozgryzać API i konfiguracji popularnych frameworków do testów jednostkowych w JavaScript, a jednocześnie potrzebujecie prostego mechanizmu przeprowadzania testów jednostkowych to jstinytest jest dla Was 🙂

Autopolyfiller dla JavaScript

Autopolyfiller to idealne rozwiązanie dla wszystkich, którzy nie chcą więcej pamiętać o tym dla jakiej przeglądarki i kiedy trzeba dodać kod by wesprzeć niezaimplementowaną funkcjonalność JavaScript. To taki autoprefixer tylko dla JavaScript 🙂

Offline-first

Zbiór materiałów na temat przygotowywania stron i webaplikacji, które sprawnie działają bez połączenia z Internetem.

baguetteBox

Skrypt tworzący popupy ze zdjęciami dla galerii zdjęć – w odróżnieniu od większości innych tego typu skryptów ten działa bez pomocy dodatkowych frameworków.

20 darmowych fontów stylizowanych na pismo odręczne

Świetny zestaw naprawdę ładnych i darmowych fontów.

gif.js

Biblioteka w JavaScript do manipulowania animowanymi grafikami w formacie GIF.

Pexels – kolekcja darmowych zdjęć

Kolejna strona z dużym zbiorem darmowych zdjęć na licencji Creative Commons Zero (CC0).

Mazwai – kolekcja darmowych filmów wideo

Kolekcja darmowych filmów wideo do wykorzystania we własnych projektach na licencji Creative Commons.

CSS Guidelines

Wytyczne służące tworzeniu czytelnego i skalowalnego kodu CSS.

CSS Shorthand Generator

Jeżeli macie problemy z zapamiętaniem skróconej składni CSS to ta strona wygeneruje skrócony kod za Was.

Wszystko co powinno się wiedzieć o wyrażeniach regularnych w JavaScript

Pokaźny zbiór użytecznych informacji na temat wyrażeń regularnych w JavaScript.

Dwa przykłady preloaderów dla stron

Strony WWW coraz częściej upodabniane są do aplikacji na tablety i smartfony – preloadery dla całych stron to jeden z przykładów na implementację efektów rodem z platform mobilnych.