@AmeliaBR@front-end.social
@AmeliaBR@front-end.social avatar

AmeliaBR

@AmeliaBR@front-end.social

Nothing 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, and occasional opinions on politics and public health, follow https://mstdn.ca/@AmeliasBrain

📛 She/her

This profile is from a federated server and may be incomplete. Browse more on the original instance.

aardrian, to random
@aardrian@toot.cafe avatar

I have no recollection why I made this a couple years ago, but stumbling across it just now brought me joy. I mean, not the kind of joy others might feel, because I am kind of fucked up.

https://codepen.io/aardrian/pen/OJvQdjK

AmeliaBR,
@AmeliaBR@front-end.social avatar

@aardrian Needs more <hgroup>

keithjgrant, to random
@keithjgrant@front-end.social avatar

My copyeditor just changed "front-end" to "frontend" so does that mean the debate is settled?

AmeliaBR,
@AmeliaBR@front-end.social avatar

@keithjgrant Your copy editor will probably say it depends (on whether it is used as an adjective or a noun).

keithjgrant, to random
@keithjgrant@front-end.social avatar

Tip (please for the love): If you have a UI element on page that can be clicked for one action and dragged for a different action, make sure dragging it only one or two pixels fires the click action

AmeliaBR,
@AmeliaBR@front-end.social avatar

@keithjgrant This also applies to touch gestures that require two fingers vs one: Please, please build in a little leeway about the two fingers touching down at the exact same time!

"You need two fingers to move the map" says the not-so-helpful warning label, as it ignores the ongoing movement of my two fingers.

j9t, (edited ) to webdev
@j9t@mas.to avatar

#HTML: There are ___ kinds of character references.

AmeliaBR,
@AmeliaBR@front-end.social avatar

@j9t "kind" is a very vague term. You could subdivide it into many different kinds from practical perspectives. But I assume you mean from a parsing perspective?

elly, (edited ) to random
@elly@front-end.social avatar

What would you call someone who builds accessible and usable UIs, using HTML, CSS, and 🤏🏼 JS, and collaborates with designers, developers, and testers?

⚠️ Please only reply to this post if you're okay with your response possibly being included in a conference talk.

AmeliaBR,
@AmeliaBR@front-end.social avatar

@elly I'd call that a front-end web developer.

But I recognize that name is now often used to mean a client-side JavaScript developer.

And I don't have a better term that clarifies between the two.

mia, to random
@mia@front-end.social avatar

Really enjoying the @eleventy Symposium so far! Though I still refuse to build my websites real good, on principle.

Thanks for all the lovely comments. If you're looking for my slides, they're online (built with 11ty of course):

https://slides.oddbird.net/hints/eleventy/

AmeliaBR,
@AmeliaBR@front-end.social avatar

@mia @eleventy Next up, Mia teaches us how to Build Terrible Websites Fast, which can also be done with 11ty. It's that flexible!

mekkaokereke, to random
@mekkaokereke@hachyderm.io avatar

So... there was a shooting at Drake's house today. Someone got shot.

🤔 Is this rap beef still funny? Not a rhetorical question. Is it "real" yet? Is this entertaining enough?

For the record, no, I don't think Kendrick or any of his people had anything to do with it. If something bad happens to Drake because of them directly, it will most likely happen in LA or the East Bay or Atlanta or Miami. Because that's where it always happens.

AmeliaBR,
@AmeliaBR@front-end.social avatar

@mekkaokereke Saw the headline & thought: Mekka called it & I'm sure he ain't happy being right.

Sure, it's possible that it's totally unrelated. But there's also a good chance that the tough guy who pulled the trigger was inspired by all the tough talking of more high-profile figures.

Because just like with any other kind of grandiose violent rhetoric, even if the people talking have no intent on acting, they are still being reckless by failing to take accountability for their influence.

stephaniewalter, to random
@stephaniewalter@front-end.social avatar

What if... I put mica powder into stickers? Well, I would say it kind of works when you go for neurochaotic space look?
Also, I can't decide if I prefer text with semi blended mode (1st) or not (2nd) from my MVPs

Purple pepper sticker with the text Neurochaotic not blended with the background
The 2 stickers side by side, not blended on top, blended on the bottom
Workstation with uncut stickers and some mica powder being applied

AmeliaBR,
@AmeliaBR@front-end.social avatar

@stephaniewalter For whatever it's worth: Given the intensity of the term, I'd go with the higher-contrast text.

aardrian, to accessibility
@aardrian@toot.cafe avatar

I think &lt;seleclist&gt; is dead? Not clear to me why, but I don’t have time to wade in.

But now Chrome is proposing allowing any element within &lt;select&gt; and I am… wary:
https://github.com/whatwg/html/issues/10310

I get that I don’t grok the work that goes into the UA rendering engine, but I am very worried about the impact given it is not even addressed in the proposal.

