Are there javascript libraries that provide forward compatibility with particular implementations? For example, such a library could provide features present in JavaScript 1.6 in a way that's portable across various browsers. It should take advantage of native support for that functionality when available.
Some of the frameworks like JQuery or Prototype provide features that are identical to features in newer versions of JS, but I'd like to both cut down on the size of the library I'm using and ensure full compliance with a standard or published version.
Do libraries such as this exist? Google and wikipedia don't have much to say on this topic.
It looks like there is such a library: the "JavaScript Standard Library" (JSL). It purports to provide as much JS 1.6 compatibility as possible for browsers supporting JS 1.2 or later.
I haven't used it, and am not sure of how well it works. The documentation is written in sketchy English; this could indicate a lack of widespread usage, since otherwise someone probably would have corrected it by now.
To add to the confusion, the site links to a JSL Revision, located on a different website, whose features list indicates that it provides a subset of the features listed at the main page.
The author has written some more about this library and about the general concepts involved in this blog post.
For example, such a library could provide features present in JavaScript 1.6 in a way that's portable across various browsers. It should take advantage of native support for that functionality when available.
This is pretty much what the frameworks do, and do well (even though most of the compatibility gaps they close are DOM and CSS related). I'm not aware of a general purpose framework with a focus on forward compatibility. Not sure whether something like that can exist at all, because looking at the Wikipedia article, many of the improvements in any version are constructs and behaviours that are very, very hard to simulate in an older version of the language (e.g. let, expression closures...)
Related
Prior to building an eLearning solution, I am determining whether to use an authoring package such as Captivate or Storyline or to create HTML pages which utilize JS calls for tracking. If I avoid using an authoring tool, I get flexibility in terms of the content and reuse of existing assets. For example, Storyline is outputting SWF files which I cannot pass around my team like a simple HTML page for review. However, I am new to SCORM.. and I am wondering is it feasible to get up to speed with implementing SCORM LMS tracking JS calls along with my custom HTML pages, or would the preferable approach be to start with an authoring tool?
Yes, it's very feasible if you're comfortable with HTML and JavaScript.
SCORM supports many complex scenarios, but the dirty secret of most e-learning development tools is they only use the most barebones elements of SCORM: bookmarking, completion status, score. Adding this level of barebones SCORM support to a hand-made HTML/JS course is really easy, and in the simplest cases should take only a couple of hours.
There are a lot of libraries to get you started so you don't have to reinvent the wheel or get caught up in some of the details, much like jQuery vs vanilla JS.
The organization that created SCORM provides a wrapper. They updated it in 2011; it's much better now, though it still suffers from global namespace pollution.
Andrew's post advocates Rustici Software's tools (he works there). They're great guys, SCORM and xAPI (Tin Can) experts, and their code is solid, but their code is not open-source, if that matters to you. (FWIW, they have a great online reference chart for SCORM run-time calls, I use it all the time.)
I've heard good things about JCA Solutions' products, but have not used their code myself.
In 2008 I wrote my own SCORM wrapper (open source, available on GitHub), which met my own needs -- your mileage may vary. I wrote it in part because I was dissatisfied with the wrapper provided by ADL at the time. Their wrapper suffered from global namespace pollution, and didn't provide any error handling. I noticed I kept writing the same error-checking and conditional logic to my courses over and over. I decided to move some of this to the wrapper in order to keep my course code minimal and DRY. If you're interested, I wrote a simple tutorial for adding SCORM to an HTML file using my wrapper (note this is a single HTML page, if you use multiple pages, you will need to use iframes to prevent accidentally killing the API connection).
My wrapper is old and not perfect, and I am not a self-promoter. I suggest you try all of the wrappers mentioned by the other posters and find one that feels most natural/intuitive to you, works best for your style of coding, and meets your licensing requirements. They all do a good job of shielding you from complexity and helping you get your course up and running.
Bottom line: you don't need to use off-the-shelf development tools, HTML is a great choice, and as you can see, there is a decent community available to help.
There is a way to use both methods and maintain re-usability. You can create smaller chunks of reusable content in an authoring tool, such as captivate. And string them together in SCORM packages. But looking retrospectively into my own experiences, I would have wanted to learn SCORM first. Captivate and other authoring tools cost money, whereas creating and coding your own packages is free and in most cases takes just as much time an knowledge to do so. There are resources out there for learning quickly, I used JCA Solutions and completed the course in about a week. I found this quicker and Easier than Captivates training. But that's me.
Best of luck.
There are some middle ground options for you to consider too:
Use an authoring tool and customize the output if you need to go beyond standard features. Most authoring tools have extensibility features built in.
Use Driver to handle your tracking and build the content from scratch.
Consider using Tin Can if you are creating the kinds of learning experiences common authoring tools aren't designed to create.
Knowing a little about SCORM is helpful, but don't re-invent the wheel.
There is a bit that goes into custom packages based on your needs. You have the benefit of deciding what browser support you want, if you want to use a template system, if you use your (roll your own) API, or a 3rd Parties like pipwerks, SCOBot (mine) or Rustici's.
Lack of accessibility, Flash content, and other options/limitations may take 3rd Party authoring systems out of contention.
And of course budget. You may need to move through Lectora, iSpring, Captivate and any number of possible systems to fill the time vs. budget gap.
Is there a formal standard I can use to to rate the accessibility, especially for visually impaired people, of my MVC3 web application? If there are various standards, as I suspect, which should I give preference to for a web application primarily targeted at people with no or minimal visual impairment, but strongly wanting to offer as much as possible to visually impaired people? This is a learning management application, so wide accessibility is important.
I am trying to stick to best practices in terms of HTML and CSS semantics and such like things, documented in the handful of books I have, and I am using HTML5 validation in Visual Studio for my Razor views. What other tools can I use, preferably on the development side, before I deploy and can use the various online validators? Are the any online rating tools?
Standard (and reference list)
The W3C standard is WCAG 2.0.
The WCAG 2.0 Recommendation tries to be technologically agnostic and to apply to all kinds of websites, even web apps but the consequence is that it's rather unspecific. HTML/CSS/Script Techniques (as well as the Failure ones and Flash/Pdf/Smil if you use them) and the Understanding part are good reads.
For daily auditing I prefer to use:
AccessiWeb 2.2 reference
list,
"a methodology to verify conformance to WCAG 2.0" that "facilitates
(its) understanding and implementation".
There are references to WCAG 2.0 Success Criteria and Techniques but alas no links. Hyperlinks exist on the french version but weren't added on the english one, alas (I'll try to fix it with them this month).
The script part, essential to webapps, is again partly unspecific but that's because it's hard to be so without having 10x as tests! There are thousands of things to do with JS when there are a hundred of HTML elements.
EDIT 2014: this checklist has been updated to new techniques in HTML5/ARIA (an awesome work imho) but only in french. AccessWeb HTML5/ARIA (in french) May be translated in english in 2014 or 2015 or try an online translation service ;) 70% of tests are common with AccessiWeb 2.2 and the new tests are up to date HTML5/ARIA techniques already working in modern websites with the browsers and screen readers quoted in Annexes.
ARIA, as in Accessible RIA, is another work from W3C-WAI:
(ARIA) especially helps with dynamic content and advanced user
interface controls developed with Ajax, HTML, JavaScript, and related
technologies.
No doubt this is the future of accessible web apps but its support is a work in progress in browsers and assistive technologies. Also old screen readers'll never be compatible with ARIA and they're very slowly being replaced for newer versions because they cost A LOT (thousand(s) of USD/EUR for JAWS).
Thus webdevs must always create apps compatible with both old plain techniques (using tab key and space to access information and interact with it) and new ones (manipulating a tree with arrow keys, being informed of changes in a Live region while reading another part of the page).
ARIA is complicated, needs time and experience, etc
ARIA doesn't replace WCAG 2.0; huge improvements'll be seen with WCAG 2.0 only.
not everything is as complicated as a tree implementation. Landmark roles are very easy to add in any website for example.
If you use jQuery UI, there exists an accessible version of popular modules/scripts: http://hanshillen.github.com/jqtest/
It isn't perfect yet but it's far better than the original. In my experience, you can't mix the legacy jQuery UI scripts and these ones (though I didn't try for too long, I could easily be wrong).
Testing
I wrote about 2 useful services, Opquast and Tanaguru, in another answer. The other answer from BrendanMcK related to automated tests is a must read.
WAVE (fluffmyboner already wrote about it in the other answer) both exist as a toolbar and as a webservice. Main difference afaik: the WAVE toolbar'll analyze the DOM of your page while the webservice'll analyze the HTML+CSS sent but won't execute any JS
TAW (select inglès than WCAG 2.0) is another service for analyzing a few criteria
Wave is my go-to for accessibility validation, although I'm not too sure about what you can use to check pre-deployment.
I’m wondering why no web browser supports the XInclude standard for XHTML.
This standard exists for almost five years, and I think it would be very useful for the web.
For example, you could XInclude the static parts of your web site, such that the browser will only need to download the part which have changed when the user is browsing the site. Moreover (but I may be wrong) this does not seem to be very difficult to support, in comparison to standards like SVG or MathML.
(sorry for this question without real answer, I will not mind if it is closed)
There is an old open bug on the Mozilla bug tracker asking for XInclude support with a patch in which some problems are discussed:
a satisfactory XInclude implementation requires XPath, XPointer, xml:id and other specs to be implemented first,
most of the time XInclude can be simulated by the document() XSLT function,
loops must be detected and this is hard to do,
it is not well understood how the DOM changes made by XInclude's documents should be encapsulated into events and propagated.
Did anyone has the comparison between these two libraries (Combres2 and SquishIt)? If one library is better than another one, I also want to know the reason for that.
I found the article said that Combres2 has a better compression than SquishIt. But it is almost a year ago.
http://blog.buzzuti.com/post/Combres-vs-SquishIt-e28093-A-battle-of-Minification-Combiner-and-Squishing-in-generale280a6.aspx
One thing to make note of is that SquishIt works in a different manner than Combres2, so it isn't a simple who produces better minified code.
SquishIt works very nicely with T4MVC, which you won't get with Combres2. On this basis alone I'd tell anyone to use SquishIt. Additionally, SquishIt is not xml config file based, which allows for a lot of flexibility. In fact, you could theoretically make an xml config file and mimic Combres2 if you really desired it.
In terms of minification SquishIt is actively developed, which means that if new methods to minify scripts are created you'll be more likely able to leverage that as well. Currently it supports JSMin, YUI, MS Ajax Minifier, Closure Minifier, or even no minifier.
Update 1/18/2012: There are now many other alternatives out there aside from SquishIt and Combres2. For starters, Microsoft is creating there own system for the next release of ASP.NET 4.5. Cassette, similar to SquishIt, and RequestReduce, which is quite different than anything else by automagically doing everything for you.
I'm a fan of SquishIt.. even though Combres and SquishIt both (optionally) use the YuiCompressor.NET library (which I am biased, for ;-) )
Being a fan of Justin Etheredge, I recommend/use SquishIt.
The reasons to one library is better than the other (for me) is if the final result is NOT a break code and still working.
I have test and working with the Microsoft Ajax Minifier, and I assure you that is working absolute correct - can even minifie the jQuery library with out any issue.
http://ajaxmin.codeplex.com/
http://aspnet.codeplex.com/releases/view/40584
documentaion:
http://www.asp.net/ajaxlibrary/AjaxMinDocumentation.ashx
Now if a library is one year old this have nothing to do, because they just working on javascript code that have some standards some years now.
To point again out : the better is the one that product minimum code that is still working under very complex javascript functions like the one jQuery have.
One note:a minified library can minified a full set of files at ones, do not try to minified one by one and them add them to a single file, this is not working.
This is meant as an answer to the 'Microsoft Ajax Minifier' recommendation, and a general warning for those that do so. As my reputation is a mere 41, I cannot add the comment there, where it should go. :(
For our team, the native C# VS2017 Microsoft compression (which may or may not be the same as the one labeled as 'Microsoft Ajax Minifier') failed on the css function 'calc', and badly.
That was a bit tricky to track down, since the error (obviously) only occurs during minification. And since we were minifying based on environment (interwoven with Release, Debug), that meant the calc bug (by default) never appeared on local. It just magically appeared when we pushed to production... and only on pages that used the calc function.
(Definitely agree that minimum code add-on is fantastic. But the native minifier can be faulty. So proceed with caution.)
If you are not using 'calc' (and you are noticing no other issues), then likely your team is fine with the default minification tool.
And of course, Microsoft could have fixed the bug since we discovered it. But bug reporting through msdn doesn't always lead to resolution of the issue. :(
There may be other issues. But in our case (since we use 'calc'), that was sufficient to have us investigate other minifiers, and SquishIt has been our team's choice. We had not looked at Compres2 at that time. Up until now, we've been very happy with SquishIt.
Side note: I'm in the middle of investigating minifiers again because of some sort of 'collision' between jQuery 3.6.0 and SquishIt for VS2017. (with no 'collision' between jQuery 3.4.1 and SquishIt, VS2017). Early stages of problem-solving process.
Best wishes and happy coding,
Michael M.
Short version: What is the cleanest and most maintainable technique for consistant presentation and AJAX function across all browsers used by both web developers and web developers' end-users?
IE 6, 7, 8
Firefox 2, 3
Safari
Google Chrome
Opera
Long version: I wrote a web app aimed at other web developers. I want my app to support the major web browsers (plus Google Chrome) in both presentation and AJAX behavior.
I began on Firefox/Firebug, then added conditional comments for a consistent styling under IE 6 and 7. Next, to my amazement, I discovered that jQuery does not behave identically in IE; so I changed my Javascript to be portable on FF and IE using conditionals and less pure jQuery.
Today, I started testing on Webkit and Google Chrome and discovered that, not only are the styles inconsistant with both FF and IE, but Javascript is not executing at all, probably due to a syntax or parse error. I expected some CSS work, but now I have more Javascript debugging to do! At this point, I want to step back and think before writing piles of special cases for all situations.
I am not looking for a silver bullet, just best practices to keep things as understandable and maintainable as possible. I prefer if this works with no server-side intelligence; however if there is a advantage to, for example, check the user-agent and then return different files to different browsers, that is fine if the total comprehensibility and maintainability of the web app is lower. Thank you all very much!
I am in a similar situation, working on a web app that is targeted at IT professionals, and required to support the same set of browsers, minus Opera.
Some general things I've learned so far:
Test often, in as many of your target browsers as you can. Make sure you have time for this in your development schedule.
Toolkits can get you part of the way to cross-browser support, but will eventually miss something on some browser. Plan some time for debugging and researching fixes for specific browsers.
If you need something that's not in a toolkit and can't find a free code snippet, invest some time to write utility functions that encapsulate the browser-dependent behavior.
Educate yourself about known browser bugs, so that you can steer your implementation around them.
A few more-specific things I've learned:
Use conditional code based on the user-agent only as a last resort, because different generations of the "same" browser may have different features. Instead, test for standards-compliant behavior first — e.g., if(node.addEventListener)..., then common non-standard functions — e.g., if(window.attachEvent)..., and then, if you must, look at the user-agent for a specific browser type & version number.
Knowing when the DOM is 'ready' for script access is different in just about every browser. A good toolkit will abstract this for you.
Event handlers are different in just about every browser. A good toolkit will abstract this for you.
Creating DOM elements, particularly form controls or elements with attributes, can be tricky with document.createElement and element.setAttribute. While not standard (and kinda yucky), using node.innerHTML with strings that contain bits of HTML seems to be more reliable across browser types. I have yet to find a toolkit that will let you use element.setAttribute to add a 'name' to a form element in IE.
CSS differences (and bugs) are just as important as JS differences.
The 'core' Javascript features (String, Date, RegExp, Array functions) seem to be pretty reliable and consistent across browsers, especially relative to the DOM/CSS/Window functions. There's some small joy in the fact that the language isn't entirely different on every platform. :-)
I haven't really run into any Chrome-specific JS bugs, but it's always one of the first browsers I test.
HTH
Chrome is actually a little different to Safari, it uses a completely different javascript implementation and problems have been reported with both prototype and jquery. I wouldn't worry about it too much for now, it's still an early beta version of the browser and such inconsistencies will probably be treated as bugs. Here's the bug report.
One "silver bullet" you may consider turning to is Google Web Toolkit (GWT).
I believe it supports all the browsers you are interested in, and gives you the ability to code your UI in a Java-compatible IDE such as Eclipse. The advantage of this is you can use IDE tools for code completion and compile-time error checking, which greatly improves development on large-scale UI projects.
If you use GWT UI components, it will hide a lot of browser-specific nastiness from having to be dealt with, but when you compile, will create a compact, deploy file for each browser platform. This way you never download any IE-specific code if you are viewing the app in Firefox. You will also have a client-side stub generated which will load the appropriate compiled bundle of JS. To sweeten the deal, these files are cacheable, so perceived performance is generally improved for returning visitors.
The landscape has evolved considerably to accommodate cross-browser development. jQuery, Prototype and other frameworks exist for cross-browser Javascript. CSS resets are good for starting on a common blank canvas for all browsers. BluePrint and 960 are both CSS frameworks to help with layouts using CSS grid layouts techniques that seems to be getting very popular these days.
As for other CSS quirks across the different browsers, there is no holy grail here and the only option is to test you website across different browsers and use this awesome resource and definitely join a mailing list to save up soem time.
If you are working on high volume production site then you can use a service like browsercam.com in the end game to ensure the site doesn't break horribly in some browser.
Lastly, don't try to make the site look the same in every browser. Your primary design should target IE/FF and you should be okay with reasonable compromises on others. Use the graded browser chart to narrow in on browser support.
As for best practices, starting using wireframes on blank paper or a service like Balsamiq mockups. I am still surprised how many developers start with an editor instead of a wireframe but then again I only switched a year back before realizing how big a time saver it is. Have clean seperation of layout (HTML), presentation (CSS) and behaviors (Javascript). There should be no styling elements in HTML, no presenation in Javascript (use .addClass('highlight') instead of .css({'background-color': 'red'});).
If you are not familiar with any of the bold terms in this post, Googling them should be fruitful for your web development career and productivity.
If you're starting from a base reset or framework and have accounted for IE and it's still all freaky, you may want to recheck the following:
Everything validates? CSS and HTML?
Any broken links to an included file (js, css, etc?). In Chrome/Safari, if your stylesheet link is busted, all of your links might end up red. (something to do with the default 404 styling I think)
Any odd requirements of your js plugins that you might be using? (does the css file have to come before the js file, like with jquery.thickbox?)
For UI, check out Ext.
It's great as a standalone library, though it can also be used with jQuery, YUI, Prototype and GWT.
Samples: http://extjs.com/deploy/dev/examples/samples.html
I've found four things helpful in developing JavaScript applications:
Feature detection
Libraries
Iterative Development using Virtualization
JavaScript: The Definitive Guide, Douglas Crockford & John Resig
Feature Detection
Use reflection to ask if the browser supports the desired feature. If you want to know what event handling a browser supports, you can if(el.addEventHandler) for W3C compliance, if(el.attachEvent) for the IE-type, and finally fall back on el.['onSomeEvent'].
ONE BIG BUT!
Browsers sometimes lie about what features they support. I can't remember, but I ran into an issues where Firefox implemented a DOM feature, but would return false if you tested for that feature!
Libraries
Since you're already working with jQuery, I'll save the explanation. But if you're running into problems you may want to consider YUI for it's wonderful cross-browser compatibility. They even work together.
Iterative Development with Virtualization
Perhaps my best advice: Run all your test environment's at once. Get a Linux distro, Compiz Fusion and a bunch of RAM. Download a copy of either VMWare's VMWare Server or Sun's Virtual Box and install a few operating systems. Get images for Windows XP, Windows Vista and Mac OS X.
The basic idea is this: Compiz Fusion gives you 4 Desktops mapped onto a Cube. 1 of these desktops is your Linux computer, the next your Virtutual Windows XP box, the one after that Vista, the last Mac OS X. After writing some code, you alt-tab into virtual computer and check out your work. Plus it looks awesome.
JavaScript: The Definitive Guide, Douglas Crockford & John Resig
These three sources provide most of my information for JavaScript development. The Definitive guide is perhaps the best reference book for JavaScript.
Douglas Crockford is a JavaScript guru (I hate the word) at Yahoo. Lookup his series "Douglas Crockford Theory of the DOM", "Douglas Crockford Advanced JavaScript", "Douglas Crockford Theory of the Dom", and ""Douglas Crockford The Good Parts" on Yahoo! Videos.
John Resig (as you know) wrote jQuery. His website at ejohn.org contains a wealth of JavaScript information, and if you dig around on Google you'll find he's given a number of presentations on defensive JavaScript techniques.
... Good luck!
Just so you've got one less browser to worry about, Chrome uses the same rendering engine as Safari. So if it works in Safari, it should work exactly the same in Chrome.
See this post on Matt Cutts' blog.
Google Chrome uses WebKit for rendering, which is the same rendering engine as Apple’s Safari browser, so if your site is compatible with Safari it should work great in Chrome.
Update: Looks like this is now out-dated info. Please see Vox's comment on this answer.
If your very top priority is exactly consistent presentation on all the browsers listed with no disparities, you should probably be looking at AS3 and Flex.
Personally, I use Mootools as a simple lightweight javascript framework. It is simple to use and supports all the browsers above (except Chrome, but that seems to work too as far as I can tell).
Also, to ensure consistency across the browsers, I get a feature/style/behaviour/etc. to work in one browser first (usually Firefox 3 with firebug), then immediately check to make sure it works in all the other browsers (leaving IE6 for last). If it doesn't, I inveset the time to fix it right away, because otherwise I know I won't have time later (in my experience, getting things to work cross-browser takes about 50% of my dev. time ;-) )
Validating your javascript with a "good parts" + browser on JsLint.com makes it less likely to have JavaScripts behaving differently in FF, Safari etc.
Otherwise - using standards and validating your code as well as building on existing techniques like jQuery should make your site behave the same in all browsers except IE - and there's no magic recipe for IE - it's just bugs everywhere...