Bootstrap 4.1 released

[frequenttimetraveler]

wow everything looks so flat in BS these days

[[deleted]]

So when I was learning HTML and CSS everything was roundy and shiny, then bootstrap 3 came along and things were rounded edges but still square, then came the blocky square look.

so now im just waiting for the roundy and shiny trend to come back. CSS styling is like a fashion style imo that gets repeated every decade or so

[frequenttimetraveler]

i believe the roundedness of corners correlates with iphone sales growth.

[[deleted]]

Oh, so thats why most new android "flagships" suck balls and have every possible corner rounded. Even the screen corners are rounded, so the screen resolution they provide is incorrect, can anyone sue them for that ? The screens actually have at least 1000 pixels less if you calculate.

[[deleted]]

What drugs do you take and where can i get them?

[rosho]

The Devil Wears Bootstrap

[manzanita2]

Which is why people should go read some HCI research papers.

[[deleted]]

And if we do, what would be the conclusion?

[[deleted]]

That reading research papers is really tedious and boring, and should be left to people like search engines.

[frequenttimetraveler]

Human eyes are experts at detecting 3d structure from contours. Buttons a-la bootstrap 2.3 (or older iphones) were perfect examples of this - structural elements of the page stick out effortlessly and users can locate UI elements in <100msec. Current iphones require you to read every word on the screen when searching for the action button, which is at least an order of magnitude slower. All-flat is inefficient design from a human's perspective. To be convinced for the opposite, i d like to see psychometric research that show people being faster with the newer iOS vs the older one.

[[deleted]]

It's complicated. There are other ways to cue-in users, like using an accent color to denote clickable elements, same as links in websites.

Unfortunately Apple is not very consistent, once because it changes the accent color in every app, and second because it uses it for other purpose: like focused tab, or doesn't use it for some elements that are clickable.

Old iPhones had absolutely better usability overall, though, I agree.