Corrections to my assertions welcome.

AmeliaBR,
@AmeliaBR@front-end.social avatar

@aardrian I have heard many times that changing the HTML parser is not happening because of security risks from inconsistent parsing bypassing "sanitizer" scripts. So I suspect that will be the end of that.

As for accessibility issues, I think they're about the same whether you expand the existing element or replace it with a more flexible one. But the risk is that by selling this as "stylable select" it will be accepted as a cosmetic change & implemented without fully analyzing accessibility.

css, to SEO
@css@front-end.social avatar

/ question:

Suppose I have a home page and its content is nothing but different blocks (image + text) that link to internal pages. Does that count as a navigation and I have to use the <nav> element or It counts as the main content and a simple <ul> listing is enough?

AmeliaBR,
@AmeliaBR@front-end.social avatar

@css If the listing is the main content, I wouldn't call that a nav, no. Especially if there is more than just a plain text link.

keithjgrant, to random
@keithjgrant@front-end.social avatar

A TV episode is never made more dramatic or suspenseful by opening with some bad situation followed by “24 hours earlier” and then actually starting the episode.

Just start the episode at the beginning. If that doesn’t do the job, the writers failed to create a compelling story.

AmeliaBR,
@AmeliaBR@front-end.social avatar

@keithjgrant I am now imagining the first Avengers movie starting with the final diner scene* before flashing back.

keithjgrant, to random
@keithjgrant@front-end.social avatar

I made mint chip ice cream with fresh mint. It’s delicious but it’s kind of a whole different thing. I think next time I’ll still add a couple drops of the artificial stuff

AmeliaBR,
@AmeliaBR@front-end.social avatar

@keithjgrant "Full mint plant" is a very different flavour from mint extract. I once tried to make mint extract with mint leaves in tequila & it came out very much like alcoholic mint tea, which really isn't the same thing.

elly, to random
@elly@front-end.social avatar

Fuck “AI”.
LLMs are plagiarism machines.

I want a language model that’s trained on my personal data. It needs to be offline so it’s not shipping my data off to some company. Because I have dysgraphia writing is fucking HARD and language models can help make it easier. But I don’t wanna to use a plagiarism machine.

If I was to put on my capitalism hat for a second… “Surely someone can see that this is a huge gap in the market?!”

Can someone tell me it actually exists? That’d be a nice surprise

AmeliaBR,
@AmeliaBR@front-end.social avatar

@elly I'm sure there are self-hosted generative-language tools that can customize a generic model on your own data, but you're always building on an existing model from a much larger training set. (I haven't seen much about this since the massive chat bots were released last year, but I definitely remember people posting about playing around with previous generation language generators.)

css, to CSS
@css@front-end.social avatar

💡 CSS Tip!

Use modern CSS to create a fancy Zig-Zag border around images using a few lines of code.
✅ Only one element (the image tag)
✅ No pseudo-element
✅ Optimized with CSS variables
⚠️ Not suitable for touch screen (the sharp edges may hurt you)

Demo: https://codepen.io/t_afif/full/OJGBvmp via :codepen: @codepen

Online Version: https://css-tip.com/zig-zag-box/

Two images with zig-zag borders

AmeliaBR,
@AmeliaBR@front-end.social avatar

@css This visual result looks like the perfect use case for a border mask, but honestly, the syntax for border-mask (same as for border-image) is such a hassle to get right, especially when applied to vector images or CSS gradients, that I kind of like the idea of using repeating gradients in the regular mask property instead.

AmeliaBR,
@AmeliaBR@front-end.social avatar

@css I didn't realize that the support for mask-border hadn't matched the improvements for mask / mask-image in general. Another reason to just use layered gradients in the main property for anything geometric. With the mask-composite options, there's quite a lot you can do with just gradient stripes, circles, and arcs!

kissane, to random
@kissane@mas.to avatar

A few weeks back I encountered a FOSS guy here explaining that when he sees open source devs ask for money, he blocks them and then stops using their code because they're morally wrong and he only wants to work with tools made by people who are doing the work for the right reasons. (I'm paraphrasing to avoid indexing the post.)

I've resisted writing about it because I'm slammed, but the question I can't shake is: Who benefits from the ideology of "pure" volunteerism?

AmeliaBR,
@AmeliaBR@front-end.social avatar

@kissane Answering "privileged people" is a bit too simple. Plenty of wealthy white tech bros would never get moralistic about the purity of open source because they're on the hustle to monetize everything. (Sometimes by building their reputation from open source contributions & then pivoting to something else.)

No, the people who want open source to be all volunteer are people who idealize their hobby as counter-culture resistance, an antidote to their dull, corporate, trade-secret day jobs.

AmeliaBR,
@AmeliaBR@front-end.social avatar

@kissane Of course, the other group that benefits are the for-profit companies that incorporate all the free labour from open source contributors. But unless your example guy was being really disingenuous, it doesn't sound like that was his motivation.

