Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add html5shiv, x-webkit-speech for search input

  • Loading branch information...
commit 5be985ab1ca2836e32a8e1144e7be2203e2b5209 1 parent c293ed8
@alexgibson authored
Showing with 417 additions and 208 deletions.
  1. +23 −11 2010/06/26/targeting-iphone-4-using-css-media-queries/index.html
  2. +23 −11 2010/10/30/new-sizes-attribute-in-ios-421-for-web-clip-icons/index.html
  3. +23 −11 2010/12/18/using-html5-localstorage-as-a-fallback-for-offline-form-submission/index.html
  4. +23 −11 2011/06/06/making-web-content-more-accessible-with-ios-voiceover/index.html
  5. +23 −11 2011/08/16/event-delegation-for-touch-events-in-javascript/index.html
  6. +23 −11 2011/09/22/site-redesign-a-mobile-first-approach/index.html
  7. +23 −11 2011/10/03/building-a-playbook-webworks-app/index.html
  8. +23 −11 2011/10/17/enable-css-active-pseudo-styles-in-mobile-safari/index.html
  9. +23 −11 2011/10/24/ios-startup-images-using-css-media-queries/index.html
  10. +23 −11 2011/11/23/make-sure-to-use-correct-meta-viewport-syntax/index.html
  11. +23 −11 2011/12/23/different-ways-to-trigger-touchcancel-in-mobile-browsers/index.html
  12. +23 −11 2012/03/12/tap-js-a-lightweight-tap-event-javascript-plugin/index.html
  13. +23 −11 2012/03/28/serving-ios-retina-startup-images-for-the-new-ipad/index.html
  14. +24 −12 2012/07/11/moving-to-jekyll-and-github-pages/index.html
  15. +23 −11 contact/index.html
  16. +1 −1  css/styles.css
  17. +2 −2 feed/index.xml
  18. +23 −11 index.html
  19. +5 −0 js/html5shiv.js
  20. +23 −11 projects/index.html
  21. +17 −17 sitemap.xml
