Is the Modernizr required by jQuery, Bootstrap? I seen this nuget package in many MVC.ASP 4.7 projects and just tried to create a new project where it is automatically added. I never used it and I wonder if I can just remove it?
Modernizr is a small, simple and open-source JavaScript library that helps us to take advantage of emerging web technologies; HTML5 and CSS3 maintain the look and feel for older browsers that may not yet support these new technologies.
If you create an ASP.NET MVC Web Application, you get this library by default and by expanding the "Scripts" folder.
Modernizr does three things basically.
It adds classes indicating feature support.
It allows to run feature detection to decide whether to run a script.
It injects html5shiv for allows old browsers to understand HTML5 elements.
If you don't use any of these features, then there's no point in including Modernizr at all.
I know similar questions have been closed for it being "impossible to answer objectively", but stick with me here.
I built a prototype in Adobe Flex, they (customers) liked it. Everything was fine until they later told me that iPads / iOS needs to be supported too.
I checked out Adobe's Packager for iPhone. We're evaluating that and we will know if it works out in a couple of days. (We need to get through Apple's red tape and certificates raj so this angle is delayed by a few days!)
There is a growing voice for using HTML5/Canvas as a technology platform itself. And despite being quite proficient in Flex, I think this makes sense.
I'm in need of a HTML5 library that can:
Render "widgets" i.e. containers with forms and components (this should be easy and possible using POHJC - Plain old HTML, JavaScript and CSS ;-) )
Provide a Tree like control for laying out some data
Provide a Canvas where data structures can be represented as basic shapes
Provide drag and drop capabilities between Trees, Buttons and Canvas
Provide some sort of Tab Navigator container (I guess JQuery works here)
Interact with back-end services (JSON/XML calls will be okay, but mapping directly with back-end entities will be awesome!)
Renders on latest versions of major browsers, Android OS and iOS (WebKit for mobile?)
Am I asking for too much?
I'm ready to give JQuery & JQuery UI a try.
I looked at Sencha / ExtJS but it seems we need to maintain two code bases one for normal browsers and the other for mobiles (is that correct?)
Are there any other JS libraries worth trying out?
My concerns areas are
Single code base, I don't want to suggest to them that multiple code bases for the client need to be maintained. That's a last resort option and would lead to complete ruling out of HTML5 with Flash apps and native apps being developed.
Canvas capabilities - I don't want to work with raw canvas and shape tags. This too is a last resort option. Is there any abstraction available?
Integration with back-end services, obviously I need some capability here!
Help me out. Communitywikify this if required.
Thanks,
Sri
How about trying Vaadin?
http://vaadin.com/comparison
I do construe its irrelevant to your question, but still this framework can help in great deal. I still use Flex and PHP as main base for many application, but actually fell in love with Vaadin and started using it for my new projects.
Grant Skinner the flash guru is working on a html5 libary. It has some features you requested. It is still in development.
The new Canvas element in HTML5 is powerful, but it can be difficult to work with. It has no internal concept of discrete display elements, so you are required to manage updates manually. The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.
The libary is called easeljs, you can find it here : http://easeljs.com/
For the normal html and css manipulations without html canvas JQuery is very easy to learn.
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...)
I wrote a simple Qt application (Windows+Mac) that uses QtWebKit to render
a web site inside a window.
But I already saw differences in layout and behavior between our app and Chrome
(that uses WebKit as well), e.g.:
- different fonts are displayed for the same web page
- an html anchor link with "javascript:someFunction()" is not working
Is there somewhere a summary list of all such differences (not the entire QtWebKit bug list)?
Also: is there a way to use a WebKit version more similar to Chrome in my application?
WebKit requires the drawing functions to be provided by the platform. Chrome uses a different graphics/drawing library: skia and QtWebKit uses Qt as a the drawing engine.they're
Both skia and qt provide their own widgets which are used in drawing.
Differences may come out of different painting system. About javascript... Just asking, but did you enable JavaScript support in your webkit app? I'm not sure if its enabled by default
Chrome uses it's own JavaScript engine, V8, which was a lot faster for some time. However, WebKit have also implemented a very fast engine called SquirrelFish (and the JIT'ed Extreme variant). Which one is faster is debatable - I recalled WebKit's being faster, but the difference is the order of miliseconds and it depends on a lot of factors - in short, they're both just as fast.
You can load the site http://html5test.com/ on your Qt WebView.
m_d->m_webView->setUrl(QUrl("http://html5test.com/"));
*If you are using the sample HTML project from Qt Quick.
This page will give you a score for the browser and detailed list of supported features.
You can also compare with other browsers, which is very useful.
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...