2024-03-08T00:36:43+01:00https://blog.comandeer.pl/na-luzieComandeer’s blogKategoria 'Na luzie'Napisałem esejComandeer2024-03-08T00:35:00+01:002024-03-08T00:35:00+01:00https://blog.comandeer.pl/napisalem-esej.htmlNapisałem esej, Good Web Design.<p>Napisałem esej, <a href="https://gwd.comandeer.pl">Good Web Design</a>.</p>
<p>Pierwotnie miała być to książka i łączny czas pracy nad tym cudem wyniósł ponad 7 lat. Finalnie jednak powstał esej – zdecydowanie krótszy, ale zawierający trzon tego, co od samego początku chciałem przekazać. A więc garść refleksji na temat tworzenia stron WWW. Tego, jak to robić, aby było inkluzywnie i dostępnie. I co to dokładnie znaczy, że strona WWW jest <em>dobra</em>.</p>
<p>Zapraszam i życzę miłej lektury!</p>
Podsumowanie 2023Comandeer2023-12-31T18:38:00+01:002023-12-31T18:38:00+01:00https://blog.comandeer.pl/podsumowanie-2023.htmlKolejny rok się kończy, tym razem 2023. Zatem pora na podsumowania.<p>Kolejny rok się kończy, tym razem 2023. Zatem pora na podsumowania.</p>
<p>To był dość powolny rok, nie działo się za dużo, ani w projektach, ani na blogach. <a href="https://www.webkrytyk.pl/">WebKrytyk</a> mocno zwolnił tempo, ale być może w przyszłym trochę je odzyska. Aczkolwiek chyba faktycznie będzie powoli zmierzać w kierunku bardziej edukacyjnego podejścia. Z kolei na tym blogu najbardziej dumny jestem z <a href="https://blog.comandeer.pl/makrony.html">tekstu o makrach</a>. Natomiast nie jestem dumny z tego, że w tym roku niemal całkowicie odpuściłem tematy związane z dostępnością czy standardami sieciowymi. W przyszłym roku powinno być lepiej pod tym względem.</p>
<p>I tym optymistycznym akcentem kończymy 2023 i zaczynamy 2024!</p>
Dzień Niebieskiej Czapki 2023Comandeer2023-11-30T18:18:00+01:002023-11-30T18:18:00+01:00https://blog.comandeer.pl/dzien-niebieskiej-czapki-2023.htmlDzisiaj 30 listopada, zatem kolejny Dzień Niebieskiej Czapki. Co oznacza: wszystkiego najlepszego, Drogie Osoby Webdeveloperskie! 🎉 Mam nadzieję, że nie zapomi…<p>Dzisiaj 30 listopada, zatem kolejny Dzień Niebieskiej Czapki. Co oznacza: wszystkiego najlepszego, Drogie Osoby Webdeveloperskie! 🎉 Mam nadzieję, że nie zapominacie o standardach sieciowych w swoich projektach.</p>
<picture class="figure">
<source srcset="/assets/images/dzien-niebieskiej-czapki-2023/ja-w-czapce.avif" type="image/avif" />
<source srcset="/assets/images/dzien-niebieskiej-czapki-2023/ja-w-czapce.webp" type="image/webp" />
<img src="/assets/images/dzien-niebieskiej-czapki-2023/ja-w-czapce.jpg" alt="Ja w ciepłej i przyjemnej wełnianej czapce." class="figure__image" />
</picture>
<h2 id="niebieska-czapka">Niebieska czapka?</h2>
<p><a href="https://blog.comandeer.pl/dzien-niebieskiej-czapki.html">Swego czasu</a> opisywałem już na blogu, na czym polega to święto. W wielkim skrócie: to takie przypomnienie, że otwarte standardy sieciowe wciąż są ważne – a być może nawet ważniejsze niż kiedykolwiek wcześniej.</p>
CSS Naked Day 2023Comandeer2023-04-09T00:05:00+02:002023-04-09T00:05:00+02:00https://blog.comandeer.pl/css-naked-day-2023.htmlWszystkiego najlepszego z okazji tegorocznego CSS Naked Day! W tym dniu pokazujemy “goły” HTML, pozbawiony CSS-a, żeby przypomnieć, jak ważna jest semantyka HT…<p>Wszystkiego najlepszego z okazji tegorocznego <a href="https://css-naked-day.github.io/">CSS Naked Day</a>! W tym dniu pokazujemy “goły” HTML, pozbawiony CSS-a, żeby przypomnieć, jak ważna jest semantyka HTML-a.</p>
<p>No i przy okazji: wesołych świąt! 🐣</p>
Podsumowanie 2022Comandeer2022-12-31T15:07:00+01:002022-12-31T15:07:00+01:00https://blog.comandeer.pl/podsumowanie-2022.htmlKoniec 2022 roku już za pasem, więc czas na podsumowanie.<p>Koniec 2022 roku już za pasem, więc czas na podsumowanie.</p>
<p>Już praktycznie tradycyjnie pora zacytować <a href="https://www.youtube.com/watch?v=-C01v6xqpRI">internetowy klasyk</a>: <q>szkoda strzępić ryja, naprawdę</q>. Książka dalej nie istnieje, ale zakulisowo praca powoli ruszyła. Podobnie jak w przypadku moich projektów open source. Trochę się pobawiłem JS-em, odkurzyłem pewne stare pomysły… ale nic konkretnego z tego nie wyszło.</p>
<p>Za to wciąż udaje mi się pisać po jednym tekście miesięcznie na tego bloga i <a href="https://www.webkrytyk.pl/">WebKrytyka</a>. Najciekawsze z nich to ten o <a href="https://blog.comandeer.pl/mutowalna-niemutowalnosc.html">mutowalnej niemutowalności</a> oraz o <a href="https://www.webkrytyk.pl/2022/10/30/w3schools-com-runda-druga/">ponownych odwiedzinach W3Schools</a>.</p>
<p>I tym optymistycznym akcentem zakończmy ten rok i wszystkiego <em>lepszego</em> w nowym, 2023!</p>
Dzień Niebieskiej Czapki 2022Comandeer2022-11-30T18:18:00+01:002022-11-30T18:18:00+01:00https://blog.comandeer.pl/dzien-niebieskiej-czapki-2022.htmlDzisiaj 30 listopada – a więc Dzień Niebieskiej Czapki. Wszystkiego najlepszego dla wszystkich webdeveloperów! 🎉<p>Dzisiaj 30 listopada – a więc Dzień Niebieskiej Czapki. Wszystkiego najlepszego dla wszystkich webdeveloperów! 🎉</p>
<p>W tym roku naprawdę się postarałem i mam niebieską czapkę (dzięki, 🐈!):</p>
<picture class="figure">
<source srcset="/assets/images/dzien-niebieskiej-czapki-2022/ja-w-czapce.avif" type="image/avif" />
<source srcset="/assets/images/dzien-niebieskiej-czapki-2022/ja-w-czapce.webp" type="image/webp" />
<img src="/assets/images/dzien-niebieskiej-czapki-2022/ja-w-czapce.jpg" alt="Ja w ciepłej i przyjemnej wełnianej czapce." class="figure__image" />
</picture>
<h2 id="niebieska-czapka">Niebieska czapka?</h2>
<p><a href="https://blog.comandeer.pl/dzien-niebieskiej-czapki.html">Dwa lata temu</a> opisywałem historię tego święta. Wychodzi na to, że ta tradycja ma już <strong>15 lat</strong>… i w końcu udało mi się zdążyć ze skombinowaniem sobie niebieskiej czapki, yay!</p>
<p>No i mam nadzieję, że niedługo to święto nie będzie potrzebne, bo wszyscy będą pamiętać o standardach sieciowych w swojej pracy na co dzień, prawda? PRAWDA?</p>
Dostępna tęczaComandeer2022-06-30T22:10:00+02:002022-06-30T22:10:00+02:00https://blog.comandeer.pl/dostepna-tecza.htmlOstatnio rozmawiałem z przyjaciółką i nagle zeszliśmy na dziwne tematy, aż w końcu zaczęliśmy się zastanawiać, czy tęczowa flaga jest dostępna? A że dzisiaj os…<p>Ostatnio rozmawiałem z przyjaciółką i nagle zeszliśmy na dziwne tematy, aż w końcu zaczęliśmy się zastanawiać, czy <a href="https://pl.wikipedia.org/wiki/T%C4%99czowa_flaga_(ruch_LGBT)">tęczowa flaga</a> jest dostępna? A że dzisiaj ostatni dzień Miesiąca Dumy, stwierdziłem, że czemu by nie pochylić się nad tym eksperymentem myślowym?</p>
<h2 id="co-to-znaczy-dostępna">Co to znaczy “dostępna”?</h2>
<p>Żeby móc łatwo orzec, czy coś jest dostępne, potrzebujemy odpowiedniego kryterium. Na szczeście w zakresie dostępności takie kryteria – ogólnie uznane na praktycznie całym świecie – istnieją. Są to <a href="https://wcag21.lepszyweb.pl/">wytyczne WCAG</a>. Do naszego przypadku (tęczowa flaga) najbardziej pasowałoby <a href="https://wcag21.lepszyweb.pl/#kontrast-elementow-nietekstowych">kryterium 1.4.11 Kontrast elementów nietekstowych</a>. Wymaga ono, by grafika miała współczynnik kontrastu 3:1 względem sąsiednich kolorów. Dla naszej flagi sąsiednim kolorem jest tak naprawdę tło strony – przyjmijmy, że będzie ona prezentowana na najbardziej standardowym białym tle. Zatem wypadałoby, żeby każdy kolor tej flagi kontrastował z tym tłem.</p>
<p>Ale co jeśli nie będziemy traktowali flagi jako monolitu i uznamy, że poszczególne kolory przecież sąsiadują ze sobą i każdy z nich jest na tyle ważny, że powinny one także kontrastować między sobą? Wówczas każdy kolor musi mieć współczynnik kontrastu 3:1 względem zarówno tła, jak i kolorów, z którymi się styka (np. pomarańczowy będzie musiał kontrastować z białym tłem, ale także czerwonym i żółtym).</p>
<p>Policzmy zatem, jaki jest kontrast w tęczy!</p>
<h2 id="test-dostępności">Test dostępności</h2>
<p>Zatem weźmy na tapet oryginalną flagę:</p>
<figure class="figure">
<img src="/assets/images/dostepna-tecza/original.svg" alt="Tęczowa flaga z poziomymi pasami kolorów, od góry: czerwony, pomarańczowy, żółty, zielony, niebieski i fioletowy." class="figure__image" />
</figure>
<p>Plan jest taki, by zacząć od górnego koloru i sprawdzać przy pomocy narzędzia takiego jak <a href="https://contrast-ratio.com/">contrast ratio</a>. Na samej górze mamy czerwony (<code class="language-plaintext highlighter-rouge">#750787</code>). <a href="https://contrast-ratio.com/#%23e40303-on-#fff">Jego kontrast względem białego tła strony wynosi 4.86:1</a>. Jak na razie jest dobrze! Sprawdźmy zatem kontrast z kolejnym kolorem, pomarańczowym (<code class="language-plaintext highlighter-rouge">#ff8c00</code>) – <a href="https://contrast-ratio.com/#%23e40303-on-%23ff8c00">2.08:1</a>. Tu już zdecydowanie gorzej… Takie testy przeprowadzić trzeba dla każdej kombinacji kolorów. Wyniki przedstawiam w tabeli poniżej:</p>
<table>
<thead>
<tr>
<th>Kolor</th>
<th>Kod koloru</th>
<th>Kontrast z białym tłem</th>
<th>Kontrast z poprzednim kolorem</th>
</tr>
</thead>
<tbody>
<tr>
<td>Czerwony</td>
<td><code class="language-plaintext highlighter-rouge">#e40303</code></td>
<td>4.86</td>
<td>–</td>
</tr>
<tr>
<td>Pomarańczowy</td>
<td><code class="language-plaintext highlighter-rouge">#ff8c00</code></td>
<td>2.33</td>
<td>2.08</td>
</tr>
<tr>
<td>Żółty</td>
<td><code class="language-plaintext highlighter-rouge">#ffed00</code></td>
<td>1.2</td>
<td>1.92</td>
</tr>
<tr>
<td>Zielony</td>
<td><code class="language-plaintext highlighter-rouge">#008026</code></td>
<td>5.1</td>
<td>2.18</td>
</tr>
<tr>
<td>Niebieski</td>
<td><code class="language-plaintext highlighter-rouge">#004dff</code></td>
<td>5.99</td>
<td>1.17</td>
</tr>
<tr>
<td>Fioletowy</td>
<td><code class="language-plaintext highlighter-rouge">#750787</code></td>
<td>9.82</td>
<td>1.64</td>
</tr>
</tbody>
</table>
<p>Jeśli z kontrastem w stosunku do białego tła nie jest tak źle, tak kolory nie kontrastują wystarczająco ze sobą. Pora zatem to zmienić!</p>
<h2 id="wprowadzamy-zmiany">Wprowadzamy zmiany</h2>
<p>Spróbujmy zatem dobrać kolory tak, by wciąż należały do tej samej “rodziny”, ale kontrastowały odpowiednio zarówno z białym tłem, jak i najbliższymi kolorami w sąsiedztwie. Metoda będzie następująca: najpierw ustalamy kolor względem tła, a następnie poprawiamy pod kontrast z poprzednim kolorem. Jeśli nie da się uzyskać zadowalającego efektu tak, żeby kontrast był zadowalający zarówno względem tła, jak i poprzedniego koloru, kontrast względem tła ma wyższy priorytet. Z racji tego, że czerwony kolor jest pierwszy i ma równocześnie odpowiedni kontrast względem tła, zostaje bez zmian. Niemniej pomarańczowy trzeba poprawić, a potem zapewne żółty względem nowego pomarańczowego, itd. itp.</p>
<p>I… kurczę, serio próbowałem tak dobrać kolory, żeby zarówno kontrast z białym tłem, jak i poprzednim kolorem był odpowiedni, ale… okazało się, że zdecydowanie mnie to zadanie przerosło. Jak kolory pasowały do tła, to znów nie do siebie nawzajem. Dlatego ostatecznie stworzyłem dwie wersje – jedną kontrastującą z tłem, drugą – kontrastującą między sąsiadującymi kolorami na fladze.</p>
<p>Nowe kolory dobrane względem tła prezentują się następująco:</p>
<table>
<thead>
<tr>
<th>Kolor</th>
<th>Oryginalny kod koloru</th>
<th>Obecny kod koloru</th>
<th>Kontrast z białym tłem</th>
</tr>
</thead>
<tbody>
<tr>
<td>Czerwony</td>
<td><code class="language-plaintext highlighter-rouge">#e40303</code></td>
<td><code class="language-plaintext highlighter-rouge">#e40303</code></td>
<td>4.86</td>
</tr>
<tr>
<td>Pomarańczowy</td>
<td><code class="language-plaintext highlighter-rouge">#ff8c00</code></td>
<td><code class="language-plaintext highlighter-rouge">#df5c00</code></td>
<td>3.7</td>
</tr>
<tr>
<td>Żółty</td>
<td><code class="language-plaintext highlighter-rouge">#ffed00</code></td>
<td><code class="language-plaintext highlighter-rouge">#9a9a00</code></td>
<td>3</td>
</tr>
<tr>
<td>Zielony</td>
<td><code class="language-plaintext highlighter-rouge">#008026</code></td>
<td><code class="language-plaintext highlighter-rouge">#008026</code></td>
<td>5.1</td>
</tr>
<tr>
<td>Niebieski</td>
<td><code class="language-plaintext highlighter-rouge">#004dff</code></td>
<td><code class="language-plaintext highlighter-rouge">#004dff</code></td>
<td>5.99</td>
</tr>
<tr>
<td>Fioletowy</td>
<td><code class="language-plaintext highlighter-rouge">#750787</code></td>
<td><code class="language-plaintext highlighter-rouge">#750787</code></td>
<td>9.82</td>
</tr>
</tbody>
</table>
<p>W zasadzie tylko dwa kolory się zmieniły, bo reszta dobrze kontrastowała od samego początku.</p>
<figure class="figure">
<img src="/assets/images/dostepna-tecza/contrast-background.svg" alt="Tęczowa flaga dostosowana pod kontrast z białym tłem – zmienione zostały odcienie pomarańczowego i żółtego." class="figure__image" />
</figure>
<p>Z kolei kolory przygotowane z myślą o kontraście między poszczególnymi kolorami na fladze wyglądają następująco:</p>
<table>
<thead>
<tr>
<th>Kolor</th>
<th>Oryginalny kod koloru</th>
<th>Obecny kod koloru</th>
<th>Kontrast z poprzednim kolorem</th>
</tr>
</thead>
<tbody>
<tr>
<td>Czerwony</td>
<td><code class="language-plaintext highlighter-rouge">#e40303</code></td>
<td><code class="language-plaintext highlighter-rouge">#e40303</code></td>
<td>–</td>
</tr>
<tr>
<td>Pomarańczowy</td>
<td><code class="language-plaintext highlighter-rouge">#ff8c00</code></td>
<td><code class="language-plaintext highlighter-rouge">#ffc200</code></td>
<td>3</td>
</tr>
<tr>
<td>Żółty</td>
<td><code class="language-plaintext highlighter-rouge">#ffed00</code></td>
<td><code class="language-plaintext highlighter-rouge">#aa5600</code></td>
<td>3.2</td>
</tr>
<tr>
<td>Zielony</td>
<td><code class="language-plaintext highlighter-rouge">#008026</code></td>
<td><code class="language-plaintext highlighter-rouge">#00f026</code></td>
<td>3.33</td>
</tr>
<tr>
<td>Niebieski</td>
<td><code class="language-plaintext highlighter-rouge">#004dff</code></td>
<td><code class="language-plaintext highlighter-rouge">#004dff</code></td>
<td>3.84</td>
</tr>
<tr>
<td>Fioletowy</td>
<td><code class="language-plaintext highlighter-rouge">#750787</code></td>
<td><code class="language-plaintext highlighter-rouge">#320022</code></td>
<td>3.02</td>
</tr>
</tbody>
</table>
<p>W tej wersji kontrast z tłem można załatwić przy pomocy sztuczki: flaga wyświetlona zostanie z 2-pikselową, czarną ramką. Dzięki temu kontrast będzie wymagany właśnie między tą ramką a tłem, a na szczęście <a href="https://contrast-ratio.com/#%23000-on-%23fff">czarny dobrze kontrastuje z bielą</a>. Dlaczego sztuczka z ramką działa? Ponieważ wówczas tło strony sąsiaduje nie bezpośrednio z kolorami na fladze a właśnie z ramką. Oczywiście inną kwestią jest, czy ramka kontrastuje z kolorami na fladze… ale wówczas wracamy do punktu wyjścia, bo ramka musiałaby kontrastować zarówno z kolorami na fladze, jak i kolorem tła. Uznajmy, że skoro kontrastuje z tłem, to spełnia swoje zadanie. Nawet, jeśli będzie się zlewała z niektórymi kolorami na fladze, to powinna pokazywać zarys całej flagi (np. dolna część zleje się z fioletowym kolorem, ale już na górze ramka będzie się dobrze kontrastowała z żółtym i pomarańczowym).</p>
<figure class="figure">
<img src="/assets/images/dostepna-tecza/contrast-colors.svg" alt="Tęczowa flaga dostosowana pod kontrast pomiędzy poszczególnymi kolorami oraz z czarną ramką zapewniającą kontrast z białym tłem." class="figure__image" style="border: 2px solid #000;" />
</figure>
<p>Tutaj zmian było już zdecydowanie więcej, jedynie dwa kolory ostały się bez zmian.</p>
<h2 id="wnioski">Wnioski</h2>
<p>Końcowe wyniki wyglądają zdecydowanie inaczej, niż się spodziewałem. Najdziwniejsze rzeczy zadziały się z żółtym, który wpadł w odcienie brązowego czy wręcz brudnozielonego. Podejrzewam, że to po części skutek uboczny mojego sposobu dobierania kolorów. Idąc od góry, żółty kontrastować musiał z pomarańczowym, który z kolei był odpowiednio dobierany pod czerwony. Tym sposobem liczba możliwości znacząco się skurczyła.</p>
<p>Natomiast inne kolory w dużej mierze dobrać się udało przy pomocy zmiany natężenia poszczególnych barw – a to jakiś ciemniejszy fiolet, a to jaśniejszy zielony… Prawdopodobnie o wiele lepsze rezultaty uzyskałbym w eksperymencie, gdybym używał <a href="https://www.smashingmagazine.com/2021/07/hsl-colors-css/">składni HSL</a>, która pozwala na bardzo łatwe manipulowanie nasyceniem i jasnością. Nie dość, że znacząco ułatwiłoby to pracę, to jeszcze pozwoliło dobrać lepiej kolory. No ale cóż, może za rok.</p>
<p>No i same flagi wyglądają… zdecydowanie gorzej, niż się spodziewałem. A w sumie szkoda – chyba jednak nie zacznę trendu na “dostępną tęczę”.</p>
Światowy Dzień Świadomości Dostępności 2022Comandeer2022-05-19T21:00:00+02:002022-05-19T21:00:00+02:00https://blog.comandeer.pl/swiatowy-dzien-swiadomosci-dostepnosci-2022.htmlDzisiaj obchodzimy Światowy Dzień Świadomości Dostępności (ang. Global Accessibility Awareness Day), który obchodzony jest w każdy trzeci czwartek maja. Celem …<p>Dzisiaj obchodzimy <a href="https://accessibility.day/about/">Światowy Dzień Świadomości Dostępności</a> (ang. <i lang="en">Global Accessibility Awareness Day</i>), który obchodzony jest w każdy trzeci czwartek maja. Celem tego święta jest podwyższanie świadomości tego, jak istotna jest cyfrowa dostępność i jak można ją poprawiać w naszym najbliższym, cyfrowym otoczeniu.</p>
<p>Osobiście mam taką małą tradycję, że na tę okazję przygotowuję artykuł po angielsku o dostępności na <a href="https://ckeditor.com/blog">bloga firmowego CKSource</a>. Tym razem napisałem o <a href="https://ckeditor.com/blog/accessibility-myths/">mitach związanych z dostępnością</a> w oparciu o <a href="https://blog.comandeer.pl/devjs-summit-2022-slajdy.html">moją tegoroczną prezentację na dev.js Summit</a>.</p>
<p>Życzę wszystkim miłej lektury i dostępnego świętowania!</p>
dev.js Summit 2022 – slajdyComandeer2022-05-01T17:55:00+02:002022-05-01T17:55:00+02:00https://blog.comandeer.pl/devjs-summit-2022-slajdy.html28 kwietnia odbyła się konferencja dev.js Summit 2022, dlatego dzisiaj wrzucam na bloga slajdy z prelekcji (PDF)! Samą prelekcję będzie można z kolei już wkróc…<p>28 kwietnia odbyła się konferencja <b>dev.js Summit 2022</b>, dlatego dzisiaj wrzucam na bloga <a href="/assets//devjs-summit-2022-slajdy/devjs-2022.pdf">slajdy z prelekcji (PDF)</a>! Samą prelekcję będzie można z kolei już wkróce obejrzeć na <a href="https://www.youtube.com/channel/UCxjt-fYLh5DlODJvz7PqH8Q/videos">kanale dev.js na YouTubie</a>.</p>
CSS Naked Day 2022Comandeer2022-04-09T17:35:00+02:002022-04-09T17:35:00+02:00https://blog.comandeer.pl/css-naked-day-2022.htmlW końcu się udało! Tym razem nie zapomniałem i dodałem skrypt wyłączający CSS na blogu na 9 kwietnia każdego roku. Wszystko po to, by uczcić CSS Naked Day.<p>W końcu się udało! Tym razem nie zapomniałem i dodałem skrypt wyłączający CSS na blogu na 9 kwietnia każdego roku. Wszystko po to, by uczcić <a href="https://css-naked-day.github.io/">CSS Naked Day</a>.</p>
<p>To webdevowe święto uświadamiające, jak ważny jest HTML i jego semantyka. Dodatkowo przypomina też o tym, czym miała być w założeniu Sieć – a więc medium do prezentowania i współdzielenia dokumentów.</p>
<p>Życzę zatem wszystkim miłego świętowania!</p>