Lmst
Login

#GUIchallenges

pablolarahpablolarah
2023-06-30

🎨 Thinking on ways to solve color palettes
by @argyleink @argyleink at @ChromiumDev

youtu.be/6aCsAMgwnjE

YouTube cover with white text "Color Palettes with OK LCH" on the left on violet background and illustration of small caricature of Adam on the beginning of a curved to the right image with black border of color tables. On bottom left: logo GUI challenges.
Thomas Steiner :chrome:tomayac@toot.cafe
2022-05-19

RT @argyleink@twitter.com

🆕 #GUIchallenges
Thinking on styling `<button>` elements

I style all the web's different button types with custom properties and :where(), for light/dark adaptive buttons that are easy to make new variants with 💀🤘🏻

links to blog, youtube, and more 👇🏻

🐦🔗: twitter.com/argyleink/status/1

Thomas Steiner :chrome:tomayac@toot.cafe
2022-04-14

RT @argyleink@twitter.com

🆕 #GUIchallenges
Thinking on <dialog> components

how to add animation, events, light dismiss and more!

Blog's got all the details web.dev/building-a-dialog-comp
YouTube overview youtube.com/watch?v=TD1QxlGgIP
GitHub source github.com/argyleink/gui-chall
Try it gui-challenges.web.app/dialog/

🐦🔗: twitter.com/argyleink/status/1

Thomas Steiner :chrome:tomayac@toot.cafe
2022-02-10

RT @ChromiumDev@twitter.com

🆕 #GUIchallenges
Building a light/dark adaptive SVG favicon

Watch → youtube.com/watch?v=4pJahmCR8k
Read and build → goo.gle/3uASh1s
Try a demo → goo.gle/3GAzzt4
Get the source → goo.gle/3ov8x08

🐦🔗: twitter.com/ChromiumDev/status

Thomas Steiner :chrome:tomayac@toot.cafe
2021-12-09

RT @argyleink@twitter.com

🆕 #GUIchallenges
Thinking on ways to build Toasts

Toasts? 🤔
passive, non-interactive UI feedback components 🤓

✅ YouTube youtube.com/watch?v=R75ZVW4LW5
✅ web.dev post web.dev/building-a-toast-compo
✅ Demo gui-challenges.web.app/toast/d

🐦🔗: twitter.com/argyleink/status/1

Thomas Steiner :chrome:tomayac@toot.cafe
2021-11-11

RT @argyleink@twitter.com

🆕 #GUIchallenges
Thinking on ways to build a 3D menu

Watch → youtube.com/watch?v=HCsV8u-KYU
Read along → goo.gle/3c3oILb
Try a demo → goo.gle/3bWNSLz
Get the source → goo.gle/3wulnOO

Thought the Japanese translated version turned out super rad!

🐦🔗: twitter.com/argyleink/status/1

CSS-Trickscss@hello.2heng.xin
2021-11-10

RT Adam Argyle
🆕 #GUIchallenges
Thinking on ways to build a 3D menu
Watch →
Read along →
Try a demo →
Get the source →
Thought the Japanese translated version turned out super rad!
youtube.com/watch?v=HCsV8u-KYU
goo.gle/3c3oILb
goo.gle/3bWNSLz
goo.gle/3wulnOO

CSS-Trickscss@hello.2heng.xin
2021-10-18

RT Adam Argyle
🆕 #GUIchallenges 🦇
responsive multi-select UX
Peep the video
Read along
Try the demo
[video alt]
UX preview across MacOS Safari, iOS Safari (iPad and iPhone), Android Chrome, Firefox and desktop Chrome
youtube.com/watch?v=x0aCdLDZ8B
web.dev/building-a-multi-selec
gui-challenges.web.app/multi-s

Thomas Steiner :chrome:tomayac@toot.cafe
2021-09-09

RT @argyleink@twitter.com

🆕 GUI Challenge
Thinking on a split-button component

Try it
gui-challenges.web.app/split-b
Watch it
youtube.com/watch?v=Qcpru-fIgw
I blogged it
web.dev/building-a-split-butto

Moar #GUIchallenges
youtube.com/playlist?list=PLNY

[video alt]
visual tour of the component's themes and keyboard accessibility

🐦🔗: twitter.com/argyleink/status/1

Thomas Steiner :chrome:tomayac@toot.cafe
2021-08-12

RT @argyleink@twitter.com

🆕 GUI Challenge
Thinking on ways to build a switch

[video alt](fun show moment)
apparently a 1px switch can be swiped 1px..! a switch, but tiny 🤣

