@mikemai2awesome@mastodon.social
@mikemai2awesome@mastodon.social avatar

mikemai2awesome

@mikemai2awesome@mastodon.social

A graphic designer who’s a maven in CSS. My skills are sharp, my artistry is VAST. I create with precision, every rectangle PLACED. My work is clean, my style is ACE. With every clack of the keyboard, I bring to LIFE, websites that are accessible, modern, and TIGHT. Ima master of layout, a font CONNOISSEUR. My designs are always fresh, never a BLUR.

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

pablolarah, to webdev
@pablolarah@mastodon.social avatar

🟢The wrong way to do Web Components
by Chris Ferdinandi @ChrisFerdinandi @cferdinandi

https://gomakethings.com/the-wrong-way-to-do-web-components/

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@pablolarah @cferdinandi hiding semantic elements inside the shadow dom is terrible

polotek, to random
@polotek@social.polotek.net avatar

I don't think I'll ever understand the kind of person who says "you MUST fight with me about technology minutia. And if you choose not to, I will block you forever." Like it's such a weird combination of principles.

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@blaise @kethinov @polotek i like to write code and i like to build/design things. I care about how the code is structured/organized and what the code does. I guess I’m the third kind?

aardrian, to random
@aardrian@toot.cafe avatar

It’s not wrong. But it’s not right, either.

“Creating Fluid Typography with the CSS clamp() Function”
https://www.sitepoint.com/fluid-typography-css-clamp-function/#:~:text=setting%2016px%20(or%20whatever%20value%20you%20want)%20as%20the%20root%20font%20size

It is, however, nice to see that my advocating for less broken fluid type approaches has paid off, even if the handwavy ‘accessibility’ explanations don’t point to my post that first raised them. It’s cool, it’s only my ego (and detailed explanations with examples).

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@aardrian the min in the clamp would never be met in this formula

patrick_h_lauke, to accessibility
@patrick_h_lauke@mastodon.social avatar

now that my "Why are my live regions not working?" blog post is out https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/ ... working on the next ones in the series: "Why am I always so tired?" and "Why bother?"

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@patrick_h_lauke the questions from everyone working in accessibility 🙃

mikemai2awesome, to CSS
@mikemai2awesome@mastodon.social avatar

This is the way.

@ media (hover: hover)  
 a:hover { ... }  
}

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@cirrus yes exactly.

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@patrick_h_lauke oh yes! Thank you

mikemai2awesome, to CSS
@mikemai2awesome@mastodon.social avatar

Just sharing something I found recently. One line of CSS to make San Francisco more accessible:

font-feature-settings: "ss06";

Why isn’t this the default? No clues.

https://codepen.io/mikemai2awesome/pen/JjVxPKE

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@simevidas someone mentioned this Twitter hack as well in one of my Slacks! very nice

aardrian, to random
@aardrian@toot.cafe avatar

I finally sat down and read this, which is not a short read, not about social media alone, and not good for bedtime:

“How social networks prey on our longing to be known”
https://janmaarten.com/polywork/

Fuck. If you weren’t already wary of tech, you will be. If you were wary, well, lots of good reference links all laid out in one place.

Might take that notice at the end for my own site.

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@aardrian nice one, that’s a great notice. Jan is writing quite a lot of bangers lately.

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

Another audit, another website that uses divs instead of buttons. I. don't. get. it.

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@matuzo @hi_mayank @cvennevik @sarajw I believe safari adds 2px margin, probably need to reset that as well.

aardrian, to random
@aardrian@toot.cafe avatar

Hit Boston Public Library for tea. Not a full service (because not GF), but just tea and snacks. I got a London Fog variation and all the GF items on the menu — cauliflower soup and cauliflower bites.

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@aardrian I was just in Boston today. Some newer places opened up in Chinatown. Fu Chun Ju and Jiang Nan are both nice sit down places if you look for food later.

yatil, to random
@yatil@yatil.social avatar

I love waiting for stuff that is already loaded.

