Just wrote an article about how to code this with CSS. I'm new to writing stuff. Would love to hear what you guys think

Holy shit I had no idea we can use content: attr() in pseudo elements in css! It's a whole new world baby!

The ::before and ::after pseudo elements. I’ve spent an hour sometimes trying to figure out how to get some element to do something and not realizing it was because of those.

ChatGPT is so much better than Google:
instead of wasting my time by linking to unhelpful / outdated / unrelated StackOverflow resources, it tells me to do the work by myself right away:

> To ensure consistent pseudo-element width across different browsers, including Safari, you can follow these steps: [...]
> (some basic HTML/CSS 101 seemingly quoted from a 2015 textbook)
>
> It's important to note that browser behavior might vary due to different rendering engines or versions. While following best practices helps achieve consistent results, you might still encounter small discrepancies. Cross-browser testing is always recommended to ensure your design looks consistent across different browsers, including Safari.
>
> For any specific issues you encounter in Safari, consider checking for known bugs or quirks that might affect pseudo-elements and their sizing. Online resources, developer forums, and documentation can provide valuable insights into Safari-specific behavior and workarounds.

I wrote my first proper promise today

I'm building a State-driven, ajax fed Order/Invoice creation UI which Sales Reps use to place purchases for customers over the phone. The backend is a mutated PHP OSCommerce catalog which I've been making strides in refactoring towards OOP/eliminating spahgetti code and the need for a massive bootstrapper file which includes a ton of nonsense (I started by isolating the session and several crucial classes dealing with currency, language and the cart)

I'm using raw JS and jquery with copious reorganization.

I like state driven design, so I write all my data objects as classes using a base class with a simple attribute setter, and then extend the class and define it's attributes as an array which is passed to the parent setter in the construct.

I have also populateFromJson method in the parent class which allows me to match the attribute names to database fields in the backend which returns via ajax.

I achieve the state tracking by placing these objects into an array which underscore.js Observe watches, and that triggers methods to update the DOM or other objects.

Sure, I could do this in react but
1) It's in an admin area where the sales reps using it have to use edge/chrome/Firefox
2) I'm still climbing the react learning curve, so I can rapid prototype in jquery faster instead of getting hung up on something I don't understand
3) said admin area already uses jquery anyway
4) I like a challenge

Implementing promises is quickly turning messy jquery ajax calls into neat organized promise based operations that fit into my state tracking paradigm, so all jquery is responsible for is user interaction events.

The big flaw I want to address is that I'm still making html elements as JS strings to generate inputs/fields into the pseudo-forms.

Can anyone point me in the direction of a library or practice that allows me to generate Dom elements in a template-style manner.

Wanted for once use FireFox for dev / tooling.

Welp, it only took 1 page load to see why devs don't use it :

There is NO information on how long an ajax request took.

A lot of useless stuf like "Destination IP" (Who the fuck cares?) or "Initiator" (I already know where it started, I want to iknow how long it took).

That concludes my try to work with a non chromium browser and i'm sad. because chromium is a new IE6.

Don't belive me ? Look how websites manages checkboxes. Yes that's right with ::before and ::after.

These pseudo elements SHOULD NOT work in <input>. But they do in chromium. Which basicly a deal break to use firefox for our users.

Fuck you chromium. IE6 bis i'm gonna call you now

And FireFox : Please, just COPY dev tools of chromium, yours are unusable.

Ok, I feel better, going back to my bug.