We Keep Coding

Making a DuckDuckHack Instant Answer work on own site

I'm trying to see whether it's possible to use the code from DuckDuckHack Instant Answers outside of the context of the main DuckDuckGo website. After all, an Instant Answer is mostly a standalone component that consists of some HTML, CSS and Javascript and should be relatively self-contained and reusable.
Since the DuckDuckHack project is in maintenance mode, it seems to be a bit difficult to obtain information: the Slack and Forum mentioned on the Developer Guide have been disabled. I tried to find out whether other people tried to make Instant Answers work in other contexts, but I couldn't find anything. There are tutorials on writing Instant Answers, such as this using Perl and the DuckPAN tools. I tried to get an existing Instant Answer to work using those tools but I failed to get it to work properly (not sure whether they are still maintained).
Since those tools seem to be a bit heavyweight, I thought it could be possible to bypass them completely and try to just use the HTML, CSS and JS from the Instant Answer directly.
I've given the Calculator a first shot. I identified the relevant source code in the duckduckgo/zeroclickinfo-goodies repository's directory share/goodie/calculator. The HTML seems to be in the content.handlebars, and then there's calculator.css and calculator.js. I created a plain HTML file, put the HTML from content.handlebars in there and included references to the CSS file and the JS file. At first, the CSS wouldn't work because the CSS rules don't apply without adding some more wrapper divs that can be easily found when inspecting the DuckDuckGo site with the calculator Instant Answer visible. After adding those wrapper divs, the calculator UI appears more or less intact. However the buttons of the UI do not work at all yet.
Looking at the Javascript console I get this error:
Uncaught ReferenceError: DDH is not defined
at calculator.js:1
Apparently an object DDH is required by calculator.js, however I have no idea what that object should be and how I could create it.
Does anybody know how this DDH variable gets usually initialized or more generally how to make this work? Any reference to projects reusing the code from DuckDuckHack for their own sites would also be highly appreciated.

I think the details of how the DDH object is put together might not be exposed through the open-source portion of DDG.
I've also made some attempts to repurpose some of the built-in DDG IA functionality (e.g. get programmatic access to the many, useful instant answers unavailable through their API).
In the process, I cloned the goodie repo and poked around. The pattern seems to be that for most goodies the payload to be displayed is DDH.<goodie>.content. In my local copy of the goodie repo:
$ grep -rE 'DDH' ./lib/
./lib/DDG/Goodie/Conversions.pm: content => 'DDH.conversions.content'
./lib/DDG/Goodie/Conversions.pm: content => 'DDH.conversions.content'
./lib/DDG/Goodie/Game2048.pm: content => 'DDH.game2048.content'
./lib/DDG/Goodie/PublicDNS.pm: list_content => 'DDH.public_dns.content',
./lib/DDG/Goodie/JsBeautifier.pm: content => 'DDH.js_beautifier.content'
./lib/DDG/Goodie/SassToCss.pm: content => 'DDH.sass_to_css.content'
./lib/DDG/Goodie/Constants.pm: title_content => 'DDH.constants.title_content'
...
On the javascript side of things, you'd find the corresponding .js files in the share/goodie directory, as you did for the calculator goodie.
The <goodie>.js files seem to introduce DDH.<goodie> namespaces (typically right at the top of the file) and define DDH.<goodie>.build functions. This procedure is referenced in the goodie-display docs (see the section titled Setting Goodie Display Options on the Front end therein).
Nowhere in the docs, though, is it documented how the content property of DDH.<goodie> is put together. I cloned the docs repo and grepped for DDH, revealing nothing to that effect.
None of the .js files in the share/goodie folder of the goodie repo, though, seem to give a clue as to how DDH.<goodie>.content is assembled either. Indeed, some of those .js files do not even contain the string content. For a listing of all share*.js files that do contain the string content, I did (in the local copy of the goodie repo):
$ find ./share -name "*.js" |xargs grep -l 'content'
./share/goodie/countdown/countdown.js
./share/goodie/text_converter/text_converter.js
The other .js files do not contain that string at all..
Edit
On the other hand though, I see you did manage to get the calculator going with some modifications to the .js file (e.g. by inserting that missing DDH namespace).

MathJax in MediaWiki: escaped syntax is shown, console has 404 errors

