currentColor – prosty sposób na zmniejszenie ilości generowanego kodu CSS

Jedną z głównych cech WordPressa jest jego prostota. Tworząc wtyczki często chcemy zadbać o to by ich użytkownik nie musiał dotykać kodu. Niestety niemożliwym jest stworzenie kodu CSS odpowiadającego za wygląd kodu wynikowego wtyczki, który będzie pasował do wszystkich dostępnych motywów. Stąd autorzy wtyczek tworzą często dodatkowe opcje, pozwalające określić podstawowe kolory. Czytaj dalej currentColor – prosty sposób na zmniejszenie ilości generowanego kodu CSS

type.js – dodatkowe właściwości CSS dla tekstu

type.js to biblioteka, która emuluje działanie dodatkowych właściwości CSS odpowiadających za wygląd tekstu.

Jak łatwo się domyślić robi to czasem dość brutalnie np. poprzez otoczenie każdej litery elementem typu span, ale w niektórych przypadkach, gdy zależy nam na ładnej typografii warto rozważyć jej zastosowanie, szczególnie wtedy, gdy nie mamy zbyt dużo tekstu do poprawiania w ten sposób.

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.

SmartUnderline – piękne podkreślenia tekstu dla Twojej strony

SmartUnderline

Powyższa wtyczka to bardziej ciekawostka i pokaz tego jak sprytnymi technikami CSS można wzbogacić typografię na swojej stronie. Choć podejrzewam, że wielu miłośników typografii skusi możliwość posiadania pięknych podkreśleń tekstu.

Własne alerty, responsywne wykresy, materiały o SVG – Front-endowe Inspiracje #5

W końcu odkopałem się z zaległości po ostatnich konferencjach i wyjazdach, a zanim wpadnę w wir kolejnych pora na garść linków ze świata front-endu.

Czytaj dalej Własne alerty, responsywne wykresy, materiały o SVG – Front-endowe Inspiracje #5

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.

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.