├── .prettierrc ├── public ├── css │ ├── insights.js │ ├── minimalist.js │ └── insights.css ├── assets │ ├── favicon-114.png │ ├── favicon-144.png │ ├── favicon-32.png │ ├── favicon-57.png │ ├── favicon-72.png │ ├── opengraph-logo.png │ ├── hero-dna-graphic_1x.png │ ├── hero-dna-graphic_2x.png │ ├── 0beac26bfbe29230c3c64cda9c75028c.woff2 │ ├── 72026b3c6a79bb1ed3d3124fd172de92.woff │ ├── 7e4c05c9e1b440bb4bc0a50cfa49dc49.woff │ ├── ce3a756dbc26ce21a07291affa06fef9.woff2 │ ├── 41c8922e0c9d9cde2ad1df0191200b6d.svg │ ├── 05b73cafcf0239f7f8e21864c494e94c.svg │ ├── 5eb757fe3bc41d00e95b2bfcd9ae9f18.svg │ ├── f9055252e116bda44cc349ecb3b9cc30.svg │ ├── d21c8a03dd6eecc729b176367f952bb4.svg │ ├── e091ac5d34b92c56fe4f075d57949691.svg │ ├── 75d89c00a006b2d20ad4a7557b245ea0.svg │ ├── cc5b37feab537ddbf701e47180b15bda.svg │ ├── 7535596a2ace7d84bbbcedfc8be7cde2.svg │ ├── 41ba190cd1362fe75daac8165bc349e6.svg │ ├── 181dbb93717b56514d7846b0437ad1ee.svg │ ├── mdn-web-docs-logo.svg │ └── 949efa25b9ed61ef9edb5c68936d54a2.svg ├── 0beac26bfbe29230c3c64cda9c75028c.woff2 ├── 72026b3c6a79bb1ed3d3124fd172de92.woff ├── 7e4c05c9e1b440bb4bc0a50cfa49dc49.woff ├── ce3a756dbc26ce21a07291affa06fef9.woff2 ├── reports │ ├── pdf │ │ ├── MDN-Web-DNA-Report-2019.pdf │ │ ├── MDN-Web-DNA-Report-2020.pdf │ │ ├── MDN-Web-Testing-Report-2021.pdf │ │ └── MDN-Browser-Compatibility-Report-2020.pdf │ ├── assets │ │ ├── fonts │ │ │ ├── ZillaSlab-Bold.subset.woff │ │ │ ├── ZillaSlab-Bold.subset.woff2 │ │ │ ├── ZillaSlab-Regular.subset.woff │ │ │ └── ZillaSlab-Regular.subset.woff2 │ │ ├── images │ │ │ ├── web-developer-needs-assessment-2019 │ │ │ │ ├── p18_frameworks.svg │ │ │ │ ├── p18_privacy.svg │ │ │ │ ├── p18_design.svg │ │ │ │ ├── p18_security.svg │ │ │ │ ├── p18_authentication.svg │ │ │ │ ├── p18_outliners.svg │ │ │ │ ├── p18_paceofchange.svg │ │ │ │ ├── p18_localization.svg │ │ │ │ ├── p18_performance.svg │ │ │ │ ├── p18_documentation.svg │ │ │ │ ├── p18_browsercopatibility.svg │ │ │ │ ├── p18_testing.svg │ │ │ │ ├── p18_accessibility.svg │ │ │ │ ├── p18_debugging.svg │ │ │ │ ├── p9.svg │ │ │ │ ├── p10.svg │ │ │ │ ├── p13.svg │ │ │ │ ├── p26.svg │ │ │ │ ├── p28.svg │ │ │ │ ├── p14.svg │ │ │ │ ├── p45.svg │ │ │ │ ├── p41.svg │ │ │ │ ├── p42.svg │ │ │ │ ├── p43.svg │ │ │ │ └── p40.svg │ │ │ └── web-developer-needs-assessment-2020 │ │ │ │ ├── Responses-By-Subcategory_Gender.svg │ │ │ │ ├── Satisfaction_Overall-Satisfaction.svg │ │ │ │ ├── Responses-By-Subcategory_Years-of-Experience.svg │ │ │ │ ├── How-Developers-Felt-About-Needs_How-Developers-Felt-About-Needs.svg │ │ │ │ ├── Responses-By-Subcategory_Type-of-Developer.svg │ │ │ │ ├── Technologies_Accessibility.svg │ │ │ │ ├── Technologies_HTML.svg │ │ │ │ ├── Technologies_Adoption-of-New-Technologies-.svg │ │ │ │ ├── Technologies_WebAssembly.svg │ │ │ │ ├── Technologies_CSS.svg │ │ │ │ ├── What_s-Missing-from-the-Web_Open-Text-What_s-Missing.svg │ │ │ │ ├── What_s-Missing-from-the-Web_Prompted-What_s-Lacking.svg │ │ │ │ ├── Technologies_JavaScript.svg │ │ │ │ ├── Satisfaction_Sat.-By-Subcategory.svg │ │ │ │ ├── Technologies_Web-Testing.svg │ │ │ │ ├── Technologies_Browsers-Issues.svg │ │ │ │ ├── Technologies_Browsers-Supported.svg │ │ │ │ ├── Top-Ten-Needs_Top-Ten-Needs.svg │ │ │ │ └── Top-Ten-Needs_Overall-Satisfaction.svg │ │ └── css │ │ │ └── web-testing-report.css │ └── js │ │ └── ga.js ├── 41c8922e0c9d9cde2ad1df0191200b6d.svg ├── 05b73cafcf0239f7f8e21864c494e94c.svg ├── 5eb757fe3bc41d00e95b2bfcd9ae9f18.svg ├── f9055252e116bda44cc349ecb3b9cc30.svg ├── d21c8a03dd6eecc729b176367f952bb4.svg ├── e091ac5d34b92c56fe4f075d57949691.svg ├── 75d89c00a006b2d20ad4a7557b245ea0.svg ├── js │ └── ga.js ├── cc5b37feab537ddbf701e47180b15bda.svg ├── 7535596a2ace7d84bbbcedfc8be7cde2.svg ├── 41ba190cd1362fe75daac8165bc349e6.svg ├── 181dbb93717b56514d7846b0437ad1ee.svg └── 949efa25b9ed61ef9edb5c68936d54a2.svg ├── sass ├── atoms │ ├── _borders.scss │ ├── _interact.scss │ ├── _base.scss │ ├── _logo.scss │ ├── _typography.scss │ └── _icons.scss ├── molecules │ ├── _hero.scss │ ├── _two-column-copy.scss │ ├── _browser-compat-report.scss │ ├── _reports-container.scss │ └── _footer.scss ├── insights.scss └── mixins │ └── _separators.scss ├── .stylelintignore ├── .gitignore ├── .github └── dependabot.yml ├── bin ├── s3-sync.sh └── slack-notify.sh ├── .eslintrc.json ├── .stylelintrc ├── CODE_OF_CONDUCT.md ├── Jenkinsfile ├── README.md ├── webpack.config.js ├── webpack.config.prod.js └── package.json /.prettierrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /public/css/insights.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/css/minimalist.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sass/atoms/_borders.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | css/libs/ 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /sass/molecules/_hero.scss: -------------------------------------------------------------------------------- 1 | .hero { 2 | text-align: center; 3 | } 4 | -------------------------------------------------------------------------------- /public/assets/favicon-114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/assets/favicon-114.png -------------------------------------------------------------------------------- /public/assets/favicon-144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/assets/favicon-144.png -------------------------------------------------------------------------------- /public/assets/favicon-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/assets/favicon-32.png -------------------------------------------------------------------------------- /public/assets/favicon-57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/assets/favicon-57.png -------------------------------------------------------------------------------- /public/assets/favicon-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/assets/favicon-72.png -------------------------------------------------------------------------------- /public/assets/opengraph-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/assets/opengraph-logo.png -------------------------------------------------------------------------------- /public/assets/hero-dna-graphic_1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/assets/hero-dna-graphic_1x.png -------------------------------------------------------------------------------- /public/assets/hero-dna-graphic_2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/assets/hero-dna-graphic_2x.png -------------------------------------------------------------------------------- /public/0beac26bfbe29230c3c64cda9c75028c.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/0beac26bfbe29230c3c64cda9c75028c.woff2 -------------------------------------------------------------------------------- /public/72026b3c6a79bb1ed3d3124fd172de92.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/72026b3c6a79bb1ed3d3124fd172de92.woff -------------------------------------------------------------------------------- /public/7e4c05c9e1b440bb4bc0a50cfa49dc49.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/7e4c05c9e1b440bb4bc0a50cfa49dc49.woff -------------------------------------------------------------------------------- /public/ce3a756dbc26ce21a07291affa06fef9.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/ce3a756dbc26ce21a07291affa06fef9.woff2 -------------------------------------------------------------------------------- /public/reports/pdf/MDN-Web-DNA-Report-2019.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/reports/pdf/MDN-Web-DNA-Report-2019.pdf -------------------------------------------------------------------------------- /public/reports/pdf/MDN-Web-DNA-Report-2020.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/reports/pdf/MDN-Web-DNA-Report-2020.pdf -------------------------------------------------------------------------------- /public/reports/pdf/MDN-Web-Testing-Report-2021.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/reports/pdf/MDN-Web-Testing-Report-2021.pdf -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: "npm" 4 | directory: "/" 5 | schedule: 6 | interval: "daily" 7 | -------------------------------------------------------------------------------- /public/assets/0beac26bfbe29230c3c64cda9c75028c.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/assets/0beac26bfbe29230c3c64cda9c75028c.woff2 -------------------------------------------------------------------------------- /public/assets/72026b3c6a79bb1ed3d3124fd172de92.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/assets/72026b3c6a79bb1ed3d3124fd172de92.woff -------------------------------------------------------------------------------- /public/assets/7e4c05c9e1b440bb4bc0a50cfa49dc49.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/assets/7e4c05c9e1b440bb4bc0a50cfa49dc49.woff -------------------------------------------------------------------------------- /public/assets/ce3a756dbc26ce21a07291affa06fef9.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/assets/ce3a756dbc26ce21a07291affa06fef9.woff2 -------------------------------------------------------------------------------- /public/reports/assets/fonts/ZillaSlab-Bold.subset.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/reports/assets/fonts/ZillaSlab-Bold.subset.woff -------------------------------------------------------------------------------- /public/reports/assets/fonts/ZillaSlab-Bold.subset.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/reports/assets/fonts/ZillaSlab-Bold.subset.woff2 -------------------------------------------------------------------------------- /public/reports/assets/fonts/ZillaSlab-Regular.subset.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/reports/assets/fonts/ZillaSlab-Regular.subset.woff -------------------------------------------------------------------------------- /sass/atoms/_interact.scss: -------------------------------------------------------------------------------- 1 | @import "~@mdn/minimalist/sass/vars/layout"; 2 | 3 | .interact { 4 | li { 5 | margin-bottom: $base-spacing / 2; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /public/reports/assets/fonts/ZillaSlab-Regular.subset.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/reports/assets/fonts/ZillaSlab-Regular.subset.woff2 -------------------------------------------------------------------------------- /public/reports/pdf/MDN-Browser-Compatibility-Report-2020.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/insights/HEAD/public/reports/pdf/MDN-Browser-Compatibility-Report-2020.pdf -------------------------------------------------------------------------------- /sass/atoms/_base.scss: -------------------------------------------------------------------------------- 1 | @import "~@mdn/minimalist/sass/vars/layout"; 2 | 3 | h2 { 4 | margin-bottom: $base-spacing; 5 | } 6 | 7 | .wrapper { 8 | margin: $base-spacing auto; 9 | max-width: $max-width-default; 10 | padding: $base-spacing; 11 | } 12 | -------------------------------------------------------------------------------- /sass/atoms/_logo.scss: -------------------------------------------------------------------------------- 1 | .logo { 2 | background: transparent url("/public/assets/mdn-web-docs-logo.svg") 0 0 3 | no-repeat; 4 | background-size: 220px 48px; 5 | display: block; 6 | height: 48px; 7 | margin: 0 auto ($base-spacing * 2); 8 | width: 220px; 9 | } 10 | -------------------------------------------------------------------------------- /bin/s3-sync.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | if [[ -z "$1" ]]; then 4 | echo "Bucket name required" 5 | exit 1 6 | fi 7 | 8 | CACHE="--cache-control max-age=2629800" # 1 month 9 | ARGS="--acl public-read --delete ${@:2}" 10 | 11 | echo "Copying dist folder to $1" 12 | aws s3 sync public/ s3://$1/ ${CACHE} ${ARGS} 13 | -------------------------------------------------------------------------------- /sass/molecules/_two-column-copy.scss: -------------------------------------------------------------------------------- 1 | @import "~@mdn/minimalist/sass/vars/layout"; 2 | @import "~@mdn/minimalist/sass/mixins/utils"; 3 | 4 | .two-column-copy { 5 | @media #{$mq-small-desktop-and-up} { 6 | @include gap($base-spacing * 2); 7 | display: flex; 8 | 9 | .col-1, 10 | .col-2 { 11 | flex-basis: 50%; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /public/41c8922e0c9d9cde2ad1df0191200b6d.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/assets/41c8922e0c9d9cde2ad1df0191200b6d.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/05b73cafcf0239f7f8e21864c494e94c.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/5eb757fe3bc41d00e95b2bfcd9ae9f18.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/assets/05b73cafcf0239f7f8e21864c494e94c.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/f9055252e116bda44cc349ecb3b9cc30.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/assets/5eb757fe3bc41d00e95b2bfcd9ae9f18.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/assets/f9055252e116bda44cc349ecb3b9cc30.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /sass/insights.scss: -------------------------------------------------------------------------------- 1 | @import "./mixins/separators"; 2 | 3 | @import "./atoms/typography"; 4 | @import "./atoms/base"; 5 | @import "./atoms/logo"; 6 | @import "./atoms/interact"; 7 | @import "./atoms/icons"; 8 | 9 | @import "./molecules/hero"; 10 | @import "./molecules/reports-container"; 11 | @import "./molecules/browser-compat-report"; 12 | @import "./molecules/two-column-copy"; 13 | @import "./molecules/footer"; 14 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "eslint:recommended", 4 | "plugin:import/errors", 5 | "prettier" 6 | ], 7 | "rules": { 8 | "no-console": 1 9 | }, 10 | "plugins": [ 11 | "import" 12 | ], 13 | "parserOptions": { 14 | "ecmaVersion": 2018 15 | }, 16 | "env": { 17 | "es6": true, 18 | "browser": true, 19 | "node": true 20 | } 21 | } -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-recommended", 4 | "stylelint-config-sass-guidelines", 5 | "stylelint-a11y/recommended", 6 | "stylelint-prettier/recommended" 7 | ], 8 | "plugins": [ 9 | "stylelint-scss" 10 | ], 11 | "rules": { 12 | "max-nesting-depth": 2, 13 | "declaration-no-important": true, 14 | "font-weight-notation": "named-where-possible" 15 | } 16 | } -------------------------------------------------------------------------------- /public/d21c8a03dd6eecc729b176367f952bb4.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/assets/d21c8a03dd6eecc729b176367f952bb4.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Community Participation Guidelines 2 | 3 | This repository is governed by Mozilla's code of conduct and etiquette guidelines. 4 | For more details, please read the 5 | [Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). 6 | 7 | ## How to Report 8 | 9 | For more information on how to report violations of the Community Participation Guidelines, please read our 10 | [How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/) page. 11 | -------------------------------------------------------------------------------- /sass/atoms/_typography.scss: -------------------------------------------------------------------------------- 1 | @import "~@mdn/minimalist/sass/vars/layout"; 2 | @import "~@mdn/minimalist/sass/vars/color-palette"; 3 | @import "~@mdn/minimalist/sass/vars/typography"; 4 | 5 | .slab { 6 | background-color: $neutral-100; 7 | color: $neutral-600; 8 | display: inline-block; 9 | padding: 0 ($base-spacing / 4); 10 | } 11 | 12 | .main-lead, 13 | .secondary-lead { 14 | margin: ($base-spacing * 2) auto; 15 | } 16 | 17 | .main-lead { 18 | font-family: zillaslab; 19 | font-size: $medium-font-size; 20 | font-weight: normal; 21 | } 22 | -------------------------------------------------------------------------------- /public/e091ac5d34b92c56fe4f075d57949691.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/assets/e091ac5d34b92c56fe4f075d57949691.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/75d89c00a006b2d20ad4a7557b245ea0.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/assets/75d89c00a006b2d20ad4a7557b245ea0.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/js/ga.js: -------------------------------------------------------------------------------- 1 | (function (i, s, o, g, r, a, m) { 2 | i["GoogleAnalyticsObject"] = r; 3 | (i[r] = 4 | i[r] || 5 | function () { 6 | (i[r].q = i[r].q || []).push(arguments); 7 | }), 8 | (i[r].l = 1 * new Date()); 9 | (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]); 10 | a.async = 1; 11 | a.src = g; 12 | m.parentNode.insertBefore(a, m); 13 | })( 14 | window, 15 | document, 16 | "script", 17 | "https://www.google-analytics.com/analytics.js", 18 | "ga" 19 | ); 20 | 21 | ga("create", "UA-36116321-29", "auto"); 22 | ga("send", "pageview"); 23 | -------------------------------------------------------------------------------- /sass/atoms/_icons.scss: -------------------------------------------------------------------------------- 1 | @import "~@mdn/minimalist/sass/vars/layout"; 2 | 3 | .google, 4 | .twitter { 5 | &::before { 6 | background-size: 18px; 7 | content: ""; 8 | display: inline-block; 9 | height: 18px; 10 | margin-right: $base-unit; 11 | vertical-align: sub; 12 | width: 18px; 13 | } 14 | } 15 | 16 | .google { 17 | &::before { 18 | background: transparent url("~@mdn/dinocons/brands/google-mono.svg") 0 0 19 | no-repeat; 20 | } 21 | } 22 | 23 | .twitter { 24 | &::before { 25 | background: transparent url("~@mdn/dinocons/social/twitter.svg") 0 0 26 | no-repeat; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /sass/mixins/_separators.scss: -------------------------------------------------------------------------------- 1 | @import "~@mdn/minimalist/sass/vars/color-palette"; 2 | @import "~@mdn/minimalist/sass/vars/layout"; 3 | 4 | @mixin neutral-separator() { 5 | background: linear-gradient(to left, $neutral-550, $neutral-100); 6 | border: 0; 7 | height: 10px; 8 | } 9 | 10 | @mixin blue-gradient-separator() { 11 | background: linear-gradient(to right, $primary-100, $primary-300); 12 | border: 0; 13 | height: 10px; 14 | } 15 | 16 | .neutral-separator { 17 | @include neutral-separator(); 18 | } 19 | 20 | .blue-gradient-separator { 21 | @include blue-gradient-separator(); 22 | margin: ($base-spacing * 2) 0; 23 | } 24 | -------------------------------------------------------------------------------- /public/cc5b37feab537ddbf701e47180b15bda.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/assets/cc5b37feab537ddbf701e47180b15bda.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/7535596a2ace7d84bbbcedfc8be7cde2.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/assets/7535596a2ace7d84bbbcedfc8be7cde2.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/reports/js/ga.js: -------------------------------------------------------------------------------- 1 | (function (i, s, o, g, r, a, m) { 2 | i["GoogleAnalyticsObject"] = r; 3 | (i[r] = 4 | i[r] || 5 | function () { 6 | (i[r].q = i[r].q || []).push(arguments); 7 | }), 8 | (i[r].l = 1 * new Date()); 9 | (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]); 10 | a.async = 1; 11 | a.src = g; 12 | m.parentNode.insertBefore(a, m); 13 | })( 14 | window, 15 | document, 16 | "script", 17 | "https://www.google-analytics.com/analytics.js", 18 | "ga" 19 | ); 20 | 21 | ga("create", "UA-36116321-29", "auto"); 22 | ga("send", { 23 | hitType: "pageView", 24 | eventCategory: "Report", 25 | eventAction: "View", 26 | eventLabel: document.title, 27 | }); 28 | -------------------------------------------------------------------------------- /sass/molecules/_browser-compat-report.scss: -------------------------------------------------------------------------------- 1 | @import "~@mdn/minimalist/sass/vars/layout"; 2 | 3 | @import "~@mdn/minimalist/sass/mixins/utils"; 4 | 5 | .browser-compat-report { 6 | /* 7 | * Overriding some styles from: 8 | * sass/atoms/_typography.scss 9 | */ 10 | .main-lead { 11 | margin: 0 0 $base-spacing; 12 | max-width: 42rem; 13 | } 14 | 15 | ul { 16 | @include reset-list(); 17 | 18 | li, 19 | a { 20 | display: inline-block; 21 | } 22 | } 23 | 24 | .button { 25 | margin-bottom: $base-spacing / 2; 26 | max-width: inherit; 27 | text-align: center; 28 | width: 100%; 29 | 30 | @media #{$mq-small-desktop-and-up} { 31 | margin-bottom: inherit; 32 | text-align: left; 33 | width: inherit; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /public/41ba190cd1362fe75daac8165bc349e6.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p18_frameworks.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /public/assets/41ba190cd1362fe75daac8165bc349e6.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/181dbb93717b56514d7846b0437ad1ee.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/assets/181dbb93717b56514d7846b0437ad1ee.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/reports/assets/css/web-testing-report.css: -------------------------------------------------------------------------------- 1 | .main-container { 2 | margin: 24px auto; 3 | max-width: 1400px; 4 | } 5 | 6 | .header { 7 | display: flex; 8 | } 9 | 10 | .logo { 11 | flex: 0 0 250px; 12 | } 13 | 14 | .header h1 { 15 | flex: 1 1 50%; 16 | } 17 | 18 | .participants-table th { 19 | font-size: 1rem; 20 | } 21 | 22 | .participants-table th, 23 | .participants-table td { 24 | padding: 12px; 25 | } 26 | 27 | .prose-sm tbody td:first-child { 28 | padding-left: 12px; 29 | } 30 | 31 | .participants-table tr:nth-child(odd) td { 32 | background-color: #ccc; 33 | } 34 | 35 | .respondent-comment { 36 | background-color: #edecec; 37 | border-radius: 6px; 38 | margin-bottom: 12px; 39 | padding: 12px 24px; 40 | } 41 | 42 | .prose .no-highlight { 43 | background-color: transparent; 44 | color: #212121; 45 | display: block; 46 | margin-bottom: 24px; 47 | padding: 0; 48 | } 49 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p18_privacy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p18_design.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Jenkinsfile: -------------------------------------------------------------------------------- 1 | 2 | def notify_slack(Map args, credential_id='slack-hook') { 3 | def command = "${env.WORKSPACE}/bin/slack-notify.sh" 4 | withCredentials([string(credentialsId: credential_id, variable: 'HOOK')]) { 5 | for (arg in args) { 6 | command += " --${arg.key} '${arg.value}'" 7 | } 8 | command += " --hook '${HOOK}'" 9 | sh command 10 | } 11 | } 12 | 13 | def syncS3(String bucket, String extra_args='') { 14 | try { 15 | sh "bin/s3-sync.sh ${bucket} ${extra_args}" 16 | } catch(err) { 17 | notify_slack([ 18 | status: "failure", 19 | stage: "Failed to deploy to ${env.BRANCH_NAME}" 20 | ]) 21 | throw err 22 | } 23 | notify_slack([ 24 | status: "success", 25 | stage: "Shipped to ${env.BRANCH_NAME}" 26 | ]) 27 | } 28 | 29 | node { 30 | stage('Prepare') { 31 | checkout scm 32 | } 33 | 34 | if (env.BRANCH_NAME == 'prod-push') { 35 | stage('Push') { 36 | println("Pushing to prod bucket") 37 | syncS3("insights-prod-178589013767") 38 | } 39 | } 40 | 41 | stage('Cleanup') { 42 | cleanWs( 43 | cleanWhenFailure: false 44 | ) 45 | } 46 | } 47 | 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MDN Insights 2 | 3 | This repository contains the code that powers the site, https://insights.developer.mozilla.org/ 4 | There you will find the results of the MDN Web Docs Web DNA(Developer Needs Assessment) reports in both HTML and PDF. 5 | 6 | ### Running locally 7 | 8 | To run the website locally you will need the following pre-installed: 9 | 10 | - [Nodejs](https://nodejs.org/) 11 | - [Yarn](https://yarnpkg.com/) 12 | 13 | Once you have the above installed, run the following command to install all required dependencies: 14 | 15 | ``` 16 | yarn 17 | ``` 18 | 19 | Once the above completed, run: 20 | 21 | ``` 22 | yarn start 23 | ``` 24 | 25 | The above will startup a local `http` server and also complete an initial build of the source. Once complete, it will open the landing page in your browser. It will also watch your files for changes, and automatically rebuild the source on save. 26 | 27 | ### Production 28 | 29 | For right now, production builds are created locally and checked into source control. We will improve this soon and update the documentation to reflect the changes. 30 | 31 | The command that builds for production is: 32 | 33 | ``` 34 | yarn build:prod 35 | ``` 36 | 37 | The folder that should to serve is `./public` 38 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p18_security.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 3 | 4 | const ASSET_PATH = process.env.ASSET_PATH || "/"; 5 | 6 | module.exports = { 7 | entry: { 8 | minimalist: "./node_modules/@mdn/minimalist/sass/mdn-minimalist.scss", 9 | insights: "./sass/insights.scss", 10 | }, 11 | output: { 12 | path: path.resolve(__dirname, "public", "css"), 13 | }, 14 | mode: "development", 15 | plugins: [ 16 | new MiniCssExtractPlugin({ 17 | filename: "[name].css", 18 | }), 19 | ], 20 | module: { 21 | rules: [ 22 | { 23 | test: /\.scss$/, 24 | use: [ 25 | { 26 | loader: MiniCssExtractPlugin.loader, 27 | options: { 28 | publicPath: ASSET_PATH, 29 | }, 30 | }, 31 | "css-loader", 32 | "resolve-url-loader", 33 | { 34 | loader: "sass-loader", 35 | options: { 36 | sourceMap: true, 37 | }, 38 | }, 39 | ], 40 | }, 41 | { 42 | test: /\.(woff|woff2|svg)$/, 43 | loader: "file-loader", 44 | options: { 45 | outputPath: "../", 46 | }, 47 | }, 48 | ], 49 | }, 50 | watch: true, 51 | }; 52 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p18_authentication.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 3 | 4 | const ASSET_PATH = process.env.ASSET_PATH || "/"; 5 | 6 | module.exports = { 7 | entry: { 8 | minimalist: "./node_modules/@mdn/minimalist/sass/mdn-minimalist.scss", 9 | insights: "./sass/insights.scss", 10 | }, 11 | output: { 12 | path: path.resolve(__dirname, "public", "css"), 13 | }, 14 | mode: "production", 15 | plugins: [ 16 | new MiniCssExtractPlugin({ 17 | filename: "[name].css", 18 | }), 19 | ], 20 | module: { 21 | rules: [ 22 | { 23 | test: /\.scss$/, 24 | use: [ 25 | { 26 | loader: MiniCssExtractPlugin.loader, 27 | options: { 28 | publicPath: ASSET_PATH, 29 | }, 30 | }, 31 | "css-loader", 32 | "resolve-url-loader", 33 | { 34 | loader: "sass-loader", 35 | options: { 36 | sourceMap: true, 37 | }, 38 | }, 39 | ], 40 | }, 41 | { 42 | test: /\.(woff|woff2|svg)$/, 43 | loader: "file-loader", 44 | options: { 45 | outputPath: "../assets/", 46 | publicPath: "../assets/", 47 | }, 48 | }, 49 | ], 50 | }, 51 | watch: false, 52 | }; 53 | -------------------------------------------------------------------------------- /sass/molecules/_reports-container.scss: -------------------------------------------------------------------------------- 1 | @import "~@mdn/minimalist/sass/vars/layout"; 2 | 3 | @import "~@mdn/minimalist/sass/mixins/utils"; 4 | 5 | .reports-container { 6 | @media #{$mq-small-desktop-and-up} { 7 | align-items: center; 8 | display: flex; 9 | justify-content: space-between; 10 | } 11 | 12 | h2 { 13 | margin-bottom: $base-spacing; 14 | min-width: 185px; 15 | padding: $base-spacing 0; 16 | width: 100%; 17 | 18 | @media #{$mq-tablet-and-up} { 19 | width: 80%; 20 | } 21 | 22 | @media #{$mq-small-desktop-and-up} { 23 | width: inherit; 24 | } 25 | } 26 | 27 | ul { 28 | @include reset-list(); 29 | 30 | @media #{$mq-tablet-and-up} { 31 | margin: 0 auto; 32 | width: 80%; 33 | } 34 | 35 | @media #{$mq-small-desktop-and-up} { 36 | align-items: center; 37 | display: flex; 38 | flex-direction: column; 39 | margin: inherit; 40 | width: inherit; 41 | } 42 | 43 | li { 44 | flex-basis: 80%; 45 | margin-bottom: $base-spacing; 46 | } 47 | } 48 | 49 | .report-year-entry { 50 | @media #{$mq-small-desktop-and-up} { 51 | flex-basis: 20%; 52 | } 53 | } 54 | 55 | .report-feature-img { 56 | img { 57 | margin: 0 auto; 58 | } 59 | } 60 | 61 | .button { 62 | max-width: inherit; 63 | min-width: 185px; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p18_outliners.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p18_paceofchange.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p18_localization.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mdn-insights", 3 | "version": "1.0.0", 4 | "description": "The code that power https://insights.developer.mozilla.org/", 5 | "scripts": { 6 | "build": "webpack", 7 | "build:prod": "webpack --config ./webpack.config.prod.js", 8 | "lint": "npx eslint", 9 | "server": "http-server -p 8090 -o", 10 | "start": "run-p build server" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://gitlab.com/potato/mozilla/mdn-insights/development.git" 15 | }, 16 | "keywords": [ 17 | "mdn", 18 | "insights", 19 | "web dna" 20 | ], 21 | "author": "Mozilla", 22 | "license": "MPL-2.0", 23 | "calavera": { 24 | "prettier": true, 25 | "eslint": true, 26 | "sass": true 27 | }, 28 | "devDependencies": { 29 | "@mdn/dinocons": "^0.3.1", 30 | "@mdn/minimalist": "^0.8.1", 31 | "css-loader": "^5.2.4", 32 | "eslint": "^7.25.0", 33 | "eslint-config-prettier": "^8.3.0", 34 | "eslint-plugin-import": "^2.24.2", 35 | "file-loader": "^6.2.0", 36 | "http-server": "^0.12.3", 37 | "mini-css-extract-plugin": "^2.2.2", 38 | "npm-run-all": "^4.1.5", 39 | "prettier": "^2.2.1", 40 | "resolve-url-loader": "^3.1.2", 41 | "sass": "^1.39.0", 42 | "sass-loader": "^12.1.0", 43 | "stylelint": "^13.13.1", 44 | "stylelint-a11y": "^1.2.3", 45 | "stylelint-config-prettier": "^8.0.2", 46 | "stylelint-config-recommended": "^5.0.0", 47 | "stylelint-config-sass-guidelines": "^8.0.0", 48 | "stylelint-prettier": "^1.2.0", 49 | "stylelint-scss": "^3.19.0", 50 | "url-loader": "^4.1.1", 51 | "webpack": "^5.52.0", 52 | "webpack-cli": "^4.6.0" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p18_performance.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/Responses-By-Subcategory_Gender.svg: -------------------------------------------------------------------------------- 1 | Decline to stateNeither of these describe meIdentify as womanIdentify as man4.3%1.8%87.0%6.8%n = 6645 -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p18_documentation.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p18_browsercopatibility.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p18_testing.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p18_accessibility.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/Satisfaction_Overall-Satisfaction.svg: -------------------------------------------------------------------------------- 1 | DissatisfiedNeither satisfied nor dissatisfiedStrongly satisfiedSatisfiedStrongly dissatisfiedn = 6,64515.5%5.6%1.1%60.6%17.1% -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/Responses-By-Subcategory_Years-of-Experience.svg: -------------------------------------------------------------------------------- 1 | Developing 10+ yearsDeveloping less than 1 yearDeveloping 6-9 yearsDeveloping 1-2 yearsDeveloping 3-5 yearsn = 664530.9%16.8%8.4%18.1%25.7% -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p18_debugging.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/How-Developers-Felt-About-Needs_How-Developers-Felt-About-Needs.svg: -------------------------------------------------------------------------------- 1 | Disagree that needs are representedStrongly agree that needs are representedNeither agree nor disagree that needs are representedAgree that needs are representedStrongly disagree that needs are representedn = 6,64511.0%5.0%2.0%68.6%13.4% -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/Responses-By-Subcategory_Type-of-Developer.svg: -------------------------------------------------------------------------------- 1 | Full stack (front-end and back-end)Other type of web developerBack-endFront-end (primarily CSS and HTML)Front-end (primarily JavaScript)Test Engineern = 664559.1%4.1%2.5%0.5%9.6%24.2% -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/Technologies_Accessibility.svg: -------------------------------------------------------------------------------- 1 | 11.0%44.6%20.6%10.4%2.8%10.6%Documentation of web accessibility APIsLack of support from my employer regarding accessibilityLearning how to design and build accessible experiencesOtherSupport in web frameworksInteroperability between assistive technologies like screen readersn = 5,526 -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/Technologies_HTML.svg: -------------------------------------------------------------------------------- 1 | Lack of interoperability between implementationsNot enough components built into HTMLInability to customize components built into HTMLLack of browserengine adoption/support for a given featureThe quality of components built into HTMLOthern = 4,06313.5%12.2%7.6%11.1%29.0%26.6% -------------------------------------------------------------------------------- /sass/molecules/_footer.scss: -------------------------------------------------------------------------------- 1 | @import "~@mdn/minimalist/sass/vars/color-palette"; 2 | @import "~@mdn/minimalist/sass/vars/layout"; 3 | @import "~@mdn/minimalist/sass/vars/typography"; 4 | 5 | .page-footer-logo { 6 | margin-bottom: $base-spacing; 7 | } 8 | 9 | .page-footer { 10 | background-color: $neutral-100; 11 | color: $text-color-inverted; 12 | padding: ($base-spacing * 2) $base-spacing; 13 | 14 | .logo { 15 | margin: 0; 16 | } 17 | 18 | .content-container { 19 | margin: 0 auto; 20 | max-width: 1400px; 21 | } 22 | 23 | a { 24 | color: $text-color-inverted; 25 | } 26 | 27 | ul { 28 | a { 29 | display: block; 30 | padding: 10px 0; 31 | width: fit-content; 32 | } 33 | } 34 | 35 | .social { 36 | align-items: center; 37 | display: flex; 38 | 39 | h4 { 40 | font-size: $small-medium-font-size; 41 | font-weight: normal; 42 | margin: inherit; 43 | margin-right: 10px; 44 | } 45 | 46 | li { 47 | display: inline-block; 48 | margin-right: 10px; 49 | } 50 | 51 | ul { 52 | padding-inline-start: $base-spacing / 4; 53 | } 54 | 55 | svg { 56 | height: 18px; 57 | vertical-align: sub; 58 | width: 18px; 59 | 60 | path { 61 | fill: #fff; 62 | } 63 | } 64 | } 65 | 66 | .footer-license { 67 | margin: 10px 0; 68 | 69 | @media #{$mq-tablet-and-up} { 70 | border-top: 1px solid $neutral-550; 71 | margin: 50px 0 30px; 72 | padding: 30px 0 0; 73 | } 74 | } 75 | 76 | .footer-legal { 77 | @media #{$mq-tablet-and-up} { 78 | padding-bottom: 20px; 79 | } 80 | 81 | li { 82 | display: inline-block; 83 | } 84 | 85 | a { 86 | display: block; 87 | padding: 0 20px 0 0; 88 | } 89 | } 90 | } 91 | 92 | @supports (display: grid) { 93 | .content-container { 94 | display: grid; 95 | 96 | .page-footer-logo, 97 | .link-list-mdn, 98 | .link-list-moz, 99 | .footer-license, 100 | .footer-legal { 101 | grid-column: 1/3; 102 | } 103 | 104 | .page-footer-logo { 105 | grid-row: 1/2; 106 | } 107 | 108 | .link-list-mdn { 109 | grid-row: 2/3; 110 | 111 | @media #{$mq-tablet-and-up} { 112 | grid-column: 1/2; 113 | } 114 | } 115 | 116 | .link-list-moz { 117 | grid-row: 3/4; 118 | 119 | @media #{$mq-tablet-and-up} { 120 | grid-column: 2/3; 121 | grid-row: 2/3; 122 | } 123 | } 124 | 125 | .social-mdn { 126 | grid-column: 1/2; 127 | grid-row: 4/5; 128 | } 129 | 130 | .social-moz { 131 | grid-column: 2/3; 132 | grid-row: 4/5; 133 | } 134 | 135 | .footer-license { 136 | grid-row: 5/6; 137 | } 138 | 139 | .footer-legal { 140 | grid-row: 6/7; 141 | } 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/Technologies_Adoption-of-New-Technologies-.svg: -------------------------------------------------------------------------------- 1 | 16.2%24.9%23.5%11.3%3.3%8.9%11.9%Documentation and trainingSupport for legacy browsersBroad interoperability across browsersOrganization approvalFinding out about the new technologyNone of the aboveTooling support and dev ecosystemn = 5,526 -------------------------------------------------------------------------------- /bin/slack-notify.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | usage() { 4 | echo -en "Usage: $0 --stage --message --status \n\n" 5 | echo -en "Options: \n" 6 | echo -en " --debug Debug basically sets set -x in bash \n" 7 | echo -en " --message Slack message to send\n" 8 | echo -en " --stage Job stage \n" 9 | echo -en " --status Job status\n" 10 | echo -en " --hook Slack incoming webhook url\n" 11 | } 12 | 13 | return_status() { 14 | local STATUS=$1 15 | 16 | if [[ -n "$STATUS" ]]; then 17 | STATUS=$(echo "$STATUS" | tr '[:lower:]' '[:upper:]') 18 | case "$STATUS" in 19 | 'SUCCESS') 20 | STATUS_PREFIX=":tada:" 21 | COLOR="good" 22 | ;; 23 | 'SHIPPED') 24 | STATUS_PREFIX=":ship:" 25 | COLOR="good" 26 | ;; 27 | 'WARNING') 28 | STATUS_PREFIX=":warning:" 29 | COLOR="warning" 30 | ;; 31 | 'FAILURE') 32 | STATUS_PREFIX=":rotating_light:" 33 | COLOR="danger" 34 | ;; 35 | *) 36 | STATUS_PREFIX=":sparkles:" 37 | COLOR="good" 38 | ;; 39 | esac 40 | STATUS="${STATUS_PREFIX} *${STATUS}* " 41 | echo "STATUS=${STATUS}" 42 | echo "COLOR=${COLOR}" 43 | fi 44 | } 45 | 46 | 47 | while [ "$1" != "" ]; do 48 | case $1 in 49 | -h | --help ) 50 | usage 51 | exit 0 52 | ;; 53 | -x | --setx | --debug ) 54 | set -x 55 | ;; 56 | --stage ) 57 | STAGE="${2}" 58 | shift 59 | ;; 60 | --status ) 61 | STATUS=$(return_status "${2}" | grep "STATUS" | sed 's/.*=//') 62 | COLOR=$(return_status "${2}" | grep "COLOR" | sed 's/.*=//') 63 | shift 64 | ;; 65 | --hook ) 66 | HOOK="${2}" 67 | shift 68 | ;; 69 | -m | --message) 70 | MESSAGE="${2}" 71 | shift 72 | ;; 73 | esac 74 | shift 75 | done 76 | 77 | if [[ -n "$STAGE" ]]; then 78 | MESSAGE="${STATUS}${STAGE}" 79 | elif [[ -n "$MESSAGE" ]]; then 80 | MESSAGE="${STATUS}${MESSAGE}" 81 | else 82 | usage 83 | exit 1 84 | fi 85 | 86 | if [ -z "${HOOK}" ]; then 87 | echo "[ERROR]: --hook or webhook is not set" 88 | exit 1 89 | fi 90 | 91 | read -r -d '' payload <OtherLack of build tooling support (in Emscripten/Babel/webpack/etc.)Lack of browser/engine support for a given language featureLack of debug tooling support (browser dev tools or IDE integration)Lack of interoperability between implementationsBrowser updates causing things to breakLack of perfomance (speed and size) profiling support (browser dev tools or IDE integration)Inadequate performance (speed and size), particularly on low-end devicesn = 22914.0%10.0%6.1%34.9%19.2%4.8%5.2%5.7% -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p9.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | T 11 | otal 12 | R 13 | esponses 14 | 15 | 16 | 17 | P 18 | artial 19 | R 20 | esponses 21 | 22 | 23 | Complete Responses 24 | 25 | Disqualified 26 | 27 | 28 | 29 | 30 | 31 | 32 | 43,904 33 | 28,474 34 | (37.4%) 35 | 76,188 36 | 37 | 38 | 3,739 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p10.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | M 14 | an 15 | 16 | 87.1% 17 | 1.1% 18 | 3.6% 19 | 20 | 8 21 | .2% 22 | 23 | Declined to State 24 | 25 | W 26 | oman 27 | 28 | 29 | N 30 | eithe 31 | r 32 | Describe 33 | M 34 | e 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/Technologies_CSS.svg: -------------------------------------------------------------------------------- 1 | Challenges creating the layout desiredInadequate progressive enhancement strategyOtherLack of interoperability between implementationsLack of browser/engine support for a given language featureLack of debug tooling support (browser dev tools)Lack of build tooling support (in Babel/webpack/uglify.js/etc.)Lack of perfomance (speed and size) profiling supportBrowser updates causing things to breakn = 5,01732.5%6.8%6.7%6.0%11.3%26.4%2.8%3.7%3.8% -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/What_s-Missing-from-the-Web_Open-Text-What_s-Missing.svg: -------------------------------------------------------------------------------- 1 | Browser CompatibilityAccess to FilesystemPWA supportCSSAccess to HardwareAvoid JavaScriptAccessibilityPerformanceSecurityDebuggingn = 64810.65%3.76%3.76%3.27%4.73%10.02%2.02%2.44%2.02%2.44% -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/What_s-Missing-from-the-Web_Prompted-What_s-Lacking.svg: -------------------------------------------------------------------------------- 1 | APIs giving access to hardwareAccess to native APIsPerformanceBrowser compatibilityDebuggingCSS supportAccess to filesystemNone of thesePWA supportn = 664530.2%28.8%20.3%48.8%30.9%15.8%19.4%7.6%19.9% -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/Technologies_JavaScript.svg: -------------------------------------------------------------------------------- 1 | Lack of interoperability between implementationsOtherInadequate performance (speed and size), particularly on low-end devicesLack of browser/engine adoption/support for a given language featureLack of debug tooling support (browser dev tools)Lack of internationalization APIs or localization supportBrowser updates causing things to breakLack of perfomance (speed and size) profiling supportLack of build tooling support (in Babel/webpack/uglify.js/etc.)n = 5,47212.7%10.3%9.1%20.8%18.4%6.5%5.7%7.7%8.9% -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p13.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Full stack (front-end and back-end) 10 | 11 | Front end (primarily JavaScript) 12 | 13 | Back end 14 | 15 | Front end (primarily CSS & HTML) 16 | 17 | Other 18 | 43.1% 19 | 33.3% 20 | 3.4% 21 | 57.1% 22 | 11.7% 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/Satisfaction_Sat.-By-Subcategory.svg: -------------------------------------------------------------------------------- 1 | Frameworks and librariesIDEsBrowser dev toolsHTML, CSS, JavaScript, etc. documentationMean Overall SatisfactionAutomated browser testing toolsPerformance tools n = 6,645Browser compatibilityAccessibility toolsPrivacy and security tools4.013.633.963.273.043.022.982.873.874.23 -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/Technologies_Web-Testing.svg: -------------------------------------------------------------------------------- 1 | Difficult to set up an adequate test environmentRunning tests across multiple browsersTime spent on manual testing (e.g. due to lack of automation)Difficulty diagnosing performance issuesTest failures are hard to debug or reproduceTests are difficult to writeSlow-running testsOtherLack of debug tooling support (browser dev tools or IDE integration)n =6,14415.1%24.3%17.8%9.2%6.6%5.8%14.5%3.3%3.4% -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p26.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Strongly Disagree 14 | 15 | A 16 | gree 17 | 18 | 62% 19 | 9% 20 | 1% 21 | 6% 22 | 22% 23 | 24 | N 25 | eithe 26 | r 27 | 28 | A 29 | gree o 30 | r 31 | Disagree 32 | 33 | Disagree 34 | Strongly Agree 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /public/css/insights.css: -------------------------------------------------------------------------------- 1 | .neutral-separator{background:linear-gradient(to left, #eee, #212121);border:0;height:10px}.blue-gradient-separator{background:linear-gradient(to right, #216b82, #83d0f2);border:0;height:10px;margin:48px 0}.slab{background-color:#212121;color:#fff;display:inline-block;padding:0 6px}.main-lead,.secondary-lead{margin:48px auto}.main-lead{font-family:zillaslab;font-size:1.563rem;font-weight:normal}h2{margin-bottom:24px}.wrapper{margin:24px auto;max-width:1400px;padding:24px}.logo{background:transparent url(../assets/949efa25b9ed61ef9edb5c68936d54a2.svg) 0 0 no-repeat;background-size:220px 48px;display:block;height:48px;margin:0 auto 48px;width:220px}.interact li{margin-bottom:12px}.google::before,.twitter::before{background-size:18px;content:"";display:inline-block;height:18px;margin-right:6px;vertical-align:sub;width:18px}.google::before{background:transparent url(../assets/7535596a2ace7d84bbbcedfc8be7cde2.svg) 0 0 no-repeat}.twitter::before{background:transparent url(../assets/cc5b37feab537ddbf701e47180b15bda.svg) 0 0 no-repeat}.hero{text-align:center}@media all and (min-width: 63.9385em){.reports-container{align-items:center;display:flex;justify-content:space-between}}.reports-container h2{margin-bottom:24px;min-width:185px;padding:24px 0;width:100%}@media all and (min-width: 47.9385em){.reports-container h2{width:80%}}@media all and (min-width: 63.9385em){.reports-container h2{width:inherit}}.reports-container ul{list-style:none;margin:0;padding:0}@media all and (min-width: 47.9385em){.reports-container ul{margin:0 auto;width:80%}}@media all and (min-width: 63.9385em){.reports-container ul{align-items:center;display:flex;flex-direction:column;margin:inherit;width:inherit}}.reports-container ul li{flex-basis:80%;margin-bottom:24px}@media all and (min-width: 63.9385em){.reports-container .report-year-entry{flex-basis:20%}}.reports-container .report-feature-img img{margin:0 auto}.reports-container .button{max-width:inherit;min-width:185px}.browser-compat-report .main-lead{margin:0 0 24px;max-width:42rem}.browser-compat-report ul{list-style:none;margin:0;padding:0}.browser-compat-report ul li,.browser-compat-report ul a{display:inline-block}.browser-compat-report .button{margin-bottom:12px;max-width:inherit;text-align:center;width:100%}@media all and (min-width: 63.9385em){.browser-compat-report .button{margin-bottom:inherit;text-align:left;width:inherit}}@media all and (min-width: 63.9385em){.two-column-copy{grid-gap:48px;gap:48px;display:flex}.two-column-copy .col-1,.two-column-copy .col-2{flex-basis:50%}}.page-footer-logo{margin-bottom:24px}.page-footer{background-color:#212121;color:#fff;padding:48px 24px}.page-footer .logo{margin:0}.page-footer .content-container{margin:0 auto;max-width:1400px}.page-footer a{color:#fff}.page-footer ul a{display:block;padding:10px 0;width:fit-content}.page-footer .social{align-items:center;display:flex}.page-footer .social h4{font-size:1.25rem;font-weight:normal;margin:inherit;margin-right:10px}.page-footer .social li{display:inline-block;margin-right:10px}.page-footer .social ul{padding-inline-start:6px}.page-footer .social svg{height:18px;vertical-align:sub;width:18px}.page-footer .social svg path{fill:#fff}.page-footer .footer-license{margin:10px 0}@media all and (min-width: 47.9385em){.page-footer .footer-license{border-top:1px solid #eee;margin:50px 0 30px;padding:30px 0 0}}@media all and (min-width: 47.9385em){.page-footer .footer-legal{padding-bottom:20px}}.page-footer .footer-legal li{display:inline-block}.page-footer .footer-legal a{display:block;padding:0 20px 0 0}@supports(display: grid){.content-container{display:grid}.content-container .page-footer-logo,.content-container .link-list-mdn,.content-container .link-list-moz,.content-container .footer-license,.content-container .footer-legal{grid-column:1/3}.content-container .page-footer-logo{grid-row:1/2}.content-container .link-list-mdn{grid-row:2/3}@media all and (min-width: 47.9385em){.content-container .link-list-mdn{grid-column:1/2}}.content-container .link-list-moz{grid-row:3/4}@media all and (min-width: 47.9385em){.content-container .link-list-moz{grid-column:2/3;grid-row:2/3}}.content-container .social-mdn{grid-column:1/2;grid-row:4/5}.content-container .social-moz{grid-column:2/3;grid-row:4/5}.content-container .footer-license{grid-row:5/6}.content-container .footer-legal{grid-row:6/7}} 2 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p28.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Satisfied 10 | 59.8% 11 | 2.2% 12 | 13 | 6 14 | .8% 15 | 16 | 16.3% 17 | 14.9% 18 | Dissatisfied 19 | 20 | V 21 | er 22 | y 23 | Satisfied 24 | 25 | 26 | N 27 | eithe 28 | r 29 | Satisfied no 30 | r 31 | Dissatisfied 32 | 33 | 34 | V 35 | er 36 | y 37 | Dissatisfied 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p14.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 10+ Years 14 | 23.4% 15 | 28.1% 16 | 10.6% 17 | 15.6% 18 | 22.2% 19 | Less Than 1 Year 20 | 21 | 1 22 | - 23 | 2 24 | 25 | Y 26 | ears 27 | 28 | 6-9 Years 29 | 30 | 3 31 | - 32 | 5 33 | 34 | Y 35 | ears 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /public/assets/mdn-web-docs-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/949efa25b9ed61ef9edb5c68936d54a2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/949efa25b9ed61ef9edb5c68936d54a2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/Technologies_Browsers-Issues.svg: -------------------------------------------------------------------------------- 1 | Edge (EdgeHTML)Safari on iOSSafariInternet ExplorerFirefox for DesktopEdge (Chromium)Opera MiniChrome for DesktopNone of the aboveFirefox for AndroidChrome for AndroidSamsung InternetUC BrowserOther browserBaiduQQ Browsern = 6,64533.3%20.7%7.1%66.4%36.8%6.2%4.6%6.5%7.1%3.5%2.8%2.7%3.9%1.8%1.9%2.0% -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/Technologies_Browsers-Supported.svg: -------------------------------------------------------------------------------- 1 | Edge (Chromium)Chrome for AndroidFirefox for DesktopChrome for DesktopSafariInternet ExplorerEdge (EdgeHTML)Firefox for AndroidSafari on iOSOther browserOpera MiniSamsung InternetUC BrowserNone of the aboveBaiduQQ Browsern = 6,64570.0%62.8%60.1%95.9%88.7%31.5%28.3%50.0%53.6%7.4%5.4%3.7%11.3%0.3%1.7%2.2% -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p45.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Broad interoperability across browsers 10 | 11 | Documentation and training 12 | 13 | Support for legacy browsers 14 | 15 | Finding out about the new technology 16 | 17 | 18 | T 19 | ooling support and d 20 | e 21 | v 22 | ecos 23 | y 24 | stem 25 | 26 | 27 | 28 | N 29 | one of the ab 30 | o 31 | v 32 | e 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | A 48 | doption o 49 | f 50 | 51 | N 52 | e 53 | w 54 | 55 | T 56 | echnologies 57 | 58 | 59.2% 59 | 52.8% 60 | 50.7% 61 | 38.9% 62 | 36.4% 63 | 3.4% 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p41.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | N 11 | o pain points 12 | 13 | 14 | Lack of browser/engine adoption/support for a given language feature 15 | 16 | Inability to customize components built into HTML 17 | 18 | The quality of components built into HTML 19 | 20 | 21 | N 22 | ot enoug 23 | h 24 | components built into HTML 25 | 26 | 27 | Lack of interoperability between implementations 28 | 29 | Other 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | HTML - Biggest Pain Points 45 | 35.3% 46 | 31.5% 47 | 26.7% 48 | 21% 49 | 20.3% 50 | 18.6% 51 | 4.8% 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/Top-Ten-Needs_Top-Ten-Needs.svg: -------------------------------------------------------------------------------- 1 | 432159876103. Making a design look/work the same across browsers4. Testing across browsers5. Discovering bugs not caught during testing1. Having to support specific browsers (e.g., IE11) 2. Avoiding or removing a feature that doesn't work across browsers8. Managing user data to comply with laws and regulations9. Supporting multiple frameworks in the same code base10. Understanding and implementing security measuresn = 26,854n = 6,645201920206. Outdated or inaccurate documentation for frameworks and libraries7. Keeping up with a large number of new and existing tools or frameworks -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2020/Top-Ten-Needs_Overall-Satisfaction.svg: -------------------------------------------------------------------------------- 1 | 432159876103. Making a design look/work the same across browsers4. Testing across browsers5. Discovering bugs not caught during testing1. Having to support specific browsers (e.g., IE11) 2. Avoiding or removing a feature that doesn't work across browsers8. Managing user data to comply with laws and regulations9. Supporting multiple frameworks in the same code base10. Understanding and implementing security measuresn = 26,854n = 6,645201920206. Outdated or inaccurate documentation for frameworks and libraries7. Keeping up with a large number of new and existing tools or frameworks -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p42.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Challenges creating the layout specified 10 | Lack of browser/engine adoption/support for a given language feature 11 | 12 | Lack of interoperability between implementations 13 | 14 | Inadequate progressive enhancement strategy 15 | 16 | 17 | N 18 | o pain points 19 | 20 | 21 | Browser updates causing things to break 22 | 23 | Lack of debug tooling support (browser dev tools) 24 | 25 | Lack of performance (speed and size) profiling support 26 | 27 | Lack of build tooling support (in Babel/webpack/uglifyjs/etc.) 28 | 29 | Other 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | CSS - Biggest Pain Points 51 | 44.4% 52 | 43% 53 | 26.2% 54 | 20.8% 55 | 15.8% 56 | 15.8% 57 | 15.5% 58 | 10.4% 59 | 60 | 8 61 | .5% 62 | 63 | 64 | 6 65 | .4% 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p43.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Lack of performance (speed and size) profiling support (browser dev tools or IDE integration) 10 | 11 | Lack of interoperability between implementations 12 | 13 | Lack of debug tooling support (browser dev tools or IDE integration) 14 | 15 | Lack of build tooling support (in Emscripten/Babel/webpack/etc.) 16 | 17 | Lack of browser/engine support for a given language feature 18 | 19 | Inadequate performance (speed and size), particularly on low-end devices 20 | 21 | Browser updates causing things to break 22 | 23 | 24 | N 25 | o pain points 26 | 27 | 28 | Other 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | W 49 | e 50 | b 51 | Assemb 52 | l 53 | y 54 | - Biggest 55 | P 56 | ain 57 | P 58 | oints 59 | 60 | 51.4% 61 | 44.5% 62 | 43.9% 63 | 29.7% 64 | 22.5% 65 | 21.8% 66 | 19.1% 67 | 18.8% 68 | 14.2% 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /public/reports/assets/images/web-developer-needs-assessment-2019/p40.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Lack of browser/engine adoption/support for a given language feature 10 | 11 | Inadequate performance (speed and size), particularly on low-end devices 12 | 13 | Browser updates causing things to break 14 | 15 | Lack of interoperability between implementations 16 | 17 | Lack of debug tooling support (browser dev tools) 18 | 19 | Lack of performance (speed and size) profiling support 20 | 21 | Lack of internationalization APIs or localization support 22 | 23 | Lack of build tooling support (in Babel/webpack/uglifyjs/etc.) 24 | 25 | 26 | N 27 | o pain points 28 | 29 | 30 | Other 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | J 53 | a 54 | v 55 | aScript - Biggest 56 | P 57 | ain 58 | P 59 | oints 60 | 61 | 37.4% 62 | 31% 63 | 20.2% 64 | 19.4% 65 | 19.1% 66 | 18.2% 67 | 18.1% 68 | 69 | 1 70 | 7% 71 | 72 | 16.7% 73 | 10.7% 74 | 75 | 76 | 77 | --------------------------------------------------------------------------------