alvaromontoro

5t3ph, 2 months ago to random

Tiny moment of personal celebration for getting the "Senior" tag added to my title 🎉

aardrian, 2 months ago to accessibility

This overlay review from TechRadar, which “pride[s] [itself] on [its] independence and [its] rigorous review-testing process,” certainly reads more like a paid promotional piece:
https://www.techradar.com/pro/userway-review-a-web-accessibility-solution-with-an-easy-setup-great-results

It doesn’t take much rigor to find all the coverage showing this #overlay failing to work.

I emailed the author yesterday (the address on the article bounces with ‘no such user,’ so had to track one down elsewhere).

#a11y #accessibility

sarajw, 2 months ago to random

Can anyone working at #Netlify comment on the current discourse regarding small hobbyists with static sites having to unexpectedly deal with huge, sudden bills?

Do I need to be worried I might get stung?

alvaromontoro, 2 months ago to CSS

I aim to code a new toggle switch each day in 2024. But work comes first, and I fell a bit behind on this personal challenge... So, I coded 8 toggle switches this weekend using a single HTML element and CSS.

Find these and many more switches on this @codepen collection: https://codepen.io/collection/aMPYMo.

#css #html #webdev

Animation showing eight different toggle switches. The demos have 4 of each in off state, on state, off state (disabled), and on state (disabled) stacked vertically. The demos are: - Smiling emoji - Metal - 3D ball - Colorful (animated) - On/Off - Growing toggle - Growing toggle 2 - Airplane Mode

bramus, 2 months ago to random

🚐💥🚗

Some bloke rear-ended me on the highway today. I was doing the mandatory 70kph because of road works and he obviously was going faster.

No injuries, only material damage. The insurance companies will deal with it.

So, how's your weekend going?

mia, 3 months ago to random

I'm only going to the @eleventy symposium to learn what the enemy is up to. I'm gonna Keep Making Web Sites Real Bad, actually. So bad, you won't even believe it. 😏

jensimmons, 3 months ago to random

Have you made a site that uses View Transitions? Or a demo? Link? I’d love to see it.

alvaromontoro, 3 months ago to random

Toggle switch #28: Día de los Muertos
https://codepen.io/alvaromontoro/pen/OJqqMxe

It is a single HTML element animated with CSS styling. No images or JavaScript.

alvaromontoro, 3 months ago to random

A 3D-CSS animation I created over the weekend (click on the start/close buttons to animate).
https://codepen.io/alvaromontoro/full/dyrgyxx

It was inspired by "Mobile navigation system" by Dzianis Rakhuba (linked in the source code).

aardrian, 3 months ago to random

I am frequently misleading or wrong, but nobody is investing tens of millions of dollars in me.
https://social.lol/@sophie/111900821887094668

alvaromontoro, 3 months ago to random

Today is comiCSS second anniversary. Two years ago, I started this "ridiculous" idea of having a comic about web development (in general) and CSS (in particular) fully coded in HTML and CSS. To celebrate, this last week I coded a daily carton (vs weekly) and collected all of them in this article: https://alvaromontoro.com/blog/68051/css-cartoons-for-comicss-second-anniversary

alvaromontoro, 3 months ago to CSS

New comiCSS cartoon: winner
https://comicss.art/?id=119

#css #joke

alvaromontoro, 3 months ago to CSS

New cartoon: the Phantom of the Opera
https://comicss.art/?id=118

It is coded in HTML + CSS. You can check the source code and a live demo at https://comicss.art/comics/118/phantom-of-the-opera.html

#css #joke

alvaromontoro, 3 months ago to random

Has Chrome changed something on how the fonts are rendered? (Especially the bolds). It upgraded and now many sites (not all) look weird: bold text looks darker and thicker than on Safari or Firefox.

alvaromontoro, 3 months ago to random

Design question: should a toggle switch have a pointer cursor? And a follow up: how about if the design is "not standard"?

I was leaning towards "no" based on checkboxes/radio-buttons not having a pointer cursor and pointer being for links. But then, if it's a custom design that is not standard, it may not be obvious that the element is interactive.

alvaromontoro, 3 months ago to random

This slider is a single HTML tag styled with CSS. No images and no JS (apart from an inline command to update a CSS variable.) It's responsive and works on all major browsers.

It uses:

• Custom properties
• Filters
• Container queries
• Trigonometry functions

Demo on @codepen: https://codepen.io/alvaromontoro/pen/oNVEqgz

An input range component where the thumb to move is a plane. On the left, it says New York; on the right, it says Madrid. As the plane moves within the range, it simulates a take-off/landing (the plane grows towards the middle, projecting a fainter shadow; and it is smaller towards the edges with a sharper shadow). Some clouds move around while moving the plane right and left. When the component is made narrower, the plane is replaced by a smaller helicopter.

dalias, 3 months ago to random

So wait is it "nobody wants to work anymore" or "we have too many people working for us and need to lay off a bunch"? Help me understand I'm confused. 🙃

alvaromontoro, 3 months ago to random

Next week, it will be the second anniversary of comiCSS. It is my pet project: a webcomic about CSS coded in CSS.

It is ridiculous, mostly useless, somewhat educational, and a lot of fun to create. Hopefully, it will keep going for a while longer.

https://comicss.art

alvaromontoro, 3 months ago to random

Developers before and after... Barbie edition...

alvaromontoro, 4 months ago to random

I wrote a short article about the new native toggle switches on Safari: how to create them, demos, pros, cons, and a (little) rant about the syntax 😅
https://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari

css, 4 months ago to CSS

📝 New CSS Article

I have been working on this for a while, and it's finally done! 🥳

You can now understand all the magic behind using the border-image in many of my demos. Check my latest article via @smashingmag

A long one but it really worth it 👍

https://www.smashingmagazine.com/2024/01/css-border-image-property/

#CSS

aardrian, 4 months ago to random

Remember, this is not in the WHATWG HTML spec:

<input type="checkbox" switch>  

https://github.com/whatwg/html/pull/9546

Safari simply decided to implement it, perhaps to force adoption and make another flippant claim it was first with something (when it gets merged into the versionless spec).
https://adrianroselli.com/2021/10/switch-role-support.html#Update02

aardrian, 4 months ago to accessibility

. @SteveFaulkner shows how to work around broken <optgroup> support:
https://html5accessibility.com/stuff/2024/01/12/options-for-optgroup-labeling-of-options/

I added to my post (which is really an indictment of WHATWG and Google/Apple):
https://adrianroselli.com/2023/10/splitting-within-selects.html#Update02

My MDN support chart issue for <optgroup> is still out there:
https://github.com/mdn/browser-compat-data/issues/21663

But I expect it to be closed since MDN does not track real support (specifically, #accessibility support), just as they did with <mark>:
https://github.com/mdn/browser-compat-data/issues/21847#issuecomment-1878757924

The burden is on you to test, dear author.