I've installed mediawiki-1.26.2 on a private server and want to display latex formulas in that. So I decide to use Extension:MathJax.
At first I installed a local copy of MathJax to render the equations (at top level of server:/var/www/html/mediawiki-1.26.2/). After completing the installation I tested it by visiting http://(Server)/MathJax/test, where the page tells me that "MathJax Appears to be Working!".
Then I downloaded the extension, extracted archive, renamed it to "MathJax" and moved it to “extensions” sub directory of mediawiki-1.26.2. After that I created symbolic link to "mwMathJaxConfig.js" in [local MathJax location]/config/local which is "/var/www/html/mediawiki-1.26.2/MathJax/config/local" directory. So already there exists two files:
local.js
mwMathJaxConfig.js (symbolic link)
Then I changed the last line of "mwMathJaxConfig.js" from:
MathJax.Ajax.loadComplete("_SUBSTITUTE YOUR URL___/mathjax/config/local/mwMathJaxConfig.js");
to this:
MathJax.Ajax.loadComplete("http://localhost/MathJax/config/local/mwMathJaxConfig.js");
Because extension page says: "You might need to modify mwMathJaxConfig.js file to make this work ... ".
After all of them, I tested did extension installed correctly? (wiki → special pages → version → Installed extensions part) And name of "MathJax" was there.
But when I try to show a latex in mediawiki, even simple terms like these:
We consider, for various values of $s$, the $n$-dimensional integral
:<math> \frac{f}{g} </math>
do not shown correctly. Results are:
We consider, for various values of $s$, the $n$-dimensional integral
\[ \frac{f}{g} \]
You can see :<math> is replaced by \[ and </math> by \]. So I guess MathJax is loaded but does not load correctly and problem is in about last line of mwMathJaxConfig.js.
Also I saved page as html and looked at to its code and only this part of code was related to MathJax:
<script type="text/javascript" src="./PageName_files/MathJax.js"> </script>
Above code was not in head and PageName is the name of saved page. I think that is replaced instead of this code which is described in MathJax docs:
<script type="text/javascript" async src="path-to-MathJax/MathJax.js?config=TeX-MML-AM_CHTML"></script>
I looked at Third-party Extensions in MathJax docs but did not understand its meaning.
Also I checked local.js file in [local MathJax location]/config/local whose last line is:
MathJax.Ajax.loadComplete("[MathJax]/config/local/local.js");
Do I have to change the last line of that and replace another string instead of [MathJax]?

The solution which worked for Davide Cervone and hasanghaforian:
Name of directory of local MathJax must be mathjax and not MathJax, then \frac{f}{g} is displayed correctly.
Two errors are shown in the browser console:
MathJax.js?config=TeX-AMS-MML_HTMLorMML-full,local/mwMathJax‌​Config:19 GET http://localhost/mathjax/extensions/TeX/xypic.js?V=2.7.0
MathJax.js?config=TeX-AMS-MML_HTMLorMML-full,local/mwMathJax‌​Config:19 GET http://localhost/mathjax/extensions/fp.js?V=2.7.0 404 (Not Found).
These two files are part of a third-party extension called XyJax for handling commutative diagrams called xypic. I suspect that the MediaWiki extension you installed is configured to load that, you would would need to obtain it separately from the link above. I don't know a lot about the extension, but I think that the references are to an old version, and that both xypic.js and fp.js have been combined in later versions. If you don't want to do commutative diagrams, you can remove them from the mwMathJaxConfig configuration file.

Vim Javascript Autocompletion + Suggestions?

