It's a shame that most of the comments here are just people criticizing web dev frameworks and browsers.
In fact, in games it also happens with the transforms of objects and has been the cause of a number of performance issues during development of AAA games I've been part of.
Last I checked the form additions from HTML5 were still pretty spotty in support, several don't really have a real world use case, and nobody wants to make any more really.
We're trying, and we need help: https://open-ui.org/
Come say Hi on Discord, anyone who has written a JS control has input that the project needs.
You can debug one of the most complex softwares in the world (a browser) so effectively you can understand what you did wrong and fix it.
On mobile, as a rule, the second a design transcends things like tables, buttons, and forms is when the “lower level” native APIs start getting broken out.
Wrapped in nice little JS/TS APIs so nobody freaks out, of course.
webdev is incredibly flexible by the very nature of "build it yourself", and that's a good thing.
Having performance impact from badly optimized implementation is a testament to this flexibility - what you are saying is akin to "C is bad because i could fk up memory"
It is insane how complicated this is. Then you need to consider the differences between browsers. Ultimately you have to start using a library. And integrate that library with the framework and then hope that the framework won't have a major technical overhaul like Angular or Vue had.
Most of the time you just sit there thinking what will be the best approach and start to get more demotivated the more you dig deeper into it.
It is hard.
CKEditor would have solved most of my issues, but their licensing is absolutely crazy. I'd have to contact them to get an offer to use it for normal internet usage, but if I don't know if it will work, and if the site will be a success, then it simply does not make sense to contact them. 37 USD for 25 users? Or getting a custom contract where I don't know how they will change it in the future? I don't understand what assumptions they have about the usage of their editor, but just embedding it into a blog or something similar, where you don't really know how many users you will have, definitely isn't one of them.
Run your virtualized browser within any browser.
- browsers have had native text tooltips for at least 20 years
- there are active proposals intended to address richer tooltips and similar use cases
- adding new controls to the web is a complex matter because there are a lot of stakeholders to consider, and a lot of consensus to build among implementers/standards authors
- complaints about missing UI features on the web often overlap with complaints about standards bloat and browser bloat
- this article is rich in technical information that’s applicable more broadly than the tooltip use case, and maybe every single article about anything web on HN doesn’t need to be drowned in generic myopic complaints about the web
HTML was not designed to be dynamic. There are too many redundant feature of HTML/CSS/JS, and honestly I would make everything obsolete and design a new document format with a open binary format.
We're now building applications. Applications have a totally different layout model. Only recently we're able to use flexbox. But it's insane. Just build the layout / application in something that really works (any of platform UI toolkits / markups), and use HTML for document flow.
It won't be a problem if the tooltip has delayed appearance by 80ms, but it holds the process. So the site will have a 80ms stutter everytime a tooltip appear.
<style>
main:only-child * { /* ... */ }
</style>
<body>
<main>lots of stuff </main>
</body>
When there is (next) sibling wrapper present, anything what happens inside it cannot affect the <main> in our example: in CSS there simply is currently no way to target element according it's next sibling inner structure. (There is one for previous sibling: `prev:empty + next {}`: when prev stops being empty, rule stops to match.)
Because you don’t want tooltips to constantly flicker up when moving your mouse around. This should be a user preference setting, like e.g. double-click speed. (It is on Windows for native tooltips, via the registry.)
Fortunately tooltips are pretty easy to make these days. You don't need Javascript at all to make a nice tooltip. But again, it's a tooltip - it's been done so many times before that it'd be nice to have a native browser version.
Consider this style rule set which does just what it looks like:
head,
title,
style,
script {
display: block;
} What happened here? The tooltip was attached to the tooltip container and not to the body.
This invalidated a much smaller subtree, which was the tooltip container. The tooltip container
is not visible in the page, so modifying it doesn’t invalidate the complete page render tree.
If the tooltip container would have been visible in the page, then the complete render tree
would be invalidated but in this case only an independent subtree was invalidated.
The container is an empty div which is not visible, and even after adding children which are not directly visible `inside` this div keeps this container div invisible.
You can check out some examples in https://github.com/mui-org/material-ui/issues/27879
The article is so well-researched otherwise that I'm sure the OP knows the answer to this, but it frustratingly didn't make it into the article itself!
IIRC there were many tutorials in the early days of React that mentioned this.
There is one reason I can see for using canvas based rendering generally[1] and that is if one really really wants to avoid someone from copy-pasting or indexing the page easily[2].
[1]: valid use cases for using canvas exists.
[2]: as someone who has digitized a couple of documents I'd say the effort is just above copy paste (with my tools it is copy, paste, OCR to clipbord, paste, verify)
Hint: It’s J A N K Y
That step seems unrelated
Look up “composting”.
I was just joking, the article is excellent.
Glad all that knowledge is useful in different contexts though.
Did anybody get Popper to work as an ES6 module? I tried for a while and gave up.
Some websites don't even have text accompanying their unintuitive but kewl looking icons.
The future is now, old timers!