View
34 2010/06/26/targeting-iphone-4-using-css-media-queries/index.html
@@ -5,9 +5,13 @@
<meta name="description" content="Alex Gibson is a front–end web developer from Newcastle upon Tyne, United Kingdom." />
<meta name="author" content="Alex Gibson" />
<meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="/css/styles.css" />
- <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="http://alxgbsn.co.uk/feed/" />
+
<title>Targeting iPhone 4 using CSS Media Queries</title>
+
+ <link rel="stylesheet" href="/css/styles.css" />
+ <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="/feed/" />
+
+ <script src="/js/html5shiv.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33263279-1']);
@@ -20,17 +24,20 @@
</script>
</head>
<body>
- <nav role="navigation">
+
+<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
- <header role="banner">
- <h1>Targeting iPhone 4 using CSS Media Queries</h1>
- </header>
- <article role="main">
+
+<header role="banner">
+ <h1>Targeting iPhone 4 using CSS Media Queries</h1>
+</header>
+
+<article role="main">
<time datetime="Sat Jun 26 00:00:00 +0100 2010" pubdate>Published Jun 26 2010</time>
<p>With the release of iPhone 4 and it's 326ppi display, there has been a fair bit of speculation as to what impact this would have on mobile web apps and websites that are optimised for mobile screen sizes. How would web developers target both older iPhones with a 480x320 display, as well as the iPhone 4's 960x640 display? Would we need separate CSS stylesheets for each device? How would images need to be optimised for the new screens?</p>
@@ -66,12 +73,17 @@
</article>
- <form class="search" action="http://google.com/search" method="get">
- <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
- <input class="search" type="search" name="q" results="0" placeholder="Search"/>
+
+<form class="search" action="http://google.com/search" method="get">
+ <div role="search">
+ <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
+ <input class="search" type="search" name="q" results="0" placeholder="Search" x-webkit-speech />
+ </div>
</form>
- <footer role="contentinfo">
+
+<footer role="contentinfo">
<p>Copyright &copy; Alex Gibson | Powered by <a href="http://jekyllrb.com/">Jekyll</a>.</p>
</footer>
+
</body>
</html>
View
34 2010/10/30/new-sizes-attribute-in-ios-421-for-web-clip-icons/index.html
@@ -5,9 +5,13 @@
<meta name="description" content="Alex Gibson is a front–end web developer from Newcastle upon Tyne, United Kingdom." />
<meta name="author" content="Alex Gibson" />
<meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="/css/styles.css" />
- <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="http://alxgbsn.co.uk/feed/" />
+
<title>New sizes attribute in iOS 4.2.1 for web clip icons</title>
+
+ <link rel="stylesheet" href="/css/styles.css" />
+ <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="/feed/" />
+
+ <script src="/js/html5shiv.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33263279-1']);
@@ -20,17 +24,20 @@
</script>
</head>
<body>
- <nav role="navigation">
+
+<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
- <header role="banner">
- <h1>New sizes attribute in iOS 4.2.1 for web clip icons</h1>
- </header>
- <article role="main">
+
+<header role="banner">
+ <h1>New sizes attribute in iOS 4.2.1 for web clip icons</h1>
+</header>
+
+<article role="main">
<time datetime="Sat Oct 30 00:00:00 +0100 2010" pubdate>Published Oct 30 2010</time>
<p>A small but relatively undiscovered new feature in iOS 4.2.1 is the new <a href="http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html">'sizes' attribute</a> for defining different sized web clip icons. This new attribute allows you to cater for different device resolutions on iOS when publishing home screen icons for your websites. Here's an example:</p>
@@ -45,12 +52,17 @@
</article>
- <form class="search" action="http://google.com/search" method="get">
- <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
- <input class="search" type="search" name="q" results="0" placeholder="Search"/>
+
+<form class="search" action="http://google.com/search" method="get">
+ <div role="search">
+ <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
+ <input class="search" type="search" name="q" results="0" placeholder="Search" x-webkit-speech />
+ </div>
</form>
- <footer role="contentinfo">
+
+<footer role="contentinfo">
<p>Copyright &copy; Alex Gibson | Powered by <a href="http://jekyllrb.com/">Jekyll</a>.</p>
</footer>
+
</body>
</html>
View
34 2010/12/18/using-html5-localstorage-as-a-fallback-for-offline-form-submission/index.html
@@ -5,9 +5,13 @@
<meta name="description" content="Alex Gibson is a front–end web developer from Newcastle upon Tyne, United Kingdom." />
<meta name="author" content="Alex Gibson" />
<meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="/css/styles.css" />
- <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="http://alxgbsn.co.uk/feed/" />
+
<title>Using HTML5 localStorage as a fallback for offline form submission</title>
+
+ <link rel="stylesheet" href="/css/styles.css" />
+ <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="/feed/" />
+
+ <script src="/js/html5shiv.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33263279-1']);
@@ -20,17 +24,20 @@
</script>
</head>
<body>
- <nav role="navigation">
+
+<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
- <header role="banner">
- <h1>Using HTML5 localStorage as a fallback for offline form submission</h1>
- </header>
- <article role="main">
+
+<header role="banner">
+ <h1>Using HTML5 localStorage as a fallback for offline form submission</h1>
+</header>
+
+<article role="main">
<time datetime="Sat Dec 18 00:00:00 +0000 2010" pubdate>Published Dec 18 2010</time>
<p>I recently put together a working demo for a client showing how you might use HTML5 localStorage as a fallback for form data submission when a mobile device is offline without signal. I've published the full <a href="https://github.com/alexgibson/OfflineForm">source code over on GitHub</a> together with a demo for anyone who is interested.</p>
@@ -40,12 +47,17 @@
</article>
- <form class="search" action="http://google.com/search" method="get">
- <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
- <input class="search" type="search" name="q" results="0" placeholder="Search"/>
+
+<form class="search" action="http://google.com/search" method="get">
+ <div role="search">
+ <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
+ <input class="search" type="search" name="q" results="0" placeholder="Search" x-webkit-speech />
+ </div>
</form>
- <footer role="contentinfo">
+
+<footer role="contentinfo">
<p>Copyright &copy; Alex Gibson | Powered by <a href="http://jekyllrb.com/">Jekyll</a>.</p>
</footer>
+
</body>
</html>
View
34 2011/06/06/making-web-content-more-accessible-with-ios-voiceover/index.html
@@ -5,9 +5,13 @@
<meta name="description" content="Alex Gibson is a front–end web developer from Newcastle upon Tyne, United Kingdom." />
<meta name="author" content="Alex Gibson" />
<meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="/css/styles.css" />
- <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="http://alxgbsn.co.uk/feed/" />
+
<title>Making web content more accessible with iOS VoiceOver</title>
+
+ <link rel="stylesheet" href="/css/styles.css" />
+ <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="/feed/" />
+
+ <script src="/js/html5shiv.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33263279-1']);
@@ -20,17 +24,20 @@
</script>
</head>
<body>
- <nav role="navigation">
+
+<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
- <header role="banner">
- <h1>Making web content more accessible with iOS VoiceOver</h1>
- </header>
- <article role="main">
+
+<header role="banner">
+ <h1>Making web content more accessible with iOS VoiceOver</h1>
+</header>
+
+<article role="main">
<time datetime="Mon Jun 06 00:00:00 +0100 2011" pubdate>Published Jun 06 2011</time>
<p>If you're a web developer and own an iOS device, you may have noticed it comes with a whole range of accessibility features. One such feature is a built-in screen reader for visually impaired users, called VoiceOver. For a touch screen device, VoiceOver is a wonderfully capable piece of assistive technology, and a very useful tool that you can use to help test the accessibility of your web content.</p>
@@ -158,12 +165,17 @@
</article>
- <form class="search" action="http://google.com/search" method="get">
- <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
- <input class="search" type="search" name="q" results="0" placeholder="Search"/>
+
+<form class="search" action="http://google.com/search" method="get">
+ <div role="search">
+ <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
+ <input class="search" type="search" name="q" results="0" placeholder="Search" x-webkit-speech />
+ </div>
</form>
- <footer role="contentinfo">
+
+<footer role="contentinfo">
<p>Copyright &copy; Alex Gibson | Powered by <a href="http://jekyllrb.com/">Jekyll</a>.</p>
</footer>
+
</body>
</html>
View
34 2011/08/16/event-delegation-for-touch-events-in-javascript/index.html
@@ -5,9 +5,13 @@
<meta name="description" content="Alex Gibson is a front–end web developer from Newcastle upon Tyne, United Kingdom." />
<meta name="author" content="Alex Gibson" />
<meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="/css/styles.css" />
- <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="http://alxgbsn.co.uk/feed/" />
+
<title>Event delegation for touch events in JavaScript</title>
+
+ <link rel="stylesheet" href="/css/styles.css" />
+ <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="/feed/" />
+
+ <script src="/js/html5shiv.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33263279-1']);
@@ -20,17 +24,20 @@
</script>
</head>
<body>
- <nav role="navigation">
+
+<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
- <header role="banner">
- <h1>Event delegation for touch events in JavaScript</h1>
- </header>
- <article role="main">
+
+<header role="banner">
+ <h1>Event delegation for touch events in JavaScript</h1>
+</header>
+
+<article role="main">
<time datetime="Tue Aug 16 00:00:00 +0100 2011" pubdate>Published Aug 16 2011</time>
<p>Anyone who has experience developing web applications on mobile devices will have no doubt encountered the 300ms delay when firing <code>click</code> events in web browsers such as Mobile Safari. There are some useful <a href="https://github.com/cheeaun/tappable">standalone plugins</a> and <a href="http://code.google.com/mobile/articles/fast_buttons.html">informative articles</a> to help combat this delay, but this post aims to show a super–quick example of how to do simulated 'tap' events on dynamic content using JavaScript event delegation.</p>
@@ -110,12 +117,17 @@
</article>
- <form class="search" action="http://google.com/search" method="get">
- <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
- <input class="search" type="search" name="q" results="0" placeholder="Search"/>
+
+<form class="search" action="http://google.com/search" method="get">
+ <div role="search">
+ <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
+ <input class="search" type="search" name="q" results="0" placeholder="Search" x-webkit-speech />
+ </div>
</form>
- <footer role="contentinfo">
+
+<footer role="contentinfo">
<p>Copyright &copy; Alex Gibson | Powered by <a href="http://jekyllrb.com/">Jekyll</a>.</p>
</footer>
+
</body>
</html>
View
34 2011/09/22/site-redesign-a-mobile-first-approach/index.html
@@ -5,9 +5,13 @@
<meta name="description" content="Alex Gibson is a front–end web developer from Newcastle upon Tyne, United Kingdom." />
<meta name="author" content="Alex Gibson" />
<meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="/css/styles.css" />
- <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="http://alxgbsn.co.uk/feed/" />
+
<title>Site redesign, a mobile first approach</title>
+
+ <link rel="stylesheet" href="/css/styles.css" />
+ <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="/feed/" />
+
+ <script src="/js/html5shiv.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33263279-1']);
@@ -20,17 +24,20 @@
</script>
</head>
<body>
- <nav role="navigation">
+
+<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
- <header role="banner">
- <h1>Site redesign, a mobile first approach</h1>
- </header>
- <article role="main">
+
+<header role="banner">
+ <h1>Site redesign, a mobile first approach</h1>
+</header>
+
+<article role="main">
<time datetime="Thu Sep 22 00:00:00 +0100 2011" pubdate>Published Sep 22 2011</time>
<p>Anyone who has visited this site over the last few weeks will no doubt have noticed a few changes. It has now had a complete design overhaul, which is probably long overdue given the current rise in interest of principals such as <a href="http://www.alistapart.com/articles/responsive-web-design/">responsive web design</a> and <a href="http://www.lukew.com/ff/entry.asp?933">mobile first</a>. What follows is a run down of basic changes to the site, in what hopefully makes for a much improved reading experience, in our rapidly changing, device-agnostic world.</p>
@@ -151,12 +158,17 @@
</article>
- <form class="search" action="http://google.com/search" method="get">
- <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
- <input class="search" type="search" name="q" results="0" placeholder="Search"/>
+
+<form class="search" action="http://google.com/search" method="get">
+ <div role="search">
+ <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
+ <input class="search" type="search" name="q" results="0" placeholder="Search" x-webkit-speech />
+ </div>
</form>
- <footer role="contentinfo">
+
+<footer role="contentinfo">
<p>Copyright &copy; Alex Gibson | Powered by <a href="http://jekyllrb.com/">Jekyll</a>.</p>
</footer>
+
</body>
</html>
View
34 2011/10/03/building-a-playbook-webworks-app/index.html
@@ -5,9 +5,13 @@
<meta name="description" content="Alex Gibson is a front–end web developer from Newcastle upon Tyne, United Kingdom." />
<meta name="author" content="Alex Gibson" />
<meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="/css/styles.css" />
- <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="http://alxgbsn.co.uk/feed/" />
+
<title>Building a PlayBook WebWorks app</title>
+
+ <link rel="stylesheet" href="/css/styles.css" />
+ <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="/feed/" />
+
+ <script src="/js/html5shiv.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33263279-1']);
@@ -20,17 +24,20 @@
</script>
</head>
<body>
- <nav role="navigation">
+
+<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
- <header role="banner">
- <h1>Building a PlayBook WebWorks app</h1>
- </header>
- <article role="main">
+
+<header role="banner">
+ <h1>Building a PlayBook WebWorks app</h1>
+</header>
+
+<article role="main">
<time datetime="Mon Oct 03 00:00:00 +0100 2011" pubdate>Published Oct 03 2011</time>
<p>I was recently hired to develop the front–end HTML, CSS and JavaScript for a BlackBerry PlayBook application, packaged using RIM's <a href="http://us.blackberry.com/developers/tablet/webworks.jsp">WebWorks SDK</a>. The main purpose of the app was to assist the user in consuming a large volume of digital content (in the form of text, images and video) via a streamlined, touch–friendly interface. Despite a reasonably small development window, the PlayBook browser and development tools proved to be very capable in getting the job done.</p>
@@ -234,12 +241,17 @@
</article>
- <form class="search" action="http://google.com/search" method="get">
- <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
- <input class="search" type="search" name="q" results="0" placeholder="Search"/>
+
+<form class="search" action="http://google.com/search" method="get">
+ <div role="search">
+ <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
+ <input class="search" type="search" name="q" results="0" placeholder="Search" x-webkit-speech />
+ </div>
</form>
- <footer role="contentinfo">
+
+<footer role="contentinfo">
<p>Copyright &copy; Alex Gibson | Powered by <a href="http://jekyllrb.com/">Jekyll</a>.</p>
</footer>
+
</body>
</html>
View
34 2011/10/17/enable-css-active-pseudo-styles-in-mobile-safari/index.html
@@ -5,9 +5,13 @@
<meta name="description" content="Alex Gibson is a front–end web developer from Newcastle upon Tyne, United Kingdom." />
<meta name="author" content="Alex Gibson" />
<meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="/css/styles.css" />
- <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="http://alxgbsn.co.uk/feed/" />
+
<title>Enable CSS active pseudo styles in Mobile Safari</title>
+
+ <link rel="stylesheet" href="/css/styles.css" />
+ <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="/feed/" />
+
+ <script src="/js/html5shiv.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33263279-1']);
@@ -20,17 +24,20 @@
</script>
</head>
<body>
- <nav role="navigation">
+
+<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
- <header role="banner">
- <h1>Enable CSS active pseudo styles in Mobile Safari</h1>
- </header>
- <article role="main">
+
+<header role="banner">
+ <h1>Enable CSS active pseudo styles in Mobile Safari</h1>
+</header>
+
+<article role="main">
<time datetime="Mon Oct 17 00:00:00 +0100 2011" pubdate>Published Oct 17 2011</time>
<p>By default Mobile Safari disables CSS active pseudo styles on web pages, instead opting for a generic tap–highlight colour on clickable elements. A little known trick is that you can easily re-enable your active pseudo styles by declaring a <code>touchstart</code> event on the page. You don't even need to actually use the event, simply declaring an empty function will suffice.</p>
@@ -54,12 +61,17 @@
</article>
- <form class="search" action="http://google.com/search" method="get">
- <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
- <input class="search" type="search" name="q" results="0" placeholder="Search"/>
+
+<form class="search" action="http://google.com/search" method="get">
+ <div role="search">
+ <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
+ <input class="search" type="search" name="q" results="0" placeholder="Search" x-webkit-speech />
+ </div>
</form>
- <footer role="contentinfo">
+
+<footer role="contentinfo">
<p>Copyright &copy; Alex Gibson | Powered by <a href="http://jekyllrb.com/">Jekyll</a>.</p>
</footer>
+
</body>
</html>
View
34 2011/10/24/ios-startup-images-using-css-media-queries/index.html
@@ -5,9 +5,13 @@
<meta name="description" content="Alex Gibson is a front–end web developer from Newcastle upon Tyne, United Kingdom." />
<meta name="author" content="Alex Gibson" />
<meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="/css/styles.css" />
- <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="http://alxgbsn.co.uk/feed/" />
+
<title>iOS startup images using CSS media queries</title>
+
+ <link rel="stylesheet" href="/css/styles.css" />
+ <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="/feed/" />
+
+ <script src="/js/html5shiv.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33263279-1']);
@@ -20,17 +24,20 @@
</script>
</head>
<body>
- <nav role="navigation">
+
+<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
- <header role="banner">
- <h1>iOS startup images using CSS media queries</h1>
- </header>
- <article role="main">
+
+<header role="banner">
+ <h1>iOS startup images using CSS media queries</h1>
+</header>
+
+<article role="main">
<time datetime="Mon Oct 24 00:00:00 +0100 2011" pubdate>Published Oct 24 2011</time>
<p>Ever since the arrival of the iPad and iPhone 4, serving correctly sized <code>apple-touch-startup-images</code> for iOS web apps has been somewhat clumbersome, especially if you wish to cater for every type of iOS device.</p>
@@ -73,12 +80,17 @@
</article>
- <form class="search" action="http://google.com/search" method="get">
- <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
- <input class="search" type="search" name="q" results="0" placeholder="Search"/>
+
+<form class="search" action="http://google.com/search" method="get">
+ <div role="search">
+ <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
+ <input class="search" type="search" name="q" results="0" placeholder="Search" x-webkit-speech />
+ </div>
</form>
- <footer role="contentinfo">
+
+<footer role="contentinfo">
<p>Copyright &copy; Alex Gibson | Powered by <a href="http://jekyllrb.com/">Jekyll</a>.</p>
</footer>
+
</body>
</html>
View
34 2011/11/23/make-sure-to-use-correct-meta-viewport-syntax/index.html
@@ -5,9 +5,13 @@
<meta name="description" content="Alex Gibson is a front–end web developer from Newcastle upon Tyne, United Kingdom." />
<meta name="author" content="Alex Gibson" />
<meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="/css/styles.css" />
- <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="http://alxgbsn.co.uk/feed/" />
+
<title>Make sure to use correct meta viewport syntax</title>
+
+ <link rel="stylesheet" href="/css/styles.css" />
+ <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="/feed/" />
+
+ <script src="/js/html5shiv.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33263279-1']);
@@ -20,17 +24,20 @@
</script>
</head>
<body>
- <nav role="navigation">
+
+<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
- <header role="banner">
- <h1>Make sure to use correct meta viewport syntax</h1>
- </header>
- <article role="main">
+
+<header role="banner">
+ <h1>Make sure to use correct meta viewport syntax</h1>
+</header>
+
+<article role="main">
<time datetime="Wed Nov 23 00:00:00 +0000 2011" pubdate>Published Nov 23 2011</time>
<p>When browsing the web it's not uncommon to come across two slight variations on the syntax for declaring meta viewport content values. It's a bit unclear how the two variations originated, but it should be noted that only one is correct, and using an incorrect syntax can actually create problems on certain web browsers.</p>
@@ -80,12 +87,17 @@
</article>
- <form class="search" action="http://google.com/search" method="get">
- <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
- <input class="search" type="search" name="q" results="0" placeholder="Search"/>
+
+<form class="search" action="http://google.com/search" method="get">
+ <div role="search">
+ <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
+ <input class="search" type="search" name="q" results="0" placeholder="Search" x-webkit-speech />
+ </div>
</form>
- <footer role="contentinfo">
+
+<footer role="contentinfo">
<p>Copyright &copy; Alex Gibson | Powered by <a href="http://jekyllrb.com/">Jekyll</a>.</p>
</footer>
+
</body>
</html>
View
34 2011/12/23/different-ways-to-trigger-touchcancel-in-mobile-browsers/index.html
@@ -5,9 +5,13 @@
<meta name="description" content="Alex Gibson is a front–end web developer from Newcastle upon Tyne, United Kingdom." />
<meta name="author" content="Alex Gibson" />
<meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="/css/styles.css" />
- <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="http://alxgbsn.co.uk/feed/" />
+
<title>Different ways to trigger touchcancel in mobile browsers</title>
+
+ <link rel="stylesheet" href="/css/styles.css" />
+ <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="/feed/" />
+
+ <script src="/js/html5shiv.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33263279-1']);
@@ -20,17 +24,20 @@
</script>
</head>
<body>
- <nav role="navigation">
+
+<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
- <header role="banner">
- <h1>Different ways to trigger touchcancel in mobile browsers</h1>
- </header>
- <article role="main">
+
+<header role="banner">
+ <h1>Different ways to trigger touchcancel in mobile browsers</h1>
+</header>
+
+<article role="main">
<time datetime="Fri Dec 23 00:00:00 +0000 2011" pubdate>Published Dec 23 2011</time>
<p>The <code>touchcancel</code> event is often neglected when building touch–interfaces using JavaScript. Historically, browsers vendors have never really published documentation detailing the circumstances as to when this event gets fired, and hence it has always been associated with a level of obscurity by many developers. The aim of this post is to try and shed some light on the matter.</p>
@@ -138,12 +145,17 @@
</article>
- <form class="search" action="http://google.com/search" method="get">
- <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
- <input class="search" type="search" name="q" results="0" placeholder="Search"/>
+
+<form class="search" action="http://google.com/search" method="get">
+ <div role="search">
+ <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
+ <input class="search" type="search" name="q" results="0" placeholder="Search" x-webkit-speech />
+ </div>
</form>
- <footer role="contentinfo">
+
+<footer role="contentinfo">
<p>Copyright &copy; Alex Gibson | Powered by <a href="http://jekyllrb.com/">Jekyll</a>.</p>
</footer>
+
</body>
</html>
View
34 2012/03/12/tap-js-a-lightweight-tap-event-javascript-plugin/index.html
@@ -5,9 +5,13 @@
<meta name="description" content="Alex Gibson is a front–end web developer from Newcastle upon Tyne, United Kingdom." />
<meta name="author" content="Alex Gibson" />
<meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="/css/styles.css" />
- <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="http://alxgbsn.co.uk/feed/" />
+
<title>Tap.js - A lightweight ‘tap’ event JavaScript plugin</title>
+
+ <link rel="stylesheet" href="/css/styles.css" />
+ <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="/feed/" />
+
+ <script src="/js/html5shiv.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33263279-1']);
@@ -20,17 +24,20 @@
</script>
</head>
<body>
- <nav role="navigation">
+
+<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
- <header role="banner">
- <h1>Tap.js - A lightweight ‘tap’ event JavaScript plugin</h1>
- </header>
- <article role="main">
+
+<header role="banner">
+ <h1>Tap.js - A lightweight ‘tap’ event JavaScript plugin</h1>
+</header>
+
+<article role="main">
<time datetime="Mon Mar 12 00:00:00 +0000 2012" pubdate>Published Mar 12 2012</time>
<p>While the <a href="http://www.w3.org/TR/touch-events/">W3C touch events API</a> is quite flexible in its low-level implementation for dealing with multi-touch interaction, it means that the higher level gestures we use daily in our web apps can take <a href="http://miniapps.co.uk/blog/post/event-delegation-for-touch-events-in-javascript/">quite a lot of work</a> for developers to implement themselves, even down to the basic ‘tap’ event. Many mobile web frameworks already offer support for such gestures, but if your app does not use or require such a framework, something as simple as a 'tap' plugin can become a necessity on nearly every mobile project.</p>
@@ -86,12 +93,17 @@
</article>
- <form class="search" action="http://google.com/search" method="get">
- <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
- <input class="search" type="search" name="q" results="0" placeholder="Search"/>
+
+<form class="search" action="http://google.com/search" method="get">
+ <div role="search">
+ <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
+ <input class="search" type="search" name="q" results="0" placeholder="Search" x-webkit-speech />
+ </div>
</form>
- <footer role="contentinfo">
+
+<footer role="contentinfo">
<p>Copyright &copy; Alex Gibson | Powered by <a href="http://jekyllrb.com/">Jekyll</a>.</p>
</footer>
+
</body>
</html>
View
34 2012/03/28/serving-ios-retina-startup-images-for-the-new-ipad/index.html
@@ -5,9 +5,13 @@
<meta name="description" content="Alex Gibson is a front–end web developer from Newcastle upon Tyne, United Kingdom." />
<meta name="author" content="Alex Gibson" />
<meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="/css/styles.css" />
- <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="http://alxgbsn.co.uk/feed/" />
+
<title>Serving iOS retina startup images for the new iPad</title>
+
+ <link rel="stylesheet" href="/css/styles.css" />
+ <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="/feed/" />
+
+ <script src="/js/html5shiv.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33263279-1']);
@@ -20,17 +24,20 @@
</script>
</head>
<body>
- <nav role="navigation">
+
+<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
- <header role="banner">
- <h1>Serving iOS retina startup images for the new iPad</h1>
- </header>
- <article role="main">
+
+<header role="banner">
+ <h1>Serving iOS retina startup images for the new iPad</h1>
+</header>
+
+<article role="main">
<time datetime="Wed Mar 28 00:00:00 +0100 2012" pubdate>Published Mar 28 2012</time>
<p>In the past we have touched on how to serve iOS startup images for full screen web apps using both <a href="http://alxgbsn.co.uk/2011/10/24/ios-startup-images-using-css-media-queries/">CSS media queries and JavaScript</a> techniques. Now that the latest iPad sports a retina calibre display, we must again look at the best way to serve startup images in our web apps.</p>
@@ -55,12 +62,17 @@
</article>
- <form class="search" action="http://google.com/search" method="get">
- <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
- <input class="search" type="search" name="q" results="0" placeholder="Search"/>
+
+<form class="search" action="http://google.com/search" method="get">
+ <div role="search">
+ <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
+ <input class="search" type="search" name="q" results="0" placeholder="Search" x-webkit-speech />
+ </div>
</form>
- <footer role="contentinfo">
+
+<footer role="contentinfo">
<p>Copyright &copy; Alex Gibson | Powered by <a href="http://jekyllrb.com/">Jekyll</a>.</p>
</footer>
+
</body>
</html>
View
36 2012/07/11/moving-to-jekyll-and-github-pages/index.html
@@ -5,9 +5,13 @@
<meta name="description" content="Alex Gibson is a front–end web developer from Newcastle upon Tyne, United Kingdom." />
<meta name="author" content="Alex Gibson" />
<meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="/css/styles.css" />
- <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="http://alxgbsn.co.uk/feed/" />
+
<title>Moving to Jekyll and GitHub Pages</title>
+
+ <link rel="stylesheet" href="/css/styles.css" />
+ <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="/feed/" />
+
+ <script src="/js/html5shiv.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33263279-1']);
@@ -20,21 +24,24 @@
</script>
</head>
<body>
- <nav role="navigation">
+
+<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
- <header role="banner">
- <h1>Moving to Jekyll and GitHub Pages</h1>
- </header>
- <article role="main">
+
+<header role="banner">
+ <h1>Moving to Jekyll and GitHub Pages</h1>
+</header>
+
+<article role="main">
<time datetime="Wed Jul 11 00:00:00 +0100 2012" pubdate>Published Jul 11 2012</time>
<p>I've just finished moving my site to a new home, which is now hosted on <a href="http://pages.github.com/">GitHub Pages</a> and powered by <a href="http://jekyllrb.com/">Jekyll</a>, the increasingly popular static site generator. Jekyll takes a template directory and then processes it to create a static website consisting of pure HTML files, which you can then host on your chosen web server.</p>
-<p>For the past few years my old blog has served me pretty well. But I have been looking for something simpler and less cumbersome to update and maintain. Here are a list of reasons why I made the decision to choose Jekyll:</p>
+<p>For the past few years my old blog has served me pretty well, but I've been looking for something simpler and less cumbersome to update and maintain. Here are a list of reasons why I made the decision to choose Jekyll:</p>
<h2>Authoring new content</h2>
@@ -70,12 +77,17 @@
</article>
- <form class="search" action="http://google.com/search" method="get">
- <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
- <input class="search" type="search" name="q" results="0" placeholder="Search"/>
+
+<form class="search" action="http://google.com/search" method="get">
+ <div role="search">
+ <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
+ <input class="search" type="search" name="q" results="0" placeholder="Search" x-webkit-speech />
+ </div>
</form>
- <footer role="contentinfo">
+
+<footer role="contentinfo">
<p>Copyright &copy; Alex Gibson | Powered by <a href="http://jekyllrb.com/">Jekyll</a>.</p>
</footer>
+
</body>
</html>
View
34 contact/index.html
@@ -5,9 +5,13 @@
<meta name="description" content="Alex Gibson is a front–end web developer from Newcastle upon Tyne, United Kingdom." />
<meta name="author" content="Alex Gibson" />
<meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="/css/styles.css" />
- <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="http://alxgbsn.co.uk/feed/" />
+
<title>Contact</title>
+
+ <link rel="stylesheet" href="/css/styles.css" />
+ <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="/feed/" />
+
+ <script src="/js/html5shiv.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33263279-1']);
@@ -20,28 +24,36 @@
</script>
</head>
<body>
- <nav role="navigation">
+
+<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
- <header role="banner">
- <h1>Contact</h1>
- </header>
- <article role="main">
+
+<header role="banner">
+ <h1>Contact</h1>
+</header>
+
+<article role="main">
<ul>
<li>Email: <a href="mailto:&#097;&#108;&#120;&#103;&#098;&#115;&#110;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;">&#097;&#108;&#120;&#103;&#098;&#115;&#110;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;</a></li>
<li>Twitter: <a href="http://twitter.com/alex_gibson">@alex_gibson</a></li>
</ul>
</article>
- <form class="search" action="http://google.com/search" method="get">
- <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
- <input class="search" type="search" name="q" results="0" placeholder="Search"/>
+
+<form class="search" action="http://google.com/search" method="get">
+ <div role="search">
+ <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
+ <input class="search" type="search" name="q" results="0" placeholder="Search" x-webkit-speech />
+ </div>
</form>
- <footer role="contentinfo">
+
+<footer role="contentinfo">
<p>Copyright &copy; Alex Gibson | Powered by <a href="http://jekyllrb.com/">Jekyll</a>.</p>
</footer>
+
</body>
</html>
View
2  css/styles.css
@@ -1 +1 @@
-/* normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:hover,a:active{outline:0}h1{font-size:2em;margin:0.67em 0}h2{font-size:1.5em;margin:0.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:0.83em;margin:1.67em 0}h6{font-size:0.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}pre,code,kbd,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.hll{background-color:#ffffcc}.c{color:#408080;font-style:italic}.err{border:1px solid #FF0000}.k{color:#008000;font-weight:bold}.o{color:#666666}.cm{color:#408080;font-style:italic}.cp{color:#BC7A00}.c1{color:#408080;font-style:italic}.cs{color:#408080;font-style:italic}.gd{color:#A00000}.ge{font-style:italic}.gr{color:#FF0000}.gh{color:#000080;font-weight:bold}.gi{color:#00A000}.go{color:#808080}.gp{color:#000080;font-weight:bold}.gs{font-weight:bold}.gu{color:#800080;font-weight:bold}.gt{color:#0040D0}.kc{color:#008000;font-weight:bold}.kd{color:#008000;font-weight:bold}.kn{color:#008000;font-weight:bold}.kp{color:#008000}.kr{color:#008000;font-weight:bold}.kt{color:#B00040}.m{color:#666666}.s{color:#BA2121}.na{color:#7D9029}.nb{color:#008000}.nc{color:#0000FF;font-weight:bold}.no{color:#880000}.nd{color:#AA22FF}.ni{color:#999999;font-weight:bold}.ne{color:#D2413A;font-weight:bold}.nf{color:#0000FF}.nl{color:#A0A000}.nn{color:#0000FF;font-weight:bold}.nt{color:#008000;font-weight:bold}.nv{color:#19177C}.ow{color:#AA22FF;font-weight:bold}.w{color:#bbbbbb}.mf{color:#666666}.mh{color:#666666}.mi{color:#666666}.mo{color:#666666}.sb{color:#BA2121}.sc{color:#BA2121}.sd{color:#BA2121;font-style:italic}.s2{color:#BA2121}.se{color:#BB6622;font-weight:bold}.sh{color:#BA2121}.si{color:#BB6688;font-weight:bold}.sx{color:#008000}.sr{color:#BB6688}.s1{color:#BA2121}.ss{color:#19177C}.bp{color:#008000}.vc{color:#19177C}.vg{color:#19177C}.vi{color:#19177C}.il{color:#666666}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;background-color:#f6f6f6}body{width:90%;max-width:35em;margin:1em auto;font-family:Palatino-Roman, Cambria, "Times New Roman", Times, serif}nav[role=navigation]{display:block;overflow:hidden;border-bottom:1px solid #a7a7a7}nav[role=navigation]>ul{list-style:none;margin:0;padding:0}nav[role=navigation]>ul li{float:left;margin-right:1em}header[role=banner]{display:block}article[role=main]{display:block}section{border-top:1px solid #a7a7a7}pre{overflow:auto;-webkit-overflow-scrolling:touch;text-shadow:none;word-wrap:normal;white-space:pre;padding:1em;background-color:#ffffff;border:1px solid #a7a7a7}code{color:#565757}footer[role=contentinfo]{display:block;text-align:center}a:link,a:visited{color:#0d1169;text-decoration:none}a:hover,a:active{color:#0d1169;text-decoration:underline}p,ul>li{line-height:1.5em}em{font-family:Palatino-Italic,Palatino-Roman,Cambria,"Times New Roman",Times,serif;font-style:italic}strong{font-family:Palatino-Bold,Palatino-Roman,Cambria,"Times New Roman",Times,serif;font-weight:bold}blockquote{font-family:Palatino-Italic,Palatino-Roman,Cambria,"Times New Roman",Times,serif;font-style:italic;font-size:1.2em}h1{text-align:center}h1,h2,h3,h4,h5,h6{font-family:Palatino-Bold,Palatino-Roman,Cambria,"Times New Roman",Times,serif;font-weight:bold}time{display:block;color:#636568;font-family:Palatino-Italic,Palatino-Roman,Cambria,"Times New Roman",Times,serif;font-style:italic;text-align:center}form.search{margin-top:1.5em;text-align:center}form.search input[type=search]{-webkit-appearance:none;width:60%;margin:0 auto;border:1px solid #a7a7a7}form.search input[type=search]:focus{outline:none}
+/* normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:hover,a:active{outline:0}h1{font-size:2em;margin:0.67em 0}h2{font-size:1.5em;margin:0.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:0.83em;margin:1.67em 0}h6{font-size:0.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}pre,code,kbd,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.hll{background-color:#ffffcc}.c{color:#408080;font-style:italic}.err{border:1px solid #FF0000}.k{color:#008000;font-weight:bold}.o{color:#666666}.cm{color:#408080;font-style:italic}.cp{color:#BC7A00}.c1{color:#408080;font-style:italic}.cs{color:#408080;font-style:italic}.gd{color:#A00000}.ge{font-style:italic}.gr{color:#FF0000}.gh{color:#000080;font-weight:bold}.gi{color:#00A000}.go{color:#808080}.gp{color:#000080;font-weight:bold}.gs{font-weight:bold}.gu{color:#800080;font-weight:bold}.gt{color:#0040D0}.kc{color:#008000;font-weight:bold}.kd{color:#008000;font-weight:bold}.kn{color:#008000;font-weight:bold}.kp{color:#008000}.kr{color:#008000;font-weight:bold}.kt{color:#B00040}.m{color:#666666}.s{color:#BA2121}.na{color:#7D9029}.nb{color:#008000}.nc{color:#0000FF;font-weight:bold}.no{color:#880000}.nd{color:#AA22FF}.ni{color:#999999;font-weight:bold}.ne{color:#D2413A;font-weight:bold}.nf{color:#0000FF}.nl{color:#A0A000}.nn{color:#0000FF;font-weight:bold}.nt{color:#008000;font-weight:bold}.nv{color:#19177C}.ow{color:#AA22FF;font-weight:bold}.w{color:#bbbbbb}.mf{color:#666666}.mh{color:#666666}.mi{color:#666666}.mo{color:#666666}.sb{color:#BA2121}.sc{color:#BA2121}.sd{color:#BA2121;font-style:italic}.s2{color:#BA2121}.se{color:#BB6622;font-weight:bold}.sh{color:#BA2121}.si{color:#BB6688;font-weight:bold}.sx{color:#008000}.sr{color:#BB6688}.s1{color:#BA2121}.ss{color:#19177C}.bp{color:#008000}.vc{color:#19177C}.vg{color:#19177C}.vi{color:#19177C}.il{color:#666666}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;background-color:#f6f6f6}body{width:90%;max-width:35em;margin:1em auto;font-family:Palatino-Roman, Cambria, "Times New Roman", Times, serif}nav[role=navigation]{display:block;overflow:hidden;border-bottom:1px solid #a7a7a7}nav[role=navigation]>ul{list-style:none;margin:0;padding:0}nav[role=navigation]>ul li{float:left;margin-right:1em}header[role=banner]{display:block}article[role=main]{display:block}section{border-top:1px solid #a7a7a7}pre{overflow:auto;-webkit-overflow-scrolling:touch;text-shadow:none;word-wrap:normal;white-space:pre;padding:1em;background-color:#ffffff;border:1px solid #a7a7a7}code{color:#565757}footer[role=contentinfo]{display:block;text-align:center}a:link,a:visited{color:#0d1169;text-decoration:none}a:hover,a:active{color:#0d1169;text-decoration:underline}p,ul>li{line-height:1.5em}em{font-family:Palatino-Italic,Palatino-Roman,Cambria,"Times New Roman",Times,serif;font-style:italic}strong{font-family:Palatino-Bold,Palatino-Roman,Cambria,"Times New Roman",Times,serif;font-weight:bold}blockquote{font-family:Palatino-Italic,Palatino-Roman,Cambria,"Times New Roman",Times,serif;font-style:italic;font-size:1.2em}h1{text-align:center}h1,h2,h3,h4,h5,h6{font-family:Palatino-Bold,Palatino-Roman,Cambria,"Times New Roman",Times,serif;font-weight:bold}time{display:block;color:#636568;font-family:Palatino-Italic,Palatino-Roman,Cambria,"Times New Roman",Times,serif;font-style:italic;text-align:center}form.search{margin-top:1.5em;text-align:center}form.search input[type=search]{-webkit-appearance:none;width:60%;margin:0 auto;height:1.5em;border:1px solid #a7a7a7}form.search input[type=search]:focus{outline:none}form.search ::-webkit-input-placeholder,form.search :-moz-placeholder{height:1.5em}
View
4 feed/index.xml
@@ -4,7 +4,7 @@
<title>Alex Gibson, Front End Developer</title>
<link href="http://alxgbsn.co.uk/feed/" rel="self"/>
<link href="http://alxgbsn.co.uk/"/>
- <updated>2012-07-11T22:37:26+01:00</updated>
+ <updated>2012-07-15T20:48:44+01:00</updated>
<id>http://alxgbsn.co.uk/</id>
<author>
<name>Alex Gibson</name>
@@ -19,7 +19,7 @@
<id>http://alxgbsn.co.uk/2012/07/11/moving-to-jekyll-and-github-pages</id>
<content type="html">&lt;p&gt;I've just finished moving my site to a new home, which is now hosted on &lt;a href=&quot;http://pages.github.com/&quot;&gt;GitHub Pages&lt;/a&gt; and powered by &lt;a href=&quot;http://jekyllrb.com/&quot;&gt;Jekyll&lt;/a&gt;, the increasingly popular static site generator. Jekyll takes a template directory and then processes it to create a static website consisting of pure HTML files, which you can then host on your chosen web server.&lt;/p&gt;
-&lt;p&gt;For the past few years my old blog has served me pretty well. But I have been looking for something simpler and less cumbersome to update and maintain. Here are a list of reasons why I made the decision to choose Jekyll:&lt;/p&gt;
+&lt;p&gt;For the past few years my old blog has served me pretty well, but I've been looking for something simpler and less cumbersome to update and maintain. Here are a list of reasons why I made the decision to choose Jekyll:&lt;/p&gt;
&lt;h2&gt;Authoring new content&lt;/h2&gt;
View
34 index.html
@@ -5,9 +5,13 @@
<meta name="description" content="Alex Gibson is a front–end web developer from Newcastle upon Tyne, United Kingdom." />
<meta name="author" content="Alex Gibson" />
<meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="/css/styles.css" />
- <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="http://alxgbsn.co.uk/feed/" />
+
<title>Alex Gibson’s Dev Blog</title>
+
+ <link rel="stylesheet" href="/css/styles.css" />
+ <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="/feed/" />
+
+ <script src="/js/html5shiv.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33263279-1']);
@@ -20,17 +24,20 @@
</script>
</head>
<body>
- <nav role="navigation">
+
+<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
- <header role="banner">
- <h1>Alex Gibson’s Dev Blog</h1>
- </header>
- <article role="main">
+
+<header role="banner">
+ <h1>Alex Gibson’s Dev Blog</h1>
+</header>
+
+<article role="main">
<p>Hello there. I'm a front&ndash;end developer living in Newcastle upon Tyne, United Kingdom. I spend most of my time hacking on mobile browsers, and I maintain several open source projects on <a href="https://github.com/alexgibson">GitHub</a> including <a href="https://github.com/alexgibson/tap.js">tap.js</a> and <a href="https://github.com/alexgibson/shake.js">shake.js</a>. I also help out as a co-maintainer on the <a href="http://html5boilerplate.com/mobile">HTML5 Mobile Boilerplate project</a>.</p>
<h2>Blog posts</h2>
@@ -66,12 +73,17 @@
</ul>
</article>
- <form class="search" action="http://google.com/search" method="get">
- <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
- <input class="search" type="search" name="q" results="0" placeholder="Search"/>
+
+<form class="search" action="http://google.com/search" method="get">
+ <div role="search">
+ <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
+ <input class="search" type="search" name="q" results="0" placeholder="Search" x-webkit-speech />
+ </div>
</form>
- <footer role="contentinfo">
+
+<footer role="contentinfo">
<p>Copyright &copy; Alex Gibson | Powered by <a href="http://jekyllrb.com/">Jekyll</a>.</p>
</footer>
+
</body>
</html>
View
5 js/html5shiv.js
@@ -0,0 +1,5 @@
+(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
+a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}</style>";
+c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");
+var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,
+b){a||(a=f);if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);
View
34 projects/index.html
@@ -5,9 +5,13 @@
<meta name="description" content="Alex Gibson is a front–end web developer from Newcastle upon Tyne, United Kingdom." />
<meta name="author" content="Alex Gibson" />
<meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="/css/styles.css" />
- <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="http://alxgbsn.co.uk/feed/" />
+
<title>Open source projects</title>
+
+ <link rel="stylesheet" href="/css/styles.css" />
+ <link rel="alternate" type="application/rss+xml" title="Alex Gibson" href="/feed/" />
+
+ <script src="/js/html5shiv.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33263279-1']);
@@ -20,17 +24,20 @@
</script>
</head>
<body>
- <nav role="navigation">
+
+<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
- <header role="banner">
- <h1>Open source projects</h1>
- </header>
- <article role="main">
+
+<header role="banner">
+ <h1>Open source projects</h1>
+</header>
+
+<article role="main">
<p>All plugins and demo apps listed below are MIT licensed and available on <a href="http://github.com/alexgibson/">GitHub</a>.</p>
<section>
@@ -66,12 +73,17 @@
</section>
</article>
- <form class="search" action="http://google.com/search" method="get">
- <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
- <input class="search" type="search" name="q" results="0" placeholder="Search"/>
+
+<form class="search" action="http://google.com/search" method="get">
+ <div role="search">
+ <input type="hidden" name="q" value="site:alxgbsn.co.uk" />
+ <input class="search" type="search" name="q" results="0" placeholder="Search" x-webkit-speech />
+ </div>
</form>
- <footer role="contentinfo">
+
+<footer role="contentinfo">
<p>Copyright &copy; Alex Gibson | Powered by <a href="http://jekyllrb.com/">Jekyll</a>.</p>
</footer>
+
</body>
</html>
View
34 sitemap.xml
@@ -2,84 +2,84 @@
<urlset xmlns='http://www.sitemaps.org/schemas/sitemap/0.9'>
<url>
<loc>http://alxgbsn.co.uk/2010/06/26/targeting-iphone-4-using-css-media-queries</loc>
- <lastmod>2012-07-11T22:36:21+01:00</lastmod>
+ <lastmod>2012-07-15T20:44:54+01:00</lastmod>
</url>
<url>
<loc>
http://alxgbsn.co.uk/2010/10/30/new-sizes-attribute-in-ios-421-for-web-clip-icons
</loc>
- <lastmod>2012-07-11T22:36:21+01:00</lastmod>
+ <lastmod>2012-07-15T20:44:54+01:00</lastmod>
</url>
<url>
<loc>
http://alxgbsn.co.uk/2010/12/18/using-html5-localstorage-as-a-fallback-for-offline-form-submission
</loc>
- <lastmod>2012-07-11T22:36:21+01:00</lastmod>
+ <lastmod>2012-07-15T20:44:54+01:00</lastmod>
</url>
<url>
<loc>
http://alxgbsn.co.uk/2011/06/06/making-web-content-more-accessible-with-ios-voiceover
</loc>
- <lastmod>2012-07-11T22:36:21+01:00</lastmod>
+ <lastmod>2012-07-15T20:44:54+01:00</lastmod>
</url>
<url>
<loc>http://alxgbsn.co.uk/2011/08/16/event-delegation-for-touch-events-in-javascript</loc>
- <lastmod>2012-07-11T22:36:21+01:00</lastmod>
+ <lastmod>2012-07-15T20:44:54+01:00</lastmod>
</url>
<url>
<loc>http://alxgbsn.co.uk/2011/09/22/site-redesign-a-mobile-first-approach</loc>
- <lastmod>2012-07-11T22:36:21+01:00</lastmod>
+ <lastmod>2012-07-15T20:44:54+01:00</lastmod>
</url>
<url>
<loc>http://alxgbsn.co.uk/2011/10/03/building-a-playbook-webworks-app</loc>
- <lastmod>2012-07-11T22:36:21+01:00</lastmod>
+ <lastmod>2012-07-15T20:44:54+01:00</lastmod>
</url>
<url>
<loc>
http://alxgbsn.co.uk/2011/10/17/enable-css-active-pseudo-styles-in-mobile-safari
</loc>
- <lastmod>2012-07-11T22:36:21+01:00</lastmod>
+ <lastmod>2012-07-15T20:44:54+01:00</lastmod>
</url>
<url>
<loc>http://alxgbsn.co.uk/2011/10/24/ios-startup-images-using-css-media-queries</loc>
- <lastmod>2012-07-11T22:36:21+01:00</lastmod>
+ <lastmod>2012-07-15T20:44:54+01:00</lastmod>
</url>
<url>
<loc>http://alxgbsn.co.uk/2011/11/23/make-sure-to-use-correct-meta-viewport-syntax</loc>
- <lastmod>2012-07-11T22:36:21+01:00</lastmod>
+ <lastmod>2012-07-15T20:44:54+01:00</lastmod>
</url>
<url>
<loc>
http://alxgbsn.co.uk/2011/12/23/different-ways-to-trigger-touchcancel-in-mobile-browsers
</loc>
- <lastmod>2012-07-11T22:36:21+01:00</lastmod>
+ <lastmod>2012-07-15T20:44:54+01:00</lastmod>
</url>
<url>
<loc>
http://alxgbsn.co.uk/2012/03/12/tap-js-a-lightweight-tap-event-javascript-plugin
</loc>
- <lastmod>2012-07-11T22:36:21+01:00</lastmod>
+ <lastmod>2012-07-15T20:44:54+01:00</lastmod>
</url>
<url>
<loc>
http://alxgbsn.co.uk/2012/03/28/serving-ios-retina-startup-images-for-the-new-ipad
</loc>
- <lastmod>2012-07-11T22:36:21+01:00</lastmod>
+ <lastmod>2012-07-15T20:44:54+01:00</lastmod>
</url>
<url>
<loc>http://alxgbsn.co.uk/2012/07/11/moving-to-jekyll-and-github-pages</loc>
- <lastmod>2012-07-11T22:37:10+01:00</lastmod>
+ <lastmod>2012-07-15T20:48:30+01:00</lastmod>
</url>
<url>
<loc>http://alxgbsn.co.uk/contact/</loc>
- <lastmod>2012-07-11T22:37:10+01:00</lastmod>
+ <lastmod>2012-07-15T20:48:30+01:00</lastmod>
</url>
<url>
<loc>http://alxgbsn.co.uk/</loc>
- <lastmod>2012-07-11T22:37:10+01:00</lastmod>
+ <lastmod>2012-07-15T20:48:30+01:00</lastmod>
</url>
<url>
<loc>http://alxgbsn.co.uk/projects/</loc>
- <lastmod>2012-07-11T22:37:10+01:00</lastmod>
+ <lastmod>2012-07-15T20:48:30+01:00</lastmod>
</url>
</urlset>
Please sign in to comment.
Something went wrong with that request. Please try again.