wordup-lodz

Zapraszam na drugi WordUp w Łodzi

Już za dwa tygodnie miłośnicy WordPressa z Łodzi i okolic (takich jak Warszawa, Kraków, Wrocław czy Gdańsk ;) ) spotkają się na drugim WordUpie w Łodzi. Jeżeli jeszcze nie zdecydowałeś/aś się na udział to zapraszam do zapoznania się z agendą wydarzenia.

Przyjezdni mogą liczyć na dodatkowy bonus, gdyż w ten sam weekend w Łodzi odbywają się też dwie inne ciekawe imprezy: Łódź Design Festival oraz Light Move Festival.

Zapowiada się sporo niespodzianek dla uczestników spotkania oraz zanosi się na długie kuluarowe rozmowy po prelekcjach :)

Przypominam także, że 17 października odbędzie się WordUp we Wrocławiu, a plotki mówią, że 31 października odbędzie się WordUp w Krakowie.

Do zobaczenia!

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

joomla-or-wordpress

Joomla! czy WordPress?

Ponieważ intensywnie pracuję zarówno z Joomla! jak i WordPressem tytułowe pytanie jest zadawane mi bardzo często. Tak często, że chciałbym raz na zawsze obalić kilka mitów zwłaszcza, że zazwyczaj na ten temat wypowiadają się ludzie, którzy „kiedyś zainstalowali WordPress/Joomla”. Opiszę swoje przemyślenia z perspektywy człowieka, który zainstalował i modyfikował każdy z tych CMS-ów kilkaset razy.

TL;DR

Gdy zadawane jest mi tytułowe pytanie, to odpowiedź zawsze jest podobna – „To zależy – a do jakiego zastosowania?”. I jest to jedyna słuszna odpowiedź – wciskanie ludziom wszędzie WordPressa/Joomla! to duży błąd, bo zastosowania i cechy tych CMS-ów mocno się rozmijają. Więcej szczegółów w poniższym wpisie.

Czytaj dalej

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

tinymce-popup-validation

TinyMCE – dodawanie walidacji w popupie

Gdy tworzymy popup z ustawieniami dla naszego przycisku w TinyMCE, prawdopodobnie szybko odkryjemy, że przydałaby się jakaś walidacja danych wprowadzanych w polach popupa, aby użytkownik nie mógł wprowadzić błędnych danych. Prosta walidacja danych jest możliwa w łatwy sposób. Podświetlenie błędnie wypełnionych pól także da się zrobić, choć wymaga ono już trochę pracy i paru mniej eleganckich chwytów.

Zacznijmy od kodu bazowego – przyjmijmy, że nasz popup z dwoma polami: width i height, ma zdefiniowaną akcję onsubmit w następujący sposób:

onsubmit: function(e) {
    editor.insertContent('Lorem ipsum: ' + e.data.width + ' x ' + e.data.height + '.');
}

Zaimplementowanie podstawowej walidacji jest w tym wypadku bardzo proste – sprawdzamy wartości pól i w zależności od spełnienia kryteriów wysyłamy dane z popupa lub nie korzystając z return false do blokowania wysyłania popupa:

onsubmit: function(e) {
    if(e.data.width === '' || e.data.height === '') {
        return false;
    }
    editor.insertContent('Lorem ipsum: ' + e.data.width + ' x ' + e.data.height + '.');
}

Niestety taki sposób walidacji ma poważną wadę – użytkownik nie wie tak naprawdę co się stało i dlaczego formularz nie został wysłany. Dlatego powinniśmy wyświetlić mu odpowiedni komunikat – możemy skorzystać z funkcji alert ale dużo zgrabniej będzie skorzystać z wbudowanego w TinyMCE okna komunikatu:

onsubmit: function(e) {
    if(e.data.width === '' || e.data.height === '') {
        editor.windowManager.alert('Proszę wypełnić wszystkie pola w popupie.');
        return false;
    }
    editor.insertContent('Lorem ipsum: ' + e.data.width + ' x ' + e.data.height + '.');
}

Użytkownik po takiej informacji powinien już być uświadomiony, że coś jest nie tak z wprowadzonymi przez niego danymi, ale warto na wszelki wypadek jeszcze pokazać mu, które pola są wypełnione nieprawidłowo. W tym celu będziemy musieli już stworzyć trochę bardziej wyszukany kod, który pozwoli nam dodać obramowanie wokół źle wypełnionych elementów.

Szukałem możliwie najbardziej eleganckiej metody, niestety nie obyło się bez odwoływania do właściwości obiektów, które patrząc po nazwach powinny być prywatne, ale niestety nie doszukałem się w kodzie TinyMCE innej równie wygodnej metody.

Zacznijmy od tego, że musimy zdobyć uchwyt do pól formularza wyświetlanego w popupie – w tym celu musimy się odwołać do właściwości zwracającej ID wyświetlanego popupa:

