Internet Explorer modernizer - javascript

I was wondering if any of you know some libraries that will help/improve the response of IE >= 7 for a website that I have to modify.
I already loaded the modernizr library, but I know that there are some libraries ment to help IE behave as a modern browser should. So, what do you recommend? What options do I have?
I'm really sick of spending hours trying to fix a 1 thing for X Version of IE.

I don't think it's that simple. I don't know of a single library that makes them all act "normal". A few I use are:
Modernizr can help with new html5 elements in older browsers
jQuery for cross browser DOM manipulation
jQuery UI for cross browser theming
But there is no silver bullet library that works everywhere all the time. Sometimes you will have to adjust the UI based on the browser capabilities. One common method of doing so is called progressive enhancement.
Progressive enhancement is a strategy for web design that emphasizes
accessibility, semantic HTML markup, and external stylesheet and
scripting technologies. Progressive enhancement uses web technologies
in a layered fashion that allows everyone to access the basic content
and functionality of a web page, using any browser or Internet
connection, while also providing an enhanced version of the page to
those with more advanced browser software or better bandwidth.

Check out ie7.js http://code.google.com/p/ie7-js/ its not perfect, but it can help with some issues.

You can tell users they need to install Google Chrome Frame https://developers.google.com/chrome/chrome-frame/
"Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer"

I use CSS3Pie. This is a .htc file you place on the server which provides poly-fills for many CSS3 styling elements such as border-radius, text shadows, box shadows and gradients. It's quite handy in that is solves many of the same problems for IE8 and IE9 as well.
It can a be a little tricky to set up in that you sometimes need to define a MIME type on your server for .htc and you have to ensure that you set the path in your CSS file to where the .htc file resides, other than that, it's great.

