Nice…after many years of trying to get coding students to understand why one can’t directly access cross-domain resources and Web security students to understand its implications, the fourth IE10 Platform Preview features, amongst other things, support for CORS (cross-origin resource sharing). The full highlight list of HTML5-affected updates to IE can be found here but I am particularly gung-ho for the CORS and the video text captioning (which was always difficult in the past). It’s not that CORS wasn’t available in other browsers, particularly assisted by the including in the recent jQuery builds, but at least this sets the stage for better cross-browser compatibility in HTML5 applications.
Here’s a post on MSDN by Rob Mauceri with more details…
Having been in the industry for (eesh) 17 years+ now, I still remember (and regularly lecture on) the issue of bandwidth consumption and preservation and how poor performance is related to it. jQuery, which I love, is no pipe-hog by any stretch of the imagination, but it still comes with a bit of bloat attached in the form of methods you don’t need or use most of the time. Enter jquip, or jQuery-In-Parts, a stab at minimizing and modularizing the jQuery library. For more info and download, go to the jquip GitHub.
I’ll let you check out the rather extensive method and event list, but be assured that the things we really like about jQuery – the $(selector), the quick data methods, and several events for data handling – are all there. Plus there’s several plugins to tack on more methods and events without the total KB package jQuery sits on right now.
On the flip side, if we could just get everyone to DL the .js from the same source URL (such as //ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js) and reinforce caching, we wouldn’t have as much problem anyway.
[Original article by Jason Corns is a freelance web developer and full-time GUI developer for Systems Alliance, Inc., specializing in usability for all audiences.]
hough the methods used to gather website traffic statistics call into question the validity of the stats themselves, the fact is that some of your website’s visitors will have JavaScript disabled.
You could divide your traffic sources into four broad categories: search engines, mobile visitors, visitors using screen readersand visitors who have JavaScript turned off.
When planning your information architecture and design, you must figure out how to deal with these special groups.
I have assembled a few recent real-world scenarios to find clarity on the issue.
Continue Reading →
Not every HTML5 or CSS3 feature has widespread browser support, naturally. To compensate for this, enterprising developers have created a number of tools to let you use these technologies today, without leaving behind users who still live in the stone age.
The good news is that, except for Internet Explorer, you can create more semantic markup by using the new HTML5 elements — even in browsers which don’t officially support them. Just remember to set the correct display mode: block. The following snippet should reference all necessary elements:
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display: block;
}
The article goes on to detail HTML5 Shiv, Modernizr, Selectivizr and other great tools that you can use to move into HTML5 and CSS3. Enjoy!
Original article by Bruce Lawson and Remy Sharp for Smashing Magazine
You can’t escape it. Everyone’s talking about HTML5. it’s perhaps the most hyped technology since people started putting rounded corners on everything and using unnecessary gradients. In fact, a lot of what people call HTML5 is actually just old-fashioned DHTML or AJAX. Mixed in with all the information is a lot of misinformation, so here, jQuery expert Remy Sharp and Opera’s Bruce Lawson look at some of the myths and sort the truth from the common misconceptions.
Once upon a time, there was a lovely language called HTML, which was so simple that writing websites with it was very easy. So, everyone did, and the Web transformed from a linked collection of physics papers to what we know and love today.
Most pages didn’t conform to the simple rules of the language (because their authors were rightly concerned more with the message than the medium), so every browser had to be forgiving with bad code and do its best to work out what its author wanted to display.
In 1999, the W3C decided to discontinue work on HTML and move the world toward XHTML. This was all good, until a few people noticed that the work to upgrade the language to XHTML2 had very little to do with the real Web. Being XML, the spec required a browser to stop rendering if it encountered an error. And because the W3C was writing a new language that was better than simple old HTML, it deprecated elements such as <img> and <a>.
A group of developers at Opera and Mozilla disagreed with this approach and presented a paper to the W3C in 2004 arguing that, “We consider Web Applications to be an important area that has not been adequately served by existing technologies… There is a rising threat of single-vendor solutions addressing this problem before jointly-developed specifications.”
Four obviously talented dudes with much more time on their hands than I can seem to muster have a very slick and ingenious means of performing “radical Web Typography.” For those who don’t already know, typography is one of the new “IT” things right now, particularly since the availability of importing TTF typefaces and now Google Font Directory (and other competing service providers).
In any event, the gist of it is that in order to style individual characters within a single word or phrase, designers were often stuck having to do something like this:
<h1> <span>S</span> <span>o</span> <span>m</span> <span>e</span> <span></span> <span>T</span> <span>i</span> <span>t</span> <span>l</span> <span>e</span> </h1>
Which is a real pain – it’s a lot of code and a lot of thinking just to inject the style. Plus it makes future change very tedious (for example, what if each letter was downsized 1px – what if you change the word or skip one class ordering?).
Lettering Dot JS is a jQuery plugin (fortunately I use jQuery more than most of the other frameworks at this point) which extends a single class across each individual letter, so instead of the code above, you would have:
<script src="path/to/jquery-1.4.2.min.js"></script>
<script src="path/to/jquery.lettering.min.js"></script>
<script>
$(document).ready(function() {
$(".fancy_title").lettering();
});
</script>
<h1>Cool Title</h1>
Which would result in (output):
<h1> <span>C</span> <span>o</span> <span>o</span> <span>l</span> <span></span> <span>T</span> <span>i</span> <span>t</span> <span>l</span> <span>e</span> </h1>
There are also .word# and .line# classes for word and line wrapping, plus kerning improvements, and reportedly works well with WordPres.
Check out the release page on Dave Rupert’s blog and the Github distro page.
Great job!
PS: And I learned a new term – FOUT: Flash of Unstyled Text. We see it all the time with the new, well styled typography, guess I just never thought anyone would put a term to it. Dave’s post has a good explanation but an even better best practices commentary.