Mike-麥-Mai-v1.618 😎

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.

Mike-麥-Mai-v1.618 😎mikemai2awesome
2025-07-03

@matthiasott you forgot the obvious.

CACHE MONEY

Mike-麥-Mai-v1.618 😎mikemai2awesome
2025-07-03

@cirrus tell me what you think. i am not sure if i got the json format correctly yet. mikemai.net/tokens/

Mike-麥-Mai-v1.618 😎mikemai2awesome
2025-07-03

@cirrus :blobcat:

Mike-麥-Mai-v1.618 😎mikemai2awesome
2025-06-26

design like it's 1997. code like it's 2025. :catjam:

A screenshot of a web application called "Design Tokens Generator v1.0" with Chrome's developer tools open, creating a split-screen view. The top portion shows the main application interface with a light gray header containing the title and instructions, followed by a large white text input area labeled "Input JSON" that contains code defining font weight tokens with curly braces and properties like "fontWeight" with values for light and dark themes, and below that are three radio button options for output format with "CSS" currently selected, "iOS SwiftUI" and "Android Compose" as alternatives. The bottom half displays Chrome's Developer Tools panel split into two sections: the left side shows HTML source code in a dark theme with white text and colored syntax highlighting, while the right side contains a CSS styles panel with a long scrollable list of CSS custom properties that all begin with double dashes (like --color-desktop-background, --color-surface-primary) using oklch color values with specific numeric parameters covering colors, spacing, and font sizes, plus a small visual box model diagram in the upper right showing padding and dimensions of 1280x1157.48 pixels, indicating this tool converts design token JSON input into usable CSS variables for web development.
Mike-麥-Mai-v1.618 😎mikemai2awesome
2025-06-23

@stephaniewalter @cassidoo very cool! also worth reading is this section in The Practical Typography: practicaltypography.com/type-c

Mike-麥-Mai-v1.618 😎mikemai2awesome
2025-06-21

@yatil @AssistivLabs love the logo!

Mike-麥-Mai-v1.618 😎mikemai2awesome
2025-06-18

Some highlights include a combobox component that uses roving tabindex rather than aria-activedescendant (which still has poor support in Mac VoiceOver and Android Talkback), a doom scrolling feed component (sorry!), a popup nav component that doesn’t incorrectly uses role="menu" (many sites make this mistake), and lots of CSS nuggets like logical properties and color-mix with system colors.

Mike-麥-Mai-v1.618 😎mikemai2awesome
2025-06-18

I did this with the help of AI buddy Cursor. This is an exercise in typesetting, front-end design, accessibility design, API design, and documentation design. While the HTML and CSS are decent, the Astro code might not be production-ready. Carefully review the code before using it.

Mike-麥-Mai-v1.618 😎mikemai2awesome
2025-06-18

Continuing to pay tribute to the great typographer Matthew Carter and my love for minimal design, I have built a minimal component library using @astro as an extension to MCSS (a classless CSS framework inspired by Matthew Carter fonts). mikemai.net/mcds/

Feedback is always appreciated on Github!

MCDS set in Big Caslon, a typeface by Matthew Carter.
Mike-麥-Mai-v1.618 😎mikemai2awesome
2025-06-18

finally got a bookshelf to organize my physical medias. this is just half of them. i bought lots of CDs for the album art.

A white bookshelf showcasing a diverse collection of CDs, DVDs and cassette tapes, neatly organized across four shelves. Top shelf is my Andy Lau collection, second shelf is CantoPop and MandoPop, third shelf is American and European music, forth shelf contains only cassette tapes.
Mike-麥-Mai-v1.618 😎mikemai2awesome
2025-06-18

ok i am not dead. just forgot about socials. :breathe:

Mike-麥-Mai-v1.618 😎mikemai2awesome
2025-05-22

Just watched 28 Days Later in the theater in its full 480p glory. Loved it.

Mike-麥-Mai-v1.618 😎mikemai2awesome
2025-05-10

i judge albums by the cover. this one turned out to be great. what a steal at the local records store.

"Count Bass D - Act Your Waist Size." The album artwork features a cartoon illustration of a man sitting in a red folding chair, smiling and reaching out to touch the head of a young boy standing in front of him. The boy is wearing a red and white striped shirt and green jeans. Behind the seated man, three other children are looking on. One girl with a pink bow in her hair is wearing a pink shirt, another girl is wearing a red shirt, and a boy in a blue shirt is leaning forward with his hands on his knees. Above the seated man's head is a speech bubble that says, "Act Your Waist Size." The name "COUNT BASS D" is prominently displayed in large red letters vertically along the right side of the cover.
Mike-麥-Mai-v1.618 😎mikemai2awesome
2025-04-18

a tiny codepen for a quick CSS tip. probably old news to some people but i still encounter devs who don't know this little nugget.

codepen.io/mikemai2awesome/pen

Light & Dark Mode In Just 1 Line of CSS. Code snippet by Mike Mai showing :root { color-scheme: dark light; }
Mike-麥-Mai-v1.618 😎mikemai2awesome
2025-04-10

@matuzo "improving existing user agent styles and adding new styles only where browsers fall short" is exactly my goal whenever i start a minimal css project, most recent one being mikemai.net/mcss where i intentionally not define color and background color in most things and rely on UA colors for both light and dark mode.

Mike-麥-Mai-v1.618 😎mikemai2awesome
2025-03-29
On a small wooden table lies a beige-covered book, which casts a soft shadow under the sunlight, suggesting it's a sunny day. Next to the book is a simple glass bottle filled with water, in which a single orange rose is elegantly placed. The rose, with its lush petals and green leaves, stands out against the background. The background is softly blurred, showing a window with a view of a garden outside. There are various green plants and some colorful flowers. The interplay of natural light creates a warm and tranquil atmosphere, making the scene feel peaceful and inviting, perfect for relaxation or contemplation.
Mike-麥-Mai-v1.618 😎mikemai2awesome
2025-03-17

@fkh01 在越秀公园附近,我朋友就说这是历史文物,要我快点拍。不然以后找不到。哈哈

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst