Develop Reference

Technology behind these drawing apps [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
Can anyone please tell me what could be the technology behind http://realtimeboard.com/ and http://draw.io/? I am interested in learning that and develop such a software for as my project?

I'm pretty sure they use Canvas 2d (HTML5 API).
There are a ton of tutorials about drawing oncanvas:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial
http://www.html5canvastutorials.com/
Here are some libraries about canvas drawing:
http://www.jquery4u.com/javascript/10-cool-javascript-drawing-canvas-libraries/
http://fabricjs.com/ - Fabric.js is a powerful and simple Javascript
HTML5 canvas library
http://kineticjs.com/ - Enterprise class interactive web graphics
Don't rush when you pick your drawing library.
UPDATE:
realtimeboard.com seems to be based on Shockwave Flash only, see this piece of code:
<div id="realtimeboardApp"><object type="application/x-shockwave-flash" id="rtbLoader"></object></div>. I wont discuss this much further.
draw.io source code:
<div class="geDiagramContainer"><svg shape-rendering="optimizeSpeed" >[...]</svg></div>
<div class="geOutlineContainer"><svg style="[....] min-width: 3251px; min-height: 2768px;">...</svg></div> Seems to be based on SVG only, however, it still contains some SWF flash object, perhaps as a fallback mechanisms for older browsers and Internet Explorer.
On draw.io site I could identify the following libraries:
http://www.jgraph.com/mxgraph.html (just as Yuryi says), a proprietary JavaScript drawing library, a license costs between 3800€ - 25000€;
http://www.mathjax.org/, open source library for displaying math formulae.
I don't know much about Flash, except that it's obsolete, good for working with older browsers and that Adobe has discontinued its development in favor of HTML.
Updated:
MxGraph is open source now. It is now an option
Conclusion:
Although SVG seems a good technological solution, however mxGraph would not be an option for me, considering the costs and licensing restrictions on my code.
If you want a drawing library look at my earlier recommendations, or look for a SVG drawing library at http://www.farinspace.com/top-svg-javascript-libraries-worth-looking-at/.

Unfamiliar with realtimeboard, but draw.io is made via workflow library MXGRAPH: http://www.jgraph.com/mxgraph.html you can request a trial version, there's documentation, forums, sample projects etc. We're using it in our applications and it's pretty awesome.

Best way to port c++ game to web [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I realize the above question is rather broad so I will narrow it down. I have a simple opengl c++ game engine that lives in a static library (could be converted to a dynamic lib).
I have been thinking of ways of getting it to run in web. From what I can see I could use ActiveX or Google NaCl to run the c++ code in browser. But these technologies do not seem easily cross platform? Or maybe I have misunderstood.
Another option I have seen is converting the engine to javascript and WebGL and running in an HTML5 canvas. Would this be slower than c++? It would be very cross platform though.
What do you think is the best option, or better yet is there any other option I have missed?
EDIT: what about a custom plugin similar to the unity webplayer?

There is a library created by #kripken which is still under development. It takes LLVM bitcode and convert into Javascript.
You can see the project page here, with working examples.
https://github.com/kripken/emscripten/

I would strongly suggest porting to NaCl.
Advantages:
Performance: You can use the full power of the CPU to render your game. If your game uses good 3d graphics or physics, you can make it look smooth even on old system configs. The performance of NaCl is comparable to Native OS applications, it only looses nearly 5 to 10% of FPS when I compared the same game to Win32 version.
There are a lot of already ported examples, games for NaCl that can help you do it easily.
It is already cross-platform. Chrome runs on Windows, Linux, Mac OSX.
Disadvantages:
Might take you around a week to port. You have to port to OpenGL ES 2.0 (However, it should be the same with any browser based methods, especially HTML5)
Runs only on Chrome.

If you want something portable in a browser, then it has to rely on Javascript (and likely WebGL, although IE does not support that).
ActiveX and NaCL are just not portable in any way, shape or form.
I can't say which is easier, but you have an option of rewriting your game in Javascript, or using a tool like Emscripten to compile your C++ to JavaScript.
Note that if you use the latter, it's still not a silver bullet. You'll likely have to make lots of changes to your code (for example because the libraries and APIs used in your C++ game won't be available on the browser)

What's the best library to do a URL hash/history in JQuery? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I've been looking around JQuery libraries for the URL hash, but found none that were good. There is the "history plugin", but we all know it's buggy and isn't flexible.
I am loading my pages inside a div. I'll need a way to do back/forward along with the url hashing.
mydomain.com/#home
mydomain.com/#aboutus
mydomain.com/#register
What's the best library that can handle all of this?

I recently looked at 3 different plugins - jquery history plugin, history, and jQuery BBQ.
They were all quite hard to setup, I did get jQuery.history working but it still had problems with IE7. So I changed to BBQ and it worked fine across all our target browsers (IE6, IE7, IE8, Fx3).
So I recommend the jQuery BBQ plugin.
Edit: here's a blog post I just wrote which demonstrates jQuery BBQ with cascading dropdowns.

Have you tried jQuery Address? From Asual, the guys who made SWFAdress. Asual - jquery Address
The jQuery Address plugin provides powerful deep linking capabilities and allows the creation of unique virtual addresses that can point to a website section or an application state.

History.js is well documented/maintained and supports all browsers.
https://github.com/browserstate/history.js
From the site:
History.js gracefully supports the HTML5 History/State APIs
(pushState, replaceState, onPopState) in all browsers. Including
continued support for data, titles, replaceState. Supports jQuery,
MooTools and Prototype. For HTML5 browsers this means that you can
modify the URL directly, without needing to use hashes anymore. For
HTML4 browsers it will revert back to using the old onhashchange
functionality.

I've had good luck with reallysimplehistory (nee dhtmlHistory). It's not jQuery specific, but it works in IE, firefox, and webkit, and doesn't require much setup.

Perhaps try this jQuery History plugin: https://github.com/balupton/jquery-history/ It provides cross browser support, binding to hashes, overloading hashes, all the rest.
There is also a Ajax extension for it, allowing it to easily upgrade your webpage into a proper Ajax application: https://github.com/balupton/jquery-ajaxy/
Overall it is well documented, supported and feature rich. It's also won a bounty question here How to show Ajax requests in URL?
Or if you want to use the HTML5 History API there is: https://github.com/browserstate/history.js

AFAIK, all history plugins do the same thing:
setInterval(function() {
if(theHashChanged) {
someFunction(oldHash,newHash);
}
}, 500/*whatever*/);
That's pretty the core of it (minus browser hacks for adding history entries without clicking a link, etc.). It's always going to be buggy because it's a bit of a hack and there is no cross browser API for handling history changes.
On top of all that, the user experience for this sort of thing is not very good. Users don't understand when they have to click the back button 4 times to get off the page.

Will ExtJS die? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I look at ExtJS, and it appears to provide many of the RIA features that more bulky suites such as Flex provide, without the flash requirement. However, as Open-source initiatiatives such as jQuery-UI continue, will ExtJS simply die at some point? Furthermore, since flash penetration only continues to increase, why put stock in a javascript library?
That said, JavaScript libraries such as jQuery have made gigantic leaps in providing easy-to-use APIs with great functionality, so maybe there's some merit in that.
Thoughts? Opinions? ExtJS has a price tag, so I have to ask this question.

IMHO, the need in jQuery, ExtJS etc. will be eliminated as soon as XBL2, entire collection of CSS3 specifications, SVG and HTML5 all get available in an equal extent across all desktop/mobile web-browsers, which is not going to hapen within coming 5 years.
I look at ExtJS, and it appears to provide many of the RIA features that more bulky suites such as Flex provide, without the flash requirement.
To run Flex application you still need Flash player, which for example is not available on mobile devices
However, as Open-source initiatiatives such as jQuery-UI continue, will ExtJS simply die at some point?
Comparing ExtJS to jQuery-UI doesn't make good sense, since jQuery is primarily a cross-browser library to simplify operations on HTML documents and make web-pages nicer, while ExtJS is a true aplication framework that brings enhanced data-driven UI components to make applications easier.
Furthermore, since flash penetration only continues to increase, why put stock in a javascript library?
It doesn't really matter that Flash penetration "only continues to increase", since it is already available on 98% of desktop devices. Putting stock in a Javascript library makes sence, believe Google (who put most of its stock in DHTML)
will ExtJS simply die at some point?
Indeed it will, as at some point will die .Net, Java etc. It will not die in a foreseen future however and the need for this kind of Flesh-less solutions will only increase.
You may also want to take look into an alternative GUI framework Ample SDK, which will go Open-Source on 1st November this year. It enables technologies, such as SVG, XUL and more equally cross browser.

I don't think Ext JS will die anytime soon. When it will it will probably be one of the last JS frameworks standing. I'm saying this because ExtJS has a solid user and developer base and lots of open source projects are building on it (e.g. an ASP.NET dual-licensed CMS, Sense/Net builds its backend entirely around it among others).

They have a solid user-base and I don't see them leaving the race anytime soon. That said you can always look at the Internet as you look into the general market. Both Starbucks and the local cafe can co-exist.
That said...
Compare the trends between jQuery, ExtJS and Mootools

III'm not a javascript/DOM guru, just an ASP.NET programmer and now-and-then FlashBuilder coder who is looking into 100% client-side libraries. What I am finding is that ExtJS is much richer in its layouts and its UI widgetry than jQuery -- though jQuery has much momentum and new UI components are coming all the time. Still, ExtJS has a major lead in this regard.
With jQuery it is a lot easier to get something basic up and running mainly because jQuery hangs its effects on existing elements in your page markup: you can create a skeletal html page and then apply jQuery functionality to the elements. Compare that to ExtJS where your page is basically an empty body tag and the page contents are created by Ext writing to the DOM. Without the Ext (visual) Designer to lay out my pages and set properties, coding ExtJS configuration objects with a text editor is far too tedious for me and not at all to my liking. But with Ext's visual Designer, you do approach RAD.
ExtJS on IE8 can be slow and sloppy because of IE8's shortcomings. In my experience ExtJS RIA layouts work beautifully on FF, Chrome, and Opera but not nearly as well on IE8. However, IE8 with Google's Chrome-Frame addresses that. Nice gut-punch to those Proprietarians at MSFT, guys at Google!
I really like the hybrid approach FlashBuilder takes. With FB, you can write mxml and/or ActionScript classes. The down-side, as I see it, is that the Flash plug-in is required, and I fear that the Flash plug-in is going the way of that other dodo, WordPerfect, which once roamed the earth with 99% market share. I really wish one could design in FlashBuilder taking full advantage of ActionScript's OO features. mxml, and the FB debugger, and then cross-compile to ExtJS! FB : Ext :: GWT : Closure.

Like with each technology, everybody will have his own piece of cake. ExtJS will not die until ExtJS LLC exists (they are using it :)) And until they will have worshipers using their lib (like me) when You are at some point You just have to use chosen technology, no matter if it is perfect or not. Look at Lotus Domino - it is piece of crap and on the other hand piece of great software - and it is still alive... :)

ExtJS has dual-license And it's opens source
See here general details
And here licenses
And i using it. Good library for working with data - grids, trees... you name it.
And it has many controls. so just good library...

As long as the developers continue to work on it, the framework won't die. There have been a few frameworks that are effectively dead (e.g. MochiKit, which I love but have dropped for yui3) but that only means that they're not getting updated, not that they're unusable. If you liked one well enough, you could easily put out your own release and start up the project again.

Personally, I use Prototype, but it's the same argument. I strongly dislike flash due to the numerous security issues that follow it and the fact that not all devices can play flash. The iPhone is one major example. It CAN support animations and other things using JS libraries.
Some companies also disable flash as policy for security, although this isn't all that common. (I've worked places where this was the case, however.)
Another question is whether we'll care about flash with the advent of new HTML standards will largely eliminate the need for Flash altogether.

