I have been looking for a server side library that is able to capture all scripts used on an HTML page, and convert them to IE (<9) compatible (e.g., handling things like getter / setters, missing types etc.). However I am not having much luck finding one.
Does anyone know if such a library? Am I dreaming thinking I will be able to find / build such a thing?
My preference is first node.js, second POSIX, however any suggestions would be much appreciated.
Edit: I think it is worth noting that I am not referring to something which handles differences in the IE DOM (although that would be helpful), but rather something that handles javascript language differences.
There are what you call shims, like ES5-shim. Though not thoroughly complete, they create support for ES5 functionality for legacy browsers. This is client-side code though.
Related
Is there a version of quickcheck that works for Javascript and that is well maintained? I have found several such as check.js and claire, but none of them seem to support shrinking of failing test cases, which has always struck me as the most useful part of the whole problem.
I'm creator of jsverify. I'll try constantly to make it better, bug reports and feature requests are welcomed.
There are also a list of other javascript generative testing libraries in a readme. So far I haven't found any other good alternative to the jsverify.
I recently released https://github.com/dubzzz/fast-check
I built it in order to answer several limitations I encountered in the existing quickcheck implementations in JavaScript.
It comes natively with a shrink feature which can shrink even combination of arbitraries (the frameworks I tried were failing on oneof like arbitraries).
It also can generate large objects and arrays.
By default it tends to try smaller values first in order to detect trivial edge cases while it covers all the possible inputs in next runs.
Lots of other features are on-going or already available :)
Cheers,
Nicolas
I wrote quick_check.js, which has a nice library of generators. Shrinking is not there yet, but is planned.
There seems to be a dearth of good quickcheck-like testing tools in javascript. However they are to be better supported in typed languages, and in fact you can write your tests in one of those languages if you wish.
To avoid dealing with runtime interop, I'd recommend going with a language which compiles to JS and runs on node.js (eg: Purescript with purescript-quickcheck), or a java-based language using the Nashorn engine provided in Java 8, for example ScalaCheck. You could even use ghcjs and the original flavor of the quickcheck library!
Reset.css files are used to resolve browser inconsistencies when it comes to styling.
Is there something similar for JavaScript inconsistencies across browsers like a reset.js?
For example this "reset.js" library would define a prototype for the String trim() method as specified in this question since (among other things) IE8 does not support this.
I know libraries like jQuery can be used to overcome these inconsistencies but having something like a reset.js could help when using 3rd party JavaScript libraries that do not use jQuery.
Yes, there are polyfills to do exactly that. But there are so many things you'd need to fix that you can't put all fixes in one single script :-)
Have a look at the HTML5 Cross Browser Polyfills list.
If you're specifically interested in EcmaScript compliance, there are ES5 shims to retrofit missing or incorrectly implemented methods like String::trim; yet they can't fix the engine bugs (identifier-keywords, NFEs, …).
I don't know of one that is/does exactly what you asked in a single library and as far as I know there are quite a lot of people against 'patching' the built in JavaScript objects, and some libraries (e.g. ExtJS) that did this in previous versions have changed and do now deliver the functionality in custom utility functions.
On the other hand there are a ton of smaller and larger shims to bring missing functionality to older browser, especially dealing with HTML5 inconsistencies.
what basic tips should we observe in design web pages(html/css/javascript) for having highest compatibility with most browsers(IE-firefox-opera-chrome-safari)?
thanks
Validate often and squash all validation errors by the time you make a public release. The purpose of validation, after all, is to parse the html as a standards-compliant browser would and then avoid the errors that a browser's parser would find.
Apply progressive-enhancement techniques. Often that means moving some of the complexity of dynamic pages to the back-end (e.g. php, django, what have you) so that you can have complex functionality that doesn't break in one of the thousands of different client environments in which a page's javascript will run. jQuery is excellent for narrowing the focus of your javascript development towards feature enhancement instead of open-ended features-in-javascript, and it'll help with cross-browser compatibility as well.
IE - Test in at least one live version of IE 7 or 8. Unfortunately, there really isn't any way around this, because even IE8 misbehaves like no other browser. If possible, limit your goal of support for IE6 to html/css (i.e. don't promise support for user-enhancement-features via javascript in ie6). If possible, drop support for IE 5.5 and below.
For Javascript, use libraries that are intended on being platform-independent (ie: JQuery, Prototype). Not everything will be, but it'll make your life much easier.
For CSS, I'd say follow standards, but IE tends to cause problems across the board.
Which means, you need to test, and test often. Selenium is awesome for automated functional testing, and it works with pretty much every browser. We use a Selenium RC server on a Windows machine to test IE and Firefox, which are then controlled from our standard Java JUnit tests.
Keep things simple.
The simpler your markup, CSS, and JavaScript, the easier it will be to track down incompatibilities. Try to limit yourself to CSS1 for as much as possible. Only use more modern CSS2/3 features when there is no easier way to accomplish your task.
Don't use tables, they just add extra complexity. Using semantic markup not only makes things maintainable, but also gets you the best cross browser support if done properly.
Keep in mind that floats are evil, but are also very powerful. Use them generously, but avoid trying to clear floats. Use overflow instead.
Use a JavaScript framework. Framework developers have smoothed out most of the cross-browser bugs for you. I recommend jQuery, but you can choose any framework your developers feel comfortable with. My advice is to:
Use a JavaScript framework that doesn't alter the prototypes of native objects (like Prototype JS does)
Doesn't introduce many global variables. Most frameworks follow this rule.
Aside from those 2 rules for JavaScript, try using closures to encapsulate code so you don't introduce your own global variables.
One strategy I use is to start my CSS with a set of rules that blank everything out. Each browser may have different values for element attributes so ensuring that everything is consistent from the get-go can be handy. Here is an example reset.css
http://meyerweb.com/eric/tools/css/reset/
Take a look at this great article: Browser Compatibility Tutorial
Remember: something won't just work for a specific browser (mayble a left dotted border won't show in Chrome). Do not be upset about that if you can! :) Cross-compatibility is an art that takes a lot of time.
I was wondering why JavaScript has such a confusing API. It is not consistent across browsers, there is a different way to get the value from each type of form input, and it is unforgiving of mistakes. jQuery has changed my life because its API is so much easier. Why did the creators of JavaScript not set up the API like that in the first place?
The JavaScript API, itself, is consistent between browsers (and is defined by ECMA, though originally developed by Netscape). The difference between browsers is the document object model (DOM). The DOM was developed independently by the different browsers, originally IE and Netscape, but now IE, Mozilla and others. The W3C has joined to try to consolidate the differences and create a common standard. For backward compatibility, the old differences remain. And, yes, jQuery has gone a long way toward making the DOM easier.
Creators of Javascript did not setup the API, since Javascript is a language, not an API.
What you are refering to is the Document Object Model (DOM) which is the document manipulation API. It is a standard specified by the W3C and its behaviour should be consistent among browsers.
Unfortunately, some parts were badly specified, some other parts are badly implemented by browser vendors. Additionally, vendors extend this API with proprietary extensions that may never be added in the standard but that are very popular (like document.all in its time).
That's why today's API in browsers are so inconsistent.
I think most of it is the remnant of the browser war. Javascript had a very troublesome history, made of a total war between microsoft and netscape, with Sun involved as well. Javascript is actually a very nice language. It has some critical design mistakes, but you can work around them. As for the API, you can use a good wrapping library that hides all the complexity and uses the most appropriate API.
One important suggestion, if I may. Don't fight it, nor try to use it masked as something else. Embrace it even with its defects. Once you know them, you won't step on them anymore, or if something is fishy you will find the problem easily.
I'll bite. Check out Douglas Crockford's videos (http://javascript.crockford.com/), he does a good job explaining why some of JavaScript is in the situation that it's in. (http://yuiblog.com/blog/2007/01/24/video-crockford-tjpl/)
This doesn't directly answer your question, but:
A lot of people are bothered by the between-browser inconsistencies. While a few folks become really good at ironing out the differences in their own JavaScript code, most can't afford to spare the time. This is why there is such a profusion of frameworks available to do the dirty work for you. JQuery is the most popular of these, I think, and I'd recommend it to you as an alternative to swallowing a lot of Aspirin for your headaches.
It's always a big problem for web designers to make their page look good in all the commonly used browsers. What are the best ways to deal with this fact?
For CSS:
Use a reset (like Meyer or YUI) to "level the playing field" before your style is applied
Style for the weirdest browser that you have to support (like IE6), make it look right, then change what you need to for more modern browsers. Trust me, this is much easier than doing it the other way around!
For Javascript, I'd use a framework like jQuery or YUI since they go a long way in abstracting away most of the browser-specific quirks you're likely to encounter.
Good luck!
Use well supported libraries - don't try and start from scratch. For example, JQuery handles a lot of browser issues for you.
Test, test, test and learn from experience.
Use virtual machines to test in different IE versions. Download them here:
http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en
Try avoiding hacks - css or js to target browsers unless really necessary.
As others said, jQuery might help a lot in Javascript to irons out the pesky browser differences.
A proper doctype on the page so that it renders in standars compliant mode.
Test in a standards compliant browser like Firefox first when you develop. If you test in Internet Explorer first, you will most likely write code that uses some of the rendering bugs in IE to make it look like you want, and then you will have a hard time to make it work in any other browser.
You will most likely have to tweak the layout to avoid some of the rendering errors in IE. Different versions have different rendering errors so you need to test several. Add an X-UA-Compatible meta tag to keep IE 8 from rendering in compatibility mode.
Use the html elements as originally intended. Links to navigate, header tags for headlines, et.c. That way the code is more likely to work as intended, and search engines will do a better job indexing the pages.
For javascript you can't go wrong with jQuery.
There's no universal way to ensure that everything always works. For CSS, a reset stylesheet goes a long way to standardizing looks between browsers; for JS, use a library like jQuery that handles browser compatibility issues in a sane way.
Definitely JQuery, or Mootools or prototype..or some other JS library.
IMHO stick to good JavaScript Library like jQuery, which promises to be crossbrowser
Using a good lib to make your js more cross browser safe is a good start. Also using a css framework like 960.gs or blueprint is a good choice for the css. Basically you need to do a full css reset.