Won't post here anymore for now for obvious reasons.
Still reachable via DM.
You can follow my social activities on mastodon.social/@justmarkup or via RSS bits.justmarkup.com/feed.json
Follow
Click to Follow justmarkup
Michael Scharnagl
@justmarkup
Freelance front-end web developer
Mastodon: justmarkup@justmarkup.com
Michael Scharnagl’s Tweets
If you have a Mastodon account, add the URL to your description here, so your followers here can find you there using fedifinder.glitch.me
10
16
Happy 31st Birthday HTML tags!
On October 29, 1991, the internet pioneer, Tim Berners-Lee, published a document entitled HTML Tags. The document contained a description of the first 18 HTML tags.
webdesignmuseum.org/web-design-his
#HTML #InternetHistory
read image description
ALT
4
210
525
✏️ Do we need an Interop for assistive technologies?
(shoutout to ARIA-AT, who are working on something very similar!)
2
10
12
If you're thinking about leaving Twitter but want to stay in the loop with web dev and other topics, I've got a handy list of awesome people with RSS feeds here:
2
9
61
HTML6
'click' handlers are only allowed on interactive elements like form elements, <a>, <dialog>...
This would be a performance boost for many sites
2
1
6
Show this thread
Design people who care about accessibility 🏆💌
1
3
34
Show this thread
Progressive TurboEnhancement™
2
Quote Tweet
New note: Suspension
matthiasott.com/notes/suspensi2
You can now build slow websites way faster. Wow.
10
57
460
Germany could meet all its energy demand with solar, wind and batteries within the next 10 years at a total cost of just $36.7 billion a year. That’s less than 1% of Germany’s GDP (and less than its current annual fossil fuel subsidies).
171
1,159
3,674
To become a good frontend developer, you need to:
- accept that your work will never be perfect / done
- realize that communication skills are more important than programming skills
- be patient
- have a high frustration tolerance
2
2
13
TIL: display scaling effects the value of Element.scrollTop
Example: with display scaling 100% it returns 1250px, set to 125% it returns 1249.5999755859375
2
1
2
5
🎉 We've launched another new web.dev course. Say hello to Learn Accessibility, written by .
Seven modules are available now, and the full course will roll out over the rest of this year.
12
282
746
Learn HTML!
This looks fantastic
Quote Tweet
Today we're launching our latest web.dev course. Say hello to Learn HTML, written by @estellevw
The first five modules are available today, the full course will roll out over the rest of this year.
web.dev/introducing-le1
Want to have details only for small screens, here is my current approach: jsbin.com/ranizidope/1/e
Wonder if there are any #a11y issues with this approach?
E.g. Is it fine that on big screens it still works like details for non-mouse users, but arrow is not shown?
What HTML feature would you like to have?
My wishlist:
- HTML media queries <div media="(min-width: 30em)"
- HTML includes <include src="component.html" loading="lazy">
3
4
It's really impressive that ~5 years ago, both :has() and container queries were considered as almost impossible (performance issues, endless loop...), and now ship in browsers.
1
7
56
Very good point here from
In the past, I often used alt="" for images which I see as decorative, like a stock image for an article.
In the future, will try to convince business to remove images which don't bring value for users, or add appropriate alt text.
Quote Tweet
Replying to @simevidas and @justmarkup
"Decorative" isn't well defined & I don't agree with those examples. See also
tink.uk/text-descripti
For me, decorative images are things you'd see in a pre-CSS (or very-early-CSS) page, when images were often used to create things like rounded corners or fancy section breaks.
1
1
For me, it's sometimes helpful to translate CSS to JavaScript to understand when styles are applied.
For example:
:focus:not(:focus-visible) {
outline: none;
}
if (element.hasFocus && !element.hasFocusVisible) {
element.style.outline = 'none';
}
2
1
8
read image description
ALT
1
2
Want to add an event listener for a button?
You most probably want to use event.currentTarget instead of event.target
Say you have a <svg> inside the button, if you click on the svg, target will refer to the svg, while currentTarget to the button.
1
2
10
I feel like I kinda wrote a second part to his blog post, but years ago: "The magical construction office" →
1
3
Show this thread
Comments following a recent conversation with made me realise that there's an aspect of element re-purposing that isn't always obvious.
Perceived affordances and the functionality mismatch:
tink.uk/perceived-affo
HTH /cc
2
27
55
If you want to inspect your website or web app and see what kind of energy impact it’s having, use the Timelines tab in Safari Web Inspector.
Here’s all about how to use the CPU Timeline:
4
37
131
✍️ Stop supporting Internet Explorer!
1
2
🤝 Accessibility and progressive enhancement go hand in hand.
1️⃣ Determine a "minimum experience". What do you want to bring across? That's what -everybody- will get. Some people get extra's
👇 For example:
1
3
7
Show this thread
This is a great time like any to remind everyone of this great quote I constantly refer back to from one of ’s talks: “Accessibility doesn't have to be perfect, it just has to be a little bit better than yesterday."
1
7
Show this thread
Should every restaurant website look* the same?
* same structure. If you've visited one before and looked for the menu, you would know how to find it on every other one.
They should still look individual (not same bootstrap design), but same structure (like supermarkets).
1
3
read image description
ALT
5
32
130
Happy Global Accessibility Awareness Day!
accessibility.day
That page lists 5 ‘most common issues’, I have written up how to practically fix these in hidde.blog/common-a11y-is with 5 more in hidde.blog/more-common-a1
#GAAD
2
23
38
Show this thread
3
74
124
Show this thread
“Should I use pixels or rems?”
I just published a blog post that aims to answer this question once and for all. 💖
Get the full scoop:
joshwcomeau.com/css/surprising
(Spoiler: it's both! They each have a role to play when building accessible UIs.)
36
252
882
Show this thread