I'm developing on top of OpenLayers.js. My project folder is structured as follows:
project /
|-- OpenLayers.js
|-- map.html
|-- map.js
\-- etc
As you can argue, when I start a new map project, I espect suggestions from Vim on how to complete the code, reading JS classes from all the libraries in the project folder (in this case, just OpenLayers.js).
E.g.:
map = new OpenLayers. --> <C-x><C-o>
map = new OpenLayers.Bounds
.Control
.Map
Selecting one of the suggested classes I should get a kind of autocompletion, like in Aptana. I've installed AutoComplPop and I get a nice automatic menu to select suggestions, but all of them are taken from the current JS file.
Anyway, I've correctly set up Tagbar + node.js + jsctags and I've generated tags file for my project, and added set tags=./tags,./../tags,./*/tags to my .vimrc.
In this case, also, Tagbar maps the current file JS structure but doesn't offer any mapping of the classes coming from other files.
Another probably relevant line in my .vimrc:
autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS
I'm struggling to get class and subclass suggestions and now I'm getting a bit confused with all the plugins/piece of software available.
Any hint?
Thank you guys :)

Check out YouCompleteMe and tern_for_vim.
Here's an article about using them together.

Your expectations are a bit too high. Vim is not an IDE like Aptana and the mechanisms used to provide completion are crude.
Did you check that your tags file has OpenLayers.Bounds, OpenLayers.Control or OpenLayer.Map? I can't find OpenLayer.Map and, going through the OpenLayer.debug.js I can't find this function either.
TagBar only works with the current buffer. If you want to show tags for other windows/buffers you'll need another older plugin: TagList.
AutoComplPop doesn't support JS out of the box. How did you set it up? Here is how I did but it still uses <C-x><C-o> while completion from tags is done with <C-x><C-]>.

How can I load my own js module with goog.provide and goog.require?

We are trying to switch the packaging for our project from dojo to google closure, but we haven't had any luck so far. Here is a simple example that illustrates what we are trying to accomplish:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="runtime/src/core/lib/goog-rev26/base.js"></script>
<script>
goog.require("foo.bar");
function main() {foo.bar.echo("hello world")}
</script>
</head>
<body onload="main()">
</body>
</html>
Then in /foo/bar.js I have:
goog.provide("foo.bar");
foo.bar.echo = function(s) {console.debug(s);}
The errors I receive in firebug are as follows:
goog.require could not find: foo.bar
foo is not defined
When I look in the Net tab, there isn't an http request out to fetch a file - I was expecting the closure library to generate a script tag to fetch bar.js.
help! ;)

I figured it out and it's not very hard, but there are a few gotchas.
Basically, you can use the dependency generating script calcdeps.py (you should read calcdeps.py docs) in one of several modes:
Generating deps.js file
Concatenating everything into a single file, optionally compiling it using the closure compiler.
For development you should use (1), since it allows you to not run the calcdeps.py after editing the JS sources, unless you make changes to the dependency tree. The rest of the answer is about this way, I haven't tried the other one yet.
Here's what I did to generate it:
#!/bin/bash
cd closure-library/closure/goog
python ../bin/calcdeps.py -p ../../../js -o deps > ../../../my-deps.js
...assuming the following directory structure:
project/
closure-library/ (as checked out from SVN)
js/ (my JS code)
app.html
(the -p parameter traverses all js files in the specified directory and the docs say you can specify multiple directories to search if you have to.)
The above call creates a my-deps.js file next to the main app.html, which I use to run the application. The created file contains information about my JS files in js/ and looks like this:
goog.addDependency('../../../js/controllers.js', ['proj.controllers'], []);
goog.addDependency('../../../js/ui.js', ['proj.ui'], ['proj.controllers']);
- where the first string it the path to my JS file relative to closure-library/closure/goog/base.js (this is important!), the second array is the list of goog.provide-d strings, and the last array is the list of goog.require-d strings.
Now in app.html I have:
<script src="closure-library/closure/goog/base.js"></script>
<script src="my-deps.js"></script>
<script>
goog.require("proj.ui");
</script>
<script>
// here we can use the required objects
</script>
Note:
In addition to including closure's base.js, I include my generated deps.js
As mentioned in the tutorial the goog.require call has to be in a separate script tag, because it appends a script tag to load the required scripts and they are loaded after the current script tag finished processing.
Gotchas:
The described above issue with paths being relative to base.js. goog.require creates the script URL to load by concatenating the base.js base URL (i.e. without base.js leafname) and the first parameter to goog.addDependency in deps.js.
calcdeps.py doesn't work well on Windows, in particular using the backslashes in the deps.js string literals
If something doesn't work well, you may want to look through all issues mentioning calcdeps and make sure you have an up to date checkout.

Update!!!
New version of calcdeps.py changes the game a little bit. To create your deps.js you now need to use the -d flag. eg:
python path-to-closure-library/closure/bin/calcdeps.py -i path-to-your-src/requirements.js -o deps -d path-to-closure-library/closure/ -p path-to-your-src/ --output_file=path-to-your-src/deps.js
To compile:
python path-to-closure-library/closure/bin/calcdeps.py -i path-to-your-src/requirements.js -d path-to-closure-library/closure/ -p ./ --output_file=path-to-your-release/scripts.min.js -c path-to-compiler/compiler.jar -f "--compilation_level=ADVANCED_OPTIMIZATIONS" -f "--debug=true" -f "--process_closure_primitives=true" -f "--manage_closure_dependencies=true" -o compiled
So the process is actually now a lot easier, but you have to use your powers of ESP to find out about it as its totally undocumented. The calcdeps.py now also does not work with Python 3.1 on windows so that is also heaps of fun. A few hacks got it working for me (which I will not put here as I'm not a python programmer and there must be better ways to do it).
Generally the last day has been super fun, hope this post helps someone avoid the same enjoyment.
Guido

I was able to get it to work by adding the following to deps.js:
goog.addDependency('../../../foo/bar.js', ['foo.bar'], []);
Firefox now makes an http request to /foo/bar.js when it encounters the goog.requires statement.
However, the file contains this comment:
// This file has been auto-generated by GenJsDeps, please do not edit.
According to this, GenJsDeps is the same as calcdeps.py. If you look at the documentation, it looks like there is an -o deps switch which will re-generate deps.js so it isn't edited manually.

Yes you should use calcdepds.py. I created a big blog post after much trial and error to figure out the best way to do this, I also go over the differences between dojo.require and goog.require:
http://apphacker.wordpress.com/2009/12/28/howto-how-to-use-goog-require-and-goog-provide-for-your-own-code/

Here's a little project that I've been working on that might be helpful to you: http://github.com/fintler/lanyard
Take a look at the build.xml, the file named lanyard.js, and all of the files located in src/geom/*.
The build.xml has an example of how to call calcdeps.py through ant for all of the js located in src. It may not be the best way to do things, but it's been working for me so far.

Either way to get custom modules working, at least for development version, is to include manually js files in head section of html page, after google's base.js file inclusion.
<script type="text/javascript" src="js/closure/goog/base.js"></script>
<script type="text/javascript" src="js/closure/custom/custom.js"></script>
<script type="text/javascript" src="js/closure/custom/sub/sub.js"></script>
...
But, you should care about sequence of inclusion by yourself. For not very large custom files sets it works good. For production version you still had better use js source compiling to get all benefits of closure library.

solution:
download closure to your project externals (or assets, whatever).
don't bother with setting onload, delay, playing with async, etc..
they won't work (they are also very poor design pattern and extremely lame..)
- this is your main.js where you dynamically injecting your code into the DOM (for example creating a bookmarklet or something):
/**
* loads the base.js of google closure.
* http://code.google.com/p/closure-library/
*/
(function() {
var s = document.createElement('script');
s.type = "text/javascript";
s.src = "./assets/closure/goog/base.js";
s.async = true;
document.getElementsByTagName("body")[0].appendChild(s);
}());
/**
* activated from the base.js as JSONProtocol.
*/
window['starter'] = function() {
console.log("hi...");
};
now:
edit your base.js
add the the end of the file
......
.......
........
/**
* run the method when done load. just like JSONProtocol.
*/
window.setTimeout(function() {
window['starter']();
}, 5);
your "callback" simply activates starter when the file has done rendering,
it works perfectly and it keeps loading every resource asynchronously.
p.s.
the window['....'] syntax is so you could safely use closure-compiler to the max and always use the same name (although there are another ways to do so, but this is the simple "always working" way..).
2. on base.js you could also avoid the timeout and just use
......
.......
........
/**
* run the method when done load. just like JSONProtocol.
*/
window['starter']();
but as a rule of thumb modern browsers acts better when you wrap those "don't care, just do this stuff at the end, like JSONProtocol callback" stuff-
timeouts (mostly used with values from 0-5) are not interrupted as timeouts but as a way to breaks the synchronicity of the code-block allowing truly "context-switch"-like behavior.
although there is an extra overhead there.

