Old CSS, new CSS
February 6, 2020 10:29 AM Subscribe
"I’m here to tell all of you to get off my lawn. Here’s a history of CSS and web design, as I remember it." 14,000-plus words from eevee at fuzzy notepad.
Whenever I want to freak out a web designer I just sidle up to them and whisper, "vertically centred."
posted by seanmpuckett at 10:50 AM on February 6, 2020 [24 favorites]
posted by seanmpuckett at 10:50 AM on February 6, 2020 [24 favorites]
I did an XHTML/XSLT site once, back in 2000. It was amazing what that could do, and equally amazing how, as noted in the article, it was completely incomprehensible. I more or less forgot all of it after the project was done.
posted by linux at 10:52 AM on February 6, 2020 [2 favorites]
posted by linux at 10:52 AM on February 6, 2020 [2 favorites]
The way I know I'm old is that I got to the part about imagemaps on the Space Jam website and noticed they were using the newer syntax that allowed you to actually code the specifics of an imagemap in the HTML, instead of using a CGI imagemap.
And then I freaked out because WHY DO I STILL REMEMBER THINGS ABOUT CGI IMAGEMAPS shouldn't that bit of grey matter be used for something more important, like redundant data storage for the phone number 867-5309 or something?
posted by chrominance at 10:59 AM on February 6, 2020 [22 favorites]
And then I freaked out because WHY DO I STILL REMEMBER THINGS ABOUT CGI IMAGEMAPS shouldn't that bit of grey matter be used for something more important, like redundant data storage for the phone number 867-5309 or something?
posted by chrominance at 10:59 AM on February 6, 2020 [22 favorites]
I did an XHTML/XSLT site once, back in 2000. It was amazing what that could do, and equally amazing how, as noted in the article, it was completely incomprehensible. I more or less forgot all of it after the project was done.
The ne plus ultra of my career in web development happened less than six months after I started working, shortly after my bright-eyed 22-year-old self chirped "Sure, I'm happy to learn XSLT and maintain all the transform templates that power this entire hundred-million-dollar enterprise." For reasons that I've blocked out of my memory entirely, I wrote a converter to transform some kind of hellscape SGML-splinter markup into compliant HTML. Notably, this required a translation from tables designed using a <td rowspan="3"> paradigm to tables using <td colspan="3">
If you've never had the pleasure of trying to implement negative lookahead into a functional programming language whose input, output, and source code are all XML, well, you're much luckier than I am.
posted by Mayor West at 11:01 AM on February 6, 2020 [11 favorites]
The ne plus ultra of my career in web development happened less than six months after I started working, shortly after my bright-eyed 22-year-old self chirped "Sure, I'm happy to learn XSLT and maintain all the transform templates that power this entire hundred-million-dollar enterprise." For reasons that I've blocked out of my memory entirely, I wrote a converter to transform some kind of hellscape SGML-splinter markup into compliant HTML. Notably, this required a translation from tables designed using a <td rowspan="3"> paradigm to tables using <td colspan="3">
If you've never had the pleasure of trying to implement negative lookahead into a functional programming language whose input, output, and source code are all XML, well, you're much luckier than I am.
posted by Mayor West at 11:01 AM on February 6, 2020 [11 favorites]
What would you rather the browser do, make its best guess about what you meant and then continue on through the parse tree like nothing's wrong?
Yes? Yes. This is the exact behavior I want, whenever possible. 1% wrong is 99% right. Wouldn't you rather display a page that's 99% right, than nothing at all?
posted by cowcowgrasstree at 11:12 AM on February 6, 2020 [28 favorites]
Yes? Yes. This is the exact behavior I want, whenever possible. 1% wrong is 99% right. Wouldn't you rather display a page that's 99% right, than nothing at all?
posted by cowcowgrasstree at 11:12 AM on February 6, 2020 [28 favorites]
Ctrl-F DSSSL … Phrase not found
oh sweet summer child …
DSSSL: a Scheme interpreter with embedded CSS-like styling clauses for down-converting SGML documents to a presentation form. It made XSLT seem like a great relief.
posted by scruss at 11:12 AM on February 6, 2020 [7 favorites]
oh sweet summer child …
DSSSL: a Scheme interpreter with embedded CSS-like styling clauses for down-converting SGML documents to a presentation form. It made XSLT seem like a great relief.
posted by scruss at 11:12 AM on February 6, 2020 [7 favorites]
Wow this takes me back and all I ever did was screw around with my Diaryland page and wonder why my embedded images only ever showed up on my computer*.
*It took me a while to realize file location on a hard drive≠file location on the internets
posted by Alvy Ampersand at 11:12 AM on February 6, 2020 [9 favorites]
*It took me a while to realize file location on a hard drive≠file location on the internets
posted by Alvy Ampersand at 11:12 AM on February 6, 2020 [9 favorites]
Whenever I want to freak out a web designer I just sidle up to them and whisper, "vertically centred."
Then mention that if vertical centering still freaks them out, they will have trouble finding their next job.
posted by michaelh at 11:14 AM on February 6, 2020 [6 favorites]
Then mention that if vertical centering still freaks them out, they will have trouble finding their next job.
posted by michaelh at 11:14 AM on February 6, 2020 [6 favorites]
Wow this might just be exactly what I've been praying for - a snarky and interesting way into understanding WTF CSS by learning its history from someone who is really savvy. I'm here at my 9 to 5 doing java web development for a big corp and I have zero training in the actual front end technologies (mad respect to all of you who've learned on your own but I've got kids to deal with at home and no time to tinker off the clock). I've been fighting with a CSS issue that's making me crazy for the last day and a half. Can't wait to read all of this.
posted by kitcat at 11:16 AM on February 6, 2020 [4 favorites]
posted by kitcat at 11:16 AM on February 6, 2020 [4 favorites]
Whenever I want to freak out a web designer I just sidle up to them and whisper, "vertically centred."
Install/include Tailwind, then 'Neat!' gets you vertically- AND horizontally-centered div for a minimum amount of pain.
I hear "vertically centered" today and I get a little thrill, knowing how easy it is and how easy it didn't used to be.
posted by Imperfect at 11:19 AM on February 6, 2020 [3 favorites]
Install/include Tailwind, then 'Neat!' gets you vertically- AND horizontally-centered div for a minimum amount of pain.
I hear "vertically centered" today and I get a little thrill, knowing how easy it is and how easy it didn't used to be.
posted by Imperfect at 11:19 AM on February 6, 2020 [3 favorites]
Yeah, the whole thing about XHTML erroring out at the first opportunity was a feature that looked so very much like a bug. The contrived examples about "well, what if malformed HTML made you think your bank account balance was different" or whatever were so utterly tonedeaf in the face of the actual problems of stitching together a website from a bunch of different templates, or handling user-submitted content, or pretty much anything that is a mainstay of web development today.
Yes, you should validate. Yes, your HTML should be well-formed. No, the website shouldn't break at the slightest error. Ambiguous cases should be standardized, which is what HTML 5 does.
posted by Aleyn at 11:24 AM on February 6, 2020 [2 favorites]
Yes, you should validate. Yes, your HTML should be well-formed. No, the website shouldn't break at the slightest error. Ambiguous cases should be standardized, which is what HTML 5 does.
posted by Aleyn at 11:24 AM on February 6, 2020 [2 favorites]
The worst thing about XHTML was that either a browser had to wait until the entire document was downloaded (remember, modems were still pretty common at this point) in order to error-check before rendering (which AFAIK, none did), or they had to both optimistically render partial markup (which isn't well-formed by definition) and then, after that partial render, throw it all away and display a goddamn error message once it *did* run into an error.
posted by Aleyn at 11:29 AM on February 6, 2020 [1 favorite]
posted by Aleyn at 11:29 AM on February 6, 2020 [1 favorite]
We made a shirt for a web developer friend of ours that read "No font tags since 1998" and, hilariously, he would wear it proudly on the street.
posted by Ashwagandha at 11:30 AM on February 6, 2020 [3 favorites]
posted by Ashwagandha at 11:30 AM on February 6, 2020 [3 favorites]
Yes, you should validate.
This website is best viewed in Internet Explorer.
posted by Thorzdad at 11:42 AM on February 6, 2020 [2 favorites]
This website is best viewed in Internet Explorer.
posted by Thorzdad at 11:42 AM on February 6, 2020 [2 favorites]
Yeah, the whole thing about XHTML erroring out at the first opportunity was a feature that looked so very much like a bug.
On the other hand, one feature it afforded to pedantic teenage nerds was to be able to proudly feature the fact that the page was written in XHTML along with a badge that linked to the W3C validator.
Anyway, it’s seemingly lost to the mists of time, but I’m still kind of proud of the k10k rip-off design I made for my homepage. Made my own pixel art borders and everything, and naturally arranged it all with tables.
posted by invitapriore at 11:56 AM on February 6, 2020 [5 favorites]
On the other hand, one feature it afforded to pedantic teenage nerds was to be able to proudly feature the fact that the page was written in XHTML along with a badge that linked to the W3C validator.
Anyway, it’s seemingly lost to the mists of time, but I’m still kind of proud of the k10k rip-off design I made for my homepage. Made my own pixel art borders and everything, and naturally arranged it all with tables.
posted by invitapriore at 11:56 AM on February 6, 2020 [5 favorites]
This was such a cathartic read for me when I first came across it. I got started knocking together HTML back in 1995, and did a pretty good job of keeping up with front end code through many of the trends mentioned in this article, but just around the time everyone decided on jQuery instead of Prototype, around the time when the combination of mobile devices and Chrome's growing power in the space was blowing up, professionally, I shifted to working entirely on backend code - scripting, database management, server management. It already felt like people were needlessly reinventing several aspects of frontend development in ways that drew out the process more than it should be. At the time, back-end devs in my company half-joked that front-end front-end development isn't real development.
And that's around the time it became "real" development. Juggling different frameworks and naming conventions and trendy libraries... I'd do code reviews and see a lot of jumping through hoops to do something in a framework that seemed simple if you'd only, you know, put in a decade or so of constant work on the existing baseline paradigm, and test across browsers. Front-end got really hard!
Last year I relaunched a website I'd started in 1999. Rewrote the whole presentation layer from scratch. I was able to create a dynamic, mobile-friendly interface with interesting browser interactions and interesting design elements without using a single javascript framework, without multiple lines of browser-specific CSS, without weird clearfix bullshit, it was wonderful. I feel a bit like I dodged participating in a very stressful war. I at least took the opportunity to learn about building a PWA from my site, since that's been an acronym of note in the industry I work in professionally.
But just like watching a documentary on the Bush presidency (heh), having someone walk through all the things I'd known and since forgot was an important reminder of how we got to where we are today - the good, the bad, and the potential for more in either direction.
posted by Leviathant at 12:17 PM on February 6, 2020 [8 favorites]
And that's around the time it became "real" development. Juggling different frameworks and naming conventions and trendy libraries... I'd do code reviews and see a lot of jumping through hoops to do something in a framework that seemed simple if you'd only, you know, put in a decade or so of constant work on the existing baseline paradigm, and test across browsers. Front-end got really hard!
Last year I relaunched a website I'd started in 1999. Rewrote the whole presentation layer from scratch. I was able to create a dynamic, mobile-friendly interface with interesting browser interactions and interesting design elements without using a single javascript framework, without multiple lines of browser-specific CSS, without weird clearfix bullshit, it was wonderful. I feel a bit like I dodged participating in a very stressful war. I at least took the opportunity to learn about building a PWA from my site, since that's been an acronym of note in the industry I work in professionally.
But just like watching a documentary on the Bush presidency (heh), having someone walk through all the things I'd known and since forgot was an important reminder of how we got to where we are today - the good, the bad, and the potential for more in either direction.
posted by Leviathant at 12:17 PM on February 6, 2020 [8 favorites]
I don't think anyone thinks of HTML as some "advanced programming language", but it is definitely an important part of front-end development. You can absolutely do stuff the same complexity of the HTML 1.0-era with today's tools with the same ease, if not more. But it's still going to look just as bad. As soon as you want to start doing something more complex, that scales by resolution, that maintains usability to those with disabilities, well, of course it's going to get more difficult - the task itself is more complex.
Honestly, it's way easier to publish on the web than it has EVER been. Sure, HTML used to be "simpler", but getting that HTML hosted somewhere was not. And if democratizing user voices is the idea, with modern WYSIWYG editors and the wide variety of publishing platforms, today has a massive edge over the "good ol' days". If you have $5/month, you can host your own WordPress or Ghost installation, or if you don't, you can write on Medium, wp.com, or a variety of other free, hosted services.
I have a lot of nostalgia for the early web, but it's tempered with a healthy dose of mindfulness of just how arcane the technology behind the technology actually was, and how much work has gone into making things so, so much easier for modern users to just sit down and use the internet.
posted by Imperfect at 12:17 PM on February 6, 2020 [10 favorites]
Honestly, it's way easier to publish on the web than it has EVER been. Sure, HTML used to be "simpler", but getting that HTML hosted somewhere was not. And if democratizing user voices is the idea, with modern WYSIWYG editors and the wide variety of publishing platforms, today has a massive edge over the "good ol' days". If you have $5/month, you can host your own WordPress or Ghost installation, or if you don't, you can write on Medium, wp.com, or a variety of other free, hosted services.
I have a lot of nostalgia for the early web, but it's tempered with a healthy dose of mindfulness of just how arcane the technology behind the technology actually was, and how much work has gone into making things so, so much easier for modern users to just sit down and use the internet.
posted by Imperfect at 12:17 PM on February 6, 2020 [10 favorites]
This website is best viewed in Internet Explorer.
Internet Explorer 6, for full, proper hideousness.
posted by bonehead at 12:21 PM on February 6, 2020 [3 favorites]
Internet Explorer 6, for full, proper hideousness.
posted by bonehead at 12:21 PM on February 6, 2020 [3 favorites]
I think the act of posting pure HTML and CSS, with a sprinkling of images and whatnot, is easier to access than ever before; a free Github account will work, I think.
The problem with bootstrapping a site nowadays is that the easy options that only require you to know your way around a text editor and some markup languages puts you in the Geocities era: you can post individual pages and keep them updated, but all the problems with managing content in the early days of the web (like having to manually update links to archived content!) still exist. If you want to maintain a blog this way, it's annoying but doable. If you want to maintain anything more complicated than a blog, good luck.
The next level of complexity, where you start to think of a site less as a collection of notes and more like a content management system, is a way bigger jump now. Static site generators will still work on Github Pages, thankfully, but boy is setting one up kind of a pain. You could try installing Wordpress on a local LAMP/WAMP system but that's old school; the newer fresher way of doing this stuff is in a VM, probably powered by Docker or Vagrant or something, and interacting with it that way.
Want to do neat Javascript stuff? You can grab starter kits for most major frameworks, but they're highly opinionated and may lock you into weird ways of working, and they STILL run in VMs and bring additional complexity compared to a decade or two ago. If you don't do any of that, you're setting up a build pipeline manually, installing a whole bunch of node modules and doing some configuration (sorry, but I don't believe webpack when they say they're zero-config: for some small handful of use cases, maybe).
And on and on it goes. You have so many options for running back-end stuff now, including... not running one and relying on APIs and cloud services to store and manage your data. But each one has their own quirks and occasionally feels much more complicated than putting a server on the internet with Apache and some other stuff. And the tradeoff for all this is that setups are much easier to duplicate and make consistent, overall being a much more professional and rigorous way of doing things. But to just get started, knowing HTML and CSS feels like a fraction of the first step you'd need to take. You have barely more ability at that point than someone who only knows Markdown or BBCode.
posted by chrominance at 12:34 PM on February 6, 2020 [5 favorites]
The problem with bootstrapping a site nowadays is that the easy options that only require you to know your way around a text editor and some markup languages puts you in the Geocities era: you can post individual pages and keep them updated, but all the problems with managing content in the early days of the web (like having to manually update links to archived content!) still exist. If you want to maintain a blog this way, it's annoying but doable. If you want to maintain anything more complicated than a blog, good luck.
The next level of complexity, where you start to think of a site less as a collection of notes and more like a content management system, is a way bigger jump now. Static site generators will still work on Github Pages, thankfully, but boy is setting one up kind of a pain. You could try installing Wordpress on a local LAMP/WAMP system but that's old school; the newer fresher way of doing this stuff is in a VM, probably powered by Docker or Vagrant or something, and interacting with it that way.
Want to do neat Javascript stuff? You can grab starter kits for most major frameworks, but they're highly opinionated and may lock you into weird ways of working, and they STILL run in VMs and bring additional complexity compared to a decade or two ago. If you don't do any of that, you're setting up a build pipeline manually, installing a whole bunch of node modules and doing some configuration (sorry, but I don't believe webpack when they say they're zero-config: for some small handful of use cases, maybe).
And on and on it goes. You have so many options for running back-end stuff now, including... not running one and relying on APIs and cloud services to store and manage your data. But each one has their own quirks and occasionally feels much more complicated than putting a server on the internet with Apache and some other stuff. And the tradeoff for all this is that setups are much easier to duplicate and make consistent, overall being a much more professional and rigorous way of doing things. But to just get started, knowing HTML and CSS feels like a fraction of the first step you'd need to take. You have barely more ability at that point than someone who only knows Markdown or BBCode.
posted by chrominance at 12:34 PM on February 6, 2020 [5 favorites]
This was an era of blind copy/pasting in the frustrated hopes of making the damn thing work.
...was?
posted by entropone at 12:35 PM on February 6, 2020 [16 favorites]
...was?
posted by entropone at 12:35 PM on February 6, 2020 [16 favorites]
Oh, also: pour one out for <tt>. Or don't, because it still works decades later, even though no one would bother using it even for ironic reasons because it's not terrible enough.
posted by chrominance at 12:44 PM on February 6, 2020 [3 favorites]
posted by chrominance at 12:44 PM on February 6, 2020 [3 favorites]
I'm only about a quarter of the way through this and now all I want is for full HTML to be enabled just on this post so we can try some of the things out and bring back the
posted by Mchelly at 12:52 PM on February 6, 2020 [2 favorites]
posted by Mchelly at 12:52 PM on February 6, 2020 [2 favorites]
This was a great read. I still wonder if (despite occasional pleas for more semantic markup) HTML is heading towards just making everything be differently-styled <div> tags, at which point one might as well save three bytes per element and just not use tag names at all, <style="display: inline; font-style: italic">like this</>.
posted by doop at 1:05 PM on February 6, 2020
posted by doop at 1:05 PM on February 6, 2020
I think the semantic web is totally dead. Years ago I’d have found that sad, but now I’m not really sure if it was ever feasible.
posted by invitapriore at 1:08 PM on February 6, 2020 [3 favorites]
posted by invitapriore at 1:08 PM on February 6, 2020 [3 favorites]
As a web designer turned "web design educator" this was a fun tour of the past and a good recap of what CSS is useful for in the present.
A few comments on the state of modern web development. As the article states, CSS is capable of so much these days. Here's an image of Eric Meyer's 4th edition of the CSS Definitive guide. Coming in at over 1,000 pages it's twice the size of the previous two editions combined.
This has some ramifications: First of all, for experts, it's increasingly more difficult to keep track of everything the language can do, never mind *how* to do it. Like other disciplines you now have specialists, someone who is a CSS Animation whiz, for example, might not know the first thing about CSS Grid, a relatively new layout feature. For the most part this is manageable, although it can cause a lot of anxiety as to whether one is falling behind.
For beginners, it's a very mixed bag. One on hand it's much easier to get up and running than it ever was. On the other hand, the road to "mastery", however you define that, is so much steeper than it ever was.
This is why I recommend beginners be very careful of diving too quickly into shortcuts like Bootstrap and Tailwind, the power they have is deceptive if you don't understand the basics.
posted by jeremias at 1:40 PM on February 6, 2020 [5 favorites]
A few comments on the state of modern web development. As the article states, CSS is capable of so much these days. Here's an image of Eric Meyer's 4th edition of the CSS Definitive guide. Coming in at over 1,000 pages it's twice the size of the previous two editions combined.
This has some ramifications: First of all, for experts, it's increasingly more difficult to keep track of everything the language can do, never mind *how* to do it. Like other disciplines you now have specialists, someone who is a CSS Animation whiz, for example, might not know the first thing about CSS Grid, a relatively new layout feature. For the most part this is manageable, although it can cause a lot of anxiety as to whether one is falling behind.
For beginners, it's a very mixed bag. One on hand it's much easier to get up and running than it ever was. On the other hand, the road to "mastery", however you define that, is so much steeper than it ever was.
This is why I recommend beginners be very careful of diving too quickly into shortcuts like Bootstrap and Tailwind, the power they have is deceptive if you don't understand the basics.
posted by jeremias at 1:40 PM on February 6, 2020 [5 favorites]
<blink>argh!</blink>
posted by JohnFromGR at 1:40 PM on February 6, 2020 [1 favorite]
posted by JohnFromGR at 1:40 PM on February 6, 2020 [1 favorite]
Whenever I want to freak out a web designer I just sidle up to them and whisper, "vertically centred.
hey now, no need to be so cruel
/web developer
posted by supermedusa at 1:42 PM on February 6, 2020 [1 favorite]
hey now, no need to be so cruel
/web developer
posted by supermedusa at 1:42 PM on February 6, 2020 [1 favorite]
you can still use the blink tag on MeFi; it's the browsers that stopped rendering it
posted by cortex at 1:49 PM on February 6, 2020 [17 favorites]
posted by cortex at 1:49 PM on February 6, 2020 [17 favorites]
I think the semantic web is totally dead. Years ago I’d have found that sad, but now I’m not really sure if it was ever feasible.
It's dead in the sense that it passed, but it's not gone: its ghost lives on in JSON. Enough developers became convinced that serializing in a tree of object/array literals was better than a tree of markup. This is within the spirit of the semantic web, as it's perfectly fine to prefer a specific media type for a given resource, but like a ghost is less substantial, so is this approach: a fully-fleshed living semantic application would as readily negotiate serialized data as semantic markup as anything else. But, who has the time?
I still think about my applications this way when I have the latitude: semantics/data first, media type second, progressive enhancement third. The grand vision of enlightened AI user agents operating over RDF and microformats and semi-to-un-structured data alike has passed beyond the cloud, but the engineering benefits of this practice remain where it can be brought to bear.
posted by weston at 2:04 PM on February 6, 2020
It's dead in the sense that it passed, but it's not gone: its ghost lives on in JSON. Enough developers became convinced that serializing in a tree of object/array literals was better than a tree of markup. This is within the spirit of the semantic web, as it's perfectly fine to prefer a specific media type for a given resource, but like a ghost is less substantial, so is this approach: a fully-fleshed living semantic application would as readily negotiate serialized data as semantic markup as anything else. But, who has the time?
I still think about my applications this way when I have the latitude: semantics/data first, media type second, progressive enhancement third. The grand vision of enlightened AI user agents operating over RDF and microformats and semi-to-un-structured data alike has passed beyond the cloud, but the engineering benefits of this practice remain where it can be brought to bear.
posted by weston at 2:04 PM on February 6, 2020
you can still use the blink tag on MeFi; it's the browsers that stopped rendering it
Hey, aren't you the <blink> tag? You used to be big.
— I am big. It's the browsers that got small.
posted by Joe in Australia at 2:08 PM on February 6, 2020 [4 favorites]
Hey, aren't you the <blink> tag? You used to be big.
— I am big. It's the browsers that got small.
posted by Joe in Australia at 2:08 PM on February 6, 2020 [4 favorites]
Also, while we're on the topic: CSS frameworks. Does anyone have recommendations for a recent/current one that:
* does not assume or require JS (including a blessed method of download/install that involves no package managers)
* has sane / graceful helpers for handling layout across different media size / viewport dimensions
* is semantic-friendly (class names are about what things ARE more than presentation specifics, extensibility/customization is pushed to CSS variables or mixins rather than loading a basket of class names into an element property)
* has good looking defaults
* is on the lighter side -- ~30KB at the top end, smaller is better.
* if possible, is not overly attached to any one pre-processor, or dependent on an external reset stylesheet (circumspect about resets in general is a plus).
posted by weston at 2:15 PM on February 6, 2020
* does not assume or require JS (including a blessed method of download/install that involves no package managers)
* has sane / graceful helpers for handling layout across different media size / viewport dimensions
* is semantic-friendly (class names are about what things ARE more than presentation specifics, extensibility/customization is pushed to CSS variables or mixins rather than loading a basket of class names into an element property)
* has good looking defaults
* is on the lighter side -- ~30KB at the top end, smaller is better.
* if possible, is not overly attached to any one pre-processor, or dependent on an external reset stylesheet (circumspect about resets in general is a plus).
posted by weston at 2:15 PM on February 6, 2020
trying to implement negative lookahead into a functional programming language whose input, output, and source code are all XML
Good lord, man. At least hold a flashlight under your chin and use a sPoOKy vOicE when you say things like that.
posted by Mr. Bad Example at 2:41 PM on February 6, 2020 [5 favorites]
Good lord, man. At least hold a flashlight under your chin and use a sPoOKy vOicE when you say things like that.
posted by Mr. Bad Example at 2:41 PM on February 6, 2020 [5 favorites]
There are probably others out there, but Shoelace always seemed nice to me.
Bulma isn't bad either, and has great documentation.
posted by schmod at 2:42 PM on February 6, 2020 [2 favorites]
Bulma isn't bad either, and has great documentation.
posted by schmod at 2:42 PM on February 6, 2020 [2 favorites]
I've always been a hobbyist at this stuff, but yes, I remember all the old stuff in there. Like everyone else, I learned how to do stuff (badly) by viewing source, and it was a revelation when I figured out that the <p> tag was meant to be a containing element for paragraphs, not a separator between them. I remember using <blockquote> to add some margins around my text, until one day some browser decided "you know, I'm going to render block quotes in italics." So much for that plan.I remember websites that would share "holy grail" layouts with CSS you could cut and paste to get the ideal full-width banner followed by main content and 2 sidebars. I remember looking at box-model hacks so that my website would render correctly in IE and thinking "fuck it."
I don't have as much call to write handcrafted HTML or CSS any more, but when I do, I try to make it semantic. I have to hack on a proprietary and very bad form of XML (the DTD was written in 1999) in my day job now, and taught myself XSLT to get one of our documents into a usable form. That was fun.
posted by adamrice at 3:00 PM on February 6, 2020
I don't have as much call to write handcrafted HTML or CSS any more, but when I do, I try to make it semantic. I have to hack on a proprietary and very bad form of XML (the DTD was written in 1999) in my day job now, and taught myself XSLT to get one of our documents into a usable form. That was fun.
posted by adamrice at 3:00 PM on February 6, 2020
Also, I'm a little surprised the article never mentions David Siegel, who I think had an outsized and negative impact on the early web, advocating for table layout and pictures of words. Man, remember that? Pictures of words.
posted by adamrice at 3:06 PM on February 6, 2020 [6 favorites]
posted by adamrice at 3:06 PM on February 6, 2020 [6 favorites]
On the other hand, one feature it afforded to pedantic teenage nerds was to be able to proudly feature the fact that the page was written in XHTML along with a badge that linked to the W3C validator.
As the most pedantic teenage nerd, I built an entire complex website that was generated by building a DOM tree on the server before outputting the (X)HTML, so it was essentially impossible for it to produce malformed output. It was a total waste of time, but by golly I earned that badge.
and then, after that partial render, throw it all away and display a goddamn error message once it *did* run into an error
The XML spec doesn't require this. If the parser detects an error, it needs to stop passing parsed data up to the browser engine, but the browser has no obligation to throw away content it's already received or rendered.
posted by grahamparks at 3:52 PM on February 6, 2020 [2 favorites]
As the most pedantic teenage nerd, I built an entire complex website that was generated by building a DOM tree on the server before outputting the (X)HTML, so it was essentially impossible for it to produce malformed output. It was a total waste of time, but by golly I earned that badge.
and then, after that partial render, throw it all away and display a goddamn error message once it *did* run into an error
The XML spec doesn't require this. If the parser detects an error, it needs to stop passing parsed data up to the browser engine, but the browser has no obligation to throw away content it's already received or rendered.
posted by grahamparks at 3:52 PM on February 6, 2020 [2 favorites]
Wouldn't you rather display a page that's 99% right, than nothing at all?
Isn't it pretty to think so? I did a site in XHTML Strict because I love to be punished, and if you had the tiniest most inconsequential error you got a scary blank red page.
posted by kirkaracha at 3:56 PM on February 6, 2020 [2 favorites]
Isn't it pretty to think so? I did a site in XHTML Strict because I love to be punished, and if you had the tiniest most inconsequential error you got a scary blank red page.
posted by kirkaracha at 3:56 PM on February 6, 2020 [2 favorites]
Also, while we're on the topic: CSS frameworks. Does anyone have recommendations for a recent/current one
Tailwind has lots of fans.
posted by kirkaracha at 3:57 PM on February 6, 2020 [2 favorites]
Tailwind has lots of fans.
posted by kirkaracha at 3:57 PM on February 6, 2020 [2 favorites]
CSS Zen Garden is a longtime resource for showing how CSS can change the same HTML markup.
The markup for this table is overflowing with inexplicable blank lines
Sometimes you needed blank lines. Sometimes you needed a space character. Or a non-breaking space. Sometimes one would work in Netscape and wouldn't work in Internet Explorer. Or the other way around. It was a land of contrasts.
posted by kirkaracha at 4:05 PM on February 6, 2020 [2 favorites]
The markup for this table is overflowing with inexplicable blank lines
Sometimes you needed blank lines. Sometimes you needed a space character. Or a non-breaking space. Sometimes one would work in Netscape and wouldn't work in Internet Explorer. Or the other way around. It was a land of contrasts.
posted by kirkaracha at 4:05 PM on February 6, 2020 [2 favorites]
Can I just say, that "Barkley" game she links to is the most absurd, offensive, surreal, and addictive thing I've seen in a long time.
posted by Citrus at 6:28 PM on February 6, 2020 [1 favorite]
posted by Citrus at 6:28 PM on February 6, 2020 [1 favorite]
Yes? Yes. This is the exact behavior I want, whenever possible. 1% wrong is 99% right. Wouldn't you rather display a page that's 99% right, than nothing at all?
What if that 1% is the call-to-action or buy button? If things fail 1% of the time, that’s 3.6 days per year of things being fucked. There’s more than one website where that 3.6 days per years translates to a billion dollars in lost revenue, depending on which 3.6 days it is.
posted by sideshow at 9:25 PM on February 6, 2020
What if that 1% is the call-to-action or buy button? If things fail 1% of the time, that’s 3.6 days per year of things being fucked. There’s more than one website where that 3.6 days per years translates to a billion dollars in lost revenue, depending on which 3.6 days it is.
posted by sideshow at 9:25 PM on February 6, 2020
I think the point in the article that CSS Grid isn't that new anymore is a good one. Part of the complexity of CSS is having to find weird hacks around not being able to arrange things on a grid, or needing this element to be over here, and that problem is largely solved if you use modern tools instead of doing the hacks.
What if that 1% is the call-to-action or buy button? If things fail 1% of the time, that’s 3.6 days per year of things being fucked. There’s more than one website where that 3.6 days per years translates to a billion dollars in lost revenue, depending on which 3.6 days it is.
I feel like you don't need the browser to tell you that you're no longer making sales.
Can I just say, that "Barkley" game she links to is the most absurd, offensive, surreal, and addictive thing I've seen in a long time.
Please tell me this is the first time you've come across Shut Up and Jam Gaiden.
posted by Merus at 10:24 PM on February 6, 2020 [1 favorite]
What if that 1% is the call-to-action or buy button? If things fail 1% of the time, that’s 3.6 days per year of things being fucked. There’s more than one website where that 3.6 days per years translates to a billion dollars in lost revenue, depending on which 3.6 days it is.
I feel like you don't need the browser to tell you that you're no longer making sales.
Can I just say, that "Barkley" game she links to is the most absurd, offensive, surreal, and addictive thing I've seen in a long time.
Please tell me this is the first time you've come across Shut Up and Jam Gaiden.
posted by Merus at 10:24 PM on February 6, 2020 [1 favorite]
Yes, everyone used tables for their layout, because they were lucky ones who got to run Netscape. Mosaic, which was the only visual browser that ran on my DECstation 3100, did not deal with variable-width fonts in table cells. So I, an innocent fool, pleaded with web developers to offer a Mosaic version with <tt>.
posted by away for regrooving at 11:28 PM on February 6, 2020 [2 favorites]
posted by away for regrooving at 11:28 PM on February 6, 2020 [2 favorites]
And nobody believes me anymore when I tell them that the point of Java used to be to run in special penalty boxes inside web pages!
posted by away for regrooving at 11:29 PM on February 6, 2020 [3 favorites]
posted by away for regrooving at 11:29 PM on February 6, 2020 [3 favorites]
What a trip down memory lane. And it’s one article where reading the comments is the cherry on top of the cake. As someone who used to sneer at websites that broke when JS was turned off, grit her teeth over Drupal’s div-itis output and hack things to strip it out for cleaner, more semantic output, the last part of the article almost makes me want to dust off and update that knowledge.
Almost. I cop to having a mental block over accepting JS as our new lord and savior. :P
posted by romakimmy at 12:50 AM on February 7, 2020 [1 favorite]
Almost. I cop to having a mental block over accepting JS as our new lord and savior. :P
posted by romakimmy at 12:50 AM on February 7, 2020 [1 favorite]
If you're getting salty because a freaking SYNTAX ERROR in your markup causes the page not to render, I have some serious concerns about your webmaster chops. What would you rather the browser do, make its best guess about what you meant and then continue on through the parse tree like nothing's wrong?
There was an extended period of time in which I served my website with a "Content-Type: application/xhtml+xml" header which forced browsers to parse it strictly as XHTML and to bomb out with a syntax error if I'd made a single mistake.
It worked just fine because my markup was, naturally, entirely free of errors. Unfortunately, several browsers of the time choked on the Content-Type header at all and couldn't render it, no matter what. So I had to revert to "Content-Type: text/html".
What I'm saying is that I am perfect, and incapable of error, and you all live in a world which has fallen short of my glory.
posted by qntm at 1:33 AM on February 7, 2020 [8 favorites]
There was an extended period of time in which I served my website with a "Content-Type: application/xhtml+xml" header which forced browsers to parse it strictly as XHTML and to bomb out with a syntax error if I'd made a single mistake.
It worked just fine because my markup was, naturally, entirely free of errors. Unfortunately, several browsers of the time choked on the Content-Type header at all and couldn't render it, no matter what. So I had to revert to "Content-Type: text/html".
What I'm saying is that I am perfect, and incapable of error, and you all live in a world which has fallen short of my glory.
posted by qntm at 1:33 AM on February 7, 2020 [8 favorites]
I, too, was wooed by the rigid Correctness of XHTML, at the time.
Once, when the topic of The Semantic Web came up, a friend of mine opined:
Once, when the topic of The Semantic Web came up, a friend of mine opined:
"I'd rather have a bottle in front of me than an inflexible ontology."posted by rum-soaked space hobo at 3:30 AM on February 7, 2020 [5 favorites]
Yes? Yes. This is the exact behavior I want, whenever possible. 1% wrong is 99% right. Wouldn't you rather display a page that's 99% right, than nothing at all?
Of all the things I said yesterday, I did not expect "hard parse errors should blow up the rendering engine" to be the contentious one.
My concern is that, if you have an honest-to-god syntax error in your markup, it (usually) means you have an opening tag that doesn't have a matching end tag. It's easy enough to ignore this, and just keep pushing/popping stuff off the stack until you hit the end of the document or a stack underflow error, but what you get out will not be 99% right; it'll be 100% right from the first character in the document right up until the error, and then it will be a dog's breakfast as the parser tries desperately to figure out what you meant. What does that closing </li> mean? Who knows! The author intended it to close the list element that he's using for document formatting (because it's 2004 and that's how we roll), but he mistyped the opening tag as <lu> and ignored the warnings, so now we have a close-element tag emitted with no corresponding element open. Do we ignore it? Try to match it up to any other <li> that's open, even if that's three or four levels up the hierarchy? If the latter, do we treat it like the author intended to close every other tag in between that floating <li> and the current context, and add a bunch of close-element symbols to keep the tree balanced?
The answer to all those questions is "‾\_(ツ)_/‾", to within an order of approximation. There's no "right" answer because a "right" answer means we'd have to know what the authorial intent was, but this is a context-free grammar so we have nothing of the sort. We could guess (which is what browsers mostly do now), but every engine will guess differently, which might mean that every IE browser gets it right and displays your page like you intended, while Firefox and Chrome guess wrong and give you a page that's completely unreadable to the human eye, starting halfway through the document and occurring below the fold so no one notices it from a quick perusal.
Given the choice between "blows up spectacularly" and "fails intermittently and insidiously," I'll always take the angry error message. But then, I'm a programmer type, so maybe that that with the requisite grain of salt.
posted by Mayor West at 6:20 AM on February 7, 2020 [7 favorites]
Of all the things I said yesterday, I did not expect "hard parse errors should blow up the rendering engine" to be the contentious one.
My concern is that, if you have an honest-to-god syntax error in your markup, it (usually) means you have an opening tag that doesn't have a matching end tag. It's easy enough to ignore this, and just keep pushing/popping stuff off the stack until you hit the end of the document or a stack underflow error, but what you get out will not be 99% right; it'll be 100% right from the first character in the document right up until the error, and then it will be a dog's breakfast as the parser tries desperately to figure out what you meant. What does that closing </li> mean? Who knows! The author intended it to close the list element that he's using for document formatting (because it's 2004 and that's how we roll), but he mistyped the opening tag as <lu> and ignored the warnings, so now we have a close-element tag emitted with no corresponding element open. Do we ignore it? Try to match it up to any other <li> that's open, even if that's three or four levels up the hierarchy? If the latter, do we treat it like the author intended to close every other tag in between that floating <li> and the current context, and add a bunch of close-element symbols to keep the tree balanced?
The answer to all those questions is "‾\_(ツ)_/‾", to within an order of approximation. There's no "right" answer because a "right" answer means we'd have to know what the authorial intent was, but this is a context-free grammar so we have nothing of the sort. We could guess (which is what browsers mostly do now), but every engine will guess differently, which might mean that every IE browser gets it right and displays your page like you intended, while Firefox and Chrome guess wrong and give you a page that's completely unreadable to the human eye, starting halfway through the document and occurring below the fold so no one notices it from a quick perusal.
Given the choice between "blows up spectacularly" and "fails intermittently and insidiously," I'll always take the angry error message. But then, I'm a programmer type, so maybe that that with the requisite grain of salt.
posted by Mayor West at 6:20 AM on February 7, 2020 [7 favorites]
I made my first site in 1994-95 but prior to doing so I remember thinking: “how can these people have a website? Do they keep their computer on all the time dialed into their ISP? What if they get a phone call and it interrupts their connection? Does the site go down?”
posted by terrapin at 7:09 AM on February 7, 2020 [6 favorites]
posted by terrapin at 7:09 AM on February 7, 2020 [6 favorites]
The whole "should a parse error be a showstopper" discussion reminds me of what James Mickens wrote about the current state of the web generally, which touches on some of the same themes as the FPP article (including the convoluted history of standards mode, strict mode, and quirks mode), but also discusses how every web page is vomiting console errors all the time and, on the surface, just going on as if things were running OK:
posted by jackbishop at 7:59 AM on February 7, 2020 [1 favorite]
In a rational universe, a single uncaught exception would terminate a program, and if a program continued to execute after throwing such an exception, we would know that Ragnarok is here and Odin is not happy.... You should feel uncomfortable that a Web page can disagree with itself about the existence of initialization routines, but the page is still allowed to do things with things. Such a dramatic mismatch of expectations would be unacceptable in any other context. You would be sad if you went to the hospital to have your appendix removed, and the surgeon opened you up, and she said, "I DIDN’T EXPECT YOUR LIVER TO HAVE GILLS," and then she proceeded with her original surgical plan, despite the fact that you’re apparently a mer-person. Being a mer-person should have non-ignorable ramifications in the material universe. Similarly, if a Web page thinks than an object should be initialized, but the object has no initialization method, the browser shouldn’t laugh about it and then proceed under the assumption that the rest of the page is agnostic about whether its objects are composed of folly.Admittedly, a parse error in layout XML is a less crazy thing to be indifferent to than an uncaught exception in script code, but I think we'd all be happier if broken things were clearly identified as broken before they unexpectedly die in disasterous ways.
posted by jackbishop at 7:59 AM on February 7, 2020 [1 favorite]
I love the <hr> tag, so it was nice to see that get a mention early on. And as noted, the background image on that CSS 2 spec is quite nice! I have a lot of admiration for the "academic" school of 90s web design.
I also read his Maybe we could tone down the JavaScript which is sadly as relevant now as it was in 2016. I wanted to comment specifically on this complaint:
posted by vibratory manner of working at 10:01 AM on February 7, 2020 [2 favorites]
I also read his Maybe we could tone down the JavaScript which is sadly as relevant now as it was in 2016. I wanted to comment specifically on this complaint:
You know how some sites have keyboard shortcuts? Cute, right? Well, / is actually a built-in Firefox shortcut key — it opens a quick-find bar. Apparently nobody at Twitter or GitHub or BitBucket or Tumblr or half a dozen other places are aware of this, because they all bound it to move the focus to their whole-site search bar.Which I note because a) I hate this too and b) not a problem limited to websites: Firefox on OS X uses Ctrl+A to mean "Find All", but Ctrl+A is a native textfield shortcut in OS X to move the cursor to the start of the line, as in emacs. So Firefox overrides the system behavior, which is terrible enough, but it only overrides it once you have a text search open, so now it's inconsistent even within the context of Firefox! Maddening.
posted by vibratory manner of working at 10:01 AM on February 7, 2020 [2 favorites]
I built this in March 1998.
Please do not remind me of that asshole I divorced 20 years ago. Otoh, I was so proud to be building my first web site. I was my own webmaster...hmm... I still am.
posted by Mrs Potato at 10:13 AM on February 7, 2020 [4 favorites]
Please do not remind me of that asshole I divorced 20 years ago. Otoh, I was so proud to be building my first web site. I was my own webmaster...hmm... I still am.
posted by Mrs Potato at 10:13 AM on February 7, 2020 [4 favorites]
oh, and that lawn you're on... you know what to do.
posted by Mrs Potato at 10:15 AM on February 7, 2020 [1 favorite]
posted by Mrs Potato at 10:15 AM on February 7, 2020 [1 favorite]
To be clear, I'm fine with errors being more obvious; usually they tend to be relegated to the developer console if they get surfaced at all. The problem is that the interconnected pieces that make up the web can fail in such a variety of surprising and unexpected ways that, especially when it comes to rendering the document requested, it's going to be a better outcome to have a rendered document that can potentially allow you to do *something* with it, than to have a blank screen error. This is especially true for document-type pages rather than web-apps. Adding JS to the mix muddies this conversation somewhat, since it usually has to expect something to be in the DOM to do anything useful, but at that point you have to be more concerned about correctness overall.
Anyway, if a dev wants to opt-in to stricter error handling, I have no problem with that. I think that stricter error handling on the public web was and would be a miserable failure that doesn't really help anyone.
posted by Aleyn at 12:34 PM on February 7, 2020
Anyway, if a dev wants to opt-in to stricter error handling, I have no problem with that. I think that stricter error handling on the public web was and would be a miserable failure that doesn't really help anyone.
posted by Aleyn at 12:34 PM on February 7, 2020
My favorite horrible memory is spending hours and hours testing an HTML table layout for bugs, taking each part apart and making sure everything was valid and marked up correctly, and then eventually stumbling on an invisible character that was causing the whole problem.
Zam Gremlins FTW
posted by kirkaracha at 3:20 PM on February 7, 2020 [1 favorite]
Zam Gremlins FTW
posted by kirkaracha at 3:20 PM on February 7, 2020 [1 favorite]
This appeared on my Facebook feed the other day: "The UBC Urban Studies Website Looks Like It Hasn't Been Updated Since 2003" (direct link to the offending website). You may not like it, but this is what peak web design looks like. *shrug emoji*
But as for the article in the FPP.... Oh man, this takes me back. I'm around the author's age and I, too, was a teenager who spent way too much time online trying to hack together websites. I stopped sometime around the time people were trying to make XHTML a thing. (I'm pretty sure I wrote "Valid XHTML 1.0 Transitional" on the last site I ever put up.) The webpage of the girl who introduced me to making websites is still available on Tripod, somehow. (I used Geocities and various other free hosts over the years; I don't think any of those sites are still around.) There was something so magical about being able to "View Source" and figure out how something was done.
I did some web dev free course stuff a couple of years ago just for fun and I was really surprised by how much everything had changed. It seemed like everything had to be done in JavaScript and there was no such thing as a "static" page anymore. That said, my rudimentary knowledge of HTML and CSS serves me well, still. Anytime I see a "View source" button on a tinymce editor I go in and clean everything up. My work requires me to use a lot of super- and subscripts, and it's the only way to keep things tidy and organized.
posted by invokeuse at 3:53 PM on February 7, 2020
But as for the article in the FPP.... Oh man, this takes me back. I'm around the author's age and I, too, was a teenager who spent way too much time online trying to hack together websites. I stopped sometime around the time people were trying to make XHTML a thing. (I'm pretty sure I wrote "Valid XHTML 1.0 Transitional" on the last site I ever put up.) The webpage of the girl who introduced me to making websites is still available on Tripod, somehow. (I used Geocities and various other free hosts over the years; I don't think any of those sites are still around.) There was something so magical about being able to "View Source" and figure out how something was done.
I did some web dev free course stuff a couple of years ago just for fun and I was really surprised by how much everything had changed. It seemed like everything had to be done in JavaScript and there was no such thing as a "static" page anymore. That said, my rudimentary knowledge of HTML and CSS serves me well, still. Anytime I see a "View source" button on a tinymce editor I go in and clean everything up. My work requires me to use a lot of super- and subscripts, and it's the only way to keep things tidy and organized.
posted by invokeuse at 3:53 PM on February 7, 2020
No Spacejam news at the moment! 😕
posted by Devils Rancher at 4:10 PM on February 7, 2020 [2 favorites]
posted by Devils Rancher at 4:10 PM on February 7, 2020 [2 favorites]
If you folks are upset about ^A and / being usurped by per-application input mappings, wait until you find out that I still instinctively hit ^W for kill-word, to delete a mistyped word or four.
Yes, I often close several tabs at once before screaming and trying desperately to restore them. I did this on a comment in another thread not 10m ago...
posted by rum-soaked space hobo at 10:51 AM on February 9, 2020 [2 favorites]
Yes, I often close several tabs at once before screaming and trying desperately to restore them. I did this on a comment in another thread not 10m ago...
posted by rum-soaked space hobo at 10:51 AM on February 9, 2020 [2 favorites]
Please tell me this is the first time you've come across Shut Up and Jam Gaiden.
Yes, it is. Even I miss some of the best weirdness these interwebs have to offer. And, now I'm wondering how I could convince Nintendo to build Balthios for the SSBU Fighters Pass 2. :)
posted by Citrus at 7:42 PM on February 9, 2020
Yes, it is. Even I miss some of the best weirdness these interwebs have to offer. And, now I'm wondering how I could convince Nintendo to build Balthios for the SSBU Fighters Pass 2. :)
posted by Citrus at 7:42 PM on February 9, 2020
« Older "A vision of the future: Mario's shoe stamping on... | Birds are wild. Newer »
This thread has been archived and is closed to new comments
That said:
If you’re not aware, XML takes a much more explicit and aggressive approach to error handling — if your document contains a parse error, the entire document is invalid. That means if you bank on XHTML and make a single typo somewhere, nothing at all renders. Just an error.
If you're getting salty because a freaking SYNTAX ERROR in your markup causes the page not to render, I have some serious concerns about your webmaster chops. What would you rather the browser do, make its best guess about what you meant and then continue on through the parse tree like nothing's wrong?
posted by Mayor West at 10:46 AM on February 6, 2020 [18 favorites]