Anyway, I thought maybe someone could benefit from seeing what I keep in rotation. If you have any suggestions, or if there are any glaring omissions, I hope you'll let me know (you can find ways to reply below). You can check out these links individually, or you can import the full list's OPML file.

• 24 ways (feed)
• 2ality - technology, life (feed)
• The A11Y Project (feed)
• Adactio (feed)
• Adactio: Links (feed)
• Adrian Roselli (feed)
• Axess Lab (feed)
• Ben Frain (feed)
• Bocoup Web Log (feed)
• Brad Frost - Links (feed)
• Brad Frost - Posts (feed)
• Bram.us (feed)
• BrettTerpstra.com (feed)
• Bruce Lawson's personal site (feed)
• bryanlrobinson.com (feed)
• Chris Coyier (feed)
• Clagnut (feed)
• Coder's Block (feed)
• Coding Horror (feed)
• Codrops (feed)
• CSS In Real Life (feed)
• CSS-Tricks (feed)
• daverupert.com (feed)
• dbushell.com (feed)
• Digging Into WordPress (feed)
• djf.log() (feed)
• Eli Grey (feed)
• The Every Layout Blog (feed)
• Geoff Graham (feed)
• Go Make Things (feed)
• Good Blog, Karl (feed)
• HeydonWorks (feed)
• hicksdesign - journal (feed)
• Hidde's blog (feed)
• HTML Accessibility (feed)
• Inconsistently Insightful (feed)
• Information is Beautiful (feed)
• Jim Nielsen’s Blog (feed)
• Jim Nielsen’s Notes (feed)
• John Resig’s Blog (feed)
• Keith J. Grant (feed)
• Kitty Giraudel (feed)
• Lea Verou (feed)
• Let's Encrypt (feed)
• Lisi Linhart's Blog (feed)
• Manuel Matuzović - Today I Learned (feed)
• Manuel Matuzović - Web development blog (feed)
• Marco's accessibility blog (feed)
• marcus.io (feed)
• Mathias Bynens (feed)
• Michael Thiessen's Blog (feed)
• Mike Davidson (feed)
• Mike Street's Blog (feed)
• Mike Taylr Dot Com Web Log (feed)
• Modern Web Development with Chrome (feed)
• Human Who Codes (feed)
• Painfully Obvious » JavaScript (feed)
• Paul Irish (feed)
• Perishable Press (feed)
• Photo Matt (feed)
• phpied.com (feed)
• QuirksBlog (feed)
• Read the Tea Leaves (feed)
• remy sharp's b:log (feed)
• Renaissance Geek (feed)
• Rey Bango (feed)
• The Shape of Everything (feed)
• Simon Willison's Weblog (feed)
• snook.ca - a collection of tips, tricks and bookmarks in web development (feed)
• Stefan Judis Web Development (feed)
• Stopdesign (feed)
• Stubbornella (feed)
• Tab Atkins (feed)
• Tania Rascia | RSS Feed (feed)
• TheCodeBarbarian.com (feed)
• Thoughts From Eric (feed)
• Timo Tijhof (feed)
• Tink - Léonie Watson - On technology, food & life in the digital age (feed)
• Trys Mudford's Blog (feed)
• Vue Mastery (feed)
• zachleat.com (feed)
• WordPress Development Blog (feed)
• XML-RSS Feed for Anselm Hannemann’s Writings (feed)
• Zeldman Daily Report (feed)
• Zell Liew (feed)

<a href="https://example.com">
  <h3>heading</h3>
  <div>excerpt</div>
</a>

With HTML 4.01, you could probably get away with it, though you might be shamed into removing your badge. With XHTML and the "proper" application/xhtml+xml mime type, however, a browser might stop rendering the page altogether.

