Permalink
Browse files

Initial import.

  • Loading branch information...
0 parents commit 172b297850ca06147f8054cf89deda0818e27d6c Michael Bleigh committed Feb 10, 2009
@@ -0,0 +1 @@
+/_site
@@ -0,0 +1,8 @@
+Mister Bleigh
+=============
+
+This is the Jekyll source for Michael Bleigh's blog and website, [Mister Bleigh](http://www.mbleigh.com/). It makes some nice use of Jekyll's liquid templating system (see blog.html) and uses Javscript to pull information from GitHub for the open-source section.
+
+You may feel free to re-use any part of the structure, design, and layout of this site; it is all licensed under the MIT License. However, the content of the site (blog posts and page content) is licensed under a Creative Commons Attribution license (you may use it, but must give attribution).
+
+Copyright (c) 2009 Michael Bleigh. Rights reserved as indicated above.
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+ "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Mister Bleigh - {{ page.title }}</title>
+ <link rel="stylesheet" href="/stylesheets/master.css" type="text/css" media="screen" charset="utf-8"/>
+ </head>
+ <body>
+ <div id='wrapper'>
+ <div id='header'>
+ <h1>Mister Bleigh</h1>
+ <h2>is Michael Bleigh on the web.</h2>
+ </div>
+ <div id='menu'>
+ <ul>
+ <li><a href='/'>Home</a></li>
+ <li><a href='/blog.html'>Blog</a></li>
+ <li><a href='/about.html'>About</a></li>
+ <li><a href='/open-source.html'>Open Source</a></li>
+ <li><a href='http://www.linkedin.com/in/mbleigh' target='_blank' rel='me'>LinkedIn</a></li>
+ <li><a href='http://twitter.com/mbleigh' target='_blank' rel='me'>Twitter</a></li>
+ </ul>
+ </div>
+ <div id='content'>
+ {{ content }}
+ </div>
+ </div>
+ <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/misterbleigh/get_num_replies.js' + query + '"></' + 'script>');
+ })();
+ //]]>
+ </script>
+ </body>
+</html>
@@ -0,0 +1,10 @@
+---
+layout: master
+---
+<div class='post'>
+ <span class='date'>{{page.date}}</span>
+ <h1><a href='{{page.url}}'>{{page.title}}</a></h1>
+ <div class='body'>{{ content }}</div>
+</div>
+
+<div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/misterbleigh/embed.js"></script><noscript><a href="http://misterbleigh.disqus.com/?url=ref">View the discussion thread.</a></noscript><a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
@@ -0,0 +1,47 @@
+---
+layout: post
+title: The Case For Web Applications
+date: February 2, 2009
+---
+
+Neil McAllister recently wrote a piece on InfoWorld entitled "The Case Against Web Apps":http://weblog.infoworld.com/fatalexception/archives/2009/01/the_case_agains.html. In it, he outlines "Five reasons why Web-based development might not be the best choice for your enterprise." Obviously, as an employee of a web application services and products company, I disagree strongly with that opinion.
+
+Web applications are not a "trend" in enterprise software development. They represent a fundamental shift in how software is developed, implemented and used in today's technological climate. But to be specific, let's go point-by-point through the "case against web apps."
+
+h3. "It's client-server all over again"
+
+It certainly is. The difference is, we're not living in a mainframe, dumb-terminal world anymore. Server infrastructure is cheap and scalable, and as more enterprises push their IT infrastructure to the cloud (see another article from InfoWorld: "IT needs to get over its cloud denial, or management will get over IT":http://weblog.infoworld.com/whurley/archives/2009/02/cloud_computing_1.html) the need for on-site datacenters will shrink and, for many companies, eventually disappear.
+
+Web applications require no client deployment, no versioning, no installation and no machine-by-machine support. There's no massive rollout procedure for a new version and no back-breaking process if there's a small but important glitch in a major release.
+
+h3. "Web UIs are a mess"
+
+When each project has specific and individual user experience needs, isn't it good to reinvent the wheel a little bit? Having a blank canvas means having the chance to build exactly what is right for this application, not shoehorning an application into pre-defined constraints.
+
+Bad web sites and bad desktop application interfaces are equally impenetrable to the average user. The success of the user experience lies not in the hands of the chosen deployment platform but in the hands of a developer with an eye for user experience. I don't think it's a stretch to posit that the majority of such developers work either on web applications or for Apple. When was the last time you saw a beautiful Visual Basic application interface?
+
+h3. "Browser technologies are too limiting."
+
+"User interface code written in such languages as C++, Objective C, or Python can often be both more efficient and more maintainable than code written for the Web paradigm." This statement rings false to me; when was the last time you saw a graphic designer who could pop open his trusty Visual Studio 2008 and recompile a project to tweak the user interface? The fundamental advantage of HTML/CSS/Javascript based interface development is that is accessible to a wholly different set of people, people who understand how users think and want to behave but don't necessarily have the programming chops to implement the actual code.
+
+The proliferation of Flash, Quicktime, and Silverlight can pretty much all be explained by one fact: HTML doesn't support embedded video. Few web developers turn to Flash or other technologies for much outside of rich multimedia playing. You also can't consider such a tool a liability when it is available for more than 99% of all web users.
+
+This also brings up a fundamental flaw in "the case against web apps": if this is an article talking about using web applications for enterprise business applications, how are any of the concerns about browser compatibility valid? Don't most enterprises have control over what browsers get used by their employees? The "refusal of Internet Explorer 6 to kick the bucket":http://news.cnet.com/8301-1023_3-10108852-93.html certainly seems to indicate that companies have a great deal of control over how employees access the internet.
+
+h3. "The big vendors call the shots."
+
+Is this untrue of any development platform short of Linux? Companies are at the whim of Microsoft when they released an in-many-cases incompatible, largely disparaged upgrade to their operating system with Vista. That's much more of a moving target than the web standards, which with the exception of Internet Explorer (another Microsoft project) make writing cross-browser, cross-operating system applications a relative ease.
+
+h3. "Should every employee have a browser?"
+
+You know what? Lots of people e-mail jokes to their families from their work accounts, let's not allow people to write e-mails anymore. I heard that sometimes people make personal calls from the office, so let's get rid of the phones, too. Not only is this point inherently distrustful of the work ethic and general competency of most employees, it doesn't even hold water: browsers can be used to access internal applications even if all outside internet access is restricted.
+
+In the end, I may have spent too much time here refuting his arguments without making the real case *for web applications*. So, very briefly, here's it is:
+
+# *Massively Agile:* Web applications can be built, deployed, and put into general use in a matter of weeks, not months or years. New features can be rolled out on a continuous basis rather than waiting a year for a new "point release."
+# *Massively Accessible:* Web applications can be accessed from any device that can access the internet, regardless of operating system or system requirements. As mobile phones become more web capable this becomes even more apparent and necessary. Desktop applications require completely separate development efforts.
+# *The Local Data Problem:* There's no need for "shared" folders and collision control on documents in a web application. Everything is on the server, everything is up-to-date as soon as it is accessed.
+# *Web is the new Desktop:* Technologies such as "Adobe AIR":http://blogs.adobe.com/air/2009/01/air_passes_100_million_install.html and site-specific browsers have made it so that web applications are becoming more and more like desktop applications, bringing the ease of development and deployment with them.
+# *Collaboration is King:* Web applications, due to their centralized nature, can naturally encourage less isolated, more collaborative work between employees.
+
+Web applications aren't the solution to every problem a business faces. If you need graphically intense 3D visualizations for your buciness, web applications probably aren't the way to go for you. But for most businesses, most of the time, web applications will be more cost-effective, more useful and more agile than the alternative.
@@ -0,0 +1,32 @@
+---
+title: Use MacFUSE to Make a Boxee Torrent Dropbox
+date: February 2, 2009
+layout: post
+---
+
+<p>I recently set up <a target="_blank" href="http://howto.wired.com/wiki/Hack_Your_Apple_TV_With_Boxee">Boxee on my Apple TV</a> and have started using it for all of my media needs. While it’s great at using RSS feeds for torrents, having to SSH in to my Apple TV every time I wanted to start some random video downloading was growing to be a bit of a pain. So I decided to utilize MacFUSE and sshfs to mount a torrent dropbox so that I could just save torrents directly to the dropbox without manually SCP-ing them over to the Apple TV.</p>
+
+<p>First you’ll need to <a target="_blank" href="http://macfuse.googlecode.com/files/MacFUSE-2.0.3%2C2.dmg" title="Download MacFUSE 2.3">install MacFUSE</a> version 2.0 or greater. Once the installation is complete, you will need to get <code>sshfs</code> to actually mount the remote folder to your local box. The easiest way is just to grab it off of SVN by typing the following in the Terminal:</p>
+
+<pre>$ cd ~/Desktop
+$ svn co http://macfuse.googlecode.com/svn/trunk/filesystems/sshfs/binary sshfs-binaries</pre>
+
+<p>Once you’ve done that, you should copy over the correct binary (either tiger or leopard) to your <code>$PATH</code> somewhere, (I chose <code>/opt/local/bin</code>:</p>
+
+<pre>$ cp sshfs-binaries/sshfs-static-leopard /opt/local/bin/sshfs</pre>
+
+<p>Now you’re ready to actually do the mounting. You will need a point on the filesystem to put the mount, I chose <code>/mnt</code>. We simply need to perform the actual mounting now. Enter this command (assuming that your Apple TV can be SSH-ed into via <code>appletv.local</code>:</p>
+
+<pre>$ mkdir -p /mnt/boxee-torrent-drop
+$ sshfs frontrow@appletv.local:/Users/frontrow/Library/Application\ Support/BOXEE/UserData/Torrents /mnt/boxee-torrent-drop</pre>
+
+<p>When prompted for a password enter <code>frontrow</code> (or whatever your SSH password for your Apple TV is) and it should execute without error. If you now browse in the Finder to <code>/mnt</code> you should see a MacFUSE drive icon alias pointing to your Boxee torrents folder. You can drag this mount to your Finder sidebar and whenever you save a torrent just save it to that directory. Boxee will now automatically pick it up and start downloading it!</p>
+
+<p>For bonus points, you could take this and:</p>
+
+<ol>
+ <li>Run it as a LoginItem so that you’re always mounted.</li>
+ <li>Set up remote SSH access to your Apple TV so that you can start torrents from anywhere in the world (please change your SSH password first).</li>
+</ol>
+
+<p>Enjoy!</p>
@@ -0,0 +1,165 @@
+---
+layout: post
+title: "SASS: The Better, More Powerful CSS"
+date: February 4, 2009
+---
+
+I am a huge fan of "SASS":http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html (Syntactically Awesome Stylesheets) for styling Rails applications. I have been using it on all of my projects for quite a while now and have developed some great techniques that make it much easier to organize, write, and read stylesheets in an application.
+
+Unlike HAML, SASS retains most of the same "feel" when writing the code as vanilla CSS. It simply adds more power and better organizational tools, making it an easy choice as a go-to replacement. You can teach someone the basics of SASS in about 30 seconds: use two spaces to indent everything, put the colon before the declaration and no semicolon afterwards. In fact, I've even written regular expressions to convert CSS to SASS mechanically in some cases. It's easy to pick up and once you do you will start reaping real benefits.
+
+h3. The 20-Second "Get Up And Running"
+
+To use SASS, you must have the HAML gem installed on your Rails app. Add it to your <code>environment.rb</code>:
+
+<pre name='code' class='ruby'>config.gem 'haml', :version => '>= 2.0.6'</pre>
+
+Now you can create SASS stylesheets simply by making <code>.sass</code> files in a <code>public/stylesheets/sass</code> directory.
+
+h3. Basic Example: Building a Menu the SASS Way
+
+The best way to start explaining the power of SASS may be through one of the more common styling tasks one encounters: styling a menu. Here we'll assume a menu structure like this:
+
+<pre name='code' class='html'><ul id='menu'>
+ <li><a href='/'>Home</a></li>
+ <li><a href='/about'>About</a></li>
+ <li><a href='/services'>Services</a></li>
+ <li><a href='/contact'>Contact</a></li>
+</ul></pre>
+
+To style this menu in CSS, we might do something like this:
+
+<pre name='code' class='css'>#menu {
+ margin: 0;
+ list-style: none;
+}
+
+#menu li {
+ float: left;
+}
+
+#menu li a {
+ display: block;
+ float: left;
+ padding: 4px 8px;
+ text-decoration: none;
+ background: #2277aa;
+ color: white;
+}</pre>
+
+SASS allows you to use indentation to indicate hierarchy, saving much repetition and space. The same code in SASS looks like this:
+
+<pre name='code' class='css'>!menu_bg = #2277aa
+
+#menu
+ :margin 0
+ :list-style none
+ li
+ :float left
+ a
+ :display block
+ :float left
+ :padding 4px 8px
+ :text-decoration none
+ :color white
+ :background = !menu_bg</pre>
+
+Hierarchical selectors mean that if you indent something, the selector it falls under will automatically be prepended to it, so the two examples above generate the same output. You'll also notice <code>!menu_bg</code> in the SASS code. SASS allows you to declare constants that can be reused throughout the code, a very useful feature when dealing with colors.
+
+Now we have our basic setup for the menu, but let's handle some better cases. I want the color to change when I hover over the menu options and I want to highlight the current menu option (we'll assume that the <code><li></code> encapsulating the current menu item will have class 'current' when it is selected). Let's add these features first using CSS, then SASS. With CSS:
+
+<pre name='code' class='css'>#menu {
+ margin: 0;
+ list-style: none;
+}
+
+#menu li {
+ float: left;
+}
+
+#menu li a {
+ display: block;
+ float: left;
+ padding: 4px 8px;
+ text-decoration: none;
+ background: #2277aa;
+ color: white;
+}
+
+#menu li a:hover {
+ background: #116699;
+}
+
+/* Make sure the color doesn't change when the current option is hovered. */
+#menu li.current a, #menu li.current a:hover {
+ background: white;
+ color: black;
+}</pre>
+
+This isn't too bad, but our selectors keep getting longer and longer. Let's look at the same thing in SASS.
+
+<pre name='code' class='css'>#menu
+ :margin 0
+ :list-style none
+ li
+ :float left
+ a
+ :display block
+ :float left
+ :padding 4px 8px
+ :text-decoration none
+ :color white
+ :background = !menu_bg
+ &:hover
+ :background = !menu_bg - #111111
+ &.current
+ a, a:hover
+ :background white
+ :color black</pre>
+
+The ampersand (<code>&</code>) in SASS is a shortcut to insert the entire parent selector at that point. By using <code>&.current</code> I am saying "the parent selector with a class of current." <code>&:hover</code> means "the parent selector when hovered." This makes it easy to write complex selectors in a compact, easy-to-read manner.
+
+Another great thing about SASS is it has built in CSS color math. Note where I declared <code>:background = !menu_bg - #111111</code>. That is equivalent to subtracting 1 from each of the values of the constant's color, which in this case yields <code>#116699</code>. This is great, because now I can change the color of the menu and the hover state will automatically change without me having to manually find it and recalculate it for a new color. Note that whenever you are using constants or performing calculations you need to add the equals sign to your declaration.
+
+h3. Getting organized with a master.sass
+
+Another way you can use SASS is to organize all of your CSS into a single file without having to worry about it in your view. I have recently started using this approach for a number of reasons:
+
+# It allows me to control stylesheet inclusion from within the stylesheets themselves, making the structure more readable.
+# I can define global colors that can then be used in *any* of the child stylesheets.
+# It's really easy!
+
+In a new project, I always create a <code>master.sass</code> that will look something like this:
+
+<pre name='code' class='css'>// Define app-specific colors first
+!green = #191
+!gray = #555
+
+// Now define globally applicable, general styles
+
+body
+ :font-family Arial, sans-serif
+
+a
+ :color = !green
+ :text-decoration none
+ :font-weight bold
+
+// Now import all of your other SASS files, they will be
+// automatically included in the same generated CSS file
+// at compile time.
+
+@import menu.sass
+@import content.sass
+@import admin.sass
+@import users.sass</pre>
+
+Using this structure I have a modular, easily expandable collection of stylesheets with global color constants and basic styles. In addition, I can add this to my Rails application with the simplest of calls:
+
+<pre name='code' class='html'><%= stylesheet_link_tag 'master' %></pre>
+
+h3. Wrapping Up
+
+Hopefully this gives you a taste of the easy awesomeness that is possible with SASS. The greatest thing about the library is you don't lose touch with writing CSS because SASS *is* CSS, just with a few extras and shortcuts to make power-styling easier.
+
+*Update:* A commenter pointed out that I forgot the <code>@</code> before my import statements in the master.sass example, this has been fixed.
Oops, something went wrong.

0 comments on commit 172b297

Please sign in to comment.