The web is just a fucked up place. Anytime i have an idea and wanna slap together an mvp, i always feel like web standards are just made by people who have no professional training and once every year come up with some bullshit so they dont get fired.

Figure 1: cors
You wpuld think that setting "access-control-allow-origin" to * would let, well, * through, like in every other field of programming, but no, make sure all 97 other headers match or you will just get a cors error. The server expects application/json and you didnt specify that? Fuck you, have a cors error. Both express and flask have specific packages addressing this one problem so i guess im not the only one.

Figure 2: frameworks
Remember reactive programming? Remember rxjs? No you dont because all frameworks reimplement rx with shadow dom fuckery. Did you know you can have your fucking templates with 5 lines of rxjs code? Amazing huh?

Figure 3: php
It still exists for some reason.

Shadow DOMs – the WORST invention in web standard history.

As a user script and user style developer, the shadow DOM has been a massive headache. Shitow DOMs block custom CSS, blocks parts of the page from being saved, and blocks user scripts and browser extensions. Shitow DOMs are an utter nightmare, especially closed ones.

And now, Google Gerrit's entire user interface is shadowdoomed. The only way to save pages locally is to scrape the JSON from the developer tools, but that is not possible on mobile.

To all the front-end engineers here I have a question. Say I am trying to create reusable CSS web components how do you create them? Shadow Dom?.
If not then how do you make sure the custom elements that you create can be resued in other projects?

Html imports. Polyfil. Hey. Reading, this is awesome. <link rel=“import” href=“control.html”> what could be simpler? Deprecated front end. But only need it for developing. Will combine the files at the end.

Estimate converting php to pure html, couple of days.

Go to use it with polyfill (webcompnents.js htmlimport). Doesn’t work.

Try the light components. Doesn’t work.

Try server-side polymer. Doesn’t work.

So much documentation about it working. Then finally come across shadow dom and how html imports are associated with them.

Hell no they aren’t. They are completely different things. Oh. Google packaged them together? No one could agree on shadow dom, and its now going away? Taking the pure html way of combining files into one page with it???

Spent an entire freaking day. But got 8 lines of code and <link rel=“fetch” ...> to do the same thing.

Why hasn’t this been an html standard for say...years. Why can’t the server do a handshake with the client and serve one page (php-ish) if the feature isn’t supported. Otherwise multiple files asyc. I mean. This is a fundamental part of pwa’s.

Why are these obviously smart people so stupid??? Deploy you shitty shadow dom without this obviously useful feature...

Having fun with HTML5 custom elements and shadow DOM. Finally, a genuine way to make widget libraries.

Some time ago Ex-Boss, who's also a Dev, asks for some opinions about which JS framework we should use in our next project. I gave my 2 cents about react JS and he said no, react won't be any good, we must use Aurelia because it is backed up by Rob etc etc. At that moment I thought: wth is he asking, if he has already made its mind on Aurelia? As at that moment react was getting some hype and I knew the features and advantages, I kept going. Boss, react has shadow DOM. React has this, it has that etc. This discussion ended up with him raising his voice, telling me he is much more experienced than me and telling me to GTFO. That's what I did. And thanks God I did it. I respect other opinions and beliefs but If I'm asked to give my own opinion I will, even if they don't like it.

Is there a sane way to allow external styling of vanilla web components' shadow dom? Right now I do it by using 30 CSS variables, but I feel like there should be a better way.

The shadow DOM almost is DRM (digital rights management) in disguise. You can see it but you can't save it.

Don't forget who invented the shadow DOM: Google.

A year ago I built my first todo, not from a tutorial, but using basic libraries and nw.js, and doing basic dom manipulations.

It had drag n drop, icons, and basic saving and loading. And I was satisfied.

Since then I've been working odd jobs.

And today I've decided to stretch out a bit, and build a basic airtable clone, because I think I can.
And also because I hate anything without an offline option.

First thing I realized was I wasn't about to duplicate all the features of a spreadsheet from scratch. I'd need a base to work from.

I spent about an hour looking.
Core features needed would be trivial serialization or saving/loading.

Proper event support for when a cell, row, or column changed, or was selected. Necessary for triggering validation and serialization/saving.

Custom column types.

Embedding html in cells.

Reorderable columns

Optional but nice to have:

Changeable column width and row height.

Drag and drop on rows and columns.

Right click menu support out of the box.

After that hour I had a few I wanted to test.

And started looking at frameworks to support the SPA aspects.

Both mithril and riot have minimal router support. But theres also a ton of other leightweight frameworks and libraries worthy of prototyping in, solid, marko, svelte, etc.
I didn't want to futz with lots of overhead, babeling/gulping/grunting/webpacking or any complex configuration-over-convention.

Didn't care for dom vs shadow dom. Its a prototype not a startup.

And I didn't care to do it the "right way". Learning curve here was antithesis to experimenting. I was trying to get away from plugin, configuration-over-convention, astronaut architecture, monolithic frameworks, the works.

Could I import the library without five dozen dependancies and learning four different tools before getting to hello world?
"But if you know IJK then its quick to get started!", except I don't, so it won't. I didn't want that.

Could I get cheap component-oriented designs?

Was I managing complex state embedded in a monolith that took over the entire layout and conventions of my code, like the world balanced on the back of a turtle?

Did it obscure the dom and state, and the standard way of doing things or *compliment* those?

As for validation, theres a number of vanilla libraries, one of which treats validation similar to unit testing, which seems kinda novel.

For presentation and backend I could do NW.JS, which would remove some of the complications, by putting everything in one script. Or if I wanted to make it a web backend, and avoid writing it in something that ran like a potato strapped to a nuclear rocket (visual studio), I could skip TS and go with python and quart, an async variation of flask.
This has the advantage that using something thats *not* JS, namely python, for interacting with a proper database, and would allow self-hosting or putting it online so people can share data and access in real time with others.

And because I'm horrible, and do things the wrong way for convenience, I could use tailwind.
Because it pisses people off.

How easy (or hard) would it be to recreate a basic functional clone of the core of airtable?

I don't know, but I have feeling I'm going to find out!

HTML: Tags. I fucking hate them. Yes, Emmet makes it fast and simple to create them, but when restructuring or deleting things it becomes a mess every time. And I cant use a templating engine (i think it's called) at work, also I havent found one that I like.

CSS: Trying to apply CSS to Angular Bootrap Components. Everything has a shadow dom + a lot of things are ! important for some fucking reason.