Short version:
I'm updating some old libs to try to get them in AMD/requirejs format for management, but some of them have dependencies on old code.
Main Question:
I'm primarily confused as to what to list in the:
define(['what','goes','here'],function('what','needs','to','be','here'){})
and what goes in the shim dependencies list when dealing with combinations of AMD and non-AMD tools, and things like jquery-ui and jquery plugins.
ADDITIONAL INFO
The problem:
One of the older libraries depends on .draggable() from (and older version of) jquery-ui, some old version of a jquery plugin called 'onScreen', a spinner modal called spin.js -- all of which are not AMD friendly. (I also implemented an update to an AMD friendly new version of dropzone)
Two of the older libraries also use a modal library called vex which requires a dependency of vex.dialog. The existing site has an old version that is uglified.
I'm trying not to completely revamp this code as the longer term goal would be to remove those dependencies entirely, but I may not have to the time now to figure out what they are doing.
I've tried every combination of define(['list','of','stuff']) I can think of, but some of the libraries like spin (class Spinner), vex/vex.dialog and onScreen still don't always load properly. (sometimes I get one, but then lose another)
Can I define a shim AND include a list of AMD modules in the define? And if so, do I include the AMD list of dependencies in the shim in require.config? What goes where and why?
My libraries:
ImageSelector (requires AwsHelper, Utilities and ImageLayout below)
-- uses jquery (AMD), dropzone (AMD) and an old jquery plugin called jquery.onscreen.js (non-AMD)
-- depends on vex and vex.dialog (non-AMD)
-- uses .draggable() from old jquery-ui (non-AMD)
-- calls a global function 'loadSpinner' which uses spin.js (non-AMD -- see Utilities below)
ImageLayout (requires AwsHelper and Utilities - has attached instance of ImageSelector as a property .selector for methods that work in conjunction with the selector)
-- uses jquery (AMD)
-- also utilizes vex/vex.dialog (non-AMD)
Utilities
-- I'm trying to move the loadSpinner() function that requires spin.js (class Spinner, non-AMD) into this
-- I've managed thus far to avoid dependencies on things like jquery in this by refactoring code
Long version:
I'm trying to update some website code to use require.js for dependency management and to make the code more portable. But I'm running into a number of dependencies on old code that don't appear to be AMD-ready. Where possible, I'm trying to replace these with updated code and/or replace their functionality entirely, but in a number of cases, the code is minified and it's difficult to get a quick handle on what it's doing.
Rather than getting mired in minutia of trying to figure out and either replace or update these things, I read about how 'shim' can be used in some cases to handle these types of non-AMD code, but I'm still unclear on how to configure them.
Here's what I have... I have three libraries I have updated and one new one I created. One called 'ImageSelector' builds a web-gui to allow uploading files with dropzone. (My reason for updating it is that I converted it from using a local filesystem to using Amazon AWS S3 storage.) A second one called 'ImageLayout' handles the business logic of creating a product layout of photos selected by the user. (ImageSelector is split into two frames, a left one for uploading and sorting user files into folders, a right one for building the layout. Thus ImageSelector is dependent on ImageLayout)
The third library is one I created just with a number of repeatedly use 'utility' functions used across the website. There is an existing structured-code version of this in global scope with just a list of functions like roundPrecision(), sanitizeFilename(), escapeRegex(), baseName(), etc. I was going to build this with static methods, but then realized I can customize it if I spawn instances of it instead (e.g. I can change the characters 'sanitized' for different applications with global instance parameters)
The new one is the AwsHelper which is not a problem as it's entirely new code and handles all the interaction with Amazon AWS and S3. It was created in a define() AMD format while the others I have converted to define()/export format.
Anyway, some functions of the ImageLayout can be used independently by the order system, but for the most part, it's used as a dependency of the ImageSelector. AwsHelper is used mostly by ImageSelector but there are two functions in ImageLayout that utilize it. All of the above use the Utilities library.
My guess is something like this in the config (using ImageSelector as an example, but I'm wondering if "jquery" an "dropzone" need to be in there or the function define or both?)
shim: {
"ImageSelector": {
deps: ["jquery","dropzone","vex","vex.dialog","jquery-ui","jquery.onscreen"]
}
}
Additional require.js semantic questions:
(I'll post these separately if needed, but they may be short-answer and related)
Is there anything anywhere that shows how require.js searches for files? e.g. I understand about r.js for uglifying, but in some cases I can't track down the original code for these things. Can filenames include .min.js on the end or version numbers and will require.js still find them or should I rename and/or symlink files? e.g. jquery.js vs jquery-1.7.min.js for example.
The spin.js referenced above actually includes a class definition called 'Spinner'. How do I represent that in the config/shim?
Well, I posted that based on my experimenting the last 3 days riddled with failures, expecting more trouble. But apparently, shim was straightforward and having the required libs in more than one place (shim definitions and define([])) wasn't a problem.
I took a blind guess going through the examples on the require.js and came up with this configuration and amazingly it worked first try! (which makes me nervous as this is the first time I've gotten this code to work with no errors since trying to import it to require.js)
Here's what I came up with:
requirejs.config({
"baseUrl": "/js/lib",
"paths": {
"ImageSelector" : "../awsS3/ImageSelector",
"ImageLayout" : "../awsS3/ImageLayout",
"AwsHelper" : "../awsS3/AwsHelper",
"Utilities" : "../awsS3/Utilities"
},
"shim": {
"jquery.onscreen": {
"deps": ['jquery'],
"exports": 'jQuery.fn.onScreen'
},
"jquery-ui" : ['jquery'],
"vex.dialog" : ['jquery','vex'],
"vex" : ['jquery'],
"spin" : {
"exports": "Spinner"
},
"aws-sdk" : {
"exports" : "AWS"
},
"Utilities": ["spin"],
"AwsHelper": ["jquery","aws-sdk"],
"ImageSelector": {
"deps" : ["jquery","dropzone","vex","vex.dialog","jquery-ui","jquery.onscreen","ImageLayout","AwsHelper","Utilities"]
},
"ImageLayout": {
"deps" : ["jquery","vex","vex.dialog","Utilities"]
}
}
});
I also noted that some of the version naming was handled in the paths, thus I just named my libs in the paths and got rid of my "app/" directory reference altogether.
I have one Rails application and all files are in erb format. Is there any quick way to convert whole application's erb file to haml.. without any conflict.
And also would like to know for the Reverse..
Thanks in advance. :)
For erb-to-haml
You can use from the command line html2haml
html2haml your_erb_file new_haml_file
If you want to convert all your files in one go, look at this article : http://shifteleven.com/articles/2008/06/08/converting-erb-to-haml-snippet
erb2haml gem will do the trick.. have a look to https://github.com/dhl/erb2haml
For haml-to-erb
I recommend you HAML2ERB service . It's really cool and generates valid ERB/HTML code! Tested on big HAML views (over 800 lines of markup) from the real production app. Project active :)
have a look to this also http://makandracards.com/makandra/544-convert-haml-to-erb
I'm trying to understand how the gem backbone-on-rails works under the hood.
My problem right now is that I don't know who is in charge of generating the code for the templates it provides.
After installing and setting it up (I'm using the plain js route, not coffeescript, but the question is the same), if I write a template file in /app/assets/templates/hello.jst, it gets "somehow" translated to the following javascript inside application.js:
(function() {
this.JST || (this.JST = {});
this.JST["hello"] = function(obj){ <ugly js here> };
);
But who actually does generate that code? I've browsed the sourcecode of backbone-on-rails, and could not find anything that pointed to template compilation. Is the asset pipeline capable of doing that out of the box?
Ok, I think I found my answer.
The functionality is provided by sprokets, there is a good explanation on its readme.
Will close this in two days.
I have situation where I generate stylesheets based on information in the database. This means I have a views/users/show.css.erb which contains code like:
a {
color: <%= #user.favorite_color %>;
}
Fair enough, works perfectly with a respond_to { |f| f.css } in my controller. However now I would like to use some of SASS's sassy functions like lighten, darken etc. in my CSS, so I would like to have SASS parse my view. However I cannot figure out how to register SASS as a template handler in my views without too much ugly hacks. I just don't get how it works. Has anyone ever tried this?
I have tried including SASS's Functions module but to no avail.
I was planning of doing the same for dynamic user themes some time ago. Back then, I found a mailing list answer to a similar question to yours, by Nathan Weizenbaum (author of SASS) which got me back on the straight and narrow:
On Mar 18, 11:46 am, Nathan Weizenbaum wrote:
There's a reason Sass doesn't allow dynamic access to Rails code - see
the Sass section ofhttp://haml.hamptoncatlin.com/docs/rdoc/files/FAQ.htmlfor
a brief discussion. Sass is also fairly slow, since it's only compiled once,
so this is probably far too slow for a production environment.
The link is not working anymore, but the SASS FAQ has only one section called Can I use a variable from my controller in my Sass file? which answer the dynamic question:
If you really, really need to compile Sass on each request, first make sure you have adequate caching set up. Then you can use Sass::Engine to render the code, using the :custom option to pass in data that can be accessed from your Sass functions.
So in general, SASS is not designed for dynamic css generation on each request. Rather it is intended to be used as a pre compilation solution to generate static css files.
I use Aloha theme in NetBeans 6.8, everything looks cool except these blue tags in HAML files, which are unreadable. How to find a place where this blue color could be changed?
P.S. I use that HAML plugin which seems to be unsupported and lacks features
Screenshot: http://img.leprosorium.com/846904 (sorry, new users can't embed images)
Lots of people would DIE for a decent Netbeans HAML plugin.
I suggest that we just PAY for someone to write it :
http://www.cofundos.org/project.php?id=181
Sad to say "that HAML plugin which seems to be unsupported and lacks features", is the only Haml plugin there is for netbeans. I don't know if there is source code for it out there either (never looked). If you look, the colours are all defined in a file called haml.nbs. You can find it by extracting the org.netbeans.haml.jar from the nbm you downloaded and then extracting the haml.nbs from that. Ubuntu's file-roller will cheerfully do this for you.
The contents of the file look like this:
COLOR:declaration: {
default_coloring: "comment";
foreground_color: "gray";
}
...
With a little fiddling you could probably change those values to suit your needs and put it back together. It should work.
Of course if there was source for the darn thing that would be even better.