scottjehl

In response to @jaffathecake's tweet

One feature that would be extremely helpful when building with HTML5 appcache would be to request that an HTML document that references an offline cache always fetches content from the server (per ordinary caching header rules) when the network connection is available, and only "offline" when the server cannot be reached.

An example use case would be simple HTML document that refreshes regularly, yet should be available to browse offline, should the connection drop upon refreshing the page.

Here's a use case we had when building an app on BostonGlobe.com: Our app's homepage began as a simple list of a user's bookmarked links to articles, which were available to any device (JS or no JS). That list of articles would change constantly as a user bookmarked and removed bookmarks throughout the site. In modern browsers, that same list page would be enhanced into an application in which all of the bookmarked artic

scottjehl

First, a note from Filament Group: We recently released Grumpicon, a web app for easy use of our command-line SVG workflow, Grunticon. You can read more about Grumpicon in our release post here: Introducing Grumpicon. We'd been wanting to build this application for a while and had yet to find the time to do so. Since this was a tool designed strictly for web developers and we wanted it to be portable enough to easily run anywhere – locally or on a remote server – we decided that the first pass at the app could be built in JavaScript alone, without any reliance on server-side technology. We posted the following requirements for the proposed app in an issue in the Grunticon repo, and posted a link to it for help on Twitter:

It'd be cool if we could drop a folder of svgs on the browser and get a zip file of [typical Grunticon

scottjehl

/*
* matchMedia() polyfill - test whether a CSS media type or media query applies
* primary author: Scott Jehl
* Copyright (c) 2010 Filament Group, Inc
* MIT license
* adapted by Paul Irish to use the matchMedia API
* http://dev.w3.org/csswg/cssom-view/#dom-window-matchmedia
* which webkit now supports: http://trac.webkit.org/changeset/72552
*
* Doesn't implement media.type as there's no way for crossbrowser property

scottjehl

d

scottjehl

|￣￣￣￣￣￣￣￣￣￣￣￣|
|  WEARING A MASK    |
|  IS THE EASIEST    |
|  WAY TO SHOW YOU   |
|  WANT THINGS TO    |
|  RETURN TO NORMAL  |
|＿＿＿＿＿＿＿＿＿＿＿＿|
         ||
  (\__/) || 

scottjehl

                /'
               //
           .  //
           |\//7
          /' " \     
         .   . .      
         | (    \     
         |  '._  '      
          /    \'-'
    ____[\`---'/]____

scottjehl

.snippet_meta {
    overflow-x: visible;
}
.snippet_preview pre {
	line-height: 1.5;
	white-space: pre-wrap;
}

scottjehl

Notes from @wesbos's talk:

Our frontend workflow is changing quickly and for good reasons. Tooling for tooling sake is a waste, but don't overlook the utility of modern dev tooling workflows - these are great, useful tools that are letting us improve our workflows in standards-based, forward-looking ways.

Trend: Frontend developers are moving to using package managers (npm) for client-side code (CSS and JS), much like we have been for managing our build tooling itself. I can attest to this being hugely helpful at Filament Group on client-side code, especially now that so many of our projects are on npm (https://www.npmjs.com/~filamentgroup ).

Yay, another talk that recommends loadCSS for performance. Nice to hear :)

Gulp tasks to use:

scottjehl

/*
  * anchor-include pattern for already-functional links that work as a client-side include
  * Copyright 2011, Scott Jehl, scottjehl.com
  * Dual licensed under the MIT
  * Idea from Scott Gonzalez
  * to use, place attributes on an already-functional anchor pointing to content
    * that should either replace, or insert before or after that anchor
    * after the page has loaded
    * Replace:	<a href="..." data-replace="articles/latest/fragment">Latest Articles</a>
    * Before:	<a href="..." data-before="articles/latest/fragment">Latest Articles</a>

scottjehl

var list = [];
document.querySelectorAll("body *")
   .forEach(function(elem){ 
    if(elem.getBoundingClientRect().width > document.body.getBoundingClientRect().width){ 
      list.push(elem.outerHTML.split('>')[0] + '>'); 
    } 
}); 
confirm( "these elements are wider than the viewport:\n\n " + list.join("\n") )