devographics / stateofjs-legacy

Monorepo for older State of JS surveys

State of JS

• translation
• structure
• development
  • requirements
  • installation
  • coding style
  • captures
• deployment
  • build
  • deploy
• authors

Translation

If you'd like to help translate the 2018 survey results, check out this blog post.

Structure

The project is split by surveys, each one has its own folder containing the dedicated website (website folder) and data processing logic (data_processing folder).

You also have a dedicated folder for the homepage home.

• home is used for stateofjs.com
• surveys/2016/website is used for 2016.stateofjs.com
• surveys/2017/website is used for 2017.stateofjs.com
• …

Development

If you're in a hurry, you can run make. It will list all the available commands used to work on the project.

Requirements

• Node.js >= 8.3.0
• Yarn
• docker and docker-compose to be able to run the data processing tools
• GNU Make

Installation

Please make sure to use yarn if you go for manual install as we only provide lock files for this tool.

You have several options to install project dependencies, either by installing them manually via standard yarn install inside the various directories you're planning to work on, or by using custom make targets.

Another option is to install all dependencies using the following command:

make install

And if you only want to work on a specific survey, you can run:

make survey_install_2018

Coding style

This project uses prettier which can be run using this command:

make fmt

There's another command which only checks if the code was formatted as expected:

make fmt_check

The project also uses ESLint to enforce good practice and consistency, the configuration is common to the whole project, to run it:

make lint

make fmt_check and make lint both run on CI (travis).

Captures

In order to improve sharing on social networks, we generate screenshots of the charts, to generate those screenshots for a specific survey, you can run the following command:

make survey_capture_2018

This will take screenshots according to the config defined in surveys/2018/config/captures.yml.

Please make sure that the target survey's development server is running prior to running this command, using make survey_dev_2018 for example.

Deployment

Build

As for install, you have several ways to build the websites and homepage.

You can build all using:

make build

or just build the home:

make home_build

or a specific survey's website:

make survey_build_2018

Deploy

@todo

Authors

StateOfJS is Made by:

• Sacha Greif Author of Discover Meteor and creator of VulcanJS, a React+GraphQL open-source framework.
• Raphaël Benitte Creator of the Nivo JavaScript data visualization library as well as Mozaik, a tool for building beautiful dashboards.
• Michael Rambeau Creator of Best of JavaScript, a platform that provides insights and resources about JavaScript libraries.

stateofjs-legacy's Issues

Salary/Experience: do we need both absolute and relative?

Also I must be missing something, because I would've expected both charts to be the same?

Other: remove Compared to available options "others only" chart

Since it just duplicates the same data as the chart right above itself.

Data normalization

Jest and Gulp are both in the main section and in the "other" section as well. Remove them from "other" maybe?

Connections chart element color issue

Hi! Great work and thanks for making this great effort.

A fellow engineer (@sincospi) pointed out an issue with the "JavaScript Connections" chart here: https://stateofjs.com/2017/connections/

The issue is that in some selection combinations the last element of one section appears colored in the color of the next section. To make the statement more clear below are some illustrations.

In the example below "Webpack" should be grey as are the other build tools:

Here is another example (with only 2 sections selected) where "Plain CSS" should be red and not blue:

Kind regards and keep up the great work for the community!

Country charts: focus more on relative counts

Absolute country counts will always follow population, so they'll be the same for every answer. Sorting the chart by relative count to see which countries use a given tech more than others might be more interesting.

New Chart: Number of Libraries Used

I think it'd be great to see the breakdowns of how many developers use how many libraries for each section.

So for example, for the front-end section we could have a donut chart showing which percentage has only used one library, which percentage has used two, three, etc. all the way to people who have tried all 9 options.

I don't think the data would be that hard to aggregate, and I think the chart could be pretty meaningful? ("oh, most people have tried four of these libraries but I've only tried two, maybe I should make more time to study new technologies!")

Salary charts (and others?): extract "interesting" data

It would be great to have a way (manual or automated) to extract key data points for each section; for example any data point that is very far from the average.

Mobile/Others: missing data

mobileData.others is undefined.

Convert aggregated data to yaml

[New Feature] Comparison with previous year

Could we find a way to include a comparison with 2017 to show the trend, when applicable?

