pig-monkey.com - csshttps://pig-monkey.com/2012-12-22T00:00:00-08:00Mark Two2012-09-15T00:00:00-07:002012-09-15T00:00:00-07:00Pig Monkeytag:pig-monkey.com,2012-09-15:/2012/09/mark-two/<p>Hi there. It&rsquo;s been a while.</p> <p>I took a year off from blogging. That wasn&rsquo;t intentional. I just didn&rsquo;t have anything to say for a while. Then I did have something to say, but I was tired of how the website looked. If the design doesn&rsquo;t …</p><p>Hi there. It&rsquo;s been a while.</p> <p>I took a year off from blogging. That wasn&rsquo;t intentional. I just didn&rsquo;t have anything to say for a while. Then I did have something to say, but I was tired of how the website looked. If the design doesn&rsquo;t excite me I tend not to want to blog. (Call me vain, but I want my words to look good.) And redesigning the website &ndash; well, that requires an entirely different set of motivations to tackle. It took me some time to get that motivation, and then before I knew it we were here: 10 days short of a year.</p> <p>During the development process I referred to this design as &ldquo;mark two&rdquo;, as it was the second idea I tried out.</p> <p>The website still runs on <a href="https://www.djangoproject.com/">Django</a>. The blog is still powered by <a href="https://github.com/pigmonkey/django-vellum">Vellum</a>, my personal blog application. I&rsquo;ve been hacking in it for over a year now (even when this website was inactive) and it is much improved since the <a href="/2011/06/move-django/">last time</a> I mentioned it. In the past six months I&rsquo;ve seen the light of CSS preprocessors. All of the styling for this design is written in <a href="http://sass-lang.com/">SASS</a> and uses the excellent <a href="http://compass-style.org/">Compass</a> framework. The responsive layout is built with <a href="http://susy.oddbird.net/">Susy</a>.</p> <p>If you&rsquo;re interested in these technical details, you will also be interested to know that the entire website is now open-source. <a href="https://github.com/pigmonkey/pig-monkey.com">You can find it on GitHub</a>. Fork it, hack it, or borrow some of my CSS for your website.</p> <p>The other big news is that I have begun to categorize blog posts. Yeah, it&rsquo;s 2012 and I&rsquo;m a little late to the party on that one. You may recall that I only began to tag posts <a href="/2008/06/beautifying/">in 2008</a>. As it stands right now, all posts are just placed in the great big ameba of a category called &ldquo;General&rdquo;. Eventually, they will all have more meaningful categories &ndash; I hope. But it will be a while.</p> <p>Things ought to be more active around here for the foreseeable future.</p>A New Look2010-05-07T00:00:00-07:002012-09-15T00:00:00-07:00Pig Monkeytag:pig-monkey.com,2010-05-07:/2010/05/a-new-look/<p>It&rsquo;s been nearly two years since I last redesigned this site. Don&rsquo;t let me go that long again! The web is supposed to be a dynamic place, you know. Anyway, here&rsquo;s the new look.</p> <p>It isn&rsquo;t drastically different from the old one. I&rsquo;m still keeping …</p><p>It&rsquo;s been nearly two years since I last redesigned this site. Don&rsquo;t let me go that long again! The web is supposed to be a dynamic place, you know. Anyway, here&rsquo;s the new look.</p> <p>It isn&rsquo;t drastically different from the old one. I&rsquo;m still keeping it clean and simple, and the base colors are the same.</p> <p>You might notice the rounded corners on some things. Yeah, that&rsquo;s right. Web 2.0, here I come! I think rounded corners are only acceptable if accomplished with simple CSS. CSS3 is slated to include the <code>border-radius</code> property to achieve rounded corners. The specifications are not yet finalized, but Mozilla browsers have implemented the property with <code>-moz-border-radius</code> and WebKit browsers with <code>-webkit-border-radius</code>. Those are the properties that I&rsquo;m using. That means you&rsquo;ll get rounded corners in browsers like Firefox and Safari. Opera seems to work too. Internet Explorer, not so much. (Come on, IE has a hard enough time complying with <em>current</em> standards. You can&rsquo;t expect it to look to the future!)</p> <p>If you notice any bugs or would like to suggest any changes, let me know. After all, the site is really for you, dear user.</p> <!--more--> <p>(I did briefly look at everything on a Windows box running IE8. It seemed to work &ndash; other than the rounded corners, of course &ndash; but if you notice any bugs in that particular browser, <a href="http://www.mozilla.com/en-US/firefox/switch.html">you know the drill</a>.)</p> <p>Two of the things that really spurred this design are <a href="http://lab.arc90.com/experiments/readability/">Readability</a> and <a href="http://brettterpstra.com/share/readability2.html">Clippable</a>. For about a month now, I&rsquo;ve been using these bookmarklets while reading longs articles online. They help a lot. But it&rsquo;s really a problem with the design of some sites that I feel the need to use them. I decided that I wanted to redesign my site with <a href="http://www.alistapart.com/topics/design/typography/">typography</a> in mind.</p> <p>I&rsquo;m also now integrating Twitter posts into the blog. We&rsquo;ll see how that goes. They&rsquo;re styled differently, so there is a visual distinction between a tweet and a normal post. The idea is that I&rsquo;m now just using twitter as a back-end to create short posts. If I want to, I can switch to some other <a href="http://en.wikipedia.org/wiki/Microblogging">microblogging</a> service and you, the user, need never know the difference. (I could even just use Wordpress to create short posts! But that might get me kicked off the interwebs&hellip;)</p> <p>Tweets integrated into the blog means tweets in the RSS feed, as well. That makes my <a href="http://pig-monkey.com/2009/10/01/rss-mash-up/">RSS mash-up</a> a bit irrelevant. If you currently subscribe to that, I&rsquo;d recommend changing your subscription back to <a href="/feed/">the normal feed</a>. For those who don&rsquo;t want to change, I&rsquo;ve removed the Twitter feed from the mash-up&rsquo;s input. That way you won&rsquo;t have to read each of my tweets twice. The mash-up feed will now only include the blog and Flickr stream.</p> <h2>Blueprint</h2> <p>This design is built upon the <a href="http://www.blueprintcss.org/">Blueprint</a> CSS framework. I&rsquo;ve used it a handful of times before, but never properly. My method was always to link to the three Blueprint CSS files (<code>screen.css</code>, <code>print.css</code>, and <code>ie.css</code>) in the header and then toss in a link to my own stylesheet underneath them. I never used the <a href="http://github.com/joshuaclayton/blueprint-css/blob/master/lib/compress.rb">compressor</a>.</p> <p>The idea behind the compressor is pretty simple. It allows you to maintain one central instance of Blueprint and use that to generate the CSS needed for each individual project. </p> <p>The <a href="http://jdclayton.com/blueprints_compress_a_walkthrough.html">author&rsquo;s walk through</a> outlines the general idea:</p> <div class="highlight"><pre><span></span><code> <span class="nt">&lt;ul&gt;</span> <span class="nt">&lt;li&gt;</span>Keep a core Blueprint folder checked out with <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;http://git-scm.com/&quot;</span><span class="nt">&gt;</span>Git<span class="nt">&lt;/a&gt;</span> on your computer<span class="nt">&lt;/li&gt;</span> <span class="nt">&lt;li&gt;</span>Create a settings.yml file within the Blueprint folder with all the specifics of each project using Blueprint<span class="nt">&lt;/li&gt;</span> <span class="nt">&lt;li&gt;</span>Use the command line to generate <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;caps&quot;</span><span class="nt">&gt;</span>CSS<span class="nt">&lt;/span&gt;</span> for a project on command <span class="nt">&lt;ul&gt;</span> <span class="nt">&lt;li&gt;</span>Incorporating any site-specific attributes <span class="nt">&lt;ul&gt;</span> <span class="nt">&lt;li&gt;</span>Namespace on all Blueprint classes<span class="nt">&lt;/li&gt;</span> <span class="nt">&lt;li&gt;</span>Custom grid template rather than the standard 24 columns / 30px column width / 10px gutter width<span class="nt">&lt;/li&gt;</span> <span class="nt">&lt;/ul&gt;</span> <span class="nt">&lt;/li&gt;</span> <span class="nt">&lt;li&gt;</span>Compressing any custom <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;caps&quot;</span><span class="nt">&gt;</span>CSS<span class="nt">&lt;/span&gt;</span> and appending to the end of the Blueprint stylesheets<span class="nt">&lt;/li&gt;</span> <span class="nt">&lt;li&gt;</span>Appending custom semantic selectors to the end of the Blueprint stylesheets<span class="nt">&lt;/li&gt;</span> <span class="nt">&lt;/ul&gt;&lt;/li&gt;</span> <span class="nt">&lt;/ul&gt;</span> </code></pre></div> <p>When I first head about this, I though that the compression bit was all well and good, but I&rsquo;ve never been really adamant about optimizing CSS for speed in the first place. I&rsquo;m more concerned about compliance with standards and readability. Maintaining a central Blueprint instance didn&rsquo;t appeal to me much, either. What really stood out is the ability to have custom semantic selectors.</p> <p>CSS frameworks are neat. I&rsquo;ve used a handful. Like any other tool, they&rsquo;re not always appropriate. When they are, they have certain advantages and disadvantages. One of the main things that I dislike about them is that they encourage you to clutter your code with framework-specific junk. If you&rsquo;re using <a href="http://960.gs/">960.gs</a> you&rsquo;re going to have elements with classes like &ldquo;container_x&rdquo;, &ldquo;grid_x&rdquo;, &ldquo;omega&rdquo;, and &ldquo;suffix_x&rdquo; all over the place. With <a href="http://developer.yahoo.com/yui/grids/">Grids</a> you&rsquo;ll have &ldquo;yui-g&rdquo;, &ldquo;yui-b&rdquo;, &ldquo;yui-main&rdquo;, and the like. Readability of code is diminished and you&rsquo;ll probably end up suffering from a case of <a href="http://en.wikipedia.org/wiki/Span_and_div#Overuse">div-itis</a>. Not to mention, you can forget about a strict separation of markup and styling. Sure, you <em>could</em> copy the style definitions for the specific framework classes into the classes or IDs of your own elements, but how many folks actually take the time to do all that copying and pasting? I sure don&rsquo;t! The appeal in a CSS framework is to save time, not make the process of building a site longer. Plus, there&rsquo;s an appeal in having the framework-related styling separate from the normal site styling. Such a separation makes the framework easy to update.</p> <p>This is where Blueprint&rsquo;s semantic classes comes in. It allows you to tell Blueprint to take one of your classes (or IDs) and apply to it the properties of one of Blueprint&rsquo;s classes. A-mazing.</p> <p>As an example, the header of this page might look something like this if built on Blueprint without the compressor:</p> <pre> <div id="top" class="span-24 last"> <ul id="nav" class="span-18 prepend-1"> <li><a href="#">Blog</a></li> <li><a href="#">Who</a></li> <li><a href="#">What</a></li> <li><a href="#">Connections</a></li> </ul> <form method="get" id="search" class="span-5 last" action="..."> <input type="text" id="search-box" value="Search" name="s" /> </form> </div> <h1 id="title" class="span-24 last">pig-monkey.com</h1> <p id="description" class="span-23 prepend-1 last">Blah blah blah...</p> <ul id="flickr" class="span-20 append-2 prepend-2 last"> <li><img src="myawesomephoto.jpg" alt="My Awesome Photo" /></li> <li><img src="myawesomephoto2.jpg" alt="My Awesome Photo" /></li> <li><img src="myawesomephoto3.jpg" alt="My Awesome Photo" /></li> <li><img src="myawesomephoto4.jpg" alt="My Awesome Photo" /></li> <li><img src="myawesomephoto5.jpg" alt="My Awesome Photo" /></li> </ul> </pre> <p>Look at those framework-specific classes all over the place. Nasty. But in the Blueprint compressor settings file, I can define some semantic classes.</p> <pre> "#top, h1#title" : "span-24 last" "#top #nav" : "span-18 prepend-1" "#top form#search" : "span-5 last" "#description" : "span-23 prepend-1 last" "#flickr" : "span-20 append-2 prepend-1 last" </pre> <p>Now my markup looks like this:</p> <pre> <div id="top"> <ul id="nav"> <li><a href="#">Blog</a></li> <li><a href="#">Who</a></li> <li><a href="#">What</a></li> <li><a href="#">Connections</a></li> </ul> <form method="get" id="search" action="..."> <input type="text" id="search-box" value="Search" name="s" /> </form> </div> <h1 id="title">pig-monkey.com</h1> <p id="description">Blah blah blah...</p> <ul id="flickr"> <li><img src="myawesomephoto.jpg" alt="My Awesome Photo" /></li> <li><img src="myawesomephoto2.jpg" alt="My Awesome Photo" /></li> <li><img src="myawesomephoto3.jpg" alt="My Awesome Photo" /></li> <li><img src="myawesomephoto4.jpg" alt="My Awesome Photo" /></li> <li><img src="myawesomephoto5.jpg" alt="My Awesome Photo" /></li> </ul> </pre> <p>Clean as a whistle! No useless <code>div</code>s, all elements semantically named, and not dependent on any framework.</p> <p>As great as the compressor is, I do have a couple problems with it. When using the compressor, Blueprint intends that you only have 3 final (compressed) stylesheets: <code>screen.css</code>, <code>print.css</code>, and <code>ie.css</code>. Wordpress, of course, requires a <code>style.css</code> file to define the template. That&rsquo;s no problem. I just a create a <code>style.css</code> file that has the theme information in it and then toss in a <code>@import url(&lsquo;blueprint/screen.css&rsquo;)</code>. Then in the Wordpress header I can put a link to <code>style.css</code>, <code>print.css</code>, and <code>ie.css</code>. Everybody&rsquo;s happy.</p> <p>Styling a website basically boils down to making a small change to the stylesheet and refreshing the page to see how that looks. Running the compressor after each change to combine the custom stylesheet with the <code>screen.css</code> file is not productive. So for the development process I tossed a <code>@import url(&lsquo;blueprint/custom.css&rsquo;)</code> into the main <code>style.css</code> file. That works fine.</p> <p>Then I finish building the theme. I&rsquo;m ready to compress the stylesheets, so I remove the call to the custom stylesheet in <code>style.css</code>. I tell the compressor where the custom stylesheet is and have it combine it with the <code>screen.css</code> file. I run the compressor, reload the site, and everything explodes.</p> <p>Just when I thought I was done!</p> <p>The problem is that in the stylesheet the compressor generates, it puts my custom styles above the semantic classes. Throughout the development process, I was calling the <code>screen.css</code> file (which includes the semantic classes) <em>before</em> the custom stylesheet. As you no doubt know, stylesheets <em>cascade</em>. You can&rsquo;t just switch up the order of elements without breaking stuff.</p> <p>Oh well, I thought. At this point I was tired working on the site and didn&rsquo;t care enough to fight it. I just put the line to call the custom sheet back in <code>style.css</code> after Blueprint&rsquo;s <code>screen.css</code> file. I still feel like the whole semantic classes bit is enough of a reason to use the compressor, even if I&rsquo;m not actually compressing my main stylesheet!</p>An Ubuntu VPS on Slicehost: Wordpress2008-06-10T00:00:00-07:002012-12-22T00:00:00-08:00Pig Monkeytag:pig-monkey.com,2008-06-10:/2008/06/an-ubuntu-vps-on-slicehost-wordpress/<p><em>As <a href="http://pig-monkey.com/2008/06/09/a-move-to-slicehost/">mentioned previously</a>, I&rsquo;ve recently moved this domain over to <a href="http://www.slicehost.com/">Slicehost</a>. What follows is Part Four of a guide, compiled from my notes, to setting up an Ubuntu Hardy VPS. See also <a href="http://pig-monkey.com/2008/06/10/an-ubuntu-vps-on-slicehost-basic-setup">Part One</a>, <a href="http://pig-monkey.com/2008/06/10/an-ubuntu-vps-on-slicehost-web-server">Part Two</a>, and <a href="http://pig-monkey.com/2008/06/10/an-ubuntu-vps-on-slicehost-mail">Part Three</a>.</em></p> <p>I prefer to install <a href="http://wordpress.org/">Wordpress</a> via Subversion, which makes updating …</p><p><em>As <a href="http://pig-monkey.com/2008/06/09/a-move-to-slicehost/">mentioned previously</a>, I&rsquo;ve recently moved this domain over to <a href="http://www.slicehost.com/">Slicehost</a>. What follows is Part Four of a guide, compiled from my notes, to setting up an Ubuntu Hardy VPS. See also <a href="http://pig-monkey.com/2008/06/10/an-ubuntu-vps-on-slicehost-basic-setup">Part One</a>, <a href="http://pig-monkey.com/2008/06/10/an-ubuntu-vps-on-slicehost-web-server">Part Two</a>, and <a href="http://pig-monkey.com/2008/06/10/an-ubuntu-vps-on-slicehost-mail">Part Three</a>.</em></p> <p>I prefer to install <a href="http://wordpress.org/">Wordpress</a> via Subversion, which makes updating easier. We&rsquo;ll have to install Subversion on the server first:</p> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal">1</span></pre></div></td><td class="code"><div><pre><span></span><code>$ sudo aptitude install subversion </code></pre></div></td></tr></table></div> <!--more--> <p>After that, <a href="http://codex.wordpress.org/Installing/Updating_WordPress_with_Subversion#New_Install_2">the Wordpress Codex has a guide to the rest of the install</a>.</p> <p>Nothing further is needed, unless you want fancy rewrites. In that case, we&rsquo;ll have to make a change to your Nginx vhost config at <code>/etc/nginx/sites-available/mydomain.com</code>. Add the following to your server block under <code>location / {</code>:</p> <div class="highlight"><pre><span></span><code>#<span class="w"> </span><span class="nv">wordpress</span><span class="w"> </span><span class="nv">fancy</span><span class="w"> </span><span class="nv">rewrites</span><span class="w"></span> <span class="k">if</span><span class="w"> </span><span class="ss">(</span><span class="o">-</span><span class="nv">f</span><span class="w"> </span>$<span class="nv">request_filename</span><span class="ss">)</span><span class="w"> </span>{<span class="w"></span> <span class="w"> </span><span class="k">break</span><span class="c1">;</span><span class="w"></span> <span class="w"> </span>}<span class="w"></span> <span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="ss">(</span><span class="o">-</span><span class="nv">d</span><span class="w"> </span>$<span class="nv">request_filename</span><span class="ss">)</span><span class="w"> </span>{<span class="w"></span> <span class="w"> </span><span class="k">break</span><span class="c1">;</span><span class="w"></span> <span class="w"> </span>}<span class="w"></span> <span class="w"> </span><span class="nv">rewrite</span><span class="w"> </span><span class="o">^</span><span class="ss">(</span>.<span class="o">+</span><span class="ss">)</span>$<span class="w"> </span><span class="o">/</span><span class="nv">index</span>.<span class="nv">php</span>?<span class="nv">q</span><span class="o">=</span><span class="mh">$1</span><span class="w"> </span><span class="nv">last</span><span class="c1">;</span><span class="w"></span> </code></pre></div> <p>While we&rsquo;re here, I usually tell Nginx to cache static files by adding the following right above the<code>location / {</code> block:</p> <div class="highlight"><pre><span></span><code>#<span class="w"> </span><span class="nv">serve</span><span class="w"> </span><span class="nv">static</span><span class="w"> </span><span class="nv">files</span><span class="w"> </span><span class="nv">directly</span><span class="w"></span> <span class="nv">location</span><span class="w"> </span><span class="o">~*</span><span class="w"> </span><span class="o">^</span>.<span class="o">+</span>\.<span class="ss">(</span><span class="nv">jpg</span><span class="o">|</span><span class="nv">jpeg</span><span class="o">|</span><span class="nv">gif</span><span class="o">|</span><span class="nv">png</span><span class="o">|</span><span class="nv">ico</span><span class="o">|</span><span class="nv">zip</span><span class="o">|</span><span class="nv">tgz</span><span class="o">|</span><span class="nv">gz</span><span class="o">|</span><span class="nv">rar</span><span class="o">|</span><span class="nv">bz2</span><span class="o">|</span><span class="nv">doc</span><span class="o">|</span><span class="nv">xls</span><span class="o">|</span><span class="nv">exe</span><span class="o">|</span><span class="nv">pdf</span><span class="o">|</span><span class="nv">ppt</span><span class="o">|</span><span class="nv">txt</span><span class="o">|</span><span class="nv">tar</span><span class="o">|</span><span class="nv">mid</span><span class="o">|</span><span class="nv">midi</span><span class="o">|</span><span class="nv">wav</span><span class="o">|</span><span class="nv">bmp</span><span class="o">|</span><span class="nv">rtf</span><span class="o">|</span><span class="nv">css</span><span class="ss">)</span>$<span class="w"> </span>{<span class="w"></span> <span class="w"> </span><span class="nv">root</span><span class="w"> </span><span class="o">/</span><span class="nv">home</span><span class="o">/</span><span class="nv">user</span><span class="o">/</span><span class="nv">public_html</span><span class="o">/</span><span class="nv">mydomain</span>.<span class="nv">com</span><span class="o">/</span><span class="nv">public</span><span class="c1">;</span><span class="w"></span> <span class="w"> </span><span class="nv">expires</span><span class="w"> </span><span class="mi">7</span><span class="nv">d</span><span class="c1">;</span><span class="w"></span> <span class="w"> </span><span class="k">break</span><span class="c1">;</span><span class="w"></span> }<span class="w"></span> </code></pre></div> <p>That&rsquo;ll go in the https server section, too. Now, enable rewrites in your Wordpress config. I use the following &ldquo;custom&rdquo; structure:</p> <div class="highlight"><pre><span></span><code>/%year%/%monthnum%/%day%/%postname%/ </code></pre></div> <p>Then, restart Nginx:</p> <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal">1</span></pre></div></td><td class="code"><div><pre><span></span><code>$ sudo /etc/init.d/nginx restart </code></pre></div></td></tr></table></div> <p>And there you have it! You know have a working, new web server and mail server.</p> <p>(Previously, we did a <a href="http://pig-monkey.com/2008/06/10/an-ubuntu-vps-on-slicehost-basic-setup">basic setup</a>, <a href="http://pig-monkey.com/2008/06/10/an-ubuntu-vps-on-slicehost-web-server">installed a web server</a>, and <a href="http://pig-monkey.com/2008/06/10/an-ubuntu-vps-on-slicehost-mail">installed a mail server</a>.)</p>Beautifying2008-06-10T00:00:00-07:002012-09-15T00:00:00-07:00Pig Monkeytag:pig-monkey.com,2008-06-10:/2008/06/beautifying/<p>Another redesign! This one only 6 months from the <a href="http://pig-monkey.com/2007/12/08/a-redesign/">last</a>. How remarkable is that?</p> <!--more--> <p>The base template and heavy CSS of the last design made this change relatively simple. This time around, I&rsquo;m using <a href="http://developer.yahoo.com/yui/reset/">YUI Reset</a> and <a href="http://developer.yahoo.com/yui/fonts/">YUI Fonts</a>. I started using both of them a month or two …</p><p>Another redesign! This one only 6 months from the <a href="http://pig-monkey.com/2007/12/08/a-redesign/">last</a>. How remarkable is that?</p> <!--more--> <p>The base template and heavy CSS of the last design made this change relatively simple. This time around, I&rsquo;m using <a href="http://developer.yahoo.com/yui/reset/">YUI Reset</a> and <a href="http://developer.yahoo.com/yui/fonts/">YUI Fonts</a>. I started using both of them a month or two ago on a couple other sites. It&rsquo;s hard to imagine building a site without them now. They take a lot of headaches out of CSS.</p> <p>This design is not using <a href="http://developer.yahoo.com/yui/grids/">YUI Grids</a>. I have used it before, but I don&rsquo;t think it offers any benefit with this kind of design. It&rsquo;s more suited toward a content intensive site with many nested divisions. Something like <a href="http://www.yahoo.com/">Yahoo&rsquo;s front page</a>.</p> <p>You&rsquo;ll also notice a <a href="http://twitter.com/">Twitter</a> feed on the top of the index page. I&rsquo;ve been trying to figure out what the appeal of Twitter is, but so far, it&rsquo;s escaped me. I figured embedding tweets on the site would provide extra encouragement for me to try it out. I think Twitter may lend itself to my summer on the road, too. So, we&rsquo;ll see how long that lasts. It seems to be noticeably slow, so I might have to find another way to pull the data. </p> <p>Another new feature is tags. I started tagging posts a while ago, but haven&rsquo;t displayed them till now. The majority of posts are not tagged. Maybe someday I&rsquo;ll go back and tag the 1,300 old posts &ndash; but I doubt it.</p> <p>Some kinks of the design are still being worked out, but if you notice anything strange &ndash; whether it be from the redesign, <a href="http://pig-monkey.com/2008/06/09/a-move-to-slicehost/">server move</a>, or <a href="http://pig-monkey.com/2008/06/09/google-apps/">mail move</a> &ndash; let me know.</p>A Redesign2007-12-08T00:00:00-08:002012-09-15T00:00:00-07:00Pig Monkeytag:pig-monkey.com,2007-12-08:/2007/12/a-redesign/<p>So, things are looking a little different around here, no? I&rsquo;ve had this design floating around in the grey-matter for a spell, but I didn&rsquo;t think I&rsquo;d start on it for a while yet.</p> <p>Then I got bored.</p> <p>I whipped it up last night and today. A …</p><p>So, things are looking a little different around here, no? I&rsquo;ve had this design floating around in the grey-matter for a spell, but I didn&rsquo;t think I&rsquo;d start on it for a while yet.</p> <p>Then I got bored.</p> <p>I whipped it up last night and today. A lot quicker than I thought. There&rsquo;s still a few tweaks I want to make, but it looks so much better than the last one, I decided to put it up before it was polished.</p> <p>The design is very CSS heavy &ndash; though &ldquo;heavy&rdquo; might not be the right descriptor, as the whole thing is rather quite light in terms of size. CSS dependent. How&rsquo;s that? The last few visions of this site have been CSS dependent, but in this one &ndash; inspired in large part by <a href="http://www.csszengarden.com/">CSS Zen Garden</a> &ndash; I&rsquo;ve done my best to take out <em>all</em> styling from the pages and put it in the stylesheet. Of course, there&rsquo;s probably a bit of legacy styling lurking here-and-there in various old blog posts. Let me know if you stumble on any.</p> <p>The design has been tested in Firefox on both OS X and Ubuntu, as well as Safari in OS X. Let me know if you stumble upon any bugs, unless you&rsquo;re using IE. Actually, if you&rsquo;re using IE and want to send in a screenshot, I&rsquo;d be curious to see how the site renders.</p> <p>I&rsquo;m sure someone will be curious about the stripes. I put them in there as a joke and placeholder till I figured out what I wanted to do with the background, but hell if they don&rsquo;t look halfway decent. (It always ends up with me that some of the best design features start as jokes are bugs.) So, for now, they stay.</p>XI2007-02-20T00:00:00-08:002012-09-15T00:00:00-07:00Pig Monkeytag:pig-monkey.com,2007-02-20:/2007/02/xi/<p>There&rsquo;s nothing like a redesign to welcome Spring in (and it is Spring &ndash; I&rsquo;ve seen Mosquito buzzing around and, just today, berries growing on Oregon Grape.) The inspiration hit me yesterday morning, and I whipped it up in a day. It&rsquo;s a little more Web 2.0- …</p><p>There&rsquo;s nothing like a redesign to welcome Spring in (and it is Spring &ndash; I&rsquo;ve seen Mosquito buzzing around and, just today, berries growing on Oregon Grape.) The inspiration hit me yesterday morning, and I whipped it up in a day. It&rsquo;s a little more Web 2.0-<em>ish</em>, but I haven&rsquo;t completely fallen to the darkside &ndash; no gradients or rounded corners.</p> <p>A marked improvement from the previous design.</p> <p>I twiddled my thumbs for a while, trying to think of a way to display everything that used to be in the sidebar, before I decided that it was overrated. So, you&rsquo;ll now find the search box at the bottom of the page and a shiny new <a href="http://pig-monkey.com/what/#archives">Archives</a> page, brought to you by the <span class="removed_link">Clean Archives Plug-in</span>. It&rsquo;s not exactly dial-up friendly, so I&rsquo;ll probably fiddle with it a bit more in the future.</p> <p>How do you like the &ldquo;pig-monkey.com&hellip;&rdquo; bit over to the right? That was totally a fluke. It wasn&rsquo;t supposed to end-up there, but I thought it looked good.</p> <p>As usual, I have no idea what version this is, so it&rsquo;s been assigned the arbitrary number of 11. Let me know if you find any bugs. Unless you&rsquo;re using Internet Explorer. I know the site looks funky in that pile of shit. (And I mean no offense to <a href="http://www.weblife.org/humanure/" >piles of shit</a>. They&rsquo;re productive members of our society.)</p>