http://www.sitecrafting.com/blog/html5-1/ en-us Wed, 16 May 2012 23:41:55 PDT Wed, 16 May 2012 23:41:55 PDT SiteCrafting.com GearBox 1.1 (beta) http://www.sitecrafting.com/blog/html5-mark-element/ While HTML5 has yet to achieve wide spread browser support, there's no reason why you can't start using some of the features described in its specification today. Many of the features described are putting words to what people are already doing, for example giving input elements placeholder text, or the introduction or the email and date types.Another useful new element in HTML5 is mark. The mark element is used do denote "a run of text in one document marked or highlighted for reference purposes, due to it's relevance in another context." Instead of waiting for global adoption and support for the mark element, we can start using it today, with just a simple PHP function.Example of marking or highlighting words in action:While the mark element is not technically supported yet, most browsers are clever enough to treat elements that they don't recognize nicely, rather than refusing to acknowledge them at all. If we want to highlight a set of words or a string with in a block of text, eventually the end result should look something like this screenshot:Using a simple PHP function, we can replace all instances of the first string (Accountants - Certified, Public) with either wrapping mark elements, or a span with class="mark" if you have to support all browsers as well. By adding an optional parameter to flag HTML5 support, we can switch between these options on the fly.function mark($subject, $search, $html5 = true) { if($html5) { $subject = str_replace($search, '<mark>'.$search.'</mark>', $subject); } else { $subject = str_replace($search, '<span class="mark">'.$search.'</span>', $subject); } return $subject;}Then just a small snippet of CSS allows us to highlight the new marks to appear distinct from the rest of the text:mark, span.mark {    background-color: #cfc;    padding: 2px;}By using clever coding and a holistic view, we can begin using HTML5's best features even before they are supported by browsers. Tue, 03 Aug 2010 11:52:00 PDT http://www.sitecrafting.com/blog/objects-params-embeds-oh-my-1/ The newest Firefox update (3.6.9) sees object tags as a security threat. That means bad news for Fx users that use an outside source, such as a popup window, to embed video or script into their site content. Since the recent Firefox update (3.6.9), a strange thing happened to our video and script embedding tools. Firefox has deemed the object tag a security threat and will now strip all the tags commonly used for embedding scripts and video inside of a rich text editor (RTE). That includes the following tags: object, param and embed.We did find a small workaround for up-to-date Firefox users to embed objects. Since the stripping process is somewhere in the submission process of our popup window inserting the script, we can force the object tag in the source. Basically, the short term solution is to embed the code in "view source" mode of any RTE and stay away from any fancy, external interface for more easily inserting these elements. But never fear, a long term solution is in the works when we can gather more details about this update.Perhaps this is Firefox's way of nudging developers to use more of the HTML5 specific tags, like the video tag. Are we going to find some of our other legacy tags disappearing in the near future? What say you?Link to Mozilla.org Security Advisory 2010-61 Fri, 10 Sep 2010 16:25:00 PDT http://www.sitecrafting.com/blog/data-default-values/ Before the days of jQuery and HTML5, many tasks required raw JavaScript to implement. One of the most common was giving a text input box a default value. This is a useful design technique to label an input without taking up extra space. When it is done correctly it can give a clean feel and flow to your forms. Here's how we used to accomplish this task with a search bar. <input id="search" type="text" value="Search..." onfocus="setDefault(this)" onblur="swapDefault(this)"/>function setDefault(elem) {    if(elem.defaultValue === undefined) {        elem.defaultValue = elem.value;    }    elem.value = '';}function swapDefault(elem) {    if(elem.value.length === 0) {        elem.value = elem.defaultValue;    }} jQuery 1.3 added a useful function called .data() that saves data along with elements using an internal data store. This helps prevent memory leaks when the element is removed, and cleans up the code. It was quite useful for storing state data, related jQuery elements, or information about context. Below is an example of a text input box that saved the default state in the .data() function for our search bar. <input id="search" type="text" value="Search..."/>$('#search')    .bind('focus', function () {        if($(this).data('default') === undefined) {            $(this).data('default', $(this).val());        }        $(this).val('');    })    .bind('blur', function () {        if($(this).val().length === 0) {            $(this).val($(this).data('default');        }    }); As you can see, it's pretty simple and we've used similar code here at SiteCrafting for a long time now. While this is very useful, it still has a few issues. Let's say you want to pre-populate the text input bar with something other then the default. This happens regularly in a search bar. What would you do? Well, some super smart people at jQuery noticed that HTML5 has a attribute called data-* (which reads like data-anything or data-star). So they decided to add an extra check if nothing is in the jQuery .data() function. Now, as of jQuery 1.4, that function will also check the data-* attribute when there is nothing cached. So how does this change our code? <input id="search" type="text" value="Search..." data-default="Search..."/>$('#search')    .bind('focus', function () {        if($(this).data('default') === undefined) {            $(this).data('default', $(this).val());        }        $(this).val('');    })    .bind('blur', function () {        if($(this).val().length === 0) {            $(this).val($(this).data('default');        }    }); This change frees up the value attribute to display what ever the last search query was. Now that the default state is just an attribute we can abstract this code a little more. Below, it is part of a live event. You can put this code anywhere during your page load and all inputs with a data-default attribute will get this function. <input id="search" type="text" value="Search..." data-default="Search..."/>$('input:text[data-default]')    .live('focus', function () {        if($(this).data('default') === undefined) {            $(this).data('default', $(this).val());        }        $(this).val('');    })    .live('blur', function () {        if($(this).val().length === 0) {            $(this).val($(this).data('default');        }    }); There are many, many more uses for the .data() function. In the office, we have found it to be incredible for storing state data for shopping carts, drop down lists, and many other situations. It is also a nice alternative to running an Ajax call as the data will be stored locally and therefore might be a faster alternative. Best of all, it uses type inference to return more the just strings. <input id="search" type="text" value="Search..." data-must-have-chars="3" data-must-be-email="false" data-some-obj="{foo: 'bar'}"/>$('#search').data('must-have-chars'); // 3.0$('#search').data('must-be-email'); // false$('#search').data('some-obj').foo // "bar" As for browser compatibility, this code works in every browser supported by jQuery. That includes IE6+, FF2+, Safari 3+, and Chrome 4+. Another point, HTML5 has defined an attribute specifically for default values. It's called defaultValue, and you can read about it over at WHATWG. It's worth mentioning, but since very few browsers have implemented it, jQuery might be your best option... for now. Mon, 24 Jan 2011 10:15:00 PST http://www.sitecrafting.com/blog/humanstxt-1/ Any web developer worth their weight in code will know what a robots.txt file is. But have they heard of a humans.txt file? A group of web developers came up with a really cool idea while working with SEO: Robots have their own text file so why don't humans?What they came up with is a humans.txt file format that allows developers take credit for their work. It is a file that lists authorship (note: not ownership) of a website to give credit to whom ever credit is due. The text file sits right next to the robots.txt file the root of your public web directory. If you are interested in learning the (super simple) format, or just want some more information, HumansTxt.Org has been set up with the basics. This is still a fairly new idea, so we'll see whether it takes off. In this blogger's opinion, I really hope it does! Thu, 10 Feb 2011 13:45:00 PST http://www.sitecrafting.com/blog/input-speech/ Using Google Chrome, you can now use speech to text technology on the web, today. Below is a bookmarklet to enable it on any website.A few months back, Google released a new version of their Chrome Browser. It had a new API that allows any input box to have speech to text as it's input. To try it out, either click or bookmark this link: Enable Speech.Here's the code:(function(){ var e=document.querySelectorAll('input[type=text]') ,i=e.length; while(i--) e[i].setAttribute('x-webkit-speech','x-webkit-speech'), e[i].setAttribute('speech','speech');})()This requires Google Chrome, but may eventually include Firefox and Internet Explorer.So how does it work? You click the icon in the input box. You are then prompted to talk you query. Google Chrome then sends the audio to their servers for processing. It then sends the results to the browser in the form of text. It's then in your control. I have a feeling this is using the same tech as Google 411 (RIP) was using. Mon, 16 May 2011 17:20:00 PDT http://www.sitecrafting.com/blog/attributes-casing/ Internet Explorer just doesn't like to play well with others. Case in point: I was working on some JavaScript using jQuery where I noticed a strain bug. My data attributes were camel casing differently in Firefox and IE7. So I loaded up Chrome and saw it matched Firefox. I'm sure you can see where this is going. So here's the issue:Given the following HTML: (spaces added)< div data-elem-ID="1">< /div>Internet Explorer returns the innerHTML in a non-normalized way: (Link to test code)  Browser  innerHTML  attribute[0].name  jQuery.data()  IE8 (and lower)  < DIV data-elem-ID="1">< /div>  data-elem-ID  elemID  IE9+  < div data-elem-ID="1">< /div>  data-elem-ID  elemID  Others  < div data-elem-id="1">< /div>  data-elem-id  elemId JavaScript is strict about it's casing, and this one character difference is enough to make the property undefined. In our case, I am going to suggest developers follow the spec and use lowercase names for HTML5 data- attributes. This will bypass the browser inconsistency completely. On the plus side, the jQuery Data function normalizes this problem for you, so you don't have to worry about it.As a side note, while looking into this I found a bug in the latest jQuery (1.6.4). Looks like there is a regression where the jQuery.data() function returns an empty object in IE. I have reported it here. Update 2011-09-30: The jQuery team closed the bug as it's considered spec. HTML5 data-* attribute requires the attribute to be in all lower case. So the code above is invalid HTML5. That said, it is still processed by the browsers and will give you trouble. Stay safe and keep your attributes in lower case. Wed, 28 Sep 2011 09:27:00 PDT http://www.sitecrafting.com/blog/what-we-get-when-we/ News of the web last week was that Chrome (25.69%) had outpaced Firefox (25.23%) in worldwide usage stats. Compare that to Internet Explorer's (IE) 40.63% worldwide. The stats for the US still put Firefox in second place with Chrome a few points behind. I decided to look at the specific version numbers and found that IE6 is now less then 1% and IE7 is at less then 5%. World Wide by Browser USA by Browser Version This got me thinking: What do YOU get when YOU drop support for IE7? It turns out Internet Explorer 8 got a lot of things right. They added support for a slew of features that make building large web applications easier.  Below are a list of CSS and JavaScript APIs that were introduced in IE8 that are well supported by other browsers. HTML Data URIs String encoding used for images and other media which can be put in a src or href attribute. Example: Image with a dynamic graph < img alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" height="16" width="16" /> ARIA Support HTML attributes which allow people with disabilities to use dynamic web pages. Example: Alert the current time < button role="alert" onclick="alert(new Date)">Now< /button> CSS display: table; CSS property which causes an element to be displayed as a table, row, or cell Example: Create a table using DIVs and classes div.table { display: table; }div.table div.row { display: table-row; }div.table div.row div.cell { display: table-cell; } :before / :after Selector CSS pseudo-element selector for displaying text or images before or after an element's contents Example: Show the image's title after the image img[title]:after { content: attr(title); } box-sizing CSS property to specify whether an element's borders and padding are to be included in it's size calculation. Example: Use same sizing model in all browsers .example {    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;    box-sizing: border-box;} JavaScript Cross Domain Ajax Ajax which loosens the same-origin policy. Example: Send message between domains (IE8 only) var xdr = new XDomainRequest();xdr.onload = function(res) { console.log(res); };xdr.open('get', 'http://example.com/xdr.php');xdr.send(); Web Storage Key / Value pairs for storing string data locally, like cookies, but for larger data sets. Example: Store/Load a Data URI image localStorage.setItem('star', img.src);img.src = localStorage.getItem('star'); Native JSON Support Native support for encoding / decoding data as JSON. Example: Store an object in storage localStorage.setItem('bigJSON', JSON.stringify(bigObject));bigObject = JSON.parse(localStorage.getItem('bigJSON')); querySelector / querySelectorAll Native method to look up DOM elements using CSS selectors. Example: Get the cells of a table var cells = table.querySelectorAll('td'); postMessage Unified form of message passing between windows and frames, including cross domain. Example: Post a message between an iFrame (frame) and the parent window window.onmessage = function (e) { console.log(e.data) }; frame.postMessage('data'); hashChange Event Event that is fired the the URL's hash value changes. Example: Animate page scroll to an element with matching ID $(window).bind('hashChange', function() {    $('html, body').stop().animate({ scrollTop: $(location.hash).offset().top });}); Mon, 05 Dec 2011 09:15:00 PST http://www.sitecrafting.com/blog/draft-phonegap-example-wikipedia/ I've been working with PhoneGap a lot lately while building our iOS and Android apps: Mobile Wine Tour. One of the hardest parts of working with a new technology is finding good examples to learn from. There are tons of tutorials on the net, but I haven't found a good, active, live project; until now. Wikipedia stated an open source project on Github for their mobile app about 7 months ago. Since then PhoneGap has been upgraded from v1.0.0 to 1.5.0, grew from supporting 3 platforms to 7, was bought out by Adobe, gifted to the Apache foundation and open sourced, and changed name from PhoneGap to Callback to Cordova. That's a lot of change! And since it's hosted on Github you can view all the commit history. Wikipedia supports Blackberry, Window Phone 7, Android, and iOS. Looking through their codebase there are some interesting things to note. The biggest take away is PhoneGap development requires strong JavaScript expertise (>90% of the project code is JS). Each platform has it's own subdirectory, with it's own platform specific plugins. A platform stub script uses user agent sniffing to import plugin scripts. Uses a .goodscroll / .badscroll class to determine whether to use iScroll or overflow:scroll for scrolling. There are two CSS files, app.css and common.css, which total less then 1500 lines. The common.css is pulled in from a remote SVN using a make file. JavaScript is broken into modules (window scoped), using the return { fn: fn } syntax. All templates are in the index.html file as script tags with a type of text/html, rendered using Twitter's Hogan.Libraries Used: Lawnchair - Simple JSON storage jQuery - DOM manipulation and events Zepto - Ajax (looks like a temp hack?) Hogan - Templating library Leaflet - Maps library for OpenStreetMaps MediaWiki - Accessor for Wikipedia Data Crypto-JS - Provides various hashing functions iScroll - Scrolling library for Web Apps There's a lot of interesting stuff here in this code and is well worth a look. This is not a good place to start learning how to use PhoneGap, but it is a good example of PhoneGap in the real world. If you find anything worth noting, let us know in the comments! Mon, 09 Apr 2012 19:33:00 PDT