I got tinnitus a couple years ago and, after some digging around for a proper specialist I found out that the main valid treatments are Tinnitus Retraining Therapy to help people habituate to their Tinnitus, and Windowed White Noise, which has shown promising results in reducing its volume.
I turned all of that into a pretty simple web app that helps create a custom treatment and guide people through the diagnostic process. And more importantly, all the relevant scientific papers are linked so you can actually validate that it's not snake oil (or at least not intended to be). It's GPL, of course.
The main downside is that it has to be used 3 hours a day (at least based on most studies), which sounds like a bit much but is pretty doable if you use the app while sleeping or doing random busywork during the day.
At least in my particular case the results were pretty impressive (and given the timeframe I don't believe it was merely a placebo), and seemed in line with the papers cited in the site, so I'm hoping this can help other patients deal with this condition.
Since CSS grids are mostly used for the global page layout, the ideal use case is using it to design complex pages that would be very annoying to make with other techniques, and on older browsers fall back to a much simpler design with flexbox or floats.
Since those fallbacks only require a handful of lines of CSS, it only takes a few minutes to get the compatibility to almost-perfect, and you can get a better design in front of most of your users very quickly. To me at least it's a solid mix of design freedom and development speed.
If you have a good reason for complex pages your solution is only viable once the share of old browsers has dropped below, say, 5% to 10%, depending on your niche.
What's actually going to happen is that most people will layer JavaScript frameworks on top of HTML and then we're going to complain about the huge performance and memory overhead of JavaScript heavy websites.
The effect works by creating multiple copies of the header (one for each design/section), which are then wrapped in two clipping masks (.midnightHeader and then .midnightInner inside that).
When you stop between two sections (let's say we need a blue header on the top one and a white one on the bottom one), we grab .midnightHeader.blue and place it exactly above the border. We then place .midnightHeader.white exactly below the border.
That nets you two headers, a blue one on top and a white one below the border, which isn't quite that we want. To fix it, we then grab the .midnightInner inside those and move the blue one towards the bottom (so it gets chopped in half right at the border, showing only the top part), and do the opposite with the one of the bottom (moving it upwards so it also gets chopped in half, but showing only the bottom part).
By doing this, the design looks continuous and all events work as they should, so the effect doesn't cause any usability issues.
We did a subtle implementation of Midnight at https://xapo.com/ (it's particularly noticeable in the vault/security part of the landing page). If you check it out with the Chrome Dev Tools it's easier to see how the masks work together, since it's a more realistic use case.
We ended up using SmoothScroll on Windows (https://gist.github.com/salipro4ever/35ba6d9e61cade99a0c2), which helps us demonstrate the effect a lot better on the project page. It captures the mousewheel event and adds some tweening to make it scroll smoothly.
It does break easily if you have a non-standard mouse config, however, so I can't quite recommend the library unless there's a really good reason for it.
I turned all of that into a pretty simple web app that helps create a custom treatment and guide people through the diagnostic process. And more importantly, all the relevant scientific papers are linked so you can actually validate that it's not snake oil (or at least not intended to be). It's GPL, of course.
The main downside is that it has to be used 3 hours a day (at least based on most studies), which sounds like a bit much but is pretty doable if you use the app while sleeping or doing random busywork during the day.
At least in my particular case the results were pretty impressive (and given the timeframe I don't believe it was merely a placebo), and seemed in line with the papers cited in the site, so I'm hoping this can help other patients deal with this condition.