From 06a1ef1cdfea75a9aa9092fd7211352e32dd1a9e Mon Sep 17 00:00:00 2001 From: Sacha Greif Date: Fri, 5 Apr 2024 07:16:21 +0900 Subject: [PATCH] add data --- .../accessibility_pain_points.json | 332 +---- .../data/content/content_pain_points.json | 265 +--- .../results/data/forms/forms_pain_points.json | 574 +------- .../interactivity_pain_points.json | 565 +------ .../mobile_web_apps_pain_points.json | 298 +--- .../making_web_components_pain_points.json | 354 +---- .../using_web_components_pain_points.json | 188 +-- .../web_components_main_features.json | 1293 +++++++++++++++++ .../accessibility_pain_points.graphql | 2 +- .../content/content_pain_points.graphql | 2 +- .../queries/forms/forms_pain_points.graphql | 2 +- .../interactivity_pain_points.graphql | 2 +- .../mobile_web_apps_pain_points.graphql | 2 +- .../making_web_components_pain_points.graphql | 2 +- .../using_web_components_pain_points.graphql | 2 +- .../web_components_main_features.graphql | 65 + 16 files changed, 1486 insertions(+), 2462 deletions(-) create mode 100644 state_of_html/html2023/results/data/web_components/web_components_main_features.json create mode 100644 state_of_html/html2023/results/queries/web_components/web_components_main_features.graphql diff --git a/state_of_html/html2023/results/data/accessibility/accessibility_pain_points.json b/state_of_html/html2023/results/data/accessibility/accessibility_pain_points.json index 03630a9e..fbea379f 100644 --- a/state_of_html/html2023/results/data/accessibility/accessibility_pain_points.json +++ b/state_of_html/html2023/results/data/accessibility/accessibility_pain_points.json @@ -19,16 +19,6 @@ "percentageQuestion": 9.7, "percentageSurvey": 0.87, "groupedBuckets": [ - { - "count": 46, - "id": "lack_of_education", - "percentageQuestion": 2.45, - "percentageSurvey": 0.22, - "entity": { - "id": "lack_of_education", - "type": "default" - } - }, { "count": 136, "id": "difficulty", @@ -38,6 +28,16 @@ "id": "difficulty", "type": "default" } + }, + { + "count": 46, + "id": "lack_of_education", + "percentageQuestion": 2.45, + "percentageSurvey": 0.22, + "entity": { + "id": "lack_of_education", + "type": "default" + } } ] }, @@ -59,6 +59,16 @@ "percentageQuestion": 8.21, "percentageSurvey": 0.74, "groupedBuckets": [ + { + "count": 16, + "id": "lack_of_client_demand", + "percentageQuestion": 0.85, + "percentageSurvey": 0.08, + "entity": { + "id": "lack_of_client_demand", + "type": "default" + } + }, { "count": 111, "id": "low_priority", @@ -78,16 +88,6 @@ "id": "low_budget", "type": "default" } - }, - { - "count": 16, - "id": "lack_of_client_demand", - "percentageQuestion": 0.85, - "percentageSurvey": 0.08, - "entity": { - "id": "lack_of_client_demand", - "type": "default" - } } ] }, @@ -98,52 +98,52 @@ "percentageSurvey": 0.61, "groupedBuckets": [ { - "count": 19, - "id": "screen_readers_limitations", - "percentageQuestion": 1.01, - "percentageSurvey": 0.09, + "count": 20, + "id": "screen_readers_learning_curve", + "percentageQuestion": 1.07, + "percentageSurvey": 0.1, "entity": { - "id": "screen_readers_limitations", + "id": "screen_readers_learning_curve", "type": "default" } }, { - "count": 58, - "id": "screen_readers_inconsistencies", - "percentageQuestion": 3.09, - "percentageSurvey": 0.28, + "count": 5, + "id": "screen_readers_hiding_content", + "percentageQuestion": 0.27, + "percentageSurvey": 0.02, "entity": { - "id": "screen_readers_inconsistencies", + "id": "screen_readers_hiding_content", "type": "default" } }, { - "count": 25, - "id": "screen_readers_access", - "percentageQuestion": 1.33, - "percentageSurvey": 0.12, + "count": 19, + "id": "screen_readers_limitations", + "percentageQuestion": 1.01, + "percentageSurvey": 0.09, "entity": { - "id": "screen_readers_access", + "id": "screen_readers_limitations", "type": "default" } }, { - "count": 20, - "id": "screen_readers_learning_curve", - "percentageQuestion": 1.07, - "percentageSurvey": 0.1, + "count": 25, + "id": "screen_readers_access", + "percentageQuestion": 1.33, + "percentageSurvey": 0.12, "entity": { - "id": "screen_readers_learning_curve", + "id": "screen_readers_access", "type": "default" } }, { - "count": 5, - "id": "screen_readers_hiding_content", - "percentageQuestion": 0.27, - "percentageSurvey": 0.02, + "count": 58, + "id": "screen_readers_inconsistencies", + "percentageQuestion": 3.09, + "percentageSurvey": 0.28, "entity": { - "id": "screen_readers_hiding_content", + "id": "screen_readers_inconsistencies", "type": "default" } } @@ -222,16 +222,6 @@ "percentageQuestion": 2.92, "percentageSurvey": 0.27, "groupedBuckets": [ - { - "count": 7, - "id": "carousels", - "percentageQuestion": 0.37, - "percentageSurvey": 0.03, - "entity": { - "id": "carousels", - "type": "default" - } - }, { "count": 10, "id": "tab_index", @@ -261,237 +251,19 @@ "id": "automated_testing", "type": "default" } - } - ] - }, - { - "count": 30, - "id": "lack_of_knowledge", - "percentageQuestion": 1.6, - "percentageSurvey": 0.14, - "entity": { - "id": "lack_of_knowledge", - "type": "default" - } - }, - { - "count": 29, - "id": "build_tools", - "percentageQuestion": 1.55, - "percentageSurvey": 0.14, - "entity": { - "id": "build_tools", - "type": "default" - } - }, - { - "count": 28, - "id": "tooling", - "percentageQuestion": 1.49, - "percentageSurvey": 0.13, - "entity": { - "name": "Tooling", - "nameClean": "Tooling", - "id": "tooling", - "type": "default" - } - }, - { - "count": 28, - "id": "wcag_issues", - "percentageQuestion": 1.49, - "percentageSurvey": 0.13, - "groupedBuckets": [ - { - "count": 13, - "id": "wcag_other_issues", - "percentageQuestion": 0.69, - "percentageSurvey": 0.06, - "entity": { - "id": "wcag_other_issues", - "type": "default" - } }, { - "count": 9, - "id": "wcag_learning_curve", - "percentageQuestion": 0.48, - "percentageSurvey": 0.04, - "entity": { - "id": "wcag_learning_curve", - "type": "default" - } - }, - { - "count": 6, - "id": "wcag_contrast_issues", - "percentageQuestion": 0.32, + "count": 7, + "id": "carousels", + "percentageQuestion": 0.37, "percentageSurvey": 0.03, "entity": { - "id": "wcag_contrast_issues", - "type": "default" - } - } - ] - }, - { - "count": 23, - "id": "lack_of_awareness", - "percentageQuestion": 1.23, - "percentageSurvey": 0.11, - "entity": { - "id": "lack_of_awareness", - "type": "default" - } - }, - { - "count": 21, - "id": "learning_curve", - "percentageQuestion": 1.12, - "percentageSurvey": 0.1, - "entity": { - "id": "learning_curve", - "type": "default" - } - }, - { - "count": 19, - "id": "a11y_design_issues", - "percentageQuestion": 1.02, - "percentageSurvey": 0.09, - "groupedBuckets": [ - { - "count": 17, - "id": "lack_of_designer_awareness", - "percentageQuestion": 0.91, - "percentageSurvey": 0.08, - "entity": { - "id": "lack_of_designer_awareness", - "type": "default" - } - }, - { - "count": 2, - "id": "limits_design", - "percentageQuestion": 0.11, - "percentageSurvey": 0.01, - "entity": { - "id": "limits_design", + "id": "carousels", "type": "default" } } ] }, - { - "count": 18, - "id": "configuration", - "percentageQuestion": 0.96, - "percentageSurvey": 0.09, - "entity": { - "description": "Hard to configure", - "descriptionClean": "Hard to configure", - "id": "configuration", - "type": "default" - } - }, - { - "count": 15, - "id": "clunkiness", - "percentageQuestion": 0.8, - "percentageSurvey": 0.07, - "entity": { - "id": "clunkiness", - "type": "default" - } - }, - { - "count": 15, - "id": "state_management", - "percentageQuestion": 0.8, - "percentageSurvey": 0.07, - "entity": { - "id": "state_management", - "type": "default" - } - }, - { - "count": 13, - "id": "dialog_element", - "percentageQuestion": 0.69, - "percentageSurvey": 0.06, - "entity": { - "name": "``", - "nameHtml": "<dialog>", - "nameClean": "dialog", - "description": "For dialog boxes or other interactive components, such as a dismissible alerts, or subwindows.", - "descriptionClean": "For dialog boxes or other interactive components, such as a dismissible alerts, or subwindows.", - "id": "dialog_element", - "type": "feature", - "example": { - "language": "html", - "code": "\n\t
\n\t\tAre you sure?\n\t\t\n\t\t\n\t
\n", - "codeHighlighted": "<dialog id="confirm">\n\t<form method="dialog">\n\t\tAre you sure?\n\t\t<button value="1">Yes</button>\n\t\t<button value="0">No</button>\n\t</form>\n</dialog>" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" - }, - "resources": [ - { - "url": "https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element", - "title": "HTML Standard" - } - ] - } - }, - { - "count": 13, - "id": "popover_api", - "percentageQuestion": 0.69, - "percentageSurvey": 0.06, - "entity": { - "name": "Popover API", - "nameClean": "Popover API", - "description": "HTML syntax and JS API facilitating popovers such as overlays, popups, menus etc.", - "descriptionClean": "HTML syntax and JS API facilitating popovers such as overlays, popups, menus etc.", - "id": "popover_api", - "type": "feature", - "example": { - "language": "html", - "code": "\n
Popover content
", - "codeHighlighted": "<button popovertarget="foo">Toggle the popover</button>\n<div id="foo" popover>Popover content</div>" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/API/Popover_API" - }, - "caniuse": { - "url": "https://caniuse.com/mdn-html_global_attributes_popover" - }, - "resources": [ - { - "url": "https://html.spec.whatwg.org/multipage/popover.html#dom-popover", - "title": "HTML Standard" - }, - { - "url": "https://github.com/w3ctag/design-reviews/issues/743", - "title": "The Popover API (previously Popup) · Issue #743 · w3ctag/design-reviews · GitHub" - }, - { - "url": "https://open-ui.org/components/popover.research.explainer/", - "title": "Popover API (Explainer) | Open UI" - } - ] - } - }, - { - "count": 12, - "id": "error_handling", - "percentageQuestion": 0.64, - "percentageSurvey": 0.06, - "entity": { - "id": "error_handling", - "type": "default" - } - }, { "count": 102, "id": "cutoff_answers", @@ -503,6 +275,12 @@ "id": "other_answers", "percentageQuestion": 70.93, "percentageSurvey": 6.36 + }, + { + "count": 264, + "id": "overlimit_answers", + "percentageQuestion": 14.08, + "percentageSurvey": 1.25 } ] } diff --git a/state_of_html/html2023/results/data/content/content_pain_points.json b/state_of_html/html2023/results/data/content/content_pain_points.json index 0f1c9705..bc7078cd 100644 --- a/state_of_html/html2023/results/data/content/content_pain_points.json +++ b/state_of_html/html2023/results/data/content/content_pain_points.json @@ -122,265 +122,6 @@ "type": "default" } }, - { - "count": 58, - "id": "cors", - "percentageQuestion": 4.47, - "percentageSurvey": 0.28, - "entity": { - "name": "CORS", - "nameClean": "CORS", - "description": "Opt-in to allowing requests from different origins.", - "descriptionClean": "Opt-in to allowing requests from different origins.", - "id": "cors", - "type": "feature", - "example": { - "language": "http", - "code": "Access-Control-Allow-Origin: *\nAccess-Control-Allow-Methods: POST, GET, OPTIONS", - "codeHighlighted": "Access-Control-Allow-Origin: *\nAccess-Control-Allow-Methods: POST, GET, OPTIONS" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" - }, - "resources": [ - { - "url": "https://fetch.spec.whatwg.org/#http-access-control-allow-origin", - "title": "Fetch Standard" - } - ] - } - }, - { - "count": 48, - "id": "styling", - "percentageQuestion": 3.7, - "percentageSurvey": 0.23, - "entity": { - "id": "styling", - "type": "default" - } - }, - { - "count": 44, - "id": "performance", - "percentageQuestion": 3.39, - "percentageSurvey": 0.21, - "entity": { - "id": "performance", - "type": "default" - } - }, - { - "count": 38, - "id": "image_dimension_management", - "percentageQuestion": 2.93, - "percentageSurvey": 0.18, - "entity": { - "id": "image_dimension_management", - "type": "default" - } - }, - { - "count": 36, - "id": "date", - "percentageQuestion": 2.77, - "percentageSurvey": 0.17, - "entity": { - "description": "Handling dates and times", - "descriptionClean": "Handling dates and times", - "id": "date", - "type": "default" - } - }, - { - "count": 34, - "id": "complexity", - "percentageQuestion": 2.62, - "percentageSurvey": 0.16, - "entity": { - "description": "Too much complexity", - "descriptionClean": "Too much complexity", - "id": "complexity", - "type": "default" - } - }, - { - "count": 32, - "id": "accessibility", - "percentageQuestion": 2.47, - "percentageSurvey": 0.15, - "entity": { - "description": "Accessibility improvements", - "descriptionClean": "Accessibility improvements", - "id": "accessibility", - "type": "default" - } - }, - { - "count": 32, - "id": "styling_issues", - "percentageQuestion": 2.47, - "percentageSurvey": 0.15, - "entity": { - "id": "styling_issues", - "type": "default" - } - }, - { - "count": 24, - "id": "clunkiness", - "percentageQuestion": 1.85, - "percentageSurvey": 0.11, - "entity": { - "id": "clunkiness", - "type": "default" - } - }, - { - "count": 24, - "id": "documentation", - "percentageQuestion": 1.85, - "percentageSurvey": 0.11, - "entity": { - "id": "documentation", - "type": "default" - } - }, - { - "count": 24, - "id": "time_zones", - "percentageQuestion": 1.85, - "percentageSurvey": 0.11, - "entity": { - "id": "time_zones", - "type": "default" - } - }, - { - "count": 23, - "id": "error_handling", - "percentageQuestion": 1.77, - "percentageSurvey": 0.11, - "entity": { - "id": "error_handling", - "type": "default" - } - }, - { - "count": 22, - "id": "a11y_educational_issues", - "percentageQuestion": 1.69, - "percentageSurvey": 0.11, - "groupedBuckets": [ - { - "count": 22, - "id": "difficulty", - "percentageQuestion": 1.69, - "percentageSurvey": 0.11, - "entity": { - "id": "difficulty", - "type": "default" - } - } - ] - }, - { - "count": 19, - "id": "static_typing", - "percentageQuestion": 1.46, - "percentageSurvey": 0.09, - "entity": { - "description": "Lack of native typing", - "descriptionClean": "Lack of native typing", - "id": "static_typing", - "type": "default" - } - }, - { - "count": 17, - "id": "responsive_design", - "percentageQuestion": 1.31, - "percentageSurvey": 0.08, - "entity": { - "id": "responsive_design", - "type": "default" - } - }, - { - "count": 15, - "id": "frustration_with_frameworks", - "percentageQuestion": 1.16, - "percentageSurvey": 0.07, - "entity": { - "id": "frustration_with_frameworks", - "type": "default" - } - }, - { - "count": 13, - "id": "file_input", - "percentageQuestion": 1, - "percentageSurvey": 0.06, - "entity": { - "name": "``\n", - "nameHtml": "<input type=\"file\">\n", - "nameClean": "input type=\"file\"", - "id": "file_input", - "type": "default" - } - }, - { - "count": 11, - "id": "javascript", - "percentageQuestion": 0.85, - "percentageSurvey": 0.05, - "entity": { - "name": "JavaScript", - "nameClean": "JavaScript", - "id": "javascript", - "type": "default", - "homepage": { - "url": "https://www.javascript.com/" - } - } - }, - { - "count": 11, - "id": "safari", - "percentageQuestion": 0.85, - "percentageSurvey": 0.05, - "entity": { - "name": "Safari", - "nameClean": "Safari", - "id": "safari", - "type": "default", - "homepage": { - "url": "https://www.apple.com/safari/" - } - } - }, - { - "count": 11, - "id": "too_many_choices", - "percentageQuestion": 0.85, - "percentageSurvey": 0.05, - "entity": { - "id": "too_many_choices", - "type": "default" - } - }, - { - "count": 10, - "id": "testing", - "percentageQuestion": 0.77, - "percentageSurvey": 0.05, - "entity": { - "name": "Testing", - "nameClean": "Testing", - "id": "testing", - "type": "default" - } - }, { "count": 326, "id": "cutoff_answers", @@ -392,6 +133,12 @@ "id": "other_answers", "percentageQuestion": 29.97, "percentageSurvey": 1.86 + }, + { + "count": 546, + "id": "overlimit_answers", + "percentageQuestion": 42.08, + "percentageSurvey": 2.58 } ] } diff --git a/state_of_html/html2023/results/data/forms/forms_pain_points.json b/state_of_html/html2023/results/data/forms/forms_pain_points.json index cbd6782b..5c2b2457 100644 --- a/state_of_html/html2023/results/data/forms/forms_pain_points.json +++ b/state_of_html/html2023/results/data/forms/forms_pain_points.json @@ -122,574 +122,6 @@ "type": "default" } }, - { - "count": 225, - "id": "number_input", - "percentageQuestion": 3.36, - "percentageSurvey": 1.08, - "entity": { - "name": "``\n", - "nameHtml": "<input type=\"number\">\n", - "nameClean": "input type=\"number\"", - "id": "number_input", - "type": "default" - } - }, - { - "count": 188, - "id": "checkbox_input", - "percentageQuestion": 2.81, - "percentageSurvey": 0.9, - "entity": { - "name": "``\n", - "nameHtml": "<input type=\"checkbox\">\n", - "nameClean": "input type=\"checkbox\"", - "id": "checkbox_input", - "type": "default" - } - }, - { - "count": 185, - "id": "file_input", - "percentageQuestion": 2.76, - "percentageSurvey": 0.88, - "entity": { - "name": "``\n", - "nameHtml": "<input type=\"file\">\n", - "nameClean": "input type=\"file\"", - "id": "file_input", - "type": "default" - } - }, - { - "count": 170, - "id": "input_type_date", - "percentageQuestion": 2.54, - "percentageSurvey": 0.81, - "entity": { - "name": "``\n", - "nameHtml": "<input type=\"date\">\n", - "nameClean": "input type=\"date\"", - "id": "input_type_date", - "type": "feature" - } - }, - { - "count": 137, - "id": "customization", - "percentageQuestion": 2.04, - "percentageSurvey": 0.66, - "entity": { - "id": "customization", - "type": "default" - } - }, - { - "count": 132, - "id": "select_element", - "percentageQuestion": 1.97, - "percentageSurvey": 0.63, - "entity": { - "name": "``\n", - "nameHtml": "<input type=\"datetime-local\">\n", - "nameClean": "input type=\"datetime-local\"", - "id": "input_type_datetime_locale", - "type": "feature" - } - }, - { - "count": 108, - "id": "selectlist_element", - "percentageQuestion": 1.61, - "percentageSurvey": 0.52, - "entity": { - "name": "``", - "nameHtml": "<selectlist>", - "nameClean": "selectlist", - "description": "Stylable, customizable dropdown control. Previously ``.\n", - "descriptionHtml": "Stylable, customizable dropdown control. Previously <selectmenu>.\n", - "descriptionClean": "Stylable, customizable dropdown control. Previously selectmenu.", - "id": "selectlist_element", - "type": "feature", - "example": { - "language": "html", - "code": "\n\t\n\t\n\t\n", - "codeHighlighted": "<selectlist>\n\t<option>Option 1</option>\n\t<option>Option 2</option>\n\t<option>Option 3</option>\n</selectlist>" - }, - "resources": [ - { - "url": "https://open-ui.org/components/selectmenu/", - "title": "Selectmenu Element (Explainer) | Open UI" - }, - { - "url": "https://web.dev/state-of-css-2022/#customizing-select-elements", - "title": "State of CSS 2022" - }, - { - "url": "https://css-tricks.com/the-selectmenu-element/", - "title": "The selectmenu HTML Tag | CSS-Tricks - CSS-Tricks" - }, - { - "url": "https://www.smashingmagazine.com/2023/06/advanced-form-control-styling-selectmenu-anchoring-api/", - "title": "Advanced Form Control Styling With Selectmenu And Anchoring API — Smashing Magazine" - }, - { - "url": "https://hidde.blog/custom-select-with-selectmenu/", - "title": "Two levels of customising \n" - }, - { - "url": "https://microsoftedge.github.io/Demos/selectmenu/", - "title": "Open UI's selectmenu demos" - } - ] - } - }, - { - "count": 107, - "id": "datalist_element", - "percentageQuestion": 1.6, - "percentageSurvey": 0.51, - "entity": { - "name": "``", - "nameHtml": "<datalist>", - "nameClean": "datalist", - "description": "Method of providing a list of presets for a user to select in a form control, while still allowing custom options.", - "descriptionClean": "Method of providing a list of presets for a user to select in a form control, while still allowing custom options.", - "id": "datalist_element", - "type": "feature", - "example": { - "language": "html", - "code": "\n\n \n ...\n", - "codeHighlighted": "<input name="country" list="countries">\n<datalist id="countries">\n <option>Afghanistan</option>\n ...\n</datalist>" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist" - }, - "caniuse": { - "url": "https://caniuse.com/datalist" - }, - "resources": [ - { - "url": "https://html.spec.whatwg.org/multipage/form-elements.html#the-datalist-element", - "title": "The datalist element" - } - ] - } - }, - { - "count": 103, - "id": "form_validation", - "percentageQuestion": 1.54, - "percentageSurvey": 0.49, - "entity": { - "name": "Form validation", - "nameClean": "Form validation", - "description": "Set of HTML attributes and JS APIs to facilitate client-side form validation (``, ``, `input. setCustomValidity(msg)` etc)", - "descriptionHtml": "Set of HTML attributes and JS APIs to facilitate client-side form validation (<input pattern>, <input required>, input. setCustomValidity(msg) etc)", - "descriptionClean": "Set of HTML attributes and JS APIs to facilitate client-side form validation (input pattern, input required, input. setCustomValidity(msg) etc)", - "id": "form_validation", - "type": "feature", - "example": { - "language": "html", - "code": "", - "codeHighlighted": "<input id="zip" pattern="[0-9]{5}" title="5 digits" required />" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation" - }, - "resources": [ - { - "url": "https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api", - "title": "HTML Standard" - } - ] - } - }, - { - "count": 99, - "id": "date_pickers", - "percentageQuestion": 1.48, - "percentageSurvey": 0.47, - "entity": { - "id": "date_pickers", - "type": "default" - } - }, - { - "count": 95, - "id": "colorpickers", - "percentageQuestion": 1.42, - "percentageSurvey": 0.45, - "entity": { - "id": "colorpickers", - "type": "default" - } - }, - { - "count": 87, - "id": "formdata", - "percentageQuestion": 1.3, - "percentageSurvey": 0.42, - "entity": { - "name": "FormData API", - "nameClean": "FormData API", - "description": "API to more easily extract and manipulate form data values via JS", - "descriptionClean": "API to more easily extract and manipulate form data values via JS", - "id": "formdata", - "type": "feature", - "example": { - "language": "js", - "code": "let fd = new FormData(form);\nlet data = JSON.stringify(Object.fromEntries(fd));\n", - "codeHighlighted": "let fd = new FormData(form);\nlet data = JSON.stringify(Object.fromEntries(fd));" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData" - }, - "caniuse": { - "url": "https://caniuse.com/mdn-api_formdata](https://caniuse.com/mdn-api_formdata" - }, - "resources": [ - { - "url": "https://xhr.spec.whatwg.org/#dom-formdata", - "title": "Interface FormData" - } - ] - } - }, - { - "count": 75, - "id": "safari", - "percentageQuestion": 1.12, - "percentageSurvey": 0.36, - "entity": { - "name": "Safari", - "nameClean": "Safari", - "id": "safari", - "type": "default", - "homepage": { - "url": "https://www.apple.com/safari/" - } - } - }, - { - "count": 68, - "id": "input_type_number", - "percentageQuestion": 1.01, - "percentageSurvey": 0.33, - "entity": { - "name": "``\n", - "nameHtml": "<input type=\"number\">\n", - "nameClean": "input type=\"number\"", - "id": "input_type_number", - "type": "feature" - } - }, - { - "count": 57, - "id": "complexity", - "percentageQuestion": 0.85, - "percentageSurvey": 0.27, - "entity": { - "description": "Too much complexity", - "descriptionClean": "Too much complexity", - "id": "complexity", - "type": "default" - } - }, - { - "count": 53, - "id": "state_management", - "percentageQuestion": 0.79, - "percentageSurvey": 0.25, - "entity": { - "id": "state_management", - "type": "default" - } - }, - { - "count": 46, - "id": "input_type_file", - "percentageQuestion": 0.69, - "percentageSurvey": 0.22, - "entity": { - "name": "``\n", - "nameHtml": "<input type=\"file\">\n", - "nameClean": "input type=\"file\"", - "id": "input_type_file", - "type": "feature" - } - }, - { - "count": 45, - "id": "javascript_form_handling", - "percentageQuestion": 0.67, - "percentageSurvey": 0.22, - "entity": { - "id": "javascript_form_handling", - "type": "default" - } - }, - { - "count": 32, - "id": "popover_api", - "percentageQuestion": 0.48, - "percentageSurvey": 0.15, - "entity": { - "name": "Popover API", - "nameClean": "Popover API", - "description": "HTML syntax and JS API facilitating popovers such as overlays, popups, menus etc.", - "descriptionClean": "HTML syntax and JS API facilitating popovers such as overlays, popups, menus etc.", - "id": "popover_api", - "type": "feature", - "example": { - "language": "html", - "code": "\n
Popover content
", - "codeHighlighted": "<button popovertarget="foo">Toggle the popover</button>\n<div id="foo" popover>Popover content</div>" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/API/Popover_API" - }, - "caniuse": { - "url": "https://caniuse.com/mdn-html_global_attributes_popover" - }, - "resources": [ - { - "url": "https://html.spec.whatwg.org/multipage/popover.html#dom-popover", - "title": "HTML Standard" - }, - { - "url": "https://github.com/w3ctag/design-reviews/issues/743", - "title": "The Popover API (previously Popup) · Issue #743 · w3ctag/design-reviews · GitHub" - }, - { - "url": "https://open-ui.org/components/popover.research.explainer/", - "title": "Popover API (Explainer) | Open UI" - } - ] - } - }, - { - "count": 30, - "id": "input_element", - "percentageQuestion": 0.45, - "percentageSurvey": 0.14, - "entity": { - "name": "``\n", - "nameHtml": "<input>\n", - "nameClean": "input", - "id": "input_element", - "type": "feature" - } - }, - { - "count": 28, - "id": "aria", - "percentageQuestion": 0.42, - "percentageSurvey": 0.13, - "entity": { - "name": "ARIA", - "nameClean": "ARIA", - "description": "`role` and `aria-*` attributes", - "descriptionHtml": "role and aria-* attributes", - "descriptionClean": "role and aria-* attributes", - "id": "aria", - "type": "feature", - "example": { - "language": "html", - "code": "
Prices
\n
\n\t\n
", - "codeHighlighted": "<div id="tab1" aria-controls="panel1" role="tab">Prices</div>\n<div id="panel1" class="panel" aria-labelledby="tab1" role="tabpanel">\n\t<!-- tab content -->\n</div>" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes" - } - } - }, - { - "count": 28, - "id": "shadow_dom", - "percentageQuestion": 0.42, - "percentageSurvey": 0.13, - "entity": { - "name": "Shadow DOM", - "nameClean": "Shadow DOM", - "description": "Encapsulate elements not visible from the outside, and style them with CSS not affecting the rest of the page.", - "descriptionClean": "Encapsulate elements not visible from the outside, and style them with CSS not affecting the rest of the page.", - "id": "shadow_dom", - "type": "feature", - "example": { - "language": "js", - "code": "this.shadowRoot = this.attachShadow({mode: \"open\"});", - "codeHighlighted": "this.shadowRoot = this.attachShadow({mode: "open"});" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM" - } - } - }, - { - "count": 22, - "id": "dialog_element", - "percentageQuestion": 0.33, - "percentageSurvey": 0.11, - "entity": { - "name": "``", - "nameHtml": "<dialog>", - "nameClean": "dialog", - "description": "For dialog boxes or other interactive components, such as a dismissible alerts, or subwindows.", - "descriptionClean": "For dialog boxes or other interactive components, such as a dismissible alerts, or subwindows.", - "id": "dialog_element", - "type": "feature", - "example": { - "language": "html", - "code": "\n\t
\n\t\tAre you sure?\n\t\t\n\t\t\n\t
\n", - "codeHighlighted": "<dialog id="confirm">\n\t<form method="dialog">\n\t\tAre you sure?\n\t\t<button value="1">Yes</button>\n\t\t<button value="0">No</button>\n\t</form>\n</dialog>" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" - }, - "resources": [ - { - "url": "https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element", - "title": "HTML Standard" - } - ] - } - }, - { - "count": 21, - "id": "frustration_with_frameworks", - "percentageQuestion": 0.31, - "percentageSurvey": 0.1, - "entity": { - "id": "frustration_with_frameworks", - "type": "default" - } - }, - { - "count": 21, - "id": "js_requirement", - "percentageQuestion": 0.31, - "percentageSurvey": 0.1, - "entity": { - "id": "js_requirement", - "type": "default" - } - }, - { - "count": 16, - "id": "clunkiness", - "percentageQuestion": 0.24, - "percentageSurvey": 0.08, - "entity": { - "id": "clunkiness", - "type": "default" - } - }, - { - "count": 14, - "id": "pattern_attribute", - "percentageQuestion": 0.21, - "percentageSurvey": 0.07, - "entity": { - "name": "`pattern` attribute\n", - "nameHtml": "pattern attribute\n", - "nameClean": "pattern attribute", - "id": "pattern_attribute", - "type": "feature" - } - }, - { - "count": 13, - "id": "build_tools", - "percentageQuestion": 0.19, - "percentageSurvey": 0.06, - "entity": { - "id": "build_tools", - "type": "default" - } - }, - { - "count": 12, - "id": "animations", - "percentageQuestion": 0.18, - "percentageSurvey": 0.06, - "entity": { - "id": "animations", - "type": "feature", - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations" - }, - "caniuse": { - "url": "https://caniuse.com/css-animation" - } - } - }, - { - "count": 11, - "id": "dom_manipulation", - "percentageQuestion": 0.16, - "percentageSurvey": 0.05, - "entity": { - "id": "dom_manipulation", - "type": "default" - } - }, - { - "count": 11, - "id": "security", - "percentageQuestion": 0.16, - "percentageSurvey": 0.05, - "entity": { - "id": "security", - "type": "default" - } - }, - { - "count": 10, - "id": "documentation", - "percentageQuestion": 0.15, - "percentageSurvey": 0.05, - "entity": { - "id": "documentation", - "type": "default" - } - }, - { - "count": 10, - "id": "input_type_color", - "percentageQuestion": 0.15, - "percentageSurvey": 0.05, - "entity": { - "name": "``\n", - "nameHtml": "<input type=\"color\">\n", - "nameClean": "input type=\"color\"", - "id": "input_type_color", - "type": "feature" - } - }, - { - "count": 10, - "id": "prefers_frameworks", - "percentageQuestion": 0.15, - "percentageSurvey": 0.05, - "entity": { - "id": "prefers_frameworks", - "type": "default" - } - }, { "count": 175, "id": "cutoff_answers", @@ -701,6 +133,12 @@ "id": "other_answers", "percentageQuestion": 63.59, "percentageSurvey": 20.39 + }, + { + "count": 2377, + "id": "overlimit_answers", + "percentageQuestion": 35.48, + "percentageSurvey": 11.37 } ] } diff --git a/state_of_html/html2023/results/data/interactivity/interactivity_pain_points.json b/state_of_html/html2023/results/data/interactivity/interactivity_pain_points.json index 2928944a..bb43ff7e 100644 --- a/state_of_html/html2023/results/data/interactivity/interactivity_pain_points.json +++ b/state_of_html/html2023/results/data/interactivity/interactivity_pain_points.json @@ -147,565 +147,6 @@ "type": "default" } }, - { - "count": 78, - "id": "complexity", - "percentageQuestion": 3.24, - "percentageSurvey": 0.37, - "entity": { - "description": "Too much complexity", - "descriptionClean": "Too much complexity", - "id": "complexity", - "type": "default" - } - }, - { - "count": 74, - "id": "html_imports", - "percentageQuestion": 3.07, - "percentageSurvey": 0.35, - "entity": { - "id": "html_imports", - "type": "default" - } - }, - { - "count": 67, - "id": "lack_of_declarative_apis", - "percentageQuestion": 2.78, - "percentageSurvey": 0.32, - "entity": { - "id": "lack_of_declarative_apis", - "type": "default" - } - }, - { - "count": 65, - "id": "js_requirement", - "percentageQuestion": 2.7, - "percentageSurvey": 0.31, - "entity": { - "id": "js_requirement", - "type": "default" - } - }, - { - "count": 63, - "id": "popover_api", - "percentageQuestion": 2.61, - "percentageSurvey": 0.3, - "entity": { - "name": "Popover API", - "nameClean": "Popover API", - "description": "HTML syntax and JS API facilitating popovers such as overlays, popups, menus etc.", - "descriptionClean": "HTML syntax and JS API facilitating popovers such as overlays, popups, menus etc.", - "id": "popover_api", - "type": "feature", - "example": { - "language": "html", - "code": "\n
Popover content
", - "codeHighlighted": "<button popovertarget="foo">Toggle the popover</button>\n<div id="foo" popover>Popover content</div>" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/API/Popover_API" - }, - "caniuse": { - "url": "https://caniuse.com/mdn-html_global_attributes_popover" - }, - "resources": [ - { - "url": "https://html.spec.whatwg.org/multipage/popover.html#dom-popover", - "title": "HTML Standard" - }, - { - "url": "https://github.com/w3ctag/design-reviews/issues/743", - "title": "The Popover API (previously Popup) · Issue #743 · w3ctag/design-reviews · GitHub" - }, - { - "url": "https://open-ui.org/components/popover.research.explainer/", - "title": "Popover API (Explainer) | Open UI" - } - ] - } - }, - { - "count": 59, - "id": "verbosity", - "percentageQuestion": 2.45, - "percentageSurvey": 0.28, - "entity": { - "id": "verbosity", - "type": "default" - } - }, - { - "count": 51, - "id": "documentation", - "percentageQuestion": 2.12, - "percentageSurvey": 0.24, - "entity": { - "id": "documentation", - "type": "default" - } - }, - { - "count": 50, - "id": "frustration_with_frameworks", - "percentageQuestion": 2.07, - "percentageSurvey": 0.24, - "entity": { - "id": "frustration_with_frameworks", - "type": "default" - } - }, - { - "count": 47, - "id": "clunkiness", - "percentageQuestion": 1.95, - "percentageSurvey": 0.22, - "entity": { - "id": "clunkiness", - "type": "default" - } - }, - { - "count": 47, - "id": "styling", - "percentageQuestion": 1.95, - "percentageSurvey": 0.22, - "entity": { - "id": "styling", - "type": "default" - } - }, - { - "count": 42, - "id": "shadow_dom", - "percentageQuestion": 1.74, - "percentageSurvey": 0.2, - "entity": { - "name": "Shadow DOM", - "nameClean": "Shadow DOM", - "description": "Encapsulate elements not visible from the outside, and style them with CSS not affecting the rest of the page.", - "descriptionClean": "Encapsulate elements not visible from the outside, and style them with CSS not affecting the rest of the page.", - "id": "shadow_dom", - "type": "feature", - "example": { - "language": "js", - "code": "this.shadowRoot = this.attachShadow({mode: \"open\"});", - "codeHighlighted": "this.shadowRoot = this.attachShadow({mode: "open"});" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM" - } - } - }, - { - "count": 34, - "id": "focus_management", - "percentageQuestion": 1.41, - "percentageSurvey": 0.16, - "entity": { - "id": "focus_management", - "type": "default" - } - }, - { - "count": 31, - "id": "details_element", - "percentageQuestion": 1.29, - "percentageSurvey": 0.15, - "entity": { - "name": "`
` and ``", - "nameHtml": "<details> and <summary>", - "nameClean": "details and summary", - "description": "A disclosure widget that can be toggled to hide or show content interactively.", - "descriptionClean": "A disclosure widget that can be toggled to hide or show content interactively.", - "id": "details_element", - "type": "feature", - "example": { - "language": "html", - "code": "
\n Details\n Longer content\n
", - "codeHighlighted": "<details>\n <summary>Details</summary>\n Longer content\n</details>" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details" - }, - "resources": [ - { - "url": "https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element", - "title": "HTML Standard" - } - ] - } - }, - { - "count": 31, - "id": "safari", - "percentageQuestion": 1.29, - "percentageSurvey": 0.15, - "entity": { - "name": "Safari", - "nameClean": "Safari", - "id": "safari", - "type": "default", - "homepage": { - "url": "https://www.apple.com/safari/" - } - } - }, - { - "count": 30, - "id": "binding", - "percentageQuestion": 1.24, - "percentageSurvey": 0.14, - "entity": { - "id": "binding", - "type": "default" - } - }, - { - "count": 28, - "id": "transitions", - "percentageQuestion": 1.16, - "percentageSurvey": 0.13, - "entity": { - "id": "transitions", - "type": "feature", - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions" - }, - "caniuse": { - "url": "https://caniuse.com/css-transitions" - } - } - }, - { - "count": 24, - "id": "aria", - "percentageQuestion": 1, - "percentageSurvey": 0.11, - "entity": { - "name": "ARIA", - "nameClean": "ARIA", - "description": "`role` and `aria-*` attributes", - "descriptionHtml": "role and aria-* attributes", - "descriptionClean": "role and aria-* attributes", - "id": "aria", - "type": "feature", - "example": { - "language": "html", - "code": "
Prices
\n
\n\t\n
", - "codeHighlighted": "<div id="tab1" aria-controls="panel1" role="tab">Prices</div>\n<div id="panel1" class="panel" aria-labelledby="tab1" role="tabpanel">\n\t<!-- tab content -->\n</div>" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes" - } - } - }, - { - "count": 24, - "id": "data_binding", - "percentageQuestion": 1, - "percentageSurvey": 0.11, - "entity": { - "id": "data_binding", - "type": "default" - } - }, - { - "count": 24, - "id": "ssr", - "percentageQuestion": 1, - "percentageSurvey": 0.11, - "entity": { - "name": "SSR", - "nameClean": "SSR", - "id": "ssr", - "type": "default" - } - }, - { - "count": 23, - "id": "build_tools", - "percentageQuestion": 0.95, - "percentageSurvey": 0.11, - "entity": { - "id": "build_tools", - "type": "default" - } - }, - { - "count": 22, - "id": "accordion_element", - "percentageQuestion": 0.91, - "percentageSurvey": 0.11, - "entity": { - "name": "Exclusive Accordion", - "nameClean": "Exclusive Accordion", - "description": "Group `
` elements so that only up to one in the group can be open at a time.", - "descriptionHtml": "Group <details> elements so that only up to one in the group can be open at a time.", - "descriptionClean": "Group details elements so that only up to one in the group can be open at a time.", - "id": "accordion_element", - "type": "feature", - "example": { - "language": "html", - "code": "
\n\tMain info\n\t\n
\n
\n\tStyle\n\t\n
", - "codeHighlighted": "<details open name="sidebar_panel" id="main_info">\n\t<summary>Main info</summary>\n\t<!-- controls -->\n</details>\n<details name="sidebar_panel" id="style_settings">\n\t<summary>Style</summary>\n\t<!-- controls -->\n</details>" - }, - "resources": [ - { - "url": "https://github.com/whatwg/html/pull/9400", - "title": "Add name attribute for grouping details elements into an exclusive accordion by dbaron · Pull Request #9400 · whatwg/html · GitHub" - }, - { - "url": "https://github.com/w3ctag/design-reviews/issues/866#issuecomment-1661272254", - "title": "Exclusive accordion (<details name="">) · Issue #866 · w3ctag/design-reviews · GitHub" - }, - { - "url": "https://open-ui.org/components/accordion.explainer/", - "title": "Exclusive Accordion (Explainer) | Open UI" - }, - { - "url": "https://chromestatus.com/feature/6710427028815872", - "title": "Chrome Platform Status" - } - ] - } - }, - { - "count": 21, - "id": "jsx", - "percentageQuestion": 0.87, - "percentageSurvey": 0.1, - "entity": { - "name": "JSX", - "nameClean": "JSX", - "id": "jsx", - "type": "default", - "homepage": { - "url": "https://reactjs.org/docs/introducing-jsx.html" - } - } - }, - { - "count": 20, - "id": "inner_html", - "percentageQuestion": 0.83, - "percentageSurvey": 0.1, - "entity": { - "id": "inner_html", - "type": "default" - } - }, - { - "count": 20, - "id": "prefers_frameworks", - "percentageQuestion": 0.83, - "percentageSurvey": 0.1, - "entity": { - "id": "prefers_frameworks", - "type": "default" - } - }, - { - "count": 19, - "id": "error_handling", - "percentageQuestion": 0.79, - "percentageSurvey": 0.09, - "entity": { - "id": "error_handling", - "type": "default" - } - }, - { - "count": 19, - "id": "too_much_boilerplate", - "percentageQuestion": 0.79, - "percentageSurvey": 0.09, - "entity": { - "id": "too_much_boilerplate", - "type": "default" - } - }, - { - "count": 18, - "id": "dom_api", - "percentageQuestion": 0.75, - "percentageSurvey": 0.09, - "entity": { - "id": "dom_api", - "type": "default" - } - }, - { - "count": 17, - "id": "tooltips", - "percentageQuestion": 0.71, - "percentageSurvey": 0.08, - "entity": { - "id": "tooltips", - "type": "default" - } - }, - { - "count": 16, - "id": "drag_and_drop", - "percentageQuestion": 0.66, - "percentageSurvey": 0.08, - "entity": { - "id": "drag_and_drop", - "type": "default" - } - }, - { - "count": 16, - "id": "missing_features", - "percentageQuestion": 0.66, - "percentageSurvey": 0.08, - "entity": { - "id": "missing_features", - "type": "default" - } - }, - { - "count": 16, - "id": "react_overuse", - "percentageQuestion": 0.66, - "percentageSurvey": 0.08, - "entity": { - "id": "react_overuse", - "type": "default" - } - }, - { - "count": 15, - "id": "dom_diffing", - "percentageQuestion": 0.62, - "percentageSurvey": 0.07, - "entity": { - "id": "dom_diffing", - "type": "default" - } - }, - { - "count": 13, - "id": "inert_attribute", - "percentageQuestion": 0.54, - "percentageSurvey": 0.06, - "entity": { - "name": "`inert` attribute", - "nameHtml": "inert attribute", - "nameClean": "inert attribute", - "description": "Attribute to make an element and its descendants non-interactive, and invisible to assistive technology.", - "descriptionClean": "Attribute to make an element and its descendants non-interactive, and invisible to assistive technology.", - "id": "inert_attribute", - "type": "feature", - "example": { - "language": "html", - "code": "
\n ...\n
", - "codeHighlighted": "<div id=app inert class=loading>\n ...\n</div>" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert" - }, - "resources": [ - { - "url": "https://html.spec.whatwg.org/multipage/interaction.html#the-inert-attribute", - "title": "HTML Standard" - }, - { - "url": "https://developer.chrome.com/articles/inert/", - "title": "Introducing inert - Chrome Developers" - }, - { - "url": "https://www.stefanjudis.com/blog/the-inert-attribute-is-finally-coming-to-the-web/", - "title": "The \"inert\" attribute is finally coming to the web | Stefan Judis Web Development" - } - ] - } - }, - { - "count": 13, - "id": "security", - "percentageQuestion": 0.54, - "percentageSurvey": 0.06, - "entity": { - "id": "security", - "type": "default" - } - }, - { - "count": 12, - "id": "debugging", - "percentageQuestion": 0.5, - "percentageSurvey": 0.06, - "entity": { - "name": "Debugging", - "nameClean": "Debugging", - "id": "debugging", - "type": "default" - } - }, - { - "count": 12, - "id": "maintenance", - "percentageQuestion": 0.5, - "percentageSurvey": 0.06, - "entity": { - "id": "maintenance", - "type": "default" - } - }, - { - "count": 12, - "id": "version_updates", - "percentageQuestion": 0.5, - "percentageSurvey": 0.06, - "entity": { - "id": "version_updates", - "type": "default" - } - }, - { - "count": 11, - "id": "bloat", - "percentageQuestion": 0.46, - "percentageSurvey": 0.05, - "entity": { - "id": "bloat", - "type": "default" - } - }, - { - "count": 10, - "id": "view_transitions", - "percentageQuestion": 0.41, - "percentageSurvey": 0.05, - "entity": { - "name": "ViewTransition API", - "nameClean": "ViewTransition API", - "id": "view_transitions", - "type": "feature", - "example": { - "language": "css", - "code": "::view-transition-old(main-image),\n::view-transition-new(main-image) {\n transform-origin: right top;\n}\n\n::view-transition-new(main-image) {\n animation: 400ms ease-out both grow;\n}\n\nfigure {\n view-transition-name: main-image;\n}\n", - "codeHighlighted": "::view-transition-old(main-image),\n::view-transition-new(main-image) {\n transform-origin: right top;\n}\n\n::view-transition-new(main-image) {\n animation: 400ms ease-out both grow;\n}\n\nfigure {\n view-transition-name: main-image;\n}" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API" - }, - "caniuse": { - "url": "https://caniuse.com/mdn-api_viewtransition" - }, - "resources": [ - { - "url": "https://developer.chrome.com/docs/web-platform/view-transitions/", - "title": "Smooth and simple transitions with the View Transitions API" - } - ] - } - }, { "count": 196, "id": "cutoff_answers", @@ -717,6 +158,12 @@ "id": "other_answers", "percentageQuestion": 41.2, "percentageSurvey": 4.75 + }, + { + "count": 1194, + "id": "overlimit_answers", + "percentageQuestion": 49.55, + "percentageSurvey": 5.69 } ] } diff --git a/state_of_html/html2023/results/data/mobile_web_apps/mobile_web_apps_pain_points.json b/state_of_html/html2023/results/data/mobile_web_apps/mobile_web_apps_pain_points.json index 7a9db12a..daad4053 100644 --- a/state_of_html/html2023/results/data/mobile_web_apps/mobile_web_apps_pain_points.json +++ b/state_of_html/html2023/results/data/mobile_web_apps/mobile_web_apps_pain_points.json @@ -29,16 +29,6 @@ "type": "default" } }, - { - "count": 69, - "id": "other_ios_issues", - "percentageQuestion": 5.8, - "percentageSurvey": 0.33, - "entity": { - "id": "other_ios_issues", - "type": "default" - } - }, { "count": 70, "id": "ios_lack_of_pwa_support", @@ -58,6 +48,16 @@ "id": "other_safari_issues", "type": "default" } + }, + { + "count": 69, + "id": "other_ios_issues", + "percentageQuestion": 5.8, + "percentageSurvey": 0.33, + "entity": { + "id": "other_ios_issues", + "type": "default" + } } ] }, @@ -104,16 +104,6 @@ "percentageQuestion": 4.11, "percentageSurvey": 0.23, "groupedBuckets": [ - { - "count": 8, - "id": "pwa_update", - "percentageQuestion": 0.67, - "percentageSurvey": 0.04, - "entity": { - "id": "pwa_update", - "type": "default" - } - }, { "count": 1, "id": "pwa_lack_of_familiarity", @@ -124,6 +114,16 @@ "type": "default" } }, + { + "count": 8, + "id": "pwa_update", + "percentageQuestion": 0.67, + "percentageSurvey": 0.04, + "entity": { + "id": "pwa_update", + "type": "default" + } + }, { "count": 40, "id": "pwa_installation", @@ -172,16 +172,6 @@ "percentageQuestion": 3.02, "percentageSurvey": 0.17, "groupedBuckets": [ - { - "count": 6, - "id": "touch_delay", - "percentageQuestion": 0.5, - "percentageSurvey": 0.03, - "entity": { - "id": "touch_delay", - "type": "default" - } - }, { "count": 30, "id": "using_native_elements", @@ -191,6 +181,16 @@ "id": "using_native_elements", "type": "default" } + }, + { + "count": 6, + "id": "touch_delay", + "percentageQuestion": 0.5, + "percentageSurvey": 0.03, + "entity": { + "id": "touch_delay", + "type": "default" + } } ] }, @@ -210,238 +210,6 @@ } } }, - { - "count": 31, - "id": "complexity", - "percentageQuestion": 2.61, - "percentageSurvey": 0.15, - "entity": { - "description": "Too much complexity", - "descriptionClean": "Too much complexity", - "id": "complexity", - "type": "default" - } - }, - { - "count": 27, - "id": "app_store_issues", - "percentageQuestion": 2.27, - "percentageSurvey": 0.13, - "entity": { - "id": "app_store_issues", - "type": "default" - } - }, - { - "count": 25, - "id": "access_to_native_apis", - "percentageQuestion": 2.1, - "percentageSurvey": 0.12, - "entity": { - "id": "access_to_native_apis", - "type": "default" - } - }, - { - "count": 23, - "id": "device_inconsistencies", - "percentageQuestion": 1.93, - "percentageSurvey": 0.11, - "entity": { - "id": "device_inconsistencies", - "type": "default" - } - }, - { - "count": 22, - "id": "documentation", - "percentageQuestion": 1.85, - "percentageSurvey": 0.11, - "entity": { - "id": "documentation", - "type": "default" - } - }, - { - "count": 22, - "id": "filesystem_access", - "percentageQuestion": 1.85, - "percentageSurvey": 0.11, - "entity": { - "name": "File System Access API", - "nameClean": "File System Access API", - "description": "Access files and directories on the user's local device.", - "descriptionHtml": "Access files and directories on the user's local device.", - "descriptionClean": "Access files and directories on the user's local device.", - "id": "filesystem_access", - "type": "feature", - "example": { - "language": "js", - "code": "const handle = await window.showSaveFilePicker(opts);", - "codeHighlighted": "const handle = await window.showSaveFilePicker(opts);" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/API/File_System_API" - }, - "resources": [ - { - "url": "https://web.dev/file-system-access/", - "title": "File System Access API" - }, - { - "url": "https://fs.spec.whatwg.org/", - "title": "File System API Specification" - } - ] - } - }, - { - "count": 21, - "id": "debugging", - "percentageQuestion": 1.77, - "percentageSurvey": 0.1, - "entity": { - "name": "Debugging", - "nameClean": "Debugging", - "id": "debugging", - "type": "default" - } - }, - { - "count": 21, - "id": "firefox_issues", - "percentageQuestion": 1.77, - "percentageSurvey": 0.1, - "entity": { - "id": "firefox_issues", - "type": "default" - } - }, - { - "count": 21, - "id": "testing", - "percentageQuestion": 1.77, - "percentageSurvey": 0.1, - "entity": { - "name": "Testing", - "nameClean": "Testing", - "id": "testing", - "type": "default" - } - }, - { - "count": 19, - "id": "build_tools", - "percentageQuestion": 1.6, - "percentageSurvey": 0.09, - "entity": { - "id": "build_tools", - "type": "default" - } - }, - { - "count": 17, - "id": "configuration", - "percentageQuestion": 1.43, - "percentageSurvey": 0.08, - "entity": { - "description": "Hard to configure", - "descriptionClean": "Hard to configure", - "id": "configuration", - "type": "default" - } - }, - { - "count": 16, - "id": "clunkiness", - "percentageQuestion": 1.35, - "percentageSurvey": 0.08, - "entity": { - "id": "clunkiness", - "type": "default" - } - }, - { - "count": 16, - "id": "indexeddb_issues", - "percentageQuestion": 1.35, - "percentageSurvey": 0.08, - "entity": { - "id": "indexeddb_issues", - "type": "default" - } - }, - { - "count": 14, - "id": "discovery", - "percentageQuestion": 1.18, - "percentageSurvey": 0.07, - "entity": { - "id": "discovery", - "type": "default" - } - }, - { - "count": 12, - "id": "gesture_handling", - "percentageQuestion": 1.01, - "percentageSurvey": 0.06, - "entity": { - "id": "gesture_handling", - "type": "default" - } - }, - { - "count": 11, - "id": "tooling", - "percentageQuestion": 0.93, - "percentageSurvey": 0.05, - "entity": { - "name": "Tooling", - "nameClean": "Tooling", - "id": "tooling", - "type": "default" - } - }, - { - "count": 11, - "id": "view_transitions", - "percentageQuestion": 0.93, - "percentageSurvey": 0.05, - "entity": { - "name": "ViewTransition API", - "nameClean": "ViewTransition API", - "id": "view_transitions", - "type": "feature", - "example": { - "language": "css", - "code": "::view-transition-old(main-image),\n::view-transition-new(main-image) {\n transform-origin: right top;\n}\n\n::view-transition-new(main-image) {\n animation: 400ms ease-out both grow;\n}\n\nfigure {\n view-transition-name: main-image;\n}\n", - "codeHighlighted": "::view-transition-old(main-image),\n::view-transition-new(main-image) {\n transform-origin: right top;\n}\n\n::view-transition-new(main-image) {\n animation: 400ms ease-out both grow;\n}\n\nfigure {\n view-transition-name: main-image;\n}" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API" - }, - "caniuse": { - "url": "https://caniuse.com/mdn-api_viewtransition" - }, - "resources": [ - { - "url": "https://developer.chrome.com/docs/web-platform/view-transitions/", - "title": "Smooth and simple transitions with the View Transitions API" - } - ] - } - }, - { - "count": 10, - "id": "version_updates", - "percentageQuestion": 0.84, - "percentageSurvey": 0.05, - "entity": { - "id": "version_updates", - "type": "default" - } - }, { "count": 163, "id": "cutoff_answers", @@ -453,6 +221,12 @@ "id": "other_answers", "percentageQuestion": 54.42, "percentageSurvey": 3.1 + }, + { + "count": 339, + "id": "overlimit_answers", + "percentageQuestion": 28.54, + "percentageSurvey": 1.64 } ] } diff --git a/state_of_html/html2023/results/data/web_components/making_web_components_pain_points.json b/state_of_html/html2023/results/data/web_components/making_web_components_pain_points.json index cec67cc0..39392c34 100644 --- a/state_of_html/html2023/results/data/web_components/making_web_components_pain_points.json +++ b/state_of_html/html2023/results/data/web_components/making_web_components_pain_points.json @@ -143,354 +143,6 @@ "type": "default" } }, - { - "count": 41, - "id": "templating", - "percentageQuestion": 2.75, - "percentageSurvey": 0.2, - "entity": { - "id": "templating", - "type": "default" - } - }, - { - "count": 39, - "id": "documentation", - "percentageQuestion": 2.62, - "percentageSurvey": 0.19, - "entity": { - "id": "documentation", - "type": "default" - } - }, - { - "count": 38, - "id": "state_management", - "percentageQuestion": 2.55, - "percentageSurvey": 0.18, - "entity": { - "id": "state_management", - "type": "default" - } - }, - { - "count": 34, - "id": "forms", - "percentageQuestion": 2.28, - "percentageSurvey": 0.16, - "entity": { - "name": "Forms", - "nameClean": "Forms", - "id": "forms", - "type": "default" - } - }, - { - "count": 30, - "id": "js_requirement", - "percentageQuestion": 2.01, - "percentageSurvey": 0.14, - "entity": { - "id": "js_requirement", - "type": "default" - } - }, - { - "count": 28, - "id": "declarative_shadow_dom", - "percentageQuestion": 1.88, - "percentageSurvey": 0.13, - "entity": { - "name": "Declarative Shadow DOM", - "nameClean": "Declarative Shadow DOM", - "description": "Define shadow trees with HTML.", - "descriptionClean": "Define shadow trees with HTML.", - "id": "declarative_shadow_dom", - "type": "feature", - "example": { - "language": "html", - "code": "\n \n", - "codeHighlighted": "<host-element>\n <template shadowrootmode="open">\n <!-- Shadow content -->\n </template>\n</host-element>" - }, - "caniuse": { - "url": "https://caniuse.com/declarative-shadow-dom" - }, - "resources": [ - { - "url": "https://github.com/mfreed7/declarative-shadow-dom", - "title": "GitHub - mfreed7/declarative-shadow-dom: Declarative Shadow DOM feature development" - }, - { - "url": "https://developer.chrome.com/en/articles/declarative-shadow-dom/", - "title": "Declarative Shadow DOM - Chrome Developers" - }, - { - "url": "https://webkit.org/blog/13851/declarative-shadow-dom/", - "title": "Declarative Shadow DOM | WebKit" - }, - { - "url": "https://chromestatus.com/feature/5191745052606464", - "title": "Chrome Platform Status" - } - ] - } - }, - { - "count": 27, - "id": "build_tools", - "percentageQuestion": 1.81, - "percentageSurvey": 0.13, - "entity": { - "id": "build_tools", - "type": "default" - } - }, - { - "count": 25, - "id": "reactivity", - "percentageQuestion": 1.68, - "percentageSurvey": 0.12, - "entity": { - "id": "reactivity", - "type": "default" - } - }, - { - "count": 24, - "id": "class_based_architecture", - "percentageQuestion": 1.61, - "percentageSurvey": 0.11, - "entity": { - "id": "class_based_architecture", - "type": "default" - } - }, - { - "count": 24, - "id": "lack_of_knowledge", - "percentageQuestion": 1.61, - "percentageSurvey": 0.11, - "entity": { - "id": "lack_of_knowledge", - "type": "default" - } - }, - { - "count": 22, - "id": "aria", - "percentageQuestion": 1.48, - "percentageSurvey": 0.11, - "entity": { - "name": "ARIA", - "nameClean": "ARIA", - "description": "`role` and `aria-*` attributes", - "descriptionHtml": "role and aria-* attributes", - "descriptionClean": "role and aria-* attributes", - "id": "aria", - "type": "feature", - "example": { - "language": "html", - "code": "
Prices
\n
\n\t\n
", - "codeHighlighted": "<div id="tab1" aria-controls="panel1" role="tab">Prices</div>\n<div id="panel1" class="panel" aria-labelledby="tab1" role="tabpanel">\n\t<!-- tab content -->\n</div>" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes" - } - } - }, - { - "count": 17, - "id": "imperative_api", - "percentageQuestion": 1.14, - "percentageSurvey": 0.08, - "entity": { - "id": "imperative_api", - "type": "default" - } - }, - { - "count": 17, - "id": "tooling", - "percentageQuestion": 1.14, - "percentageSurvey": 0.08, - "entity": { - "name": "Tooling", - "nameClean": "Tooling", - "id": "tooling", - "type": "default" - } - }, - { - "count": 15, - "id": "events", - "percentageQuestion": 1.01, - "percentageSurvey": 0.07, - "entity": { - "id": "events", - "type": "default" - } - }, - { - "count": 14, - "id": "element_internals", - "percentageQuestion": 0.94, - "percentageSurvey": 0.07, - "entity": { - "name": "`ElementInternals` API", - "nameHtml": "ElementInternals API", - "nameClean": "ElementInternals API", - "description": "Assign hidden semantics to custom elements, facilitating accessibility and allowing them to participate fully in forms.", - "descriptionClean": "Assign hidden semantics to custom elements, facilitating accessibility and allowing them to participate fully in forms.", - "id": "element_internals", - "type": "feature", - "example": { - "language": "js", - "code": "this.#internals = this.attachInternals()\nthis.#internals.ariaChecked = true;", - "codeHighlighted": "this.#internals = this.attachInternals()\nthis.#internals.ariaChecked = true;" - }, - "mdn": { - "url": "https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals" - }, - "caniuse": { - "url": "https://caniuse.com/mdn-api_elementinternals" - }, - "resources": [ - { - "url": "https://html.spec.whatwg.org/multipage/custom-elements.html#the-elementinternals-interface", - "title": "HTML Standard" - } - ] - } - }, - { - "count": 14, - "id": "not_familiar", - "percentageQuestion": 0.94, - "percentageSurvey": 0.07, - "entity": { - "id": "not_familiar", - "type": "default" - } - }, - { - "count": 13, - "id": "data_binding", - "percentageQuestion": 0.87, - "percentageSurvey": 0.06, - "entity": { - "id": "data_binding", - "type": "default" - } - }, - { - "count": 13, - "id": "frustration_with_frameworks", - "percentageQuestion": 0.87, - "percentageSurvey": 0.06, - "entity": { - "id": "frustration_with_frameworks", - "type": "default" - } - }, - { - "count": 13, - "id": "learning_curve", - "percentageQuestion": 0.87, - "percentageSurvey": 0.06, - "entity": { - "id": "learning_curve", - "type": "default" - } - }, - { - "count": 12, - "id": "configuration", - "percentageQuestion": 0.81, - "percentageSurvey": 0.06, - "entity": { - "description": "Hard to configure", - "descriptionClean": "Hard to configure", - "id": "configuration", - "type": "default" - } - }, - { - "count": 12, - "id": "styling", - "percentageQuestion": 0.81, - "percentageSurvey": 0.06, - "entity": { - "id": "styling", - "type": "default" - } - }, - { - "count": 11, - "id": "html_modules", - "percentageQuestion": 0.74, - "percentageSurvey": 0.05, - "entity": { - "name": "HTML Modules", - "nameClean": "HTML Modules", - "description": "Import HTML files via JS imports and access their elements and JS exports.", - "descriptionClean": "Import HTML files via JS imports and access their elements and JS exports.", - "id": "html_modules", - "type": "feature", - "example": { - "language": "html", - "code": "", - "codeHighlighted": "<script type="module">\n\timport { TabList } from "./tablist.html" with { type: 'html' };\n\tcustomElements.define("tab-list", TabList);\n</script>" - }, - "resources": [ - { - "url": "https://github.com/WICG/webcomponents/blob/gh-pages/proposals/html-modules-explainer.md", - "title": "HTML Modules Explainer" - }, - { - "url": "https://chromestatus.com/feature/4854408103854080", - "title": "Chrome Platform Status" - }, - { - "url": "https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/HTMLModules/designDoc.md" - } - ] - } - }, - { - "count": 11, - "id": "jsx", - "percentageQuestion": 0.74, - "percentageSurvey": 0.05, - "entity": { - "name": "JSX", - "nameClean": "JSX", - "id": "jsx", - "type": "default", - "homepage": { - "url": "https://reactjs.org/docs/introducing-jsx.html" - } - } - }, - { - "count": 11, - "id": "performance", - "percentageQuestion": 0.74, - "percentageSurvey": 0.05, - "entity": { - "id": "performance", - "type": "default" - } - }, - { - "count": 10, - "id": "error_handling", - "percentageQuestion": 0.67, - "percentageSurvey": 0.05, - "entity": { - "id": "error_handling", - "type": "default" - } - }, { "count": 153, "id": "cutoff_answers", @@ -502,6 +154,12 @@ "id": "other_answers", "percentageQuestion": 53.66, "percentageSurvey": 3.82 + }, + { + "count": 515, + "id": "overlimit_answers", + "percentageQuestion": 34.57, + "percentageSurvey": 2.45 } ] } diff --git a/state_of_html/html2023/results/data/web_components/using_web_components_pain_points.json b/state_of_html/html2023/results/data/web_components/using_web_components_pain_points.json index 7d76a7b2..1aae6f40 100644 --- a/state_of_html/html2023/results/data/web_components/using_web_components_pain_points.json +++ b/state_of_html/html2023/results/data/web_components/using_web_components_pain_points.json @@ -143,188 +143,6 @@ "type": "default" } }, - { - "count": 27, - "id": "performance", - "percentageQuestion": 2.03, - "percentageSurvey": 0.13, - "entity": { - "id": "performance", - "type": "default" - } - }, - { - "count": 20, - "id": "forms", - "percentageQuestion": 1.5, - "percentageSurvey": 0.1, - "entity": { - "name": "Forms", - "nameClean": "Forms", - "id": "forms", - "type": "default" - } - }, - { - "count": 19, - "id": "build_tools", - "percentageQuestion": 1.43, - "percentageSurvey": 0.09, - "entity": { - "id": "build_tools", - "type": "default" - } - }, - { - "count": 19, - "id": "dependencies", - "percentageQuestion": 1.43, - "percentageSurvey": 0.09, - "entity": { - "id": "dependencies", - "type": "default" - } - }, - { - "count": 18, - "id": "state_management", - "percentageQuestion": 1.35, - "percentageSurvey": 0.09, - "entity": { - "id": "state_management", - "type": "default" - } - }, - { - "count": 17, - "id": "fouc", - "percentageQuestion": 1.28, - "percentageSurvey": 0.08, - "entity": { - "id": "fouc", - "type": "default" - } - }, - { - "count": 16, - "id": "frustration_with_frameworks", - "percentageQuestion": 1.2, - "percentageSurvey": 0.08, - "entity": { - "id": "frustration_with_frameworks", - "type": "default" - } - }, - { - "count": 15, - "id": "a11y_educational_issues", - "percentageQuestion": 1.13, - "percentageSurvey": 0.07, - "groupedBuckets": [ - { - "count": 11, - "id": "difficulty", - "percentageQuestion": 0.83, - "percentageSurvey": 0.05, - "entity": { - "id": "difficulty", - "type": "default" - } - }, - { - "count": 4, - "id": "lack_of_education", - "percentageQuestion": 0.3, - "percentageSurvey": 0.02, - "entity": { - "id": "lack_of_education", - "type": "default" - } - } - ] - }, - { - "count": 15, - "id": "not_familiar", - "percentageQuestion": 1.13, - "percentageSurvey": 0.07, - "entity": { - "id": "not_familiar", - "type": "default" - } - }, - { - "count": 12, - "id": "declarative_shadow_dom", - "percentageQuestion": 0.9, - "percentageSurvey": 0.06, - "entity": { - "name": "Declarative Shadow DOM", - "nameClean": "Declarative Shadow DOM", - "description": "Define shadow trees with HTML.", - "descriptionClean": "Define shadow trees with HTML.", - "id": "declarative_shadow_dom", - "type": "feature", - "example": { - "language": "html", - "code": "\n \n", - "codeHighlighted": "<host-element>\n <template shadowrootmode="open">\n <!-- Shadow content -->\n </template>\n</host-element>" - }, - "caniuse": { - "url": "https://caniuse.com/declarative-shadow-dom" - }, - "resources": [ - { - "url": "https://github.com/mfreed7/declarative-shadow-dom", - "title": "GitHub - mfreed7/declarative-shadow-dom: Declarative Shadow DOM feature development" - }, - { - "url": "https://developer.chrome.com/en/articles/declarative-shadow-dom/", - "title": "Declarative Shadow DOM - Chrome Developers" - }, - { - "url": "https://webkit.org/blog/13851/declarative-shadow-dom/", - "title": "Declarative Shadow DOM | WebKit" - }, - { - "url": "https://chromestatus.com/feature/5191745052606464", - "title": "Chrome Platform Status" - } - ] - } - }, - { - "count": 11, - "id": "clunkiness", - "percentageQuestion": 0.83, - "percentageSurvey": 0.05, - "entity": { - "id": "clunkiness", - "type": "default" - } - }, - { - "count": 11, - "id": "missing_features", - "percentageQuestion": 0.83, - "percentageSurvey": 0.05, - "entity": { - "id": "missing_features", - "type": "default" - } - }, - { - "count": 10, - "id": "tooling", - "percentageQuestion": 0.75, - "percentageSurvey": 0.05, - "entity": { - "name": "Tooling", - "nameClean": "Tooling", - "id": "tooling", - "type": "default" - } - }, { "count": 198, "id": "cutoff_answers", @@ -336,6 +154,12 @@ "id": "other_answers", "percentageQuestion": 52.4, "percentageSurvey": 3.34 + }, + { + "count": 210, + "id": "overlimit_answers", + "percentageQuestion": 15.79, + "percentageSurvey": 1.01 } ] } diff --git a/state_of_html/html2023/results/data/web_components/web_components_main_features.json b/state_of_html/html2023/results/data/web_components/web_components_main_features.json new file mode 100644 index 00000000..a56c25ea --- /dev/null +++ b/state_of_html/html2023/results/data/web_components/web_components_main_features.json @@ -0,0 +1,1293 @@ +{ + "dataAPI": { + "surveys": { + "state_of_html": { + "html2023": { + "web_components": { + "web_components_main_features": { + "items": [ + { + "id": "template_element", + "entity": { + "name": "`