I'm trying to do some experimental stuff for which YUI looks like the best solution. The Getting Started documentation is all written on the assumption that you already know how to use YUI and only need to find out how to use specific components. Is there any documentation available that tells you how to go from an empty public_html directory to some kind of Hello World equivalent in YUI (preferably version 3)?
YUI is used like you would use any javascript: you need to include the relevant js files in the head section of your html and then write some javascript to tie them together (call the yui methods).
The page source for the simplest yui button example
http://developer.yahoo.com/yui/examples/button/btn_example01_clean.html
is probably the best place to start: shows how the head section would look like and what you can do with the button.
rwallace -- It's not exactly "Hello World," but "Writing Your First YUI Application" may be worth your time:
http://www.insideria.com/2008/05/writing-your-first-yui-applica.html
Note that this was written a while back, and the dependency tree has changed a little -- grab the latest info from
http://developer.yahoo.com/yui/articles/hosting/?animation&autocomplete&get&json&MIN&norollup
Regards,
Eric
You could do worse than to check out Douglas Crockfords tutorials on Javascript.
See this question
https://stackoverflow.com/questions/11246/best-resources-to-learn-javascript
Related
I am looking for a reasonable way to structure my Javascript code for regular websites that get more and more dependent on Javascript.
Large Javascript applications use - put your framework here, Angular, React, Backbone. Small websites suffice with just a list of $().slider(), $().popup() in a script style.
What I currently do is using the module pattern for different parts - slider, popup - and initialize these in my jQuery(document).ready(function($) { ... }); function. For example:
jQuery(document).ready(function($) {
HomeSlider.init();
ImageGallery.init();
});
Libraries are loaded via Bower and automatically prepended by Gulp. Any other suggestions for that are welcome as well.
Once more libraries are added, more REST/AJAX-calls are made and pushState is used more often my Javascript starts to become a mess and keep track of what happens when/where.
I am looking for suggestions to structure this Javascript for 'regular and modern' websites without committing to a big framework and 'overengineering' my code. This might be in form of code examples, 'light' frameworks or any literature.
Thanks a lot for reading and maybe even answering my question!
The answer to my own question would now be: Use VueJS.
I'm wondering if I can use CoffeeScript to include other standard JS files (as a simple way to do some combining of files).
I have a client-side minification tool I'm using (an app called Live Reload) which is working just fine.
<!-- Some jQuery plugins I'm using. -->
<script src="/js/libs/some-plugin.js"></script>
<script src="/js/libs/another-plugin.js"></script>
<!-- The output of my /js/script.coffee file: -->
<script src="/js/script.js"></script>
What I'd like to do, is just combine those plugins into output of my coffeescript file. I've looked high and low and I've only seen articles on server methods for this as well as a lot of articles on things like requirejs.org. I'm not trying to do anything that complex- I just want to get rid of a couple round trips for js files I know I'm never going to touch.
Does CoffeeScript have an "include" function to speak of?
There are ways you can achieve this by creating a more complex Cakefile, in which you will read the contents of js-files and append them with CS compiler output than write it into the single target js file. You can even create a fake global require function which will mimic its behaviour in the bundled file.
If you were looking for a standard tool or at least an approach to that problem, unfortunately, since CS is very young, there's none yet. There are some attempts though: https://github.com/jashkenas/coffeescript/wiki/%5BIntegrations%5D-Build-Tools.
I'm currently working on such a tool myself and am planning to publish it within a month. I'll post back then.
Basically, the answer seems to be no. This is not something CoffeeScript is capable of.
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 am making a rails app and having a ridiculously hard time trying to get the Redbox plugin to work. I'm pretty sure I installed everything correctly and am using it properly. When I use one of the helper methods, it seems to generate javascript properly. For example when I type:
<%= link_to_redbox 'hello', 'test' %>
it generates:
hello
which seems correct if i want to show a non visible ( display:none; ) div called test.
I'm so confused on this one. I'm pretty sure it is not finding the js or something but don't see why this would be. The redbox.js link is generated as:
<script src="/javascripts/redbox.js?1239506092" type="text/javascript"></script>
Check that the javascript file actually exists - it should be at public/javascripts/redbox.js (at least, that appears to be where it expects it to be).
the css has to be inline!
Try the version of GitHub. The current sourceforge version is pretty creaky.
http://github.com/craigambrose/redbox/tree/master
I'm using this one.
Stuff has started moving here. There is a few other forks that you might investigate. From some somments on the blog in April, it sounded like Craig may start it maintaining again, but oddly, the blog hasn't been update to point to GitHub.
There is another one
Also, read the comments for patches and other stuff:
blog.craigambrose.com/articles/2006/09/22/redbox-release-2
The blog comments are an impromptu support forum. I applied a form within a form patch I found here.
There is another blog somewhere that has a large discussion in the comments.
The other thing- play around with Firebug to analysis the html and find the issue.
Sorry for the dumb question, but...
I'm moving from VB to C# and this is really bugging me.
Is there a way to convince VS 2008 to draw a line separating my methods like it does for VB?
I'm really used to those, and i'm used to doing
//-------------------------------------------------------
myself in Javascript.
I'm hoping I won't have to do it manually in C# too.
Any pointers?
Thanks
Not out of the box. There may be third-party apps which will do this like CodeRush or something like that.
But my advice:
Get out of the habit of putting lines in between your procedures. Comments without meaning are evil.
You can do this for free (assuming you are using Visual Studio 2008 Standard edition or higher).
Install the free CodeRush Xpress. Then install the free plugin DrawLinesBetweenMethods
Copy the DLL to this location - C:\Program Files\Developer Express Inc\DXCore for Visual Studio .NET\2.0\Bin\Plugins.
This will producethe effect described here: Lines between methods in the C# editor (CodeRush/DxCore plugin)
If you don't want CodeRush Xpress then an alternative is to install the free DXCore extensibility engine and then install the above plugin. If you install DXCore you are also able to make use of a number of other useful plugins, most of which can be found at the same site as DrawLinesBetweenMethods.
Why not add bona fide summary comments to methods? Any number of tools can create some form of documentation out of this.
Also the IDE can collapse the method so unsure of the gain of this line. Wouldn't #regions be of more interest? (rhetorical question)
VS10 will allow you WPF inline and so if you can wait you could even draw a sunset between two methods!
Devexpress.com makes CodeRush, which has some visualizations.
Or use #region to separate any regions of code. For example, I separate overrides, methods, properties, events and objects, but you could wrap your methods in #region to clearly separate each one (and collapse them when not in use.)
This isn't what you asked for, but it is a great alternative.
Not quite what you are looking for, but using Resharper it's possible to set up a custom type members template that would surround every method in a file/project/solution with a region whenever you pressed a shortcut.
Your other Resharper option would be to create a custom surround template, which would let you select a block of text and chose surround with->YourCustomSurround to place your comment block at the top.
This should easily be possible in Visual Studio 2010 due to the extensible, WPF-based text editor.
A note regarding your comment:
separators [...]
allow me to skim through the code
REALLY fast. [...] I
can very quickly jump to the next [method].
What I see a lot, is that people forget about the two dropdown list at the top of the editor window (listing the classes of the current file and the class members of the current class). It allows navigating to class members very quickly.