So, I think it's more like the obsession with amateurism in the early 1900s Olympics & sports movements: people who have easy but boring ways to make money are enthralled by the idea of taking on noble adventurous challenges for the love of it.

bkardell, to random
@bkardell@toot.cafe avatar

Just realized i missed a dentist appointment yesterday. Whoops. 😔

AmeliaBR,
@AmeliaBR@front-end.social avatar

@bkardell This seems a very appropriate moment for the 😬 emoji.

bramus, to random
@bramus@front-end.social avatar

🌞 vs 🌑

If you’ve been following me for a while here you most likely know that I think that Dark Mode Toggle Buttons should be a browser feature:

Let the user decide which color-scheme they want on a per-site basis and store that.

https://brm.us/dark-mode-override

AmeliaBR,
@AmeliaBR@front-end.social avatar

@bramus I've been asking for a browser per-website colour scheme toggle ever since dark mode CSS was introduced.

The only real argument against I've heard is that it would be bad UX if there's a toggle that doesn't have an effect on many websites. So, ideally, your extension / future feature would include some way of detecting whether the current website would actually do anything differently, and disable the toggle button if not.

AmeliaBR,
@AmeliaBR@front-end.social avatar

@bramus But given that there are now multiple ways to react to user preferences (CSS media query, CSS light-dark function, media query API, new preferences API...) it might be difficult for an extension to detect whether a preference change would have an impact!

AmeliaBR,
@AmeliaBR@front-end.social avatar

@jensimmons @bramus How would a per-site colour-scheme preference add a fingerprint datum compared to an OS colour-scheme preference?

If anything, it might add some noise to the fingerprint, since it would vary from one domain to the next!

simevidas, to random
@simevidas@mastodon.social avatar

How do I push the outline to the right so that it doesn’t go over the image? I know there exists a CSS declaration for this, but I forgot what it is.

https://jsbin.com/deyugur/edit?html,css,output

edit: Just to make sure that I don’t get any clear: left answers, the clear property pushes the list below the image. That’s not what I want.

AmeliaBR,
@AmeliaBR@front-end.social avatar

@simevidas display: flex on the outer div.

There's no neat way to handle this in a float-based layout without giving the text and image explicit widths. (If you're OK with explicit widths, then you could make the ul an inline block or another floated block.)

ned, (edited ) to random
@ned@mstdn.ca avatar

omg, on today's list of the most unusable UI... See how there's a space between the menu and the submenu? Well, it's not just visual. If you try to move the cursor from one menu to the other, it falls in the space and the menus disappear. -_-

EDIT: After many tries, I finally got to the submenu item. I guess I whooshed the cursor over fast enough for it to stay up?

2nd EDIT: ...and, I can't manage to do it again.

AmeliaBR,
@AmeliaBR@front-end.social avatar

@ned It's a web accessibility milestone! After 2+ decades of having to remind developers to test the interfaces for usability with keyboards and screen readers, and 1+ decade of reminding them to test for touch screens, we now apparently also need to tell them to test for usability with mouse cursors?

bkardell, to random
@bkardell@toot.cafe avatar

Is there a way on github or via some extension to kind of "show me the web of other issues connected to this issue"?

AmeliaBR,
@AmeliaBR@front-end.social avatar

@bkardell Would this be based on cross-links in issue discussions? (Since the links in already show up as notifications in the discussion list, it should be possible to make a little bookmarklet to scan the HTML and find all the links in & out, although you'd also need to reveal any abridged sections of comments.)

Or are you thinking about looking at issue lists in issue project milestones & other metadata?

aardrian, to random
@aardrian@toot.cafe avatar

NPM: “And I would’ve gotten away with it* if it weren't for you meddling kids!”
https://hachyderm.io/@cvennevik/112100333787925276

*Continuing to try, yet fail, to be a platform one can trust.

AmeliaBR,
@AmeliaBR@front-end.social avatar

@aardrian Love this analogy:

> We tried to hang a pretty picture on a wall, but accidentally opened a small hole. This hole caused the entire building to collapse. While we did not intend to create a hole, and feel terrible for all the people impacted by the collapse, we believe it’s also worth investigating what failures of compliance testing & building design could allow such a small hole to cause such big damage.

https://boehs.org/node/npm-everything

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • JUstTest
  • kavyap
  • DreamBathrooms
  • cisconetworking
  • Durango
  • mdbf
  • magazineikmin
  • ethstaker
  • osvaldo12
  • rosin
  • Youngstown
  • slotface
  • everett
  • tacticalgear
  • megavids
  • thenastyranch
  • ngwrru68w68
  • modclub
  • cubers
  • normalnudes
  • InstantRegret
  • GTA5RPClips
  • tester
  • khanakhh
  • provamag3
  • anitta
  • Leos
  • lostlight
  • All magazines
    •