Aktualnie mało udzielam się na #SocialMedia, ale jeśli już, to w pierwszej kolejności wolę mieć treści "u siebie", a dopiero późnej "na zewnątrz".
Praktyczna realizacja tego założenia to m.in. strona osobista i blog albo zdecentralizowane sieci społecznościowe, które podobnie jak strona internetowa, mogą być self-hosted. Następnie udostępnianie danych treści dalej (#RSS, syndication, cross-posting).
Jeśli takie podejście brzmi interesująco, warto poczytać o #IndieWeb albo #Fediverse. Są to ciekawe alternatywy dla gigantów technologicznych i scentralizowanych serwisów społecznościowych, które mogą przestać istnieć za X lat (albo mogą jednostronnie zmienić reguły "gry" na dowolne, co już wielokrotnie miało miejsce w postaci aktualizacji różnych algorytmów czy zamykania danych usług).
Poza aspektem praktycznym (np. forma backupu), daje to też większą kontrolę i satysfakcję z tworzenia i budowania czegoś u siebie, zamiast u kogoś (szczególnie, jeśli komuś bliska jest idea #OpenSource lub ogólnie lubi "pomajsterkować" technologicznie w ciekawych rozwiązaniach i niekoniecznie komercyjnie).
With more and more sites gaining support for dark mode and adding very pretty toggles to their design, it’s important to implement them correctly. Unfortunately most sites do not and as a result their toggle is broken.
When implementing Dark Mode and ways to toggle it, developers currently need to duplicate code and roll their own toggle implementation. What if, instead, browsers would take care of all that?
One of the ways you can offer Dark Mode / Light Mode on a website is to totally honor the system preference in CSS alone. So like… That’s fine, I suppose, but it’s not very fun.
In today’s world of front-end web development, it’s becoming increasingly complex to create custom interface elements. A common scenario is when your design team has required a non-standard web-based…
@hdv i donʼt understand, why js is necessary, but maybe i read too fast. i want to test a combination of checkbox, media query, :not, custom properties
Many devices now support an operating system wide dark mode or dark theme experience. This post explains how dark mode can be supported on web pages, lists best practices, and introduces a custom element named dark-mode-toggle that allows web develop…
A cool microsite by Henri Parviainen that helps you design some scrollbars by pointing-and-clicking then copy/paste the requisite CSS code to recreate in your app.
Design and product management are both process-heavy and output-light disciplines. Practitioners crunch through a ton of learning, synthesis, and decisions to produce a simple and tidy artifact.
Non-practitioners only see the artifact, so they mistake the artifact for the work. And because it is easy to understand, it seems to them that it was simple to make - or to make changes - but the opposite is true.
1000000000% true. It's so frustrating when the reaction you receive to an insight collated from dozens of interviews is "that's obvious. why did we have to do research to figure that out?" It wouldn't seem so obvious if it wasn't explained so simply and if we didn't do the work to find it out. We would've assumed something else probably wrong instead.
@nonelvis I recall a professor saying the same thing about mathematical proofs. The proof looks simple, but it took a lot of thinking and infrastructure to get there.
Well said! I would only add that if those non-practitioners are team members or stakeholders, they should probably see more than just the artifact. Evidencing key steps and decisions during the process goes a long way.
@taimar Oh, absolutely. A lot of junior practitioners try that and give up on it because nobody has taught those stakeholders how to contribute to the process constructively.
Each time we build a field validation from scratch, accessibility doesn’t come out of the box. In this guide, Sandrina breaks down what we need to take into consideration, so that nobody gets stuck on an inaccessible invalid field.
I just used a handheld supercomputer to contribute a tiny improvement to an openly available titanic compendium of human knowledge via a globe-spanning network while lying in my bed.
I was never promised this future, and I am grateful to have been a part of it.
Some movies start with totally separate plotlines, whose relationship is eventually revealed. It’s called “hyperlink cinema.” We have a short-lived opportunity to change social media forever. Here’s…
📝 New post! "The Web Needs a Native .visually-hidden"
The .visually-hidden/.sr-only copypasta is incredibly useful for #a11y… but I don't think it should be a copypasta any more. The web would benefit a lot from it being a web standard. https://benmyers.dev/blog/native-visually-hidden/
#WordPress If you have a WordPress username at wordpress.org, you should probably update your security and add... The NEW 2FA!!! https://wordpress.org/support/users/profile/edit/account/ NOTE: This is a beta feature. It works fine, but if you experience any problem, please open a ticket and report it.
First of all, what is a carousel? Carousels show a collection of elements one after the other. Also known as “slideshows” and “sliders”. Often these are used to accommodate a larger amount of content…
In @brad_frost's "Design systems in the time of AI" this bit hits the nail on the head:
Designers and developers who think of their jobs as rectangle creators have a lot to be worried about. But in my view, designers and developers who think of their jobs as solving problems — and incidentally have to create/wield some rectangles in order to solve those problems — have less to fear.
It's been absolutely wild to witness the rise of the new crop of AI tools. This moment feels equally exciting and terrifying, but given humans' track record of driving promising technologies off the rails, I'm erring on the side of terrified until (h…
@andy The article, though seeming correct, is missing a key piece of information: people are stupid and people write your pay-checks. “AI makes it crystal-clear we need to be focusing on why we create things vs what/how we create. Let’s move forward with humanity, purpose, and intention.” In the short term the hype can (and historically will) destroy livelihoods of many in the wake of satisfying investors while labeling it «progress».
🎵 Why we stop exploring new music as we get older?
Good article boils down to the below para (has some tips at the end):
"What we think of as our 'taste' is simply a dopamine reaction arising from patterns our brain recognises which create the expectation of pleasure based on pleasures past. When we stop actively listening to new or unfamiliar music the link between the musical pattern & pleasure is severed."
The thrill of discovering new songs and new sounds can enrich people of all ages. Except, most of the time, it doesn't. Why does our willingness to explore new or unfamiliar music decline with age? Timothy McKenry explains.
Nothing in the universe quite compares to finding a song you've never heard before, but that just, clicks with you. That gives you over all positive vibes and makes your day amazing.
So happy to announce the "Toot the Word Survey"! We, the admins of the 5 WP-related instances have joined, to learn about and improve your tooting experience!
The goal of this two-minute survey is to help us improve the WordPress-related Mastodon instances and Mastodon as a meeting place for the WordPress Community in general.
And happily so... my firm does a huge amount of Wordpress work, and has developed several plugins, and I think the "Venn diagram" of openweb, #Indieweb and #Mastodon developers should have gigantic overlap.
Am very encouraged by the work at Automattic at Mastodon inclusion into Jetpack, and think greater integration between WordPress and Fediverse standards is the most natural thing in the world.
Wow, what a brilliant write-up by Matt Frisbie on creating a Chrome extension that steals everything: https://mattfrisbie.substack.com/p/spy-chrome-extension. 🥷 Having these attack vectors documented in the open is crucial. Prune your extensions regularly!
I get deeply frustrated by the whole "meetings aren't real work" thing, and I needed to put out into the world why, so I could move on.
Eventually I got my thoughts together with help from Peter Drucker, Chris Argyris, Annie Duke, Jeff Bezos, Erika Hall, Mary Parker Follett, Samo Burja and Aristotle.
Every day I see people trying hard to avoid meetings. I hear it from teams (“We’re cancelling this so we can get some work done”). A common theme on social media laments the challenge of balancing…
Depresja potrafi dopaść każdego, odebrać chęć do życia i wiarę by cokolwiek robić czy szukać pomocy. Jeżeli przechodzisz ciężkie chwile to pamiętaj, że możesz się do mnie odezwać w dowolny sposób. Zawsze znajdę czas na rozmowę czy pomoc na ile będę w stanie.
Fachową pomoc możesz uzyskać m.in. w następujący sposób:
• Antydepresyjny Telefon Forum Przeciw Depresji: 22 594 91 00 (śr.-czw. 17.00-19.00) • Telefon zaufania dla osób dorosłych w kryzysie emocjonalnym: 116 123 (pon. – pt. od 14:00 – 22:00, połączenie bezpłatne) • Centrum Wsparcia dla Osób Dorosłych w Kryzysie Psychicznym: 800 70 2222 • Telefon zaufania dla Dzieci i Młodzieży: 116 111 (czynny 7 dni w tygodniu, 24 h na dobę) • Infolinia pomocy psychologicznej dla dzieci i młodzieży: 800 12 12 12 (czynny całą dobę, bezpłatny) • Bezpłatny telefon wsparcia po stracie bliskich: 800 108 108 (czynny od poniedziałku do niedzieli z wyjątkiem dni świątecznych w godz. 14.00–20.00) • Antydepresyjny Telefon Zaufania Fundacji ITAKA: 22 484 88 01
The difference between different kinds of popovers and dialogs is important, but often misunderstood. Many people don't know what “modal” is exactly. Especially with various Open UI CG proposals progressing, knowing what's what will help to apply new web platform features usably and accessibly. This is why I'm preparing a 2023 conference talk about this and wrote a long post (as one does 😎) https://hidde.blog/dialog-modal-popover-differences/
Very nice summary of all the potential issues you may encounter if you use CSS viewport units (vw and vh) without caution. I love content recorded by Kevin!
The dialog element lets you overlay content on top of your site in something called the "top layer", which is a special layer that sits above all other content. This way you never have to worry about your dialog being…
You can still programmatically scroll inside that container, meaning that when an element that's inside the container but within the hidden area gets focus, the container would scroll it into view. Imagine someone tabbing through links inside that container or JS setting focus.
Because it's guaranteed to never scroll, `overflow: clip` doesn't affect child layout the way hidden/scroll/auto values do, so if you're going to be toggling between hidden and visible overflow, it's best to use clip.
However, in this case you'll be toggling between hidden and scrolling overflow, so I'd say it's logically best to use `hidden` with the new `scrollbar-gutter` property. That said, since the scroller in question is the root, which is always a flow-root container, 🤷🏻♀️
When discussing accessibility, the first person that pops into the minds of people is probably a person in a wheelchair. Thinking about software accessibility, the next two types of disabilities…
From the early days of my childhood, when I could see little color from one of my eyes, I recall what colorful birds looked like. I'd forgotten that fact since I lost sight in that eye as well until I started following people who frequently posts images with descriptions. There's lovely lovely, #photography on #mastodon with #altText and wonderful people who describe their #photos.
Great piece. Funny that you mention piano as, at 67, I’m just learning to play and am dealing with these issues daily. I’ve found a song to learn that I love hearing over and over, even when I get it wrong. And that’s helping me persevere. I’m going to buy a book of Beatles sheet music to keep on track. Thanks for sharing what I’d be so many of us deal with.
Which element should one use for icons? I know that many, including popular UI frameworks, use <i> and it can even be argued that it is kind of suitable in terms of semantics, because it is an alternative way to describe a term, e.g. a disk icon is an alternative way to communicate “save”. However, the Idiomatic *Text* element is intended for “text with different semantic meaning”: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i
What do you use? <img>? <figure>? <span>? And why?
The HTML element represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others.
@deoostfrees and to be clear...sometimes needs must, and sure, go off and use `<i>` or whatever (and then, in general, hide it from AT with `aria-hidden="true"`, or give it a role and `aria-label`) ... but let's not kid ourselves that this is in any way "semantic", regardless of how much clever "in a certain way, it kind of is appropriate" argumentation we bring to the table ;)
@patrick_h_lauke @deoostfrees Yes, that’s how the whole argumentation around using <i> feels to me as well. And that’s also why I was asking here again. There are just so many different ways people are solving this out there. And you can find a (somewhat) working rationalization for most of those ways… Thanks a lot!
Hiding it from AT is what I do. Unless it is e.g. a button where the icon does not have a text next to it. Then, it gets a label/alt attribute, depending on the element.
@deoostfrees cleaner to then add the `aria-label` directly to the `<button>`, i.e. `<button aria-label="..."><i></i></button>` rather than `<button><i role="img" aria-label="..."></i></button>` ... as the former then announces is just as "[whatever] button" instead of "[whatever], image, button" (AT user arguably doesn't need to know it's an image in this case)
The Material UI library uses an interesting approach in that its icons are just ligatures in a custom font. So when using that font, you can write "save" and it will automatically replace the word with an icon - but it only affects its appearance. You could do the same by settings up a https://github.com/opentypejs/opentype.js script that does that for you.
@Schepp Yes, because it’s a ligature, it is technically an alternative way to write the term. Interesting indeed…! Although maybe a bit too much for a website and more suited for such a huge design system / ui library.
<i> for icons is what Bootstrap invented many years ago (just because it’s cool: i = icon, you know), but they changed it to <span> later. I don’t trust the rest of the markup when I see it. What’s next? <b> for buttons, <q> for questions, etc.
@pepelsbey I agree, but to be fair it probably doesn't make much of a difference for the user and the definition of the <i> element is a bit vague, too.
A long time ago (2008) I wrote an article: Screen Readers lack emphasis. At the time, 15 years ago, the screen readers tested did not signify the semantics of text […]
@matuzo I know, I know. Text-level semantics like <kbd> or <code> don’t give users many benefits if any at all. But I’m talking about the number of “fucks given” to the spec 😬 Usually <i> for icons is a bad sign.
@matuzo @pepelsbey The definition of the <i> element sounds a bit like someone desperately wanted to invent a new definition for an element that was originally just used to make text italic… 😜
@matuzo But I wouldn’t say it’s completely non-sensical, there are use cases when it would perfectly fit. Though it won’t benefit users at this point, unfortunately. In any case, it’s not a reason to repurpose elements from the spec.
The HTML element is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface.
From 1993 through roughly 2008, the and tags in HTML meant “bold” and “italic,” respectively. Using those tags will still, in 2023, cause most (all?) browsers to render text with either a bold font weight or an italic font style, but the tags…
@matuzo @pepelsbey This is 100% what happened. “Idiomatic” for <i> and “bring attention to” for <b> are pure MDN inventions; not part of the W3C spec at all. I’ve spoken to the person who did this.
@SaraSoueidan It’s often decorative graphics, not content. Since browsers prioritize <img> loading as content, I prefer to use CSS background images as a default and SVG sprites when I have to style icons, or I need them grouped in sprites. It’s always good to keep the DOM size smaller, too.
`<img>` with alt to describe the icon's meaning in context (or blank if handled with adjacent text).
- It's the right element for presenting graphical content (which an icon it) - It's accessible - It's cached by the browser - It's granular (no need to download other assets just because you use one icon)
I don’t feel like there’s a single right answer, but I went with <span>. It’s usually sitting inside something else that’s more semantically meaningful, like <button>, and is described by either the button text or an aria description. An icon itself almost never needs to be in the accessibility tree.
Almost always SVG from a sprite for UI icons. Sometimes (e.g. a magnifying glass in a search input) I will URL-encode an SVG as a background image so that everything you need for UI components lives in the CSS and doesn’t require external assets. <img> element for illustrative icons (products, etc.).
(Also, consider this your semi-regular reminder that I think Lynn is one of the finest responsive designers working today; if you’re hiring, you should talk to her. https://lynnandtonic.com/)
Things you can say when the evidence proves you wrong:
1. Wow, I had no idea! Thank you for clarifying. 2. I was wrong. 3. I didn’t know that but now I do and I’m smarter for it. 4. This just proves that you can be really sure about something and still be wrong!
View sunlight by going outside within 30-60 minutes of waking. Do that again in the late afternoon, prior to sunset. Wake up at the same time each day and go to sleep when you first start to feel sleepy Avoid caffeine within 8-10 hours of bedtime. Avoid viewing bright lights—especially bright overhead lights between 10 pm and 4 am Limit daytime naps to less than 90 min, or don’t nap at all Keep the room you sleep in cool and dark and layer on blankets that you can remove. Drinking alcohol messes up your sleep. As do most sleep medications
Today I read Alex Russell's post The Market for Lemons and I found myself compelled to write a rebuttal. I am a big fan of Alex's work in general but not of this post in particular, which is very long, so allow me to attempt to summarize it
I've consistently pointed at the ways they are (un)consciously obscured by privilege, dogma, marketing, and management blinders. Never have I called people taken in "stupid".
It reads to me like you're keen to assign malice when, in fact, it's the teams on the wrong end of all this that I feel for – and their users.
Despite advances in browser tooling, automated evaluation, lab tools, guidance, and runtimes, modern teams struggle to deliver even decent performance with today's popular frameworks. This is not a technical problem per se.
place.
nilsmielke
in reply to Manuel Matuzović • • •