IE10 Preview

Microsoft today has announced the availability of the second platform preview for its upcoming browser, Internet Explorer 10. The first platform preview was released in April. This new platform preview contains the same HTML5 engine seen in the recent public Windows 8 demos!

IE10 continues IE9’s precedent of enabling Web applications to do more in the browser without plug-ins. It also continues the pattern of offloading work to the parts of a PC that are best suited for them, like the GPU for graphics, and different processor cores for background compilation of JavaScript. Microsoft has been working on tying together Internet Explorer 10’s Trident rendering engine with Windows 8. Microsoft is expecting developers to use HTML5, Javascript, and CSS to build new immersive apps for Windows 8 and this new browser is yet another tool in doing so. Keep in mind that this platform preview has no toolbar, no address bar, and none of the regular menus.

You can read the full change list in the IE10 developer guide: here

Download Internet Explorer 10 Platform Preview 2: Internet Explorer 10 Platform Preview 2

SharePoint 2010 and JQuery

Recently somebody wanted to know how they could streamline activity on a site starting with reducing the overall page refresh count. Put simply, jQuery really is a lifesaver for this stuff. Combined with SharePoints web services and SPServices there is a huge amount that you can do without having to resort to writing any C#. The challenge, as with most things, is how to get started. Below are some simple examples of functional code that will work if you copy and paste correctly.

Example 1: Getting items from a list, in this case called “TestList1”, and output the raw response into a div tag called “demodiv1”
$(document).ready(function() {
$().SPServices({
debug: true,
operation: “GetList”,
listName: “TestList1”,
completefunc: function (xData, Status) {
var out = $().SPServices.SPDebugXMLHttpResult({
node: xData.responseXML
});
$(“#demodiv1”).html(“”).append(“This is the output from the GetList operation:” + out);
}
});
});

Example 2:  Getting all sub sites from a URL, in this case called “http://testserver/webapp1”, and output the raw response into a div tag called “demodiv2”
NOTE: The URL for the site can be defined in two ways, both shown. The one that is not commented is persistent – therefore rather useful!

$(document).ready(function() {
$().SPServices.defaults.webURL = “http://testserver/webapp1”;
$().SPServices({
debug: true,
operation: “GetWebCollection”,
//webUrl: “http://testserver/webapp1”,
completefunc: function (xData, Status) {
var out = $().SPServices.SPDebugXMLHttpResult({
node: xData.responseXML
});
$(“#demodiv2“).html(“”).append(“This is the output from the GetList operation:” + out);
}
});
});

Example 3: What kind of data exactly is being returned? Okay so if you have tried the first two examples you will have noted that the data really is kind of raw. Let’s see it in a popup. In this case the same code as above with a difference… Instead of updating a DIV tag we just populate a popup by using an alert.
Note: Play around with alert(“XML=” + xData.responseXML.xml); and alert(“xData: ” + xData.responseText);

$(document).ready(function() {
$().SPServices.defaults.webURL = “http://testserver/webapp1”;
$().SPServices({
debug: true,
operation: “GetWebCollection”,
completefunc: function (xData, Status) {
alert(“Status=” + Status + ” XML=” + xData.responseXML.xml);
});
}
});
});

Example 4: Okay, so now lets take the same data and wrap the title of each returned site in its respective URL inside of a DIV called tasksUL.

