I'm combining multiple js files using YUI Compressor. The command works successfully and outputs a combined file properly.
When I point my page to it, however, it doesn't seem to be read properly and I get this error in the Javascript error console.
YAHOO is not defined
I've tried using the --nomunge and --preserve-semi options but still get the same error.
Any ideas?
are you sure you're including the yahoo YUI js file before your script?
the variable YAHOO is defined within yui.js, so that script needs to exist and be loaded before you attempt to run any javascript that uses it.
Dave,
Hard to know what the problem is without a link to the compressed file.
You may also want to post those links to the dedicated YUI Compressor discussion forum on YUILibrary.com:
http://yuilibrary.com/forum/viewforum.php?f=94
Compressor's developers are there, as well as an interested community of fellow implementers.
-Eric
Did you try to jslint your code?
It may help you detect JS errors
It can usually be integrated in your IDE(I use Textmate), and warn you when you save your js file.
A poor man option is to use the online one at: http://www.jslint.com
Another option is to use a softer compression tool like jsmin to debug the problem. One is hosted here
You compress your files. Run your app, and usually your JS debugger will show you the problem.
Related
There are several libraries available for javascript error logging in a web application. These libraries sound useful during development. We can catch javascript errors at global level using widows.onerror handler.
All looks fine and dandy upto this.
But if we enable bundling and minification in ASP.NET MVC, it becomes hard to spot the actual error since minification causes renaming variables and compressing code thereby changing line numbers. How to deal with such a scenario? I've gone through many posts but couldn't find any satisfactory solution. We want the sensible javascripts errors to get logged in production environment. Any thoughts or suggestions on this?
Check out JavaScript source maps, which create a reference between your source scripts and the minified script that get's delivered with the page. It looks like someone has built an extension to the ASP Bundles that enable sourcemaps to be created.
However, even with sourcemaps the errors that are captured from window.onerror will still contain the minified names and locations. You will need to write some code in your error management system to apply sourcemaps to the code (or do it manually) to see the real numbers.
Chrome will automatically apply sourcemaps to errors in its debugger if they are publicly downloadable, but these values are not available programmatically to your error capture.
One last thing to consider is using a hosted service that already solves this problem. You can send error reports elsewhere and have them capture error information and give you reports/alerts about when an important error is happening--and even translate the error with sourcemaps. I recommend (and helped write) TrackJS.
I was hoping to use Mathjax to render some mathjax snippets into svg files.
At this point I believe that a command in the form
<javascript interpter> <Mathjax jax file> 'mathjax snippet here'
should work, I'm not sure what jax file I'm supposed to pick and how to set the output mode that I want, or how to configure mathjax in general when calling it from the command line.
I need this because I have to render this math expressions offline without a browser.
See this post on the MathJax forum for some code that does this using Phantom.js (there are some subtleties to be considered, so look at the code carefully if you need to modify it). Several others have taken this further. The svgtex project listed in that conversation apparently has been discontinued in favor of the Mathoid project that underlies Wikimedia's latest math support code.
EDIT: there is now the MathJax-node project that uses node.js to run MathJax via the command line or via your own node.js code.
I think you can use nodejs with some wrappers for MathJax - https://www.npmjs.org/search?q=Mathjax
Hey I am not expert in mathjax. but i read have read a article on it. I am passing some links to you. One of which is a documentation of it. Hope it helps you.
documentation pdf. and second one
I'm implementing a custom document-details action in Share on community 4.0.a.
This action is using repository webscript that acts as an HTTP POST handler.
So I went to /alfresco/service/api/javascript/debugger to enable the js debugger tool.
But when I try to open a js file manually like aspects.post.json.js it launches a syntax error.
it does it with any js that starts with:
<import resource="classpath:/alfresco/xxx/xxx.js">
Is there anything I should be aware of to use this debugger with such files?
The "import tag" is not valid javascript. Thats why javascript syntax aware editors complain. As Florian mentions, it is resolved before the "whole" javascript is fed to the interpreter (rhino).
Nevertheless, would be nice if Alfresco would replace this tag with valid javascript to make tools happy - maybe with something similiar to the require function node.js provides.
I have opened an improvement request (or rather contribution) in the Alfresco JIRA which addresses this issue by providing a clean import API in JavaScript. In case you want to play around with it, you can grab the patch files as attachments at https://issues.alfresco.com/jira/browse/ALF-13631
With this, your example
<import resource="classpath:/alfresco/xxx/xxx.js">
becomes
importScript("legacy", "classpath:/alfresco/xxx/xxx.js", true); //Repository tier
importScript("classpath:/alfresco/xxx/xxx.js", true); //Share tier
I have never tried it but I am pretty sure that the debugger can't handle the statements. The debugger comes from the Rhino javascript engine and the import tags are an extension from Alfresco. They are resolved before the script is actually run in the Javascript engine.
If possible, try to separate the actual javascript code into different .js files as described here: Alfresco Web Scripts using Javascript – Part 1.
The first challenge when structuring your Web script code is how
Alfresco imports additional Javascript files. Alfresco expects
xml-style tags at the top of the main Web
script file. This will break javascript validation, automatic code
indentation and other important editor features.
This can be solved by placing all Javascript code in separate files,
leaving only the import declarations in the main Web script .js file.
Of course, this only works if you got full control over the webscript files..
I use Dreamweaver for development, mostly PHP, html, css, javascript. Is there anyway to break up JavaScript files? or maybe a better IDE that makes it easier to work with? It just becomes quickly difficult to read and find what I'm looking for.
Thank you!
Intellij and/or Webstorm by Jetbrains has the best JS tools I have found. It has very good (as good as it gets, for JS) intellisense (autocomplete for variables and methods) as well as refactoring for variables and methods. You can cmd+click into method definitions from anywhere, as well. Unfortunately you need to pay for them, but if you are using Dreamweaver you had to pay for that. If you are only doing html/css/javascript Webstorm is the way to go.
Yes, you should break up your javascript files into relevant parts just like you break up your php files into relevant parts. The one key factor here is they should be combined and minified before being served up to the browser so the user does not have to make several network calls to your server for each .js file.
Check out Google Minify for an easy solution to that issue.
Take a look at the JQuery source to see how they divvy up their files. Now look at their combined framework, and of course their minified framework. What is actually served up to the user looks nothing like the source.
Uh, Dreamweaver?
Definitely use a different IDE. Aptana won the poll here :)
Multiple sites reference combining JavaScript and CSS files to improve web page performance, including examples of using ANT build scripts to concatenate the files prior to deployment.
I've search, and haven't found any information how to automate updating references to those files in HTML and other documents. I am looking to avoid hacking together something error prone, and want to learn from others who have automated builds in the past.
Are there automated tools in the wild to complete this task that I'm not seeing? Are there recommended processes to update the script and link tags in HTML? Can these solutions be integrated with ANT or similar build tools?
There sure is and it's a smart thing to do.
I found a PHP solution, don't know it that's okay for you, but if it isn't you can still read it's source (it's not difficult) and learn a lot. The solution works like this:
Rewrite your requests like this: from css/main.css and css/skin.css to css/main.css,skin.css (of course you can put many more).
Use apache's mod_rewrite to redirect this request to a script (in our case combine.php), that will combine all files to a single one.
The script combines all the files and sends the combined file. Then it saves it to a cache folder.
Next time around it checks if there is an up-to-date version of the cache and serves that one. If the latest file modification time has changed, it discards the cache.
The solution works great and it even makes use of HTTP cache headers and spits out an [ETags], which you should do anyway.
You are correct this is a great way to speed up page loading. It will even work in conjunction with a CDN, which the other poster recommended.
Here is a small script that will pack multiple files in to one for deployment. It supports both JS and CSS, and will even "minify" them by removing whitespace, etc. Just hook this in to your build and deploy scripts.
juicer: http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool
What even better, it will follow JS and CSS import statements, so you only need to point your HTML files to the loader file and it will work in both development and production. (Assuming you replace the loader file with the combined file on deployment.)
There are others, including some run-time solutions. But it sounds like you have a build process in place anyway.
As far as HTML updating, if you still need it, since automated deployments are very popular in the Ruby world, and you may find some standalone utilities to help even for non-ruby projects. (As above) Methinks this would be best handled by your own project's template language, though. (With a static resource revision id, or such.)
Good luck, and let us know what you find.
I think what you really want is a CDN Content Delivery Network.
Read about it here
http://developer.yahoo.com/performance/rules.html
http://en.wikipedia.org/wiki/Content_delivery_network