• Vertically space out chart and legend:
• remove legend frame
• shorten legend wording
• add dots on chart
• add ability to highlight a specific datum (for example never heard of it) when we hover a legend

Country charts: show on world map?

Use world map for country charts section.

Happiness

Add happiness chart ("On a scale of one to five dogs, how happy are you with your current flavor of JavaScript?") to each Results page.

Referer data

Normalize/deduplicate data.

Visual Bugs

Just writing down all the small visual bugs/issues.

• Overlap issues with bar labels

• Alignment issue with X axis

• Overlap issue with horizontal bar labels for short bars (Other Tools page)

State of JS Front-end Quiz

Find a way to reuse the front-end quiz from NordicJS.

Chord Diagram is too complicated

Chord Diagram as a representation for connections look great but it doesn't bring more value than traditional heat map from the last year. Using Chord Diagram breaks the rule of “KISS” for “Keep it Simple, Stupid” more about of this here and here. The heat map is so much easier for detail analysis. Also, heat map will allow for easier comparison between years.

I propose to create a switch for changing between chord diagram and heat map.

What to do with "Share this chart" button?

I wonder how we should handle the “share this chart” button. On the worldwide page it’s not really practical. Same on the salaries page, if we offer per-country charts how do people link to a specific one?

A couple options:

A) we don’t put the button on that page
B) we put it but it’ll always link back to the default view
C) we generate sub-pages programatically (/developers/usa, /developers/france, etc.)

[Question] What for library/framework was used initially?

If I'm not mistaken, State of JS has used a library or framework that enables the creataion of sleek and simple forms/surveys. (can't remember if recently or in the past.)
I've been trying to find it, though unsuccessful.

I'd seen it used before, it fills the browser window, responsive across devices, keyboard focused (can be used with keyboard only), only shows a question at a time, large but simplistic styling.

Ask for number of developers (or other size of company metrics)

It would be helpful to know how responses vary based on the size of the team(s): number of teams, size of teams, number of of employees, etc.

Recommended Resources

Add affiliate links.

v2: Libraries to add

Utilities

https://github.com/moment/luxon
https://date-fns.org/

Results: percents vs absolute, satisfaction vs usage vs awareness

Should we think about reintroducing the various toggles/filters we had in last year's survey?

I'm not sure if it's necessary but I wanted to at least raise the issue.

[New Chart] Trend "radar" scatterplot

Inspired by ThoughtWorks Radar, a chart to show the evolution of each section:

Best of JS popup/tooltip

Use Best of JS API to show related library info in tooltip or popover.

@michaelrambeau do you have some kind of API spec (such as swagger) to ease integration?

Blinking yellow links

The frenetic blinking yellow hover on every link literally makes it painful to navigate what is otherwise an awesome and wonderful site. Please settle that down.

[New Feature] Chart for showing main reasons behind preferences

Now that people can give their reason why they like/dislike each library we need a new chart to show the results:

Salary charts: data should be weighed

Salary data should be weighed to cancel out framework popularity. Otherwise more popular frameworks will always show up as the most popular answers for every salary slice.

Page Titles

Double-check how <title> works.

Affinity: Chord Diagram/Heatmap

Create configurable Chord chard that lets you pick which sections to compare. Put it in its own section.

Alternatively, use heatmap like 2016 results.

Country charts (and others as well?): show average

Country charts should show the overall average so we can know if a country ranks above or below.

Compare with previous survey results (2016)

Use styled-components

Update descriptions

Most of the textual content were copy/pasted from previous survey, maybe we have to update some of them.

Add link to github

To report bugs, etc.

Netlify Deploy Fail

6:08:06 PM: error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND
6:08:06 PM: 
  322 | 
  323 | var sankeyLinkHorizontal = function() {
> 324 |   return d3Shape.linkHorizontal()
      | ^
  325 |       .source(horizontalSource)
  326 |       .target(horizontalTarget);
  327 | };


  WebpackError: d3Shape.linkHorizontal is not a function
  
  - d3-sankey.js:324 sankeyLinkHorizontal
    ~/d3-sankey/build/d3-sankey.js:324:1
  
  - SankeyLinks.js:41 Object.exports.__esModule
    ~/nivo/lib/components/charts/sankey/SankeyLinks.js:41:1
  
  - Sankey.js:39 Object.<anonymous>
    ~/nivo/lib/components/charts/sankey/Sankey.js:39:1
  
  - index.js:5 Object.exports.__esModule
    ~/nivo/lib/components/charts/sankey/index.js:5:1
  
  - index.js:101 Object.exports.__esModule
    ~/nivo/lib/index.js:101:1
  
  - AffinityChord.js:4 Object.<anonymous>
    src/components/charts/AffinityChord.js:4:1