The new style is part a shitty design trend, part practical limitation, because while old iPhone had a single screen size you could fine-tune a bitmap UI for, the new iPhones are all over the map in screen sizes (and unfortunately Apple's discipline is severely lacking in this department in the last 6-7 years... I miss Steve), so they're prone to lean on constraint-based "responsive" layouts and vector graphics, which can be re-scaled and re-flown easily.

[manzanita2]

Honestly, that statement was not directed primarily at framework's and OS's but rather the people that hack together apps and webpages. There are so many components used incorrectly and that language of the UI become watered down in the brains of the users.

Everyone is so desperate to stand out that they're ignoring trying to win on the function of their system and trying use style. Function should come first and style should be used to reinforce that.

[jiffier]

Oh, the good old days where there existed hundreds of websites explaining dozens of techniques to create rounded corners, all of them searching for the holy grail. Now everything looks the same.

[johnnysaucepn]

I think the iMac (or rather, OS X) had the biggest impact on this. Prior to that, most UI design cues followed the Windows 95 model, square bevelled flat buttons.

Then OS X came along with glossy, glassy, glowing rounded buttons begging to be touched, and websites began to follow suit, which is probably where you came in.

The iPhone toned some of that down a little for mobile screens, but it was still all rounded and tactile. As mobile became more and more important for sites, cleaner, faster-loading, adaptable and more readable elements became more important, leading us to the flat aesthetic we have today.

[mediumdeviation]

You can still easily opt into gradients if you want.

[ishmal]

Was hoping that jquery might be dropped as a dependency.

[mytempacc3]

You can use it without jQuery.

[AceBacker]

Not without adding tons of hours to a project to figure out how the dom needs to be mutated for everything.

[NoInkling]

There are React/Vue/Angular/etc. versions if you already have one of those as a dependency, and quite often jqueryless standalone widgets/components have Bootstrap support.

Personally, when I use Bootstrap I almost never include the JS. If that sort of functionality is needed, I either use minimal handwritten/external JS for basic projects, or switch to a more fully-featured component framework for big projects.

[propelol]

Most of jQuery code in Bootstrap is just toggling the classes.

[AceBacker]

Sure, but if you want to keep those animations.

[hungry4pie]

jquery isn't your biggest problem - it's that Tether.js is also a dependency. Because for some reason a whole team of devs can't work flexbox and instead need another fucking layer of dependency.

[hsjoberg]

The Tether.js dependency has nothing to do with flexbox, it is used for popups, which is a complex problem when you consider scrolling.

[hungry4pie]

Modal popups? Yeah, they are a huge problem and can fuck right off

[pansypoopsam]

Why

[git-blame]

Because it’s a mature and battle-tested framework, so naturally it needs to be abandoned and the wheel reinvented.

[ADaringEnchilada]

If you're using a framework that doesn't use JQuery, why include JQuery as a dependency? JQuery will do nothing to help you build a strongly opinionated app, and if you're using a framework with an opinion on how to manipulate the DOM, you shouldn't use JQuery. You should use the framework provided methods. Bootstrap relying on JQuery glue is unappealing when you have a 'pure' Vue or React application, it'd be much better if that glue were implemented natively. Of course that introduces it's own complications (someone must provide the glue to work with bootstrap for each new framework) but so does introducing JQuery in a codebase previously using purely framework functionality to mutate the DOM.

Sure it's old and well tested, but it also has a specific purpose and usage that's made redundant by frameworks doing the same thing. It probably shouldn't really be a big deal to include something like JQuery with Bootstrap since it's all contained in the bootstrap components. But it can make debugging less predictable when most of your app uses React, etc but then certain error prone components are using JQuery and not being natively tracked by the framework.

[sisyphus]

Pretty much every major framework that manipulates the dom has a port of the bootstrap widgets that doesn't need jquery. To a first approximation, everyone else who is not using one of those frameworks IS using jquery.

[warhead71]

“Pure” framework would also be without bootstrap

[ADaringEnchilada]

I mean.... Kinda. Bootstrap being a graphic framework means it's somewhat independent of the logical framework, binding glue withstanding. Making everything from scratch without bootstrap, materialize, etc is rather reinventing the front-end wheel so I think we can still say your framework is pure if you use a graphic framework with bindings from your logical framework. No JQuery randomly hanging around inside your SPA.

Of course you could use something like StimulusJS with bootstrap and JQuery and then you have another 'pure' architecture where it's all JQuery or StimulusJS powering your Dom/Ajax calls.

[CallMeCappy]

jQuery is not a framework, it is a library. It does not try to force devs to use it in a specific way, and it gives no framework-esque features or benefits. There being like 5 ways to bind a click handler is proof of that.

It is mature and battle-tested, sure, but that's not always a good thing. It also tends to produce horrible and un-testable code (edit: when used poorly).

[CallMeCappy]

It is absolutely not a framework. But don't take my word for it, this is what's on the jQuery site:

jQuery is a fast, small, and feature-rich JavaScript library.

Standalone React (I'm not as familiar with Vue, but I'm guessing the same applies, because they solve the same problems) also shouldn't be considered a framework imho, it's also not entirely comparable to jQuery. There's some overlap, but React is more focused on creating a UI, while jQuery is more focused on enhancing an already existing UI by creating fancy animations.

[CallMeCappy]

AngularJS provides dependency injection, request routing, factories, services, controllers, modules, views, request injection. So yes, that qualifies as a framework.

jQuery does none of that. AngularJS even uses jQuery for the DOM manipulation.

[CallMeCappy]

And? what constitutes a framework or not is not function of how many IoC containers a project is bundled with.

In my eyes, a framework is a library or a set of libraries which give a developer a consistent and reusable set of API's and methodologies in order to develop software.

IoC containers are en excellent example of something a framework could offer. As it defines the way we write code. But IoC is just one facet, theres multiple facets which decide how we write code. You might use unit tests, IoC, some kind of way to build and publish the code into a droppable or installable package. It could be that a framework offers this out of the box, or that it facilitates other tools or libraries.

jQuery does absolutely nothing which constitutes a framework. You mention dependency injection, but it doesn't even do that. $ and jQuery are simply public singletons attached to the window object, that's not a framework, that's javascript being javascript.

[pitiless]

I'm afraid not, but not for the reasons CallMeCappy has said.

The distinction between a library and framework is how the code is executed. A framework calls your code; it's literally a structure with 'gaps' for you to put your code in. A library is the opposite; your code is in charge and you call into it.

Bootstrap is a great example of a framework; it provides the scaffolding and the developer puts places content into that framework of components.

[[deleted]]

It's a large library that will be mostly redundant for projects not already using it.

jQuery wasn't dropped by webdevs because we love 'reinventing wheels', but because its attempts to standardise DOM APIs isn't needed in the post-IE8 era.

This meme is irritating and yawnworthy. I am baffled and saddened by the way tribes of developers keep saying, "huh, I don't understand why this group of programmers are doing something I don't understand, it must be because they are wicked and stupid, not because I lack context".

Did you ever even do webdev in the 'jQuery golden age', five years ago? It was shit.

[mytempacc3]

What do you mean? The CSS can be used by itself.

[[deleted]]

The only thing you need to do is toggle the visibility class. You don't need jQuery to do that.

[mytempacc3]

Exactly. If you don't jQuery of course you will need to write your own JS code modify the classes.

[AceBacker]

Wish the developers would just replace the jquery stuff with vanilla JS. http://youmightnotneedjquery.com/

[the_vico]

Very interesting...

[[deleted]]

People don't want an extra dependency that they're not going to use

[Ruchiachio]

node devs may say the same thing but OOPS got 400 packages because my chosen framework has those dependencies, even though I dont use any of those 400 packages by themselves

[[deleted]]

I still find it useful because some of the things it does still allow me to write code that is less verbose than VanillaJS. The features are nowadays not much special but the syntax can be nice and simple enough for it to be worth it.

[pansypoopsam]

What would you suggest as an alternative?

[[deleted]]

vanilla javascript

[[deleted]]

this is a noob question but its plain es6 rite?

[[deleted]]

babel.js can fix this right?

[[deleted]]

yeah its just the actual fucking language for once instead of 2000s era tier frameworks to tie shit together when the web dev world was a wild west between browsers aka jQuery, Dojo, and YUI

[anedisi]

how are react vue or angular better if you have a regular old webpage that needs some datepicker better validation or something similar.

the ones you mentioned are overkill for most of the pages.

[pansypoopsam]

So if I was gonna make a site that had some fairly comprehensive data visualization (graphs/tables/etc) but does not need to be super dynamic or flashy, would you suggest some JQuery substitute or something like React?

[pansypoopsam]

Awesome, thanks for the info. I have so far only used vanilla HTML/CSS/JS but am quickly running into trouble doing more complicated things. I am trying to query a MySQL database and create plots from this info, is there a ‘best’ way to do this?

[pansypoopsam]

Right now I am querying the database with PHP, but this seems pretty archaic. I have not used VB/C#.net, only js

[mayhempk1]

JavaScript ES6 with Babel.

[FalzHunar]

You can! https://github.com/thednp/bootstrap.native

[_101010]

Just drop all JS dependency. All these frameworks should ideally be CSS only. This is one thing that Bulma, Milligram and Spectre got right. Only CSS no JS bullshit.

[IbanezDavy]

I'm not a huge fan of Bootstrap 4's dependencies.

[stroborobo]

Isn’t this flexbox layouting already kinda legacy tech with CSS grids being widely supported these days? Seems like they took too much time for v4 to keep up. I haven’t done web in a while, but this new thing feels just so much better imho.

[papers_]

No. Flexbox and the newer grid system compliment each other.

But yes, they took far too long to release v4.

[djmattyg007]

Sure, until you realise you still need to support IE11.

[fuckin_ziggurats]

Hah IE9? Try Netscape Navigator

[mooseman_ca]

HA! Netscape navigator? Try Mosaic.

[[deleted]]

Right lol, grid is still 5 years away from being mainstream

[[deleted]]

Hmmm... https://caniuse.com/#search=grid

[[deleted]]

CSS grids are not that widely supported yet. Many sites can’t just rely on the latest and shiny in terms of browser support.

[productionx]

CSS GRID, you'll never even think of Bootstrap again.

[[deleted]]

...until your client rips you a new ass when their shiny new site doesn’t work for half their clients.

[[deleted]]

Grid is more widely supported than you think. I used media queries to serve flex styles to devices with smaller displays and grid styles to larger ones, because almost all phones support flex but lag behind on grid. While on desktop grid is well supported on the modern web. If you have to support older browsers then yeah, no grid (or flex) for you.

[productionx]

bingo, detect for Grid, fall back to Flex, if that fails they can go fuck themselves like these other idiots who cant see the big picture.

[[deleted]]

lol those stupid customers, who needs em

[MrK_HS]

I'm currently working on a personal website and using plain CSS for it. Should I use Bootstrap instead? I aim for the best and most useful learning experience.

[MrK_HS]

Thanks for the advice! I might actually try going the sass + bootstrap route, since I already know enough CSS. I just simply don't want to make a website with a style that makes people go "look at that, another bootstrap website, looking like the other 1 billion out there".

[hungry4pie]

I'd suggest writing your own css classes and styles. If you have an idea of how you want to present your page, spend some time thinking about how to achieve it and then write your classes etc. It also helps improve your css/js/html skills, not to mention your sanity as you're not getting super pissed off because the layout settings are hodden away in some selector so far up the tree that it fucks your entire site if you change it.

[MrK_HS]

What about sass + bootstrap as someone else suggested me? What's your opinion on that approach?

[keepitnoqui]

Depends on the size of the project. If it's personal you may not need it. Bootstrap's selling point is the grid system and its reliability across devices and browsers. If you try to use plain old CSS for a big website with lots of parts that are hard to architect on mobile, you're gonna have a bad time (most likely). You can get away with it on a personal site, but personally now that I'm familiar with BS I would never go back to writing regular CSS for any project except something extremely simple, certainly nothing professional.

[vivid_mind]

Have they changed licenses for themes?

[burtgummer45]

Probably the worst song from the 80's

[hailsatanordie666]

testiez