Develop Reference

How to find an issue when using foreign JavaScript?

My problem is quite generic: I know that I have a JavaScript issue somewhere. Now I don't know how to start searching where the problem could be. Usually I use the Firefox built-in or the Firebug Debugger. I know how to use it in general. But what I don't know is where to start. Where should I set breakpoints? I often have this kind of problem.
As an example which is my current problem: I have a page with an unordered list. Every second list item is empty for some reason. I can see that the page gets loaded with proper list items. But then some JavaScript seems to add those empty items. It's a Yii application that inserts some JavaScript directly into the HTML but let the browser also load jquery.js, bootstrap.js and yii.js. I haven't added any own JavaScript.
Now, as I said, I don't know where to start to find the problem. It might be that I have done something wrong with some configuration. But it could also be bug. I just want to figure it out somehow.
With my current issue, the best would be to have a breakpoint on a function like onInsertEmptyListItemToCounfuseDeveloper() ...
I don't want a solution to my current issue. I'd like to know in general, where and how to start finding JavaScript related problems. Especially, with third-party JS. With some applications (CMS, shops,...) there are sometimes a lot of JS files. This makes it more worser.
I hope this question is answerable and you can provide some experiences.

Not speaking 'bout the CMS right now, but in general my method is
1) If you did not add any of your onw scripts, just 3rd party, delete them all of your project e.g.
You've added jquery.js, bootstrap.js, yii.js so you remove them and then you test if all works fine, if so, add first one, for me it would've been jquery.js, test again, if no bug visible add second and so on. In this case you'll see in which file is some bug or sort of unexpected behaviour.
2) Here is the worst part, in the found file you should find the problem part. So, download the full version, not production, open it in editor, and start searching... The good news are that you don't have to look through all file, just find the event listeners in your devtolls or firebug and follow them.
All of this is just my experience , so if someone know better methods, I would like to hear 'em too.

It would depend on the code. Generally, if I have a function that is suspicious, I put breakpoints or console.log() at the beginning and end of the function and see if both are executed. Then I follow the logic down to figure out which piece is broken. It really depends on the code though.

Most efficient way to get a Three.js project to work in a ruby on rails app?

I'm trying -unsuccessfully- to get a Three.js project to work within the Ruby on Rails framework
I keep thinking that there must be an easier way to do this than the way I'm doing it at the moment
First I googled for a guide/tutorial on how to port working Three.js code to rails and found very little on the subject. Which I figure means: either people don't do it very often -or- that it's so obvious that no one has bothered to document it.
Next
I googled for a three.js gem and found one here - http://rubygems.org/gems/threejs-rails
(which I gave up trying to get to work - after much messing around with the manifest file)
Next
I installed the source of Three.js into the vendors folder and messed around with the manifest file again. This time I had more success - although there seems to be dependency issues within Three.js that require_tree (and myself) are oblivious to.
So theoretically, I could probably get it to work after a several hours of figuring out the Three.js loading sequence, but this doesn't feel right.
I feel like I've gone down a blind alley here and I'm missing something obvious.
is there a better way to do this?

Rails is, primarily, a back end server side framework. Three.js is a front end library for rendering WebGL in a browser. They have little to do with each other. I think you're trying too hard.
The process is the same as adding something like jQuery, or any other javascript library.
Drop the three.js file in app/assets/javascripts/three.js
Add #= require three to your application.js.coffee
Ensure that javascript_include_tag('application') is part of your application layout template
Now launch the server, load a page, and type THREE in the javascript console. If you get a return value, your good! Now write some custom javascript, save it in app/assets/javascripts and include it on the pages you want to do awesome 3D stuff.

You can also use the following gem threejs-rails that I created for my rails app today. It works right out of the box if you're on rails 4+. Fork and submit a PR if you need further support on it!
Most efficient would obviously be via CDN, I plan to add that support soon.

I found it the probably easiest way - though not the proper Rails way - to include all dependencies as written here https://guides.rubyonrails.org/working_with_javascript_in_rails.html
and then to simply create a partial with the JS code inside of a script type="module" tag. Though Alex Wayne's way is probably better, this one works, too.

ASCIIMath and TiddlyWiki

I use TiddlyWiki for work-notes. I already have pretty large wiki, but now I want to add math-support. As far as I understand what is written here, all I would have to do to use ASCIIMathML in my wiki would be including the script ASCIIMathML.js. Doesn't work (no effect at all). Then I found this plugin for TiddlyWiki, but when I import it to my wiki, it gives me an error in one of the regexp strings. When I download that wiki directly, ASCIIMath does not work anymore, even though I have the script in the same directory.
Does anyone have a solution available, how I can add ASCIIMath to my existing TiddlyWiki?
Edit: I know this not strictly a programming question, but questions about tools (such as SVN or VisualStudio) get asked here all the time, and I see no-one complaining there.

Ok, I've got it now. The plugin I linked in the question works, but one has to import by creating the tiddler manually and then copy/paste the script, otherwise what comes in is messed up. Then, one has to import the ASCIIMathML.js in the header-section of the wiki-file.

ASciencePad sounds like exactly what you need: TiddlyWiki + WISYWIG + AsciiMathML + AsciiSVG.
I'm not sure how to translate your existing wiki to it, but I guess you could cut-and-paste the wiki source?

You ought to be able to migrate all the tiddlers from one TiddlyWiki variant to another easily. At the worst you could just copy the block of tiddlers at the bottom of the html file in a text editor and paste them into the new file. (Since the "wiki source" is that html file, I'm not saying anything different than Beni Cherniavsky-Paskin did.)
Roger_S

YUI Hello World

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

Problem porting WordPress Editor to a non-WP application

I like the look and feel of the WordPress editor (version 2.7), and I would like to use it in another web application that is written in ASP.NET. I've used TinyMCE before, and I've even extended it in the past. However, I can't seem to get the Wordpress configuration to work!
I've downloaded the entire WordPress package and taken the TinyMCE code (from the "js" folder) and put it in my web site. It ends up giving me an error on the following line of tiny_mce.js
return f.apply(s||this,Array.prototype.slice.call(arguments,2))
'undefined' is null or not an object.
Now, I've carefully made sure that the steps of execution are identical with the WordPress demonstration site that I've based this from.
I'm not a Javascript newbie (at all), but I can't seem to figure out why this is not working. Has anybody tried to do this before? What am I missing?
A demo of what I am talking about is here (username="admin", password="demo"). View the source, I have the three parts of Javascript that are (seemingly) required to power the editor.

Something of a stab in the dark, but I'm suspecting that there's a dependency on WP's prototype.js and you didn't bring that over with TinyMCE.

If you are able to determine which bit is undefined that might give you a clue. I tried looking at the demo with firebug, but tinymce.js was all one line, so I gave up trying to find that code.
Try putting in either some console.log() if you have firebug, or alert()s before that line, and try to see what f,s,this,arguments etc are when yu get the error, then do the same thing with a vanilla WP install and see the difference?

I suggest including the tiny_mce_src.js istead of the minified version, this way you can use firebug to debug and receive helpfull information.