Is there a NetBeans plugin to check for unused CSS and JavaScript across a project? I know there are tools such as Dust-Me (for Firefox) to do this online for one page, however I am interesting in perhaps a plugin that can look across multiple files and find unused resources.
Thank you!
I am unaware of any plugin like this written for NetBeans specifically. If you are interested in looking across all the pages in your project, something like Helium is probably as close as it gets.
While not a plugin for your IDE, you load the JS file into your header so it is present in all pages, and it will scan your site and return a list of unused selectors in loaded stylesheets. Hope this helps!
Related
I found out that I have 19(!!!!!!) different CSS files in my Wordpress directory.
I am not sure if I can just simply move all the selectors from all the different files into one general file?
If not, which actions do I need to take in order to do this?
It slows down the whole website and I'm not sure how to approach this.
Thanks in advance!
p.s I have the same issue with Javascript files, does it take the same approach?
Try using Autoptimize WordPress plugin here's the link or W3 Total Cache WordPress plugin here's the link. They are easily available to download.
Note: With W3 Total cache enable minify option.
They both support combining and minifying all enqueued JavaScripts (JS) and Stylesheet (CSS).
I have a wordpress site which works good but has a long average loading time. According to google insights and other benchmarks, my main problem is the JS and CSS code from different plugins installed (like, 40 or so..) but mainly the JS.
Is it possible to combine all the JS into a single file without breaking the entire site and/or plugins? (I need all of them.) Is it also possible to do the same with CSS?
Yes, this is possible, you should use another plugin for that task.
There are several that you can use and it's a matter of personal preference but here are a couple that popped from a quick search.
Merge-Minify-Refresh
"JS & CSS Script Optimizer" is another option.
And probably most popular one.
W3 Total Cache
Yes , You can do it by below plugin.
https://wordpress.org/plugins/w3-total-cache/
I understand that in Firefox OS every app is a web app, but I'd like to create a "native" look & feel in my own application, meaning that I want it to "fit in" with the built-in application styles.
Mozilla even has a style guide for this:
http://www.mozilla.org/en-US/styleguide/products/firefox-os/
Is there a stylesheet and/or a JavaScript which I can include in my app in order to create controls and UI elements that look like the ones in the style guide?
(The only download I could find on that site was a PSD containing all the designs, but I'm looking for something ready-to-use.)
You have the good link for some UI guidelines, but you can check what we call the Building Blocks or even get those on GitHub. Another way is to see what we did in GAIA, but in any situations, it's not just about importing a CSS file.
Apart from Building Blocks, there is also Mozilla Brick based on X-Tags, included in Mozilla Appmaker.
clone the BuildingBlocks from https://github.com/buildingfirefoxos/Building-Blocks.git
Or do bower install building-blocks if you prefer manager libraries by bower.
Include cross_browser.css if you want your webapp can run on other browsers.
Make sure to check the index.html for example. The Building Block components are writen by CSS only and located in style and style_unstable folders.
If you want more code examples, install UI Demos with Firefox Browser https://marketplace.firefox.com/app/ui-demos which comes with sample and source code.
The usage is updated in my blog post
http://blog.gasolin.idv.tw/2013/09/reuse-gaia-ui-elements-with-building.html
I am relatively new to JavaScript and trying to find a way to get a good overall understanding of JavaScript projects, frameworks, etc.. For example when I look at a JavaScript based source on Github I would like a one page snapshot of the dependencies between the html, css and the various .js files requiring further js files( modules) , instead of looking at the source code tree and opening up the individual files. What I am looking for is either an object diagramming tool or something like a "file diagram".
Is there a tool out in the wild already doing this? (and ,yes I have already tried Google-ing it)
(I used to use a tool in the Windows world for tracking DLLs which is a similar concept.)
https://github.com/nodejitsu/require-analyzer gets you part of the way there.
One could also implement a file dependency analyzer if you are looking for more comprehensive html/template analysis with these two:
http://nodejs.org/docs/v0.4.8/api/fs.html#fs.readdir
http://nodejs.org/docs/v0.4.8/api/fs.html#fs.watchFile
Using Firebug you can see the files requested by each page, the server response and you can filter them by type. The HTML view lets you see the entire page including related js/css content. I don't think it's exactly what you are looking for, but I find it helpful for this sort of thing.
here are some bookmarklet code that could help (taken from https://www.squarefree.com/bookmarklets/webdevel.html
view style sheet :
javascript:s=document.getElementsByTagName('STYLE');%20ex=document.getElementsByTagName('LINK');%20d=window.open().document;%20/set%20base%20href/d.open();d.close();%20b=d.body;%20function%20trim(s){return%20s.replace(/^\s*\n/,%20'').replace(/\s*$/,%20'');%20};%20function%20iff(a,b,c){return%20b?a+b+c:'';}function%20add(h){b.appendChild(h);}%20function%20makeTag(t){return%20d.createElement(t);}%20function%20makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid;'));%20add(makeText('h3',%20d.title='Style%20sheets%20in%20'%20+%20location.href));%20for(i=0;%20i
view scripts:
javascript:s=document.getElementsByTagName('SCRIPT');%20d=window.open().document;%20/140681/d.open();d.close();%20b=d.body;%20function%20trim(s){return%20s.replace(/^\s*\n/,%20'').replace(/\s*$/,%20'');%20};%20function%20add(h){b.appendChild(h);}%20function%20makeTag(t){return%20d.createElement(t);}%20function%20makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid;'));%20add(makeText('h3',%20d.title='Scripts%20in%20'%20+%20location.href));%20for(i=0;%20i
I think my question would be better laid if I write here the scenario of our current set up and the things I want to achieve. We have a Drupal 6 site and freemarker files that are using the same theme as Drupal. Now I have to optimize the loading and reduce the file dependencies of the freemarker files to CSS and JS. I was told to use the minified/optimized JS and CSS of Drupal and delivered it via CDN. But using those minified and CSS alters the design of the freemarker pages. I'm still not sure the solution for this. Thanks for your help in advanced.
Validate all of your CSS and look for parsing errors or warnings and correct them. This should prevent layout issues when minifying/optimizing it. I've had this same issues with CSS in the themes of Drupal we created. After fixing parsing errors, I could aggregate just fine.
I may be stating the obvious here, but if you're using the same CSS on two sites and the visual results aren't the same, the markup must be different. So either your markup needs to be changed on one of the sites, or the CSS needs to be made more general to work with both types of markup.