At one point (many years ago) I resorted to writing a Big Link jQuery plugin to handle this scenario. If you assigned a class of big-link to a containing element, the plugin would find the first href attribute among its inner elements. Clicking anywhere in the container would trigger location.href = [innerElement's href]. All that was left was a splash of CSS to fake the link

.big-link {
  cursor: pointer;
}
.big-link:hover a {
  text-decoration: underline;
}

Something about that felt dirty, though. I mean, sure, it was "progressive enhancement" in a way, but the idea of using JavaScript to do what an anchor element gives us for free was like paying extra for a knock-off brand. In my experience, JavaScript solutions get more complicated the more I think about them, and this one is no exception. To be consistent with browsers, I'd also have to account for ⇧+click, ^+click, and ⌘+click behaviors—which I'm sure I didn't even consider back then.

Fortunately, this issue is moot with HTML5, because it does allow block-level elements inside anchors. As long as the <a> is given a display value of block (or flex or grid etc.), its contents should behave and render as expected.

Linking a table row

And yet, even the more tolerant HTML5 doesn't account for every edge case. A table row, for example, can only have a thead or a tbody as its parent, and it can only have a th or td as its direct child. So, how can we link the entire row when we can neither wrap the <tr> nor wrap its children in a link?

One possibility that I've seen suggested is to wrap each table cell in a link with the same href, while giving all but the first link tabindex="-1":

<tr>
  <td><a href="https://example.com">one</a></td>
  <td><a tabindex="-1" href="https://example.com">two</a></td>
  <td><a tabindex="-1" href="https://example.com">three</a></td>
</tr>

Better than nothing, I suppose, but still not ideal.

The best solution I know of here is to only include one link and use the ::after pseudo-element to stretch that link across the row. If we had a table in which the first cell of each row included a link we wanted to stretch across, the CSS might look something like this [Edit: I had to add a transform rule to the row to get it to work in Safari]:

tr.link-row {
  position: relative;
  transform: translateX(0);
}
tr.link-row td:first-child > a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

And here is the result, with only one link per row:

My only concern is that the non-link text (in columns 2 and 3 here) is no longer selectable by the user. Is this a major accessibility blunder? I suppose there's a way to accommodate user selection by listening for mousedown and mousemove events. But then we'd also have to account for double-clicking to select as well. Again, JavaScript solutions get complicated. I can't think of an elegant way around this.

I ran into this situation a few days ago, except the last cell in each row had a button that needed to be clickable. Fortunately, the button had a fixed width, so I just needed to adjust the link's width like so:

td:first-child > a::after {
  /* other stuff */
  width: calc(100% - 3.75rem);
}

The site worked pretty well, too. It loaded quickly and looked about as okay as you'd expect of something built by a design-challenged developer like myself. But after a couple years of posting sporadically for an audience of maybe a handful of people, I started to lose interest and let the site lay dormant.

All in with JS

Then in 2015 I came across Metalsmith, another static site generator, but this one written in JavaScript, my programming language BFF. Here was my chance to rebuild the site with the language I loved and, in the process, reignite my blogging flame. Well, I rebuilt it, but I must have lost my matches because I didn't even have a spark of interest in writing anything new.

Now here I am once more, slapping on a fresh new coat of paint. There wasn't anything particularly wrong with Metalsmith, but I hadn't been keeping up with its updates and I was getting tired of seeing all the security warnings that Snyk and dependabot were sending my way, even though I knew they were largely irrelevant. The vulnerabilities exist in an online context, and I only used the tool to build the site on my local machine. That's one of the advantages of a static site, after all.

This latest iteration of the blog is using Astro, another JavaScript-based static site generator. I've really enjoyed working with Astro. Most of the process has been pain free with only a few snags along the way. One question that has been dogging me, though, is, "Why didn't I use Eleventy instead?" I've heard wonderful things about it, and I think its creator, Zach Leatherman, is a super great guy. I honestly can't explain what drove me to use Astro. I don't regret it, but I still have that nagging feeling. Anyway, the new code is up on Github.

What I like about Astro

There is a lot to like about Astro. First, the way it continues the tradition of creating URLs from a directory of Markdown files is a relief and a joy. I like its concept of "collections" and the flexibility with which it handles front matter. I could pretty much drop my existing files into a new directory, adjust some configuration, and have a baseline blog running with the new system in a matter of minutes. Second, the hot-module reloading is super fast. I could work on templates, layouts, and styles and receive nearly instantaneous updates in the browser.

The integrations are another terrific aspect of Astro. For this blog I included Tailwind CSS, sitemap, image, and compression integrations. I also initially had the RSS integration installed, but I swapped it out for a node-based feed generator that also supports Atom and JSON formats. The site had been using Atom, so I thought it would be rude to my 3 or 4 followers to discontinue that without warning. there is an unofficial Service Worker integration that I've been considering, but I'm not sure it's worth using Service Workers here. It's just a blog, not an app, and it loads incredibly fast. I can't imagine anyone wanting to continue navigating around the site in offline mode or adding it to their home screen, but if people start clamoring for it, I'll reconsider (haha). Astro also has an official Vue integration that I might install and play around with if I decide to build in some interactive elements to the site or write about some of the work I've done with Vue.

Overall I found the Astro documentation helpful and intuitive. I learn best through example, though, so I probably spent more time looking at starter templates and other projects built with Astro, especially cadecuddy/milkroll and onwidget/astrowind.

Struggles

A few aspects of Astro have been harder than others. It seems like it's a Typescript-first framework. I realize Typescript has all sorts of advantages, but I've never quite latched onto the syntax. When I've used it, I've often found myself spending more time getting Typescript to work without complaining and less time writing the thing I'm actually trying to build. But I don't want to get off on a tangent here about Typescript, and I don't want to raise the ire of the legions of Typescript fans, so I'll just say that for me the Typescript focus was a bit of a challenge.

One feature of the site that took far too long to get working was the Markdown "reading time" extension. I saw it done well in the projects that were serving as my inspiration, but for some reason I couldn't get the readingTime property to show up in the frontmatter object when I tried to display it in certain places (maybe because I was using a collection?). It probably had to do with the order of processing various components, but I couldn't figure it out. Finally, I noticed that astrowind had its own utility function to create an array of posts, so I borrowed from that and imported that function for all pages (or feeds) that show one or more posts.

I was kind of excited about the Partytown integration, hoping to see how it loaded some third-party JavaScript in a Web Worker for me. Unfortunately, I wasn't able to get it to work.

Changes

While almost all of the content and most of the site's structure has remained the same, there have been a few changes from the last iteration:

• Design: The design is the most noticeable difference. The font size is a bit bigger all around, and the look is a bit fresher, for lack of a better word. Also, it supports dark mode if the user has designated it at the system preference level. I thought about adding a "theme switcher," but decided against it in an attempt to avoid unnecessary complexity. It's hard for me to imagine someone opting into dark mode at the OS level but wanting light mode on this site, or, conversely, wanting dark mode for this site but light mode everywhere else.
• Metadata: I've added a number of <meta> tags, mostly for Facebook and Twitter, even though I barely use Facebook and I killed my Twitter account last month.
• Feeds: As mentioned above, I kept the Atom feed out of solidarity with my loyal users, but I also added RSS 2.0 and JSON feeds.
• Comments: I kept the old clunky Disqus commenting system on the site, but now it is "opt in" only. At the bottom of each blog post, the user now has to click the "Load comments" button to either read or write comments. I did this because I want the initial page load to be fast, most people probably don't care about comments, and Disqus seems to load a crap ton of JavaScript, some of which is probably there to track you. Some day I'll look into a less obnoxious way to have comments on a static site.

Web Sockets

Two-way open connections for sending/receiving data.

They are more full-featured and robust than Server-Sent Events (SSE) in that SSE go one way: from server to browser. While Web Sockets are supported by more browsers than SSE are, they can't be polyfilled and need special server setup. SSE, on the other hand, can be polyfilled and are sent over simple http. If all you need is to send messages (typically as strings) across domains or from frame to frame, you might be better off using onmessage/postMessage.

• W3C Spec
• html5rocks article
• Introduction by Robert Nyman
• Support: Modern browsers and IE10+; not Android Browser

Web Workers

Allow developers to run computationally intensive processes in background threads so they don't lock up the browser/UI.

This gets around the single-threaded nature of JavaScript.

• W3C Spec
• MDN article
• html5rocks article (provides good use cases)
• Support: Modern browsers and IE10+; not Android Browser

Web Components

The W3C's Introduction to Web Components lays it all out:

The component model for the Web ("Web Components") consists of five pieces:

1. Templates, which define chunks of markup that are inert but can be activated for use later.
2. Decorators, which apply templates based on CSS selectors to affect rich visual and behavioral changes to documents.
3. Custom Elements, which let authors define their own elements, with new tag names and new script interfaces.
4. Shadow DOM, which encapsulates a DOM subtree for more reliable composition of user interface elements.
5. Imports, which defines how templates, decorators, and custom elements are packaged and loaded as a resource.

• The Polymer Project, currently in Pre-Alpha, implements Web Components in its "Elements (UI)" modules. Support is limited to the latest version of self-updating browsers.
• Mozilla's' Brick, "UI Components for Modern Web Apps," currently aims to provide better browser support than Polymer does. Most components are designed to work in IE9+ and Grade A mobile browsers.
• The Ember framework has a components module, as well. According to the Ember Components Guide, "Ember's implementation of components hews as closely to the Web Components specification as possible. Once Custom Elements are widely available in browsers, you should be able to easily migrate your Ember components to the W3C standard and have them be usable by other frameworks."

Web Storage

Allows data to be set and retrieved on the local storage (window.localStorage) and session storage (window.sessionStorage) objects.

It can be used when capacity requirements are too great for cookies to handle. Unlike cookies, Web (or DOM) Storage allows the storing of objects, not just strings. Also unlike cookies, Web Storage does not have a built-in expiration mechanism (other than sessionStorage), so if you need that you'll have to roll your own by adding an expiration timestamp property when setting and checking it against the current time when getting.

• diveintohtml5
• Support: Modern browsers and IE8+

Web Notifications

Notices that a web page can send outside of the browser at the system level so the user will see them even if the browser isn't the currently active app.

Not to be confused with Web Messaging (onmessage, postMessage, et al).

• W3C Spec
• html5rocks tutorial
• MDN article
• Support: Current Chrome, Firefox, Safari; no IE as of 11

WebRTC

Real-Time Communication for the web, without the need for plugins.

It looks really cool, but it's still early days (as of November 3, 2013).

• W3C Spec
• Support: Prefixed Chrome and Firefox; no IE as of 11; virtually no mobile

WebGL

Hardware-accelerated canvas graphic API.

Notably, WebGL is the only feature listed here that is not under the auspices of the W3C. It comes instead from the Khronos Group. So, it's not technically an HTML5 feature. It's also beyond my understanding.

• Khronos Spec
• Support: Modern browsers and IE 11+, as long as the user has up-to-date video drivers.

Web SQL

A deprecated spec for indexed web storage, so don't use it.

Instead, use Web Storage (described above) or IndexedDB. If Safari support is required, you'll need to use a polyfill.

The other day my coworker Ed showed me a super neat git trick for finding out which branches we can delete when we want to do a little housekeeping:

# on the command line:
git branch --merged

If I had read the manual, I would have known this already; at the very end of the help for git branch these two lines appear:

• --merged is used to find all branches which can be safely deleted, since those branches are fully contained by HEAD.
• --no-merged is used to find branches which are candidates for merging into HEAD, since those branches are not fully contained by HEAD.

Nice.

ulimit -n 10000

Once I did that, I just had to install Yeoman (npm install -g yo) and my preferred generators again, and my troubles were gone.

• Responsive viewport units by David Storey talks about the fairly new vh, vw, and vmin units. While currently support is meager—only found in Chrome Canary, IE 9, and some Motorola devices(?)—it's definitely something I'm going to keep an eye on.
• The Google JavaScript Style Guide gives some reasonable advice.
• I really like where Rick Waldron is going with his Idiomatic.js repo on GitHub. My own style differs from his in some ways (such as using single quotes rather than double quotes), but I'd still like to use his as a foundation for a JavaScript style guide at Fusionary where I work. I am way too inconsistent in my own style, especially when it comes to putting space at the open and close of parentheses and brackets.
• Lea Verou has an interesting piece on background-attachment: local and some cool effects you can achieve with it: Pure CSS scrolling shadows with background-attachment: local. Unfortunately, Firefox doesn't support the local value.
• 3D it! is a very cool demo.
• idb.filesystem.js - Bringing the HTML5 Filesystem API to More Browsers: Whoa. Is it possible to make offline work well without the headache of AppCache? I need to investigate this more.
• Ben Alman is rocking the house with Grunt, a "task-based command line build tool for JavaScript projects." I want to start using this in my own projects.

There are so many cool things happening on the frontiers of web development thse days that it gets a little overwhelming. I despair of ever being able to keep up.

The authors present this snippet for giving users their own web space on a server:

ReWriteEngine On
RewriteCond "/home/$1/public_html"
RewriteRule "/([^/]+)/(.*)" "home/$1/public_html/$2"

While I doubt I'll ever need to use that exact ruleset, this paragraph in the "Discussion" section — especially the part that I mark in bold — has helped, more than anything else I've read, to reduce my bewilderment over mod_rewrite:

This rewrite ruleset takes advantage of a little-known fact about mod_rewrite — in particular, that a RewriteRule is always considered first, and, if it matches, the RewriteCond is evaluated after that. Consequently, we can use $1 in the RewriteCond , even though the value of that variable is set in the RewriteRule appearing on the following line.

Note to self

Commit this to memory: The RewriteRule is always considered first!

Embedded YouTube Videos in a Lightbox

While most of the issues involve video served from the same site as the document, at least one problem appeared with YouTube videos shown in a lightbox. At some point I had to add ?wmode=transparent to the iframe's src because the close button was appearing behind the video. However, in IE9 (maybe 64-bit mode only), wmode=transparent rendered the video as a solid black background. The controls appeared, the audio played, but no video. The workaround I came up with involved checking for an "ie9" class added to the html element with a conditional comment. Then, I'd add the wmode=transparent query param to a link's href (which was later used to build the YouTube iframe) if that class wasn't there. Here is what it sort of looked like:

  var wmode = /ie9/.test(document.documentElement.className) ? '' : 'wmode=transparent';

  if ( wmode ) {
    $('a.yt-link').prop('href', function(i, val) {
      val += this.search ? '&' : '?';
      return val += wmode;
    });
  }

HTML5 Video with a Flash "fall-through"

The embedded YouTube issue was certainly interesting, but it was only a momentary diversion from the real (mis)adventures with web video. For most recent projects, I've been using the now-classic Video for Everybody markup popularized by Croc Kamen:

<video id="video-1" src="/videos/test.mp4"
    poster="/img/video-still.jpg"
    width="480" height="320">
  <source type="video/mp4" src="/videos/test.mp4">
  <source type="video/webm" src="/videos/test.webm">
  <object type="application/x-shockwave-flash"
      data="/assets/swf/flashmediaelement.swf">
    <param name="movie" value="/assets/swf/flashmediaelement.swf">
    <param name="flashvars" value="controls=true&amp;file=/videos/test.mp4">
    <img src="/img/no-vid.png" title="No video playback capabilities">
  </object>
</video>

The one exception is that I'm not including an .ogv file, because Firefox 3.6 is the only browser I somewhat care about that could use it—and couldn't use .webm—and I don't mind giving it the Flash fall-through.

Along with this markup, I've been including the mediaelement.js script, which provides a consistent, cross-browser UI with HTML5-first video and a Flash "fall-through." When a browser can't play native HTML5 video, the mediaelement.js script attempts to play the .mp4 video using Flash. This kind of thing is essential for reducing the amount of code forking I need to do while still letting IE8 and below users see videos, too.

Video Files and Server Configuration (.htaccess)

I know enough not to run into this problem when I start a project, but I sometimes forget to make sure everything is set up correctly when I jump into a project midstream to add video.

Problem: HTML5 video won't play at all unless they are served correctly.

Solution 1: If you're running an Apache server, set the proper MIME type for video files in the site's .htaccess file:

  # video
  AddType video/ogg                      ogv
  AddType video/mp4                      mp4 m4v
  AddType video/webm                     webm

Solution 2: Make sure that the server is not compressing (with gzip/deflate, etc.) those video files.

HTML5 Video with Varnish

Problem: We've been using Varnish Cache on a few sites and have been very impressed with the performance boost it has provided. Unfortunately, it doesn't play well with large video files. As soon as we turned Varnish on, the videos stopped working. Firefox showed NaN/NaN for the timeline, and other browsers just showed 00:00. It was as if the videos' metadata couldn't be read.

Solution: Once we discovered what was going on, our super-duper server guy set up another port to serve the files without Varnish, and I set up a redirect for .webm and .mp4 files to point to the other port.

IE8, Flash Fall-through, and F12 Developer Tools

Problem: Testing video playback in IE8 was a nightmare for a number of reasons. The worst of it had to do with the seemingly random breakage of video—another case of the black background for video while audio carries on its merry way.

Solution: Make sure the F12 Developer Tools are turned off.

Unsolved Mystery: I'm still not sure how to test video using Windows 7 and IE9 in IE8-compatibility mode, since that requires having the Developer Tools open. Anyone know of a workaround?

Codec Issues with mp4 files

Problem: The videos weren't working in all webkit browsers.

Solution: Make sure .mp4 files are encoded as H.264, not FFMpeg/MPEG-4.

mediaelement.js and the Flash plugin path

This one was my fault, but not immediately obvious. The mediaelement.js script is awesome, but in this one particular case, it's too awesome for me. When used as a jQuery plugin, the mediaelement player can be invoked like so:

  $('video').mediaelementplayer();

Problem: By default, mediaelement.js assumes that the plugin is in the same path as the mediaelement.js file. If scripts are placed in a different folder on the production site (due to concatenating/minifying/caching, etc.), this awesome feature that works in the dev environment will no longer work when the site is live.

Solution: Explicitly set the pluginPath option. For example (set it to the actual path on your own site):

$('video').mediaelementplayer({
  pluginPath: '/assets/scripts/lib/mediaelement/'
});

Progressively downloading mp4 files through Flash

Problem: I was having a vexing problem in that the entire video had to load before it would start playing. It turns out that the video encoders I had been using, at least with the settings I had on them, were putting the "moov atom" at the end of the .mp4 file. This moov atom is the metadata contains the index for the entire file, and Flash needs to read it before it can start progressively loading (buffering) the video. Unfortunately, when the metadata is at the end of the file, Flash needs to download the whole thing before it can get to that information. So, I had to somehow get the moov atom to the beginning of the file.

Solution 1, QTIndexSwapper: This is one of those things that I never would have known if I hadn't hit upon the magic combination of google words (can flash buffer mp4 files), which brought me to a blog post that laid it all out. Most of the advice in that post wasn't relevant to my needs, but this part saved my bacon:

Fortunately, Renaun Erickson over at Adobe has created a simply little AIR utility to fix this atom feed placement…: a program called "QTindexswapper".

Solution 2, moovrelocator Once I knew I could search for mp4 moov atom I found a PHP class that also claims to "move the moov." (I say "claims" only because I haven't tested it; I have no reason to doubt that it does what it says it does.) I may explore this option more later.

Solution 3, Handbrake: One of those video encoders that put the moov atom in the wrong place for me was Handbrake. Now I know that it can put it at the start of the file if you check the Web optimized checkbox. However, the meaning of "Web optimized" wasn't clear to me, and none of the Handbrake presets have it checked by default. Seems obvious looking at it now, but when grasping at straws and having to consider Flash, Internet Explorer, JavaScript, HTML, VMWare, hardware acceleration, and other codec conundrums (FFMpeg, H.264, Frame rate, bitrate, etc.), it's easy to dismiss a checkbox like this as "something that will probably degrade video quality."

I saved a custom preset in Handbrake that I now use for converting to mp4, starting with the iPhone 4 preset and unchecking "Large File Size" and checking "Web optimized."

IE9, VMWare, and Hardware Acceleration

Problem: No HTML5 video in IE9 when loaded in a virtual machine.

Solution: In VMWare Fusion, go to the Settings panel of the virtual machine running Windows 7. Choose Display and uncheck "Accelerate 3D Graphics"

Conclusion

There are many opportunities to break video on the web. Have you come across any other problems? If you have any horror stories, cautionary tales, or success stories you'd like to share, please add a comment.

```apache
AddType application/vnd.ms-word.document.macroEnabled.12 .docm
AddType application/vnd.openxmlformats-officedocument.wordprocessingml.document docx
AddType application/vnd.openxmlformats-officedocument.wordprocessingml.template dotx
AddType application/vnd.ms-powerpoint.template.macroEnabled.12 potm
AddType application/vnd.openxmlformats-officedocument.presentationml.template potx
AddType application/vnd.ms-powerpoint.addin.macroEnabled.12 ppam
AddType application/vnd.ms-powerpoint.slideshow.macroEnabled.12 ppsm
AddType application/vnd.openxmlformats-officedocument.presentationml.slideshow ppsx
AddType application/vnd.ms-powerpoint.presentation.macroEnabled.12 pptm
AddType application/vnd.openxmlformats-officedocument.presentationml.presentation pptx
AddType application/vnd.ms-excel.addin.macroEnabled.12 xlam
AddType application/vnd.ms-excel.sheet.binary.macroEnabled.12 xlsb
AddType application/vnd.ms-excel.sheet.macroEnabled.12 xlsm
AddType application/vnd.openxmlformats-officedocument.spreadsheetml.sheet xlsx
AddType application/vnd.ms-excel.template.macroEnabled.12 xltm
AddType application/vnd.openxmlformats-officedocument.spreadsheetml.template xltx
```

I suppose I could set them all to application/octet-stream or some such if I truly wanted to force the download, but I'm pretty sure that doing it the long way will allow the user to choose whether to open the file in the appropriate Office Application or save it. In any case, the clients seem to love it. Microsoft Word to your mother!

Safari on iPhone OS provides a debug console which reports messages, coding errors, warnings, and tips. In the iPhone Simulator or on iPhone or iPod touch, launch the Settings application. Navigate to "Safari", then to "Developer" and toggle the "Debug Console" switch to "ON".

This is going to help. A lot.

JSMake is a simple Javascript build program with capabilities similar to make

The allure of a tool that would let me write my build scripts in JavaScript is strong. But it does make me wonder: What advantage, other than my familiarity with JavaScript, does JSMake have over other such tools? And is it worth my time to learn another DSL when others work just fine?

On a broader level, these questions touch on the issue that I, and I'm sure many other web developers, have regarding the balance between chasing after the newest, shiniest things and deepening my understanding of more established technologies.

My favorite part is the rake deploy command. If I have uncommitted changes in the site repo, it'll abort the Rake operation and open GitX so I can commit my recent work. If everything is committed, it'll build the files, run git push, and then do the rsync update.

# Adapted from Scott Kyle's Rakefile
# http://github.com/appden/appden.github.com/blob/master/Rakefile

task :default => :server

desc 'Build site with Jekyll'
task :build do
  jekyll '--no-server --no-auto'
end

desc 'Build and start server with --auto'
task :server do
  jekyll '--server --auto'
end

desc 'git commit or push'
task :gitx do
  xed = false
  IO.popen('git status') do |io|
    io.each_line do |line|
      if ( line =~ /^#\s*modified:/ && !xed ) then
        sh 'gitx'
        xed = true
        raise "\n!!! Do a git commit first !!!\n\n"
      end
    end
  end
  if ( !xed ) then
    sh 'git push'
    puts "Committed files were pushed"
  end
end

desc 'Build and deploy'
task :deploy => [:build, :gitx] do
  sh 'rsync -auz --progress _site/ uname@server:/path/to/file/'
end

def jekyll(opts = '')
  sh 'rm -rf _site'
  sh 'jekyll ' + opts
end

One time only

Before I do anything else, I need to make sure that git is installed on the dreamhost server. If it isn't, I need to install it. I can easily find instructions elsewhere, so no need to reproduce them here.

Also, I should have a common location where I can store all my git repos on the server. I'm putting them in /home/username/git/, where user name is my actual user name.

Each new git project

For the following instructions, assume that you've already set up a local git repo. Also, replace username, mydomain, and PROJECTNAME with the appropriate values.

1. ON LOCAL: SSH into mydomain.com

ssh username@mydomain.com

2. ON REMOTE: create new bare remote git directory

cd /home/username/git/
mkdir PROJECTNAME.git
cd PROJECTNAME.git
git  init --bare

3. BACK ON LOCAL: cd into local git repo. do an initial commit

git push --all ssh://username@mydomain.com/home/username/git/PROJECTNAME.git

git remote add origin ssh://username@mydomain.com/home/username/git/PROJECTNAME.git
git config branch.master.remote origin
git config branch.master.merge refs/heads/master
git fetch
git merge master

Combined with the rake deploy command, this little git setup makes updating and versioning my blog pretty painless.

Hold the phone!

After writing this post, I came across a really nice explanation that goes into more detail and even shows how to set up a post-receive hook on the remote server. In fact, using a post-receive hook appears more convenient than what I'm doing. I may have to revisit my deployment situation.

if ( !(window.matchMedia) ){

  window.matchMedia = (function(doc,undefined){

  // ... lots of stuff ...

  })(document);

}

Here's the cool thing: That matchMedia function is immediately invoked. Now, why should that happen? Isn't the point of this thing to invoke it when I, as its consumer, want to call it from somewhere? Yep. But, it's not ready for me just yet. inside that function it's returning another function, which can then be called whenever I do matchMedia(mymediaquery):

if ( !(window.matchMedia) ){

  window.matchMedia = (function(doc,undefined){
    // ... prep work ...

    return function(q){
      // ... other stuff ...
    };

  })(document);

}

There is also some result caching going on in there, so if you repeat the function call with the same argument, it won't do the work of figuring out support each time; instead, after the first time it'll just use the result it stored in the cache.

Very fun and cool stuff!

 cd ~/Sites/local-repo-dir

 git remote add origin git@github.com:fusionary/remote-repo-name.git

 git push -u origin master

function cps() {

  dirname=$1

  trailingslash=`expr $dirname : '\(.*\)/$'`
  if [[ ${trailingslash} == '' ]]; then
    dirname="${dirname}/"
  fi

  OPTIONS="All New Update"

  select OPTION in $OPTIONS
  do
    if [[ $OPTION = "All" ]]
    then
      COPYTYPE="-av"
      break
    fi

    if [[ $OPTION = "New" ]]
    then
      COPYTYPE="-av --ignore-existing"
      break
    fi

    if [[ $OPTION = "Update" ]]
    then
      COPYTYPE="-auv"
      break
    fi

  done


  # echo "You chose ${COPYTYPE}"
  echo "copying ${dirname} to ${2} ..."
  rsync ${COPYTYPE} ${dirname} ${2}
  echo "done!"
}

This function determines if the browser is currently in a particular media media mode. Use the same media query as you would in CSS or on a <link> element.

I can see myself using it quite a bit. His usage examples look like this:

if (isMedia("screen and (max-width:800px)"){
    //do something for the screen
}

if (isMedia("all and (orientation:portrait)")){
    //react to portrait mode
}

I'm thinking it might be even more useful for me to detect !isMedia('something) and fallback to js stuff in those cases. Not sure yet. Still need to ponder.

var FM = FM || {};

(function() {

  // utility function to merge objects.
  FM.extend = function() {
    var args = Array.prototype.slice.call( arguments ),
        al = args.length,
        firstArg = al === 1 ? FM : args.shift();

    while (--al > -1) {
      var arg = args[al];
      if (typeof arg  == 'object') {
        for (var prop in arg) {
          firstArg[ prop ] = arg[ prop ];
        }
      }
    }

    return firstArg;
  };

})();

If my 20-year-old self could see my 43-year-old self, he would be amazed by how incredibly geeky I've become.

JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language.