Mootools not loading fast enough IE6 - internet-explorer-6

Very random and annoying problem with IE6. We keep our common JS files on a resources server so we only have to update them in one place. As well as our custom classes we also keep our build of mootools and more on the resources server and link to it in the head of our sites.
This is fine in all the browsers accept IE6. In IE6 it seems to not loads the core quick enough from the external link before trying to process the mootools code in my site.js file. It will go wrong on the first line "windows.addEvent".
If i put a mootools core in a folder where the site is though its fine. Does anyone know why it might be doing this and if so a way around it, but still keeping the files on the resources domain?
Thanks
Tom

#neil . Yeah exactly. Quite frankly i didn't want to be rude but the first two responses were a waste of their time and mine. Someone correcting a typo and someone else saying not to bother supporting a browser that still has 9% share of the market, quite brilliant.
#Dimitar Thanks for your response. I can't change the event to load unless you mean in native JS because no mootools will work. I don't like mixing the native JS when i'm using a framework if i can help it. Never heard of "defer" though, i will def try that. Thanks for your help.

IE6 probably pipelines the download as an extra host gives it the ability to do it in parallel.
perhaps you can either try adding defer='defer' for IE6 for your chunk of code that relies on mootools or change the event from domready to load instead (also for IE) (I tend to use the latter)

Related

Hide files in developer tools?

So, I want to apologize ahead of time but I've been googling and stack overflowing for an answer to this question and I just can't find a satisfactory one.
I know that Facebook uses React and, although I don't know what software architecture they use (MVC, Client-Server etc.), I can't see any react files or react components in the dev tools sources tab on any browser.
I'll show you an example in my own react app using create-react-app that shows all my files:
Create-react-apps dev tools sources:
However, when I go to Facebook's page, I don't see anything like that. I see this:
Facebook's dev tools sources:
This isn't only true of react apps, but just node apps I've made as well. Now, I want to know where all of this information is on facebook's page.... Where are the components? Why can't I see them? Where are all the post and get requests being run? How can I put breakpoints in the code for debugging? I mean, I don't even see an HTML page besides the elements tab! And, most importantly, how do I do the same thing to hide my files?
It seems like it adds an extra layer of security that I would think is preferable on all public websites. Once again, thanks in advance and, as far as I know, the answer to this is nowhere near obvious.
I admit, this one little bit confusing when you are quite new on the web development.
You can see your files (source code) via devtool because you also upload your .map files which help map your bundled/minified code into the the original readable one.
However, this is super helpful on development environment, but quite dangerous on production. What you need to do just remove the .map files, as comment suggested.

Browser upgrade warning message

As the sole developer at my company, I'm really tired of supporting older browsers (mostly IE). I'd like to display a nice message to the user that lets them know they're using a deprecated browser, that things may not work quite right and instructions on how to upgrade. Is there a hosted JS widget I might be able to include in the page that would accomplish this?
I'm not against making my own, just thought it may be nice to use an existing service if such a thing exists.
(Out of roughly 10k uniques a month, 5% use IE 7 or below.
Sounds like you might want to try something like this: http://browser-update.org/

Should i be using HTML5 and CSS3?

I'm someone who wants to be up on the latest web technologies but also appreciate that alot people still use IE6/7/8. Is it a waste of code/time if half of it wont be displayed on most browsers? Is it just a case of using different style sheets, or just use one style sheet and if a browser doesnt support text-shadow, then screw it, they can see it without the nice effects. What are peoples thoughts?
It depends on your userbase. I am an intranet developer and my company still uses IE6(!!!) so we have no choice but to support IE6. I also develop some public facing websites and we use Analytical tools to see the which Browser is being used more and ignore ones which are less used. in this case IE6 was the least used Browser.
I won't go for HTML5 and CSS3 till Internet Explorer 9 or Firefox 4 (absolute release, not alpha or beta) is released, because these two browsers make up the most of web traffic (afaik, correct me if I'm wrong) and using html5 or css3 will be a big loss.
And yeah, it depends on your userbase too.
I'm developing a small-business oriented online app and decided to support only IE8, FF and Chrome. I also went for one stylesheet that degrades nicely (text-shadow, rounded corners). IE8 users will see square corners but it doesn't make the site unusable in any way.
I just think that the cost of making everything look perfect in all browsers (and maintaining it!) is much higher than the benefits.
The above also applies to HTML5 IMHO - unless you know that vast majority of your users will have an HTML5-compatible browser there's no need to invest in it right now. Unless the whole point of your site is to use one of the newest features.
Just tell yourself what problem of your users you are actually solving and solve that one.

