It was nice to see an expert web developer struggling like we do. These small components look simple but they are super hard to make right. And I could relate to the moment when you removed the animation.
I really love your JS videos!!! 😃 I also had to implement an accessible toggle component a couple of days ago, so here are a couple of tips / ideas: - Don't use the label to create the switch UI. It would be nicer to decouple the input and the label. To do that you can add css "appearance: none" to the input, and then you can style it like you would any other element (even use ::before and ::after on the input itself) - If we really want to make it accessible, adding a 'role="switch"' to it would be a nice improvement. - another accessibility tip is that users tabbing through the page don't really need to be able to focus both on the input and on the label (that is actually confusing). You can add an 'aria-hidden' attribute to the label and then add the aria-labelledby attribute to the input (pointing to the label) so it still gets the correct description on assistive technologies - If you use the input instead of the label, you will get automatically the correct "on" / "off" states for assistive technology users - it would be nice to add those transitions only for users that don't have the "prefers-reduced-motion" turned on Sorry if this feels like i am criticizing your video. that isn't my intention. I did a lot of research on this topic and i am just happy to share what i have learned and to make the web a little bit more accessible. People like you have a lot of viewers and can reach a lot of webdevelopers, so if you can get them interested in accessibility i think it is GREAT! Thanks :)
As I was watching the video I thought about those things as well, I would also add the fact that those colors don't have a great contrast red on red and green on green. But you really said everything I wanted to say. I am glad more content creators are getting into a11y lately, the industry seriously needs more accessible websites so I appreciate this video a lot.
Thanks, I've combined trhis tutorial with your acccessibhility tips into one. Works superb. I've added CSS variables to make it super easy to customize. sizes, color,s light and dark mode There is one thing that needs mention, in terms of sizes. Using CSS calc() all of the dimensions can be automated. To make it work proper, instead of useding em I had to use rem. Now accessibilty is perfect for my use case.
Just adding to what people said before, I am not trying to repeat what was said, just to add to the justification of some of the proposed solutions and add some reasoning (disclaimer: I am a web-accessibility tester). I like your content, and I dont want to sound overly critical. I am quite happy that devs are starting to pay more attention to a11y, as there are more and more laws compelling us to be more compliant. Yet, I do actually want to highlight more stuff, because digital accessibility needs to be done right to be helpful to the people needing it. If you build custom UI a lot can break and actually make things less accessible. - Zoomfactor and the focus highlight: As was pointed out before: using focus-visible instead of focus is the solution to resolve the flashing focus highlight when clicking the element. Adding to this and explaining why the zoom factor alone is not suficient: "Normal zoom is smaller, it should not be a problem anymore." This is not true. Users with visual impariments often use very high zoom factors, 200% and more. It is a problem, and there is the easy solution with focus-visible. - Color Contrast: Was mentioned by ProGamer before. It is not just "not great contrast", it fails by wcag AA standards: webaim.org/resources/contrastchecker/?fcolor=81E052&bcolor=E0F7D4&api (and it fails for all three, green on green, red on red, and grey over white). Adding to Color: If u use a chrome browser you can emulate the deuteranpopia (r-g-colorblindness) settings: Developer Tools -> Settings -> More Tools -> Rendering -> "Emulate vision deficiencies" -> Deuteranopia, and see the issue with using red and green als indicators. This is actually still okay here. Because the information is conveyed by more than just color alone. By form and by the symbol. It should be conveyed by text as well, I mean a role and a status (checked / unchecked) which indicates to Screen reader users the state and the role of the element. - Adding a role was mentioned before as well. This is important for screen readers. I am not sure about role="switch", it might be enough. I would propose to use aria-checked="false" and role="checkbox" including a function to toogle the status. See: www.w3.org/TR/wai-aria-practices-1.1/examples/checkbox/checkbox-1/checkbox-1.html - When building a custom UI all the inherent semantics of HTML5 are lost because HTML5 is not used. These semantics are by default accessible. If you do not use them, you have to painfully recreate the. Considers this when implementing custom UI. I am not saying to not do it. Just be aware. - Before and After are problematic for adding content. They are not accessible if non-decorative content is added. The Checkmark symbol and the Multiplication x are not just decorative. They convey meaning. Browsers and AT (assistive technologies) interact differently with before and after. CSS must be disabled sometimes and meaningful content should then remain visible and in place. MacOS' VoiceOver Screen Reader will read out the content elements (in Firefox, not in Chrome, as another user also pointed out already): "Checked, Multiplication x" or "Checked, Checkmark". This might add confusion.
@@bjoernuhlig the role=switch already adds the on/off state (different from checked/unchecked), which are read by assistive technologies. The other points you mention are important and i think you explained them well! :)
nice one! Use an offset of `-101vw` to move the checkbox off the screen - *any* screen (even one that's 10000px wide) and there's no need to bother for the top value. For better a11y add `role="switch"` instead of class .toggle and use its attribute selector: you now only get a fancy toggle if it's also accessible :) -- the two birds, one stone thing. For the :disabled state I'd add `pointer-events:none` and `cursor.default` to the label, that makes the whole pack unclickable and finaly: to dim the :disabled colours you can also try filter: grayscale(1) and/or saturate(0), depends on the actual colours.
@@bobsonwong9422 percentages always refer to the parent element's own width which may not be wide enough for an "off screen" position. If that parent is also somehow moved to the opposite direction (a right sidebar) then your "starting point" would be off, especially if that parent has a position:relative. vh always refers to the absolute width of the screen so it's value is typically large enough to move things out of the away even if the (relative positioned parent is located at the very right edge of the screen.
It's really nice seeing you keep accessibility in mind, so many TH-cam tutorials (and post secondary institutions) neglect accessibility entirely, which is both a shame, and a now crime here in Canada. Great work!
Hey man, great content. Learned a lot from it. 4:50 The reason it didn't work is because you didn't set the `display` property on the pseudo element. Elements by default has a `display` of `inline`, and setting `width` on inline elements has no effects. The width of inline elements will always fit its content (empty string in your case, hence width of 0). Your giving its wrapper element a `display: flex` works because children of flex-ed parent will behave like block elements no matter what is set on them. Add `display: inline-block` to the pseudo element is best for your case.
I agree, it’s nice to see Trav go through what we go through with CSS. Backend is cool ( functions/classes: using Java or Python) for data, but the front-end is what the user sees. -without the frontEnd, there’s no API happening.
Great tutorial. The only remark i have is that whenever a problem arose your reaction basically was: ok, welp, let's move on. I'm well aware that those small issues are sometimes really hard to debug, but things like that happen all the time and you, as a tutor, should teach how to deal with them (like you mentioned at the begining of this video).
Good one! I'm guessing the problem with transition that was somehow weird was that the only moment the content changed was at 100%, that means that from 0% to 99.99% of the keyframes the content was still an X and then at final keyframe it switched to a checkmark. I'm not sure, I haven't code for a while but hopefully it makes sense. Cheers everyone!
I used a checkbox and CSS only to create a side out menu with similar methods. Glad to see people use pure CSS rather than doing fluky stuff with jQuery when unnecessary.
A simple fix to the outline on click looking weird each click is to use: input[type="checkbox"].toggle:focus:not(:focus-visible) + label::before { outline: none; } This will remove all focus styles for non keyboard focus. This wouldn't affect the accessibility due to the fact that the button can still be highlighted with keyboard and the effects on the button when using the mouse stay the same so it's noticeably toggleable. 😁
Wouldn't "left: -100vw" and "top: -100vh" be a better way to ensure that the checkbox is never on the page? That way no matter what the viewport size becomes it'll never appear on screen
2:06 I'm pretty sure you can interact with "display: none;" checkbox just fine. I haven't watched the entire video yet, but the ":checked" label coloring works and I assume all the other things will be positioned relatively to the label, as you moved the input out of the page anyways.
Wow, CSS has always been like black magic to me, but you really broke it down perfectly - it all makes sense! But, I guess it takes a couple of hours to learn all syntax and available commands?🙂
I love your videos and how you elaborate your tutorials, you've helped me out so much, can you please make javascript tutorials for beginners from the start covering every topic like you did with css. Thank you
outline should not be shown when you click on an element with the mouse. you have it, you know what's different :focus, :focus-within & :focus-visible ? :focus - any focus, even from the mouse (that's why you have this black outline shown, although this is not normal). :focus-visible - only Tab on the keyboard (wow! such a miracle exists?). :focus-within is the same as :focus, but with all child elements, any of them will be in focus, the style will be applied to the parent. try replacing :focus with :focus-visible p/s/ good video, release more =)
Thanks for the video! 🙏 Thought I would request a tutorial for an accessible hamburger menu with pure css and html. Again, love your videos, very well done!
This was both entertaining and educational, thank you! Just curious, can you fix that blinking outline by modifying the selector so that it matches the checkbox's ::before also when the focus is on the label?
Just a note here, that for screen readers that X and checkmark are going to show up. Probably best not to use them that way. You may want to install the axe accessibility linter too. It might find that duplicate ID problem you had.
I mean honestly, using fully CSS toggles is not good in general, it's messy and it completely ignores the separation of concerns, it's just a challenge, at least that's how I see it
add please aria-label and aria-disabled for better accessibility: screen readers see disabled control but better to use aria-disabled in these cases. and aria-label could help to understand the meaning of a switch, because usual word "checked?" gives no information about the control purpose
Pretty sure the page would scroll to the top every time you click the toggle. If you interact with an input the browser Scrolls it into view. If the input is at -9000 the browser should scroll top.
As always great to watch your videos, there's always something interesting in there. But (sorry if I ruin the party) IMO messing around with form controls is as bad as messing with scrolling. It needs much more attention and thought. This specific switch design is very unfortunate and has been promoted by Material Design. It tries to resemble the physical switches on real devices, but these usually have two (or more) labels that clearly describe all possible states. I actually think your first idea to remove the indicator on disabled state was correct. By leaving it in place you ended up having a disabled state that - to the eye of a color-blind user - hardly differs from not disabled. I would really appreciate a video where you actually test this checkbox accessibility with a screen reader, and impairment simulator. Thanks.
lol I have that exact same mindset where I try something, it doesn't work as I expected despite my code likely being correct, and then just going "bah, I don't need it anyway!" XD
I made a toggle button using the label of a checkbox, as shown in the video. Does anyone know how to enable keyboard-only users to toggle the button? I made it possible to focus on the toggle button using the tab key, but once in focus, it can't be interacted with using the keyboard.
Hey, i tried this a couple days ago myself. This can be done much much easier using a simple library like AlpineJS, just take a Button element with role="switch", x-on:click="checked = !checked" x-bind:aria-checked="checked" and give it a aria-labelledby property. Then you can style it just how you want without bothering with pseudo elements and absolute positioning. A neat trick to do the animation (left-right) by having a flex container with justify-content: end with two elements: 1. your circle, 2. a random span element with flex: 1 property based on the state of the widget. thats it you got a accessible toggle switch without bothering with absolute positioning or any of that. Just think it is cleaner that way
Hey kyle can you make video of , contact syncing? I have been working with the IONIC + React project. It become really confusing to handle contact syncing. I don't know how famous apps like Whatsapp, Telegram syning the user contacts. There are so many questions how to detect contact changes in realtime, how to know if your is deleted the contact, how to know if my friends installed the app. Make my development process simple. Thank you...
Shouldn't the height of the after element be halved as the margin left isn't shared, but the margin top and bottom are only half as big as the margin left as they are shared between the height property.
I’ve started learning react, but I’m so lost in the area of state management. I’ve pretty much tried every state management library but I still don’t know which one is the right one. I would really appreciate it if you make a video on it and tell which one you use.
If you're learning react you DEFINITELY don't need a state management library. I use React for a living and I don't even use a state management library. So far the context API has been more than enough.
@@snoowwe you’re absolutely right, but I have a special use case where I’m making a chess game and I need to update the squares that need updating, but at the same time I need to be able to update all of the squares at once and I have really been struggling to find a good way to achieve both.
I would like to add a Like button on my website, I have been playing with it, I have two thumbs up images, one plain and one green, I am working on collecting their IP address so that when they come back to that page, it already shows they have hit the like button., any help to be found for this?
Bro Big Bro Please i am the Who always click Like Button Before watching i know you always create awsome video Actually i want to know LIke in donwload we got progress baar how much is downloaded etc But in api call it is download behind and just come in folder directly when download completed so From api how i can get progress or completion report of download or api response in simple word progress info of api response is it possible
In this instance, the red and green don't matter because they are not the sole indicators of the toggle state. The position (left or right) of the switch and potential inclusion of icons are additional levels of clarity.
There isn't a quicker/ leaner way to do this? No hate to him AT ALL, on the contrary. I'm just mind blown. I'm still a baby in js, isn't there a better way to do code toggles? Genuine question. 🙏🏻
It was nice to see an expert web developer struggling like we do. These small components look simple but they are super hard to make right. And I could relate to the moment when you removed the animation.
Yeah nice to see the struggle we have sometimes, so we are not alone 🙂
@@MrGarfield I’m on jn non &9’ko
I really love your JS videos!!! 😃
I also had to implement an accessible toggle component a couple of days ago, so here are a couple of tips / ideas:
- Don't use the label to create the switch UI. It would be nicer to decouple the input and the label. To do that you can add css "appearance: none" to the input, and then you can style it like you would any other element (even use ::before and ::after on the input itself)
- If we really want to make it accessible, adding a 'role="switch"' to it would be a nice improvement.
- another accessibility tip is that users tabbing through the page don't really need to be able to focus both on the input and on the label (that is actually confusing). You can add an 'aria-hidden' attribute to the label and then add the aria-labelledby attribute to the input (pointing to the label) so it still gets the correct description on assistive technologies
- If you use the input instead of the label, you will get automatically the correct "on" / "off" states for assistive technology users
- it would be nice to add those transitions only for users that don't have the "prefers-reduced-motion" turned on
Sorry if this feels like i am criticizing your video. that isn't my intention.
I did a lot of research on this topic and i am just happy to share what i have learned and to make the web a little bit more accessible.
People like you have a lot of viewers and can reach a lot of webdevelopers, so if you can get them interested in accessibility i think it is GREAT!
Thanks
:)
As I was watching the video I thought about those things as well, I would also add the fact that those colors don't have a great contrast red on red and green on green. But you really said everything I wanted to say. I am glad more content creators are getting into a11y lately, the industry seriously needs more accessible websites so I appreciate this video a lot.
Thanks for these extra tips! Bumping this so more can see it :)
Thanks, I've combined trhis tutorial with your acccessibhility tips into one. Works superb.
I've added CSS variables to make it super easy to customize. sizes, color,s light and dark mode
There is one thing that needs mention, in terms of sizes. Using CSS calc() all of the dimensions can be automated. To make it work proper, instead of useding em I had to use rem. Now accessibilty is perfect for my use case.
Just adding to what people said before, I am not trying to repeat what was said, just to add to the justification of some of the proposed solutions and add some reasoning (disclaimer: I am a web-accessibility tester). I like your content, and I dont want to sound overly critical. I am quite happy that devs are starting to pay more attention to a11y, as there are more and more laws compelling us to be more compliant. Yet, I do actually want to highlight more stuff, because digital accessibility needs to be done right to be helpful to the people needing it. If you build custom UI a lot can break and actually make things less accessible.
- Zoomfactor and the focus highlight: As was pointed out before: using focus-visible instead of focus is the solution to resolve the flashing focus highlight when clicking the element. Adding to this and explaining why the zoom factor alone is not suficient: "Normal zoom is smaller, it should not be a problem anymore." This is not true. Users with visual impariments often use very high zoom factors, 200% and more. It is a problem, and there is the easy solution with focus-visible.
- Color Contrast: Was mentioned by ProGamer before. It is not just "not great contrast", it fails by wcag AA standards: webaim.org/resources/contrastchecker/?fcolor=81E052&bcolor=E0F7D4&api (and it fails for all three, green on green, red on red, and grey over white).
Adding to Color: If u use a chrome browser you can emulate the deuteranpopia (r-g-colorblindness) settings: Developer Tools -> Settings -> More Tools -> Rendering -> "Emulate vision deficiencies" -> Deuteranopia, and see the issue with using red and green als indicators. This is actually still okay here. Because the information is conveyed by more than just color alone. By form and by the symbol. It should be conveyed by text as well, I mean a role and a status (checked / unchecked) which indicates to Screen reader users the state and the role of the element.
- Adding a role was mentioned before as well. This is important for screen readers. I am not sure about role="switch", it might be enough. I would propose to use aria-checked="false" and role="checkbox" including a function to toogle the status. See: www.w3.org/TR/wai-aria-practices-1.1/examples/checkbox/checkbox-1/checkbox-1.html
- When building a custom UI all the inherent semantics of HTML5 are lost because HTML5 is not used. These semantics are by default accessible. If you do not use them, you have to painfully recreate the. Considers this when implementing custom UI. I am not saying to not do it. Just be aware.
- Before and After are problematic for adding content. They are not accessible if non-decorative content is added. The Checkmark symbol and the Multiplication x are not just decorative. They convey meaning. Browsers and AT (assistive technologies) interact differently with before and after. CSS must be disabled sometimes and meaningful content should then remain visible and in place. MacOS' VoiceOver Screen Reader will read out the content elements (in Firefox, not in Chrome, as another user also pointed out already): "Checked, Multiplication x" or "Checked, Checkmark". This might add confusion.
@@bjoernuhlig the role=switch already adds the on/off state (different from checked/unchecked), which are read by assistive technologies.
The other points you mention are important and i think you explained them well! :)
nice one!
Use an offset of `-101vw` to move the checkbox off the screen - *any* screen (even one that's 10000px wide) and there's no need to bother for the top value.
For better a11y add `role="switch"` instead of class .toggle and use its attribute selector: you now only get a fancy toggle if it's also accessible :) -- the two birds, one stone thing.
For the :disabled state I'd add `pointer-events:none` and `cursor.default` to the label, that makes the whole pack unclickable and finaly: to dim the :disabled colours you can also try filter: grayscale(1) and/or saturate(0), depends on the actual colours.
I experimented with -100%, and it seems to work. Could there be a potential problem that I'm not aware of?
@@bobsonwong9422 percentages always refer to the parent element's own width which may not be wide enough for an "off screen" position. If that parent is also somehow moved to the opposite direction (a right sidebar) then your "starting point" would be off, especially if that parent has a position:relative.
vh always refers to the absolute width of the screen so it's value is typically large enough to move things out of the away even if the (relative positioned parent is located at the very right edge of the screen.
@@CirTap Oh yeah! That totally didn't occur to me because I was just adding the toggle to the . Thanks for the insight. :)
It's really nice seeing you keep accessibility in mind, so many TH-cam tutorials (and post secondary institutions) neglect accessibility entirely, which is both a shame, and a now crime here in Canada. Great work!
Great vid Kyle! One more subtle thing I like to do at disabled state is:
cursor: not-allowed
I am surprised to see this. I feel really honoured that you have used my Codepen as reference. More than happy. Thank you
Nicely done bro
@@flow7502 thank you
I would also add "user-select: none;" to the labels so that the text doesn't highlight when toggling. Very nice tutorial.
I wonder if that selection blinking can be heard in screen readers "selection made!".
@@aram5642 that could be a problem…
Hey man, great content. Learned a lot from it.
4:50 The reason it didn't work is because you didn't set the `display` property on the pseudo element.
Elements by default has a `display` of `inline`, and setting `width` on inline elements has no effects. The width of inline elements will always fit its content (empty string in your case, hence width of 0).
Your giving its wrapper element a `display: flex` works because children of flex-ed parent will behave like block elements no matter what is set on them.
Add `display: inline-block` to the pseudo element is best for your case.
Thankyou. I was wondering why did making flex affect the pseudo child. This solves it.
I agree, it’s nice to see Trav go through what we go through with CSS. Backend is cool ( functions/classes: using Java or Python) for data, but the front-end is what the user sees. -without the frontEnd, there’s no API happening.
Great tutorial. The only remark i have is that whenever a problem arose your reaction basically was: ok, welp, let's move on. I'm well aware that those small issues are sometimes really hard to debug, but things like that happen all the time and you, as a tutor, should teach how to deal with them (like you mentioned at the begining of this video).
I'm sure you see now that at 19:42 you didn't replace the "forward" direction, which is why it wasn't fading.
i was screaming over here loool
I think it's the best practice to create a toggle checkbox that i've ever seen, thanks a lot
This video definitely didn’t feel like 24 minutes! Well spoken, good pace - thanks!
Well said! it felt like 3 minutes, regardless of me watching on 1.75x speed 😂
Thanks Kyle. Always appreciate the way you deconstruct problem solving
I love this video, its very nice to see an expert dealing with "normal" problems haha
Thanx so much for this video! Just what I was looking for. Love the way you thoroughly explain things!
use right: 0; to move the circle to far right, and we can still use display:none to interact w/the checkbox,love your tips 👍🏻👍🏻
I believe you cannot tab into the checkbox if you use display: none so it would be inaccessible
Good one! I'm guessing the problem with transition that was somehow weird was that the only moment the content changed was at 100%, that means that from 0% to 99.99% of the keyframes the content was still an X and then at final keyframe it switched to a checkmark. I'm not sure, I haven't code for a while but hopefully it makes sense.
Cheers everyone!
I used a checkbox and CSS only to create a side out menu with similar methods. Glad to see people use pure CSS rather than doing fluky stuff with jQuery when unnecessary.
Amazing approach within CSS. Just ❤ 🎉
Hats off for detailed explanation and Great Tutorial, I implemented it and worked great, Thanks Man !
There is something extremely satisfying about slider checkboxes.
A simple fix to the outline on click looking weird each click is to use:
input[type="checkbox"].toggle:focus:not(:focus-visible) + label::before {
outline: none;
}
This will remove all focus styles for non keyboard focus. This wouldn't affect the accessibility due to the fact that the button can still be highlighted with keyboard and the effects on the button when using the mouse stay the same so it's noticeably toggleable.
😁
Wouldn't "left: -100vw" and "top: -100vh" be a better way to ensure that the checkbox is never on the page? That way no matter what the viewport size becomes it'll never appear on screen
Awesome my brother 👏🏼👏🏼👏🏼👏🏼👏🏼
5:54-7:17 he was following my mind, doing things i was thinking!
very, very helpful method of explaining this, thank you!
2:06 I'm pretty sure you can interact with "display: none;" checkbox just fine.
I haven't watched the entire video yet, but the ":checked" label coloring works and I assume all the other things will be positioned relatively to the label, as you moved the input out of the page anyways.
it won't work with screen readers, such as element with zero height and width might be hidden for them
Thanks for this awesome video!
Wow, CSS has always been like black magic to me, but you really broke it down perfectly - it all makes sense! But, I guess it takes a couple of hours to learn all syntax and available commands?🙂
Great video! I would also love to see you create your own textbox from scratch
I love your videos and how you elaborate your tutorials, you've helped me out so much, can you please make javascript tutorials for beginners from the start covering every topic like you did with css.
Thank you
outline should not be shown when you click on an element with the mouse. you have it, you know what's different :focus, :focus-within & :focus-visible ? :focus - any focus, even from the mouse (that's why you have this black outline shown, although this is not normal). :focus-visible - only Tab on the keyboard (wow! such a miracle exists?). :focus-within is the same as :focus, but with all child elements, any of them will be in focus, the style will be applied to the parent.
try replacing :focus with :focus-visible
p/s/ good video, release more =)
Thanks for the video! 🙏 Thought I would request a tutorial for an accessible hamburger menu with pure css and html. Again, love your videos, very well done!
2:12 why not use display none and handle the interaction with the label? (e.g. having the input inside the label)
I like video with mistake and thoughts process.. Make us look normal with our mistake
Only stopped in to answer your question. Yes, you can do anything you put your mind to 🧐😉💕
Amazing video 👍😁
This was both entertaining and educational, thank you! Just curious, can you fix that blinking outline by modifying the selector so that it matches the checkbox's ::before also when the focus is on the label?
To make more ‘accessible’, could make the text more bold and disabled box visually different besides color
Thanks again Kyle!
Just a note here, that for screen readers that X and checkmark are going to show up. Probably best not to use them that way. You may want to install the axe accessibility linter too. It might find that duplicate ID problem you had.
I mean honestly, using fully CSS toggles is not good in general, it's messy and it completely ignores the separation of concerns, it's just a challenge, at least that's how I see it
Amazing video
awesome video, but I gotta say if you'd user-select: none and remove that border color on focus, it would look much better
add please aria-label and aria-disabled for better accessibility: screen readers see disabled control but better to use aria-disabled in these cases. and aria-label could help to understand the meaning of a switch, because usual word "checked?" gives no information about the control purpose
i am creating a website where users can upload photos so what should i use ? firebase or sql ?
You're the man
and then there’s me who doesn’t know 75% of the css properties
Nice. Pure css custom checkbox. That's very reusable.
thanks dude
Pretty sure the page would scroll to the top every time you click the toggle. If you interact with an input the browser Scrolls it into view. If the input is at -9000 the browser should scroll top.
Awesome 👍
20:08 relatable
I LOVE IT❤❤
That is exactly what we want to smashhhhhh subscribe buttonnnnn!!!!!-!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
As always great to watch your videos, there's always something interesting in there. But (sorry if I ruin the party) IMO messing around with form controls is as bad as messing with scrolling. It needs much more attention and thought. This specific switch design is very unfortunate and has been promoted by Material Design. It tries to resemble the physical switches on real devices, but these usually have two (or more) labels that clearly describe all possible states. I actually think your first idea to remove the indicator on disabled state was correct. By
leaving it in place you ended up having a disabled state that - to the eye of a color-blind user - hardly differs from not disabled. I would really appreciate a video where you actually test this checkbox accessibility with a screen reader, and impairment simulator. Thanks.
even with dispkay none, the checked still trigger when you click its label
For accessibility you should add attributes aria-labelledby and aria-checked and handle keydown events
This should already all be handled by the input element and label element.
How can we create a keyboard navigation( up/down arrow keys) of a list, please create a video on this ?
Is it normal to move an element far off the page for hiding it?
I would probably have used appearance: none; and apply the toggle appearance on the input directly. I would have also used role="switch" on the input.
lol I have that exact same mindset where I try something, it doesn't work as I expected despite my code likely being correct, and then just going "bah, I don't need it anyway!" XD
I made a toggle button using the label of a checkbox, as shown in the video. Does anyone know how to enable keyboard-only users to toggle the button? I made it possible to focus on the toggle button using the tab key, but once in focus, it can't be interacted with using the keyboard.
Hi Kyle, Can you tell me what editor you are using for your videos. I would like to see the real-time changes as I modify my code. Thanx
what extension is which shows you what to write in animation
just out of curiosity, why did you go for a checkbox over a range input?
Hey, i tried this a couple days ago myself. This can be done much much easier using a simple library like AlpineJS, just take a Button element with role="switch", x-on:click="checked = !checked" x-bind:aria-checked="checked" and give it a aria-labelledby property. Then you can style it just how you want without bothering with pseudo elements and absolute positioning.
A neat trick to do the animation (left-right) by having a flex container with justify-content: end with two elements: 1. your circle, 2. a random span element with flex: 1 property based on the state of the widget. thats it you got a accessible toggle switch without bothering with absolute positioning or any of that. Just think it is cleaner that way
sometimes "label" is wrapped around "input", I have experimenting with such format, but it does not work. Any hints ?
While setting top and left should do the trick, couldn't you just z-index the page to a positive while putting the checkbox to -1 or something?
Hey kyle can you make video of , contact syncing? I have been working with the IONIC + React project. It become really confusing to handle contact syncing. I don't know how famous apps like Whatsapp, Telegram syning the user contacts. There are so many questions how to detect contact changes in realtime, how to know if your is deleted the contact, how to know if my friends installed the app. Make my development process simple. Thank you...
How are you remembering the color?
Your content is awesome!!
Btw can u make a video on how to make custom toasts in website?
Is it good instead of absolute positioning the input just give it a width and height of 0?
You should probably set user-select to none on the labels too. Its pretty annoying when it highlights the text when you click on the label
why not use appearance none? on the checkbox instead of opacity and negative positions?
The left/top: -9000px looks like an aweful idea. I'd just use pointer-events: none
Kyle will you please make a tutorial on window.indexedDB? I'm new to this kind of a database and the documentation is so opaque...
Shouldn't the height of the after element be halved as the margin left isn't shared, but the margin top and bottom are only half as big as the margin left as they are shared between the height property.
I’ve started learning react, but I’m so lost in the area of state management. I’ve pretty much tried every state management library but I still don’t know which one is the right one. I would really appreciate it if you make a video on it and tell which one you use.
If you're learning react you DEFINITELY don't need a state management library. I use React for a living and I don't even use a state management library. So far the context API has been more than enough.
@@snoowwe you’re absolutely right, but I have a special use case where I’m making a chess game and I need to update the squares that need updating, but at the same time I need to be able to update all of the squares at once and I have really been struggling to find a good way to achieve both.
I would like to add a Like button on my website, I have been playing with it, I have two thumbs up images, one plain and one green, I am working on collecting their IP address so that when they come back to that page, it already shows they have hit the like button., any help to be found for this?
My Boiiiiiiii
Why we cannot do this using simple divs and translations? It's better practice this way?
CSS God
Toggle Kyle's hair with accessibility
I think the reason the animation wasn’t working at 20:00 was because you put ‘reverse’ and forgot to delete ‘forwards’
Bro Big Bro Please i am the Who always click Like Button Before watching i know you always create awsome video
Actually i want to know LIke in donwload we got progress baar how much is downloaded etc
But in api call it is download behind and just come in folder directly when download completed
so From api how i can get progress or completion report of download or api response
in simple word progress info of api response
is it possible
Hi can you make a redux vs recoil comparison video? Nice video btw.
Pleaseake these type of videos
This is really cool. With just that little html
The entire dragonball fanbase is disappointed that you dind't put the initial checkbox 9001px off the page.
i tried, display:none works as well, don't need -9999px to hide the control
Very good video but I just can't get over the small misalignments
Ohhhh yesss red and green love colour-blind people
In this instance, the red and green don't matter because they are not the sole indicators of the toggle state. The position (left or right) of the switch and potential inclusion of icons are additional levels of clarity.
There isn't a quicker/ leaner way to do this? No hate to him AT ALL, on the contrary. I'm just mind blown. I'm still a baby in js, isn't there a better way to do code toggles? Genuine question. 🙏🏻
This looks like a nightmare
Great
This task is minimum 1 week for me 😂. I’m a looser hahaha
Never heard of user-select ?
I would chicken out to JS so hard.
16:06 😄