HTML syntax highlighting in javascript strings in vim

I don't know if this is possible/sensible, but I was curious to know if I can have my strings in javascript files have html highlighting. I discovered that strings in php could have SQL syntax highlighting, so I believe it is possible.
But, I don't know vim-scripting, so any help on this appreciated.
I am using the Better Javascript syntax.
PS: If there could be an option to turn it on and off while editing a js file, that would be wonderful
Thanks

Yes, it's possible if you don't mind some syntax file hacking. First you need to include the HTML syntax file from within the Javascript syntax file -- see :help syn-include for info on that; second you need to declare that HTML syntax can be found inside of certain elements (i.e. strings). Third, if you want to have the option of enabling and disabling it, you can make those commands dependent on a global variable, and write some mappings that set or unset the variable and then reload the syntax file.
For examples on how inclusion works, take a look at syntax/html.vim (which includes the Javascript and CSS syntax files), syntax/perl.vim (which includes the POD syntax file), or php.vim (which includes SQL syntax highlighting in strings, conditional on a global ariable).
Edit: did some work on actually making this happen in my copy.
In the head of syntax/javascript.vim, just below syn case ignore, add
syn include #javaScriptHTML syntax/html.vim
unlet b:current_syntax
syn spell default " HTML enables spell-checking globally, turn it off
Then add #javaScriptHTML to the contained= lists for javaScriptStringD and javaScriptStringS.
Finally you have to edit syntax/html.vim to prevent it from trying to include syntax/javascript.vim if it was loaded from javascript: find the line that reads
if main_syntax != 'java' || exists("java_javascript")
and change it to
if main_syntax != 'javascript' && ( main_syntax != 'java' || exists("java_javascript")