var window_id = this._id;

Dzięki temu ID możemy pobrać pola formularza:

var inputs = jQuery('#' + window_id + '-body').find('.mce-formitem input');

Mając uchwyty do pól formularza możemy nadać im kolor obramowania:

if(e.data.width === '') {
    $(inputs.get(0)).css('border-color', 'red');
}

W powyższym wypadku nadamy czerwone obramowanie pierwszemu polu tekstowemu w formularzu.

Żeby wszystko zachowywało się sensownie musimy też sprawić by to obramowanie zniknęło w momencie kliknięcia pola. Zamieniamy zatem:

{
    type: 'textbox',
    name: 'height',
    label: 'Height'
},

na:

{
    type: 'textbox',
    name: 'height',
    label: 'Height',
    onclick: function(e) {
        jQuery(e.target).css('border-color', '');
    }
},

Niestety z moich obserwacji wynika, że onclick to chyba jedyne sensowne zdarzenie, które działa – zatem nie możemy się posłużyć tutaj bezpośrednio zdarzeniami onblur czy onfocus.

Finalnie nasz kod w onsubmit wyglądać może następująco:

onsubmit: function(e) {
    if(e.data.width === '' || e.data.height === '') {
        var window_id = this._id;
        var inputs = jQuery('#' + window_id + '-body').find('.mce-formitem input');

        editor.windowManager.alert('Proszę wypełnić wszystkie pola w popupie.');

        if(e.data.width === '') {
            $(inputs.get(0)).css('border-color', 'red');
        }

        if(e.data.height === '') {
            $(inputs.get(1)).css('border-color', 'red');
        }

        return false;
    }
    editor.insertContent('Lorem ipsum: ' + e.data.width + ' x ' + e.data.height + '.');
}

A co jeśli potrzebujemy więcej zdarzeń dla elementów formularza?

Nie ma co ukrywać, że domyślnie dostępne zdarzenia w TinyMCE nie pozwalają nam tworzyć zbyt rozbudowanych popupów z bardziej złożoną logiką. Na szczęście da się ten problem rozwiązać – jeżeli potrzebujemy dodać obsługę np. zdarzeń onblur czy onfocus do naszych pól możemy skorzystać z małego tricku.

Popup tworzony w TinyMCE wywołuje co najmniej dwa razy zdarzenie repaint – umiejętnie podpinając się pod to zdarzenie możemy uzupełnić braki funkcjonalne naszego popupu.

Przykładowa implementacja, dodająca obsługę zdarzeń onfocus i onblur do pierwszego pola w formularzu:

onrepaint: function(e) {
    var window_id = this._id;

    if(!jQuery('#' + window_id).hasClass('form-initialized')) {
        jQuery('#' + window_id).addClass('form-initialized');

        var inputs = jQuery('#' + window_id + '-body').find('.mce-formitem input');

        jQuery(inputs.get(0)).blur(function() {
            console.log('blur');
        });

        jQuery(inputs.get(0)).focus(function() {
            console.log('focus');
        });
    }
},

Chciałbym w tym miejscu uczulić na fakt wywoływania się zdarzenia repaint kilkukrotnie – dlatego stworzyłem w powyższym kodzie prosty mechanizm sprawdzania czy wywołał się on tylko raz – po pierwszym wywołaniu tej funkcji dodawana jest do popupu klasa form-initialized, która powoduje, że już więcej nasz kod nie zostanie wywołany. Dzięki temu unikniemy między innymi problemów z podwójnie dodanymi zdarzeniami.

Korzystając z powyższej metody możemy w zasadzie stworzyć dowolną logikę dla naszego formularza w popupie. Główną uciążliwością jest tutaj dostęp do pól formularza – różne typy pól mają różne klasy i musimy wszystko odpowiednio wyselekcjonować a potem poprawnie się w tym wszystkim poruszać.

Nie zmienia to faktu, że stworzenie walidacji zawartości popupu w TinyMCE jest możliwe, choć w wypadku bardziej skomplikowanych formularzy wymaga dość skomplikowanego kodu, ze wzgledu na pewne braki w API TinyMCE, które trzeba samodzielnie obejść.

wp-links-banner-32

Narzędzia dla twórców motywów oraz lista mniej znanych funkcji WordPressa – WordPressowe Linki #32

Włączenie polskich znaków w Google Fonts

Jeżeli chcecie hurtowo włączyć polskie znaki w fontach wczytywanych z Google Fonts, to powyższy wpis zawiera kod, który to zrobi. Oczywiście w wypadku fontów niewspierających polskich znaków raczej nie pomoże ;)

Motyw startowy _s otrzymał wsparcie dla SASS

