Async loading of some generated Javascript - javascript

I work for a small company that isn't flexible in making changes on using a heavy themed webpage on Wordpress for their own reasons. They are also using a load of plugins, and it takes more than 10 seconds to load. So, I thought I should give it a try and check the generated homepage source code, after I ran the analysis that tells me that js is just a disaster.
The theme they had chosen was Unero, because it works with woocommerce I suppose. The website is a small e-shop along with a blog, nothing too fancy really, we use yoast SEO too, but that might be irrelevant.
I realized that there is a load of js scripts running here and there.
I read that you can set everything run with async set true.
A also read that this can cause things to break between scripts, due to undefined variables and other problems I suppose. Please note that I am kinda new to js technologies and I might not know what I really should be asking, or searching for. I do my best to explain what I need to happen though.
Is there a way you can override ( or overload, what is the term
here?)some js on footer, after being defined on their positon
(in HEAD and in BODY),setting it to async mode, by using a snippet
on footer? Will this actually work?
I do not want to involve any plugin general solutions, because I am
afraid they will break stuff as mentioned above. Correct me if I am
wrong and please suggest me something. Except if the solution IS to make a custom plugin, where I will have full control I guess.
I am open on ANY suggestions, as long as it won't break the site.
I am asking here and not on Wordpress Developement or any other Stack Exchange forum, because I am looking for a solution done by hand, along with an explaination why it will work. I am a code by hand guy really, and I am not afraid to dive deeper on something, if things are gonna be done right.

Is there a way you can override ( or overload, what is the term
here?)some js on footer, after being defined on their positon (in HEAD
and in BODY),setting it to async mode, by using a snippet on footer?
Will this actually work?
Answer: Yes, its possible but that could also happen with sync code. If plugin A is doing something like $('title').text('Title from A') and then the next plugin does $('title').text('Title from B')then its gonna get overridden, doesn't matter if its sync or async.
I do not want to involve any plugin general solutions, because I am
afraid they will break stuff as mentioned above. Correct me if I am
wrong and please suggest me something.
Answer: I am not sure what you want to do. What is your goal with this site? Do you want to untangle the mess of the plugins? That can be difficult since you have little control over the plugins and their mechanismm.
I am open on ANY suggestions, as long as it won't break the site.
Answer: One way would be to disable them one by one to see cause and effect and try to clean out that way. Another solution would to switch to more simple solution like Shopify and the third to creaate a custom solution that you have more control over.
Its quite an open question, so its kinda of hard to give a concrete answer or solution to your problem.

Related

JavaScript Hidden iFrame comet

I need to implement comet, preferably with the hidden "forever iFrame" technique using PHP to instantly update a file on the server and get data from that file (and then JavaScript would use that data to manipulate the webpage). I have been searching for a detailed example for how to do something like this. Much of what I have found I do not understand or I think is not applicable. I am not fluent in PHP, yet.
If anyone knows or knows how to find a detailed example of this or could make one, I would be much obliged.
I'm sure this is close to what you want:
http://code.jenseng.com/jenChat/
The guy even mocks the technique as preposterously outdated, but it's exactly what you need. Be warned, as I seem to remember, there's a little bug in the actual code which stops it from working out the box, like some erroneous filehandle.
Get back to me here if you can't spot it. I can assure you the code works perfectly once the error is spotted. I think it's in chat.php, I'm checking.

How to debug user entry issues in JavaScript with WebKit developer tools?

I have an issue where input is being doubled, tripled, quadrupled, etc. on user input after changing a select dropdown multiple times. Here's a small video showing my dilemma and posing the question: http://screencast.com/t/7Gb01nGe787p
Essentially the question is how to debug properly given circumstances like this?
I think how you debug depends heavily on how your code is structured.
If you are using widgets(jquery UI stuff, plugins, external libraries etc) you can always search around and see if its a known bug/issue. Aside from that, checking configurations(I've been burned by config's not being correct several times) can be helpful. Also check for conflicting code, such as events you may have defined that could interfere with the widgets behavior. Manipulating objects in the webkit console is particularly useful for this, since you can more easily find out in what cases your code will work, and in what cases it will not, without necessarily having to rely on manipulating the UI.
If you are not using something other people wrote, then debugging is a little easier in my opinion. For me, it really comes down to narrowing the scope of where I am looking. If you have any events related to your issue(onKeyUp or something), log it. Console.log can go a long way, especially when dealing with the state of UI, and so can breakpoints. I'm not sure if this is necessarily the best way to do it, but I find it to be very useful in the right situation.
If you are really stuck, you can always get drastic and start removing pieces of your code. May not sound very nice, but if you are really stuck and cannot seem to find what section of code is being problematic it will at least give you an indicator of where to look. Again, not the prettiest solution, but it's saved me a lot of headaches on more than one occaision.
Hope this helps.

