Replying to
@Meyerweb@mastodon.social Not sure if this is the "coordinate multiple animations/GIFs" problem or an "avoid multiple weird layout shifts" problem.
🤔
Remote
Amelia Bellamy-Royds
@AmeliaBR@front-end.social
mastodon 4.7.3Nothing but potential.
You may know me from SVG books, CSS working group, Maps in HTML, or similar, but mostly just lurking on the edges of web dev these days.
For personal posts, gardening, Edmonton (Canada) weather updates & event listings, and occasional opinions on politics and public health, follow @AmeliasBrain@mstdn.ca
1241 Followers
1003 Following
50 Posts
Joined November 05, 2022
Pronouns:
She/her
Main Mastodon Account:
GitHub:
CodePen:
Boosted by @cstross@wandering.shop
RE: https://tech.lgbt/@solonovamax/116049115040950367
If I'm reading the disclosure correctly, the issue is:
- Windows Notepad is more than just a plain text editor now.
- In particular, it has a markdown preview feature, including clickable links.
- But, it doesn't have full web browser security processes for what to do if you click on a link with a protocol that triggers a local application. It gets treated as if the user was directly running that application.
So, don't open strange files & then click links. (And update Windows regularly.)
Introducing... The 256 Byte* Website!
*(per file)
Last week @tantek.com posted a little puzzle for the 256th day of the year:
> build an entire website where each resource fits into at most 8-bits worth of bytes.
https://tantek.com/2025/257/t1/happy-8bitday-255-bytes-max
When @bkardell@toot.cafe re-upped the post, this nerd got sniped & spent way too many hours Friday to make a microsite from 16 256-byte or smaller files: HTML, CSS, SVG, WebP.
Here it is, enjoy! Please let me know of issues you find.
RE: @castastrophe@front-end.social
Since I've boosted some criticism of the Google "Modern Web Guidance" LLM skill package, I should boost a more positive announcement. (Note that I haven't watched the video myself.)
And I'd like to point out that this is an excellent team of experts to assemble if you want to create guidance on building websites with modern standards.
It does feel a bit of a waste that the guides they created are for training AI slop generators & not real human devs, though, as @mayank@front-end.social said in their thread.
Replying to
@zachleat Coming soon to a JS API near you:
Math.sumPreciserFinalv2UseThisOne()
Replying to
Update: #mstdnca is back online, but with high latency as the servers try to catch up on the backlog of queued jobs from 5 hour downtime.
Other server admin may see big batch requests.
Light mode, dark mode, CSS space opera mode...
This is a great story-telling data visualization structure, presenting one chart at a time, then inviting you to hit a button to dig deeper.
(Unfortunately, no alt-text descriptions on the actual SVG charts, but the main body text does convey the key points.)
Edit: links, because quote boosts are unreliable, especially when quoting something half-federated like Threads:
RE: @beep@follow.ethanmarcotte.com
It's always disappointing when a "progressive" organization turns out to be the same top-down capitalist squeeze when it comes to negotiating with their employees...
Replying to
@dbattistella@todon.eu News came out that the instance admin was being sued by a non-profit community organization where he'd been treasurer, alleging embezzlement.
This later news story summarizes his response to the court case:
https://www.cbc.ca/news/canada/edmonton/former-treasurer-edmonton-inglewood-community-league-allegation-theft-9.7150287
The news came out just prior to a planned update on Mstdn.ca finances & management. That was cancelled (citing overwhelm & lawyer's advice to avoid talking finances), causing transparency concerns.
And it brought up lots of older complaints/concerns.
Replying to
@mia I read that as an ordinary human being, where a box is 3D and a rectangle is 2D.
But then my CSS nerd brain clicked on, and I realized that that is of course not it, but "box" does have a lot of extra dimensions to it nonetheless.
And now I've been reading the definitions in that spec & I'm mad that "box" is being used for "complete layout box associated with an element or pseudo-element" but also for "individual rectangles associated with a layout box" like content box, border box, etc.
RE: @SecureOwl@infosec.exchange
It doesn't count as phishing if the phish just jump into your basket.
(Unfortunately, the people writing this code aren't the ones whose personal information is being thrown out into the internet.)
Reading up on the latest dystopia on Google's Ads & Commerce blog.
The gray text on white background is too fine for me to read easily. No problem, Ctrl-+ to zoom in.
The text gets smaller.
Did I hit the wrong key? I try again, checking the zoom % in the browser bar.
Nope, not my mistake — theirs. Text size scales down from 16px to 14px in a width media query, cancelling out the zoom at that particular step.
#CSS Devs: Don't do this! There was still lots of margin space & wide text lines.
This "1996 Class Reunion" Blog Post from the Internet Archive's Wayback team is cute:
https://blog.archive.org/2026/05/07/celebrating-thirty-years-of-the-internet-archive-with-the-class-of-1996/
But... Am I overthinking their "Cutest Couple: W3C & CSS" choice? "One builds the structure, the other makes it beautiful." Shouldn't that be HTML & CSS? But HTML & w3.org had a big break-up later. Not so cute a story...
Also... Gaaaah, their cute info graphics are images with no alt text! So much for CSS making a well-structured website beautiful. 😭
You can do better @internetarchive@mastodon.archive.org!
Replying to
@matthiasott@mastodon.social I have had the same WTF reaction when visiting your website after playing around with it many months before, so a time-out on saved display settings might be helpful, yes.
(Also maybe a little QA to reduce the likelihood that extreme design settings make it impossible to open/collapse the style controls again. That was another issue!)
@ctietze@mastodon.social
Replying to
@lamplightdev @zachleat (this broke me. literal laugh-crying here)
Interesting approach to a cookie banner, and so easy to implement for the devs: Tell people that they can always block cookies from their browser settings.
I think this *could* be GDPR compliant if they don't share any of their own analytic data with advertisers using other means, so that the user blocking 3rd-party cookies is sufficient to block sharing of data?
From nfb.ca (National Film Board of Canada). Learn more links to https://help.nfb.ca/cookies/ (with, sigh, gl tracking query parameters).
Replying to
@djrrb@mastodon.social Context is a tricky thing, though. I'm looking at that sample, and in "Emerge" my brain has no trouble with the middle e, but the (identical) one at the end still feels more "z".
And I'd probably opt for one of the alternates for lowercase a, either the single-storey one in "Graphic" or the unicase one from "Icepack".
I do love the font overall, though. Especially in oblique form.
Replying to
@leaverou@front-end.social That's maybe still not super-intuitive, but it's consistent with established patterns about how custom properties work. It would probably be easily integrated with existing Dev Tools error messages to help people figure out what's going on.
And I like that it doesn't invalidate any declarations that *don't* depend on the input argument. Although, it would still break some Sass-style mixins that are just trying to pass in an uncomputed token & use it to generate a set of related rules.
Replying to
@leaverou@front-end.social So, the resolution as it applies to the demo from your poll would create a result similar to setting the --arg value as a custom property on div (with length type & no initial value), and using it in the nested rules. The sibling p element gets the width declaration, but doesn't inherit an --arg value:
div {
--arg: 10em;
width: var(--arg); /* OK */
}
div > h2 {
width: var(--arg); /* OK, --arg is inherited */
}
div + p {
width: var(--arg); /* invalid at computed time */
}
Replying to
@castastrophe The proposed shorthand syntaxes are definitely tricky because the custom property data types and initial value should have very flexible syntaxes.
However, I really liked the idea of being able to declare multiple properties with the same defaults in one @ property rule, so I'm glad to see that was adopted, only a few years after @chriskirknielsen suggested it!
That will reduce a lot of verbosity when declaring a bunch of colors or lengths where it's OK to share initial value.
Replying to
@bramus@front-end.social @leaverou@front-end.social Oh, that does make sense & solves both use cases. Define the argument as a `` to cause any passed in values to be converted to an absolute length before use, but leave it untyped to use the token as specified.
It's something that would need good notes & examples in the spec, but now I understand the reasoning, I agree that it's logical.
Somewhat related: any progress on defining a CSS type notation for untyped custom properties etc? ?
Replying to
@leaverou@front-end.social I'm not clear where the "nothing" option comes from. Is the idea that since the + p isn't a descendent of the div it can't inherit anything from the mix-in? I don't see why that would make sense unless you're going to make all nesting work like that.
For the other two options, I can see use cases for both wanting the argument to the mix-in to resolved at the time the mix-in is applied, or only in the final rule. Maybe support syntaxes for either?
On Google's new "Modern Web Guidance" installable "skill" prompt for its Gemini genAI model:
Replying to
@dbattistella@todon.eu To be clear, I find the statement of defence quite believable — if you also add in stories from Fedi about him rubbing people the wrong way, lashing out, and shutting down communication in response to criticism & stress. Accounting software mess plus arguments, insults, then silence could very well escalate into lawsuits & assumptions of the worst.
Lots of reasons why I should get my account off that server, but I'm not concerned that he is getting rich off my $10/month donation!
Replying to
@stephaniewalter@front-end.social Even without knowing the reference, this sounds like an amusing sticker, so I'd say go for it.
@skippy@dungeoncrawler.world
Replying to
@chriskirknielsen Yeah, a band re-recording old songs is very different from a movie remake. They've been playing those songs live all those years (usually), and those performances often evolve stylistically. A new recording captures that natural process. Usually that takes the form of a live album, but a new studio album can also be valid.
Replying to
@annaecook@mastodon.social Your appointment with the doctor is at 10am, but you have an appointment with the medical administrator before that.
See also: airline flight schedules. All the way through booking & advance notification, all you ever see is the take-off time. You have to read the fine print & do some research on the airport to figure out bag drop-off cut-off times & how long to leave for security. Only once you're checked in do they switch to telling you the boarding time.
Replying to
@simevidas@mastodon.social @thunderbird@mastodon.online I really like that the default option is to go to the displayed URL. Which is what most users would expect the click to do.
Replying to
@NicMakesStuff 😹
I mean, 😿.
But also 😹.
Replying to
@prushforth @grigs On their own, these 1st party cookies can't really track you like 3rd party cookies do: the analytics/ad/social-media server doesn't get the same cookie for each site you visit with their script, they get a different one for each domain. In theory, that means they can only track your activity on that site.
However, that's where fingerprinting comes in. A script can poke around in your browser settings, add your IP address, and pull together enough to match you across sites.
Replying to
@grigs Yes, sorry, conflating overlapping but not identical concepts there. Not all cookies are trackers and not all trackers are cookies, but most 3rd-party cookies are effectively trackers even if they also have functional uses.
Replying to
@stephaniewalter I've always liked the soft sepia colour scheme of https://www.ft.com/ Still has strong, crisp contrast but not quite as glaring as most text-heavy sites with white backgrounds and fully saturated accent colours.
The designers at Tangerine Bank are definitely doing their best to make an orange-dominant colour palette accessible, with bold sans-serif text & lots of spacing. But they don't seem to have a dark mode, which I'd expect for that kind of app.
https://www.tangerine.ca/
Replying to
@Wilto OK, phew, that actually makes sense as an alt for an image in the editor!
Emphasize that there's something missing & give what info you have so that the user (who is the content author in this case) can fix it (if needed) or at least can work with the image (if empty alt is correct & intentional for the final page).
Replying to
@leaverou@front-end.social Oh my, I'm not sure I've ever seen such near-unanimous results in a poll like this!
But yeah, it is definitely unintuitive why the nested rule generated by the apply function would not work like other nested rules when it comes to sibling selectors. (I only figured it out when writing this comment!)
If you explicitly add a style encapsulation container to it, then it would make sense to prevent the computed length from affecting an external sibling. But that shouldn't be the default.
Replying to
@SaraSoueidan Well, now I will be on the lookout for this & will send you any examples I stumble across!
Replying to
@dbaron@w3c.social Turkey be like *ahem* Traffic laws do not apply to me, for I am going to get a presidential pardon this week.
Replying to
@alvaromontoro I had to use both a list of named colours *and* in-page search of the CSS spec index. But I got there!
Re the puzzle UI, it took a while to get the hang of controlling the insertion direction (down vs across) & whether or not letters I typed would replace or skip already filled cells. But it's a difficult interaction pattern; not sure if there's a clear best way.
Re the clues: not cool including obsolete unimplemented features that didn't even make the unimplemented CSS3 spec! 😾
@chriskirknielsen I see the benefit of the hover styles for a label triggering highlight on , but the selector I think is more useful is to select the label based on properties of the associated form element (like focus, required, invalid, etc.) without needing to worry about DOM structure. So that would be more like a label:for()
Feature request on the spec :
https://github.com/w3c/csswg-drafts/issues/1067
(The label itself should never be focused, so that's a problem with the spec example).
Replying to
@mayank Definitely reads as "we are carefully not assigning blame until we talk to our lawyer & decide whether we're going to fire the reporter & figure out how many other stories might have been compromised".
But it clearly states the error, and their editorial policy that wasn't met. What's missing is a clear statement of how they are going to make sure this doesn't happen again, but realistically that takes time.
Replying to
@leadegroot@bne.social I thought of that too. It would only officially be heresy if the PR was closed without merging!
@16af93@wetdry.world
Replying to
@beep Thankfully, I was too tired & distracted to actually indulge my "How bad could it be?" urge.
I will delay learning those arcane spells & their cost on your sanity for the next time I actually need to do this type of image manipulation & am swearing at the computer saying "why is it this hard?" and "surely someone has done this before & wrote about it?"
Replying to
@yatil That's true. So long as browsers by default allow 3rd party cookies, there is no active consent in that setting.
But still, I like the idea of educating people about using browser settings, so they can turn off 3rd party trackers everywhere.
(The linked page is also really good in that it goes into detail of naming every single cookie & which 3rd party service it is associated with. Which is mostly just a good reminder of why you should block all those 3rd party cookies!)
Replying to
@chriskirknielsen Huh. Maybe? Depends how it gets spec'd / implemented. If the /for/ can work in :has() the same way as a + or ~ could to describe the relationship.
But I'd still want the simpler-to-read version, especially if it can be defined as equivalent to something that is possible but confusing to write by combining two other features.
Replying to
@smfr@mastodon.social Ah, so neat that this is happening. (Although I personally would be holding out for custom shapes, something like stroked clip-paths. But getting these shapes to work is a good test run for that!)
Things are going to get a little complicated with those notch/scoop corners if they get big enough to bump into each other. And then there's how to deal with borders of different widths meet in a shaped corner. (Although I guess the existing round corner is probably as complicated as it gets.)
Replying to
@SaraSoueidan So you're specifically talking about a heading/label for the form as a whole?
Something like a log-in form or an email newsletter subscription form where there's just the fields and then the call to action ("sign up", etc.) as the text on the submit button?
I see someone else mentioned search forms, which I think are the most common unlabelled form, and you mentioned that there are specific roles for search now. But I don't know if AT by default looks at submit button text.
Replying to
@benkiel@typo.social Was this funding of independent contributors to the WOFF spec hush-hush at the time because of W3C policies? They couldn't afford to be a full W3C member, but they could cover the travel costs for invited experts or observers?
@TiroTypeworks@typo.social @svgeesus@mastodon.scot