handling css with Jawr - css

my scenario:
large amount of JSP (about 3000)
not too much css files (about 100)
Today I have a lot of bundles that includes a couple of css files, as needed.
Then the jsp includes: or the bundles or the css files.
Is Jawr the best choice for me?
How do you handle you css files?

You can either bundle your web resources on the runtime (using a servlet/filter) or buildtime (maven plugin or ant). There are several tools which help you to do that. I will just list some of them:
Jawr
JSO
wro4j
Jawr can be your best choice as long as it does exactly what you need.
Disclaimer: I'm a member of one of these project, however this answer is not biased.

Related

MVC 5 cshtml minification

I want to minify Razor views (.cshtml files) on compile-time.
Currently, I use WebMarkupMin, but it minifies the HTML on runtime,
So, how can I minify .cshtml files on compile-time?
I built a very trivial and easy to set up and easy to understand minifier for Razor and ASP.NET MVC 5. It just replaces multiple spaces with one, but that often has the biggest impact while having the least amount of side-effects.
Have a look if you're interested: https://github.com/tompazourek/RazorHtmlMinifier.Mvc5
Usually, it's recommended to use gzip encoding to minify HTTP responses, but I found out that if you minify the HTML before gzipping, you can still get around 11% smaller responses on average. In my opinion, it's still worth it.
You can choose to minify your files at anytime (build-time) using the method outlined in this post: https://debugandrelease.blogspot.com/2018/11/automatically-minifying-cshtml-files-in.html
It makes use of a task runner to create minified .cshtml files. In development, you will work with the unminified versions of the files, but in higher environments, the minified .cshtml files will automatically be used. Please see the post for more details on how to set it up, or view the sample github sample repository linked at the end of the post.

Inline CSS in Joomla

I am optimizing my site and I am following GTmetrix's suggestion to inline a small amount of css. Only I can't find where it is calling for this. I can see it when I view the source but when I check my different index.php files I can't seem to find where to make that edit. Any thoughts? Thanks. My site is www.destinychurchjacksonville.com and the css in question is:
http://www.destinychurchjacksonville.com/media/com_acymailing/css/module_default.css
Like I said, I can see where it calls for the file when viewing the source but my site is built in Joomla which is php.
I've had really good results with JCH Optimize. It's a moderately complex extension so plan on spending time reading the docs and testing the options.
It will combine multiple CSS and JS files and you have some options to inline the CSS.
If you can get most of the extension options working you'll be impressed with your grading improvements. For me, the big gains were from combining the multiple CSS and JS files.
Good luck!
The css file you are referring to is called from within other ccs files in the same folder located at /yourjoomlarootfolder/media/com_acymailing/css using:
#import url("module_default.css");
which seems to be called from mod_acymailing.php located at /yourjoomlarootfolder/modules/mod_acymailing depending on the acymailing skin/theme you are using
or at least that's what i found in a fast search i did on one of my sites using acymailing.

Using a lot of style sheets. Needing opinions on how to move forward efficiently

I'm new to web development and am developing a website using bootstrap. I've got quite a few .css files that involve bootstrap, an open source bootstrap theme, some style sheets for the plugins I'm using and etc. Thing is, I feel like I'm doing the same thing over and over again, putting a lot of overhead on things.
For example, this is how the styles on the web page I'm developing currently operate:
Bootstrap default theme is loaded
Bootstrap custom theme is loaded, overrides the majority of the default bootstrap css configurations
My own custom css file is loaded, overrides the majority of the custom theme css configurations
I guess it's worth mentioning that my custom css file only overrides colours and borders.
I'm thinking if the theme is open source, should I just edit the theme itself? Or should I still be editing everything within my own custom css file?
Again, I'm very new to web development so apologies if this is quite a silly question. Optimisation is key for me, though. After the development stage I will combine the CSS files using bundles provided by the Microsoft.NET optimization package.
Never modify a library directly (css, js, php etc.). What if a new version come out, fixing some bugs. You can not download it, because it will override all your fabulous work.
You get the right process right now. Import your libraries, then override them with you own file and lines of codes.
In your case, it does not matter at all the number of files you are importing, because you will combine and minify them.
If you really care about performances, I suggest you to look at the "CDN" systeme, for Bootstrap or jQuery it could be interesting and provide some good benefits.
Look at this question and the answers, they will give you some good hints : Single huge .css file vs. multiple smaller specific .css files?

Rails and Compass - What is the right way to create different CSS per view/controller?

