Jason Knight

The less code you use, the less there is to break

Jul 17, 2018

NO! ... because I do not recommend front-end frameworks. EVER

They are bloated trash that make you work harder, not smarter. They flip the bird at accessibility, usability, and sane/rational development; more often than not resulting in non-semantic markup, two to ten times the markup you should be using, and basically telling the entire reason HTML even exists and why CSS is separate from it to go bend over and run jack-a-willy wally-sucker over itself.

They are universally incompetently built rubbish that just gets in the way of learning to use HTML, CSS, and JavaScript properly. You start out with two to three times the code your entire project should have, to write two to ten times the markup you should need, to have a result that tells users with accessibility needs to sod off and is a pure nightmare to maintain - all whilst making it harder to do even the simplest of tasks said 'framework' wasn't designed to do.

THEN thanks to propaganda and mindless parroting of catchphrases from people who don't know any better, this manure is spoon fed to the masses like it was chocolate ice-cream, with wild unfounded nonsensical claims of it somehow being magically "Simpler" or "easier" or "makes you more productive".

When the truth is, if you find any of the positive claims about 'front end frameworks' to be true, you simply don't know enough about HTML, CSS, or JavaScript to be flapping your gums on the topic.

There's a reason I say the only thing you can learn from bootstrap is how NOT to write HTML or CSS -- and usually refer to it as bootcrap; since your best bet is to go find a stick to scrape it off with before you go tracking it all over the Internet's carpets.

As to be brutally frank, if you don't know what's wrong with OUTRIGHT INEPT HTML like this:

<body>

    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
        <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
        <nav class="my-2 my-md-0 mr-md-3">
            <a class="p-2 text-dark" href="#">Features</a>

Do the world a favor, back the {expletive omitted} away from the keyboard, and go take up something a bit less detail oriented like macramé.

... and compared to some other train wrecks of ineptitude like W3.css, bootcrap is a shining gem. Web development as a whole is dumber for this idiocy even existing!

I've NEVER seen one that was worth a flying purple fish, or even approached proper competent use of HTML and CSS. They are a LIE! A Scam. Flim-flam. Bunko. 100% grade A farm fresh prairie pies! Biff Tannen's '48 Ford Super De-Luxe was less full of it!!!

Ryosuke

Designer / Developer / Influencer

Jul 17, 2018

Again, if you don't have anything to contribute, just leave. It's people like you holding web development back. You're like a doctor who insists on his old archaic practices, while the young guns are trying to actually learn new techniques to push the practice forward.

Oscar Diaz and warning people away from sleazy scam-bait isn't contributing? Suggesting there might be a better way isn't contributing? Advocating good practices that depending on the type of website can keep you out of COURT isn't contributing?

Maybe you'd care to defend the viewpoint? Prove me wrong? Or are you just going to go "wah wah, is not" just because I used some harsh words?

Explain to me how using that 311 bytes of markup to do 109 bytes job is somehow magically "better"! Tell me why we should throw separation of presentation from content in the trash even though it en-masse tells large swaths of users to sod off whilst pissing all over bandwidth thanks to failing to leverage cache properly.

What possible defense can there be for making MORE work and ignoring every single intent and point of HTML? Much less, how can ANYONE claim that it's 'easier' or 'more productive' apart from utter and complete IGNORANCE?

Do you know what's wrong with the snippet I posted? Do I have to tell you why having the first content-bearing member of a page be a H5 is semantic gibberish? Why you shouldn't use classes like text-center or text-dark to say what things look like? Why pretty much ALL of those classes belong in the trash can? Why dumping anchors blindly into NAV just gives screen readers and braille readers a run-on sentence instead of an actual menu?

... and that's taken right out of one of bootcrap's examples. It PROVES the people who created and use bootstrap *do not know enough about HTML to be telling others how to build websites!

Remember, unless you use HTML 5's SECTION tag, THE (singular) H1 is THE (singular) heading (singular) that everything on every page of a website is a subsection of. An H2 is the start of a major subsection of the page with the first H2 being your main content (hence MAIN is a pointless redundancy unless you have a legitimate reason to have headers out of order), and H3 indicates the start of a subsection of the H2 preceding it, an H4 indicates the start of a subsection of the H3 preceding it, down the line to H6... with HR indicating a change in section or topic where a numbered heading is unwanted or unwarranted. THEY DO NOT MEAN "fonts in different weights and sizes" or "draw a line across the screen" -- that is JUST their default appearance. Of course if they break the page into sections and subsections, why do we need a SECTION tag? If the first H2 is the start of the content and why have 'main' why do we need NAV?!?