Are there any JavaScript live syntax highlighters? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I've found syntax highlighters that highlight pre-existing code, but I'd like to do it as you type with a WYSIWYG-style editor. I don't need auto-completed functions, just the highlighting.
As a follow-up question, what is the WYSIWYG editor that stackoverflow uses?
Edit: Thanks to the answer below, I found two that look like they might suit my needs:
EditArea and CodePress
EDIT: See this question also:
https://stackoverflow.com/questions/379185/free-syntax-highlighting-editor-control-in-javascript

The question might be better stated as "What syntax-highlighting editor do you recommended to replace an html textarea in my web app?" (Some of the other answers here deal with desktop apps or pure-syntax highlighters, not client-side editors)
I also recommend CodeMirror, it's written in Javascript and supports lots of browsers. It uses a real parser (rather than regexps) so it can deal with complex problems like correctly highlighting escaped strings. The developer is also very responsive on the discussion group.

Here is a really interesting article about how to write one: (Even better, he gives the full source to a JavaScript formatter and colorizer.)
Implementing a syntax-higlighting JavaScript editor in JavaScript
or
A brutal odyssey to the dark side of the DOM tree
How does one do decent syntax
highlighting? A very simple scanning
can tell the difference between
strings, comments, keywords, and other
code. But this time I wanted to
actually be able to recognize regular
expressions, so that I didn't have any
blatant incorrect behaviour anymore.
Importantly, it handles regex correctly. Also of interest is that he used a continuation passing style lexer/parser instead of the more typical lex (or regex) based lexers that you'll see in the wild.
As a bonus he discusses a lot of real-world issues you'll run into when working with JavaScript in the browser.

See Google code pretify.
See this question for the edit control that stackoverflow uses.

Sorry to drag this back up but the best i have found in CodeMirror http://codemirror.net/

I dont program a lot of javascript but JSEclipse has been pretty helpful for me in the past. It comes as an Eclipse plug-in.
I've been using it for years for free
http://www.interaktonline.com/products/eclipse/jseclipse/overview/
I also rely heavily on FireBug for Firefox whenever I deal with Javascript

You can also try http://softwaremaniacs.org/soft/highlight/en/ - it's fast, it supports not only javascript but many other languages. And if you need a live preview of how the highlighting will work, you can use setInterval to run the highlighting and show it in a separate box.

Although it has a steep learning curve, Vim is the best editor out there, for any language. It has a GUI version, but really shines in terminal editing. Any time spent learning how to use this editor is not time wasted. It has syntax highlighting, as you're looking for, as well as thousands (literally) of other features and plugins.

Gotta go with Bespin by Mozilla. It's built using HTML5 features (so it's quick and fast, but doesn't support legacy browsers though), but definitely amazing to use and beats everything I've come across - probably beacause it's Mozilla backing it, and they develop Firefox so yeah... There's also a jQuery Plugin which contains a extension for it to make it a bit easier to use with jQuery.