We Keep Coding

Is there a javascript solution for CSS browser support of new features?

I'm using pretty recent CSS features such as viewport units and flex-boxes. These are great for making fluid layouts, and to get rid of extra-markup and dirty CSS hacks.
I'm using prefix-free to handle some vendor-prefix issues, but that got me thinking, is there any sort of script that can detect the use of recent CSS features and somehow make calculations in order to render the elements that use that feature correctly? (if the browser doesn't support those features, of course)
The site I'm making makes use of Bitcoins and WebSockets (and to my knowledge, socket.io falls back to long-polling), so I guess maybe many of the users will be somewhat "tech-savvy" and have recent browsers, but I don't really know what to expect, honestly. And it'd suck if the site looked completely broken for some people.
I'm the sole developer of this and the idea of making a bunch of the layout compatible with older browsers is... well, daunting. I just got started so I might as well use old CSS techniques, but I'd really like to use the latest stuff.
It really sucks that there is a lot of new, cool stuff, but old browsers are holding everyone back...
Thank you.

What you're looking for is commonly called a "polyfill".
There are many polyfills available... usually several for each feature. You can find packages like Webshim which come with many out of the box: http://afarkas.github.io/webshim/demos/
Use http://caniuse.com/ to check for browser compatibility. It often links to polyfills in the comments section.

Web-Based Game Engines - Request For Input

