Improved .visually-hidden
Theorically bulletproof CSS class for visually hide anything and keep it accessible to ATs.
Don Amit DonAmit197
BjornDCode
/ gist:5cb836a6b23638d6d02f5cb6ed59a04a
Created
February 3, 2020 11:58
Tailwind - Fixed sidebar, scrollable content
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Source: https://twitter.com/calebporzio/status/1151876736931549185 | |
| <div class="flex"> | |
| <aside class="h-screen sticky top-0"> | |
| // Fixed Sidebar | |
| </aside> | |
| <main> | |
| // Content | |
| </main> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| console.log('Client-side code running'); | |
| const button = document.getElementById('myButton'); | |
| button.addEventListener('click', function(e) { | |
| console.log('button was clicked'); | |
| fetch('/clicked', {method: 'POST'}) | |
| .then(function(response) { | |
| if(response.ok) { | |
| console.log('click was recorded'); |
