State of CSS

[SachaG]

Discussing what a State of CSS survey would look like.

[SachaG]

Actually it's not related to margins, it's just that the longer the right column's content is, the more it pushes down the bottom of the overall page. The weird part is that manually setting the height to 200px with overflow: hidden for the entire right column doesn't change anything, the content is still "jumping out" and pushing down the entire window's bottom edge.

[SachaG]

[davidluhr]

@SachaG Interesting. This issue is appearing in all Chromium-based browsers on both Mac and Windows. Firefox looks fine on both platforms.

Not sure of the exact cause of the issue, but the following seems to fix it without negatively affecting the site in other browsers:

@media screen and (min-width: 800px) {
  body {
    overflow: hidden;
  }
}

[SachaG]

It does seem like overflow: hidden on the body fixes the issue but there's still some really weird behaviors. For example the browser seems to "remember" scroll position and I get stuck at the bottom of the page.

If I open a new incognito window, the browser properly loads the page at the top:

Still in most cases it shouldn't matter. Thanks for finding the fix @davidluhr !

[bryndyment]

does the bug go away if you swap out CSS grid for flexbox?

[SachaG]

No actually, I tried that as well and it didn't make a difference.

[SachaG]

OK, I think we've worked out all the kinks so I'll launch this whole thing tomorrow (morning Japan time). I'm excited to see what people think!

[davidluhr]

@SachaG Awesome! Can't wait to take part. So excited for the world to see.

[SachaG]

One thing I'm really enjoying is all the people saying that merely taking the survey taught them about a lot of CSS concepts they didn't know about.

So for the results site, I would love to go deeper in that direction and really explain each CSS property mentioned.

Obviously writing all of that from scratch would be a huge amount of work, so I wonder if we couldn't leverage MDN? Is the MDN content available via an API? Or could it be scraped? For example:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap

[plouc]

Using MDN will require to use the same license => https://developer.mozilla.org/en-US/docs/MDN/About#Copyrights_and_licenses

[plouc]

You can easily get the pages' content by appending $json to the URL, for example https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout$json

[SachaG]

Oh perfect. The license shouldn't be a problem. All we need to do is add the URL for each page to each question then.

[frivoal]

In addition to MDN (which I wholeheartedly support), I'd also include a link to the specifications. Most of them are written to be quite readable for authors as well as implementers.

[SachaG]

The MDN pages have links to the spec but it doesn't seem like they're exposed in the JSON API sadly… :(

[frivoal]

The whole list of features isn't that long. I can easily provide links manually for everything you want to have a link for.

[SachaG]

Thanks to everybody who helped out in this thread! After a long, long time we're now almost done :) You can preview the results and leave us your feedback here:

https://github.com/StateOfJS/state-of-css-2019/issues/29