Thinking on ways to solve FABs

[@GavHern]

I love that accessibility tree view! Did not know about that feature and will make my life a lot easier than turning on a screen reader to check if my accessibility is working.

[@ROL4ND-CSS]

What a great ideas again! Love watching these series! 🤘🏼

[@akshar_dave]

Thank you for making this, Adam! 😊

[@abe10]

Love this series ♥️

[@chinmayk8004]

Make all of this into a CSS framework called argyleCSS pls

[@tentaklaus9382]

You tried Flutter?

[@bushigi5913]

love this series of videos! please make more~

[@Betterthanyou1234561]

I have my own recipes for styling but damn I learned a lot of cool stuff about accessibility and browser features. Awesome video! Thanks

[@nmay231]

While I think that supporting rtl languages is important, I do not think this is one of those elements that should change depending on the language. My thought was that FABs are on the right side to make it easier to tap with your right hand, which in most countries is still the dominant preferred handedness. Besides, even in ltr languages, you still have to scroll the content far up enough so that the content isn't hidden by the FAB, and that works for both ltr and rtl. Perhaps we need a prefers left-handedness media query :) .

[@serveshchaturvedi2034]

Man you are amazing. Epic transition music 😂👏

[@the-old-channel]

Cool implementation! I wanted to ask, what do you think of frameworks like tailwind? Everyone says it’s better and more convenient than writing pure CSS. I just don’t see how polluting your HTML with tons of classes is a better approach. What’s your opinion on that?

[@Endrit719]

because that's what it means to have reuseable css, lets say you have a class d-flex which sets display:flex, now if you use this class everywhere you want to set display flex to element it means that you have defined that in one place but creating new classes for everything then you will have repeated properties which will result in larger css files .classA{ display:flex; flex-wrap: wrap; color:red; } .classB{ display:flex; flex-direction:column } .classC{ display:flex; gap:1.5rem; }

[@bartek4210]

Working in the field for more than 10 year, I don't see tailwind as a good solution, I don't use it, and I would rather recommend to focus on creating specific components, and using Sass variables to keep some values the same where they really should be, which is different for every design, every visual component.

[@webdeveloperninja9220]

hillariously awesome

[@HugRunner]

I wish you would do a take on a "status bar" or alert messages, like success/error messages etc. Where to place them without taking over the UI and making it "jump", but still being visible on desktop and mobile.

[@AdamArgyleInk]

oh interesting yeah, inline banners / alert messages or status bars. i'll add it to the list!

[@ico0z]

Just the way all thinks should be done

[@merotuts9819]

Can somebody explain how he used the ampersand(&) operator in plain css. I thought it existed only in SASS.

[@AdamArgyleInk]

i explained it better in earlier videoss, but it's nesting per the spec draft www.w3.org/TR/css-nesting-1/ and I'm using a postcss plugin to use the syntax today 👍🏻

[@giovanicamara869]

The placement of the button in the DOM is crucial for a keyboard user

[@oskrm]

Hey Adam, nice stuff, can you do add a context menu + click and drag select to your GUIs?

[@AdamArgyleInk]

it's in the list!

[@musk_eIon]

Ever better than another former time

[@nikhilhukkerikar6753]

What is that debugging corner there a separate app or just browsers along side some iOS/Android emulators?! Love it great way to test them all at once!

[@predaytor]

Ahha. I LIKE IT. FUN MIX!

[@mateusvahl5072]

Love those videos 💝

[@rogierderuijter7009]

Animation box-shadow is something you shouldn’t do right?

[@appeltaartnl]

Very nice way to keep the tab index as it should by using flex direction! Great video 👍 One thing that I've been wondering though. I believe you were doing this in your previous video (about buttons) also. As described in the written article from the last video, you're using Lea Verou's convention for custom properties with defaults. I feel like you are using the pseudo private custom properties incorrectly. You're not setting any defaults. Are you trying to imply that these properties shouldn't be changed from the outside the of the FAB code (and that they are private)? Because that would heavily reduce the customizability if this were a component. Not trying to be negative, just curious what the idea behind that was :)

[@AdamArgyleInk]

If you're making an API into custom styling, it's great to have the defaults yeah, and she does ensure that's part of her use case. I like it sometimes for a simpler reason, distinguishing design system global props from those that should be internal to the scope of the component. good question!

[@glenospace]

Love the video. Amazing everything, but could you please not use that strange font for css when recording. I find it absolutely brutal to read that font.

[@patrick_h_lauke]

one aspect of FABs that still doesn't have a definitive answer: what order should they have in the tab cycle/how to easily reach them with the keyboard. one of the selling points of FABs is that they're always handy for touch/mouse/pointer users. but for keyboard users, they generally either come right at the start or the end of the tab cycle. i've been toying with the idea of treating them essentially as non-modal dialogs, with an appropriate shortcut key ... perhaps F6 or similar ... to jump between the regular page and the FAB itself (keeping track of where the focus was at when switching, and setting it back when jumping back to it). may need to investigate / make some demo...

[@AdamArgyleInk]

def why the show started with this topic, that you'll need to find the right spot in focus flow to put these. i considered building a skip links type feature, where you could skip to the FAB (which I'd then have at the end of the document flow). but nothing really felt definitive in terms of advice, felt contextual to your experience and the flow of your UI. share what you make! i'm interested to try what you build 🙂

[@patrick_h_lauke]

@@AdamArgyleInk yeah even a skip link would not allow for easy "arbitrary" jumping to it at any point, the same way pointer users can always get to it easily. almost a case for the old accesskey to set focus to the FAB. but yeah, once i get a moment, i'll try setting something up on codepen

[@furkanacar]

12:40 Why don't you change the actual order in the DOM and get rid of "column-reverse" and "z-index: -1" adjustments?

[@michaelrobinson5981]

Because then the focus order / accessibility is off

[@furkanacar]

@@michaelrobinson5981 I think you can manage the focus order using `tabIndex`, right?

[@predaytor]

WHAT IS THAT GORGEOUS FONT? Thx

[@AdamArgyleInk]

Dank Mono!

[@gexcube1981]

Good evening, can I know a senior expert to speed up my website from DESKTOP AND MOBILE on chrome and edge? a person who knows how to fix errors and bugs without ruining the website;

[@الباحثعبدالرحمن-ث5ع]

رجاءا خاطبني باللغه التي افهمها (العربيه)

[@Anton-pz6kd]

You do column reverse, but if that's always the use case, why not declare the buttons in the right order up front.. Overall a pretty confusing video, better if done with pure CSS for demo purposes, imo

[@forceboxed]

If you rewatch, you might observe his reasoning that the reverse order is to de-prioritise the mini-FABs in the tab order.

[@AdamArgyleInk]

@@forceboxed yep, first to get focus should be the primary FAB, not the secondary ones. but definitely a UX micro interaction worth testing or exploring further based on your app and use case

[@jannismorgenstern7842]

also it is pure css - he is just using a bunch of custom properties

[@forceboxed]

@@AdamArgyleInk I agree. It's one of those UX behaviour that just "feel" right. Similar to the code to prevent mini FABs shadowing the main FAB.

[@merotuts9819]

Can anybody explain how he managed to use the ampersand(&) operator in plain CSS ? When did they add this operator to plain CSS ?