Example directory consolidation (deconsolidation?)

[byuva]

I note looking through the many examples on your blog that the directory structure is a bit difficult to map to what I have on my hard drive. Here is one possible directory structure that makes sense to me.

/yui/x.xx.xx - Nothing in here other that what comes with yui version x.xx.xx (using the same directory structure)

/yui-ext/xxx.xxx - Nothing in here other than what comes with yui-ext xxx.xxx (same directories as well)

#################

/future - Code that you intend to integrate into future version of yui-ext. If you have the time, update examples to point to the /yui-ext/xxx.xxx when functionality is added.

/future-css - CSS that you intend to integrate into future versions of yui-ext.

/future-images - Images you intend to integrate into future versions of yui-ext

*These directories would hopefully constantly be growing and then shrinking :-)

#################
/app - application code specific to this one example (hopefully a single .js)

/app-css - application css specific to this one example

/app-images - application specific images (it would be great to add as many of these as possible ot yui-ext)

##################

I don't mean to try to dictate you directory structure as much as point out that these are how I, as a somewhat inexperienced user, try to deconstruct each example. I've listed the directories in the order that I find most useful (ie stuff that I know is already in there and I simply have to access), stuff that I can reasonably expect to be added and maintained in the future, and stuff that may be a one off or I should be maintaining myself.

I am pretty inexperienced with CSS and don't really expect to be playing with it too much at this point. In my ideal dream world I would just put a single .CSS file out of yui-ext at the top of my page (perhaps representing one of several possible themes) and then another one or two representing any of my customizations. I realize that CSS is designed to Cascade but it is very compressible and is usually cached so a single CSS file supporting all the basic yui-ext functionality seems to have some appeal. I guess what I am asking for is some sort of simple theme support.

Thanks again for all your hard work and your patience with my somewhat rambling suggestions.

-b

[jack.slocum]

The directory structure on this site is hideous, i would definitely have to agree with that. It started out with the current structure because my blog was on blogger.com and I was doing remote linking and the simplified structure made things easier. I have legacy blog posts and examples that rely on the current structure. Everything under /blog has or had remote linking, so I've had to keep it the same.

If I ever have time to write all the redirects, the directory structure I will probably adopt will look like this:

/yui/ - will always be wordpress
/forum/ - will always be forum
/deploy/ - root deployment folder
/deploy/yui-ext/ - bogus folder that will mod_rewrite to the latest version folder, this way my links are always good
/deploy/yui-ext.x.xx.xx/ - the structure under this folder is exactly what is in the download
/deploy/yui-ext.x.xx.xx/source/
/deploy/yui-ext.x.xx.xx/build/
/deploy/yui-ext.x.xx.xx/docs/
/deploy/yui-ext.x.xx.xx/resources/
/deploy/yui-ext.x.xx.xx/resources/images/
/deploy/yui-ext.x.xx.xx/resources/css/
/deploy/yui-ext.x.xx.xx/examples/ - new examples folder under each build, this way paths are correct and examples can be included in the download. Under this folder I will separate each components examples in it's own directory. Multiple examples for one component = multiple sub directories.
/deploy/lib/ - any referenced scripts (like yui.js)
/blog/ - My blog specific stuff

In this setup "future" stuff would just be in the next version's deploy folder.

What do you think of that?

[byuva]

It looks good. Adding example code to the actual yui-ext tree would be a nice addition I also like that future stuff will be in its proper place in the directory tree.

Does this mean you are moving away from you blog style examples to self documenting example code? I dig the commentary on the blogs entries but it can sometimes be difficult to seperate the example being illustrated from the additional support (navbar, examples that slide in from the top, etc) code on the page. I've noticed you've been linking so seperate files on your blog pages which helps a lot.

Where does the actual Yahoo UI library fit on the tree? Is is it somehow encapsulated by yui.js?

I am not sure if this is implied by your tree but any attempts to consolidate the CSS would help. It seems that many examples have numerous CSS files and their role and relation are difficult for me to determine. I am not strong at writing CSS yet so a simple default theme would be very beneficial and it would be great if the examples didn't rely on any additional CSS (except of course an example showing how to modify the CSS :-)

-b

[jack.slocum]

All future examples on my blog will be in iframes. This lets me use the structure illustrated above, and lets the example code be easier to follow when you can view the source to a simple html file without all my blog crap in it.

All the YUI utility classes are in yui.js -- yahoo.js, dom.js, event.js, dragdrop.js, animation.js and connection.js. This way it only requires one http call to load, and the browser only checks for 1 updated file when the user does a refresh of a page. Overall it improves performance even those the initial down might be slightly larger.

Consolidation of the CSS files by me really isn't a good idea. CSS generally requires minor tweaking and having them separate makes it easier to find your way around (IMO). Maybe I can include one compressed yui-ext.css file with everything in it though. That would be easy.

[byuva]

How is yui.js distributed? I don't see it as part of the yui-ext or yui packages. If the licenses are compatible (and bandwidth permitting) it would be slick if yui.js and yui-ext were distributed together (no question about getting the right version of YUI).

I can understand from a development standpoint how seperate .CSS files are easiest to organize and edit. However a nice default configuration (whether seperate files or yui-ext.css as you suggest) on which the examples relied and which we could cascade smaller changes would really help those of us still getting up to speed on the Javascript side of the house.

Thanks again for the quick response and all your efforts.

-b