Commits

Rune Halvorsen committed 6472c6e

Added stuff

Comments (0)

Files changed (7)

 
 ## blog_name -- Your Blog's name.
 # This is used repeatedly in default blog templates
-blog.name = "Your Blog's Name"
+blog.name = "#notdev"
 
 ## blog_description -- A short one line description of the blog
 # used in the RSS/Atom feeds.
-blog.description = "Your Blog's short description"
+blog.description = "Utilizing existing web standards allows us to benefit from existing Web infrastructure."
 
 ## blog_timezone -- the timezone that you normally write your blog posts from
-blog.timezone = "US/Eastern"
+blog.timezone = "Europe/Oslo"
+
+blog.posts_per_page = 3
+
+blog.auto_permalink.enabled = True
+
+blog.disqus.enabled = False
+blog.disqus.name = "your_disqus_name"
+
+
+# misc settings that are not part of blogofile, but our local settings.
+blog.local.authors = [
+    {"name": "Rune",
+     "twittername": "runeh",
+     "email": "runefh@gmail.com",
+     "homepage": "http://example.org", 
+     "bio": "some markdown or whatever"
+    },
+    {"name": "Frank",
+     "twittername": "frank",
+     "email": "foo@example.org",
+     "homepage": "http://example.org", 
+     "bio": "some markdown or whatever"
+    },
+]

_posts/001_testpost.markdown

 ---
-categories: Category 1
+author: Rune Halvorsen
+title: Context Detection, not capability detection
 date: 2011/10/16 15:45:00
-title: Test post 1
+categories: Development, Mobile
+tags: mobile, responsive design, progressive enchancement
 draft: false
 ---
-This is post #1
+
+I've been thinking about UA sniffing and capability detection lately. Partly because I have to deal with multiple devices in my [day job] and partly because I have been using [workflowy] recently, which doesn't currently do The Right Thing with my mobile phone. (Workflowy is awesome by the way. You should check it out!)
+
+
+
+Good developers have been recomending feature detection instead of browser detection for as long as there has been features to detect.
+
+It seems like the single most useful thing you can use UA strings for is to detect the usage context[1].
+
+Consider workflowy for a moment. There is one UI for desktop, and desktop-like devices, and there is one for mobile touch devices.
+
+The former is what you get 
+
+
+Problem. UA != device. There is not requirement for browsers to report what hardware they are running on. Opera mobile and Firefox mobile will in many cases only report information about themselves, such as browser name and version.
+
+
+
+
+
+
+The capability detection gap
+
+What can you use capability detection for? Most of the things people use 
+
+
+There are (at least) two scenarios where server side UA detection is reasonable:
+
+# Initial page load optimization
+# Device class detection
+
+Initial page load optimizatition just means that we should try to make sure we get most of our guesses right about what to serve on the first request. If we can tell by the UA string what screen size it is using, then make sure we serve the best stylesheet immediatly. Make sure we serve all the polyfill and shim code the browser needs in the javascript bundle the client gets as well.
+
+Note that I am not saying we shouldn't use media queries etc. What we want to happen is that when the browser applies media queries it already has most of the resources it wants, because they were part of the first load. If we made a poor guess, then the media queries will still kick in and download the right resources.
+
+Ditto with javascript. When the client starts running js, and figuring out what it supports, there is no need to do extra requests for compatibility layer javascript: The code has already been fetched.
+
+UA sniffing for this could be omitted, but using them may lead to a better user experience.
+
+
+The second thing one whould use UA sniffing for is finding out the device class. "Device class" is a horrible name, and not at all buzzword worthy? What are better alternatives?
+
+Anyway, what I mean by device class is if the device is a pc, tablet or phone. Or something else again, like a TV. Or a fridge.
+
+
+
+
+
+[1] : this is a bad name. What is a better one?
+
+
+
+
+

_templates/footer.mako

-<p id="credits">
-Powered by <a href="http://www.blogofile.com">Blogofile</a>.<br/>
-<br/>
-RSS feeds for <a href="${bf.util.site_path_helper(bf.config.blog.path,'feed')}">Entries</a>
-% if bf.config.blog.disqus.enabled:
- and <a
-href="http://${bf.config.blog.disqus.name}.disqus.com/latest.rss">Comments</a>.
-% endif
-<br>
-</p>
-% if bf.config.blog.disqus.enabled:
-<script type="text/javascript">
-//<![CDATA[
-(function() {
-		var links = document.getElementsByTagName('a');
-		var query = '?';
-		for(var i = 0; i < links.length; i++) {
-			if(links[i].href.indexOf('#disqus_thread') >= 0) {
-				query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
-			}
-		}
-		document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/${bf.config.blog.disqus.name}/get_num_replies.js' + query + '"></' + 'script>');
-	})();
-//]]>
-</script>
-% endif
+<hr>
+Footar!

_templates/header.mako

 <h1><a href="${bf.util.site_path_helper()}">${bf.config.blog.name}</a></h1>
-<p>This is a simple blog build with Blogofile.</p>
-<p>It's completely unthemed and is written as minimally as possible, while still
-retaining most of the blog features.</p>
-<p>Make sure you read the <a href="http://www.blogofile.com/documentation">online
-documentation</a>.</p>
-<p>If you're looking for a more fleshed-out site try running 'blogofile init
-blogofile.com', but you'll need <a href="http://www.git-scm.org">git</a> installed first.</p>
-<p>This is a header that goes on every page.</p>
-<hr/>
+Hedar!
+<hr>

_templates/site.mako

 <%inherit file="base.mako" />
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html>
-  <head>
+<!DOCTYPE html>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     ${self.head()}
-  </head>
-  <body>
-    <div id="content">
-      ${self.header()}
-      <div id="main_block">
-        <div id="prose_block">
-          ${next.body()}
-        </div><!-- End Prose Block -->
-      </div><!-- End Main Block -->
-      <div id="footer">
-        ${self.footer()}
-      </div> <!-- End Footer -->
-    </div> <!-- End Content -->
-  </body>
-</html>
+
+
+<div id="content">
+  ${self.header()}
+  <div id="main_block">
+
+    <div id="prose_block">
+      ${next.body()}
+    </div><!-- End Prose Block -->
+
+  </div><!-- End Main Block -->
+
+  <div id="footer">
+    ${self.footer()}
+  </div> <!-- End Footer -->
+
+</div> <!-- End Content -->
+
+
+
 <%def name="head()">
   <%include file="head.mako" />
 </%def>
   <%include file="header.mako" />
 </%def>
 <%def name="footer()">
-  <hr/>
-  This is a footer that appears on every page.
   <%include file="footer.mako" />
 </%def>
+<%inherit file="_templates/site.mako" />
+
+This is the about page
+
+
+
+<h2>About</h2>
+
+${bf.config.blog}
+
+% for author in bf.config.blog.local.authors:
+    <%include file="_templates/profile.html" args="author=author"/>
+% endfor
+
 
 Here's the main <a href="${bf.util.site_path_helper(bf.config.blog.path)}">chronological blog page</a><br/><br/>
 
-Here's the last 5 posts:
+Here's the last ${bf.config.blog.posts_per_page} posts:
 <ul>
-% for post in bf.config.blog.posts[:5]:
+% for post in bf.config.blog.posts[:bf.config.blog.posts_per_page]:
     <li><a href="${post.path}">${post.title}</a></li>
 % endfor
 </ul>
+
+<a href="/about.html">About</a>