TABLE BASED WEB DESIGN

I was surprised there were no rants about this topic before I realized it was more than a decade back 😳

We've never had it better! So to help add a little perspective for all those ranting about what is unarguably the golden age for web developers... let me fill you in on web dev in the late 90's;

JavaScript was a joke. No seriously! - I once got laughed out of the room for suggesting we try use it for more than disabling a button - (I wanted to check out the new XHR request thingy [read AJAX]).

HTML was simple and purely a markup language (with the exception of the marquee tag). The tags were basically just p,ul,ol,h*,form inputs,img and table and html took 10 minutes to learn. Any style was inline and equally crude - anything that wasn't crude could not be trusted and probably wouldn't render at all in most browsers (never mind render correctly).

There were rumors of a style TAG and something called a cascading style sheet which were received with much skepticism since it went against the old ways and any time saved would be lost writing multiple [IE version specific] style sheets for each browser just to get it to work - so we simply didn't.

No CSS meant the only tags you had to work with to create a structured layout were br, hr and table... so naturally EVERYTHING was in nested tables! JS callback hell can't touch this! - it was not uncommon to have 50+ nested tables all with inline style in a single page which would be edited without any dev tools or linting.

You would spend 30 minutes scanning td tags until your eyes bled to find something, make a change, ftp the file to the server, reload the web page and then spend 10 minutes staring at the devastation on your screen convinced you broke
the internet before spotting an un-closed td tag with your bloodshot eyes.

Tables were not just a silver bullet - they were the ONLY bullet and were in the wild west!

Q: Want an inline form or to align your inputs left?
A: Duh table!

Q: Want a border with round-corners, a shadow or blur?
A: That's easy! Your gonna want to put that table in the center cell of another table then crop a image of the border into 6 smaller images to put in the surrounding cells... oh and then spend 10 minutes fucking with mystical attributes like cell-padding and valign to get them flush.

...But hey at least on the bright-side vertically & horizontally centering stuff was a breeze!

To all you devs still wet behind the ears ranting about css - you have no clue just how good you have it.

Most designs used to be table based (table-ception) and to give something a border with round corners or a "drop shadow" you would literally create a table to hold you content with an border of cells containing a background image of a corner / border.

Now you use border-radius or box-shadow as a 1 liner. Stop bitching about centering things and figure out how to hack it like we did.

If you remember this whats your least missed 20th century hack?

Learning CSS .
Understand CSS shadow today.
Did a little practice..
And come up with this. It's too easy..
Doing more practice just because it's fun 😄 I think that's why most coders code ! Because it's fun 😊 though I know it's not even "programming language" 😂

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?

Mozilla you stinking kangaroo pouches!

When you set an object's CSS translation via JS like so:
obj.style.transform="translate(0px,0px)";
and then read it back, every browser including FF until 66 gives this, with additional space:
"translate(0px, 0px)"

However, bloody FF 67 returns "translate(0px)". Because it's always a good idea to just introduce external changes nilly-willy, right?

That screwed up my crappy string slicing because it relied on the presence of the comma. It was a quick and dirty solution, but with additional future proof if/else logic, it wouldn't even be quick anymore.

Besides, the whole string slicing looked like yo-yo code anyway so that I instead added shadow integer variables to the objects. That solution not only works, but is even faster.

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.

So GitHub's "Repository Refresh" layout is live now and they haven't fixed the damn .repohead (with the repo name and the links to Issues, Pull Requests, etc.) stretchting across the entire screen instead of being constrained to the middle column :/

If it annoys you just as much as it does me, just wack this CSS into a user css extensions and it's fixed:

.repohead .d-flex:first-of-type {
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.repohead nav.js-repo-nav {
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.repohead .UnderlineNav {
/* Remove repohead bottom divider */
box-shadow: none;
background-color: transparent !important;
}
.repohead {
/* Add repohead bottom divider to repohead so it stretches across the entire screen */
box-shadow: inset 0 -1px 0 #e1e4e8;
}

Just hovering through some CSS. that's when I encountered this CSS stuff:

box-shadow: 0 0 20px gold;

Somebody, please lemme know what those first two 0's signify?

i'm trying to figure out how to work this;
The element now has an id of thumbnail. With this selector, use the example CSS values above to place a box-shadow on the card.

this is the css values;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

and this is the code i used;
.thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
but it's mot working on the fcc site.

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.

I fucking hate it that "front end developer" came to mean "data flow for react engineer". It seems most frontenders now don't understand shit about HTML and its standards, don't know anything about basic accessibility and proper content structuring.

It's even worse with the styling. Cascade? The fuck is cascade? Scope everything! And, of course, write that CSS as a JS object because how else. Fluid typography? If by fluid you mean 16px, sure. Any more advanced techniques? Lol forget you're getting rounded boxes with a shadow and you're gonna like them.

But yeah, I'm glad they're overengineering Redux again because their reactivity model is fundamentally broken. That's exactly what """frontend""" should be about.