Comment by samwillis | Hacker News Reader

Comment by samwillis | Hacker News Reader

Parent Full thread

All the additions to CSS, JS, HTML, and even the continued growth of frameworks and abstractions, are a choice. You have a choice to limit yourself and your team to a subset of the available tools, and it's a good idea to do so. The web as a platform is a lot of different things to a lot of different people, it needs to expand and grow in order to cater to all. Restricting the tools for your project makes it easier to maintain, and easier to onboard new contributors.

I do this with TypeScript on my current contract, I limit its use to almost "JavaScript with Types", only using features (other than types) that have made it into core JS.

I understand the anxiety over the ever increasing pressure to have knowledge of all these APIs and features, but you don't need to. Being a good developer is having a wide but shallow (even only knowing the existence of something) understanding of the platforms. Enough to start. No "real" developers code without constantly referring to docs, or Googling (or using chatGPT) to help.

Personally there are a few new things coming I am super excited about. To call out one, the new "popup" element will apparently have its own stacking context, elevated to the top compositing layer, no mater how nested within other stacking contexts the node is. That's going to be the best things since sliced bread, lots of code I can simplify, bugs that will be easier to close. Other people won't have a need, and so don't need to even touch it.

What other features does TypeScript have? Genuinely curious, I haven't used TS much so I'm probably missing a bunch.

There aren't many. Enums[0] are probably the most common.

[0] https://www.typescriptlang.org/docs/handbook/enums.html

Enums are one example. They are compiled to objects existing at runtime rather than stripped out like types.

How do you express option/enum types without enums? And if you do that, isn't it more of an unsupported way of doing things than using the native enum type?

I guess unions of string or number literals?

    type Option = “foo” | “bar"

Yes, exactly this. For most purposes it's simpler and better than TS enums.

const assertions work well: https://devblogs.microsoft.com/typescript/announcing-typescr....

There is an example in the "Objects vs Enums" section of the Enum docs, at the bottom of the page: https://www.typescriptlang.org/docs/handbook/enums.html#obje...

Enum, namespace, type-oriented programming (e.g. https://type-level-typescript.com/ ), easy de-sugaring down to earlier versions of ECMAScript (e.g. converting async-await to switch statements).

Plus, whatever you can find under the "Reference" section: https://www.typescriptlang.org/docs/

The problem is you had a glimpse into ecosystem when it was normal. Now it is increasingly abnormal and new developers will be flooded with all this unnecessary clutter, so the chance they will get lost in the forest of bullshit will become higher and higher. Which will lead to even worse performing tools, pages etc.

Unless you write a browser engine. You can choose what to implement, but you are highly encouraged to implement what people use in the wild.

(this does not concern many people though - this is still somewhat important, a complex spec reduces potential implementations)

> That's going to be the best things since sliced bread, lots of code I can simplify, bugs that will be easier to close. Other people won't have a need, and so don't need to even touch it.

Just glancing it looks like it would simplify tooltips. Does it have wider implications than that?

Downdown/context menus that are attached to a node inside an "overflow: scroll" element. The common solution is to use a React "portal" or Vue "teleport" to move the element to the root of the body, but this has its own problems around accessibility and can often result in bugs during page transitions.

You don't need vue or react. Just get the x/y coords of the child relative to the parent and attach the dropdown element in an absolute position to those. A little measurement of the window and the elements is all that's necessary. People reach for these stupid frameworks with a million lines of code to do these incredibly trivial things you can do in 4 lines of Javascript.

Tooltips and fixed dropdowns pinned to the position of page elements are already fairly trivial to do... so are modals... so are dialog boxes... so are every other thing that needs to "Pop Up" on your webpage. I predict a very fast death spiral for this tag, in which 99% of the uses will be obnoxious.

You know how, uh, ad blockers used to be called "popup blockers"?

There's an order, a z-indexing that creates a syntax and a hierarchy in everything you build. Sometimes you have to jump it with absolute positioning. Which already exists for this exact purpose.

CSS itself has suffered from this same line of thinking, like, "what if something has to override a class and override a style, should we call it !important? Yeah!"

On a large complex single page webapp, it can be very non-trivial to have a popup/modal over everything else in the page. That’s why things like React Portals[0] exist, as well as many, many libraries that provide similar functionality. z-index is not an absolute number and depends on your stacking context. [0] https://react.dev/reference/react-dom/createPortal

How is what that's doing any different from figuring out element A's desired position in the coordinate space of the body, or in the local coordinate space of element B, and then appending it to one or the other in an absolute positioned wrapper? I've written very large single page webapps that have dropdown menus with sub-menus that are almost entirely CSS with just small amounts of vanilla JS to adjust their screen positions. Sometimes a really lightweight library is useful, but requiring the whole React framework seems like total overkill. On the other hand, adding a new HTML tag for the purpose of popup modals seems unnecessary.

What is the new "popup" element? Can you provide a link to some docs / proposal?

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

Thanks!

*popover attribute

https://hidde.blog/popover-semantics/

Reply on news.ycombinator.com