How to get preview-image of a web-site?

I know that there are even some web-resources exist which allow you to get a preview of a web-site 'as it looks in a certain browser'.
I only need view from any browser as an image. Is it possible to get that image without people involvement? Can I get it without system programming, just by means of pure java/python/asp.net?
UPD: http://browsershots.org/ is an example of described web-resources.
The tools I know of that does this - really "just" launches a browser (programatically of course) and takes a screenshot of the contents of the browser and saves this in an image.
I think no matter what you do, you will have to find a way of doing something like this. If you by system programming are refering to OS API calls, then I think you will be out of luck. You might be able to get a third party library that can do this for you, but then that library will simply be making those system calls instead.
I see now others have posted links to places that might prove themself useful to you as well. Without having looked at the links, that would probably be the easiest and best way to go.
Good luck
I believe what you're looking for is browsershots
There are some websites that let you do this.
Try BrowserShots
PageGlimpse is a service
providing developers with programatic
access to thumbnails of any web page.
It has API based on REST protocol and some documentation.
You have a lot of things doing this for you. Take a look at stw for instance.
If you're using .NET, it is possible to do this using the DrawToBitmap method of the WebBrowser control (example here). However, as you'll see by the last comment on that example page, it doesn't work with Flash, and it's a bit 'temperamental' with sites that use complex Javascript for rendering.
I think your best bet is to do as others have said and use a third party thumbnail provider. I haven't used it, but http://www.thumbshots.com/ looks good.

GWT unsupported browser warning

I want to display a message to users with unsupported browsers, as opposed to having the site fail in an ugly manner.
What's the best way to do that?
GWT also provides browser detection using the .gwt.xml file. Have a look at this:
http://code.google.com/p/google-web-toolkit-doc-1-5/wiki/DevGuideDeferredBindingReplacement
It's an interesting solution, but I'm not sure if it's the best solution in your case. It could be very useful for creating a simplified version of your application which would automatically be loaded in unsupported browsers.
The GWT team does not provide a list of unsupported browsers, only supported browsers, and it's a vague list at that "most recent versions of Internet Explorer, Firefox, and Safari. (Opera, too, most of the time.)".
If you have a good idea yourself of what browser/version won't work you can use this code:
public static native String getUserAgent() /*-{
return navigator.userAgent.toLowerCase();
}-*/
to learn what browser is being used and perhaps cook up a work-around.
On the other hand, browser rendering of web pages can fail in many subtle ways ranging from mildly annoying to catastrophic, and there is often no way to know where your page falls on that scale. One of the major reasons for GWT is that you can stop worrying about this sort of thing. At least until it happens.
If you want to make it simple and stupid, check with some javascript code in your main html file, before GWT is loaded. Novertheless, I would rather trust GWT to handle things more or less quirky. You could also just recommend chrome or firefox.
I realise this is an old question, but I had the same problem, and wanted to share a new solution for it.
Today with GWT2.7 "obsolete" browsers try to download undefined.cache.js. This obviously fails and the client is stuck forever.
You could patch GWT itself setting fallback compile steps, but the easy solution is to simply provide a (manually crafted) undefined.cache.js and place it where the other generated files are.
Inside you put this one line:
xxxxxxx.onScriptDownloaded(alert('This browser is not supported anymore.\nPlease upgrade to a more recent browser.'));
where xxxxxxx is your module basename (from xxxxxxxx.gwt.xml).

Resources