search

Devographics / StateOfJS-legacy

Monorepo for older State of JS surveys
https://stateofjs.com/
Other
373 stars 64 forks source link

State of CSS #147

Open SachaG opened 5 years ago

SachaG commented 5 years ago

Discussing what a State of CSS survey would look like.

plouc commented 5 years ago
SachaG commented 5 years ago

I've started a new google doc that we can collaborate on: https://docs.google.com/document/d/1YLh7ZCOt3cSG4rUUJ9KjhVEKRCWvOTUS2VSxFyyKcSs/edit?usp=sharing

SachaG commented 5 years ago

Here's the current survey outline: https://github.com/StateOfJS/StateOfJS/blob/458a8828fe69b4eca2a5a4f2051cf3a7f316e086/typeform/surveys/2018css/outline.yaml

SachaG commented 5 years ago

Some thoughts after generating the actual survey form:

SachaG commented 5 years ago

More progress! Pretty happy with this version:

https://stateofjs.typeform.com/to/Zgy95x

https://d3vv6lp55qjaqc.cloudfront.net/items/3I1b3P1R3f1o2c0g3n45/Screen%20Shot%202019-01-03%20at%2010.06.28.png?X-CloudApp-Visitor-Id=43642&v=52407ac1

SachaG commented 5 years ago

Note: if you'd like to help beta-test the survey just fill it out as you normally would and then leave your feedback here. I'm curious to know if:

frivoal commented 5 years ago
SachaG commented 5 years ago

Great feedback! And thanks for the selector list!

SachaG commented 5 years ago

Do you write print stylesheets?" answer A/B/C are exclusive of eachother, but D is not. You may have print-only projects (D) some of the time, and projects for which print doesn't matter (A) some of the time. Not sure about the best way to rephrase that.

My thinking was that we can probably assume that anybody who answers (D) would probably care about print styles for their other projects too? I agree it's not quite the same, to be honest I mainly added (D) because of our conversations on that topic.

frivoal commented 5 years ago

I wanted to answer B+D: I never print websites, so I don't care all that strongly about their print stylesheet. However, I have made retail books using css (e.g. The Japanese version of Lea Verou's CSS Secrets), and I generally use HTML+CSS=>PDF as a replacement for MS-Word.

For the email question, I also suspect that the answer will be mostly A or A+D.

It's not perfect, but I think we could just keep the questions as is, and switch to allowing multiple answers. Since answering A+B or A+C or B+C is not meaningful, I suspect that mostly people just won't do it, and it allows people to actually do (A or B or C) + D.

SachaG commented 5 years ago

Updated: https://stateofjs.typeform.com/to/EQfX1U

Re: print/email thing, I'll think about it. Allowing multiple answers seems a bit weird so maybe we just add a separate question for print-only projects.

frivoal commented 5 years ago

Updated: https://stateofjs.typeform.com/to/EQfX1U

I went through it again. I like the new iteration.

Some more comments:

SachaG commented 5 years ago

"Which of these *** do you consider being part of your toolbox (i.e. know about and use at least occasionally?)"

