Thinking on ways to solve BUTTONS

[@abdusco]

I really love the content, but the lack of contrast in the code color scheme is ironic, considering that he focuses so much on accessibility.

[@evolopterus]

Agreed. Could not make out the CSS code on my monitor in a brightly lit room.

[@tech3425]

I started to think this is some new CSS preprocessor 😂

[@delulu6969]

Slowly you're making a UI lib. Waiting to npm install @argyleink/gui

[@AdamArgyleInk]

i'm totally making a storybook for everything and will try and make them a unified and easy to use library!

[@delulu6969]

@@AdamArgyleInk Uh oh, I was just joking.XD If that's the case, it would be triple awesome! Every GUI video, there will always be some UX/a11y gems you show that many devs overlook. I'm loving it!

[@leeboyin945]

add me to the waiting list 🙏

[@MrQuickLine]

Hey Adam - for what it's worth (perhaps not much?) the WCAG success criterion 1.4.3 states that " Text or images of text that are part of an inactive user interface component... have no contrast requirement." So it's definitely nice that your Disabled button has color contrast, but it definitely isn't a requirement. I only mention this because you said "It's so often I'll see a disabled button that doesn't have proper contrast ratio," and that's okay because they don't have to.

[@JawsoneJason]

In fact, it can be confusing if the button looks TOO much like a regular button, because there is no response to the click or press.

[@MrQuickLine]

@@JawsoneJason maybe, but the cursor did change to not-allowed

[@JawsoneJason]

Unfortunately, keyboard/assistive-tech users will be without any affordance, since there is no focusability.

[@AdamArgyleInk]

@@JawsoneJason i def could see a keyboard user being confused, but a screen reader clearly indicates the button is disabled to the user. good point though that a focus state for a disabled button has micro ux opportunity to provide better feedback in that case, thanks! have suggestions before I go design around that state?

[@AdamArgyleInk]

oh, was just testing and disabled buttons arent even keyboard focusable, guess I dont need to design the state as it's unreachability via keyboard doesnt need a visual?

[@Yaxqb]

This inspires me to use css properties more👍 I've never thought of the abstraction capabilities of css props before

[@leeboyin945]

This episode actually talks more on CSS custom properties than button, which is still very informative, thanks : P

[@UliTroyo]

I didn't know the :where() selector was ready! And for a while, it seems. All these little things that I forget exist.

[@DarrenbyDesign]

This makes me love vanilla CSS again!

[@ruhollahh01]

How is he getting all the browsers in one place for debugging? Also really love these GUI challenges, thanks a lot adam!

[@tech3425]

I'd like a tool like that too

[@predaytor]

I can't get over how good your videos are! I wanna be like you someday! I would.

[@somedev1553]

The disabled button only works because it has disabled text in it. It kinda looks the same as the other buttons.

[@StephanBijzitter]

Either you forgot to publish your blogpost, or the link in the description is wrong :-) Love the video though

[@AdamArgyleInk]

will be ready in an hour or so when the build publishes! sorry about that!

[@TheCRibe]

What do you use to display all the different browsers in one screen. Looks slick ! Also love the button design and code pattern, great job!

[@AdamArgyleInk]

nothing special, i just have them all installed and setup!

[@TheCRibe]

@@AdamArgyleInk haha I was assuming a complex app setup. A pre positioned desktop works great I guess :D

[@PatricioHondagneuRoig]

This is amazing. Thanks for sharing Adam!

[@AssemblyWizard]

Wow, I'm blown away!

[@tikeswarnaik827]

Please make next video on INPUT

[@AdamArgyleInk]

def on the list!

[@brentmcd12]

this is really interesting ! redesign the web with custom code from the order and layout , . I wish Facebook would fix there Dark Mode Missing feature that has been removed on Android 11 for Chromebook

[@BehruzbekOtayev]

Always the best content

[@i3looi2]

for the weird space.. just add a `border-right: 5px solid #black` on the button.

[@AdamArgyleInk]

oh interesting, i'll try!

[@sabuein]

Thank you so much.

[@RobinLinus]

fresh!

[@fraollemecha]