Since we don't use the Sankey diagram, is there a way we could drop the dependency? Would we have to fork Nivo? Actually should we create a version of Nivo that only includes the dependencies we need to make the overall bundle lighter?

[Discussion] Domain & URL structure for each year

Currently, we have the following URL structure:

URL	Content
stateofjs.com	current homepage
2017.stateofjs.com/	2017 site
stateofjs.com/2017	2017 results (but with current styling)

Which is a mess because links still point to stateofjs.com/2017 which can be broken by the new styles/features added for the 2018 version.

Question: should we do:

Solution A

URL	Content
stateofjs.com	current homepage
stateofjs.com/2017	2017 results
stateofjs.com/2018	2018 results

Pros:

• Single monorepo
• Single deploy target
• No broken links
• Possible to preload results when user is on homepage
• Potentially easier to make comparisons between each year's data

Cons:

• Requires maintaining backwards compatibility between each year
• Bundle has to contain data/components/etc. for all years
• Not possible to have different styling for each year 😡

Or:

Solution B

URL	Content
stateofjs.com	current homepage
2017.stateofjs.com/	2017 results
2018.stateofjs.com/	2018 results

Pros:

• Completely independent sites
• No risk of breaking previous year's results

Cons:

• Requires maintaining multiple repos or branches, and multiple deploy targets
• No preloading

v1.1

To-do

• Add percents to charts
• Opinions
• Features

Nice-to-have

• Per-country salaries
• Provide anonymized data as csv
• Salary vs experience Sankey diagram for each section

Mobile devices support

Nivo use responsive containers , it's just a matter of adapting the layout to this kind of devices.

404s

http://stateofjs.com/2017/flavors/

Looks like Gatsby's redirection is not working?

Use patterns in charts?

Cool idea: https://css-tricks.com/simple-patterns-for-separation/

v2: ask for salary/experience using slider to get more granular data

Salary and Experience: add average column

It would be useful to add a column with the average for all frameworks for each section as a reference point.

Opinions section

Server-side rendering

Think about server-side-rendering for text and graphs. Ideally, graphs should be converted to PNG for easy sharing.

This would be an argument for using Gatsby or Next, but I think that would require migrating away from React Router, so it's not a trivial move…

v2: Better question asking

Instead of the current 5-option question, we could present things like this:

1. Which libraries have you heard of?

• React
• Angular
• Vue
• Ember
• ...

2. Which libraries have you used?

[only present options checked in 1.]

3. Which libraries would you happily used again?

[only present options checked in 2.]

4. Out of the libraries you don't use, which ones are you interested in learning?

[only present options not checked in 1.]

VSCode is mislabeled as Visual Studio

Issue here: http://stateofjs.com/2017/other-tools/

Visual Studio and VSCode are different things. I'm quite sure the vast majority are using VSCode, not Visual Studio.

[Feature] Awards page

• Highest satisfaction
• Highest interest
• Biggest improvement
• Pick of the year
• etc.

Awareness/Interest/Satisfaction charts should be split along positive/negative lines

Instead of grouping by color, weighing by positive/negative sentiment might make more sense

[Question] More countries should be added to Worldwide Usage sub category?

I was reading through State of JS, flavors category and worldwide usage subcategory, and noticed major and some minor countries missing. I read the note (only countries which received over 100 total entries are shown.)

• Can the threshold be reduced? 60 Maybe?
• How was the survey shared across the developer eco system?
• (So we collected data from over 20,000 developers, asking them questions on topics ranging from front-end frameworks and state management, to build tools and testing libraries.) Are the over 20, 000 developers specific countries or continent?

I'd like for this to be reviewed, and comments.

Make salary and experience charts more obvious

I'm afraid people won't know they can click on bars to show those charts. We should probably make them more obvious and show them from the start?