I've noticed that my <!-- HTML comments --> have made their way into my production minified JS code.
How do I get rid of them?
Make a request to the meteor team to make this change. It's currently not possible
Related
Is there a way to remove all comments (inline and block) when running meteor build? I know blaze handle bars get stripped of comments ({{!-- --}}) when compiling to html. Is there a similar way to handle it for all the JS files?
Thanks
As I'm sure many of you know, Google PageSpeed Insights will sometimes complain about what it calls "render blocking css" when you test your sites.
Their suggestion is to render only "necessary" CSS inline in the HEAD. If you have CSS in an external file (as most everyone does), the recommendation is to load this after the page loads. This seems pretty extreme, but that's the recommendation. It appears to be a big blocker to improving one's Mobile PageSpeed scores as well...
You can use the PageSpeed Module for Apache or nginx to help you identify which CSS is actually "necessary". Again, one can argue about the relative value of doing this, but it is Google's current recommendation.
I had a notion to use javascript to "Lazy Load" the CSS file by having a small script fire in the footer of my theme, injecting the CSS into the head. You can see an example of this technique here: https://bensmann.no - This is NOT my site. I'm basically looking to replicate or copy what he's done with his minified CSS - Load it into the HEAD after the page has loaded via Javascript contained at the bottom of the page
I would then put <!-- W3TC-include-css -->
inside a <noscript> tag, thereby suppressing the placement of the minified CSS, as well as ensuring it appears for non JS browsers.
So, the issue is I need to get the location of the minified CSS file somehow, as well as the hash used to name the file (for an ID for the element). Anyone know how one can access the location of minified CSS file with PHP in the footer?
While this post does not give you the solution, it might bring you closer to moving the css where you want it:
http://freetheweb.tumblr.com/post/12482217372/w3-total-cache-better-css-js-placement
You'll have to learn about Critical Path CSS, which is a slippery slope, and truly, nobody really knows for sure which CSS is critical or not.
In the interim (or as a permanent solution), installing a plugin like Autoptimize and playing around with it will greatly improve your Page Speed Insights scores.
Remember to tick Show Advanced Options when going to the settings. I'd personally suggest to just inline all CSS and use that option, but that's just me.
If any plugins are broken after implementing this, just untick the Optimize CSS code, find the plugin's CSS file, and add that to the exception list.
i am building a site using Drupal 7,
when i use searching with module called search by page,
in results page i have duplicated scripts and styles tags.
is some way to prevent from this?
tnx a lot
Make sure to add you js and CSS using drupal_add_ms or drupal_add _css and this will take care of it for you. Try to avoid adding script tags to your templates directly.
Also, turning on CSS and js optimization may fix the issue for you. You can do this under the performance section.
EDIT: I should note that any site wide templates should be added to your themes info file. Any templates that should be loaded conditionally should use the functions above when needed on the page. This helps avoiding have tons of unused is loaded onto the page.
I am learning CSS and want to customize an pre-existing out-of-box cookie cutter CSS style web site provided by my vendor.
Is there a way I can remove an css file which was linked in the head tag so I can strip-out/unstyle the entire page easily?
I was reading posts regarding reset.css, Normalize.css & CSS refactoring tool, not sure if they are the right tools. Any suggestions are highly appreciated.
I suggest installing Firebug if you use Firefox so you can easily see the different stylesheets and what purpose they serve. From there just remove the <link rel="stylesheet" href="filename.css"> element that has the styles your trying to strip and start over. Create your own file and re-insert it into the <head> of said site.
By your question this is all I can imagine you want to accomplish -- forgive me if I misinterpreted you ..
Here is the link to download firebug: https://getfirebug.com/downloads
Just remove the tag in the section, and the CSS should no longer be there, providing that all of the CSS was in fact in the CSS files and not inline.
So far I can't find a question or fix for this. I'm sure it's something simple I'm missing.
I have a style bundle with a bunch of minified CSS, and I am decorating HTML elements with the classes inside. Everything is working great.
Intellisense and ReSharper however are both bugging me about the CSS the classes being unknown. I'm guessing this is because they cannot peek inside the bundles.
Question: Is there a way to fix this?
<!-- Style Bundles in HEAD tag-->
#Styles.Render("~/bundle/style/css")
#RenderSection("styles", false);
<!-- HTML elements in BODY tag: "row" is an unknown css class -->
<div class="row">
<p>Lorem ipsum</p>
</div>
Update: Visual Studio 2012. LESS conversion and intellisense works for single directly referenced files. My situation is that intellisense breaks when referencing a LESS bundle.
Update 2: Here's the code showing the BundleConfig.cs since it isnt clear
var customStyles = new Bundle("~/bundle/style/css")
.Include("~/Content/normalize.css","~/Content/*.less");
bootstrapStyles.Transforms.Add(new LessTransform());
bootstrapStyles.Transforms.Add(new CssMinify());
bundles.Add(customStyles);
Notice we are using Bundle not StyleBundle which is necessary because we want to specify the LessTransform() class and skip the built in CSS transformer. The LessTransform object is a custom object that simply reads in all the LESS content and concatenates it on a StringBuilder and then calls dotless's converter... out comes a huge CSS string that is minified and returned. The question is why cant VS or ReSharper peek at the returned CSS and help check class styles?
Here's a post on jetbrains blog. It's a bit out of date, but Jura went on record stating that there were no plans on supporting LESS (yet).
User:
Are there any plans to support LESS? I don’t care a whole lot about full support, but it would sure be nice if it could at least bring highlighting and code completion support into .less files and have it handle nested rules.
Jura Gorohovsky :
No, no such plans yet. Can you point me to a publicly available
project that uses LESS extensively so that we can take a look at it to
determine the scope of work?
Link
Late edit:
Web WorkBench from Mindscape may provide what some people coming to this thread are looking for. They are very response to bug fixes, and have been making some solid improvements to intellisense in the LESS world.
Have you installed the js extension to Visual Studio 2012? Go to Tools | Extensions and Updates and then SDKs if you have many installed.
Don't think the bundling has any affect on your intellisense, I've tried with and without and my intellisense is still there. Ensure you css stylesheet is included in your solution and maybe test with a more specific class, e.g. "onebeatconsumer" instead of "row" (there could be a clash somewhere with this)
If you are using LESS, this could most definitely be your issue as it visual might well not be able to parse LESS syntax as it only generates the full styles at runtime. Does styles in a standard css stylesheet work okay for you?