... of course all section really does is drop you back to H1 depth.

Taking that into consideration how the blazes can you start a document with a H5? How can you have an H5 without a H4 for it to indicate the start of a subsection of? HTML semantics is based on professional writing norms, and writing code like that ends up more like it was created by a dyslexic who dropped out of grade school!

See, these norms were taught when I was in school sometime around the fourth grade; though I hear nowadays this stuff isn't covered until second year of college for English majors?

NONE of the examples for Bootstrap 4 use proper semantics, none of the frameworks you can point me at maintain separation of presentation from content, and none of them simplify a blasted thing. They can't even be bothered to use a bloody media="" attribute on their links -- because of course their screen media layout makes so much sense for print and aural!

They are ANOTHER of the many things that as a accessibility consultant I have to go into clients sites and rip out to completely start over from scratch with. JUST like CSR, improper use of JavaScript with no graceful degradation, and all the other hot and trendy mentally enfeebled TRASH that people seem to be singing the praises of right now no matter how badly they're lining up to drop their pants and bend themselves over the table!

Hence why any COMPETENT programmer wouldn't have code like this 1.83k of developer ineptitude:

<!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="pricing.css" rel="stylesheet">
</head>

<body>

    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
        <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
        <nav class="my-2 my-md-0 mr-md-3">
            <a class="p-2 text-dark" href="#">Features</a>
            <a class="p-2 text-dark" href="#">Enterprise</a>
            <a class="p-2 text-dark" href="#">Support</a>
            <a class="p-2 text-dark" href="#">Pricing</a>
        </nav>
        <a class="btn btn-outline-primary" href="#">Sign up</a>
    </div>

    <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
        <h1 class="display-4">Pricing</h1>
        <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p>
    </div>

    <div class="container">
        <div class="card-deck mb-3 text-center">
            <div class="card mb-4 box-shadow">
                <div class="card-header">
                    <h4 class="my-0 font-weight-normal">Free</h4>
                </div>
                <div class="card-body">
                    <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
                    <ul class="list-unstyled mt-3 mb-4">
                        <li>10 users included</li>
                        <li>2 GB of storage</li>
                        <li>Email support</li>
                        <li>Help center access</li>
                    </ul>
                    <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
                </div>
            </div>

... and would instead have written this:

<link
    rel="stylesheet"
    href="template/screen.css"
    media="screen,projection,tv"
>
</head><body>

<div id="top">
    <h1>Company name</h1>
    <ul id="mainMenu">
        <li><a href="#">Features</a></li>
        <li><a href="#">Enterprise</a>
        <li><a href="#">Support</a>
        <li><a href="#">Pricing</a></li>
        <li class="signup"><a href="#">Sign up</a></li>
    </ul>
<!-- #top --></div>

<div id="content">

    <div id="pricing">
        <h2>Pricing</h2>
        <p>
            Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.
        </p>
        <div class="product">
            <h3>
                <span>Free</span>
                <small><strong>$0</strong> / mo</small>
            </h3>
            <ul>
                <li>10 users included</li>
                <li>2 GB of storage</li>
                <li>Email support</li>
                <li>Help center access</li>
            </ul>
            <a href="#">>Sign up for free</a>
        <!-- .product --></div>

Nearly half the code. Of course that means you might actually have to learn CSS and how to make layouts instead of blindly cookie-cutter copying what the framework does -- perish the thought.

Probably around 1k of it, which means at BEST all those dumbass presentational classes accomplished (apart from pissing on separation of presentation from content and the entire intent of HTML) is shifting around where code is being written, not how much. That's at BEST.

But as I've said for nearly a decade and a half, if you're going to use classes like "text-center" or "bg-white" or "p-3 px-md-4 mb-3" you might as well go back to writing HTML 3.2 without CSS whatsoever -- since it's clear people who write their HTML this way greatly miss their tables for layout and deprecated tags like FONT and CENTER!

... but of course then when I say these things people accuse me of being the one being stuck in the past, when if you advocate or support these practices you are the one who's cranium is wedge up late 1990's browser-war era practices!