I think the issue is that if the question we ask is more vague, the answer will also be more vague (and there's also the issue that "occasionally" is very subjective). With that phrasing we'd have no way of knowing if people chose an option because they know about it; or because they use it. So I'd rather pick one or the other.

I think the scenario of things that people know about but choose to stay away from is rare enough that we can ignore it.

SachaG commented 5 years ago

At no point during the survey do we ask people if they also do JS.

How about we add these options to the question about job titles then:

SachaG commented 5 years ago

Which browser's dev-tools is your primary one for working on css:

How about:

Which browser(s) do you work in primarily during initial development?

Some people might not use DevTools that much but still have a preferred development browser?

SachaG commented 5 years ago

Updated: https://stateofjs.typeform.com/to/WAF41k

SachaG commented 5 years ago

Line breaking properties (white-space, overflow-wrap, word-break, line-break, hyphens)

This one seems weird to me, as it imo mixes one very common property (white-space) with others I've never used/heard of. I might suggest removing it, although I know you care about this topic… ;)

SachaG commented 5 years ago

And I'm considering changing "which of these do you know about" to "which of these do you have you used" for units and selectors. I think that'll give us more meaningful results, since it's more precise than "know about" (you've either used it or you haven't).

loklaan commented 5 years ago

Hey great survey! I really like the scope of questions in the css features section 👌 I came from the beta-tester request on twitter.

Here is some feedback I'd love to give, and hopefully it is helpful:

frivoal commented 5 years ago

This one seems weird to me, as it imo mixes one very common property (white-space) with others I've never used/heard of. I might suggest removing it, although I know you care about this topic… ;)

This is a set of properties that heavily interact with each other, and if you're trying to solve the sort of problem for which you need to reach for one, you often need to consider the whole set. However, given that white-space is much more common that then other properties in this list, I could indeed be reasonable to remove it from the list (assuming that people do use it), and just ask about the rest. Or we could split the question to ask separately about each property, but that's probably overkill.

frivoal commented 5 years ago

I think the scenario of things that people know about but choose to stay away from is rare enough that we can ignore it.

I don't think it's that rare. Example:

And I'm considering changing "which of these do you know about" to "which of these do you have you used" for units and selectors. I think that'll give us more meaningful results, since it's more precise than "know about" (you've either used it or you haven't).

I think that would be fine, if we can exclude those that they don't intend to use again.

frivoal commented 5 years ago

How much JS code do you write?

  • No JS, only pure HTML and CSS
  • Some JS, on websites built with HTML and CSS.
  • I build HTML and CSS websites and apps with JS.

For someone who works alone, that's fine, but none of the answers seem right for someone who writes mostly HTML and CSS, and a little bit of JS, whitin a team that mostly makes things in JS.

I don't know if it is meaningful to ask the different between "I don't write JS, but people I work with write a lot of it" and "there's mostly no JS in my life, regardless of who writes it". Maybe there is, maybe not. But both realities exist, so we should phrase the question in a way that doesn't confuse either crowd.

davidluhr commented 5 years ago

This is shaping up really well! Couple pieces of feedback:

  1. I would consider adding a couple questions to the Resources section. Perhaps there could be a question regarding online courses, and another regarding YouTube channels or video series. CSS is so visual that a lot of valuable resources are found in these media.
  2. I would move the question "What do you feel is currently missing from CSS?" from the "About You" section into the "Opinion Questions" section. I have a feeling a lot of people will want to give responses to this question.

Really excited for this survey!

SachaG commented 5 years ago

Perhaps there could be a question regarding online courses, and another regarding YouTube channels or video series.

@davidluhr are there popular courses/channels that most people know about? I personally have never used either, so I wouldn't really be able to come up with a list…

SachaG commented 5 years ago

And for the JS question, how about introducing two new questions:

Front-end Proficiency

How proficient are you at JavaScript development? (pick the most advanced option corresponding to your skills)

Back-end Proficiency

How proficient are you at back-end development? (pick the most advanced option corresponding to your skills)

loklaan commented 5 years ago

@SachaG That's straight to the point and also covers backend consistently - I think it'd be great addition to the survey!

SachaG commented 5 years ago

Btw this is super rough but for the logo and general theme I was thinking of doing something blueprint-themed:

https://d3vv6lp55qjaqc.cloudfront.net/items/0Y2k3k3G0u2j3p1k1o39/Screen%20Shot%202019-01-04%20at%2010.00.27.png?X-CloudApp-Visitor-Id=43642&v=494e1e13

frivoal commented 5 years ago

I don't like the "front-end proficiency" framing. It has a very strong implication about "the normal way" to be a web developer these days.

It implies that someone who knows HTML and CSS (and SVG and ARIA and EPUB and WCAG and Open Type and RDFa and Illustrator and Photoshop and InDesign and typography and color theory) is not "fully proficient", while someone who knows CSS and a lot of JS is.

That's one particular career path, but there are others. Asking it this way seems very hostile to people who learned their skills in a different way than "cool kids these days".

I'm less of a backend person, but I feel a similar bias to some degree in the question. This seems to match the dominant way of leveling up these days, but it doesn't seem to have room for the people who've never done any of that, but can write enough php to get stuff done, or the people who write the web-facing config panel in your home router in C++, or the people who make your bank's website...

I don't think there's anything wrong with asking whether people can do the various things you're asking, but I do think there's a problem with implying that these particular things (and these things only) are the scale on which we can judge how advanced people's skill are.

SachaG commented 5 years ago

ok, maybe "JavaScript proficiency" is less controversial then? for the back-end question I'm not sure how else to frame it though…

SachaG commented 5 years ago

https://d3vv6lp55qjaqc.cloudfront.net/items/3Z0P2K2V1t3D3x3p2V0F/stateofcss_logo.png?X-CloudApp-Visitor-Id=43642&v=d87f3eb7

davidluhr commented 5 years ago

@davidluhr are there popular courses/channels that most people know about? I personally have never used either, so I wouldn't really be able to come up with a list…

@SachaG There aren't tons of dedicated CSS courses/channels, but here are a few popular ones:

Online learning/courses

YouTube Channels that cover CSS

Unfortunately, there's a noticeable lack of quality resources that focus on CSS, especially advanced CSS and real-world projects/workflows. I recently started my own YouTube channel called Build UX to try and fill this need, but it's of course still quite new and therefore small. I'd love to see what the responses from others in the community are regarding which course/channel resources they use to learn CSS. Maybe the "Other" option for these questions will be pretty valuable.

SachaG commented 5 years ago

@davidluhr should I just add these to Which CSS-related blogs/magazines/etc. do you read? ? Or maybe split blogs/magazines on one side, and "learning resources" (everything else) on the other?

SachaG commented 5 years ago

Related to https://github.com/StateOfJS/StateOfJS/pull/179, should we add Shadow DOM somewhere? if so where? Personally I know almost nothing about it so I'm not sure where to put it.

SachaG commented 5 years ago

Final logo (for now):

https://d3vv6lp55qjaqc.cloudfront.net/items/0E0J3U2Y2H0P0q140Y0O/stateofcss_logo@2x.png?X-CloudApp-Visitor-Id=43642&v=d7f03de7

SachaG commented 5 years ago

Just thought of something: should we avoid publicizing the survey to our existing 30k+ subscribers State of JS list? It might bias the results towards people who know JS, use CSS-in-JS, etc.

At the same time, it's a shame not to rely on that resource to get an audience boost… Maybe the answer is to keep track of those surveys separately (by adding a special field) so that we're able to detect any skewing of the result?

davidluhr commented 5 years ago

@davidluhr should I just add these to Which CSS-related blogs/magazines/etc. do you read? ? Or maybe split blogs/magazines on one side, and "learning resources" (everything else) on the other?

@SachaG If you would prefer to keep the number of options limited to a certain number, it may make sense to split things up. If you're ok with a long list of options, we can simply reword the question to list more variety in terms of types of resources.

Just thought of something: should we avoid publicizing the survey to our existing 30k+ subscribers State of JS list? It might bias the results towards people who know JS, use CSS-in-JS, etc.

At the same time, it's a shame not to rely on that resource to get an audience boost… Maybe the answer is to keep track of those surveys separately (by adding a special field) so that we're able to detect any skewing of the result?

I agree this is a tough call. I think it's worth the volume of potential responses. And, for people like myself, who primarily work with HTML/CSS but also do some JS work, I've always taken the State of JS survey even though I'm not solely focused on JavaScript, so there might be subscribers in a similar situation. Do you think it would be helpful to ask existing subscribers to spread the word to more CSS-focused developers they might know? All things considered, I think using existing subscribers will get much more awareness vs. starting from scratch.

I love the idea of tracking responses separately! There are always heated debates between people who love CSS and those who dislike it, so it may be interesting to compare responses from a known JS-focused population against a general population.

SachaG commented 5 years ago

So basically, although I'm sure there are still some points we could improve here, I'll consider the questions 95% done and move on to designing the landing page for the survey; and once that's done everything will be ready for publication. This should take me about a week, which still leaves time to tweak things a bit.

In the meantime if there's anything that you mentioned in this thread but that I didn't address feel free to remind me again :)

