Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Site updated at 2013-01-19 02:23:15 UTC

  • Loading branch information...
commit 364b0156dcb5c0f391e766cde49bcf03c95a64bb 1 parent 78d108f
TJ VanToll authored
Showing with 2,053 additions and 842 deletions.
  1. +4 −4 2012/02/20/CSS3-Color-Animations/index.html
  2. +4 −4 2012/02/27/Making-a-3D-Picture-Cube-with-CSS3/index.html
  3. +4 −4 2012/03/08/IE7-Attribute-Selector-Bugs/index.html
  4. +4 −4 2012/03/17/Styling-Disabled-Form-Fields/index.html
  5. +4 −4 2012/03/21/javascript-for-the-java-developer/index.html
  6. +4 −4 2012/05/02/showmodaldialog-what-it-is-and-why-you-should-never-use-it/index.html
  7. +4 −4 2012/06/10/browser-css-parsing-discrepancies/index.html
  8. +4 −4 2012/06/15/detecting-print-requests-with-javascript/index.html
  9. +4 −4 2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/index.html
  10. +4 −4 2012/07/07/the-ideal-less-workflow-with-git/index.html
  11. +4 −4 2012/07/10/default-browser-handling-of-the-css-text-transform-property/index.html
  12. +4 −4 2012/07/15/native-html5-number-picker-vs-jquery-uis-spinner-which-to-use/index.html
  13. +4 −4 2012/07/19/dom-element-references-as-global-variables/index.html
  14. +4 −4 2012/08/05/html5-form-validation-showing-all-error-messages/index.html
  15. +4 −4 2012/08/10/less-101-the-basics-of-the-css-preprocessor/index.html
  16. +4 −4 2012/08/16/subpixel-animation-issues-in-ie-less-than-9/index.html
  17. +4 −4 2012/08/19/onscroll-event-issues-on-mobile-browsers/index.html
  18. +4 −4 2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/index.html
  19. +4 −4 2012/08/28/google-analytics-excluding-visits-in-development-and-production/index.html
  20. +4 −4 2012/08/30/html5-form-validation-start-using-it-in-production-applications/index.html
  21. +4 −4 2012/09/14/using-jquery-ui-slider-to-polyfill-html5-input-type-range/index.html
  22. +4 −4 2012/09/19/using-the-attribute-selector-with-numeric-values/index.html
  23. +4 −4 2012/10/17/maxlength-constraint-validation-oddities/index.html
  24. +4 −4 2012/10/23/front-end-efficiency-the-top-ten/index.html
  25. +4 −4 2012/10/24/adding-pointers-to-jquery-ui-tooltips/index.html
  26. +4 −4 2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/index.html
  27. +4 −4 2012/11/10/creating-cross-browser-scrollable-tbody/index.html
  28. +4 −4 2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/index.html
  29. +4 −4 2013/01/01/enter-should-submit-forms-stop-messing-with-that/index.html
  30. +4 −4 2013/01/05/is-it-safe-to-use-the-body-as-a-top-level-container-yet/index.html
  31. +4 −4 2013/01/09/html5-hidden-attribute-browser-support/index.html
  32. +6 −4 2013/01/11/detecting-internet-explorer-without-jquery/index.html
  33. +438 −0 2013/01/18/keyboard-shortcuts-for-os-x-web-developers/index.html
  34. +151 −373 atom.xml
  35. +21 −7 blog/archives/index.html
  36. +1 −1  blog/categories/browsers/atom.xml
  37. +4 −4 blog/categories/browsers/index.html
  38. +1 −1  blog/categories/css/atom.xml
  39. +4 −4 blog/categories/css/index.html
  40. +1 −1  blog/categories/efficiency/atom.xml
  41. +4 −4 blog/categories/efficiency/index.html
  42. +1 −1  blog/categories/forms/atom.xml
  43. +4 −4 blog/categories/forms/index.html
  44. +1 −1  blog/categories/git/atom.xml
  45. +4 −4 blog/categories/git/index.html
  46. +1 −1  blog/categories/html/atom.xml
  47. +4 −4 blog/categories/html/index.html
  48. +1 −1  blog/categories/html5/atom.xml
  49. +4 −4 blog/categories/html5/index.html
  50. +1 −1  blog/categories/java/atom.xml
  51. +4 −4 blog/categories/java/index.html
  52. +1 −1  blog/categories/javascript/atom.xml
  53. +4 −4 blog/categories/javascript/index.html
  54. +1 −1  blog/categories/jquery-ui/atom.xml
  55. +4 −4 blog/categories/jquery-ui/index.html
  56. +1 −1  blog/categories/jquery/atom.xml
  57. +4 −4 blog/categories/jquery/index.html
  58. +1 −1  blog/categories/less/atom.xml
  59. +4 −4 blog/categories/less/index.html
  60. +1 −1  blog/categories/mobile/atom.xml
  61. +4 −4 blog/categories/mobile/index.html
  62. +166 −0 blog/categories/os-x/atom.xml
  63. +232 −0 blog/categories/os-x/index.html
  64. +166 −0 blog/categories/productivity/atom.xml
  65. +232 −0 blog/categories/productivity/index.html
  66. +1 −1  blog/categories/qunit/atom.xml
  67. +4 −4 blog/categories/qunit/index.html
  68. +1 −1  blog/categories/speaking/atom.xml
  69. +4 −4 blog/categories/speaking/index.html
  70. +1 −1  blog/categories/unit-testing/atom.xml
  71. +4 −4 blog/categories/unit-testing/index.html
  72. +1 −1  blog/categories/ux/atom.xml
  73. +4 −4 blog/categories/ux/index.html
  74. +185 −58 blog/index.html
  75. +58 −114 blog/page/2/index.html
  76. +109 −61 blog/page/3/index.html
  77. +65 −5 blog/page/4/index.html
  78. +4 −4 index.html
  79. +7 −3 sitemap.xml
  80. +4 −4 speaking/index.html