I don't think there's a general fix-all solution for your problem.
I recommend trying this tool called dynaTrace AJAX Edition (http://www.compuware.com/application-performance-management/ajax-performance-testing.html), the free version is more than enough to help you.
What you do is:
Start a session and choose your IE browser
Open and click through your web application
Close the browser
Double-click the "Timeline" on dynaTrace.
You'll see a breakdown of your site's performance so you can identify which Javascript is the problem.
You'll also see if the slowdown is simply because your loading external resources which are unavailable - something which I've found IE to handle poorly.

Related

Kinect (One) in the browser, the end of NPAPI

Since I read Google's message that NPAPI will no longer be supported by the end of 2014, I've been looking for an alternative. The issue is that we currently use a custom made Kinect Browserplugin which we use to control the browser with JS and control Unity Web Player games with your body.
Without NPAPI support it simply won't work anymore and our work will be lost. Google gives NaCl as an alternative but this doesn't support interaction with hardware.
The main question I have is: How to use the Kinect in a webbased platform and crossbrowser?
Currently we have the "normal" Kinect and the Kinect One from the closed beta working in the browser and Unity Web Player.
Please share your thoughts on a solution.
I apologize in advance for just spewing out links without actually supplying much information, but as far as I know there are no known good alternatives.
If I was in your position, I would have a look at the chrome.usb API or possibly, depending on your use case, node-kinect.
Here's a good general resource/discussion of NPAPI alternatives: Browser Plugins in a post NPAPI world
Probably your best approach at this point is to continue using NPAPI except in Chrome, and in Chrome use native messaging. Of course, Chrome has made it as difficult as they can to install the host that you'll be connecting to, so it'll be a pain and you'll have to install the extension and the host seperately, but there you go.

Is it possible writing a cross-platform desktop application with XHTML, CSS and JavaScript?

Is it possible writing a cross-platform desktop application with XHTML (or HTML), CSS and JavaScript?
If the answer is yes, how to run this application? Should I run it with a browser like Firefox?
Note: Currently Windows supports HTML Application.
It seems that what you're looking for is the Open Web Apps
HTA is really Old technology.
Try tools like Titanium (Appcelerator). They are tools, which render HTML content inside an APP. So, from outside, you will be running an executable but inside , it is loading a HTML file.
Same principle is being used in many apps now a days. Facebook for android is a best example
If client-side JavaScript, and/or HTML/CSS hackery accomplishes the task you wish it to, yes, and with a user agent like Firefox, indeed.
Yes. With HTML5.
The other answer's solutions are great, but generally they assume that the user is connected to the internet to have a server-side that handles the data.
But it's possible to use Open Web Apps (as ZER0 suggested) with HTML5, which has a lot of support for offline web apps.
Pay attention to it, though. Even HTML5 assumes that eventually the user will have some sort of internet connection, and offline functionalities are seen as a "cache". So, I'm not sure that this solution is enough for every requirement, because I don't know how much space HTML5 provides to offline applications

What are the problems/difficulties I might run into when using ActiveX?

I need some expert information about ActiveX and some valuable experience reports from those that already used it.
The situation is the following: ~90% of all of our applications are created as web apps with ASP.net WebForms. We're now in the process of switching to a more modern approach, creating rich client JavaScript apps. However, In one of the recent projects, a strong requirement from the customer is the ability to directly print to a (previously configured) printer attached to the user's workstation. Yes, no printer dialogs, print previews etc.. It has to be fast.
Obviously this is a scenario where you would rather use a desktop app than a web based one. Still, we would like to benefit from our existing web dev knowledge and are therefore considering to write that very specific, isolated printing functionality as an ActiveX control (IE dependency is not an issue).
Now, since the word "ActiveX" alone causes disgust for some people, I'd like to hear what might be the potential problems at using such a (old) technology or do u directly consider me to make it as a desktop app and completely forget about it?? Or are there alternatives??
The primary challenge you'll face is the learning curve; beyond that the biggest problems are the potential for you messing up and opening a security hole (for example, what happens if a malicious third party loads your activex control on their phishing site? can they use it to print things?), etc.
For the learning curve, I highly recommend looking at FireBreath, which can be used to create browser plugins that work on IE (as an ActiveX control) as well as Firefox, chrome, safari, etc (as a NPAPI plugin). Though ActiveX is an "old" technology, it's still used extensively in the modern day; for example, Flash, Silverlight, Quicktime, and other "plugins" like that are all activex controls in IE.

Browser compatibility; Before or after uploading website to server?

I am on the stage where I need to make my website cross-browser compatible.
I need tips on how to get started.
I have developed my website on firefox, so it works great with firefox.
I guess I have to download a couple of versions of all major browsers now, right?
Then just test each browser one by one?
Should I do this before uploading the entire website onto a server or afterwards?
All tips and SW which makes this easier is appreciated.
BTW, it is a classifieds website using MySql, Solr, PHP, js etc...
Thanks
Cross-browser compatibility is best planned for in advance, as there are ways to build your site that will make it much easier.
Consider using a CSS reset script like Eric Meyer's.
Consider using a JavaScript library like jQuery.
You can make use of Adobe BrowserLab to do cross-browser testing.
Consider the mobile audience.
You need to have some kind of local webserver so you can edit the code and test it in a comfortable way. It is also helpful if you make it accessible for validator.w3.org so you can do syntax checking.
Testing it in IE6, 7 and 8, Firefox and Chrome would be a good start I would say.
Since you are working with server side code, you need to have a server.
Once the site goes live you will need both a live and a development server.
Yes, I'd make it cross browser compatible before uploading to the server. The reason for this is that you may need to change the server-side code, adding ids and classes to the markup, plus it may well be necessary to change the markup. Make sure it's working locally first.
IE Tester is very useful for testing on the various IE browsers. I'd ensure that I've tested it on a Webkit browser (such as Chrome), a Gecko Browser (such as Firefox) and Opera. See this list for different browsers.

Cross-browser development

I'm developing a web application for a new service, starting from Firefox 3.5.
The interface design is tableless, only using divs + CSS & performance-blessed practices.
Now, while being compatible with Safari has taken just a small amount of time, IE is a pain.
My question is: is there anything out there that could be used to speedup cross-browser checking? I already know many points of difference between FF and IE for instance, but a specific tool would maybe help some more.
Could you suggest one, if any?
Thanks,
Scarlet
Cross Browser Development
No tool can ever make up for bad behaviour, but they can sure make life easier on you.
That being said, you should really come up with a workflow that lets you optimize for cross-browser compatability in the least amount of work spent. If that means small iterative or large monolithical steps for you, well that is up to you to decide. But generally working against several browsers during development saves you if not time at least a major headache on d-day.
List of tools/resources I find useful
Selenium is a tool for frontend
testing
IETester lets you view
a page in different IE versions
Browsershots lets you view the
page on different platforms as well
Google lets you search for known and obscure IE perversions
IE 6 No More saves you a lot of headache not bothering about the preshistorical crap that goes by the name of IE 6
YUI Graded Browser Support - make sure you know which browsers to focus on
jQuery - cross browser javascript library
YUI 3: Reset CSS - reset your CSS (link contains useful information as well as the CSS)
9 Most Common IE Bugs and How to Fix Them - very useful tips on how to get the most bang for the buck by fixing the common problems first.
Cross browser development contains lots of useful tutorials regarding cross browser development.
References
Selenium alternatives / Cross Browser Testing / Litmus
This will not answer your question, but just an advice based on my personal experience.
When you are developing for many browsers, the best thing to do is to test simultaneously on all of them while you're coding.
This way you will just have to correct small bugs each time as opposed to overwhelming complicated layout problems.
I don't know of any software that actively check for problems, but Adobe has recently released BrowserLab, which really does speed up cross-browser testing.
I would also recommend using CSS reset. This way you get a lot of inconsistencies out of the way right from the start.
I do cross-browser development and I don't really use any of the prescribed patterns, like cross-browser testing. I instead use a decorative pattern. Sometimes it works wonderfully, sometimes it's a headache, but that can be said for any development pattern.
Most of my development takes place in which browser I consider the most standards-compliant. I prefer WebKit to Presto, but both are generally neck and neck for standards compliance. With these browsers, proper use of HTML and CSS almost always leads to desirable results. My WebKit browser of choice is Google Chrome. Safari works too, but keep in mind that on Mac OS X the font smoothing tends to make text bigger. To ensure compatibility with sites designed for Safari Mac, Safari Win emboldens fonts, so it's not always the most pixel-perfect representation of your site.
Blueprint CSS can be a huge help if you're trying to quickly prototype a cross-browser site design. I'm not convinced that such a framework is always necessary, and they can also influence the way you structure your XHTML markup, and contorting your markup to match a pre-existing CSS class hierarchy isn't always a great idea.
Once I have a design that I'm happy with in my standards compliant browser, I then decorate it with bug fixes in other, less standards-compliant browsers using conditional styles or stylesheets. Firefox, at least since version 3.0, is almost never a huge issue, but there are ways of targeting Firefox specifically, and even differentiating between Gecko 1.9 and 1.8, using only CSS. It's a hack, technically, so CSS purists might scoff at the code blasphemy, but it's a reliable, usable solution. For clarity and ease of maintenance, I usually maintain my Firefox/IE fixes in isolated stylesheets and compile them with some kind of server side script, which I consider preferable to conditional include statements and JavaScript hacks. If you make use of caching with PHP, this isn't a significant bottleneck or waste of CPU time.
IETester is an indispensible tool for checking a design in all of the different IE versions, and it even uses the proper JScript engine for each release, which previous, less reliable solutions like MultipleIEs lacked.
These days, the biggest problem with cross-browser development is JavaScript, and jQuery will basically save your life here. As someone who maintained a sizable JavaScript framework for a corporate website in the days before AJAX and JavaScript interfaces, so there's no limit to the amount of praise I can give for jQuery/Prototype/Dojo.
When you say only using divs and CSS, I hope you're not absolutely positioning everything. That's a sure-fire way to mess designs up in lots of browsers. (Generally the best practice is to use floats.)
You could also try IE7.js to fix a bunch of problems with IE 6-7.
In general I'd suggest developing in IE and one of the standards-compliant browsers side-by-side (Firefox/Chrome/Safari/Opera). And try and keep both the HTML and CSS as simple as possible.
A couple more tools include
Browsera - automatic detection of cross-browser layout problems
LitmusApp - screenshots with pass/fail tagging
SuperPreview - extension to Microsoft Expression Web (currently available standalone download) where you can view an overlay screenshot of a different browser
Browserlab - extension to Adobe Dreamweaver (currently available standalone online) where you can view an overlay screenshot of a different browser
I'd also strongly recommend using a CSS reset to start such as http://meyerweb.com/eric/tools/css/reset/
Why? Because many of the cross-browser inconsistencies stem from the fact that the default style in the browser differs. For instance, a default margin may make an element layout correctly in one browser, but not the others.
It may seem weird to always be overriding default behavior, because it seems like a waste, but its absolutely necessary in order to have a baseline with which to work.
I'd recommend looking at a CSS framework like BluePrint. It has a generic way to build pages using grids, and also has some default css for forms etc.
Frameworks will have dealt with many of these cross-browser quirks during their development, so it could save you a lot of time.

Categories