Build options to Fomantic are still pretty terrible?

[batata004]

Hi,

Almost a year ago I said that after building Fomantic using the semantic.json the final code (mostly CSS) was still too big. I will give you an example: today I built the semantic.css (selecting only the components I want) but it lacks a ton of personalization.

For example: after building it, it still shows inside the css file things like .inverted , .animated which I never use... I mean, the component button is too generic (just as an example, cause many other components are as generic as button). How can I, for example, only select the primary and red button (without icons left/right or any fancy stuff) to be present in the final CSS file? There is a ton of "trash" inside the final CSS final and removing it manually is a PITA since in every updae I will have to manually clean this mess.

Maybe I am saying something wrong, cause I read in the Release Notes that later versions of Fomantic have a better CSS implementation (which, in my opinion, is false cause if you build the latest version and the 5 previous, you will see that the final CSS file is always getting bigger and bigger...).

With tools like PageInsight Speed Test (provided by Google) it's becoing increasinly painful using libraries that carry a lot of unnecessary stuff and dont allow devs to customize just what they want. You can easily be penalized by Google JUST by importing the CSS and JS file of Fomantic, they are huge, they import external fonts... lots of behaviour that is pretty bad in SEO and performance, mainly regarding mobile devices. (I am not stupid, I now how to override the font problem using importGoogleFonts:false and @fontName:inherit, it was just an example).

Isnt fomantic ui driving in the direction of better customization? Smaller overhead? Or it wants to become a sutffed library that no serious dev will dare to use because it would hurt a lot SEO efforts and website performance?

I AM NOT COMPLAINING ABOUT THIS LIBRARY - I want it to make it right. And if the nice DEVs behind this library does not care about making it more SEO friendly, more performance foccused, I am out of using this library in future projects and I would recommend other digital agencies/devs to staty away of Fomantic cause if this is the case, this library is getting at every release further and further away from an efficient and great tool and the result is that the websites you develop will not rank well on google, will not open fast and may even freeze on older smartphones that does not support almost 2MB (without compression) only to load an asset (like fomantic).

[lubber-de]

Did you recognize the new variation.variables file since 2.8.1 by #781 where you can switch on/off lots of variations to reduce the css?
https://github.com/fomantic/Fomantic-UI/blob/master/src/themes/default/globals/variation.variables

[batata004]

Did you recognize the new variation.variables file since 2.8.1 by #781 where you can switch on/off lots of variations to reduce the css?
https://github.com/fomantic/Fomantic-UI/blob/master/src/themes/default/globals/variation.variables

Will take a look at that right now and rebuild it and check the results! Thank you.

[lubber-de]

If you also reduce the list in emoji.overrides according to your needs (or omit emoji.less at all) the css gets even more shorter
https://github.com/fomantic/Fomantic-UI/blob/master/src/themes/default/elements/emoji.overrides

[lubber-de]

Just for the record (because we already talked about this some months ago) and for all who probably don't know yet:
For more reducing of generated CSS you can limit the colors to only those you need (and even create new color names) by adjusting
https://github.com/fomantic/Fomantic-UI/blob/master/src/themes/default/globals/colors.less

[lubber-de]

Btw we are working on some little website to customize all of this online ..stay tuned 😉

[lubber-de]

Enabling gzip compression on your server will also help a lot

[exoego]

I understand the pain point regarding SEO/performance perspective, but I think issue report should be written in more respectful and calm way.

As lubber-de pointed, out, I also think FUI offers customization for that perspective.
Maybe docs are not so informative right now... there are rooms for improvement.

[batata004]

@lubber-de WTF!!!!!!!!!!! This variation.variables is FREAKING AMAZING! I could easily customize only the components that I use, and the reduction in file size was huge, from 270kb to 130kb (uncompreessed)!!!!!!!!!!!

Man, this new "feature" of allowing users to build more powerfully their fomantic installation, is incredible! So far I just found a bug that if I set variationPopupLoading:false for some reason the popup component does not work reliably (mainly in Firefox, sometimes it does not open the popup). Anyway, I set it to true and everything works just fine.

The only thing I didnt understand was options like variationModalLegacy and variationDimmerLegacy. How do I know if it's necessary?

Sorry if I looked rude, I was always glad that Fomantic continued the Semantic project which was receiving really few updates in the latest releases (about 2 years ago). But I am glad other people took this project really serious and improved it BY A LOT!

[lubber-de]

You can turn off the legacy settings , if you are not supporting IE11 and don't use useFlex:false for dimmers or modals.

I now prepared a new PR to also reduce the unneeded CSS for transitions by #1513 which you were suggesting in #769 😉

[batata004]

Wow!!!! I kept editing the variation.variables file and now I am close to 110kb! Man, that's freaking awesome. MANY other frameworks that I already used (and still use) dont provide NOT EVEN CLOSE such customization of the built files. You, are doing a great job @lubber-de and I am pretty sure many people dont know the great things you implemented into this library. I follow this library for a long time, use it in hundreds of projects, and was not aware of this great features you brought to it!

Indeed I noted that transitions cant still be customized in the variation.variables and it would be really nice such improvement!

I also thank you for your reply regarding legacy, now I got it!

I dont want to extend this post and dont want to take much more of your time, but just so can people can Google the small problems I found, I ask you this:

variationMessageConsequences -> I found no documentation about this. What is it for?

variationMessageSizes:medium -> generates error when building, it says the medium does not exist. I used large instead and it works perfectly.

Also, most of the times I dont explicitly set size in any of my elements, I dont use small, large... So I assume that the default is "medium" right? But medium is not listed in many components as a valid size (documentation). Why? For example, https://fomantic-ui.com/collections/message.html does not have MEDIUM example at SIZE section. Same with INPUT at https://fomantic-ui.com/elements/input.html (check SIZE section, no medium shown).

[lubber-de]

variationMessageConsequences are the special "colors" positive, negative, success, warning, info, error defined in message.less
medium is almost never used as name (only exists in dimmer, image,placeholder and text) thus does not always exists, that's why you get the error) and supposed to be the default size of everything.

[lubber-de]

We keep the medium definition out of backward compatibility.

[batata004]

Right, so if I never use small, large... what should I type in the @SiZe of variationMessageSizes for example? Should I type "medium"? It would be nice to exist a default specific size for all the components if the user does not specify any size.

As I understood from what you said, sometimes the default size is medium, sometimes there is no default name (so what is the default?) and sometimes the default is large (in the case of variationMessageSizes for example)...

[batata004]

I never ever reached score above 91 with https://www.sitepor500.com.br at Google PageSpeed. I spent all this morning JUST optimizing Fomantic and check this out:

That's a 100 SCORE! You can try it out at https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.sitepor500.com.br%2F (the score may vary a bit cause I am still messing with the code and still removing more things from Fomantic).

You can clearly see how important this optimizations you've been doing are so great and valuable. I tried really hard at the past to move from a score from 70 to 91 (this website is heavy in effects and it makes everything just harder) and now, with just small changes in the build, I managed to get 100 in a website that is far away from "basic" cause it has many effects and stuff that has to lazyload and so on.

Great job fomantic and @lubber-de !

[lubber-de]

Right, so if I never use small, large... what should I type in the @SiZe of variationMessageSizes for example? Should I type "medium"? It would be nice to exist a default specific size for all the components if the user does not specify any size.

The default size (without any additional size name) will always be generated. So, no need for a "medium". If you only want the default and no other additional size then use

@variationMessageSizes: false;

This logic is the same for any widgets sizes value.

[batata004]

THANKS!!!