Video
youtube.com/watch?v=_KqccADghc
Article
web.dev/building-a-switch-comp
Moar #GUIchallenges
youtube.com/playlist?list=PLNY

🐦🔗: twitter.com/argyleink/status/1

Chrome Developers :verify:ChromiumDev@hello.2heng.xin
2021-06-10

RT Adam Argyle
🆕 #GUIchallenges on Color Schemes
⚙️ auto
☀️ light
🌙 dark
💡 dim
Learn how I use CSS custom properties for multiple color schemes. How do you?!
Watch
Read along
Try a demo
Code
youtube.com/watch?v=oHcTn83M1l
web.dev/building-a-color-schem
gui-challenges.web.app/color-s
github.com/argyleink/gui-chall

:sys_twitter: twitter.com/argyleink/status/1

Thomas Steiner :chrome:tomayac@toot.cafe
2021-06-09

RT @argyleink@twitter.com

🆕 #GUIchallenges on Color Schemes
⚙️ auto
☀️ light
🌙 dark
💡 dim

Learn how I use CSS custom properties for multiple color schemes. How do you?!

Watch youtube.com/watch?v=oHcTn83M1l
Read along web.dev/building-a-color-schem
Try a demo gui-challenges.web.app/color-s
Code github.com/argyleink/gui-chall

🐦🔗: twitter.com/argyleink/status/1

CSS-Trickscss@hello.2heng.xin
2021-06-09

RT Adam Argyle
🆕 #GUIchallenges on Color Schemes
⚙️ auto
☀️ light
🌙 dark
💡 dim
Learn how I use CSS custom properties for multiple color schemes. How do you?!
Watch
Read along
Try a demo
Code
youtube.com/watch?v=oHcTn83M1l
web.dev/building-a-color-schem
gui-challenges.web.app/color-s
github.com/argyleink/gui-chall

Chrome Developers :verify:ChromiumDev@hello.2heng.xin
2021-05-12

🆕 #GUIchallenges
a Media Scroller
✅ use it from your couch
✅ with touch
✅ in any language
✅ no truncation
✅ much more!
demo
@argyleink shows you on YouTube
and tells you on
gui-challenges.web.app/media-s
youtube.com/watch?v=jmLdZY_Lo1
web.dev/
web.dev/building-a-media-scrol

:sys_twitter: twitter.com/ChromiumDev/status

Chrome Developers :verify:ChromiumDev@hello.2heng.xin
2021-04-21

🆕 #GUIchallenges
"Thinking on ways to split text"
@argyleink demo's and explains a minimal way to chop text up for letter or word animations + interactions
Show
and tell
youtube.com/watch?v=3hvN7bkjZB
web.dev/building-split-text-an

:sys_twitter: twitter.com/ChromiumDev/status

Chrome Developers :verify:ChromiumDev@hello.2heng.xin
2021-04-03

RT Neeco
Estas son las cosas que hacen linda a la comunidad
Adam Argyle: #GUIchallenges so far
1. Stories
2. Centering
3. Sidenavs
4. Tabs
5. Settings
I write articles for each video too,
covering:
✅ layout
✅ color
✅ typography
✅ animation
✅ accessibility
✅ devtools
✅ cross browser
✅ javascript
Catch up won't ya!?
youtube.com/watch?v=dm7gnp6eh3

:sys_twitter: twitter.com/NeecoSanudo/status

Media source: https://pbs.twimg.com/media/Ew3VN9CVIAQwFsD?format=jpg&name=origMedia source: https://pbs.twimg.com/media/Ew3VP-pVkAA_WCU?format=jpg&name=orig
Chrome Developers :verify:ChromiumDev@hello.2heng.xin
2021-03-18

🆕 #GUIchallenges:
Thinking on ways to build Settings UI
✅ layout
✅ color
✅ animation
✅ accessibility
On air now!
If you're swift, you can have your comment or question answered by @argyleink while it's airing 🏃‍♀️
☞
youtube.com/watch?v=dm7gnp6eh3

:sys_twitter: twitter.com/ChromiumDev/status

CSS-Trickscss@hello.2heng.xin
2021-01-21

RT Chrome Developers
🆕 #GUIchallenges from @argyleink!
"Thinking on ways to solve a SIDENAV"
✅ responsive
✅ keyboard support
✅ cross browser
✅ grid + :target
✅ transforms
✅ light & dark theme
Watch
Read
Demo
youtube.com/watch?v=uiZqDLqjGR
web.dev/building-a-sidenav-com
gui-challenges.web.app/sidenav

Client Info

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