SachaG commented 5 years ago

I'm putting the finishing touches to the landing page, which means we'll be able to launch soon.

Should we mention CSS Exclusions btw? https://webdesign.tutsplus.com/tutorials/an-introduction-to-css-exclusions-the-future-of-complex-web-layout--cms-32366?ref=webdesignernews.com

SachaG commented 5 years ago

Landing page preview! https://stateofcss.com/

Password: CSS

Feedback welcome :) But please don't share yet!

loklaan commented 5 years ago

@SachaG Looks great! I can't wait to see the rest of the survey design 😻

Here are some things I did manage to sleuth:

SachaG commented 5 years ago

@loklaan great feedback! Still learning grid, thanks for the pointers :)

frivoal commented 5 years ago

Should we mention CSS Exclusions

They're an interesting technology, but they're Microsoft only, with some strong objection (not to the concept, but it's actual design) from other vendors. So they're kind of dead by default, but if we actually have a bunch of people showing interest in them, that could be used to try and revive it, which would be interesting. So I'd be in support of including them, but if you'd rather not, that's ok as well.

frivoal commented 5 years ago
SachaG commented 5 years ago

Hmm strange… in Firefox I found that the SVG shows up fine, but then disappears when you open the devtools!

SachaG commented 5 years ago

Oh it disappears when the window is below a given height. I'll look into it tomorrow.

davidluhr commented 5 years ago

Looking great! So excited for all of this.

Some markup feedback:

  1. The <h1 class="Home__Logo">) doesn't contain any actual text, and the SVG does not have an accessible name.

    • Because screen reader support for <title> in an SVG is inconsistent, I would recommend adding hidden text in a <span> that's nested in the <h1> that reads "The State of CSS 2019" with the following CSS properties to visually hide it, but ensure it is still accessible to screen reader users: 
      padding: 0;
