Twitter Bootstrap



  • I am currently integrating Twitter BootStrap into the website I am working on and re-building components using the CSS framework. For the most part it is a pretty good framework, however we have a large carousel on our website and it was decided to rebuild it using the bootstrap JavaScript components.

    CSS transitions don't work with IE7-9. 

    This is all the work that is required for a jQuery fallback,

    https://github.com/Barryvdh/bootstrap/commit/8b294f0c0184eb7111ef6da6046d4d1f33ea7ba3

    It works perfectly. However it wasn't included and I let you read why.

    https://github.com/twitter/bootstrap/pull/3052



  • Take in mind that for version 3 they dropping support for any MSIE version before 9.



  •  This fix also relevant for IE9 and this is for versions 2.x, the decision is just making things artificially difficult IMO.



  • Microsoft just needs to bite the bullet and start implementing -webkit-CSS3 instead of waiting for any sort of standard.



  • W3C basically told them they can't do that.

    The issue is that IE is usually tied to a specific version of the OS and they guarantee a set of features with the browser to their corporate customers. Which means for guys making in-house intranet applications you got a guaranteed set of things the browser does, for public facing sites it causes a problem.



  • @lucas said:

    W3C basically told them they can't do that.

    The W3C told Google and Mozilla they couldn't implement CSS3 either. They responded by declaring their CSS3 support proprietary (via the -webkit- and -moz- prefixes).



  • This is the problem I have with so many of these new things. Yes, IE sucks, we know. But a lot of people still use it. All the newfangled things in the world is shit if your customers (or potential customers) can't access the fucking site! I love how the Twitter Bootstrap functions, but now I have my doubts about using it because I'm planning a web-based app that may have to support users with older PCs using IE, as it targets a not-totally-tech-savvy market.



  •  The difference being that vendor prefixes were for partsof the standard that wasn't finalised. What you were talking about was Microsoft support -webkit prefixes ... which is different thing.



  •  @ObiWayneKenobi: Most of it falls back quite sensibly. I would recommend it.

     The problem I had with the carousel is that it such a bloody simple fix and the patch was dis-regarded because of idealogical reasons (especially since 10 lines of code aren't going to prove a maintenence problem).



  • Good to know, thanks for that!



  • @lucas said:

    carousel
     

    {twitch} Go fuck a razor-blade covered lemon.

    Those things are literally the worst fucking UI thing to ever come out of client-side scripting.



  • Unfortunately the bosses like them and they pay my wages.



  • @Lorne Kates said:

    @lucas said:

    carousel
     

    {twitch} Go fuck a razor-blade covered lemon.

    Those things are literally the worst fucking UI thing to ever come out of client-side scripting.

    OMGWTF3: Design a terrible website using a carousel... OR WORSE! Judges: Lorne Kates



  • @lucas said:

    The problem I had with the carousel is that it such a bloody simple fix and the patch was dis-regarded because of idealogical reasons
    I assume this is the comment you are referring to:@Github said:
    nope - we want to treat animations as a progressive enhancement
    WTF does that even mean?




  • WTF is Twitter bootstrap, anyways? I've no idea, but it appears to be a mixture of CSS and javascript, maybe some html, too?

    I took a look at the README @README.md said:

    Bootstrap includes a makefile with convenient methods for working with the framework. Before getting started, be sure to install the necessary local dependencies:

    $ npm install

    When completed, you'll be able to run the various make commands provided:

    build - make

    Runs the recess compiler to rebuild the /less files and compiles the docs. Requires recess and uglify-js.

    WTF? Why do you need to "build" javascript or CSS?



  • @boomzilla said:

    <p>
    WTF is Twitter bootstrap, anyways? I've no idea, but it appears to be a mixture of CSS and javascript, maybe some html, too?
    </p>
    <p>
    I took a look at the <a href="https://github.com/twitter/bootstrap/blob/master/README.md">README</a>
    [quote user="README.md"]
    </p><p>
    Bootstrap includes a makefile with convenient methods for working with the framework. Before getting started, be sure to install the necessary local dependencies:
    </p>
    <p>
    $ npm install<br>
    </p>
    <p>
    When completed, you'll be able to run the various make commands provided:
    </p>
    <p>
    build - make
    </p>
    <p>
    Runs the recess compiler to rebuild the /less files and compiles the docs. Requires recess and uglify-js.
    </p>
    <p></p>

    WTF? Why do you need to "build" javascript or CSS?[/quote]

    It's not CSS, it's Less. Less is like CSS, but it supports nesting and other cool things. It compiles down to CSS, similar to how C++ compiles down to C.

    If you've ever used JavaScript in production, I hope it was minified into one file instead of included from fifty different places on the server. One request with compressed content takes a lot less time than fifty requests with lots of documentation none of your users need to see.



  • @boomzilla said:

    WTF is Twitter bootstrap, anyways? I've no idea, but it appears to be a mixture of CSS and javascript, maybe some html, too?

    I took a look at the README @README.md said:

    Bootstrap includes a makefile with convenient methods for working with the framework. Before getting started, be sure to install the necessary local dependencies:

    $ npm install

    When completed, you'll be able to run the various make commands provided:

    build - make

    Runs the recess compiler to rebuild the /less files and compiles the docs. Requires recess and uglify-js.

    WTF? Why do you need to "build" javascript or CSS?

    I downloaded the "Compiled" version and I got a zip file containing a couple of Javascipt files and a couple of  CSS files in normal and minified versions.  Are they so retarded that they are calling minified Javascript "compiled"?

     



  • @El_Heffe said:

    @boomzilla said:

    WTF is Twitter bootstrap, anyways? I've no idea, but it appears to be a mixture of CSS and javascript, maybe some html, too?

    I took a look at the README @README.md said:

    Bootstrap includes a makefile with convenient methods for working with the framework. Before getting started, be sure to install the necessary local dependencies:

    $ npm install

    When completed, you'll be able to run the various make commands provided:

    build - make

    Runs the recess compiler to rebuild the /less files and compiles the docs. Requires recess and uglify-js.

    WTF? Why do you need to "build" javascript or CSS?

    I downloaded the "Compiled" version and I got a zip file containing a couple of Javascipt files and a couple of  CSS files in normal and minified versions.  Are they so retarded that they are calling minified Javascript "compiled"?

     

    Are you so retarded that you can't understand the fact that there are optimizing compilers for JavaScript?



  • @El_Heffe said:

    I downloaded the "Compiled" version and I got a zip file containing a couple of Javascipt files and a couple of  CSS files in normal and minified versions.

    You're using raw CSS? Without variables, or nesting, or anything? Not something like LESS or SASS?

    Look: CSS sucks shit. It lacks many, many, many features it should have. I don't fault anybody for using a pseudo-CSS language that trasnforms into actual CSS. Whether you want to call that "compilation" or not is just semantics.

    @El_Heffe said:

    Are they so retarded that they are calling minified Javascript "compiled"?

    There are JavaScript optimizers out there. I presume they're using one. Again, whether you want to call that "compilation" or not is semantics.



  • @Ben L. said:

    It's not CSS, it's Less. Less is like CSS, but it supports nesting and other cool things. It compiles down to CSS, similar to how C++ compiles down to C.

    So it doesn't compile to CSS at all?

    @Ben L. said:

    If you've ever used JavaScript in production, I hope it was minified into one file instead of included from fifty different places on the server. One request with compressed content takes a lot less time than fifty requests with lots of documentation none of your users need to see.

    The joke's on you, then! I use massive java based frameworks, so there are a ton of javascript files that I have zero control over! They do appear to be minified, though, and browser caching seems to take care of download performance for the most part. The bigger WTF is that the official browser used for it all is IE8, so the actual JS performance sucks. Oh, and IE8 has to be in compatibility mode, or some pages freeze up.



  • @boomzilla said:

    WTF is Twitter bootstrap, anyways?
     

    It's a UI/layouting library.



  • @boomzilla said:


    WTF is Twitter bootstrap, anyways? I've no idea, but it appears to be a mixture of CSS and javascript, maybe some html, too?

    I took a look at the README @README.md said:

    Bootstrap includes a makefile with convenient methods for working with the framework. Before getting started, be sure to install the necessary local dependencies:

    $ npm install

    When completed, you'll be able to run the various make commands provided:

    build - make

    Runs the recess compiler to rebuild the /less files and compiles the docs. Requires recess and uglify-js.

     

    WTF? Why do you need to "build" javascript or CSS?

     

    You really actually do, I got a massive JS codebase and one of the things is actually specifying a dependency system.

    Bootstrap is just a JS / CSS framework that does most of the boiler plate crap you normally have to do.

     



  • @El_Heffe said:

    @lucas said:

    The problem I had with the carousel is that it such a bloody simple fix and the patch was dis-regarded because of idealogical reasons
    I assume this is the comment you are referring to:@Github said:
    nope - we want to treat animations as a progressive enhancement
    WTF does that even mean?

     

    I think the whole conversation was relevant because after several people said "hey look this is super useful can we have it" the guy said "no fuck you, I am not going to include it even though it works".

    I am now maintaining my own repo of bootstrap as a consequence.

     



  • @boomzilla said:

    So it doesn't compile to CSS at all?
     

    Essentially less/sass produces CSS after being run through a program that parses and transforms it into CSS. Most IDEs have a plugin, this is the one I use in Visual Studio.

    We are using node as part of our build process in TFS to turn the less into CSS when we are doing a deploy to QA. We haven't tried this out in production as yet, but everything appears to be good and is making our CSS far more manageable (I counted over 4000 lines in one file, yes the solution I am working on is a huge WTF that we are slowly tidying up).



  • @lucas said:

    @boomzilla said:
    So it doesn't compile to CSS at all?

    Essentially less/sass produces CSS after being run through a program that parses and transforms it into CSS.

    Yes, I got that. I was just harassing BenL. I thought he'd appreciate being given shit about something besides Go.

    I'd heard people talking about less.js, and didn't know WTF they were going on about. This makes some sense to me now. I couldn't figure out why anyone would want to write a pager in JS.



  • @Lorne Kates said:

    @lucas said:

    carousel
     

    {twitch} Go fuck a razor-blade covered lemon.

    Those things are literally the worst fucking UI thing to ever come out of client-side scripting.

    I dunno, people over 21 are pretty gay.



  • @Ben L. said:

    ...similar to how C++ compiles down to C.

    This hasn't been the case since before you were born, dude.



  • @boomzilla said:

    Yes, I got that. I was just harassing BenL. I thought he'd appreciate being given shit about something besides Go.

    I'd heard people talking about less.js, and didn't know WTF they were going on about. This makes some sense to me now. I couldn't figure out why anyone would want to write a pager in JS.

     

    TBH I only escaped VB.NET WebForms / .NET 1.1 / IE6 hell a year and a half ago with my current job. While I've read around and had a quick play in my spare time a lot of this stuff is fairly new to me.

     



  • Since we're ragging on how fucking stupid the Twitter developers are, let's dredge up this old chestnut: https://github.com/twitter/bootstrap/issues/3057



  •  I thought that one was a little to obvious to mention. But the guy is a moron, the reason he doesn't use semi-colons is probably because it makes his JavaScript less pretty. Yes there is a JavaScript semicolon mechanism, but putting a semi-colon makes it obvious to everyone that is familiar with C like syntax where the line ended. Also Visual Studio 2010 had a fit when monkey-patching the library

     It is a real shame IMO, because the framework is probably the best out of quite a few we have evaluated and one of our juniors has re-built a lot front end components to use it.

    I had to monkey-patch the library for now, but I know this isn't the best way if I need to upgrade the framework.

    I am going to have to fork the repo in Git and maintain my own tree. I am tempted to fork the repo on Github myself and support and accept changes for some of the older browsers just to show it can be done to these hipster developer dipshits.

    EDIT: Sorry for the massive edit.



  • @lucas said:

    Yes there is a JavaScript semicolon mechanism, but putting a semi-colon makes it obvious to everyone in a C style language where the line ended.

    It also makes it obvious to the lexer so you don't have to do stupid shit just to make it understand that a new statement is beginning. Seriously, anyone who relies on ASI needs to be punched. (That includes Go.. yes, they copied the same stupid mistake JS made..)



  • @morbiuswilters said:

    @lucas said:
    Yes there is a JavaScript semicolon mechanism, but putting a semi-colon makes it obvious to everyone in a C style language where the line ended.

    It also makes it obvious to the lexer so you don't have to do stupid shit just to make it understand that a new statement is beginning. Seriously, anyone who relies on ASI needs to be punched. (That includes Go.. yes, they copied the same stupid mistake JS made..)

    You're being fucking stupid. Now, if you were asking for some brackets around the semicolon, I could understand.

    Sometimes I like being passive aggressive like the semicolon idiot @fat because it's fun to be an asshole. But I at least do it when I have a defensible position and the other guy is being stupid.



  • @lucas said:

    But the guy is a moron, the reason he doens't use semi-colons is probably because it makes his JavaScript less pretty.

    Oh, and that's the argument the Go developers used when they fucked themselves over good with their rules towards semicolons: code without semicolons looks cleaner.

    Yes, the Go developers are so brain-dead they haven't developed the ability to read code without being distracted by semicolons. It makes you wonder how they'd fare at reading English: "Go Dog, Go--OH GOD, IT'S ANOTHER ONE OF THOSE DOT THINGS. WHAT DOES IT MEAN? WHY IS IT THERE??"



  • On the subject of vendor prefixes, I'm so glad we're moving past that now. A lot of prefixed properties (the ones I care for) are becoming available in non-prefixed versions on Chrome and FF, and IE 10 has them un-prefixed already.



  •  I am seriously considering forking bootstrap because of asshattery like this and just accepting legacy browser patching while merging their newer stuff from their tree.



  • @lucas said:

    I am tempted to fork the repo on Github myself and support and accept changes for some of the older browsers just to show it can be done to these hipster developer dipshits.

    Oh, I'm sure they know it can be done. Their attitude is just "I'm a special little snowflake who shouldn't have to do any actual work at my job."



  •  I might see if I can fork certain parts of the library that don't work with IE7-9 because of asshattery and fork those. I don't think I could support the whole thing in my spare time, and the way the web development community is I would probably be vilified. Also I don't think it would be responsible to make a fork and not support it, just in case people do use it and do rely on it.



  • @lucas said:

    ...and the way the web development community is I would probably be vilified.

    Being vilified by the web development community is half the reason I get out of bed in the morning!



  • @Ben L. said:

    It compiles down to CSS, similar to how C++ compiles down to C.

    While this was true in the 70s and 80s, it's certainly not true today. C++ today is never used to compile down to C (although I suppose it theoretically could).



  • @morbiuswilters said:

    @lucas said:
    ...and the way the web development community is I would probably be vilified.

    Being vilified by the web development community is half the reason I get out of bed in the morning!

    I am known as a rockstar developer at work (which is something I detest being referred to btw), but one perverse satisfaction is watching a junior web dev make the same mistakes (I warned them about) for the first time and I am called in to fix the mess or telling them how to fix the mess (i.e. I told you so).

     It happened to me when I was first in the industry and a lot more front end developers need to be humbled by more experienced developers and actually care about what browsers their users actually use.

     What irritates me now is that certain large companies have said this doesn't matter and a lot of developers think it is okay to whine about requirements and writing front end code properly.



  • @lucas said:

    I am known as a rockstar developer at work (which is something I detest being referred to btw)...

    I protest when people call me that. "Do I look like a rock star to you? Do I look like I'm burning down Georgia? No, sir, I am not. Not unless you ask me to build some kind of software that would power a flame-throwing robot. Which would actually be pretty awesome."



  •  It was said by upper management after I did a few all nights stints (not in a row). I usually don't protest against people that can de-hire me at any moment.

     I won't deny that it does make you feel like you have some kudos for a while, but ultimately they expect you to do more of the same.



  • @morbiuswilters said:

    Since we're ragging on how fucking stupid the Twitter developers are, let's dredge up this old chestnut: https://github.com/twitter/bootstrap/issues/3057

    It doesn't stop there. There's also the bit with Twitter devs claiming that jQuery 1.4.4 contained some kind of lethal performance killer, because moving from jQuery 1.4.2 to 1.4.4 slowed their site to a crawl. Lo and behold they are actually attaching a complex event handler directly to the "scroll" event on the window, rather than rate limiting it to execute once every x milliseconds and then to make matters worse they are actively requerying the DOM rather than caching their selectors. The loss of one critical speed-up hack in the selector ended up breaking their entire app. I.e. a single straw that is enough to break a pneumonic camel's back. Fucking morons!

    And then there's the part where the actively denounce client-side templating languages and client-side data handling, because those are much too slow. Yeah; meanwhile I've done work on some quite complex UIs (much more complex than Twitter's basic stack of one sentence message posts) with real-time updating and recalculating of underlying data; all driven by client-side templating and observable data models and noticably faster than producing pre-rendered HTML on the server. Unlike the Twitter guys (apparantly), I didn't forget to pre-compile my templates into plain JS functions for deployment rather than having user machines run a parser/lexer in JS to produce eval()ed script that, depending on the JS engine in your user's browser, may end up executing up to 100 times slower than 'regular' script due to not being able to apply particular types of optimizations to the compiled bytecode.

    Ofcourse, just to put things into perspective and add some nuance; there's still the Facebook API developers out there, who take 'stupid' to an entirely new level. Their epynomous Like widget creates and destroys a mass of DOM elements, performs multiple (mostly spurious) queries on various DOM elements' rendered dimensions and runs generally complex hookup logic every 100ms on a polling timer loop. Every 100ms; just for freaking being there loaded onto your page. Ofcourse this behavior also does not contribute anything fucking useful when the widget has not actually been resized...



  • I still don't understand how can be that popular CSS framework which doesn't respect user set font size in browser. Isn't that against all of the rules the webdesigners community learnt in last decade?



  • @Arnavion said:

    On the subject of vendor prefixes, I'm so glad we're moving past that now. A lot of prefixed properties (the ones I care for) are becoming available in non-prefixed versions on Chrome and FF, and IE 10 has them un-prefixed already.

    Plus having experimental features available by default leads to things like the WTF here, where people complain about IE10 not implementing something that's not really in the specs but FX and Chrome implemented on an experimental basis.



  • @lucas said:

    @morbiuswilters said:

    @lucas said:
    ...and the way the web development community is I would probably be vilified.

    Being vilified by the web development community is half the reason I get out of bed in the morning!

    I am known as a rockstar developer at work (which is something I detest being referred to btw), but one perverse satisfaction is watching a junior web dev make the same mistakes (I warned them about) for the first time and I am called in to fix the mess or telling them how to fix the mess (i.e. I told you so).

     It happened to me when I was first in the industry and a lot more front end developers need to be humbled by more experienced developers and actually care about what browsers their users actually use.

     What irritates me now is that certain large companies have said this doesn't matter and a lot of developers think it is okay to whine about requirements and writing front end code properly.

    I'm considered a rockstar developer at my job just because I was the only one who was willing to sit down and read the documentation on SQL Server Reporting Services.


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.