$(document).ready(function() {
$().SPServices.defaults.webURL = “http://testserver/webapp1”;
$().SPServices({
debug: true,
operation: “GetWebCollection”,
completefunc: function(xData, Status) {
// now iterate through the results
$(xData.responseXML).find(“[nodeName=Web]”).each(function () {
// for each one found get the title and wrap it with the respective Url
$(“” + $(this).attr(“Title”) + ““).appendTo(“#tasksUL”);
                });
}
});
});

Creating a site tour with jQuery

Sometimes when you build a custom solution end users need a little bit of help, or time, in order to determine where everything is. Grounding them within the actual environment rather than within help pages is the fastest way in my opinion to get them up to speed. A great option is jQuery site tour.

Working either manually or in a timed fashion it highlights predetermined classes with text and images. Tooltips on steroids in a way… To use it, you simply have to add certain class to any elements that you want to describe in the walk-through. E.g. “tour_1″, “tour_2″ would look like:

1 <div class="box left">
2     <h2 class="tour_1">Create a tour>
3     <p>Far far away, behind the word mountains, ...p>
4 >

The following parameters can be set:

  • name: the class given to the element where you want the tooltip to appear
  • bgcolor: the background color of the tooltip
  • color: the color of the tooltip text
  • text: the text inside of the tooltip
  • time: if automatic tour, then this is the time in ms for this step
  • position: the position of the tip

Resources
There is a full article with a functional demo here: http://tympanus.net/codrops/2010/12/21/website-tour/

Browser detection: solving the quandary with a bit of PHP

The browser and its specific version can tell you a lot about your visitors. Not just that they are running OpenSolaris, Windows 7, or Chrome OS but much, much more. It also can help you enable, or more likely disable, certain features of your site, content, or application. Therefore it is more than critical to determine it correctly. It is/should be mandatory.

So what are your options. Precisely three.

  1. Do nothing
  2. Go client side
  3. Go server side

1 is not worth mentioning, 2 is typically performed by JavaScript which leaves 3.

Now leaving aside the potential impact on your caching mechanism/plans/shenanigans option 3 can bring some great benefits without sending the client browser any payload. But if you have to do it yourself it can be a royal pain as browser versions and new products are like beer. Everybody will try a new one but usually not for long. (that may need work.) So what to do? Cue Browser.php


Browser.php is a PHP class that helps this process by collecting data about a visitor’s browser such as:

  • platform used
  • browser
  • browser version

It is very easy to implement.

Typical usage

$browser = new Browser();
if( $browser->getBrowser() == Browser::BROWSER_FIREFOX && $browser->getVersion() >= 2 ) {
echo 'You have FireFox version 2 or greater';
}

Needless to say you must do the usual beforehand such as:
require_once(‘Browser.php’);
and
$browser = new Browser();

Resources: http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/

Smartupdater: A JQuery periodical updating mechanism

I often need to implement some kind of periodical updating functionality from client to server and vice versa. Aka a classic polling mechanism. Smartupdater is a jQuery plugin which simplifies the process of sending regular requests to a server (polling) and handling the responses. I have found it very useful, and easy to work with. It can be started or stopped on any event and the interval of the polling periods can be redefined as well as controlled remotely.

A simple example would be how to display the remote time on a server with a polling interval of 5 seconds. Note that the remote script is returning a JSON format like this: “{“servertime”:”hh:mm:ss”}”

$("#example1").smartupdater({
  url : 'gettime_json.php',
  dataType:'json',
  minTimeout: 5000 // 5 seconds
  }, function (data) {
    $("#example1").html(data.servertime);
  }
);

The returned results can then be displayed in a div tag…

    
      Time on server: hh:mm:ss

Download link: https://code.google.com/p/smartupdater/

JS Library For Image & Vector-Tiled Maps

Polymaps is a free JavaScript library for making dynamic, interactive maps in modern web browsers.

Polymaps provides speedy display of multi-zoom datasets over maps, and supports a variety of visual presentations for tiled vector data, in addition to the usual cartography from OpenStreetMap, CloudMade, Bing, and other providers of image-based web maps.

“Because Polymaps can load data at a full range of scales, it’s ideal for showing information from country level on down to states, cities, neighborhoods, and individual streets.

Because Polymaps uses SVG (Scalable Vector Graphics) to display information, you can use familiar, comfortable CSS rules to define the design of your data.

And because Polymaps uses the well known spherical mercator tile format for its imagery and its data, publishing information is a snap.”

References
PolyMaps: http://polymaps.org/
QuadTiles: http://wiki.openstreetmap.org/wiki/QuadTiles

Still developing for IE6? Get significant CSS3 compatibility with PIE

Seriously? Well you’re sadly, and probably dangerously for your or worse other peoples data, not alone.

Coming to the rescue for the presentation layer at least as security was thrown out the window with the bathwater AND the baby when you decided to stay with 6 – is PIE.

PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties. It is simply attached to an element in the CSS file like: behavior: url(PIE.htc); and adds support (full or partial) for the following CSS3 features:

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

Note that the missing CSS3 properties are under development…

For more info and the actual PIE itself go here: http://css3pie.com/

Javascript transition effects with Blockster

Highlighting your featured content can be quite the challenge. Getting the aesthetics right by pulling the eye in without stabbing it is a valuable skill. A nice tool that you can use when appropriate is Blockster.

Blockster is a Javascript transition effect designed for ‘featured content’ rotators or slideshows. Its underlying concept is to transition between one element to the next block by block. It is highly customisable in terms of how many blocks are involved, whether they fade in or simply appear, whether they appear in order or randomly, and more.

The script gives you full control over how the script behaves, giving you scope to create some pretty varying effects. You can set the number of rows and cols in the block grid, whether the blocks should fade in or simply appear, whether they should appear randomly, in order, etc.

Mitya likes jQuery

Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah – read more

Mitya likes GD

Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah – read more

Lorem Ipsum!

Examples, as always, make more sense than words…so go here for more: http://www.mitya.co.uk/scripts/Blockster-transition-effect-122

Getting started with HTML5: Three steps

Even though it is unfinished standard you can and should get started with HTML5 and it is more easy than you may think…

The new Doctype
Is as easy as it can get. Just replace
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">


 with
< !DOCTYPE html>
< html>
and you’re done. Simple.

Video
The format wars are being fought rather publicly these days and the best  part is that it should have little to no effect on you. The < video> tag is able to hold more than one SRC. So your browser can roll down through the options until it finds what will work. Again, simple. The best place to learn more is here: http://camendesign.com/code/video_for_everybody where they have loads of samples such as:

< !– Video for Everybody, Kroc Camen of Camen Design –>
< video width=”640″ height=”360″ controls preload=”none”>
< source src=”__VIDEO__.MP4″  type=”video/mp4″ />
< source src=”__VIDEO__.OGV”  type=”video/ogg” />
< object width=”640″ height=”384″ type=”application/x-shockwave-flash” data=”__FLASH__.SWF”>
< param name=”movie” value=”__FLASH__.SWF” />
< param name=”flashvars” value=”image=__POSTER__.JPG&file=__VIDEO__.MP4″ />
< img src=”__VIDEO__.JPG” width=”640″ height=”360″ alt=”__TITLE__”
    title=”No video playback capabilities, please download the video below” />
< /object>
< /video>
< p> < strong>Download Video:
Closed Format: < a href=”__VIDEO__.MP4″>”MP4″
Open Format: < a href=”__VIDEO__.OGV”>”OGG”
< /p>

Next up, smarter forms.
Weary of validating if that really is an email address or proper URL in that field? Well now the effort is in the lap of the browser. Again, they are really easy to implement. Examples would be

Email: < input type=”email”>
URL: < input type=”url”>
Number: < input type=”number”>
Phone: < input type=”tel”>
Color picker: < input type=”color”>

Slider: < input type=”range” min=”0″ max=”10″ step=”2″ value=”5″>
etc.

Simple, no? Failure is graceful too as the fall back is to text.

Placeholder text for any of these is just as easy!

< input type=”email” placeholder=”Your email address”>

And again, the browser does the work by responding to the cursor by clearing the field automatically. 

And even better! If you need to make it a required field just add “required.”

< input type=”email” placeholder=”Your email address” required>

What if your requirements are not listed? You can build / define your own. For example if you need a credit card field – which would consist of a string of numbers ranging from 13 to 16. Your field would contain this:

 pattern=”[0-9]{13,16}”>

Needless to say there is an awful lot more such as the canvas tag and all of its potential badness and goodness but this should get you started! If you are interested in the Canvas tag there is a good cheat sheet here: http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html