Najnowsze wpisy
Strona 10
-
Czy div jest dostępny?
14 lutego Ryan Florence napisał na Twitterze, że przyciski w React Native Web (RNW) są dostępne:
Both true:
-
Most devs should just use a
<button>
, not<a>
,<div>
,<span>
, etc. -
React Native Web’s div buttons are better buttons than
<button>
- Still keyboard and AT accessible
- Better touch event handling
- Populate
e.relatedTarget
unlike<button>
- Easier to style
I think a lot of HTML/CSS experts are being overly critical of React because they see the output of the new https://twitter.com and think they know there are fundamental flaws when they see the div soup.
That div soup is accessible.<h2/> <div role="heading" aria-level="2"/> <button/> <div {...allTheRightAttributesAndEventHandlers}/>
These are identical as far as accessibility is concerned when implemented correctly.
If you’re critical of this, you don’t actually care about a11y, you care about your niche
So yeah … just use a button, or a RNW button, but not your own div button.
[Obydwa stwierdzenia są prawdziwe:
- Większość devów powinna używać
<button>
zamiast<a>
,<div>
,<span>
itd. - Przycisk z React Native Web oparty o div jest lepszy niż
<button>
: - Wciąż dostępny z poziomu klawiatury i technologii asystującej.
- Lepsza obsługa dotyku.
- Zawiera
e.relatedTarget
w przeciwieństwie do<button>
. - Łatwiejszy do stylowania.
Myślę, że wielu ekspertów HTML/CSS jest zbytnio krytycznych względem Reacta, ponieważ widzą oni kod nowego Twittera i myślą, że wiedzą, żę są tam podstawowe błędy, gdy widzą divową zupę.
Ta divowa zupa jest dostępna.
<h2/> <div role="heading" aria-level="2"/> <button/> <div {...allTheRightAttributesAndEventHandlers}/
Te kody są identyczne, jeśli bierzemy pod uwagę poprawnie zaimplementowaną dostępność.
Jeśli jesteś krytyczny wobec tego, tak naprawdę nie dbasz o dostępność, ale o własną niszę.
Więc tak… po prostu użyj przycisku albo przycisku z RNW, ale nie swojego własnego przycisku na
div
.]Takie podejście jest nie tyle niewłaściwe, co szkodliwe. Postaram się pokrótce przybliżyć, czemu tak uważam.
-
-
System polyfillów
Pod koniec tamtego roku trafiłem na artykuł o leniwym wczytywaniu polyfillów. Były one wczytywane w kodzie aplikacji przy pomocy
import
. Niemniej zupełnie nie zgodziłem się wówczas z wizją autora i postanowiłem stworzyć własną wersję takiego systemu. W końcu znalazłem na to chwilę. -
O abstrakcji słów kilka
Ostatnio miałem przyjemność przeczytać książkę Nicholása Bevacquy Mastering Modular JavaScript. Z racji tego, że książka ta porusza bardzo szeroko rolę abstrakcji w tworzeniu oprogramowania, stwierdziłem, że najwyższy czas spisać także garść własnych przemyśleń.
-
Bujając się na gałęzi AST
Istnieją rzeczy, na które zwykle nie zwracamy jakiejkolwiek uwagi, po prostu przyjmując ich istnienie za pewnik lub nie musząc się nimi całkowicie przejmować. Wiele takich rzeczy jest i w JS-ie – rzeczy, o które nie musimy się martwić w czasie codziennej pracy (no, chyba że rozwijasz Babela czy innego Rollupa; wówczas te rzeczy są Twoją pracą…). Przyjrzymy się dzisiaj jednej z takich rzeczy – AST.
-
Konferencja ConFrontJS + konkurs
29 października w Warszawie odbędzie się konferencja ConfrontJS 2018. Potrwa od 09:00 do 17:00, a jej w trakcie zostanie wygłoszonych 12 prelekcji. Całość jest organizowana przez stare dobre WarsawJS, w urokliwym Campus Warsaw.
-
Przesunięcie sourcemapy
W ten weekend mierzyłem się z kolejnym błędem w moim najsłynniejszym projekcie na GitHubie – niepoprawnym generowaniem sourcemapy. Problem okazał się na tyle ciekawy, że postanowiłem go opisać.
-
Niestandardowe zdarzenia w workerach
W przypadku skryptów korzystających z DOM stworzenie własnych, niestandardowych zdarzeń jest banalnie proste i sprowadza się do utworzenia nowej instancji
CustomEvent
. Ten sposób jednak nie (do końca) działa w przypadku workerów, które nie mają dostępu do DOM. Co zatem zrobić w takim wypadku? -
Kwacze jak kaczka…
Typy proste w JavaScript są nieco specyficzne, bo można ich używać jak obiekty. W końcu kto z nas nie użył nigdy metody
replace
na zwykłym ciągu tekstowym? Ale czy da się zrobić na odwrót, czyli potraktować obiekty jak typy proste? -
Uniwersalny getter
Chociaż magia niezbyt idzie w parze z programowaniem, to mimo to polubiłem PHP-owe metody magiczne, wśród których chyba najbardziej przypadło mi do gustu
__get
. Ta prosta metoda pozwalała przechwycić odwołania do nieistniejących pól klasy:<?php class Test { public $iAmAlive = 'nope'; public function __get( $var ) { return $var . ' value'; } } $test = new Test(); var_dump( $test->test ); // test value var_dump( $test->qwerty ); // qwerty value var_dump( $test->iAmAlive ); // nope
W przypadku JS-a nie było to, niestety, możliwe. Aż do ES6…
-
Jednoplikowe komponenty
Chyba każdy, kto miał styczność z frameworkiem Vue, słyszał również o jego jednoplikowych komponentach. Ten super prosty pomysł pozwala definiować cały kod odpowiedzialny za konkretny komponent w jednym pliku. Jest to na tyle dobre rozwiązanie, że pojawiła się inicjatywa przeniesienia tego mechanizmu do przeglądarek. Niemniej – stanęła w miejscu i od sierpnia tamtego roku nic się nie wydarzyło. Mimo to myślę, że spojrzenie na ten problem i próba dostosowania go do przeglądarki jest ciekawym zagadnieniem, którym się dzisiaj zajmiemy.