I am intrigued by IxEdit and its full-javascript approach that should allow to build nice web pages powered by JQuery effects.
I like also the opportunity to use it on many platforms.
But, is it worth a try ?
Is it complete ? Has it compatibility issues ? Are there better alternative tools ?
Don't rely on WYSIWYG editors--My guess is that this editor screws up performance like Frontpage, Dreamweaver -and the likes screws up HTML.
jQuery is pretty simple to understand, once you get hold of the concept of anonymous functions.. And with Stack Overflow at hand, you should be able to get where you want to go in no time.
Also: jQuery is the framework with the largest community and the framework with the largest plugin repository--need a gallery-thingie? No biggie, just browse the tons of plugins and find one that fits your needs.
Well, as JQuery isn't THAT complicated, I wouldn't pay for tools like that.
They also don't support any plugins I guess.
But it's free, so just try it...
I've just d/l IxEdit and am actually kind of excited about it.
It seems you do have to be careful about starting with a blank slate: I tried applying it to an existing page with a few jQ plugins and and it broke.
As for the WYSIWYG aspect of it, I think it would be great for beginners, as it generates the code on the fly, and you have to copy and paste the code into the page. This can give a noob the opportunity to see the code that's made and make sense of how it works.
My two cents.
Related
I'm learning web design, and there is no better method than redoing others work. So I'm reading other pages code, but it's so hard to find the jQuery, Javascript or modernizer or ... code responsible for the effect.
I'm using firebug, also used firequery, but the problem is they give me the event but not the code and a big tree of DOM, I don't know where even I look into it.
I really don't care which event is triggered, but I do care how the code is written. If I find the code so I can understand the event is on click or on focus...
Or let's say a website has a some javascript file, linked to a website. when I load the webpage i get a webpage consist of DOM and external/internal script. When I see a cool effect and want to read the code, I run firebug, inspect element to find the element. After that I don't know what to do? I can't search for selector or event in the script because maybe the developer of the site used different selector that I'm searching. Sometimes I find the code, but it's so jammed, not in human readable form, I don't know how to change the code to something indent and neat
The problem becomes more dramatic when the website using other java framework than jQuery.
I've searched a lot, used many tools, but couldn't find anything useful, please with your advice light my way to learn web developing
edit:--
I found a way but I'm sure there should be a better way outside
first in chrome I inspect the element to find the corresponding element, then i right click and check all the break point on it(if it doesn't work i do the same for parent element)
after that i play with that element to trigger the function and it break
usually the function that called the method is down in the callstack
also for reading
also for reading the script i use pretty print of chrome, i used some online prettyfier but most of them has limitation in number of character, for a long script none of the google first page resault is good enough. so the only good option here is for now is chrome, anyone have any other method?
It is difficult to learn how to do things just from inspecting it, as many effects may be implemented entirely in JavaScript, which may be deep, hidden away in a source file.
You mention that the code is not in human readable form, beautifying it may help:
https://stackoverflow.com/a/6318092/1061602
Most 'visual' effects should be able to be viewable from the CSS, e.g. JQuery Mobile's buttons, it is possible to see how the different classes are combined, ui-shadow, ui-btn, ui-disabled etc
Otherwise, searching for selectors is pretty much all you can do. Personally, if I am learning, looking at too much code at one time can be overwhelming. Also a lot of the UI effects may be difficult to trace.
My advice is, perhaps a better way around it would be to try and describe one single effect that you require, and then search on Google or Stack Overflow for guidance on how to create that effect.
The usual documentation sources will be useful:
http://www.w3schools.com/css3/default.asp
http://api.jquery.com/
Happy learning!
This may be a very basic question, but is it possible to post a jsfiddle that captures a Rails environment, the js, css, and HTML that is generating a nagging problem? I posted another SO question here: Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right
... and it was suggested I post something to jsfiddle. Honestly, I'm just completely in the dark as to how I might gather the css, js, and HTML in a way that can be copy-pasted into jsfiddle. Is there some slick way to pull the 4 necessary components together?
I am mostly interested in being being able to share and debug code that pertains to display and layout.
Many thanks in advance.
Sites like jsfiddle and jsbin are useful as testbeds for various issues involving HTML, CSS, and JavaScript. A good workflow for using them might be as follows:
Before going to one of those sites, use a browser debugger (Firebug, the Chrome debugger, or even the debugger in modern versions of IE if you must) to figure out the mechanics of the issue. Are you seeing unexpected JavaScript behavior? Weird layout? Whatever the problem, see if you can narrow the focus as much as possible.
Now, go to one of the workbench sites (make an account for yourself too; it helps to be able to find old experiments) and start trying to reproduce the problem. Start as simply as possible and work up. It can be hard and frustrating, but in my experience even the process of trying to figure out an isolating test case can itself lead to enlightenment :-)
If you do manage to isolate a behavior that you don't understand or can't explain or whatever, you can then save the test case (jsfiddle has "Save" and "Update" buttons; jsbin seems to magically save things automatically) and then post the URL here (or anyplace else). If you do post here, it's a good idea to copy the relevant code from your test case directly into your question.
I use both of those sites (and there may be more of them out there). The jsbin site gives you a little more control over your page, and provides a way to see your page outside of an <iframe>. That's kind-of important if you're testing for mobile applications. Otherwise they're both great resources.
Oh, and both sites let you import various popular libraries via simple configuration tools. That's really handy for tracking bugs that you think may have been introduced by a library version change (rare, but really freaky when it happens).
We have Tabs-Menu controls which rely on jQuery library and the dev-manager insist that i should get the functions that controls are using into a separate java-script file so we don't have to reference/rely on the whole jQuery, so it made me wonder.. is it a bad idea to edit the jQuery files ?
Yes it is a very bad idea. It would be a nightmare to maintain with all the bug fixes and feature changes the jQuery team would make.
You should write plugins to modify the behavior as you want.
The gzipped production version of jQuery is 31K. Not only is this an unmaintainable idea, but this is a pre-optimization. Any images beyond tiny PNGs or GIFs will likely be as large or larger than the entire jQuery library.
Additionally, this is time that could be spent addressing actual problems. I don't know what sort of userbase you're targeting, but unless every one of your users is on dialup, 31K will take no time at all to download.
is it a bad idea to edit the jQuery files ?
Yes. If you edit the core jQuery library, you make it much more difficult to use future versions of jQuery, which may include important new features, bug fixes, etc. If you make your changes in plugins, as you should, you can just drop in the new versions of jQuery when they're released.
Well I'd say it's a pretty bad idea. You really want the responsibility of maintaining the mess you have left after chopping it out? Are you an expert on the jQuery library? Do you understand all of the side effects? You would be better off rewriting portions of your Tabs-Menu controls without jQuery than trying to chop out bits of jQuery. I presume that the issue is that you don't want the "overhead" of including a relatively large script for a small set of features. This is unfortunately the way of jQuery. Either
Accept that you have to use jQuery, and make the most of having it referenced
Rewrite your Tabs-Menu controls without jQuery
any other option is going to be painful. Insist that your dev-manager reads the answers to the question.
I'm in the process of writing a jQuery plugin, and am getting into some fairly heavy operations, which is making my plugin slower and less responsive. I was wondering if there was any tools out there that would help me optimize my JavaScript?
I recommend using Firebug's "profile" tab as a start.
Just click the profile tab, then use your plugin for a while and then click the profile tab again. You'll then see a report of what functions were called and how much time each one took.
Then, I recommend the article Speed up your JavaScript
As outlined in the article, why a script can take too long to execute
Too much happening in a loop.
Too much happening in a function.
Too much recursion.
Too much DOM interaction.
I have not yet found a tool that automatically optimizes or refactors JavaScript for speed. It's always been a manual process for me.
This Google Talk video goes into a lot of useful detail...
http://www.youtube.com/watch?v=mHtdZgou0qU
Its difficult to say without looking at at any code, ie how efficiently things have been written eg: how you're using selectors to find elements etc.
Have a look at some jQuery tips and tricks blogs.
eg:
http://viralpatel.net/blogs/2009/08/20-top-jquery-tips-tricks-for-jquery-programmers.html
http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx
I was wondering if anyone happens to know of a jQuery (or pure javascript) mind map. I found this one a few times, but it uses MooTools, unfortunately.
I decided to port the one you found into a jQuery plugin, which can be found LINK REMOVED - SEE EDIT. It was written up in about 2 hours last night, so is probably riddled with bugs. If you find any bugs, feel free to email me at the email listed in my StackOverflow profile.
Edit: I've contacted the author of the original Mindmap, and my jQuery conversion has become the core of development. You can get it, as well as speed improvements and new functionality here, on the Github page.
I think you should try http://thejit.org/
I use it all the time and is perfect for my needs.
There's also arbor.js, much newer then the ones cited in other answers. It implements the force directed algorithm for layout, similar to js-mindmap that you cited, but with better performance since it uses webworkers. The actual rendering is left for you, so you can use jquery or whatever you prefer.
Also, if you decide to write your own implementation, a good visualization library is d3.js.
I wrote this one for a project, it's an enhanced jQuery plugin version of other js node maps I found online suitable for dynamic contents (i.e. also supports dynamic adding/removal of nodes, selection marks, customizable callbacks and styles).
Notice: IE wasn't in the compatibility targets since it's also officially being dropped