width: 1px;
height: 1px;
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(0 0 99.9% 99.9%);
overflow: hidden;
border: 0;
    • Additionally, the SVG should have aria-hidden="true" so screen readers know this SVG is decorative/redundant with actual text content.

  2. "CSS is evolving faster than ever." should be in an <h2> instead of a <p> tag, because it functions as a heading in terms of content hierarchy and there are <h3> tags subsequently in the same content section.

  3. The email input (<input type="email" class="Newsletter__Email" id="field_0" …/>) does not have an associated <label>. I would recommend adding <label for="field_0">Email</label> with the same CSS used above to hide the <h1> text. This will ensure the label is still accessible for screen reader users. Placeholder text has inconsistent support across screen readers, so it is best to always provide a dedicated <label> for each input.

  4. <h3 class="About__Author__Name"> headings should be <h4>, because their parent heading ("The State of CSS is Made by:") is a <h3>.

SachaG commented 5 years ago

@davidluhr great feedback! I'll change that right away. Btw I'm surprised there isn't a better way to hide something visually but still make it accessible to screen readers? I thought that would've been standardized somehow by now since it's such a common need.

davidluhr commented 5 years ago

@SachaG I agree completely. The code snippet I posted above is well-tested and used widely, but it is unfortunate that we have to resort to hacks to ensure our websites are accessible.

The updated markup looks great!

SachaG commented 5 years ago

I'm running into a very weird bug in Chrome where there's extra padding below the main layout, outside of the bounds of <body> and <html>…

https://cl.ly/0cef5e8cd92a/[45148e4b0ce458c3528d9aeb65d5690d]_Screen%2520Shot%25202019-02-09%2520at%252015.07.17.png

SachaG commented 5 years ago

Apparently it's caused by the individual .Block elements in the right column having a margin-bottom. Super strange…