So, I'm working with a lot of JavaScript. Because I still have my student license, I'm using PhpStorm to develop. Okay, so I basically have to use JavaScript for almost everything (don't say this is bad, this isn't my idea). This means loading items, filling a table, opening a dialog to add a new item, opening a dialog to edit an item. Everything has to work without page refreshes or other pages. However, PhpStorm always say something about jQuery inefficiency. I kind of wonder how important it is.
For example,
$('#add-item .footer BUTTON')
PhpStorm says this is inefficient. I know I can rewrite it to
$('#add-item').find('footer').find('BUTTON')
Also, when I use $('#add-item'), I can cache it like:
var addItemElem = $('#add-item');
The question is, how important is this actually? Will you really experience a lot of difference? Just so you know, this is for a backend admin panel and not for a website which customers can see.
If the answer is that it's really important, at which rate should I 'cache' elements? I'd assume having a lot of variables isn't really good either (but I can be wrong at that).
And if it's really important, does it matter when I use something like this:
$(document).on('click', '#add-item .footer BUTTON', function(){/*...*/});
Or how can I solve it then?
Related
The last 9 months, I've been working on two big websites with PHP and Javascript without using any framework.
Every time I wanted to modify a page or fix a bug, I was spending:
10% of the time on finding the PHP file with the html content
20% of the time on locating the CSS and JavaScript files it is using
20% of the time on locating the PHP classes it's using and the functions and variables it's inheriting
20% of the time on locating all the scripts that are being called through ajax calls.
And only 30% percent of the time to actually fix the problem.
So, I wanted something that for every file that I want to modify within a project, after indexing all the aforementioned, it shows a list with all of these relationships on a diagram/flowchart along with the corresponding links to these files.
After a lot of Googling I couldn't find anything that directly solves this problem effectively. Right now, except for just opening all the includes inside the PHP file one by one, I am using Google Chrome's Inspector to quickly locate the includes from the Network tab or even add my whole Workspace in the Sources tab in order to apply CSS and JavaScript modifications directly from there. The problem with this, is that I don't have any options for locating any server-side code(PHP). Also I don't want to be dependent on any specific Web-Browser. Lastly, this solution doesn't provide me any graphical representation of the website's schema, something that's really important for understanding in seconds the whole structure of a webpage that you are going to modify for the first time.
I know that this question sounds a little off-topic but I couldn't find anything on the Web (maybe I didn't use the correct search keywords?) and I feel like it's something that a lot of developers struggle with sometimes so it could be really helpful if it's answered and stay visible. Even if I am missing the point due to luck of experience and there is a different approach to this kind of problems, I don't think I am the first one and It could be also good to be clarified for all the others out there.
I can't help you with the diagram part of your question but I understand that your problem is indexing.
You could use sublime which more or less work with all the operating systems and at the same time it's quite light. With it you will have indexing as you can see here.
After weeks of trying and testing to find a solution for my needs I admit that I still have no idea how I can solve this problem.
It sounds simple: I want that a user is able to mention things in a text area similar to twitter.
The problem is that I can't seem to manage it to make it work. Every browser has its own specialties which are coming into my way and break things. I have tried multiple different attempts but none of them worked even on a single browser completely.. mixing text and HTML appears to be incredibly hard to do.
So here I am. Asking you guys for any kind of help. Whether it's a library you can recommend me that is already doing what I need here, or if you did something similar and can tell me what exactly you did to make this work on multiply browsers.
My current solution looks something like this: Hitting # will insert a input text field into a div contenteditable everything is working nice so far unless the whole thing is the first element of a row. If the caret is also at position 0 and the user hits Enter, then something dies inside the browser which removes the whole input box without further notice or any events - at least not on Chrome. That was the most promising solution that I was able to come up with. Don't think I didn't try to save it by inserting e.g. a native Text with a zero-whitespace-character but that doesn't work either. It works better - but not completely.
I'm really frustrated by now and this is holding my whole project back which has this key feature that has to work properly - mainly because the information put there is going to be persisted as XML but that is a completely different story.
I really hope somebody can help me to get a solution for this. Bear in mind that I am actually using GWT 2.8.0 but I would not mind to use/wrap a JavaScript library at this point ..
I'm currently trying to fix a few bugs on a website that has been built by some guys.
The thing is, I'm having trouble seeing the point of a few things they've done.
The website has a <div> with an onclick="window.location='foobar'" and inside it an <a> tag. Both lead to the same place.
Is there a reason for that?
Thank you!
Some developers are better than others.
More importantly, developers are human and make mistakes. You've found one.
regarding why a developer would use <button onclick="location='somewhere'">, there's a lot of bad advice on the internet, even on stackoverflow, even by high rep users (not trying to pick on j08691, just making a point).
Additionally, button elements may not contain a elements per the specification, so a nested anchor is invalid.
With all that said, the page probably still works. The thing that makes HTML really powerful is its ability to fail gracefully. Instead of erroring out or preventing the entire page from working, the browser is able to make things work, even when the developer does something silly like writing invalid HTML.
I only see downsides:
The user can't use right-click copy link. It will just copy the javascript
Bots from search engines won't follow the link
Users that have javascript disabled can't navigate using that link
However if I understand you correctly, then there is <a href="foobar"> around it?
If that is true, then that would render the disadvantages I have listed above to not apply.
In this case the author of the website may have used this technique as some sort of a hack to style something on multiple browsers the same way...
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!
Ok i've developed a nice tinymce-solution, where i create and destroy all the tinymce-instances programmatically through js - so, i know it is maybe not the daily-usage of a tinymce implementation - but basically it works like a charm.
Now, before i will give you specific example code - i will explain my strange issue: A friend of me is an extreme power-user of the online-tool i made and he is creating/destroying hundrets of tinymce-instances during the day...
Sometimes, after hours of work, he has the behavior, that tinymce won't show up when he hit "edit"-button. I never made it, to reproduce that on my own - but one day, in a teamviewer-session, i was able to have a look into his screen and page (with firebug), when the error already happened.
So, badly i was not able to make a full debugging through the javascript-code (because when you hit one times f5 in this situation, the error disappears and it will take some other hours to get it again) -> i realized, that, when the error was happened -> everything in the tinyMCE-object itself seems ok -> also everything in the DOM-rendering seems ok -> BUT, from some strange css-import-file, there was suddenly a definition like this:
html.uvw-dialog-open object, html.uvw-dialog-open iframe, html.uvw-dialog-open embed {
visibility: hidden;
}
This is causing that a main-panel of tinymce won't show and nothing of tinymce is visible anymore.. killing and recreating of the instance won't fix the bug in this moment, you must press f5 and after a reload, you even can't find this css-definition again (or, at least, i was not able over teamviewer and his shitty, small laptop)
So, the only thing that came in mind was an ugly hack in my own css, telling this:
html.uvw-dialog-open object, html.uvw-dialog-open iframe, html.uvw-dialog-open embed {
visibility: visible !important;
}
And, since then... it was quite for weeks -> but today, my friend calls me again, telling me, that he can't see tinymce, AGAIN.. i was almost in tears, you can imagine :D
Ok.. after writing and re-reading all these lines -> i realize that my fix won't work... both are the same definitions and if they appear on the same level (file, not inline).. probably last-match-wins i guess, what would be the newly, lazy loaded tinymce-file.. so it will definitly be better, to make an inline visibility:visible; over the init_instance_callback of tinymce...
But, in my desperation, i thought i will write everything down here on stackoverflow -> maybe someone knows the real cause of this issue and.. you guys are the most awesome devs out there i know :D
Jebbie,
Thoughts more than a definitive answer ...
Sounds like a memory leak issue due to lots of javascript/DOM activity in a long-lifed page.
You've probably done nothing wrong and you're unlikely to track down the actual cause, however certain measures are available to you :
Try making your tinymce instances reusable rather that destroying and creating new every time.
Periodically have the page request a re-serve - it may be a challenge to reproduce the entire document state - DOM and javascript environment - in the re-served page.
Lots of work and no guarantees I'm afriad.