Hacker News Reader

Comment by PacifyFish | Hacker News Reader

I recently started using Semantic UI instead of bootstrap, and I felt productive in ~20 minutes. It was amazing. Never going back!

View on HN

FYI: Semantic UI has one of the largest file sizes for CSS libraries at 730 KB uncompressed, 95 KB gzipped - add in React and you'll reach 1MB in no time.

https://gist.github.com/primaryobjects/64a4e7e3351c646f51eee...

use something to remove unused css in your build process. i use purgeCss for that.. https://github.com/FullHuman/purgecss so simple and yet so powerful!

550 KB minified*

Also, it's unclear if the comparison is actually fair- some of these, like Semantic, contain a shit ton of icons.

Users don't care about the unused icons. They care about page load time and what it does to their device.

This is one of reasons why icons were dropped in Bootstrap 4. For people who need icons, they are easy to add via other sources. Also, some people didn’t like the default icons and replaced them.

I'm saying you can scrape out all the unused icons to lessen the size, that's why it's misleading.

i guess removing unused rules on deployment would reduce the file size. But a few kb is not much today - with auto playing hd videos on Facebook et. al.

There's a big difference between a video that streams in while the user watches it, and all the styles and scripts that are needed to render the page itself. If the former is too slow the user just keeps scrolling or the player switches to a lower quality stream. If the latter is too slow the user will just close the tab and move onto something else.

And if your coding for a project that isn't full of HD videos, then what?

With 12,000 kb/s the user will hardly notice the difference. You could add the CSS needed for the first render on the document, and it would save you a round-trip, and with HTTP2 you can send the CSS file together with the document. CSS files can however be cached so the few kb shaved off will only be saved on the first page load. If it's a common file, hosted on a CDN it might already be cached. If you are however worried about bandwidth usage the lowest hanging fruit are the binary files such as video,images, and fonts, then JavaScript trackers and frameworks, then the CSS and further trimming the content by getting rid of unnecessary markup.

Your bandwidth numbers are … extremely optimistic … unless you're only targeting business users at large companies. Worse, that's the wrong number to care about: what impacts user-perceived performance far more is latency and that's where something render-blocking like a huge pile of CSS really matters.

If you care about people on wireless connections, with less than perfect fiber connections, etc. a 500KB CSS file is going to add seconds to the total page load time and users will see it more often because the size will get it evicted from small caches more frequently. HTTP/2 won't help because the entire CSS file needs to be transferred before the page renders.

With HTTP2 you can add files to a request, if the user requests index.htm you can also send style.css in the same response. Versus the user first requesting index.htm, parses it, then request style.css. It's a pretty new feature, and will help a little bit with latency as it can save a round-trip.

Wireless connections have had bad latency, but it's getting better. 15 years ago you could get 200+ ms latency on WiFi. today we are down to around 10-20ms. 15 years ago we only had 100Mbit fiber. If you live in a city today you can get 10Gbe. Meanwhile there are people surfing using satellite up-link, or very poor GSM, so there are strong contrasts. But they probably wont bother loading any CSS (which makes semantic HTML important).

You're assuming roughly a 50MBit/sec connection. What about people on mobile connections or in regions where 1MBit are barely achievable? Drop them over the edge? Ignore them? Might be a valid decision for your project, but for some people, bandwidth still matters.

> With 12,000 kb/s the user will hardly notice the difference.

Regular users enjoy only a fraction of those rates, particularly mobile users.

I really hope FE developers in general don't target such unrealistic rates.

What were the benefits over using Bootstrap? Interested. I use bootstrap a lot, so I feel as if it is easy to be productive, but always exploring alternatives.

I find Semantic's React library to be great and it's well maintained, so if you're using React, I think it has a leg up over Bootstrap there, also just more keen on the aesthetic and design choices.

Excuse me for a stupid question, how does Semantic UI compare to React and Angular? I seek to pick up a framework and start developing browser-based GUI apps and don't know which to choose. I want to just layout GUI widgets and code the logic without using any Photoshop or anything like that.

They're different things. Semantic is the UI framework that you can use from React (in fact, there is a react-semantic-ui npm) or other.

React will deal with lifecycle of objects on the screen and state machines to mutate them, but the actual look & feel of the widgetry is defined by whatever ui framework you decide to use (bootstrap, semantic, blueprint, etc).

Makes sense. Thanks.

Well, At first semantic UI is a UI library which helps in providing pre-built UI components. React and Angular are Frontend frameworks, which helps in performance and code modularity. Photoshop is a photo editor, although people used to make layouts with it long ago,,, not anymore, instead people are using Sketch. You can of course code the logic using plain simple JS, HTML, CSS and you can make widgets as well, unless you mean desktop widgets - for that you need electron.

I see. Thanks. Can you suggest the quickest and most relevant learning path if I define what I seek more precisely? My relevant experience includes building WinForms apps in VisualStudio (where you just drop a widget on a form, click it and code what it does) and writing simple websites with vanilla HTML+CSS+JS. I've also tried some WPF and loved the MVVM model (AFAIK Angular is somewhat close to it but I also love functional programming so perhaps Reason-React or Elm can make a better choice) but didn't stick with it as I want my apps to run everywhere. I'd like to build a desktop-like (but reasonably webish-looking, responsive and mobile-friendly) single-page app that would be hosted on a static hosting, work in a browser and interact with the world by means of web services (some provided by 3rd parties, some coded myself in Python) and browser APIs. The idea of using a graphics editor like Photoshop or whatever to draw my UI scares the hell out of me, I want all the look&feel pre-designed "out of the box" the way it is in desktop widget toolkits like Qt. I've once studied Bootstrap and it seemed like a toolkit that can make the kind of UIs I want but I feel like I should probably pick up a modern SPA framework like React or Angular rather than code vanilla JS if I want to build a reasonably complex application.

From my point of view, the closest to that experience would be Angular + Web Components.

There are also some Forms like experiences for Web, for example:

https://anvil.works/

https://webflow.com

https://reactstudio.com/

https://pagedraw.io/

https://webix.com/

anvil.works seems awesome but its widgets selection is too humble, it doesn't even have tree view to the date (but they've said they are going to add it later AFAIK). I'll explore the others from the list. Thanks!

Quasar-framework is awesome. It is a Vue library with lots of components.

Love the framework.

The biggest gotcha for Semantic UI is that it requires FlexBox support which is extremely buggy (or non-existent) in IE 10 and 11. Edge is OK (mostly), but there are a lot of users still on IE 10/11.

That's good to know since they carefully avoid mentioning anything about browser compatibility on their site. Bootstrap 4 also uses flexbox but they have done a good job supporting IE 11, which is good: on a general audience site I see ~2.5% of traffic from IE11 worldwide whereas IE10 is ~0.08% so it's much easier to write off.

I was also disappointed to see zero mention of accessibility, which is a deal-breaker for government and large business sites.

I can say the same about Tachyons.

I feel that way with pretty much every CSS library that has at least 1,000 stars on GitHub.

Reply on news.ycombinator.com