I've been finding this little meta[name='tmpl'] pattern useful lately when making template-based decisions in JS, such as when loading a particular file or set of files that are needed only on a particular page of a site.
First, in the HTML of a particular template, like say, a search result page:
<head>
...
<meta name="tmpl" content="searchresult">
</head>
In response to @jaffathecake's tweet
One feature that would be extremely helpful when building with HTML5 appcache would be to request that an HTML document that references an offline cache always fetches content from the server (per ordinary caching header rules) when the network connection is available, and only "offline" when the server cannot be reached.
An example use case would be simple HTML document that refreshes regularly, yet should be available to browse offline, should the connection drop upon refreshing the page.
Here's a use case we had when building an app on BostonGlobe.com: Our app's homepage began as a simple list of a user's bookmarked links to articles, which were available to any device (JS or no JS). That list of articles would change constantly as a user bookmarked and removed bookmarks throughout the site. In modern browsers, that same list page would be enhanced into an application in which all of the bookmarked artic
| /' | |
| // | |
| . // | |
| |\//7 | |
| /' " \ | |
| . . . | |
| | ( \ | |
| | '._ ' | |
| / \'-' | |
| ____[\`---'/]____ |
| <head> | |
| ... | |
| ... | |
| <script> | |
| // async-load a stylesheet full of data-uri'd icons... | |
| (function( href ){ | |
| links = document.getElementsByTagName( "link" ), | |
| elem = document.createElement( "link" ), | |
| ref = links[ links.length ]; |
| /*! appendAround markup pattern. [c]2012, @scottjehl, Filament Group, Inc. MIT/GPL | |
| how-to: | |
| 1. Insert potential element containers throughout the DOM | |
| 2. give each container a data-set attribute with a value that matches all other containers' values | |
| 3. Place your appendAround content in one of the potential containers | |
| 4. Call appendAround() on that element when the DOM is ready | |
| */ | |
| (function( $ ){ | |
| $.fn.appendAround = function(){ | |
| return this.each(function(){ |
Many agree that the newly proposed srcset attribute is much less syntactically intuitive than the widely appreciated picture element. I hope that the WHATWG and W3C review all of the efforts that the web dev community have put into the picture element proposal in their own community group and go back on this recent addition.
Syntax aside... if srcset was here to stay regardless of what we want, is there any way we could make it work in existing browsers without introducing unnecessary overhead or potentially buggy markup? At a glance, it looks shaky to me.
The main problem is request overhead, and attempting to work around that.
Given the following markup, existing browsers will prefetch/fetch the image referenced in the src attribute, and JavaScript can not prevent that request from going out. This means larger screen devices will request an unnecessary image for every imgset on a page - not good.
| /*! | |
| An experiment in getting accurate visible viewport dimensions across devices | |
| (c) 2012 Scott Jehl. | |
| MIT/GPLv2 Licence | |
| */ | |
| function viewportSize(){ | |
| var test = document.createElement( "div" ); | |
| test.style.cssText = "position: fixed;top: 0;left: 0;bottom: 0;right: 0;"; |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Fixed Toolbars Polyfill</title> | |
| <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css"> | |
| <link rel="stylesheet" href="jquery.mobile.fixedToolbar.polyfill.css"> | |
| <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> |
| /* | |
| NOTE!!!! | |
| The most updated version of this code is here: | |
| https://github.com/scottjehl/iOS-Orientationchange-Fix |
| /* | |
| * Normalized hide address bar for iOS & Android | |
| * (c) Scott Jehl, scottjehl.com | |
| * MIT License | |
| */ | |
| (function(e){var d=e.document;if(!location.hash&&e.addEventListener){window.scrollTo(0,1);var c=1,b=function(){return e.pageYOffset||d.compatMode==="CSS1Compat"&&d.documentElement.scrollTop||d.body.scrollTop||0},a=setInterval(function(){if(d.body){clearInterval(a);c=b();e.scrollTo(0,c===1?0:1)}},15);e.addEventListener("load",function(){setTimeout(function(){if(b()<20){e.scrollTo(0,c===1?0:1)}},0)})}})(this); |