Nice buttons!!

[@whatthefunction9140]

masterful

[@technikhil314]

@Adam Argyle what tool do you use to do cross browser testing?

[@AdamArgyleInk]

no tools, actual installed browsers. this way i get full access to devtools and there's nothing in the middle to prevent me from inspecting what I need to

[@Chrosam]

So you're a web dev ? Style every button.

[@PavlosVinieratos]

how is your mouse pointer looking so smooth? are you doing some video editing on it?

[@AdamArgyleInk]

i apply a light amount of motion blur when exporting

[@optimator]

Which text editor do you use?

[@Trazynn]

I'm struggling with hexagons. Hexagons are hard.

[@delulu6969]

1. canvas + paint(). 2. SVG 3. clip-path: polygon() 4. ::before {border-right} ::after{border-left}

[@AdamArgyleInk]

@@delulu6969 nice thinking on ways to solve hexagons! i do like this idea too tho, would make a great short maybe. thanks for the idea and sharing your struggle with us

[@delulu6969]

@@AdamArgyleInk OMG YAAAS. And with border + border-radius too. I was just listing the stuff I have experimented with. 1. canvas is the best but also kind of complicated if you want some border-radius. Like you have to position 2 points on an imaginary circle to work with bezier curve. Thanks God I'm familiar with Illustrator. 2. The SVG one could work with 3 SVGs and the middle one is preserveAspectRatio=none. I used inline SVGs so I added overflow: visible to hack around the stroke clipping at the viewBox rather than expanding the viewBox or using some tranform=scale() 3. You can make a pseudo-border with clip-path with a pseudo element offset by 1px. But you can't have box-shadow/drop-shadow() unless you wrap it and put the filter on the parent. I have read on using SVG filter to turn anything to gooey effect, that could work with a wrapper too (or 2 pseudoelements). 4. Using pseudoelements to create triangles with the border inline-end/start solid + border block transparent for each side is the easiest if border and border-radius is not in the design. You could transform the pseudoelement boxes to overlap and look like triangles too but ymmv. Bonus point if you can add some long shadow XD

[@charliestein9350]

Thinking on ways to solve the web

[@joshlalonde5480]

Can you get the "no file chosen" text to push to the right on safari if you do "⠀⠀⠀no file chosen"? :P

[@AdamArgyleInk]

maybe! i could try it

[@aram5642]

The author of this IDE theme didn't really care about contrast. ;-)

[@Matojeje]

The Read along link in the description doesn't work :c

[@AdamArgyleInk]

comin in hot!

[@whatthefunction9140]

How did you get the view with all the browsers on one page?

[@AdamArgyleInk]

2nd display and installations or emulations positioned onto it

[@chobikun]

Now I have that pussycat dolls song in my head now

[@shinobi77]

What is the --_ nameing convention?

[@AdamArgyleInk]

from Lea Verou here lea.verou.me/2021/10/custom-properties-with-defaults/

[@minato_i]

bro, where to get that fancy font you are using in your text editor? if anyone knows please tell me.

[@AdamArgyleInk]

Dank Mono 👍🏻

[@shinobi77]

What is the font you're using?

[@AdamArgyleInk]

Dank Mono

[@yashrajchhabra1992]

Whats the chrome extension he uses at 4:38 ?

[@aarona171]

VisBug

[@AdamArgyleInk]

a.nerdy.dev/gimme-visbug

[@JoshuaDeGagne]

Anyone know what font he's using in his editor?

[@runtimerebel]

It's Dank Mono

[@lixeletto]

Adam, i think the read along link is broken, its giving me 404

[@AdamArgyleInk]

sorry about that, will be ready in less than an hour!

[@jsinnaour]

Interesting..

[@stasantokhi128]

The article does not exists

[@AdamArgyleInk]

will shortly!

[@bernardoencina6824]

Gael

[@bernardoencina6824]

Hu gastar en la jan

[@bernardoencina6824]

Guo

[@MaksymMinenko]

What's the point of this video? You're just feeding us a bunch of code. One would learn more just looking into css frameworks' (like Bootstrap) source code...