Jquery source obfuscator [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Javascript library: to obfuscate or not to obfuscate - that is the question
Hi, I'm creating a very simple footer zone with a jquery animated drawer and a simple carouseel with a modal to show some products of my store.
Any decent jquery programmer will easily top this, i'm a noob, the problem is that I know my competition very well, the moment they lay eyes on this they will implement the same, I just don't want them to outragely rip off my hard earned code.
I found this javascript obfuscator online:http://www.javascriptobfuscator.com/default.aspx
is it any good?
My question is, although it "obfuscates" the code, its still pretty easy to just donwload the .js file with my code and implement it. Is there a way to make the javascript file not load/work if its not in my domain?
This + the code obfuscation would work really well don't you think? Can you point me out something like this or a simple alternative?
Thanks
Best Regards
Joricam
One thing to think about. I can simply take your obfuscated/hard to read code and plop it right on my site and boom, it works. This is not like obfuscating PHP code where it requires a tool to decode it, and run. I can take your code as is, and it works fine.
However, if you insist:
I would just use any decent javascript minimizer to make your code harder to read. Not only will this improve the load time of the script, but also make your code harder to read.
I highly suggest something like YUI compressor or Google Closure
Note that I am stating, make it harder to read. Don't bank on this obfuscation idea, as you will not find any good solutions. It is not worth your time.
My question is, although it "obfuscates" the code, its still pretty easy to just donwload the .js file with my code and implement it. Is there a way to make the javascript file not load/work if its not in my domain?
No. There is no technique that is going to prevent a determined competitor from reverse engineering your JavaScript code.
For what you're describing - a drawer and carousel - they likely wouldn't even bother. Plenty of free, open source jQuery plugins that do that are out there. If anything, you're probably reinventing the wheel anyways.
If you don't want your code to be seen, I suggest placing it all on the server. JavaScript, by design is meant to be client-side, so regardless of what you do, people will still be able to utilize the code one way or another. If you still want to hide the code as best you can, try using Google Closure Compiler.
I'm on board with the sentiment expressed by others on this thread: You're wasting your time; what you're trying to protect has very little value and is hard to protect.
To answer your question, however:
Use flash or silverlight or some other such technology and put all of your code server side.

Stripping or duplicating ie8.js to fix just the button tag bugs

I am looking to just fix the <button type=submit> problem using the ie8.js, so I don't want the other stuff.
Anyone have any experience in either removing the unused functionality or replicating it in either pure javascript or since we use jQuery, that's fine too?
What I want to avoid is unintended performance hits from all of the other things the library trying to fix up my pages in IE.
If you look in the src directory at the code repo, you'll find the individual bits that go into putting the full distribution together. Rummage around and you'll eventually find which is responsible for the fix you want. (Sorry I can't be more specific, but I haven't had to resort to these libs for a while.)
There are pretty much certainly going to be dependencies, so be prepared to still need to grab several files. Then take those and combine them into a single one for convenience.
It'll still probably have some extra stuff beyond that single feature, as the files are groups of conceptually-related functions, but I would not recommend actually going in and trying to hack Dean's code unless you know exactly what you're doing.

Is there a resource to help convert Prototype JavaScript to jQuery?

I have extensively used Prototype before and it helped us add considerable interactivity to our web applications. However we are looking at making the move to use jQuery in order to standardize on something better supported in Visual Studio.
I understand that we can use the jQuery.noConflict to run it alongside Prototype, but we would like to avoid having users need to download both libraries to use our website.
So, is there a good resource that can help us move old scripts from Prototype to jQuery?
I can't really help you too much with your question, other than to say that I haven't heard of any such tool, and that I'd be really surprised if one actually existed.
While I think jQuery is a great library, and that you're right to be wanting to only use one library, just remember that the cost of you changing over all your scripts is going to be many many hours of work. The cost of your users downloading an extra 30kb of scripts is going to be roughly 0.3 seconds. Perhaps try to slowly phase out Prototype and only refactor your existing pages when a) you have to, or b) if you've got nothing better to do.
Falkayn,
There is no automated process available for conversion of JavaScipt code written against one JS library to another one. Moreover there cannot be one. Different libraries implement different proramming models as well as they arrange their APIs in different manner.
So, before you have found a solution to your problem now ask yourself a question: Am I going to convert my jQuery code once another even "cooler" "X-type" JavaScript library became available?
If your answer is no, take your time and convert the code manually no mater how long will it take. In case you answer "yes" don't convert the code at all.
So it goes.
Thanks guys for your input. I was looking for more of a syntax comparison than anything automated, but nickf makes a good point in that the real cost need not be too great. We only used Prototype on a few pages that really needed a high level of interactivity, so as long as mind out Ps and Qs it should not hurt to use jQuery everywhere else.

Categories

Resources