I'm using rails with compass.
When using rails without compass, rails has a css per each controller, which contains things that are only relevant to the views in that controller.
I couldn't get the same behavior with compass, which resulted in having a big monolithic file instead of separate files per controller.
What is the recommended approach to solving that problem?
Rails (since 3.1) does create a css file per controller but it's only for practical code separation, all code assets get compiled into one master file per format (.css, .js..), and this is the best practice 90% of the time.
If you want to use this approach with SCSS or SASS code, just change the file extension to .css.scss or .css.sass (ie: mycontroller.css.scss)
If you want to separate the compiled files per controller (you probably don't need it, so i'd advise that you understand the asset pipeline before doing it), you'll have to implement the custom behavior yourself. take a look here http://guides.rubyonrails.org/asset_pipeline.html

Bundling resources via bundle.config vs BundleConfig.cs in ASP.NET 4.5 WebForms

Regarding ASP.NET 4.5's new System.Web.Optimization / Microsoft.AspNet.Web.Optimization:
Can anyone explain the difference in the use of bundling resources using the BundleConfig.cs class file as opposed to the bundle.config xml file?
I've seen some articles showing bundling both js and css in BundleConfig.cs, while others showing bundling js in BundleConfig.cs and css in bundle.config.
I guess I don't understand #1) why you wouldn't just do them both one particular way for simplicity - and #2) why anyone would prefer to hard-code resources like that in a class file? It seems like a much more dynamic approach to just put them in an xml file that can be changed on-the-fly if necessary.
It seems like more articles actually lean toward using BundleConfig.cs than anything else. Is there some particular pro or con that encourages this?
Also, if there is any real documentation on System.Web.Optimization, I would love to know the location (because I sure can't find it).
Thanks-
As far as I can tell, the accepted answer doesn't actually answer the question at all. It discusses the benefits of the bundling framework, but not how using the BundleConfig.cs is different than using the bundle.config file.
A lot of it comes down to whether you prefer working in code or in markup, but each does have some pros that are specific to that method.
For the bundle.config, there's really only a single benefit, but it is a big one. By using it, you can manage bundles without having to touch code at all. This means that you can make changes without recompiling, making quick deployments easier. Also, it means that your front-end developer, who is going to be most familiar with the files that should be bundled, can define the bundles without having to work with any back-end code.
However, there are quite a few limitations on what you can specify in the Bundle.config. For instance, you can't specify any custom transformations to be applied to individual items or bundles. The only bundle properties that you're able to set are the Path, CdnPath, and CdnFallbackExpression. You can't set the Orderer or EnableFileExtensionReplacements properties. You don't have a way to include a directory including all subdirectories (like you can with the IncludeDirectory method). Basically, there's a LOT of functionality that is only available through the back-end code. Granted, a lot of this you could set by using back-end code to retrieve a bundle that was defined in the bundle.config, and then manipulating. But if you're going to do that, you might as well create the bundle in the back-end, also.
My personal philosophy is to use bundle.config unless I need to do something with the bundle that's not possible that way. However, I do agree that having them all in one place is ideal. If I decide I need to use the class, then I'll use that for all of my bundles of that type (I do sometimes put my JS bundles in the class and my CSS bundles in the .config file, though). I'm sure some completely reasonable people would disagree with that process, though.
this documentation explains it all better than I ever could
http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
One of the nicest things is this:
The bundling framework follows several common conventions such as:
Selecting “.min” file for release when “FileX.min.js” and “FileX.js”
exist.
Selecting the non “.min” version for debug. Ignoring “-vsdoc”
files (such as jquery-1.7.1-vsdoc.js), which are used only by
IntelliSense.
Can anyone explain the difference in the use of bundling resources
using the BundleConfig.cs class file as opposed to the bundle.config
xml file?
The difference is that you would have to read, parse and load the content of the bundle.config at runtime. Hence, using BundleConfig.cs class file could be simpler.
1) why you wouldn't just do them both one particular way for simplicity
Totally agree.
2) why anyone would prefer to hard-code resources like that in a class file?
Simply put: easy to understand.
It seems like a much more dynamic approach to just put them in an xml
file that can be changed on-the-fly if necessary.
Yes, but you have to write more code to detect when changes happen and then add/remove/replace existing setup. If done poorly, it could lead to UI issues at runtime.
Also, if there is any real documentation on System.Web.Optimization, I
would love to know the location (because I sure can't find it).
Already answered above, but I would repeat: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

Resources