Though what can you expect when people spent over a decade and a half sleazing out HTML 3.2 and slapping 4 tranny atop it... today they just wrap 5 lip-service around the same bloated, broken, inaccessible outdated practices so they can pat themselves on the back over how "modern" they are.... and why? Because 4 strict was "too hard" (when it was actually simpler) Because concepts like separation of presentation from content (the entire reason CSS even EXISTS) or multiple media targets is 'too hard'? Because screw caching?

Sure... I'm the one stuck in the past.

and that's before we talk the mental midgetry of these front-end frameworks derping in JavaScript to do CSS' huffing job like a early '00's version of Dreamweaver!

Oliver Kühn JSS is... well... hmm. My reaction to it is a mixed bag. Mostly negative, but I could see some corner cases where it MIGHT be acceptable.

As a rule of thumb, it violates the separation of concerns that should be the cornerstone of building websites properly. The biggest drawback being that much like manipulating Element.style -- something I've always tried to avoid when possible (but isn't always possible to avoid) -- it is quite difficult in document inspectors to go "hey, where the f* is this STYLE tag coming from?". This is only further exacerbated by "JSS Isolation" which is one of those attempts to automate fixing a problem that wouldn't exist if people understood and used selectors properly... and STOPPED mindlessly throwing wrapping DIV and dozens of classes at everything willy-nilly.

I also really dislike the concept since it means adding STYLE tags to the markup, a tag that really should have been deprecated as soon as it was introduced. I've always written my HTML and CSS on the principle that if you need a STYLE tag you're screwing the pooch. Same as how if you stylesheet LINK without a media="" you probably aren't ready to be using CSS yet.

BUT, most of the problem with the STYLE tag doesn't exist in JSS -- that problem being the failed caching attempt. For all the talk about putting static style unique to one page into the markup to 'speed up rendering' simple fact is that RENDER is rarely a bloody bottleneck on a properly written page. BANDWIDTH IS! If you're already going to have an external stylesheet placing everything into a single monolithic sheet is just ONE handshake, and means style can be cached across pages and pre-cached for ALL pages. Pre-caching/read-ahead typically paying more benefits once things like gzip compression are in the mix than any alleged render time savings.

Though to be fair I come at that from the point of view of one who typically uses half to a fifth the HTML and at MAXIMUM 48k of CSS per media="" target for an entire site -- because for the majority of websites if you bother meeting accessibility norms THAT'S ALL YOU NEED!

Which is why when I see dozens of separate stylesheets being loaded (not counting social plugins), half a megabyte or more of CSS, 48 to 256k of markup being used to do 8 to 32k's job, megabytes of scripting on websites that don't even warrant the PRESENCE of JavaScript, and LINK tags without media="" or set to media="all" I automatically assume I am looking at either developer ignorance, or outright willful incompetence.

But with JSS, JavaScript in an external file is cached separate from the markup, so that concern goes away. The lack of specifying media targets being the only major niggle... one that is more an issue of implementation than it is one of

That implementation issue though reeks of the real problem, the people who would use such a thing failing to grasp the core concept of why HTML and CSS are separate, and how realistically unless you're doing something like animations (which would be mind-numbingly dumbass to do using JSS anyways) your scripting has about as little business controlling style and layout as your markup does.

The whole point of CSS is to allow different appearances off of one core markup -- allowing HTML to return to its roots of semantics and pitching all the HTML 3.2 idiocy (center, font, align, border, color, bgcolor, alink, vlink, etc, etc) that NEVER should have existed in the first place in the trash where it belonged! As the saying goes:

If you choose any of your HTML tags based on their default appearance, you are choosing all the wrong markup for all the wrong reasons!

In that same way unless you are directly controlling positioning, size, opacity, and the like for animations, using Element.style means you're doing it ALL WRONG! Has NO business in your JavaScript in the first bloody place -- and since JSS is completely unsuited to those situations I can only conclude it too was created by people who probably failed to grasp why CSS even exists.

Again as evidenced by how most of them don't grasp why the media="" attribute exists, and could give a flying purple fish about anything more than perfectly sighted screen media users... Flipping the bird at anyone who doesn't meet that perfect match of "scripting + screen" defeating the ENTIRE point of using HTML as the base we build off of!

But that just plays to the current mentality of "hurr durz, I cans has teh intarwebs" development where scripting this and scripting that and scripting some other damned thing, and to hell with accessibility and usability.

I don't play that game, and I'm not kind to those who do.

Search Hashnode