Safari on the left super responsive, zero delay. Safari Technology Preview on the right, it takes like half a second until the text is in place.

Of course, the transitions also don’t support reduced motion settings, so they are a great additional way to make your users feel sick. There are no website settings to turn them off.

(CW: Video and video in the linked post are potentially vestibular triggers.) https://front-end.social/@bramus/112252063739648992

Video is split screen, klicking on content on the left reveals it without delay. On the right, an animation is triggered that takes about half a second. You just need to wait until the animation is settled to interact with it. And it is a full-page animation, so easily a vestibular trigger.

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@yatil css could have easily been added for reduced motion, the demo could have been better. I do welcome the view transition, animation does help in certain cases (not everywhere), and killing JS dependency is going to improve overall performance.

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@yatil It doesn’t help that most people think reduce motion is level AAA, and clients only ask for AA. Unless i am wrong but i believe reduce motion is AA, making a custom control to turn animation on/off is AAA. So i always push for full reduce motion support. Just released a site this week with that.

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@yatil yeah, that’s what i go by but some people argue for 2.3.3

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@yatil ok maybe i am wrong after reading this again.

Providing a mechanism to pause autoplay/auto-update is level A.

Stopping animations in general is level AAA.

This doesn’t make sense to me. Motion is motion, regardless if it autoplays or requires click/scroll to trigger. Why is the second one AAA. 🙃

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@yatil so in the bramus demo, that still passes AA because it triggers on click not autoplays?

matthiasott, to blogging
@matthiasott@mastodon.social avatar

Bloggers and writers! Which tool(s) are you using to draft and write your posts or articles? And how do you keep track of the status of a piece (idea/draft/edited/published etc.)?

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@matthiasott private codepen

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

I'm doing an accessibility ticket at work! Hooray! Couldn't be happier!

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@yatil @hi_mayank @sarajw note this example still doesn’t work well with Mac VO + safari and Android talkback + any browser.

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@hi_mayank @yatil @sarajw aria-activedescendent is the problem. Safari said it’s fixed in its latest version but doesn’t look it.

aardrian, to random
@aardrian@toot.cafe avatar


CSS + Accessibility: Inclusion Through User Choice
https://noti.st/cariefisher/qQ4jqu/css-accessibility-inclusion-through-user-choice

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@aardrian wish i was there to see this talk. Time to write a part two of my post. https://mikemai.net/blog/2022/05/31/the-case-for-respect.html

patrick_h_lauke, to random
@patrick_h_lauke@mastodon.social avatar

still tickles me every time that @eric and I both clearly don't know our ABCs by heart and need reminders...

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@patrick_h_lauke @eric futura guy and swiss guy 😄

aardrian, to random
@aardrian@toot.cafe avatar

I often argue against setting a base font size, so I wrote an extensive, verbose, detailed post about it:
https://adrianroselli.com/2024/03/the-ultimate-ideal-bestest-base-font-size-that-everyone-is-keeping-a-secret-especially-chet.html

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@aardrian @mikemai2awesome :root usually is the html but not always, because css can be used to style other things: svg, iframe, shadow-dom, etc. but this is besides the point, let's get back to body font-size 100%.

To use a % value on the body, the % has to reference something, and it would be the html. If the html is tampered with, you are shit out of luck. Your body font-size 100% won't fix anything.

So in the context of your post, I do think you mean :root/html rather than body.

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@aardrian @mikemai2awesome I understand your point is to not set it, my point is if your boss man tell you to set it, then set it at the :root. Setting it at the body doesn’t guarantee the font size can scale with the device or browser settings. Yes, it seems pointless to set html font size 100% but it is also pointless to set body font size 100% if you mandate html to be untouched.

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@aardrian @mikemai2awesome Another benefit of setting it at the :root (if you are forced to explicitly define font size by boss man) is to counter any dumb frameworks. As far as i know, no popular framework is messing with the :root yet, but they might mess with html. I have to double check this again, but :root should have higher specificity than html.

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