Widać wyraźnie, że SASS wygrał z LESS-em walkę o dominację rynku preprocessorów używanych w WordPressie.

Theme checklist

Powyższa wtyczka pozwoli Wam wygodnie przetestować wymogi stawiane motywom, które mają być umieszczone na oficjalnym repozytorium WordPressa.

Motyw startowy bazujący na Backbone.js i JSON REST API

Jest to motyw bazujący na wspomnianym już w tym wpisie motywie _s. Bardzo przydatne rozwiązanie, biorąc pod uwagę, że w WordPressie 4.1 ma się znaleźć już oficjalnie JSON REST API.

Customizer Library

Biblioteka, która ma na celu łatwiejsze tworzenie opcji w ekranie personalizacji motywu.

11 mniej znanych funkcji WordPressa

Teoretycznie WordPressowi wyjadacze wszystko z powyższej listy powinni znać, ale po tym jak w Warszawie po pokazie instalacji WordPressa i jego konfiguracji, niektórzy mi powiedzieli, że pierwszy raz widzieli ekran porównywania wersji wpisów stwierdziłem, że może jeszcze ktoś znajdzie dla siebie coś ciekawego ;)

frontendowe-inspiracje-1

Front-endowe Inspiracje #1

Ostatnio odszedłem od gromadzenia dużych ilości linków do zasobów programistycznych, ale wciąż kolekcjonuję najciekawsze z nich – stąd narodził się pomysł na serię „Front-endowe Inspiracje”.

Front-end nieodłącznie jest związany z WordPressem, zatem liczę na to, że uda mi się dostarczyć Wam inspirujących materiałów, które zachęcą Was do ulepszania swoich witryn i motywów.

Wykorzystanie input[type="radio"] do zarządzania stanami w webaplikacji

Artykuł opisujący kilka ciekawych przykładów wykorzystania elementów typu radio button do zarządzania stanami w sposób, który pozwala zaoszczędzić sporo kodu JavaScript.

Blast.js

Blast.js to biblioteka do manipulowania tekstem, pozwalająca na tworzenie złożonych animacji tekstu, stylowanie oraz wyszukiwanie zadanych ciągów znaków.

Tworzenie efektu wypełniania ikon

Opis sposobu na utworzenie efektu wypełniających się kolorem ikon.  Demo efektu finalnego.

Animowana ikona Hamburger Menu w SVG

Skoro już jesteśmy przy ikonkach to powyższy artykuł zawiera opis tego jak z użyciem SVG stworzyć efektowną animację ikony hamburger menu.

Walidacja formularzy bez użycia JavaScript

Dwa przykłady jak stworzyć formularze, które się walidują i pokazują odpowiednie komunikaty bez użycia JavaScript.

Zestaw programistycznych ikonek

Kolekcja ikonek związanych z różnymi technologiami i narzędziami webowymi. Na licencji MIT.

18 niespodzianek z kodu jQuery

Autor powyższego wpisu przejrzał kod jQuery i wynotował znalezione ciekawostki.

wp-links-banner-31

Jak może wyglądać zarządzanie menu w WordPressie, 10 ciekawostek, tworzenie tłumaczeń w kokpicie – WordPressowe Linki #31

Zarządzanie menu na ekranie personalizacji motywu

Warto przyjrzeć się jak może wyglądać zarządzanie menu z poziomu ekranu personalizacji motywu. Mam przeczucie, że jeszcze góra kilka wersji WordPressa i oddzielne strony zarządzania widżetami i menu znikną zupełnie z kokpitu.

10 rzeczy, których nie wiecie o WordPressie

Zbiór 10 ciekawostek dotyczących WordPressa o których większość użytkowników zapewne nie miała pojęcia.

Tworzenie tłumaczeń dla wtyczek i motywów w kokpicie WordPressa

Każdemu zapewne zdarzyło się być zmuszonym do stworzenia tłumaczenia jakiejś wtyczki lub motywu – dzięki powyższej wtyczce można zrezygnować z dodatkowego programu do tworzenia tłumaczeń i zacząć robić tłumaczenia bezpośrednio w kokpicie.

WordPress.com standaryzuje wsparcie motywów dla logotypów

To dość logiczne posunięcie – chyba każdy motyw zawierający wsparcie dla ekranu personalizacji motywu zawiera opcję pozwalającą określić logo strony.

List otwarty Sucuri do MailPoet w sprawie ostatnio wykrytej podatności

Krótko mówiąc zespół MailPoet trochę niepoważnie podszedł do sprawy poważnej luki bezpieczeństwa w swojej wtyczce. Mam nadzieję, że ta sytuacja nauczy deweloperów rozszerzeń dla WordPressa, że bezpieczeństwo użytkowników trzeba stawiać ponad kwestie marketingowe i PR-owe.

O WordPressie dla webdeveloperów