8 2012/02/20/CSS3-Color-Animations/index.html
View
@@ -455,6 +455,10 @@ <h1 class="entry-title">CSS3 Color Animations</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -490,10 +494,6 @@ <h1 class="entry-title">CSS3 Color Animations</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/02/27/Making-a-3D-Picture-Cube-with-CSS3/index.html
View
@@ -531,6 +531,10 @@ <h1 class="entry-title">Making a 3D Picture Cube with CSS3</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -566,10 +570,6 @@ <h1 class="entry-title">Making a 3D Picture Cube with CSS3</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/03/08/IE7-Attribute-Selector-Bugs/index.html
View
@@ -392,6 +392,10 @@ <h1 class="entry-title">IE7 Attribute Selector Bugs</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -427,10 +431,6 @@ <h1 class="entry-title">IE7 Attribute Selector Bugs</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/03/17/Styling-Disabled-Form-Fields/index.html
View
@@ -493,6 +493,10 @@ <h1 class="entry-title">Styling Disabled Form Fields</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -528,10 +532,6 @@ <h1 class="entry-title">Styling Disabled Form Fields</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/03/21/javascript-for-the-java-developer/index.html
View
@@ -196,6 +196,10 @@ <h1 class="entry-title">JavaScript for the Java Developer</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -231,10 +235,6 @@ <h1 class="entry-title">JavaScript for the Java Developer</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/05/02/showmodaldialog-what-it-is-and-why-you-should-never-use-it/index.html
View
@@ -396,6 +396,10 @@ <h1 class="entry-title">window.showModalDialog: What It is and Why You Should Ne
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -431,10 +435,6 @@ <h1 class="entry-title">window.showModalDialog: What It is and Why You Should Ne
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/06/10/browser-css-parsing-discrepancies/index.html
View
@@ -411,6 +411,10 @@ <h1 class="entry-title">Browser CSS Parsing Discrepancies</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -446,10 +450,6 @@ <h1 class="entry-title">Browser CSS Parsing Discrepancies</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/06/15/detecting-print-requests-with-javascript/index.html
View
@@ -528,6 +528,10 @@ <h1 class="entry-title">Detecting Print Requests with JavaScript</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -563,10 +567,6 @@ <h1 class="entry-title">Detecting Print Requests with JavaScript</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/index.html
View
@@ -314,6 +314,10 @@ <h1 class="entry-title">Creating a Native HTML 5 Datepicker with a Fallback to j
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -349,10 +353,6 @@ <h1 class="entry-title">Creating a Native HTML 5 Datepicker with a Fallback to j
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/07/07/the-ideal-less-workflow-with-git/index.html
View
@@ -503,6 +503,10 @@ <h1 class="entry-title">The Ideal LESS Workflow with git</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -538,10 +542,6 @@ <h1 class="entry-title">The Ideal LESS Workflow with git</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/07/10/default-browser-handling-of-the-css-text-transform-property/index.html
View
@@ -364,6 +364,10 @@ <h1 class="entry-title">Default Browser Handling of the CSS text-transform Prope
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -399,10 +403,6 @@ <h1 class="entry-title">Default Browser Handling of the CSS text-transform Prope
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/07/15/native-html5-number-picker-vs-jquery-uis-spinner-which-to-use/index.html
View
@@ -514,6 +514,10 @@ <h1 class="entry-title">Native HTML5 Number Picker and jQuery UI's Spinner - Whi
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -549,10 +553,6 @@ <h1 class="entry-title">Native HTML5 Number Picker and jQuery UI's Spinner - Whi
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/07/19/dom-element-references-as-global-variables/index.html
View
@@ -568,6 +568,10 @@ <h1 class="entry-title">DOM Element References as Global Variables</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -603,10 +607,6 @@ <h1 class="entry-title">DOM Element References as Global Variables</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/08/05/html5-form-validation-showing-all-error-messages/index.html
View
@@ -395,6 +395,10 @@ <h1 class="entry-title">HTML5 Form Validation - Showing All Error Messages</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -430,10 +434,6 @@ <h1 class="entry-title">HTML5 Form Validation - Showing All Error Messages</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/08/10/less-101-the-basics-of-the-css-preprocessor/index.html
View
@@ -196,6 +196,10 @@ <h1 class="entry-title">LESS 101 - The Basics of the CSS Preprocessor</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -231,10 +235,6 @@ <h1 class="entry-title">LESS 101 - The Basics of the CSS Preprocessor</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/08/16/subpixel-animation-issues-in-ie-less-than-9/index.html
View
@@ -278,6 +278,10 @@ <h1 class="entry-title">Subpixel Animation Issues in IE < 9</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -313,10 +317,6 @@ <h1 class="entry-title">Subpixel Animation Issues in IE < 9</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/08/19/onscroll-event-issues-on-mobile-browsers/index.html
View
@@ -331,6 +331,10 @@ <h1 class="entry-title">onscroll Event Issues on Mobile Browsers</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -366,10 +370,6 @@ <h1 class="entry-title">onscroll Event Issues on Mobile Browsers</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/index.html
View
@@ -544,6 +544,10 @@ <h1 class="entry-title">Logging Test Failures in a PhantomJS QUnit Runner</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -579,10 +583,6 @@ <h1 class="entry-title">Logging Test Failures in a PhantomJS QUnit Runner</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/08/28/google-analytics-excluding-visits-in-development-and-production/index.html
View
@@ -412,6 +412,10 @@ <h1 class="entry-title">Google Analytics - Excluding Your Own Visits in Developm
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -447,10 +451,6 @@ <h1 class="entry-title">Google Analytics - Excluding Your Own Visits in Developm
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/08/30/html5-form-validation-start-using-it-in-production-applications/index.html
View
@@ -255,6 +255,10 @@ <h1 class="entry-title">HTML5 Form Validation - Start Using it in Production App
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -290,10 +294,6 @@ <h1 class="entry-title">HTML5 Form Validation - Start Using it in Production App
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/09/14/using-jquery-ui-slider-to-polyfill-html5-input-type-range/index.html
View
@@ -282,6 +282,10 @@ <h1 class="entry-title">Using jQuery UI's Slider to Polyfill HTML5's input[type=
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -317,10 +321,6 @@ <h1 class="entry-title">Using jQuery UI's Slider to Polyfill HTML5's input[type=
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/09/19/using-the-attribute-selector-with-numeric-values/index.html
View
@@ -273,6 +273,10 @@ <h1 class="entry-title">Using the Attribute Selector with Numeric Values</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -308,10 +312,6 @@ <h1 class="entry-title">Using the Attribute Selector with Numeric Values</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/10/17/maxlength-constraint-validation-oddities/index.html
View
@@ -243,6 +243,10 @@ <h1 class="entry-title">maxlength Constraint Validation Oddities in Major Browse
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -278,10 +282,6 @@ <h1 class="entry-title">maxlength Constraint Validation Oddities in Major Browse
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/10/23/front-end-efficiency-the-top-ten/index.html
View
@@ -196,6 +196,10 @@ <h1 class="entry-title">Front End Efficiency - The Top Ten</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -231,10 +235,6 @@ <h1 class="entry-title">Front End Efficiency - The Top Ten</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/10/24/adding-pointers-to-jquery-ui-tooltips/index.html
View
@@ -213,6 +213,10 @@ <h1 class="entry-title">Adding Pointers to jQuery UI Tooltips</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -248,10 +252,6 @@ <h1 class="entry-title">Adding Pointers to jQuery UI Tooltips</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/index.html
View
@@ -324,6 +324,10 @@ <h1 class="entry-title">Creating a Polished Vertical Tabs Interaction with jQuer
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -359,10 +363,6 @@ <h1 class="entry-title">Creating a Polished Vertical Tabs Interaction with jQuer
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/11/10/creating-cross-browser-scrollable-tbody/index.html
View
@@ -292,6 +292,10 @@ <h1 class="entry-title">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -327,10 +331,6 @@ <h1 class="entry-title">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/index.html
View
@@ -258,6 +258,10 @@ <h1 class="entry-title">Debugging Print Stylesheets: Now Significantly Easier in
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -293,10 +297,6 @@ <h1 class="entry-title">Debugging Print Stylesheets: Now Significantly Easier in
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2013/01/01/enter-should-submit-forms-stop-messing-with-that/index.html
View
@@ -377,6 +377,10 @@ <h1 class="entry-title">The Enter Key should Submit Forms, Stop Suppressing it</
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -412,10 +416,6 @@ <h1 class="entry-title">The Enter Key should Submit Forms, Stop Suppressing it</
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2013/01/05/is-it-safe-to-use-the-body-as-a-top-level-container-yet/index.html
View
@@ -412,6 +412,10 @@ <h1 class="entry-title">Using the body Element as a Top Level Container - Is it
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -447,10 +451,6 @@ <h1 class="entry-title">Using the body Element as a Top Level Container - Is it
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
8 2013/01/09/html5-hidden-attribute-browser-support/index.html
View
@@ -215,6 +215,10 @@ <h1 class="entry-title">HTML 5 hidden Attribute Browser Support</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -250,10 +254,6 @@ <h1 class="entry-title">HTML 5 hidden Attribute Browser Support</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
10 2013/01/11/detecting-internet-explorer-without-jquery/index.html
View
@@ -250,6 +250,8 @@ <h1 class="entry-title">Detecting Internet Explorer without jQuery</h1>
<a class="basic-alignment left" href="/2013/01/09/html5-hidden-attribute-browser-support/" title="Previous Post: HTML 5 hidden Attribute Browser Support">&laquo; HTML 5 hidden Attribute Browser Support</a>
+ <a class="basic-alignment right" href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/" title="Next Post: Keyboard Shortcuts for OS X Web Developers">Keyboard Shortcuts for OS X Web Developers &raquo;</a>
+
</p>
</footer>
</article>
@@ -269,6 +271,10 @@ <h1 class="entry-title">Detecting Internet Explorer without jQuery</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -304,10 +310,6 @@ <h1 class="entry-title">Detecting Internet Explorer without jQuery</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
438 2013/01/18/keyboard-shortcuts-for-os-x-web-developers/index.html
View
@@ -0,0 +1,438 @@
+
+<!DOCTYPE html>
+<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
+<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
+<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
+<head>
+ <meta charset="utf-8">
+ <title>Keyboard Shortcuts for OS X Web Developers - TJ VanToll - Tutorials, Thoughts, and Ramblings on Front End Development</title>
+ <meta name="author" content="TJ VanToll">
+
+
+ <meta name="description" content="Recently some RSI
+-like symptoms in my right hand have forced me to re-evaluate my day to day computer usage. Since the symptoms are exclusively in &hellip;">
+
+
+ <!-- http://t.co/dKP3o1e -->
+ <meta name="HandheldFriendly" content="True">
+ <meta name="MobileOptimized" content="320">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+
+ <link rel="canonical" href="http://tjvantoll.com/2013/01/18/keyboard-shortcuts-for-os-x-web-developers">
+ <!-- Use custom favicon -->
+ <!--<link href="/favicon.png" rel="icon">-->
+ <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
+
+
+ <!--Custom script concatenation
+ <script src="/javascripts/modernizr-2.5.3.js"></script>
+
+ <script src="/javascripts/ender.js"></script>
+ <script src="/javascripts/octopress.js"></script>
+ <script src="/javascripts/PictureCube.js"></script>
+ <script src="/javascripts/ender.tipsy.js"></script>
+ <script src="/javascripts/blog.js"></script>
+ -->
+ <script src="/javascripts/build/scripts.js"></script>
+
+ <link href="/atom.xml" rel="alternate" title="TJ VanToll" type="application/atom+xml">
+ <style>
+ /* Fonts from Google"s Web font directory at http://google.com/webfonts */
+ @import url(http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic);
+ @import url(http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic);
+</style>
+
+
+ <script type="text/javascript">
+ if (window.location.host.indexOf('local') == -1) {
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-29179796-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ }
+ </script>
+
+
+</head>
+
+<body >
+ <header role="banner"><hgroup>
+ <div id="picture-cube"></div>
+ <h1><a href="/">TJ VanToll</a></h1>
+
+ <h2>Tutorials, Thoughts, and Ramblings on Front End Development</h2>
+
+</hgroup>
+
+</header>
+ <nav role="navigation"><ul class="subscription" data-subscription="rss">
+ <li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
+
+</ul>
+
+<form action="http://google.com/search" method="get">
+ <fieldset role="search">
+ <input type="hidden" name="q" value="site:tjvantoll.com" />
+ <input class="search" type="text" name="q" results="0" placeholder="Search"/>
+ </fieldset>
+</form>
+
+<ul class="main-navigation">
+ <li><a href="/blog">Blog</a></li>
+ <li><a href="/">About</a></li>
+ <li><a href="/blog/archives">Archives</a></li>
+ <li><a href="/speaking">Speaking</a></li>
+</ul>
+
+</nav>
+ <div id="main">
+ <div id="content">
+ <div>
+<article class="hentry" role="article">
+
+ <header>
+
+ <h1 class="entry-title">Keyboard Shortcuts for OS X Web Developers</h1>
+
+
+ <p class="meta">
+
+
+
+
+
+
+
+
+
+
+
+
+<time datetime="2013-01-18T20:46:00-05:00" pubdate data-updated="true">Jan 18<span>th</span>, 2013</time>
+
+ | <a href="#disqus_thread">Comments</a>
+
+ </p>
+
+ </header>
+
+
+<div class="entry-content"><p>Recently some <a href="http://en.wikipedia.org/wiki/Repetitive_strain_injury">RSI</a>
+-like symptoms in my right hand have forced me to re-evaluate my day to day computer usage. Since the symptoms are exclusively in my right hand, I decided to start by restricting my mouse usage as much as possible.</p>
+
+<p>To discourage my mouse using tendencies, I decided to only use the mouse left-handed. After a few minutes I found that my current repertoire of keyboard shortcuts did not meet my new mouse-free workflow.</p>
+
+<p>To build my keyboard portfolio, I&#8217;ve been accumulating a list of shortcuts I find handy near my desk. I thought I&#8217;d post the list here in case others might find them useful. This list is not intended to be comprehensive; these are merely shortcuts that I have found helpful. I&#8217;m happy to say that within a week of making this switch the symptoms in my right hand are virtually gone.</p>
+
+<h3>OS X</h3>
+
+<ul>
+<li><code>Control</code> + <code>←</code> → Move one space to the left</li>
+<li><code>Control</code> + <code>→</code> → Move one space to the right</li>
+<li><code>Control</code> + <code>↑</code> → Enter mission control</li>
+<li><code>Control</code> + <code>↓</code> → Leave mission control</li>
+<li><code>Command</code> + <code>Tab</code> → Switch applications</li>
+<li><code>Command</code> + <code>~</code> → Switch windows within an application</li>
+<li><code>Control</code> + <code>fn</code> + <code>F3</code> → Summon the dock (arrow keys are pretty intuitive from there)</li>
+</ul>
+
+
+<h4>Screenshots</h4>
+
+<ul>
+<li><code>Command</code> + <code>Shift</code> + <code>3</code> → Full page screenshot</li>
+<li><code>Command</code> + <code>Shift</code> + <code>4</code> → Screenshot of section of screen</li>
+<li><code>Command</code> + <code>Shift</code> + <code>4</code>, then <code>Space Bar</code> → Screenshot of application window</li>
+</ul>
+
+
+<h3>Finder</h3>
+
+<ul>
+<li><code>Command</code> + <code>O</code> → Open (useful for directories)</li>
+<li><code>Command</code> + <code>Delete</code> → Delete file</li>
+<li><code>Command</code> + <code>W</code> → Close Finder window</li>
+</ul>
+
+
+<h3>Browsers</h3>
+
+<ul>
+<li><code>Command</code> + <code>W</code> → Close current tab</li>
+<li><code>Command</code> + <code>Shift</code> + <code>W</code> → Close current window</li>
+<li><code>Command</code> + <code>1</code> → Switch to tab 1, works for <code>2</code> through <code>9</code> as well</li>
+<li><code>Control</code> + <code>Tab</code> → Switch to next tab</li>
+<li><code>Control</code> + <code>Shift</code> + <code>Tab</code> → Switch to previous tab</li>
+<li><code>Command</code> + <code>Shift</code> + <code>T</code> → Open previously closed tab</li>
+<li><code>Delete</code> OR <code>Command</code> + <code>[</code> → Back</li>
+<li><code>Command</code> + <code>]</code> → Forward</li>
+<li><code>Command</code> + <code>↑</code> → Scroll to top of page</li>
+<li><code>Command</code> + <code>↓</code> → Scroll to bottom of page</li>
+<li><code>Space Bar</code> → Page down</li>
+<li><code>Command</code> + <code>Option</code> + <code>U</code> → View Source (Chrome, Opera)</li>
+<li><code>Command</code> + <code>U</code> → View Source (Firefox)</li>
+<li><code>Command</code> + <code>Option</code> + <code>I</code> → Open Dev Tools</li>
+</ul>
+
+
+<p>I also make use of a <a href="https://chrome.google.com/webstore/detail/keyboard-shortcuts-to-reo/moigagbiaanpboaflikhdhgdfiifdodd">Chrome extension</a> that allows me to reorder tabs using <code>Control</code> + <code>Shift</code> + <code>Page Up</code> and <code>Control</code> + <code>Shift</code> + <code>Page Down</code>.</p>
+
+<h3>Sublime Text 2</h3>
+
+<ul>
+<li><code>Command</code> + <code>P</code> → Fuzzy search of files in current project
+
+<ul>
+<li>Start with <code>@</code> → Search symbols in current file</li>
+<li>Start with <code>#</code> → Search current file</li>
+<li>Start with <code>:</code> → Goto line number</li>
+</ul>
+</li>
+<li><code>Command</code> + <code>Shift</code> + <code>V</code> → Paste and indent</li>
+<li><code>Command</code> + <code>L</code> → Select current line (can be repeated to select multiple lines)</li>
+<li><code>Command</code> + <code>D</code> → Select word (repeat to select next occurrence for multiple editing)</li>
+<li><code>Command</code> + <code>Return</code> → Insert new line <em>after</em> current line</li>
+<li><code>Command</code> + <code>Shift</code> + <code>Return</code> → Insert new line <em>before</em> current line</li>
+<li><code>Command</code> + <code>/</code> → Comment out current line or selection</li>
+<li><code>Command</code> + <code>Option</code> + <code>/</code> → Block comment selection</li>
+<li><code>Control</code> + <code>Shift</code> + <code>K</code> → Delete current line</li>
+<li><code>Command</code> + <code>K</code> + <code>K</code> → Delete from cursor to <em>end</em> of the line</li>
+<li><code>Command</code> + <code>K</code> + <code>Delete</code> → Delete from cursor to the <em>start</em> of the line</li>
+<li><code>Control</code> + <code>Command</code> + <code>↑</code> → Move selected line(s) up</li>
+<li><code>Control</code> + <code>Command</code> + <code>↓</code> → Move selected line(s) down</li>
+</ul>
+
+
+<h4>Layout</h4>
+
+<ul>
+<li><code>Command</code> + <code>K</code> + <code>B</code> → Toggle sidebar display</li>
+<li><code>Command</code> + <code>Option</code> + <code>1</code> → One editor column</li>
+<li><code>Command</code> + <code>Option</code> + <code>2</code> → Two editor columns</li>
+<li><code>Command</code> + <code>Option</code> + <code>3</code> → Three editor columns</li>
+<li><code>Command</code> + <code>Option</code> + <code>4</code> → Four editor columns</li>
+<li><code>Command</code> + <code>Option</code> + <code>5</code> → Grid View (2 X 2)</li>
+<li><code>Control</code> + [<code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>] → Focus group</li>
+<li><code>Control</code> + <code>Shift</code> + [<code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>] → Move current file into group</li>
+</ul>
+
+
+<h3>Terminal</h3>
+
+<ul>
+<li><code>Control</code> + <code>A</code> → Move to <em>beginning</em> of line</li>
+<li><code>Control</code> + <code>E</code> → Move to <em>end</em> of line</li>
+<li><code>Control</code> + <code>U</code> → Clear text from cursor to the <em>beginning</em> of the line</li>
+<li><code>Control</code> + <code>K</code> → Clear text from cursor to the <em>end</em> of the line</li>
+<li><code>open .</code> → Open the current directory in a new Finder window</li>
+</ul>
+
+
+<h3>Twitter</h3>
+
+<ul>
+<li><code>?</code> → List all available keyboard shortcuts</li>
+<li><code>.</code> → Load new tweets</li>
+</ul>
+
+
+<h3>Gmail</h3>
+
+<ul>
+<li><code>?</code> → List all available keyboard shortcuts</li>
+<li><code>C</code> → Compose a new message</li>
+</ul>
+
+
+<h3>Applications</h3>
+
+<p>Being a Windows 7 user in a previous life, I miss <a href="http://www.techspot.com/blog/283/windows-7-improved-window-management-using-the-keyboard-hotkeys/">its really nice set of keyboard shortcuts to manage windows</a>.</p>
+
+<p>To help fill the gap on OS X, I&#8217;ve been using a 3rd party application, <a href="http://mizage.com/divvy/">Divvy</a>. It allows you to assign custom keyboard shortcuts to resize and align windows. I use <code>Control</code> + <code>Command</code> + <code>Space Bar</code> to activate Divvy. From there I have the following keys to resize windows predefined:</p>
+
+<ul>
+<li><code>D</code> → Dominant, left 5/6 of the screen</li>
+<li><code>S</code> → Sidebar, right 1/6 of the screen</li>
+<li><code>T</code> → Top half of screen</li>
+<li><code>B</code> → Bottom half of screen</li>
+<li><code>L</code> → Left half of screen</li>
+<li><code>R</code> → Right half of screen</li>
+</ul>
+
+</div>
+
+
+ <footer>
+ <p class="meta">
+
+
+
+<span class="byline author vcard">Posted by <span class="fn">TJ VanToll</span></span>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<time datetime="2013-01-18T20:46:00-05:00" pubdate data-updated="true">Jan 18<span>th</span>, 2013</time>
+
+
+<span class="categories">
+
+ <a class='category' href='/blog/categories/os-x/'>OS X</a>, <a class='category' href='/blog/categories/productivity/'>Productivity</a>
+
+</span>
+
+
+ </p>
+ <p class="author_card meta">
+ <img src="/images/me/1.jpg" alt="Me!" id="post_me" />
+ TJ VanToll is an avid web developer working for <a href="http://liquidweb.com">Liquid Web</a> and living in Lansing, MI. He is an open source advocate that is on the <a href="http://jqueryui.com">jQuery UI</a> team and publishes this blog <a href="https://github.com/tjvantoll/tjvantoll.github.com/tree/source">open source</a>. When not on the internet he is generally found <a href="/images/kids/2.jpg">brainwashing his children</a> and talking about himself in the third person. If you like hearing TJ talk about himself you should consider <a href="http://twitter.com/tjvantoll">following him on Twitter</a>.
+ </p>
+
+ <div class="sharing">
+
+ <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://tjvantoll.com/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/" data-via="tjvantoll" data-counturl="http://tjvantoll.com/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/" >Tweet</a>
+
+
+
+</div>
+
+
+ <p class="meta">
+
+ <a class="basic-alignment left" href="/2013/01/11/detecting-internet-explorer-without-jquery/" title="Previous Post: Detecting Internet Explorer without jQuery">&laquo; Detecting Internet Explorer without jQuery</a>
+
+
+ </p>
+ </footer>
+</article>
+
+ <section>
+ <h1>Comments</h1>
+ <div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+</div>
+ </section>
+
+</div>
+
+<aside class="sidebar">
+
+ <section>
+ <h1>Recent Posts</h1>
+ <ul id="recent_posts">
+
+ <li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
+ <a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
+ </li>
+
+ <li class="post">
+ <a href="/2013/01/09/html5-hidden-attribute-browser-support/">HTML 5 hidden Attribute Browser Support</a>
+ </li>
+
+ <li class="post">
+ <a href="/2013/01/05/is-it-safe-to-use-the-body-as-a-top-level-container-yet/">Using the body Element as a Top Level Container - Is it Safe Yet?</a>
+ </li>
+
+ <li class="post">
+ <a href="/2013/01/01/enter-should-submit-forms-stop-messing-with-that/">The Enter Key should Submit Forms, Stop Suppressing it</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/10/24/adding-pointers-to-jquery-ui-tooltips/">Adding Pointers to jQuery UI Tooltips</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
+ </li>
+
+ </ul>
+</section>
+<section >
+ <h1>Twitter</h1>
+ <a class="twitter-timeline" href="https://twitter.com/tjvantoll" data-widget-id="284127791589494784">Tweets by @tjvantoll</a>
+</section>
+<section class="jsdocs">
+ <h1><a href="http://promotejs.com">Promote JS!</a></h1>
+ <a href="https://developer.mozilla.org/en/JavaScript/Guide" title="JS Tutorial, JavaScript Tutorial, JavaScript Guide, Learn JavaScript JS, How To Learn JS, Learning JavaScript"><img src="http://static.jsconf.us/promotejshs.png" height="150" alt="JS Tutorial, JavaScript Tutorial, JavaScript Guide, Learn JavaScript JS, How To Learn JS, Learning JavaScript" width="180"></a></section>
+
+</aside>
+
+
+ </div>
+ </div>
+ <footer role="contentinfo"><p>
+ Copyright &copy; 2013 - <a href="/">TJ VanToll</a> -
+ <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
+</p>
+
+</footer>
+
+
+<script type="text/javascript">
+ var disqus_shortname = 'tjvantoll';
+
+
+ // var disqus_developer = 1;
+ var disqus_identifier = 'http://tjvantoll.com/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/';
+ var disqus_url = 'http://tjvantoll.com/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/';
+ var disqus_script = 'embed.js';
+
+ (function () {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ }());
+</script>
+
+
+
+
+
+
+
+ <script type="text/javascript">
+ (function(){
+ var twitterWidgets = document.createElement('script');
+ twitterWidgets.type = 'text/javascript';
+ twitterWidgets.async = true;
+ twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
+ document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
+ })();
+ </script>
+
+
+
+
+
+</body>
+</html>
524 atom.xml
View
@@ -4,7 +4,7 @@
<title><![CDATA[TJ VanToll]]></title>
<link href="http://tjvantoll.com/atom.xml" rel="self"/>
<link href="http://tjvantoll.com/"/>
- <updated>2013-01-13T12:32:56-05:00</updated>
+ <updated>2013-01-18T21:22:59-05:00</updated>
<id>http://tjvantoll.com/</id>
<author>
<name><![CDATA[TJ VanToll]]></name>
@@ -14,6 +14,156 @@
<entry>
+ <title type="html"><![CDATA[Keyboard Shortcuts for OS X Web Developers]]></title>
+ <link href="http://tjvantoll.com/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/"/>
+ <updated>2013-01-18T20:46:00-05:00</updated>
+ <id>http://tjvantoll.com/2013/01/18/keyboard-shortcuts-for-os-x-web-developers</id>
+ <content type="html"><![CDATA[<p>Recently some <a href="http://en.wikipedia.org/wiki/Repetitive_strain_injury">RSI</a>
+-like symptoms in my right hand have forced me to re-evaluate my day to day computer usage. Since the symptoms are exclusively in my right hand, I decided to start by restricting my mouse usage as much as possible.</p>
+
+<p>To discourage my mouse using tendencies, I decided to only use the mouse left-handed. After a few minutes I found that my current repertoire of keyboard shortcuts did not meet my new mouse-free workflow.</p>
+
+<p>To build my keyboard portfolio, I&#8217;ve been accumulating a list of shortcuts I find handy near my desk. I thought I&#8217;d post the list here in case others might find them useful. This list is not intended to be comprehensive; these are merely shortcuts that I have found helpful. I&#8217;m happy to say that within a week of making this switch the symptoms in my right hand are virtually gone.</p>
+
+<h3>OS X</h3>
+
+<ul>
+<li><code>Control</code> + <code>←</code> → Move one space to the left</li>
+<li><code>Control</code> + <code>→</code> → Move one space to the right</li>
+<li><code>Control</code> + <code>↑</code> → Enter mission control</li>
+<li><code>Control</code> + <code>↓</code> → Leave mission control</li>
+<li><code>Command</code> + <code>Tab</code> → Switch applications</li>
+<li><code>Command</code> + <code>~</code> → Switch windows within an application</li>
+<li><code>Control</code> + <code>fn</code> + <code>F3</code> → Summon the dock (arrow keys are pretty intuitive from there)</li>
+</ul>
+
+
+<h4>Screenshots</h4>
+
+<ul>
+<li><code>Command</code> + <code>Shift</code> + <code>3</code> → Full page screenshot</li>
+<li><code>Command</code> + <code>Shift</code> + <code>4</code> → Screenshot of section of screen</li>
+<li><code>Command</code> + <code>Shift</code> + <code>4</code>, then <code>Space Bar</code> → Screenshot of application window</li>
+</ul>
+
+
+<h3>Finder</h3>
+
+<ul>
+<li><code>Command</code> + <code>O</code> → Open (useful for directories)</li>
+<li><code>Command</code> + <code>Delete</code> → Delete file</li>
+<li><code>Command</code> + <code>W</code> → Close Finder window</li>
+</ul>
+
+
+<h3>Browsers</h3>
+
+<ul>
+<li><code>Command</code> + <code>W</code> → Close current tab</li>
+<li><code>Command</code> + <code>Shift</code> + <code>W</code> → Close current window</li>
+<li><code>Command</code> + <code>1</code> → Switch to tab 1, works for <code>2</code> through <code>9</code> as well</li>
+<li><code>Control</code> + <code>Tab</code> → Switch to next tab</li>
+<li><code>Control</code> + <code>Shift</code> + <code>Tab</code> → Switch to previous tab</li>
+<li><code>Command</code> + <code>Shift</code> + <code>T</code> → Open previously closed tab</li>
+<li><code>Delete</code> OR <code>Command</code> + <code>[</code> → Back</li>
+<li><code>Command</code> + <code>]</code> → Forward</li>
+<li><code>Command</code> + <code>↑</code> → Scroll to top of page</li>
+<li><code>Command</code> + <code>↓</code> → Scroll to bottom of page</li>
+<li><code>Space Bar</code> → Page down</li>
+<li><code>Command</code> + <code>Option</code> + <code>U</code> → View Source (Chrome, Opera)</li>
+<li><code>Command</code> + <code>U</code> → View Source (Firefox)</li>
+<li><code>Command</code> + <code>Option</code> + <code>I</code> → Open Dev Tools</li>
+</ul>
+
+
+<p>I also make use of a <a href="https://chrome.google.com/webstore/detail/keyboard-shortcuts-to-reo/moigagbiaanpboaflikhdhgdfiifdodd">Chrome extension</a> that allows me to reorder tabs using <code>Control</code> + <code>Shift</code> + <code>Page Up</code> and <code>Control</code> + <code>Shift</code> + <code>Page Down</code>.</p>
+
+<h3>Sublime Text 2</h3>
+
+<ul>
+<li><code>Command</code> + <code>P</code> → Fuzzy search of files in current project
+
+<ul>
+<li>Start with <code>@</code> → Search symbols in current file</li>
+<li>Start with <code>#</code> → Search current file</li>
+<li>Start with <code>:</code> → Goto line number</li>
+</ul>
+</li>
+<li><code>Command</code> + <code>Shift</code> + <code>V</code> → Paste and indent</li>
+<li><code>Command</code> + <code>L</code> → Select current line (can be repeated to select multiple lines)</li>
+<li><code>Command</code> + <code>D</code> → Select word (repeat to select next occurrence for multiple editing)</li>
+<li><code>Command</code> + <code>Return</code> → Insert new line <em>after</em> current line</li>
+<li><code>Command</code> + <code>Shift</code> + <code>Return</code> → Insert new line <em>before</em> current line</li>
+<li><code>Command</code> + <code>/</code> → Comment out current line or selection</li>
+<li><code>Command</code> + <code>Option</code> + <code>/</code> → Block comment selection</li>
+<li><code>Control</code> + <code>Shift</code> + <code>K</code> → Delete current line</li>
+<li><code>Command</code> + <code>K</code> + <code>K</code> → Delete from cursor to <em>end</em> of the line</li>
+<li><code>Command</code> + <code>K</code> + <code>Delete</code> → Delete from cursor to the <em>start</em> of the line</li>
+<li><code>Control</code> + <code>Command</code> + <code>↑</code> → Move selected line(s) up</li>
+<li><code>Control</code> + <code>Command</code> + <code>↓</code> → Move selected line(s) down</li>
+</ul>
+
+
+<h4>Layout</h4>
+
+<ul>
+<li><code>Command</code> + <code>K</code> + <code>B</code> → Toggle sidebar display</li>
+<li><code>Command</code> + <code>Option</code> + <code>1</code> → One editor column</li>
+<li><code>Command</code> + <code>Option</code> + <code>2</code> → Two editor columns</li>
+<li><code>Command</code> + <code>Option</code> + <code>3</code> → Three editor columns</li>
+<li><code>Command</code> + <code>Option</code> + <code>4</code> → Four editor columns</li>
+<li><code>Command</code> + <code>Option</code> + <code>5</code> → Grid View (2 X 2)</li>
+<li><code>Control</code> + [<code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>] → Focus group</li>
+<li><code>Control</code> + <code>Shift</code> + [<code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>] → Move current file into group</li>
+</ul>
+
+
+<h3>Terminal</h3>
+
+<ul>
+<li><code>Control</code> + <code>A</code> → Move to <em>beginning</em> of line</li>
+<li><code>Control</code> + <code>E</code> → Move to <em>end</em> of line</li>
+<li><code>Control</code> + <code>U</code> → Clear text from cursor to the <em>beginning</em> of the line</li>
+<li><code>Control</code> + <code>K</code> → Clear text from cursor to the <em>end</em> of the line</li>
+<li><code>open .</code> → Open the current directory in a new Finder window</li>
+</ul>
+
+
+<h3>Twitter</h3>
+
+<ul>
+<li><code>?</code> → List all available keyboard shortcuts</li>
+<li><code>.</code> → Load new tweets</li>
+</ul>
+
+
+<h3>Gmail</h3>
+
+<ul>
+<li><code>?</code> → List all available keyboard shortcuts</li>
+<li><code>C</code> → Compose a new message</li>
+</ul>
+
+
+<h3>Applications</h3>
+
+<p>Being a Windows 7 user in a previous life, I miss <a href="http://www.techspot.com/blog/283/windows-7-improved-window-management-using-the-keyboard-hotkeys/">its really nice set of keyboard shortcuts to manage windows</a>.</p>
+
+<p>To help fill the gap on OS X, I&#8217;ve been using a 3rd party application, <a href="http://mizage.com/divvy/">Divvy</a>. It allows you to assign custom keyboard shortcuts to resize and align windows. I use <code>Control</code> + <code>Command</code> + <code>Space Bar</code> to activate Divvy. From there I have the following keys to resize windows predefined:</p>
+
+<ul>
+<li><code>D</code> → Dominant, left 5/6 of the screen</li>
+<li><code>S</code> → Sidebar, right 1/6 of the screen</li>
+<li><code>T</code> → Top half of screen</li>
+<li><code>B</code> → Bottom half of screen</li>
+<li><code>L</code> → Left half of screen</li>
+<li><code>R</code> → Right half of screen</li>
+</ul>
+
+]]></content>
+ </entry>
+
+ <entry>
<title type="html"><![CDATA[Detecting Internet Explorer without jQuery]]></title>
<link href="http://tjvantoll.com/2013/01/11/detecting-internet-explorer-without-jquery/"/>
<updated>2013-01-11T17:26:00-05:00</updated>
@@ -2199,376 +2349,4 @@
]]></content>
</entry>
- <entry>
- <title type="html"><![CDATA[DOM Element References as Global Variables]]></title>
- <link href="http://tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/"/>
- <updated>2012-07-19T22:33:00-04:00</updated>
- <id>http://tjvantoll.com/2012/07/19/dom-element-references-as-global-variables</id>
- <content type="html"><![CDATA[<p>Quiz: What is logged when the following markup is rendered?</p>
-
-<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-<span class='line-number'>7</span>
-<span class='line-number'>8</span>
-<span class='line-number'>9</span>
-</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;html&gt;</span>
-</span><span class='line'> <span class="nt">&lt;head&gt;&lt;/head&gt;</span>
-</span><span class='line'> <span class="nt">&lt;body&gt;</span>
-</span><span class='line'> <span class="nt">&lt;button</span> <span class="na">id=</span><span class="s">&quot;bar&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
-</span><span class='line'> <span class="nt">&lt;script&gt;</span>
-</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">bar</span><span class="p">);</span>
-</span><span class='line'> <span class="nt">&lt;/script&gt;</span>
-</span><span class='line'> <span class="nt">&lt;/body&gt;</span>
-</span><span class='line'><span class="nt">&lt;/html&gt;</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a> obviously, right? Wrong. All major browser rendering engines will log a reference to the <code>&lt;button&gt;</code> node. This includes Trident (IE), Gecko (Firefox), WebKit (Chrome, Safari, etc), and Presto (Opera).</p>
-
-<h3>Wait. What?</h3>
-
-<p>Ah, I get it, there&#8217;s no doctype on that markup. So this a quirks mode only thing then right? Wrong. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=622491">As of Firefox 14</a> the latest version of all major browsers will produce the same result IN STANDARDS MODE.</p>
-
-<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-<span class='line-number'>7</span>
-<span class='line-number'>8</span>
-<span class='line-number'>9</span>
-<span class='line-number'>10</span>
-</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="cp">&lt;!DOCTYPE html&gt;</span>
-</span><span class='line'><span class="nt">&lt;html&gt;</span>
-</span><span class='line'> <span class="nt">&lt;head&gt;&lt;/head&gt;</span>
-</span><span class='line'> <span class="nt">&lt;body&gt;</span>
-</span><span class='line'> <span class="nt">&lt;button</span> <span class="na">id=</span><span class="s">&quot;bar&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
-</span><span class='line'> <span class="nt">&lt;script&gt;</span>
-</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">bar</span><span class="p">);</span> <span class="c1">//Reference to &lt;button&gt;, even in standards mode</span>
-</span><span class='line'> <span class="nt">&lt;/script&gt;</span>
-</span><span class='line'> <span class="nt">&lt;/body&gt;</span>
-</span><span class='line'><span class="nt">&lt;/html&gt;</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-
-
-<!--more-->
-
-
-<h3>So What&#8217;s Going On?</h3>
-
-<p>Believe it or not this is actually correct behavior per the HTML specification.</p>
-
-<blockquote><p>6.2.4 Named access on the Window object</p><p>The Window interface supports named properties. The supported property names at any moment consist of:</p><p>> the value of the name content attribute for all a, applet, area, embed, form, frame, frameset, iframe, img, and object elements in the active document that have a name content attribute, and<br/>> the value of the id content attribute of any HTML element in the active document with an id content attribute.</p><footer><strong>HTML Specification</strong> <cite><a href='http://www.whatwg.org/specs/web-apps/current-work/#named-access-on-the-window-object'>www.whatwg.org/specs/web-apps/&hellip;</a></cite></footer></blockquote>
-
-
-<p>What this is saying is that the value of the <code>name</code> attribute of certain elements and the value of the <code>id</code> attribute of ALL elements are accessible via the <code>window</code> object in the browser. So, if you have a node <code>&lt;button id="foo"&gt;&lt;/button&gt;</code>, then <code>window.foo</code> will be resolved to a reference to the <code>&lt;button&gt;</code>. From this point forward I will refer to this behavior as named access.</p>
-
-<h3>How is This Standard Behavior?</h3>
-
-<p>This behavior is an old Internet Explorer <em>feature</em>. I can only imagine that it was intended to be a convenience for web developers that got sick of typing <code>document.getElementById</code> over and over again. (this is way before jQuery and other popular toolkits came to be). Regardless of the reasoning, IE shipped with this functionality and a whole lot of people utilized it.</p>
-
-<p>Other rendering engines were faced with the difficult decision of implementing non-standard behavior or remaining incompatible with a slew of websites written specifically for Internet Explorer.</p>
-
-<p>Gecko implemented this functionality but originally turned it on only in quirks mode. They recently took the extra step and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=622491">turned named access on in standards mode with Firefox 14</a>.</p>
-
-<p>Webkit and Presto have had named access in standards mode for some time now. <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=11960">Webkit recently considered relegating this behavior to quirks mode</a>, however, they decided on leaving it enabled in standards mode. Apparently there is still just too much stuff out there relying on this behavior to remove it in standards mode. Believe it or not Microsoft even <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=737760">shipped a marketing demo</a> that directly referenced named DOM elements, preventing it from functioning in Gecko.</p>
-
-<p>One of the main aims of the HTML5 specification is to standardize browser behavior, however quirky it might be. Therefore, this functionality made it into the specification.</p>
-
-<h3>Why is This Behavior Bad?</h3>
-
-<p>I&#8217;ve alluded to the fact that this behavior is bad, but I&#8217;ve haven&#8217;t gotten into details as to why.</p>
-
-<h4>There is a high potential for bugs to be introduced into the system</h4>
-
-<p>Let&#8217;s say you have some code that looks something like this:</p>
-
-<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-<span class='line-number'>7</span>
-<span class='line-number'>8</span>
-<span class='line-number'>9</span>
-<span class='line-number'>10</span>
-<span class='line-number'>11</span>
-</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;html&gt;</span>
-</span><span class='line'> <span class="nt">&lt;head&gt;&lt;/head&gt;</span>
-</span><span class='line'> <span class="nt">&lt;body&gt;</span>
-</span><span class='line'> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">id=</span><span class="s">&quot;choice&quot;</span><span class="nt">&gt;&lt;/button&gt;</span>
-</span><span class='line'> <span class="nt">&lt;script&gt;</span>
-</span><span class='line'> <span class="kd">var</span> <span class="nx">choice</span> <span class="o">=</span> <span class="s1">&#39;foo&#39;</span><span class="p">;</span>
-</span><span class='line'> <span class="c1">//Lots more JavaScript</span>
-</span><span class='line'> <span class="nx">doSomethingVeryComplicated</span><span class="p">(</span><span class="nx">choice</span><span class="p">);</span>
-</span><span class='line'> <span class="nt">&lt;/script&gt;</span>
-</span><span class='line'> <span class="nt">&lt;/body&gt;</span>
-</span><span class='line'><span class="nt">&lt;/html&gt;</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>Since a global <code>choice</code> variable is being created, <code>window.choice</code> will resolve to the string <code>foo</code> and not a reference to the <code>&lt;input&gt;</code>. This is because the <code>&lt;input&gt;</code> reference is being <a href="http://en.wikipedia.org/wiki/Variable_shadowing">shadowed</a> by the variable declaration. This works the same way as a variable with the same name being declared in a nested function.</p>
-
-<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-<span class='line-number'>7</span>
-<span class='line-number'>8</span>
-<span class='line-number'>9</span>
-<span class='line-number'>10</span>
-</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-</span><span class='line'> <span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
-</span><span class='line'> <span class="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-</span><span class='line'> <span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">3</span><span class="p">;</span>
-</span><span class='line'> <span class="c1">//Logs 3 instead of 2 because the value defined in the outer</span>
-</span><span class='line'> <span class="c1">//function is shadowed by the x defined in the inner function.</span>
-</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">);</span>
-</span><span class='line'> <span class="p">};</span>
-</span><span class='line'> <span class="nx">y</span><span class="p">();</span>
-</span><span class='line'><span class="p">}());</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>This is all well and good. However, let&#8217;s say that during a refactor of this code the <code>var choice = 'foo';</code> line is accidentally removed. Under normal circumstances this would cause a ReferenceError because <code>window.choice</code> would now be undefined. However, because there is a DOM node with an <code>id</code> of <code>choice</code>, that reference will now refer to the DOM node instead. This can easily lead to unexpected behavior.</p>
-
-<p>The flip side of this situation is also true. If you have an element <code>&lt;div id="bar"&gt;&lt;/div&gt;</code> and use <code>window.bar</code> to refer to it, that code will break if you create JavaScript variable using <code>var</code> in the same scope (i.e. <code>var bar = 2;</code>).</p>
-
-<h4>Mistyping</h4>
-
-<p>Say you mistype the name of your variable and happen to type a named DOM element. SURPRISE!</p>
-
-<h4>Non-trivial cost for the browser to implement</h4>
-
-<p>In order for these named elements to be available, the browser has to create a list of all named elements and maintain it as the page changes. I can&#8217;t offer any specific metrics as to how much time and memory this takes, but there is a cost, especially on pages with a large number of named elements.</p>
-
-<h4>Named elements will be shadowed by properties natively defined on <code>window</code>.</h4>
-
-<p>If you <em>were</em> to go the route of using named access you&#8217;d have to be careful to avoid using named elements with values that are predefined on the <code>window</code> already.</p>
-
-<p>For example you cannot refer to a <code>&lt;input id="location"&gt;</code> by <code>window.location</code> because that <a href="https://developer.mozilla.org/en/DOM/window.location">already resolves to an object</a> with information about the URL of the current document.</p>
-
-<p>There are a number of other property names on the <code>window</code> object that you could easily see being used to name a DOM element - <code>event</code>, <code>history</code>, <code>name</code>, <code>self</code>, <code>status</code>, and <code>toolbar</code> to name a few.</p>
-
-<h4>Browsers have inconsistent implementations.</h4>
-
-<p>Even though this is behavior is now standardized, there are still browser quirks in the way named access is implemented.</p>
-
-<h5>IE and Form Elements</h5>
-
-<p>IE will (incorrectly) make the <code>name</code> attribute of form elements available on the <code>window</code> object.</p>
-
-<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-<span class='line-number'>7</span>
-<span class='line-number'>8</span>
-<span class='line-number'>9</span>
-<span class='line-number'>10</span>
-<span class='line-number'>11</span>
-<span class='line-number'>12</span>
-<span class='line-number'>13</span>
-<span class='line-number'>14</span>
-</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="cp">&lt;!DOCTYPE html&gt;</span>
-</span><span class='line'><span class="nt">&lt;html&gt;</span>
-</span><span class='line'> <span class="nt">&lt;head&gt;&lt;/head&gt;</span>
-</span><span class='line'> <span class="nt">&lt;body&gt;</span>
-</span><span class='line'> <span class="nt">&lt;form&gt;</span>
-</span><span class='line'> <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">&quot;foo&quot;</span> <span class="nt">/&gt;</span>
-</span><span class='line'> <span class="nt">&lt;/form&gt;</span>
-</span><span class='line'> <span class="nt">&lt;script&gt;</span>
-</span><span class='line'> <span class="c1">//Logs a reference to the &lt;input&gt; in IE.</span>
-</span><span class='line'> <span class="c1">//ReferenceError in all other rendering engines.</span>
-</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">foo</span><span class="p">);</span>
-</span><span class='line'> <span class="nt">&lt;/script&gt;</span>
-</span><span class='line'> <span class="nt">&lt;/body&gt;</span>
-</span><span class='line'><span class="nt">&lt;/html&gt;</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<h5>Name Attribute on Anchor Tags</h5>
-
-<p>Per the spec, <code>&lt;a&gt;</code> tags should be accessible on the <code>window</code> object via the value of their <code>name</code> attribute. However, this only works in IE and Opera.</p>
-
-<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-<span class='line-number'>7</span>
-<span class='line-number'>8</span>
-<span class='line-number'>9</span>
-<span class='line-number'>10</span>
-<span class='line-number'>11</span>
-<span class='line-number'>12</span>
-</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="cp">&lt;!DOCTYPE html&gt;</span>
-</span><span class='line'><span class="nt">&lt;html&gt;</span>
-</span><span class='line'> <span class="nt">&lt;head&gt;&lt;/head&gt;</span>
-</span><span class='line'> <span class="nt">&lt;body&gt;</span>
-</span><span class='line'> <span class="nt">&lt;a</span> <span class="na">name=</span><span class="s">&quot;foo&quot;</span><span class="nt">&gt;&lt;/a&gt;</span>
-</span><span class='line'> <span class="nt">&lt;script&gt;</span>
-</span><span class='line'> <span class="c1">//Logs a reference to the &lt;a&gt; in IE and Opera.</span>
-</span><span class='line'> <span class="c1">//ReferenceError in Gecko and WebKit.</span>
-</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">foo</span><span class="p">);</span>
-</span><span class='line'> <span class="nt">&lt;/script&gt;</span>
-</span><span class='line'> <span class="nt">&lt;/body&gt;</span>
-</span><span class='line'><span class="nt">&lt;/html&gt;</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<h5>Multiple Named Attributes with the Same Value</h5>
-
-<p>Per this portion of the spec:</p>
-
-<blockquote><p>&#8230;if elements has only one element, return that element and abort these steps.</p><p>Otherwise return an HTMLCollection rooted at the Document node, whose filter matches only named elements with the name name.</p><footer><strong>HTML Specification</strong> <cite><a href='http://dev.w3.org/html5/spec/single-page.html#dom-window-nameditem'>dev.w3.org/html5/spec/&hellip;</a></cite></footer></blockquote>
-
-
-<p>What this is staying is that when there are multiple named properties with the same name, the browser should return an array when that property is referenced (instead of a reference to a specific DOM node). As an example given this markup:</p>
-
-<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-<span class='line-number'>7</span>
-<span class='line-number'>8</span>
-<span class='line-number'>9</span>
-<span class='line-number'>10</span>
-<span class='line-number'>11</span>
-</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="cp">&lt;!DOCTYPE html&gt;</span>
-</span><span class='line'><span class="nt">&lt;html&gt;</span>
-</span><span class='line'> <span class="nt">&lt;head&gt;&lt;/head&gt;</span>
-</span><span class='line'> <span class="nt">&lt;body&gt;</span>
-</span><span class='line'> <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">&quot;one&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'> <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">&quot;one&quot;</span><span class="nt">&gt;</span>
-</span><span class='line'> <span class="nt">&lt;script&gt;</span>
-</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">one</span><span class="p">);</span>
-</span><span class='line'> <span class="nt">&lt;/script&gt;</span>
-</span><span class='line'> <span class="nt">&lt;/body&gt;</span>
-</span><span class='line'><span class="nt">&lt;/html&gt;</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>&#8230;an array with references to the two <code>&lt;input&gt;</code> nodes should be logged per the spec. And it will be in all browsers except Firefox. Firefox 14 will simply log the first element.</p>
-
-<p>Having two elements with the same <code>id</code> is invalid HTML, but the browser will still render it just fine. Even with the best of intentions these sorts of things do happen, especially in larger, dynamic applications.</p>
-
-<h3>More?</h3>
-
-<p>These are simply the bugs that I&#8217;ve ran into, I&#8217;m sure there are more. If you know of any let me know in the comments and I can update this list.</p>
-
-<h3>But won&#8217;t strict mode prevent this?</h3>
-
-<p><a href="https://developer.mozilla.org/en/JavaScript/Strict_mode">ECMAScript 5 strict mode</a> prevents you assigning values to variables before they are declared. Therefore this&#8230;</p>
-
-<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-</span><span class='line'> <span class="nx">foo</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
-</span><span class='line'><span class="p">}());</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>will execute just fine whereas this&#8230;</p>
-
-<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-</span><span class='line'> <span class="s1">&#39;use strict&#39;</span><span class="p">;</span>
-</span><span class='line'> <span class="nx">foo</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
-</span><span class='line'><span class="p">}());</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>&#8230;will produce a ReferenceError that <code>foo</code> is not defined. This is great, but it will not stop you from accessing named properties on the <code>window</code> object.</p>
-
-<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-<span class='line-number'>7</span>
-</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;foo&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
-</span><span class='line'><span class="nt">&lt;script&gt;</span>
-</span><span class='line'> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-</span><span class='line'> <span class="s1">&#39;use strict&#39;</span><span class="p">;</span>
-</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">foo</span><span class="p">);</span>
-</span><span class='line'> <span class="p">});</span>
-</span><span class='line'><span class="nt">&lt;/script&gt;</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>This will log a reference to the <code>&lt;div&gt;</code> in standards mode in the latest version of all modern browsers. Strict mode will only prevent you from assigning values to variables that have yet to be declared. If you&#8217;re simply using a variable then strict mode doesn&#8217;t protect you. Therefore, you&#8217;re not prevented from accessing name properties on the global <code>window</code> object.</p>
-
-<h3>What to do instead</h3>
-
-<p>Use <code>document.getElementById</code> to retrieve references to DOM nodes via their <code>id</code> attribute.</p>
-
-<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;button</span> <span class="na">id=</span><span class="s">&quot;foo&quot;</span><span class="nt">&gt;&lt;/button&gt;</span>
-</span><span class='line'>
-</span><span class='line'><span class="nt">&lt;script&gt;</span>
-</span><span class='line'> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;foo&#39;</span><span class="p">);</span>
-</span><span class='line'><span class="nt">&lt;/script&gt;</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>To get a reference to a DOM node via its <code>name</code> attribute you can use <code>document.getElementsByName</code> or <code>document.querySelectorAll</code>.</p>
-
-<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;a</span> <span class="na">name=</span><span class="s">&quot;bar&quot;</span><span class="nt">&gt;&lt;/a&gt;</span>
-</span><span class='line'>
-</span><span class='line'><span class="nt">&lt;script&gt;</span>
-</span><span class='line'> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByName</span><span class="p">(</span><span class="s1">&#39;bar&#39;</span><span class="p">);</span>
-</span><span class='line'> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">&#39;[name=bar]&#39;</span><span class="p">);</span>
-</span><span class='line'><span class="nt">&lt;/script&gt;</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p><code>document.querySelectorAll</code> is not safe to use in IE &lt;= 8, but <code>document.getElementsByName</code> is safe to use in all browsers.</p>
-
-<h3>Conclusion</h3>
-
-<p>All major browsers now make named properties available on the global <code>window</code> object in standards mode. It&#8217;s important to know that browsers do this because you&#8217;ll likely run into this at some point. However, never purposely utilize this functionality. If you see others use it tell them to stop, ridicule them, do whatever it takes. Help <a href="http://movethewebforward.org/">move the web forward</a>.</p>
-
-<h3>Update September 24th, 2012</h3>
-
-<p>Per comments from Rob W I&#8217;ve updated the following:</p>
-
-<ul>
-<li>I had incorrectly used &#8220;Syntax error&#8221; to describe the situation when an undeclared variable is referenced. I updated those to correctly use &#8220;ReferenceError&#8221;.</li>
-<li>I updated my last example to show that <code>document.getElementsByName</code> is a cross browser way of getting reference to DOM nodes by their name attribute.</li>
-</ul>
-
-]]></content>
- </entry>
-
</feed>
28 blog/archives/index.html
View
@@ -9,9 +9,9 @@
<meta name="author" content="TJ VanToll">
- <meta name="description" content="Blog Archive 2013 Detecting Internet Explorer without jQuery
-Jan 11 2013 posted in JavaScript, jQuery HTML 5 hidden Attribute Browser Support
-Jan 09 &hellip;">
+ <meta name="description" content="Blog Archive 2013 Keyboard Shortcuts for OS X Web Developers
+Jan 18 2013 posted in OS X, Productivity Detecting Internet Explorer without jQuery
+Jan &hellip;">
<!-- http://t.co/dKP3o1e -->
@@ -111,6 +111,20 @@ <h1 class="entry-title">Blog Archive</h1>
<article>
+<h1><a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a></h1>
+<time datetime="2013-01-18T20:46:00-05:00" pubdate><span class='month'>Jan</span> <span class='day'>18</span> <span class='year'>2013</span></time>
+
+<footer>
+ <span class="categories">posted in <a class='category' href='/blog/categories/os-x/'>OS X</a>, <a class='category' href='/blog/categories/productivity/'>Productivity</a></span>
+</footer>
+
+
+</article>
+
+
+
+<article>
+
<h1><a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a></h1>
<time datetime="2013-01-11T17:26:00-05:00" pubdate><span class='month'>Jan</span> <span class='day'>11</span> <span class='year'>2013</span></time>
@@ -572,6 +586,10 @@ <h1 class="entry-title">Blog Archive</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -607,10 +625,6 @@ <h1 class="entry-title">Blog Archive</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
2  blog/categories/browsers/atom.xml
View
@@ -4,7 +4,7 @@
<title><![CDATA[Category: Browsers | TJ VanToll]]></title>
<link href="http://tjvantoll.com/blog/categories/browsers/atom.xml" rel="self"/>
<link href="http://tjvantoll.com/"/>
- <updated>2013-01-13T12:32:56-05:00</updated>
+ <updated>2013-01-18T21:22:59-05:00</updated>
<id>http://tjvantoll.com/</id>
<author>
<name><![CDATA[TJ VanToll]]></name>
8 blog/categories/browsers/index.html
View
@@ -346,6 +346,10 @@ <h1 class="entry-title">Category: Browsers</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -381,10 +385,6 @@ <h1 class="entry-title">Category: Browsers</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
2  blog/categories/css/atom.xml
View
@@ -4,7 +4,7 @@
<title><![CDATA[Category: CSS | TJ VanToll]]></title>
<link href="http://tjvantoll.com/blog/categories/css/atom.xml" rel="self"/>
<link href="http://tjvantoll.com/"/>
- <updated>2013-01-13T12:32:56-05:00</updated>
+ <updated>2013-01-18T21:22:59-05:00</updated>
<id>http://tjvantoll.com/</id>
<author>
<name><![CDATA[TJ VanToll]]></name>
8 blog/categories/css/index.html
View
@@ -304,6 +304,10 @@ <h1 class="entry-title">Category: CSS</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
@@ -339,10 +343,6 @@ <h1 class="entry-title">Category: CSS</h1>
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
- <li class="post">
- <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
- </li>
-
</ul>
</section>
<section >
2  blog/categories/efficiency/atom.xml
View
@@ -4,7 +4,7 @@
<title><![CDATA[Category: Efficiency | TJ VanToll]]></title>
<link href="http://tjvantoll.com/blog/categories/efficiency/atom.xml" rel="self"/>
<link href="http://tjvantoll.com/"/>
- <updated>2013-01-13T12:32:56-05:00</updated>
+ <updated>2013-01-18T21:22:59-05:00</updated>
<id>http://tjvantoll.com/</id>
<author>
<name><![CDATA[TJ VanToll]]></name>
8 blog/categories/efficiency/index.html
View
@@ -133,6 +133,10 @@ <h1 class="entry-title">Category: Efficiency</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2013/01/18/keyboard-shortcuts-for-os-x-web-developers/">Keyboard Shortcuts for OS X Web Developers</a>
+ </li>
+
+ <li class="</