I'm creating a web-based online game and am trying to find the best fit in terms of a framework for the front end of the game. The back end of the game is currently using asp.net mvc 2. Given that I could take the controller actions and turn them into WCF service actions the choice in the back end should not affect my options of a front end.
One thing that is certain, it does need to play in a browser. I have done some research on an HTML 5-only front end as part of this process and am probably leaning in this direction but I have a few concerns:
Assuming this game is completed this time next year, what kinds of difficulties will I have with current HTML 5 adoption levels? Specifically I'm worried about Firefox 3.6 and IE 7/8 still having a large install base. I have looked at Chrome Frame to solve the IE problem but am not sure if there are drawbacks to that I am unaware of either (other than the installation requirement).
I'm used to doing C# with a nice IDE complete with realtime information about whether the code compiles and intellisense reminding me of symbol names. Am I going to run into a problem with Javascript where my code becomes big and difficult to manage? The accessibility problem that a Javascript only engine solves for my users is more important than convenience for me but it of course can't be unmanageable either.
Are the HTML 5 engines on the market right now mature enough to trust with my time investment? Am I at high risk of adopting a framework that will fall into disrepair in a year from now? Of the engines I have looked at, none seem to have really great community support, am I wrong? Are there others out there that do?
here are those I have found thus far:
CraftyJS (http://craftyjs.com/api/Sprite.html)
ImpactJS (http://impactjs.com/)
PropulsionJS (http://www.propulsionjs.com/)
The Render Engine (http://www.renderengine.com/demos.php)
RPG JS (http://rpgjs.com/)
EaselJS (http://easeljs.com/)
Does anyone know anything of the community with these or have any reason to trust that any of these will be well maintained or available for at least the next several years? Does anyone know of another framework that's out there? ImpatJS has the most impressive demo of them all and it's also the only one that isn't free.
Thanks for any help / advice. I'm just worried I'll choose a front-end that I regret and I don't want to have to start from scratch 4 or 5 months down the road.
This is a 2D browser-game. It's not targeting mobile now, but it will be moving to mobile immediately after first launch. One hope is that it will work on mobile fine if I do HTML 5. I may have to tweak it for display size but if I don't have to port it to mobile that would be a definite plus.

This is my two cents having just been through the same decision making process for my company.
Our goal was to create as broad a game as possible that means it needs to run on as many browsers as possible. I ruled out html5 right away because the adoption is not there and seems to be at least a couple years until it reaches more than 60% penetration.
This left me with Flash vs. Silverlight. Flash's installed base is huge and there are many game engines available for it. Flash is a safe bet unless you have specific requirements for video or 3d.
I choose Silverlight because I wanted a good installed base (60%) and I wanted to leverage my companies’ in-house .Net expertise. I also wanted to use WCF for the backend and did not want to mix environments.
Keep in mind that SL5 is going to support most of XNA which is a big deal. There are a ton of XNA engines and source code that you can use to start with.
Here's a great site for looking at html5 browser support:
http://caniuse.com/

I can't speak with expertise on the particulars of HTML5 and Canvas, but...
As far as support goes, you'll still have probably a large bunch of IE7-8 users. IE is a little different than other browsers because you have to DO something to install updates. (i.e, go to the Install Updates in Control Panel or visit ie.microsoft.com). Other browsers (like firefox) just tell you and make the update easy. So your FF 3.6 users should be gone, but IE will still probably be a problem. Keep in mind, though, that much of the old IE browser share is due to IT depts. keeping their users on older versions - something you won't need to worry about.
This could be a problem. However, developing JS in Visual Studio or a similar IDE isn't so bad - there's still IntelliSense and other helpful things, as well as realtime debugging. It's definitely going to be a bit more difficult than C#, especially as many of the new JS api's haven't been implemented into the Autocomplete's of many IDE's.
I don't think you need be afraid of this. At this point, HTML5 and Canvas have gotten far enough that they won't be revoked, only improved. There may be a few modifications of the APIS and such, but not enough to keep you from using it.

Is HTML5 going to replace Flash? No, because games and RIA that require more out of javascript cannot be done until enough of the world is using IE 15 (which is about 5 10 years). Safari, Chrome, FF (maybe), will be up to par here soon but their js engines are going to require good hardware and that's not always going to be there.
Silverlight is a good option but it's not as well supported as Flash. This is why flash will still be around. The next version will support video controllers. It' called Project Mole hill and you can check out my SO question here.
If you want to make super simple games without good graphics try out one of those services you suggested. impact.js is $100, the others look free. In the future we will be able to use node.js to handle request with servers, but in the meantime Flash is certaily the way to go!.
I would much much much rather use javascript but after you start coding and realize the limitations compared flash will make your application standout.
Then for mobile devise, iPad, iPhone, Android, etc.. If you really think your audience is there build the game in the their language. It's more epensive and and harder, but Objective C, Java, they are much faster than HTML, JS, CSS etc...

I did some trial runs with YUI3, Burst engine & Raphael for SVG animation - everything seemed to run well; YUI's dragdrop module even detects the same drag operations on Mobile without adding a single line of code.
I can only imagine that if I had the time, a YUI3 instance available on a Node.js server with Raphael SVG animation would be my choice. You could drop the SVG aspect and use more standard graphic techniques, or perhaps serve up alternate quality graphics for those User Agents with fewer testes. Maybe it could be that your alternate quality version is just another implementation of your game engine - and you might choose to develop games using non-SVG anyway.
Just thoughts mostly, that doesn't help with your real-time IDE debugging...

impact.js has a great community and documentation. It is well worth checking out. I believe iosimpact.js is part of the package (although beta???) allowing for the development of native games for the iphone/ipad.

Yes, indeed you will lose a large user base. But how relevant that user base will be to you will depend on what your target is. Every-day-RPG players are much more likely to have the latest browser than Sunday-Morning-Sudoku users.
Give Eclipse + Web Tools + Aptana a try. It worked really nice for me.
No experience there.

There are certainly people out there who think that HTML5 is going to replace flash in online games. Here is an HTML/Javascript based engine that I heard about few days ago
http://www.youtube.com/watch?v=_RRnyChxijA
I haven't actually used it but it looks really promising and It's designed for similar set of requirements that you've put. It lets you design 2D / 2.5D ( isometric projections ) games. And it does look promising.

Why is it acceptable to expect that Flash will be available/enabled, but not JavaScript?

It doesn't take long when surfing the web to observe the general consensus that Flash is an expected standard, that it's okay to say "If you don't have Flash, my website won't work." Yet in the same regard, JavaScript is expected to degrade peacefully if the user does not have it enabled.
I personally favor the "HTML5" approach, in opposition to Flash, due to the poor performance Flash brings to Mac OS X and Linux
The overall outlook of the Flash way vs. the JavaScript way seems like the biggest challenge to me in Steve Job's prediction of HTML5 overtaking Flash, and I personally haven't seen any sign of change.
Am I missing something?

HTML5 will probably not kill Flash. Although I'm an Actionscript 3 developer, I have little love for Adobe and if anyone is going to kill Flash, I believe it will be Adobe themselves by failing to adapt.
Web standards are great but inevitably changes take for ever.Solutions developed by smaller entities can implement changes and adapt faster. Look at how JQuery changed the perception of Javascript. Most people have already forgotten that until recently there was very little love for Javascript, which is probably where the degrade gracefully attitude comes from.
The consensus is now to complain about Flash , the real shame is what Adobe has done with it , or more to the point hasn't done to improve it. I agree with Steve Jobs on that one, Adobe are either lazy or misguided. In any case totally inefficient.
In my view there's nothing wrong with a plugin, provided it works as expected and with a penetration above 90% , Flash has/had the potential to become a standard itself... in another world that is.

You're talking about almost entirely different groups of people with very different worldviews. That's why they say two different things. Very few people are both gung-ho Flash fanatics and slavish adherents to progressive enhancement.
For the people who support Javascript, one of the big reasons many do so is that it's an open standard with free implementations that is accessible to anybody, not just those favored by Adobe. This feeling that Web content should be available to everybody on the Web also makes them hostile to Javascript that takes the same "My way or the highway" stance that led them to reject Flash.

It's not OK to say either of those, in the general case. However for some it's acceptable to give up on having a working site for some percentage of users.

It depends on the kind of project you are developing for.
It's only safe to assume the user will be able do interact only with the HTML (that's why it's a good idea to hijax your form instead of assuming the user will be able to run your ajax function)
As for FLASH I aways assume it will be unavailable to a small be considerable group of users (iphone, and ipad user won't be able to interact with your flash)
So basically, when developing a portal I assume that:
The user browser will be able to
display HTML
There's a great probability that the user's browser will be able to interpret javascript
There's a considerably smaller probability that the user will have the flash plugin
My rule of thumb is: If you have to have flash at all use it for non-important stuff. All important stuff should be able to work fine with just HTML

The reason is because Flash has a penetration of around 99% of all internet connected computers, and acts exactly the same across the board. Flash has many features which are not replaceable (until very recently, thanks to HTML5 and better JavaScript implementations) While JavaScript implementations are all incomplete as well as varying in between browsers.
I'm not a flash developer, but I'm guessing there would be different methodologies too. The whole mantra of modern web development is a sort of additive synthesis, so you start with something basic, then work up from there, building up features as you go along.
The real reason is that if you use flash on your website, you probably don't give a toss about things like accessibility and other minor concerns.
JavaScript developers are also much nicer people.

Typically JavaScript is used to support basic but important operations, and being important goes hand in hand with high usage frequency, large audience, possibly business critical. Thus it is important that they require "peaceful degradation".
Flash tends to be used for splashy stuff, like games, heavy UI apps (like paint style programs). These tend to be less important and so less reason for them to degrade peacefully.
For example, I can see the Flash part of Google's analytics site making way for HTML5 in the future. It is suited to it. But something like Google's street view I see no real reason to go down the HTML5 route for it (although I suspect they still might).

Framework/libraries for a browser-based game

I am currently half-decided to use Kohana + Zend as needed for the PHP part. What I would need next is an excellent base for JavaScript code. There are a bazillion of contenders here and choosing isn't exactly as easy as with PHP.
I would need practically everything from form posting and retrieving results to skinnable widgets and animations. For this reason using multiple libraries will probably be a must, as no one framework can do it all. The requirements I have would be this (initial list):
Good browser support. WebKit-based is hardly an issue and Firefox 3+ is good. However, I'm looking at you Internet Explorer. IE 6 can be ditched, seriously, but 7+ support is needed.
Good performance. While WebKit has had a stupidly fast JS implementation for quite a while (and Chrome even before), Firefox has only recently got TraceMonkey and don't even get me started on Internet Explorer. While it is true that you can't do much about IE as anything will be slow, I don't want to try running Chrome Experiments in the others either.
Excellent support. This is a total must. The better the support, the more inclined will I be towards a library.
I am currently looking into jQuery as it is a very neat library, but the quality of plugins is questioned by some. Processing.js looks extremely promising, but IE does not support canvas, thus something has to be done about that and I am not sure how it could be replaced.

Go with a known library that is used by many sites. This will ensure all 3 of the points you have mentioned.
Personally, I would go with jQuery for these above reasons:
Great cross browser support
Good performance, as it is a thin api layer
Excellent support. Good documentation, loads of other devs

Although jQuery seems to be the most used library these days, there are other very good candidates as well.
One of them are YUI Library.
YUI has excellent documentation, and support. And the source code is really good.
YUI is developed by Yahoo!, where Douglas Crocford is architect (the author of JavaScript: The Good Parts, and the man behind JSON). Yahoo! is well known for their focus on JavaScript development.
YUI has good browser support and is fast and robust.

If it's war simulation and you have custom objects that you want to animate beyond the simple CSS effects and animations, then canvas tag is your best bet. It's as close as you can get to Flash but much more smoother. Processing.js looks really good for manipulating the canvas.
If that's the core component of your game, then I see the other libraries as adjunct to Processing.js that can be scrapped out without any deep commitments. That said, jQuery is great if you're dealing heavily with the DOM. It has really good support and community. MooTools is highly modular and has been traditionally strong with animations. YUI is a great library too, but a little verbose for my taste. Thought, Yahoo has made heavy changes with v3 to fix that. And a bunch of other libraries, that I don't use at all.

Dojo is a great library for writing web applications; however, never having written a game, I'm not sure if it is well suited for that sort of application. I must warn you though that the Dojo documentation is crap. Absolute crap. On the other hand, things like dojo.hitch, dojo.require, and dojo.partial are absolute joys.
I would try to avoid using cross-cutting libraries (like Dojo+jQuery) as much as possible. There's not really a good reason to do it and will create bloat and confusion in your application from day one.
That said, using multiple, non-overlapping libraries does make sense for a project like this. You might want to look into using Processing.js for visual needs and either Dojo or jQuery for your core.
Some other things to consider. Targeting IE, even IE8, for JavaScript game development is a bit ridiculous because of its slow performance and lack of canvas support. Also, according to John Resig, developing games in JavaScript is hard.
Have you considered being a pioneer (wink) and trying something out in 03D?

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.