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).
Something non-designers understandably struggle with is how to make things look good. One of those things is long form content that’s well set and readable. Luckily, CSS makes this easy, you just have to know what to change. That’s exactly what we’re going to teach you in this article.
This is very humble of you to present this as a “little design tip”, mate. This is actually more like “how to have web typography superpowers”, and honestly one of the best guides out there. ❤️
this was super helpful. Wonderful timing, as I’m a mostly developer looking to understand more about typography. The post was practical and really demonstrated the benefits of making an effort. Thanks again.
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…
Yesterday, I wrote about how web development can literally kill people. At the end of the article, I wrote…
Build things that work, even when parts of it break.
📝 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.
The whole idea of progressive enhancement is using the power that the web platform gives us for free — specifically, HTML, CSS and JavaScript — to provide a baseline experience for the people who visit our sites and/or apps, and then build on that where appropriate and necessary, depending on the capabilities of the technology that they are using.
The whole idea of progressive enhancement is using the power that the web platform gives us for free — specifically, HTML, CSS and JavaScript — to provide a baseline experience for the people who v…
great piece. Also an approach that scales. At work we’re building a Python/Flask SaaS app for clients with a progressive enhancement mindset. We’ve found that the server-side rendered, minimum viable experience is actually more than enough for a lot of the features we’ve designed so far; it’s resilient, responsive, and blazing fast. No need to add any JS overhead - yet - but if that point ever comes, we know it’s to *enhance* rather than require
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/
In Every Layout, we wrote about The Stack. It’s a marriage of Heydon’s Lobotomised Owl selector and my method of managing Flow and Rhythm with CSS Custom Properties. .stack > * + * { margin-bloc…
once again: blown away by how gorgeous your website is. Just chef's kiss all around.
Also that flow utility has been my favorite as well. I pull it out every single time I'm teaching people about CSS and specifically when I'm teaching about the difference between component based CSS, algorithmic CSS, and scoped CSS.
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.).
You know that friend you haven't talked to in a long while? They're thinking about you from time-to-time as well, and that it might be awkward to reach out.
So... One of you has to do it. Might as well be you! Send them a message. Do it right now.
place.
Sia Karamalegos
in reply to Andy Bell • • •Andy Bell
in reply to Sia Karamalegos • • •ADubhlaoich
in reply to Andy Bell • • •Does the Utopia scale supersede Every Layout's modular scale?
Andy Bell
in reply to ADubhlaoich • • •Same principles tho really. It’s all about consistency and rhythm
Andy Bell
Unknown parent • • •Font style matcher
meowni.caAndy Bell
Unknown parent • • •It let’s display fonts sing too!
Mike-麥-Mai-v1.618 😎
in reply to Andy Bell • • •And this can be a reset too https://mikemai.net/mcss
😁
Typography Manual by Mike Mai
mikemai.netToby
in reply to Andy Bell • • •Andy Bell
in reply to Toby • • •Elliot Jay Stocks
in reply to Andy Bell • • •Andy Bell
in reply to Elliot Jay Stocks • • •Karen Friesen
in reply to Andy Bell • • •Andy Bell
in reply to Karen Friesen • • •Paul Kinlan
in reply to Andy Bell • • •Andy Bell
in reply to Paul Kinlan • • •Knepherbird
in reply to Andy Bell • • •Andy Bell
in reply to Knepherbird • • •James Drever
in reply to Andy Bell • • •Andy Bell
in reply to James Drever • • •Colin Devroe
in reply to Andy Bell • • •Third paragraph under Core global styles "quite” should be “quick”?
Andy Bell
in reply to Colin Devroe • • •