State of HTML 2024 Preview

[SachaG]

Previous Discussion

• State of HTML 2024 Suggestions #235

Preview

• https://survey.devographics.com/en-US/survey/state-of-html/2024

[tayloregivens]

Was wondering if we could add the following topics to the State of HTML survey

EditContext (under Forms)
Async clipboard API (under Interactivity)
Web custom formats (under Interactivity)
caretPositionFromPoint (under Forms)
highlightsFromPoint (under Forms) - not implemented by any browser, but have feature proposal we'd like feedback on.

Custom highlight API

• Think it would be a better fit for State of CSS Survey in the Other Features section since it is "a mechanism for styling arbitrary text ranges on a document by using JavaScript to create the ranges, and CSS [pseudo-element] to style them". However, could also see it in the HTML Survey under Content, since the API is relevant to embedding CSS styles content and applying it to text ranges, or Other.

[SachaG]

@tayloregivens if highlightsFromPoint is not implemented anywhere yet, it might be a bit early to ask people about it?

Also is the Web custom formats link correct? I couldn't find a reference to that term on the MDN page.

[tayloregivens]

For web custom formats on the linked page it has a statement describing what web custom formats are "Custom MIME-type formats starting with "web ". The custom type (without the "web " prefix), must have the correct formatting for a MIME type." However, this is a more comprehensive blog post describing web custom formats.

[tayloregivens]

highlightsFromPoint isn't implemented anywhere, but we were wondering if we could add a section such as feature proposals or feature explainers to get developers input on. We can share more information and a description of our thoughts for highlightsFromPoint to include in the survey.

[SachaG]

highlightsFromPoint isn't implemented anywhere, but we were wondering if we could add a section such as feature proposals or feature explainers to get developers input on. We can share more information and a description of our thoughts for highlightsFromPoint to include in the survey.

I think so, especially if we can get at least 4-5 features together to make up an "upcoming features" section? Maybe ask developers to pick their favorite top 3 out of the list?

[tayloregivens]

I like that. I can go through to see if there are other features we'd like to ask about.

For highlightsFromPoint we're currently working on an explainer for it, would that be valuable to link? I also could share a summary paragraph and some sample code describing the basics of the feature. When would be the deadline for sharing this stuff with you since I know you're planning on releasing the survey soon.

[tayloregivens]

highlightsFromPoint isn't implemented anywhere, but we were wondering if we could add a section such as feature proposals or feature explainers to get developers input on. We can share more information and a description of our thoughts for highlightsFromPoint to include in the survey.

I think so, especially if we can get at least 4-5 features together to make up an "upcoming features" section? Maybe ask developers to pick their favorite top 3 out of the list?

I'd also like to hear more about your vision for the "upcoming features section". Instead of ranking the top 3 features, receiving individual feedback on the highlightsFromPoint API would be the most beneficial. I've also identified some other "upcoming features" that could be included, but they're not as crucial.

We're happy to follow the structure you think would be best. Some options could be listing upcoming features in their respective categories with a "Not implemented in the browser label" similar to the option, or adding a new section titled "Upcoming Features" with several miscellaneous features.

[SachaG]

When would be the deadline for sharing this stuff with you since I know you're planning on releasing the survey soon.

My goal was to open the survey on September 10 but I think I will probably end up pushing that date back a bit since I'm travelling on the 8th and will need a couple days to get things ready after that.

receiving individual feedback on the highlightsFromPoint API would be the most beneficial

I think what's tough about that is that I assume most people won't be that familiar with it… So the question itself would probably need to explain the concept? How do you envision it? Obviously this kind of in-depth question wouldn't be scalable for every topic covered in the survey, but we could try it as a one-off to see what kind of data we can collect?

For example, for the JS survey, I am considering including a question about native type support of the form:

What would your ideal typing implementation look like? 

- Comment-based typing
- TypeScript syntax
- No typing
- Other…

Is that what you have in mind?

[SachaG]

I'd also like to hear more about your vision for the "upcoming features section".

This could be something like:

Which of these upcoming features are you most excited about? (pick your top 3)

- highlightsFromPoint
- makeMeACofee
- fileNextYearTaxes
- runDoomInBrowser
- ...

[SachaG]

• Added setHTMLUnsafe
• Added parseHTMLUnsafe
• Added intl_segmenter
• Added HTML validators question
• Updated lists of a11y tools
• Added "Which of these upcoming features are you most excited about?" question

See updated version here: https://survey.devographics.com/en-US/survey/state-of-html/2024

[SachaG]

Considering adding an "Opinions" section with the following questions (where people check "agree", "disagree", etc.):

• Accessibility is valued in my professional work environment
• Keeping informed about new web platform features is challenging
• The lack of browser interoperability is a major obstacle to web development
• …any other?

The goal would be to keep these same questions for future years as well so we can track how these trends evolve over time.

[tayloregivens]

