@alvaromontoro@front-end.social
@alvaromontoro@front-end.social avatar

alvaromontoro

@alvaromontoro@front-end.social

100% not an alien.

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

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

This is tomorrow's cartoon for comiCSS. I like the version without the explanation of what HWB stands for because it looks cleaner, but I don't think it's clear enough without the description. Suggestions/recommendations?

Cartoon titled 'Coffee Style Script'. And a subtitle: "Using the HWB color function to describe coffee. hwb(hot-water, lightness/milk, blackness/coffee)" Below there are different types of coffee described as CSS colors: - Black coffee is hwb(0 0 100%), - Americano is hwb(50% 0 50%), - Lungo is hwb(50% 0 50%), - Cafe au lait is hwb(0 50% 50%), - Latte is hwb(0 66% 33%), - Macchiato is hwb(0 33% 66%), - Cappuccino is hwb(0 66% 33%), - Espresso is hwb(0 0 33%), and - 'Need more coffee!' is hwb(0 0 0).

alvaromontoro,
@alvaromontoro@front-end.social avatar

@cheeaun would renaming to something like "coffee style syntax" or "coffee style suggestions" be better?

alvaromontoro,
@alvaromontoro@front-end.social avatar

@cheeaun i had that at the beginning and discarded it as too obvious 😓, but it definitely sounds better than the others. So... I'll change it back 😅

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

Wait what... Are we totally erasing Liz Truss from history now?

BBC News - General election: When is the next one and could it be called sooner?
https://www.bbc.co.uk/news/uk-politics-62064552

alvaromontoro,
@alvaromontoro@front-end.social avatar

@sarajw she was beaten by a lettuce. That qualifies as a history removing event.

sarajw, to accessibility
@sarajw@front-end.social avatar

Helloooo fellow wonks - is there a particularly good article which speaks of the problem of too much ARIA and not enough semantic HTML for someone a little less clued up...?

alvaromontoro,
@alvaromontoro@front-end.social avatar

@hi_mayank @sarajw I'm going to be really pedantic here, but the first rule of aria is not "don't use aria", it's "use semantic HTML". There are many developers (and accessibility advocates) who seem to take the "don't use aria" thing as a literal.

alvaromontoro,
@alvaromontoro@front-end.social avatar

@hi_mayank @sarajw true. And anyway it's more of a "use semantic HTML if available" —and that's a big if. In my opinion (that i know it's not popular or shared), perpetuating the "don't use aria" is wrong, as it diminishes its value and discourages its learning and proper use.

alvaromontoro,
@alvaromontoro@front-end.social avatar

@hi_mayank @sarajw "Use semantic HTML" doesn't exclude aria (or any technology) from the picture. Use semantic HTML and expand it with aria if needed. "Don't use aria" excludes the very same technology that will likely be needed in some cases. And from my experience (and this is anecdotal) most people use the "don't use aria" as a discussion finisher, without providing the needed context that you rightly mentioned. That's why I dislike "don't use aria", because I find it incomplete and negative.

alvaromontoro,
@alvaromontoro@front-end.social avatar

@hi_mayank @sarajw in the example of the button. <button> may not be perfect and may need an accessibility boost, but it is 1,000 times better than using <div role=button>, which is what the first rule of aria warns against.

alvaromontoro,
@alvaromontoro@front-end.social avatar

@hi_mayank i know, sorry 😔

And I was not fighting you. That's the last thing I want to do.

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

I was using Kudoboard, when I noticed the GIFs didn't move. Then I realized the "reduce motion" setting was active on my computer. Deactivating it makes the GIFs move again (after reload). I don't know if that's a feature by Kudoboard or Giphy, but it's pretty cool.
👏👏👏

alvaromontoro,
@alvaromontoro@front-end.social avatar

@cheeaun reduce motion doesn't pause GIFs in the same way that it doesn't pause CSS animations (plus afaik animated GIFs cannot be paused, that's why they can be an accessibility issue.) The website has something that replaces the animated GIFs with static versions if it detects that the reduce motion setting is on... which I find really nice. GIFs can be annoying.

alvaromontoro,
@alvaromontoro@front-end.social avatar

@cheeaun let me check, but I didn't see any.

alvaromontoro,
@alvaromontoro@front-end.social avatar

@cheeaun just checked, they don't seem to have any (there's a settings option, but it doesn't include anything about GIFs or animations). It is a nice feature and was excited about it, now I start seeing some shortfalls. Not perfect, but it feels like a step in the right direction still.

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

A CSS drawing of a Motorola RAZR V3 (the best flip phone ever created 😉)

Coded in HTML and CSS, it is responsive and slightly animated (the screen will go to sleep after 10 seconds and wake up after pressing any button.)

Demo on : https://codepen.io/alvaromontoro/pen/JjaMMXw

alvaromontoro,
@alvaromontoro@front-end.social avatar

Safari has some issues with the drop-shadow filter for the battery/bar outlines. 😓

Firefox doesn't support :has() yet, so when the phone goes to sleep, it never wakes up (RIP RAZR) ☠️

In both, the blue notch disappears at certain sizes (then it reappears, then disappears again...)

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

A CSS drawing of a Nintendo Switch. It is:

  • responsive: resize the window to see it change;
  • semantic: the buttons are buttons;
  • customizable: CSS variables to change the JoyCon colors;
  • realistic: or at least that was the goal...

Demo on CodePen: https://codepen.io/alvaromontoro/pen/LYBqdaR

Video of the process: https://youtu.be/7IrOlF25_F0

alvaromontoro,
@alvaromontoro@front-end.social avatar

A video of the process: https://www.youtube.com/watch?v=7IrOlF25_F0

It was divided into several Twitch sessions on Friday and Saturday, that's why the illumination and clothes are different.

This whole live coding on Twitch is not working for me. I can only do the "my kids are already sleeping" or "my kids are not awake yet" timeframes.

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