I have a question about debugging procedure; I'm having a problem with a scrollable div that jumps to the top of its content every time that I receive a response from the server. This was initially just a nuisance, but now it's causing a Select2 widget of mine to display incorrectly when it receives its results from the server.
I'm using a proprietary, homegrown client-server architecture developed within my company, and based off of jQuery on the client-side. The codebase is massive, it has a number of side effects that occur when information is received, and I have no idea where to even look to find what code is causing this.
So I'm wondering if anyone here has any creative ideas on how I can debug this issue. So far I have tried commenting out the code that I guessed was causing the issue (apparently it wasn't), as well as tracing the code starting from the receipt of data from the server.
I found the bug using a form of divide and conquer (thanks #Kevin Brown for the link). Effectively I placed a break point at a central loop in the software, and as the loop progressed, I was able to see visually the point at which the UI jumped. Once I had the particular iteration determined (by console.log()), I was able to further narrow down the source of the bug.
Related
I have recently inherited a web app using the EXTjs framework. I'm not really that familiar with it, but I have been learning it the best I can over the last few months. I have recently been given an assignment to update the entire application to comply with 508 Compliance, that is to say, make the application accessible for those with vision issues. I was given a deficiency list that gives examples where the software doesn't comply for various reasons. I guess I need a little help in understanding how this works. I've looked at the EXTjs documentation and it does say that it has accessibility features available in it, but I haven't really been successful in finding what to do. Those using the application are using the JAWS screen reader if that makes any difference.
A few of the things I know that I need to fix are:
Some elements need to be tagged as a heading so the screen reader can read it programmatically an to give the web page some structure.
When tabbing around a table/grid the data is read without any context/header information.
Color is used as a visual cue to indicate action(ie required field). I'm supposing this is for color blindness and some other visual cue needs to be added.
Modal windows can't be resized or moved by the keyboard.
Needs a mechanism to bypass blocks of content that are repeated on multiple pages.
Pages do not have titles(this is a single page app).
Keyboard operable UI elements do not have a visible indication of focus(radio button group doesn't show focus, even if selected one does).
Name/State of UI elements in the product can't be understood(ie the name of expand and collapse buttons are read as expand panel or collapse panel by assistive tech without context to what is being expanded or collapsed).
There are many other issues, but this gives some idea of the scope of the changes required. As I have stated above, I've done a lot of examination of the EXTjs documentation at their site as well as google searches on how to make applications more accessible. But I'm not really seeing what I need. Much of this application is just configuring EXTjs templates and then loading them with much of the meat of the application being handled by the EXTjs built in js code.
I would appreciate any help, useful sites with examples, or code snippets on how to accomplish some of this. I'm hoping that once I get started with some examples, I can just go on from there.
Thanks.
Most items come with aria support. Personally I would add look into each component and add an automated aria support. E.g. button ==> aria.label = button.text
Take a look at ariaAttributes, ariaDescribedBy, ariaLabel and ariaLabelledBy. Some have ariaErrorText, ariaHelp.
Next take a look at tabIndex. You want to ensure that you can use TAB to jump through the fields, buttons, ...
is it somehow possible to stop a long computation (in this example an endless loop) on a node.js webserver from HTML?
At the moment, I have two buttons (start and stop). The start button emits the function started on button click as follows:
function started(){
socket.emit('started');
}
and on the server.js:
client.on('started',function(){
while(!cancel)
{
}
});
How can I exit the loop from clicking the stop button?
Well, you don't really show us enough code, but you probably can't do this. node.js is single-threaded event driven system. As long as you are in the middle of a while loop, you can't get any more events so you can't ever process anything that from the client that would change the cancel variable.
The only way this could work (though it's probably still undesirable coding on the server) is if your own server code inside the loop could change the cancel variable without getting any new events from the outside world to cause the loop to stop.
If you're relying on some other event to come into the server to change that flag, this could never work. The whole design also appears to imply that a server is only serving the needs of one user which is also likely an improper design for a server.
This particular question as posted right now is an XY problem, where you failed to explain your overall problem you're trying to solve, but instead described some issue you ran into in your particular attempted solution. That prevents us from helping you with the real problem and, in this case, all we can really tell you is that this is a wrong solution and will not work. Please don't post XY problems. Tell us your real problem. It's perfectly fine to show us your attempted solution and what issues you ran into with it, but only after you've explained the overall problem you're trying to solve. That allows us to help you with higher level and better solutions that you haven't even thought of to ask about yet.
We could only help with a proper solution to your problem if you explained the actual top level problem and showed us a bunch more code.
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.
This is a follow up to a previous, unanswered question of mine.
Goal: an input field in a web page (the general sense, not a form specifically) where input of certain patters, such as $\int$, will render math - an integral sign in this case, within the field itself, not in a separate preview box.
In the linked question I linked to a conteneteditable div implementation with MathJax I attempted, but failed (works somewhat on IE, which doesn't count). Please no lip on how contenteditable is terrible, I know this very well now.
I came across the IXL website, which they have an interesting implementation which works nicely for superscripts and fractions (at least). After answering a few questions you get a toolbar, but you can type Shift+^ to see a superscript immediately.
I think I can expand this for other things I need, but I'm not sure what in their code does this - it looks like a canvas, but I'm not sure, and I was hoping someone smarter can recognize immediately what they're using. The source of the page has the JS.
I've posted on MathJax GitHub and some other tools to advance a solution, but currently no one has this functionality properly (only the 'preview' box).
SO is my final attempt - the diversity of people here hopefully can get me started. I just need to focus my reading - the first lines of code, how is a fraction rendered as that box over line over box in the input field.
I apologize for not posting code of my own, my previous question was my best attempt so far.
As per jiggzson's suggestion, I checkout out Guppy, forked it and it's awesome (as far as my needs). You can check my fork at https://github.com/uperetz/guppy. I'll post my latest demo there now. Current branch is textmix but I'm hoping Daniel will merge to master.
This is a bit of an odd issue I'm having. I've been using John Resig' micro-templates for a meeting minutes application, and it seemed to work well, but lately I've been having an issue.
Basically the application fetches some JSON from an ajax call, and then uses the templating engine to generate a table with various actions like so:
This works fine, its a little slow in IE (javascript rendering) but it works. However randomly I'll get a stuff up in the display:
notice the gap there, its pushed it out wide, also, its made the rest of the rows squish up. I've tried every CSS/HTML trick I can think of to try and get IE to render it properly, but I'm out of ideas (any suggestions would be great!) . I'm using JQuery Sortable so you can drag each of those rows around, I noticed that when you drag it and place it again, it displays correctly. It's as if it thinks theres an extra TD there, when there isn't.
So I opened the IE developer tools and copied the inner HTML of the HTML element. Pasted this into a HTML file and put it on the server, turned off the JS so it wouldn't reload the elements and ran the page. It displays perfectly, just as in my first image.
So I'm confused as to why IE will render the page fine if the HTML is present from the start, but the templating engine causes odd stuff ups.
I'll probably look at rendering that part of the HTML on the server, and only use the templating where I need to. But has anyone come across this sort of issue before? is there any trick I can do to make it render it as it should?
we had similar problem in our company and our designer solved it. Solution was in concatenating tags one after another without spaces and/or without new line. Code is not looking great after that but still solves problem.
Thanks,
Nikola