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! :)
It's really nice seeing you keep accessibility in mind, so many RUclips tutorials (and post secondary institutions) neglect accessibility entirely, which is both a shame, and a now crime here in Canada. Great work!
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.
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?🙂
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
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!
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
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
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 =)
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.
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.
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
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.
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.
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...
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.
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?
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. 🙏🏻
Accessibility wise I'm not sure it would be the best idea. Do readers even bother to tell the user about an element that isn't displayed ? I'm sure they don't with text, idk about other elements type though
Having several checkbox with the same name will post sn array instead of a single value. Sometimes this is the expected behavior when these checkbox are set for each row of a table. But... this array will not contain any disabled checkbox !
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
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! :)
It's really nice seeing you keep accessibility in mind, so many RUclips tutorials (and post secondary institutions) neglect accessibility entirely, which is both a shame, and a now crime here in Canada. Great work!
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
Great vid Kyle! One more subtle thing I like to do at disabled state is:
cursor: not-allowed
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. :)
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.
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 😂
I think it's the best practice to create a toggle checkbox that i've ever seen, thanks a lot
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
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
There is something extremely satisfying about slider checkboxes.
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!
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
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.
Hats off for detailed explanation and Great Tutorial, I implemented it and worked great, Thanks Man !
Amazing approach within CSS. Just ❤ 🎉
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
5:54-7:17 he was following my mind, doing things i was thinking!
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
To make more ‘accessible’, could make the text more bold and disabled box visually different besides color
very, very helpful method of explaining this, thank you!
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
2:12 why not use display none and handle the interaction with the label? (e.g. having the input inside the label)
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
Only stopped in to answer your question. Yes, you can do anything you put your mind to 🧐😉💕
Awesome my brother 👏🏼👏🏼👏🏼👏🏼👏🏼
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!
Nice explanation
Thanks for this awesome video!
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
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
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.
Amazing video 👍😁
and then there’s me who doesn’t know 75% of the css properties
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
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 again Kyle!
Nice. Pure css custom checkbox. That's very reusable.
i am creating a website where users can upload photos so what should i use ? firebase or sql ?
I like video with mistake and thoughts process.. Make us look normal with our mistake
Your content is awesome!!
Btw can u make a video on how to make custom toasts in website?
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.
Amazing video
How can we create a keyboard navigation( up/down arrow keys) of a list, please create a video on this ?
just out of curiosity, why did you go for a checkbox over a range input?
Is it normal to move an element far off the page for hiding it?
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
The left/top: -9000px looks like an aweful idea. I'd just use pointer-events: none
what extension is which shows you what to write in animation
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.
even with dispkay none, the checked still trigger when you click its label
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?
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 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.
Is it good instead of absolute positioning the input just give it a width and height of 0?
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.
How are you remembering the color?
sometimes "label" is wrapped around "input", I have experimenting with such format, but it does not work. Any hints ?
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 think the reason the animation wasn’t working at 20:00 was because you put ‘reverse’ and forgot to delete ‘forwards’
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...
Hi can you make a redux vs recoil comparison video? Nice video btw.
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
Toggle Kyle's hair with accessibility
why not use appearance none? on the checkbox instead of opacity and negative positions?
thanks dude
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...
Why we cannot do this using simple divs and translations? It's better practice this way?
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.
This is really cool. With just that little html
20:08 relatable
Awesome 👍
That is exactly what we want to smashhhhhh subscribe buttonnnnn!!!!!-!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
You're the man
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?
The entire dragonball fanbase is disappointed that you dind't put the initial checkbox 9001px off the page.
I LOVE IT❤❤
CSS God
Very good video but I just can't get over the small misalignments
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. 🙏🏻
I think you could set display of the checkbox as none then you wouldn't have to make the top and left -90000px
display none makes it unusable tho
Accessibility wise I'm not sure it would be the best idea. Do readers even bother to tell the user about an element that isn't displayed ? I'm sure they don't with text, idk about other elements type though
Pleaseake these type of videos
My Boiiiiiiii
i tried, display:none works as well, don't need -9999px to hide the control
Never heard of user-select ?
I would chicken out to JS so hard.
This looks like a nightmare
Having several checkbox with the same name will post sn array instead of a single value. Sometimes this is the expected behavior when these checkbox are set for each row of a table.
But... this array will not contain any disabled checkbox !
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
All of this will break if there is no label or the label is not directly after the input