Trying to get Easeljs js library in Aptana 3 (as web project). Dragged the files in the project (files are indexed). It doesn't recognize the library as code assist.
Is the only way for external js library to make a sdocml (if so is there a generator ?) or is there a other way to get code assist ?
Ugg I know it's off topic but i've found the code assist in Aptana3 and Eclipse to be poor in general, and a really memory hog, in many case I've turned it off, as the IDE has become unresponsive for the constant "rebuilding workspace"...
So with that out the way...
If you follow these instructions they should help you
https://wiki.appcelerator.org/display/guides2/Using+JavaScript+Libraries
Generally as long as the code is visible to the project (in say a gitignored lib folder), and it's documented using ScriptDoc (which isn't that much off jsdoc) standard, my understanding is it will do it's best to do code assist.
https://wiki.appcelerator.org/display/guides2/ScriptDoc+%28SDOC%29+2.0+Specification
You can apparently improve the code assist by using actual sdocml file for particular libraries, but I'm yet to see any improvement myself.
Just make sure there's a copy of easejs in your project, your editing js files in the javascript editor (right click open with javascript editor), and your project is a web/php project,
note it's pretty terrible at closures so i wouldn't expect everything to auto complete as you'd expect.
If your doing alot of commercial work, would recommend intellij as a good enterprise quality javascript IDE, or the web storm, html5/js cut of the code, they both support code completion in javascript alot better than Aptana3/Eclipse.
If not the community version is still better than Aptana3/Eclipse at javascript.
Related
Whatever I do I'm unable to go to definition between functions defined in different *.js and index.html files.
I'm not even sure if is it supposed to work? Or is this feature working only if I do some node.js developemnt using some imports? (I'm new to javascript, I just wan't to make webpage with WebGL, not some server-side stuff)
I tried to read this but I don't see how is it relevant for me? I just made empty jsconfig.json which did not helped
https://code.visualstudio.com/Docs/languages/javascript#_javascript-project-jsconfigjson
https://code.visualstudio.com/docs/introvideos/quicktour
https://code.visualstudio.com/docs/languages/jsconfig
See simple example search for THREE.Screen call from index.html which is defined in ThreeJS_aux.js.
My javascript project is here
https://github.com/ProkopHapala/LearnWeb
did you tried adding a tsconfig.json file and set allowJs: true checkJs: true ? This way vscode will start a tsserver and you will have all its features / refactors. Remember that JavaScript IS TypeScript so you don't have to use anything strange just good old JavaScript. Typescript compiler supports that refactor and many others (or you could develop / install third party plugins with more). And if you want to start using Types,you could still do that using plain old JavaScript with jsdocs. My two cents. More info: https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html
From the way you have your code laid out I would assume that you're going with a walkthrough or some kind of tutorial. Meaning, instead of splitting your JS into a separate file you're embedding it within the actual script tag in the HTML. Not a common practice is all unless someone is trying to maximize the development area, like a tutorial/walkthrough.
I think what you're really looking for here is design patterns. There is really no short answer to give you. There is also no single way to accomplish this. These design patterns are what puts JS together in a more readable fashion.
Try reading through this online book on design patterns Learning JS Design Patterns
This is a quick summary of your common design patterns AMD, commonJS, and Require. I recommend going through the book to get a more in depth understanding. Relation between CommonJS, AMD and RequireJS?
So I'm working on a just for fun project to get practice using HTML/CSS/Javascript.
I'm using Aptana to write all my code and it is currently set up to run and work in a browser (obviously) it's a text adventure game.
It would be really cool though to be able to compile the code into an executable file that runs in its own window, not in a browser.
Is this something relatively easy to accomplish?
Thanks in advance for any help! :)
FF and Chrome provide a function to run a custom website in an app mode. That means no menubars, no addressbar and a complete window for the website. Maybe this is already what you are looking for.
http://www.rarst.net/software/dedicated-web-app-window/
https://superuser.com/questions/33548/starting-google-chrome-in-application-mode
https://superuser.com/questions/171235/does-internet-explorer-have-something-equivalent-to-chromes-app-mode
But if you are interested in compiled code for speeding up your game, this is not the way to achieve this.
For Windows as OS
see http://www.autoitscript.com/autoit3/docs/libfunctions/_IECreateEmbedded.htm
AutoIt is a scripting language for basically everything (with automation). SciTE is the editor to go.
In the example of the _IECreateEmbedded function, just change:
_IENavigate($oIE, "http://www.autoitscript.com")
to
_IENavigate($oIE, "file://.../thegame.html")
Very simple, you just have to copy-paste it and build it - you can even build it Online: AutoIt Online Compiler
There are many different ways you can acheive this.
If you're only targeting windows machines, then creating a HTA would be the simplest approach.
The modification to the structure of your existing code would be minimal, its essentially changing the file type and adding an extra couple of tags in. If you wanted a single file, instead of an exe and any resources (images etc) that you use you would have to base64 encode your images, and insert external scripts into the main page.
for information about embedding images and icons into a hta: http://www.john-am.com/2010/07/building-a-self-contained-hta-with-embedded-images-and-icons/
You could also use AppJS, node-webkit or similar type projects, but they would add around 30MB of stuff thats not being used.
I am not even sure if something like I want is possible, so I am asking you guys to just let me know if anyone did that before. So, my goal is to when I click on "Publish" website in VS2010, to have all javascript files compressed into one, same with css and then in my layout file change the references from all different js and css files to only those two merged ones. Is that doable? Or maybe it's doable but in more manual way?
Of course the goal here is to have only two calls to external files on the website, but when I develop I need to see all files so that I can actually work with it. I guess I could do it manually before each push, but I'd rather have it done automatically using some script or something. I didn't try anything yet, and I am not looking for ready solution, I am just looking to get to know the problem better and maybe some tips.
Thanks a lot!
This is built into ASP.net 4.5. But in the mean time, you should look at the following projects
YUI Compressor
The objective of this project is to compress any Javascript and Cascading Style Sheets to an efficient level that works exactly as the original source, before it was minified.
Cassette
Cassette automatically sorts, concatenates, minifies, caches and versions all your JavaScript, CoffeeScript, CSS, LESS and HTML templates.
RequestReduce
Super Simple Auto Spriting, Minification and Bundling solution
No need to tell RequestReduce where your resources are
Your CSS and Javascript can be anywhere - even on an external host
RequestReduce finds them at runtime automatically
SquishIt
SquishIt lets you squish some JavaScript and CSS. And also some LESS and CoffeeScript.
Combres
.NET library which enables minification, compression, combination, and caching of JavaScript and CSS resources for ASP.NET and ASP.NET MVC web applications. Simply put, it helps your applications rank better with YSlow and PageSpeed.
Chirpy
Mashes, minifies, and validates your javascript, stylesheet, and dotless files. Chirpy can also auto-update T4MVC and other T4 templates.
Scott Hanselman wrote a good overview blog post about this topic a while back.
I voted up the answer that mentioned Cassette but I'll detail that particular choice a little more. Cassette is pretty configurable, but under the most common option, it allows you to reference CSS and Javascript resources through syntax like this:
Bundles.Reference("Scripts/aFolderOfScriptsThatNeedsToLoadFirst", "first");
Bundles.Reference("Scripts/aFolderOfScripts");
Bundles.Reference("Styles/aFolderOfStyles");
You would then render these in your master or layout pages like this:
#Bundles.RenderStylesheets()
#Bundles.RenderScripts("first")
#Bundles.RenderScripts()
During development, your scripts and styles will be included as individual files, and Cassette will try to help you out by detecting changes and trying to make the browser reload those files. This approach is great for debugging into libraries like knockout when they're doing something you don't expect. And, the best part, when you launch the site, you just change the web.config and Cassette will minify and bundle all your files into as few bundles as possible.
You can find more detail in their documentation (which is pretty good though sometimes lags behind development): http://getcassette.net/documentation/getting-started
Have a look at YUI compressor # codeplex.com this could be really helpful.
What I have done before is setup a post-build event, have it run a simple batch file which minimizes your source files. Then if you're in release mode (not in debug mode), you would reference the minimized source files. http://www.west-wind.com/weblog/posts/2007/Jan/19/Detecting-ASPNET-Debug-mode
I haven't heard about publish minification. I think use should choose between dynamical minification like SquishIt or compile time like YuiCompressor or AjaxMinifier.
I prefer compile time. I don't think it's very critical to have to compile time changing files. If you have huge css/js code lines you can choose this action only for release compilation and if it helps publish this files only in needed build cinfigurations.
I don't know if there is any possible way to somehow hook into the functionality from that 'Publish' button/whatever it is, but it's surely possible to have that kind of 'static build process'.
Personally I'm using Apache ANT to script exactly what you've described there. So you're developing on your uncompressed js/html/css files and when you're done, you call like ant build which then minifies, compresses, stripes and publishes your whole web application.
Example script: https://github.com/jAndreas/typeof-NaN-2.0/blob/master/build/build.xml
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 :)
I've developing JavaScript since many years but have never really thought about the whole testing, developing and building stuff - but I realized it's pretty much necessary. We've just used a Subversion repository with simple release tagging (switching to git soon). As a new bigger pure JavaScript project (using jQuery) is arriving soon, I'd like to optimize the whole process.
I already did some research but never found a good starting tutorial.
It's definetly a good idea to split classes and separate code blocks into several js-files and not a big one (as Prototype or jQuery do it). These js-files must be "build" into a single file. How do I achieve that?
It's pretty much necessary to Unit-test the stuff me and my colleagues are coding. I found the js-test-driver which has an eclipse plugin that seems to be doing his job quite good. If my developer-folder contains all these src- and src-test-files, how do I integrate this in the building process?
For testing, take a look at this: https://stackoverflow.com/questions/32809/javascript-unit-testing
For merging all of your JavaScript into one file you can use something like YUI Compressor. You need to be looking for a minimizer first, compression second. A minimizer just takes the files and merges them together and gets rid of whitespace. A compressor will actually try to optimize the js for you by changing variable names and removing unnecessary code.
As for unit testing I am unsure of how you will want to do that. There are a few unit test libraries out there. A popular tool for testing is Selenium. I don't currently do unit testing so I am out of my element there..
For setting up your code you could always look at using a JavaScript framework like ExtJS or JavaScriptMVC. Those help you with setting up your code in the proper way and also helps focus your team on the proper standards and coding structure while also writing a lot of the code for you so you don't have to re-invent the wheel.
EDIT: Just a quick after thought. Even if you don't want to use a JavaScript framework, I would suggest checking them out, especially ExtJS, just to see how they organize their code and some of the tricks they do to keep it clean.
I'll answer part of your question:
These js-files must be "build" into a
single file.
This is possible only with server side language - in ASP.NET you have built in tools for that, otherwise build your own "merger" server side file and reference that file instead of the actual .js files.
These js-files must be "build" into a single file. How do I achieve that?
Definitely keep your files separate in version control, and only merge them during the build process.
The YUI compressor mentioned elsewhere is a java-based tool that will not only merge but -- of course! -- compress your files for faster download.
If you just want a simple merge of files, a simple Perl or bash-script (or other preferred scripting language) could concatenate multiple .js files into one for release -- just make sure that the build script also updates all HTML in the release to reference only the single page.