Languages Which Almost Became CSS
blog.cloudflare.com
blog.cloudflare.com
Most developers I knew in person didn't care about CSS or didn't 'get' it. Things have come a long way since, in term of browser compatibility and tooling, but it always feels like a large portion of people who do web dev don't 'get' the web, for example, I am always surprised at the usage of frameworks such as Bootstrap in tech teams, you're basically redefining what you want your elements to look like using a combination of class names, which means you lose style separation and selectors. It's like a circle repeating itself.
People will always want to use the web to build their 'visual' or 'app' to look like they want to just as if they are designing a business card, but the web at its core is a web of knowledge, for it to be linked by other pages, browsed by bots, and is worth little without traffic or way to catalog that knowledge in the grand scheme of things. And that's why a bunch of people like me have always been pushing to have a semantic definition of the knowledge in your document, separate, and to be considered before its presentation.
Now we can make rich apps, and get pretty much pixel exact renders, but all the underlying philosophy remains: accessibility, context, semantics, and still should come before the styling in order of priority, and all the bells and whistles should ideally be implemented as an augmentation of the semantics.
One thing many designers and programmers alike struggle with are who their circle/users are and what they want. The problem, if it is a problem, with bootstrap is that it makes everything look the same. It's both smart and lazy from a web-dev's pov.
At first I was a bit annoyed and confused but then I actually liked it, the more I had to get creative with CSS because although you can reinterpret a subreddit in 1000 different ways, they all "feel" the same.
I mean, I basically just gave an elevator pitch for CSS but I suppose my point is that Reddit works well as it is. You might have to do a bit of thinking outside the box but some nice designs are possible.
If you need anything more than that, chances are your design is a bit too over the top and should be simplified.
https://support.mozilla.org/en-US/kb/firefox-reader-view-clu...
HTML 4 Transitional used to be very popular back in the 1999/2000. The XHTML movement was a weird hype, I tried it out but TinyMCE/WYSIWYG-editor spit out old HTML3 code at that time, so I tried XHTML 1 Transitional, but used .html extension as IE6 didn't support .xhtml. Anyway XHTML2 was a trainwreck, they were nuts to propose an completely incompatible syntax, a failed ideology and I switched back shortly after to HTML4 (2004). There was also a weird short hype around a new incompatibility Javascript version 4, short E4X. XML used to be everywhere, and some nuts tried to make XML part of JavaScript syntax - Mozilla and Adobe were into this crazy land. Thankfully it died, and there was never a JS4, but the JavaScript 5 strict was superb. CSS was okayish since IE5.5 and especially IE6 and MozillaSuite. Then there was the hype to not use tables but do everything with CSS divs. I quickly learned that a few tables and using CSS for everything else worked well in practice and gave one a responsive design long before it had a name. Loading data asynchronous used to be possible with XML on both IE56 and Firebird/earlyFirefox already in 2003, I found only two sites back then that had documentation for that obscure API back then, but it worked great - made a CD-ROM based elearning software written as one-page-app (HTML4, CSS and JS) with loading data from XML files and showing text, pictures and multimedia videos (Flash MX, before there was FLV format), that was two years before it became well know as AJAX (now XHR).
Had the browsers properly adopted XHTML and the accompanying standards, and today we could already enjoy something like XAML on the browser instead of having only Chrome supporting WebComponents with workarounds like ShadowDOM to preserve local changes.
I mean, I get that it's extensible thanks to XML, but that doesn't mean browsers would actually have an incentive to create and implement such extensions.
https://www.w3.org/standards/xml/components
Basically Events, Modularization, Fragments, XForms, XQuery and possibly other parts that were still being worked on when the HTML 5 hype started.
And were we are, yet to have a Web UI designer that can match Blend, Qt Creator, Netbeans Matisse, Scene Builder, Glade, Delphi, C++ Builder,....
When I do web development I always feel like I am stuck with something not better than Notepad for GUI programming.
Huh, my experience was all those things are terrible (spent some time with Qt and researching Glade, also inherited a Delphi codebase full of spaghetti code at one point).
Visual UI tools are great for prototyping, awful for maintainable code. Anyone I know who's spent any time with them ends up wanting to go back to the code.
There certainly are good Web UI designers [1], it just seems no-one wants them. There are successful visual Web UI prototyping tools tho.
[1] http://macaw.co/
Trying to manually hack GUI generated code is an anti-pattern.
One has to leave the code generated by the tools to the tools, everything else should live in other code files.
Sadly I never heard of Macaw, specially on the enterprise circles I move on, in any case they seem to be gone now.
It's sad and surprising how much time and energy was wasted on XHTML. Back in february I met Steven Pemberton (XHTML spec lead back then, and of ABC/Python fame). He's just such an inspiring guy to talk to, but unfortunately, there was no time for recapitulating the XHTML situation.
If you see value in XML, you really should look into XML's big sister SGML. It gives you downward compat with XML, tag inference, type-aware (injection-free) variable and macro expansion, custom Wiki syntaxes (markdown and others), an integrated stylesheet language without new ad-hoc syntax, full HTML 5 parsing with short forms for attributes etc., and more. You might actually like it.
However this is meaningless if the browsers keep being a document engine, full of workarounds to translate a mix of document tags, coupled with some generic <div> and <span> into some kind of general purpose GUI layout engine.
Having to find the proper incantation of CSS3 transforms to portably trigger GUI acceleration is a good example of such hacks.
Even if it is yet another hack, webcomponents + shadowdom looked it would be the solution, even if a bit hackish, but it is Chrome only.
Well, for one E4X was never adopted by other browsers that mattered, only Mozilla.
Second, it's main use was for working with XML, which the web is glad we got rid of.
My favourite of the failed web technologies was VRML. Back in the 90s I used to create epic 3D landscapes that would render inside the browser much like how some experiment with WebGL these days. But this was long before it was 3D accelerators were common inside PCs (they were still very expensive so most graphics cards software rendered 3D models). VRML I think was a victim of being too ahead of its time.
The web was exciting back then. Nobody really knew what you could or couldn't do with it. These days I feel we've lost something with all these bloated frontend frameworks which act like magic boxes in that an alarming number of frontend developers don't understand how their code executes. But I guess that's what happens when science or technology becomes business.
Mostly because of cargo cult -- as Dreamweaver produced very clean HTML output.
That was my point. If you're familiar enough with HTML to use Arachnophilia (which, if anyone isn't familiar with that particular editor, was basically just the Notepad++ of it's day) then Dreamweaver would just seem excessive. Hence why I'd recommend it for designers rather than developers ;)
> as Dreamweaver produced very clean HTML output.
Cleaner than Frontpage and most of the other design tools out then, sure. But my experience of Dreamweaver around that era was that it's HTML output still needed a lot of manual refactoring in a text editor afterwards. While it was better than most GUIs it was still a long way off "very clean HTML output".
I'm sure things have improved significantly in the last 15/20 years though. But that was certainly the state of things back in the late 90s / early 00s.
As an aside note: I won a Source Code Planet (anyone remember them?) competition one month with an entry I made in Dreamweaver. It was a mockup of a Window 95 or 98 (I forget which) desktop with functioning start menu. I always felt naughty for winning based on something I built in a tool that auto-generates a lot of the code for you but then other projects I released were a lot more credible (eg DirectX games) but far less popular. I guess it just goes to show how little most people cared for code quality even back then.
GitHub is the current thing, PSC/Sourceforge/GoogleCode are still technically (at least read-only) around.
FrontPage was a great educational tool, sure it produced crappy HTML, sure it was IE biased, but it made you learn, it was fast and came bundled in Office. Countless numbers of hobby web pages were build thanks to it.
My history is surprisingly similar to yours, I started in 1999, I used Notepad as my first text editor, and by 2003 I got caught up in the movement towards making markup strict, which I felt was the mark of professionalism. However, by 2006 I had mostly rejected the notion of "strictness". There were several things that turned me against strictness. One of them was Mark Pilgrim's essay "XML on the Web Has Failed":
https://www.xml.com/pub/a/2004/07/21/dive.html
Another problem was brought up by Sam Ruby: his daughter sent him an image, which he wanted to share on MySpace, but he couldn't. And the reason he couldn't was because the image was in a SVG format which required strict XML, and MySpace was, of course, very far from anything "strict".
Some people looked at the chaos of non-standard HTML and decided the Web was successful because it had been broken from the beginning, and it had learned to work well while broken. I reached a different conclusion. It became clear to me that what developers wanted to do simply had nothing to do with HTTP/HTML.
We don't yet have the technology to do what developers want to do. HTML was an interesting experiment, but it suffered from a dual mandate. Sir Tim Berners Lee wanted HTML to both structure data and also present it in graphical form. Almost from the start, developers were conflicted about which mandate they should obey, but the preference, since at least 1993, if not earlier, was to give priority to the visual. For all practical purposes, developers saw HTTP/HTML as GUI for IP/TCP. Previous IP/TCP technologies (email, gopher, ftp) had lacked a visual component, but HTML finally offered a standard way to send things over Internet and format the end result visually (emphasis on "standard"; I could insert an aside here about X window systems and some cool software of that era, but every app implemented their own ideas about visual presentation. X-Emacs, for instance, had its own system for visual formatting over a network).
That we now have so many versions of languages that compile back to Javascript, which renders HTML, shows that there is a great hunger for something that moves beyond HTTP/HTML.
The quote that Mark Pilgrim used at the beginning of his article is worth repeating:
"There must have been a moment, at the beginning, where we could have said ... no. Somehow we missed it. Well, we'll know better next time." "Until then ..." -- Rosencrantz and Guildenstern are Dead
He may have meant that ironically (since Rosencrantz and Guildenstern are murdered) but I like to think that we will eventually get rid of HTTP/HTML and replace it with what developers actually want: a pure GUI for IP/TCP, a technology with a single mandate, with no burden of also offering semantics or structure or hierarchy.
The 'There must have been a moment..." quote is from the play. However it is a very ironic play, and it's been my experience that anyone who quotes it does so ironically.
Isn't that what Flash, Silverlight, Java Applets and Canvas offer?
What does that actually mean? There are all kinds of systems which use a TCP link to produce a display on one end, with all kinds of different design compromises, made for different reasons and use cases.
If people had, by some miracle, standardised the web as a graphical format back in the early 90s by dictating that screens had to be 4:3 format with a particular minimum resolution, what would have happened to smartphones?
I think you're thinking like an engineer rather than a customer. The customer is more important than the engineering, as long as the engineering supports what the customer is trying to do. Very few customers rely on semantic markup, thus it is not very important.
The customer is more important than the engineering,
as long as the engineering supports what the customer
is trying to do
I don't think anybody has ever been under the belief that customers really were gonna do a "View Source" on a web page and just marvel at your clean HTML.
Consider that from the beginning of the web, people could have composed pages entirely of image maps with hotspots to direct them (and some did).
Or as soon as JS arrived, they could have replaced hyperlinks with scripted behavior (as some did and many do now).
Where would Google have come from? Its foundation was largely in the semantics of hyperlinks.
It being a broken technology, used for tasks it wasn't until recently even remotely suited for (layout) probably played a role to that.
> which means you lose style separation
A key difference in that spread of time is that back then it was all about pages where now it is a mix of pages and applications. In an interactive application separating style from content becomes less important, sometimes adding detrimental complexity in the name of trying to be "pure".
It is still very relevant for actual pages that are about content, and there are many instances of content being lost in the mire of people treating what should be simple pages as if they are complex applications, but...
While content first, then basics, then add bells as optional extras, is still a worthwhile ideal and can save time & effort long term, it can consume more time short term and often people don't want to risk asking the world to wait for them!
But.... I think this is the norm, and not the exception. Sure, there are certainly a lot more "web applications* out there today than there were in 1999/2003, but I would wager there are far more "web apps that should just be pages" than legit app use-cases.
There's not a clear separation between "text" and "application" on the web. Nearly every site has both.
For me it was the realisation that I was more colorblind than I previously though and bootstrap meant nicer designs than anything I would be ablr to create myself.
So I fell back to bootstrap (unless I'm working with a dedicated html / css person - then I'll let them decide.)
XHTML on its own does hardly anything that HTML didn't do. It's easier to parse, but HTML was already parseable and anyone who was going to try to extract meaning from human-readable webpages could already do that. The real value of XHTML was that it could be generated from domain-specific XML using XSLT. So your data could be served as machine readable XML in a standard, versioned schema particular to the application or document publisher, and then converted into an XHTML webpage by the browser. IE didn't implement XSLT for too long, so nobody did this, but the idea behind it is a popular approach today. It's essentially the same as serving static HTML which then fetches its data by API queries using javascript. But this would have worked with javascript disabled, and would have made the human- and machine-readable data exist at the same URI, so that it would be clear to machines what data the human-readable presentation was representing.
Ideally content providers would also serve an XSLT transformation for producing RDF/XML from the domain-specific XML representation, so that generic web crawlers could understand the meaning of the data on the page, or the generated XHTML could contain RDFa markup. We still havent gotten to the point of re-engineering this functionality, and it may never happen, since the major web businesses' revenue model depends on maintaining exclusive control of their data, and the interoperability ideals of linked data are directly opposed to that.
Ok, now I understand all the buzz around XHTML at the time I was a student, and why so many people kept talking about XSLT. I just never saw anybody pointing it before, and for something that interesting I have no idea how come people weren't talking about it everywhere.
Extracting data from circa-2005 HTML was a nightmare. It's only better now because libraries like beautifulsoup have gotten so much better at guessing structure, and even today I have things that just plain come out wrong because the HTML structure of what I'm scraping is so bad.
Saying as someone who coded a web app with browser-side XSLT and linked data ten years ago.
Me, I can't get over the point that CSS introduced a whole new syntax for item/values when HTML/SGML attributes were exactly designed for presentational properties. The idea/dogma that content goes into HTML and presentation into CSS, with completely separate syntax, didn't make any more sense back then as it does now:
> "Well, you get to learn this language to write your document, and then you get to learn that language for actually making your document look like you want it to."
Nevertheless you'd have to define selectors or use classes, even XPATH had to come along for XML.
Then you would also have to define property names and value. And you pretty much invented CSS. To apply it by classification, it has to be declared independent from your document tree, then you might as well separate it.
To elaborate, the problem at hand is to assign different properties to the even and odd elements, resp., of a sequence using just the sequence, alternation, and Kleene star operators in two rules. For example, the rules for the first few items (as) are as follows:
even -> a a | a a a a | ..
odd -> a | a a a | ..
even -> ( a a )*
odd -> even aMaybe something more functional instead of logic would be better.
<!link even
x #postlink odd [ background-color=gray ]>
<!link odd
x #postlink even [ background-color=white ]>
Important advantages of logic programs over functional ones is that logic programs are typically shorter and more general, and ideally well suited for describing domain-specific knowledge (such as styles and layouts) declaratively. Prolog is already part of the semantic web to considerable extent, albeit disguised as RDF and complex query languages with a different syntax than Prolog. It could have been Prolog all along, and some members of the committees have suggested that in fact.
Do you know of Prolog systems for layout computation of CSS or other layout languages? I "know" Prince/PrinceXML (Mercury-based) and the begin of a formal specification for CSS as logic/attribute grammar [2] (from 2009).
[1]: http://www.ontopia.net/section.jsp?id=specifications
[2]: https://lmeyerov.github.io/projects/pbrowser/pubfiles/extend...
https://pure.tue.nl/ws/files/2135764/200613391.pdf
Joost uses Prolog CLP(FD) constraints and other declarative language features for reasoning about multimedia data.
See also the following paper:
https://espace.library.uq.edu.au/view/UQ:7851
However, I must correct one misconception: I did not "come back from SPARQL/OWL2" to Prolog. Rather, when the whole RDF/SPARQL hype started, I could only hope that in due time, this will all stop again and turn back to Prolog, which now, years later, is slowly happening. Prolog FTW! It's a great language for formal specifications and declarative descriptions of all kinds of data, including layouts. I hope your project becomes a great success. ISO compliance is definitely a great benefit and will help adoption in large organizations considerably.
That said, the DOM is actually not that large. My comment may be an overreaction.
Nevertheless I don't think it's wrong to have a separate styling language. HTML already makes it easy to wobble off the tightrope we walk between content and layout.
Recently I wanted to use Material Components, and the whole BEM thing makes my eyes cry.
`custom-on-dark .mdc-icon-toggle.mdc-ripple-upgraded::before`
`custom-on-dark .mdc-icon-toggle.mdc-ripple-upgraded::after`
`mdc-toolbar__section mdc-toolbar__section--align-start`
I just am not going to work with that in my code and it screams to me something is wrong.
It's actually under-engineering (a brute force, hacky solution), and it ignores those principles of CSS (cascading for one) on purpose because they have been historically found to be more harm than good.
var the_first_left_menu_item_animation_enter
var the_second_left_menu_item_animation_enter
What causes this problem? Does CSS not have any modular capability and that is why? Is it global by definition? Not really sure what I am trying to say.
It has crappy scoping and modularity rules.
I'm always interested in seeing examples of good class naming and structure if you have some available.
BEM is more about specificity, modularity, and namespacing than it is about clarity (which many think it also achieves).
".ba" to add border all or ".bt" for border top... then just add ".b--dashed" for dashed border... ".georgia" will use Georgia font... ".red" will color it red.
Though class names they used can be more uniform IMO.
The key points from there, regarding your question specifically: 1) inline styles can't use media queries, while there are tachyon classes for different devices. 2) Ditto for pseudo classes. 3) The browser renders them faster.
But I think your actual question was something more along the lines of "isn't styling individual elements considered bad practice?" That has a bigger answer and is more philosophical. I, too, recoil at it, but I'm open to best practices changing or being considered differently in the context of web applications vs web pages.
For example, react and JSX changed my mind about mixing JS and markup and even styling to some extent.
But you're recommending this? This has advantages over inline styles, but doesn't avoid the main drawback of using them: difficulty to maintain and change.
<article class="mw7 center ph3 ph5-ns tc br2 pv5 bg-washed-green dark-green mb5">
<a class="f6 br-pill bg-dark-green no-underline washed-green ba b--dark-green grow pv2 ph3 dib mr3"href="#">Sign Up</a>
</article>
Why did Android creators decided to define its own way to describe GUIs, when CSS existed and could be used for that purpose?
Every time I have tried to create a decent GUI for the desktop I get disappointed by the insane difficulty of the task, as with CSS you can make something look good in a few minutes.
They're very different ways of building a UI, and it's hard to find people with a ton of experience in both to provide perspective, much less an answer as to which is 'better'.
Of course if you are trying to lay out something document like (like those things we had back in the '90s called web pages), then HTML is much easier than native GUI programming.
For me, the correct path would have been the proper implementation of XHTML and related XML based languages.
By now we would be enjoying something like XAML on the browser, with proper tooling like Blend, instead of workarounds like React, Angular and WebComponents.
I think a mix of both would be best but just being able to specifically say put x "toLeftOf="@id/y" was very nice.
Mind you, I'm someone who plays "CSS Whack-a-mole" rather than actually truly understanding how it's positioning works.
Because in other domains sanity prevailed.
CSS appeared after native apps already had layout/geometry managers that understood how to deal with grids, fixed layouts, changing display sizes, etc. Most of them I've used have some way of expressing layout semantics that CSS failed to do until very recently. And they were "responsive" to resizing out of the box, if you wanted them to be.
The most popular ones, like gettext, xliff, .properties are very limited, while the most sophisticated one - MessageFormat - is stopping a few steps short of having all needed capabilities and is very hard to read/write by hand.
I'm very excited for the next 3-5 years where I believe we'll see more development in this field and hopefully we'll end up with a good equivalent of CSS for Web Localization.
Full disclosure: I work on a project that my team believes to be a good contender for that - Project Fluent ( http://projectfluent.io/ ) I also work within TC39 on ECMA402 on APIs that will make coming up with new localization APIs much easier (PluralRules API, language negotiation and selection etc.).
I was looking into this recently and I'm amazed how many different but very similar formats there are. For example, Django uses gettext, JavaScript has several different JSON formats (e.g. i18next, polyglot) and Go has its own JSON/TOML/YAML format. Each format seems so similar I don't understand why they didn't use an existing one. Usually you want your translators to use a web interface to edit translations so different formats make this troublesome.
I am reminded of the proposal to markup webpages with s-expressions rather than XML, though there are packages available (actually just macros) in CL that let you write websites this awy.
Is someone else outside mozilla ready to ship a parallel CSS engine any time soon ?
(html
(head
(style (let ((bg #x0088ee)
(fg #x00ee88))
(body (background bg)
(foreground fg))
(body.inverted (foreground fg)
(background bg))))
(script (defun invert ()
(with-slots (class-list)
(get-element-by-tag document 'body)
(setf class-list
(if (find 'inverted class-list)
(remove 'inverted class-list)
(cons 'inverted class-list)))))))
(body
(button (@ (on-click (invert))) "Click me")
(p "This is some text.")))
I think I never have been that fast building UIs.
I get the convenience of writing inline-styles like HTML attributes and not a style string and in the background it gets compiled to CSS classes, with deduplication and everything.
Since Flexbox and CSS-Grid, most CSS frameworks I used in the past also don't have much value for me anymore.
While technically flowcharts could be defined infographics in the broad/original sense, I still don't see why this is so nonsensical. It is obviously targeted to someone who knows the subject and terminology involved, but apart from that it looks OK to me.
/nitpick
I hated those old IEs as much as anybody, but I admitted even back then that IE's broken box model was much saner. We had to do stupid things with widths and percentages just to make the browsers that worked correctly work.
The fact that everybody uses box-model: border-box now is pretty much an admission that the original box model was a bad idea.
The funny thing is that I've never heard any rationale -- much less a convincing rationale -- for the choice in the spec.
We have people with a religion of separating style from content, so they introduce the complexities necessary to do that. But because it is merely a religion, they don't actually do it in a way that makes it possible to actually change styling just through CSS.
Yeah...I've seen lots of code review arguments where one developer refuses to alter the HTML to make the styling easier (e.g. order of elements, wrapping elements in certain ways) and then the CSS styling requires all sorts of complex tricks. If Google or screen readers won't see any difference, striving to separate styling from content like that is a waste of time in my opinion and you should make compromises. People complain about e.g. Bootstrap's "text-center" and column classes as well because they're not semantic but they can save time when used appropriately.
The content/presentation dichotomy doesn't hold water in a philosophical sense either. Many text pieces (such as poems, but also modern text forms) require special presentation. But what was particularly absurd is to invent a new syntax for key/values.
It's "pre-world-wide-web". The internet was already alive and quite busy in the 80s.