I think what's tough about that is that I assume most people won't be that familiar with it… So the question itself would probably need to explain the concept? How do you envision it? Obviously, this kind of in-depth question wouldn't be scalable for every topic covered in the survey, but we could try it as a one-off to see what kind of data we can collect?

For highlights from point our goal is to

1. raise awareness about the API
2. get a sense of whether people feel strongly about it

Our vision would be a question that includes a paragraph blurb explaining the API and a small code snippet. Then listing the questions below.

Is this something you feel like you need?
(I need this, I might need this, I don't care)

Do you like the design of this API
(Yes, No, Don't Care)

Any Other Comments?
Open text box response

[SachaG]

Could you draft the question then, and I'll consider it? Because I don't know enough about that API to do it myself…

[tayloregivens]

Besides the highlightsFromPoint API. I also just wanted to confirm that the rest of these items we're also added to the survey.

EditContext (under Forms)
Async clipboard API (under Interactivity)
Web custom formats (under Interactivity)
caretPositionFromPoint (under Forms)
Custom highlight API

[tayloregivens]

My bad, I see that you have included these on the survey preview. Thank you! We have some suggestions on how the descriptions and code samples could be improved.

Custom Highlight API

more comprehensive code sample:
::highlight(my-custom-highlight) {
background-color: blue;
}

const parentNode = document.getElementById("foo");
const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);
const highlight = new Highlight(range1);
CSS.highlights.set("my-custom-highlight", highlight);

EditContext:

Description: Build rich text editors on the web that support advanced text input experiences, with the flexibility to render your own editable text region using any technology you want.

The code sample could be:
const canvas = document.createElement("canvas");
const editContext = new EditContext();
canvas.editContext = editContext;

CaretPositionFromPoint

code sample:
const range = document.caretPositionFromPoint(e.clientX, e.clientY);
const textNode = range.offsetNode;
const offset = range.offset;

[SachaG]

The Custom Highlight API sample is probably too long to include (also can't really mix languages right now) but I'll add the others.

[SachaG]

Another question idea:

Which resources do you use to keep up with and learn more about the web platform?

• w3c
• mdn
• web_features_explorer
• caniuse
• web.dev
• ...?

[SachaG]

OK, I added a few more questions in the "Other Tools" and "Opinions" sections. I think we're pretty much good to go!

https://survey.devographics.com/en-US/survey/state-of-html/2024/

[sanketj]

The Custom Highlight API sample is probably too long to include (also can't really mix languages right now) but I'll add the others.

I think the highlight API sample needs to at least add the range to a Highlight object and set that into CSS.highlights. As currently written, the sample is just creating a DOM range, not a highlight.

[tayloregivens]

Another question idea:

Which resources do you use to keep up with and learn more about the web platform?

• w3c
• mdn
• web_features_explorer
• caniuse
• web.dev
• ...?

I like this! Maybe could add blog posts (PCMag, Microsoft Edge Dev, Chrome for Developers blog)

[tayloregivens]

Could you draft the question then, and I'll consider it? Because I don't know enough about that API to do it myself…

Draft of HighlightsFromPoint API Question
Feel free to incorporate how you see fit. We were thinking it could go under "Content", maybe near the Custom Highlights API question. Another option could be putting it near the "Which of these upcoming features are you most excited about?" question. I couldn't find where that question is on the survey though.

"Developers have expressed interest in leveraging the custom highlight API to build interactive highlight experiences, such as changing the background color of a highlight or showing a dropdown menu next to a highlight. To support such use cases, we are proposing the highlightsFromPoint API that will identify highlights that interact with a user interaction like a click or a hover."

Is this something you feel like you need? (I need this, I might need this, I don't care)
Do you like the design of this API (Yes, No, Don't Care)
(Icon that allows open text box responses)

[SachaG]

I think the highlight API sample needs to at least add the range to a Highlight object and set that into CSS.highlights. As currently written, the sample is just creating a DOM range, not a highlight.

OK, I'll update it.

Maybe could add blog posts (PCMag, Microsoft Edge Dev, Chrome for Developers blog)

My goal was more to highlight non-commercial community resources, I don't think PCMag would really fit for example. But we can see what other answers people provide.

Draft of HighlightsFromPoint API Question

I really appreciate your work on this but I think it's probably too in-depth for the survey after all… It's tough to ask people to learn about and understand a new API in the middle of answering questions, it might take them out of the flow of the survey. Maybe for next year we can find a more streamlined way to get that data?

[SachaG]

Also, the survey is now live! Thanks for all your help and feedback!

https://survey.devographics.com/en-US/survey/state-of-html/2024/

(As usual I'll leave it open for a couple days to get people to beta-test it before emailing our entire list – also, if you share it please use a ?source= tracking parameter to help us know where respondents are coming from! e.g. https://survey.devographics.com/en-US/survey/state-of-html/2024/?source=css_tricks)