I was doing a research about HTMl5 and This 2 comes out. One call Modernizr and the other one is Boilerplate. I want to know:
1.What is the different between Modernizr and Boilerplate?
2.Is it possible to run those together?
Modernizr is a feature detection library: it contains a range of tests you can use to determine whether a client supports various HTML5/CSS3 features. This allows you to use the standard features where available and fall back on hacks or shims when necessary.
Boilerplate is a collection of 'best practices': a CSS reset, some server config and so on, all with good sound defaults for HTML5 development.
You can and should use both in your HTML5 projects.
Related
In the field of RIAs, I've read tons of comments stated that the discussion about Silverlight vs JavaFX vs Flash vs HTML5 is outdated and the winner is HTML5.
Since I am a programmer (not a designer) but never used any of the technologies above and I have no time to learn all of them to compare, I want to ask the following:
1) With HTML5 we continue to only have interpreted JavaScript, or we can use more powerful languages that generates compiled code (some kind of MSIL or bytecode inside <object> ... </object> tags)?
2) Does HTML5 hide portions of our code from unwanted viewers (like Java applets and ActiveX did in the past) or the option "View - Source Code" continues to show all of our work?
3) HTML5 need some kind of runtime or all the work is done by the browser?
There is a bit of a fundamental problem with your question in that HTML5 is not really a thing. It's hard to compare it to Java or Flash, which are programming languages. It is possible to create interactive applications using HTML and JavaScript without using any of the features of HTML5. This seems to happen a lot, but for simplicity these are often referred to as HTML5 applications -- especially by non-technical people.
1) I would say that JavaScript can be as powerful as the other compiled languages you talk about even on a webpage -- especially with the power of <canvas>. You have found that HTML5 has won for a reason. In my opinion, it can do what the others can do and is simpler to implement.
There is nothing that forbids you from including Flash objects of Applets alongside JavaScript, though, and they can even interact.
2) There is nothing that prevents all of your HTML/JavaScript from being downloaded in the browser and viewed in plain text, although it can be obfuscated with tools such as Uglify.
It's also possible to download and decompile swfs and jars from a web interface, so compiling does not necessarily offer you a lot of protection anyway. Your code would be protected by Copyright (at least in the US) and you could use a license the MIT license too.
3) All the work is done by the browser. The client will only need a browser to run your code, but some browsers do not support some features you may want to use. This especially applies to older browsers.
There are a ton of frameworks and libraries out there for creating rich HTML/JavaScript applications, but these are just are mostly just JavaScript files.
HTML5 is a brand and trend. In silverlight/flash/html battle HTML must be the winner. Because browsers can't progress fragmentary. Is it true then some part of features developing in browser plugins, some part in browsers. For strong and fast progress always, at the start, needs the vector. In redefining web in our life such vector is HTML5. HTML5 is not a language, it is the set of capabilities, such video, music, webgl, geolocation, semantic essences and more and more only from browser. And we can't speek here about HTML5 like a language.
All your questions are about javascript.
Want bytecode inside <object> ... </object>? Use Chrome Native Client.
Want to hide your code? Use any obfuscator.
Modern javascript engines has just-in-time compilation. And there is the "subset" of javascript like asm.js which is just 2x slower then C++.
My question is borne out of my confusion on (still incomplete, with existing features still evolving?) HTML5 support in different browsers, all the resources available on how to implement existing features and simple practicality.
1) How do you go about implementing HTML5 only features in your web-site? Do you do some kind of browser/version check at first access and notify user that he should install some other browser (though cumbersome and uncomfortable to the user)?
2) Is there a way to check availability of HTML5 features in user's browser dynamically (version X of Chrome does not support it, next might and it should work then) and easily without some significant computing overhead and significant coding?
3) Assuming the answer to 2) is yes, what to do about changes in spec that might occur in the future? (The check would say fine, the browser does implement e.g. WebGL, but my implementation would run into errors as there would be some changes between the spec I had used during development and spec that was enhanced in the W3C process and would make my implementation incompatible)
to start using html5, make sure that the first line in your html is <!doctype html> this tells the browser that you are speaking in the language of html5
this google-hosted html5 shiv helps to ensure that the new html5 tags work in older browsers and as someone already pointed out, you can and dare I say it, should use modernizr to test the browser's CSS rendering capabilities
This is just something you need to keep abreast of yourself unfortunately ;) The way I look at it, if the spec changes in a big way, lets say they decided to remove the <article>, there will be a lot of chatter online and you are likely to read about it
I recommend that you take a look at html5-boilerplate. It's a A rock-solid default for HTML5 awesome.` It's a starter kit with template html, CSS and Javascript files for building an html5 website.
This is useful: http://www.modernizr.com/
As for 3: I think that's just a risk of using a technology before it's out of spec.
Take a look at modernizr, it's a js library that will do various feature detection tests and gives you a way to query whether or not to use a particular feature. You can also load specific js files with modernizr.load based on whether a feature is supported in the browser.
http://www.modernizr.com/
Tutorial: http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/
I know very little HTML or web dev, but I would like to write an
HTML5 app with a fairly complex UI. Is there a framework that stands
out among the rest for this type of job? Do I need a framework; or can
I just do everything in straight HTML+CSS+JS? And what about GWT?
Thanks!
As a general HTML5 starting template, Boilerplate is always a good choice.
It will optimize and chain all your scripts and CSS files, as well as your HTML code and images, it also comes with useful tools like Modernizr.
If you are looking for JavaScript libraries, YUI is a very good library when it comes to UI, though maybe a little more complicated than jQuery or jQuery UI at first. I found it better than jQuery UI, and can work together with jQuery anyway.
EDIT
You may also be interested in Ext JS. Looking at the demo it provides, seems really like a powerful library with many ready to use UI widgets. Never used it though, and looks like it only offers a commercial license.
I suggest you to use Html5-boilerplate.
Download from github
Video Tutorials from author :
http://www.youtube.com/watch?v=qyM37XKkmKQ
http://www.youtube.com/watch?v=OXpCB3U_4Ig
GWT is a good way to go for a complex web application, particularly if you're familiar with java but not javascript. GWT now provides support for HTML5 features such as offline storage, canvas, audio, and video, although it's possible to use any HTML5 features whether GWT provides specific Java classes to support them or not (I implemented the offline storage feature in one of my apps before it was part of GWT). Using GWT will mitigate many of the browser compatibility problems you will encounter with straight HTML+CSS+JS. Although you write in Java, it's still important to be familiar with HTML, CSS and JS, since the java is compiled to js.
Both seem to be used in web development circles, see e.g. HTML5 Cross Browser Polyfills, which says:
So here we're collecting all the shims, fallbacks, and polyfills...
Or, there's the es5-shim project.
In my current project we're using a number of these, and I want to stick them all in the same directory. So, what should I call this directory---shims, or polyfills?
A shim is any piece of code that performs interception of an API call and provides a layer of abstraction. It isn't necessarily restricted to a web application or HTML5/CSS3.
A polyfill is a type of shim that retrofits legacy browsers with modern HTML5/CSS3 features usually using Javascript or Flash.
Answering your specific question, call your directory shims if you want to keep the directory generic.
Shim
If you are familiar with the adapter pattern, then you know what a shim is. Shims intercept API calls and create an abstract layer between the caller and the target. Typically shims are used for backward compatibility. For instance the es5-shim npm package will let you write ECMAScript 5 (ES5) syntax and not care if the browser is running ES5 or not. Take Date.now as an example. This is a new function in ES5 where the syntax in ES3 would be new Date().getTime(). If you use the es5-shim you can write Date.now and if the browser you’re running in supports ES5 it will just run. However, if the browser is running the ES3 engine es5-shim will intercept the call to Date.now and just return new Date().getTime() instead. This interception is called shimming. The relevant source code from es5-shim looks like this:
if (!Date.now) {
Date.now = function now() {
return new Date().getTime();
};
}
Polyfill
Polyfilling is really just a specialized version of shimming. Polyfill is about implementing missing features in an API, whereas a shim wouldn’t necessarily be as much about implementing missing features as it is about correcting features. I know these seems overly vague, but where shims are used as a more broader term, polyfill is used to describe shims that provide backward compatibility for older browsers. So while shims are used for covering up old sins, polyfills are used for bringing future enhancements back in time.
As an example there is no support for sessionStorage in IE7, but the polyfill in the sessionstorage npm package will add this feature in IE7 (and older) by using techniques like storing data in the name property of the window or by using cookies.
From what I understand:
A polyfill is code that detects if a certain "expected" API is missing and manually implements it. E.g.
if (!Function.prototype.bind) { Function.prototype.bind = ...; }
A shim is code that intercepts existing API calls and implements different behavior. The idea here is to normalize certain APIs across different environments. So, if two browsers implement the same API differently, you could intercept the API calls in one of those browsers and make its behavior align with the other browser. Or, if a browser has a bug in one of its APIs, you could again intercept calls to that API, and then circumvent the bug.
Citing Axel Rauschmayer from his book Speaking JavaScript:
A shim is a library that brings a new API to an older environment, using
only the means of that environment.
A polyfill is a shim for a browser API. It typically checks if a browser
supports an API. If it doesn’t, the polyfill installs its own
implementation. That allows you to use the API in either case. The
term polyfill comes from a home improvement product; according to Remy
Sharp:
Polyfilla is a UK product known as Spackling Paste in the US. With that in mind: think of the browsers as a wall with cracks in it. These
[polyfills] help smooth out the cracks and give us a nice smooth wall
of browsers to work with.
A fantastic article written about this from a few years back that explains this well:
What is a Polyfill?
In the article the (2) are simply contrasted as such:
Shim: a piece of code that you could add (i.e. JavaScript) that would fix some functionality, but it would most often have it's own API.
Polyfill: something you could drop in (i.e. JavaScript) and it would silently work to mimic existing browser APIs that are otherwise unsupported.
Polyfill is just a script that will check a certain API existence in the browser, ok?
If the API doesn't exist in the browser polyfill(which is a simple script) will act something like this:
for example, I'm gonna use Bluetooth API in the browser and I know some browser doesn't have such API so I will write something like this in order to check my API existence:
if(!navigator.bluetooth) { // write polyfill here }
Shim is a script as well which mostly provided as a plugin or library and how it works?
Actually, it will override an already existing API and implements a different behavior in order to support new APIs in older browsers.
It worth noting that Shims mostly are used for backward compatibility.
Or do you know of anyone working on one? I've been checking all the stuff you can do with HTML 5 here and some other sites and is amazing. I think such a big library should have some IDE with intellisense and easy documentation (like when you press F1 on Visual Studio while a symbol is highlighted) and all that stuff. And if there is not then I should probably start working on one :).
Most of known IDEs and their latest version, like Netbeans, Eclipse, Dreamweaver, support natively HTML5. You can find more info and pick one according to your preferences.
There are numerous HTML 5 IDEs, it's important to not necessarily separate current web technologies with HTML5 as they are really are very close to being one and the same. For example, the latest version of Adobe's tool offer support for HTML5, as well as other IDEs such as Aptana. Unfortunately, the HTML5 spec is not done yet so there will be discrepancies between browsers, which a builder could work around, but will put a lot of onus on you.
Alternatively, there are numerous client and server-side frameworks that abstract HTML5 and some of its features, each of these have varying levels of support, a builder, and intellisense. For example, I'm a co-founder of the NOLOH development platform (http://www.noloh.com), which abstracts away browser differences and supports HTML5 transparently to you the developer, allowing you to concentrate on your application and functionality without worrying about the plumbing. We also have what's known as "code stubs" that you can add to any IDE most IDEs and get intellisense/auto-complete functionality. We also have a visual builder in the works that should be out relatively soon.
Whatever you pick, just make sure you're comfortable with it, but you definitely don't want to re-invent the wheel here.
You should definitely try HTML5 Builder.
Try this, HTML5 Boilerplate
if you are looking for something that builds mobile sites or ads html5 builder, maybe you could try http://mobdis.com.