pig-monkey.com - adminhttps://pig-monkey.com/2023-11-29T20:46:41-08:00I met someone the other day who asked what my blog was about.2023-11-29T00:00:00-08:002023-11-29T20:46:41-08:00Pig Monkeytag:pig-monkey.com,2023-11-29:/2023/11/specialization/<p>I was briefly stumped. I try <a href="/2012/12/topics/">not to be about</a>. I replied &ldquo;Well, I think the last few posts were about notebooks, opera glasses, tea, and bicycle mirrors.&rdquo;</p> <p>If I wasn&rsquo;t me, <a href="/2022/11/audience/">I would be in to me</a>.</p> <video width="1280" height="694" controls> <source src="/media/video/ghost_in_the_shell-specialization.mp4" type="video/mp4"> Your browser does not support the video tag. </video>One of the things that I find refreshing about running an isolated personal blog, as opposed to whatever social hellscape the rest of the online population is participating in today, is not caring about the audience.2022-11-22T00:00:00-08:002022-11-22T19:10:51-08:00Pig Monkeytag:pig-monkey.com,2022-11-22:/2022/11/audience/<p>Or even knowing if there is one. (I could look at the web server logs, but I don&rsquo;t.) I post for a hypothetical reader who is me but not me.</p> <p>When choosing <a href="/2012/12/topics/">what to write about</a>, I usually think &ldquo;If I found this post on another site, would I …</p><p>Or even knowing if there is one. (I could look at the web server logs, but I don&rsquo;t.) I post for a hypothetical reader who is me but not me.</p> <p>When choosing <a href="/2012/12/topics/">what to write about</a>, I usually think &ldquo;If I found this post on another site, would I think it was cool?&rdquo;. And, reader, I do. So fucking cool.</p>I try to avoid being a topic-specific blog.2012-12-31T00:00:00-08:002018-12-31T00:00:00-08:00Pig Monkeytag:pig-monkey.com,2012-12-31:/2012/12/topics/<p>I don&rsquo;t want this to be a blog that is only about <a href="/tag/wilderness/">backpacking</a>, or <a href="/tag/bicycle/">bikes</a>, or <a href="/tag/linux/">Linux</a>. I want to cover all of my interests &ndash; which range widely &ndash; in a way that others don&rsquo;t (or can&rsquo;t). I dislike it when other blogs publish long posts that only …</p><p>I don&rsquo;t want this to be a blog that is only about <a href="/tag/wilderness/">backpacking</a>, or <a href="/tag/bicycle/">bikes</a>, or <a href="/tag/linux/">Linux</a>. I want to cover all of my interests &ndash; which range widely &ndash; in a way that others don&rsquo;t (or can&rsquo;t). I dislike it when other blogs publish long posts that only regurgitate what others wrote, or simply latch onto a popular topic without adding anything new to the discussion. I only <a href="/2012/09/mark-two/">began blogging again in September</a>, which makes for a small selection of posts in <a href="/2012/">this year&rsquo;s archives</a> to evaluate. Looking back, I&rsquo;m pleased with the diversity of topics covered.</p> <p><a href="/media/images/calvin_hobbes-new_year_resolution.jpg"> <img src="/media/images/calvin_hobbes-new_year_resolution-thumb.jpg" alt="Calvin and Hobbes: New Years Resolution" /> </a></p>A Better Blogroll2012-12-24T00:00:00-08:002018-11-30T00:00:00-08:00Pig Monkeytag:pig-monkey.com,2012-12-24:/2012/12/blogroll/<p>The blogroll is a standard feature of most blogs that is conspicuously absent from the current version of this website. In the past I&rsquo;ve struggled to keep my blogroll up-to-date. In order to be useful, I think the blogroll should contain only blogs that I am currently reading. That …</p><p>The blogroll is a standard feature of most blogs that is conspicuously absent from the current version of this website. In the past I&rsquo;ve struggled to keep my blogroll up-to-date. In order to be useful, I think the blogroll should contain only blogs that I am currently reading. That list fluctuates frequently, and I have a poor track record of keeping my blogroll in sync with <a href="https://www.newsblur.com/">my feed reader</a>. One of the problems is that I regularly read many blogs, but there are very few blogs out there whose every post I enjoy.</p> <p>But <a href="/2012/11/leaving-twitter-behind/">I use microblogging to share links</a>. So, why not just continue with that method? When I created <a href="/2012/09/mark-two/">the latest version</a> of this blog I decided to do away with the blogroll entirely. Now, when I read a blog post that I particularly enjoy, I blog about it. Like <a href="/2012/11/bfe-labs-blow-out-kits-and-hemostatic-agents/">here</a> or <a href="/2012/12/puffy-layers/">here</a>. When I come across a blog that is full of wonderful posts, I <a href="/2012/10/emily-chappell-cycling-around-world/">blog about it too</a> &ndash; and, chances are, I&rsquo;ll still end up blogging about individual articles on those websites. All of these microposts are assigned the <a href="/tag/blogroll/">blogroll tag</a>.</p> <p>To me this seems like a much more meaningful way to share links. Rather than maintaining a separate page with a list of not-frequently updated links, you have the <a href="/tag/blogroll/">blogroll tag archive</a>. Links are timestamped and curated, which makes it more useful to my readers. And I think that linking to specific content rather than full domains makes for a more useful and rewarding metric for the owners of the linked blogs.</p>Leaving Twitter Behind2012-11-23T00:00:00-08:002012-11-23T00:00:00-08:00Pig Monkeytag:pig-monkey.com,2012-11-23:/2012/11/leaving-twitter-behind/<p>The web has been moving more and more towards a centralized structure. Services like Twitter, Facebook, Google and Flickr are all examples of this. To me, it is a disturbing trend. It&rsquo;s bad for the internet as a whole, and on a more personal level is damaging to individual …</p><p>The web has been moving more and more towards a centralized structure. Services like Twitter, Facebook, Google and Flickr are all examples of this. To me, it is a disturbing trend. It&rsquo;s bad for the internet as a whole, and on a more personal level is damaging to individual liberty and freedom. Lately, I&rsquo;ve been making a stronger effort to forgo these services.</p> <p>During the year that I took off from blogging, I maintained a steady <a href="https://twitter.com/pigmonkey">presence on Twitter</a>. When I decided to relaunch my blog, I knew I wanted to integrate Twitter-like <a href="http://en.wikipedia.org/wiki/Microblogging">microblogging</a> into the site somehow. Looking over my Twitter history, it was clear that I was predominately using the service for one thing: sharing links. There&rsquo;s no reason that I couldn&rsquo;t do that on my blog. In fact, some of the earliest web logs were simply lists of interesting links.</p> <p>I rarely participate in conversations on Twitter. I find it to be a horrible medium for that. Conversations that begin with microblog posts can be handled with any blog comment software (and I think the resulting experience is much improved over what Twitter can offer). If you use Twitter to contact people and <em>start</em> conversations, a blog probably won&rsquo;t work for you. (But there&rsquo;s a great distributed social networking platform out there that you might want to look into. It&rsquo;s called <a href="http://en.wikipedia.org/wiki/Email">email</a>.)</p> <p>Initially I considered adding a new model to <a href="https://github.com/pigmonkey/django-vellum">vellum</a> for microposts. When I thought about what a micropost is and what I wanted to do with them, I decided that modifying vellum was unnecessary. I&rsquo;ve seen some people claim that microposts don&rsquo;t have titles, but I think that&rsquo;s incorrect: the primary content <em>is</em> the title. In addition to the title, the micropost needs a place to include the URL that is being shared. Why not just put that in the post body? The URL can simply be pasted into the field, ala Twitter, or included as an anchor tag contained within a new sentence. All that I needed was to uniquely style the microposts.</p> <p>I decided to place all microposts in a new <a href="/tag/micro/">micro</a> category. Posts in that category are then <a href="https://github.com/pigmonkey/pig-monkey.com/blob/master/sass/apps/blog.scss#L130">styled differently</a>. This allows the user to quickly differentiate these short microposts from the more traditional, long-form articles. It also helps to represent the relationship of the title and the rest of the post.</p> <p>With this in place, I no longer had a need for Twitter, but I still wanted to feed all of my posts into the service. I know some people use Twitter as a sort of weird feed reader, and I have no problem pumping a copy of my data into centralized services. As it turns out, there are a number of services out there that will monitor a feed and post the results to services like Twitter. I started out with <a href="http://feedburner.google.com/">FeedBurner</a>, but this seemed like overkill as I had no intention of utilizing the other FeedBurner offerings (giving up control of the namespace of your feed is another instance of the craziness associated with the move to a centralized web). After some brief experimentation, I settled on <a href="http://dlvr.it/">dlvr.it</a>.</p> <p>This accomplishes everything that I was looking for. All of my blog posts, micro or not, are now on my blog (fancy that). I retain ownership and control of all my data. Everything is archived and <a href="/search.html">searchable</a>. I&rsquo;m not depending on some fickle, centralized service to shorten the links that I&rsquo;m trying to share. People who want to follow my updates can <a href="/feed/">subscribe to my feed</a> in their feed reader of choice. My activity can still be followed in Twitter, but I don&rsquo;t have any active participation in that service.</p> <p>I&rsquo;ve found that not attempting to restrain myself to a character limit is like a breath of fresh air. Previously I was able to share links only. There was little-to-no space left over for commentary. Now I can include my thoughts about the link being shared, whether it be <a href="/2012/09/currently-reading-journey-centre-earth-richard-and-nicholas-crane/">a book that I&rsquo;m reading</a> or a <a href="/2012/10/bitcoins-are-not-insecure/">news article</a> that piques my interest. This is more satisfying to me, and I think results in a more meaningful experience for those who are interested in my thoughts.</p> <p>Since moving to this system, I&rsquo;ve only launched <a href="https://github.com/shellex/Hotot">my Twitter client</a> two or three times. I&rsquo;ve found that I don&rsquo;t miss the stream. I never followed too many people on Twitter. Many of those whom I did follow maintain some sort of blog with a feed that I subscribe to. Some don&rsquo;t. That&rsquo;s unfortunate, but if your online presence exists solely within a walled garden, I&rsquo;m ok with not following you.</p>Mark 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 Move to Django2011-06-11T00:00:00-07:002012-12-22T00:00:00-08:00Pig Monkeytag:pig-monkey.com,2011-06-11:/2011/06/move-django/<p>You may not notice much, but this blog has been completely rewritten.</p> <p>I started developing in <a href="http://djangoproject.com">Django</a> last winter and quickly became smitten with both the Django framework and the <a href="http://python.org">Python</a>. Most of the coding I&rsquo;ve done this year has been in Python. Naturally, I had thoughts of moving …</p><p>You may not notice much, but this blog has been completely rewritten.</p> <p>I started developing in <a href="http://djangoproject.com">Django</a> last winter and quickly became smitten with both the Django framework and the <a href="http://python.org">Python</a>. Most of the coding I&rsquo;ve done this year has been in Python. Naturally, I had thoughts of moving this website from <a href="http://wordpress.org">Wordpress</a> over to a Django-based blog.</p> <p>For a while I did nothing about it. Then I had another project come up that required some basic blog functionality be added to a Django-based site. A blog is &ndash; or, at least, can be &ndash; a fairly simple affair, but before writing my own I decided to look around and see what else was out there. There&rsquo;s a number of Django-based blogs floating around (<a href="http://blog.montylounge.com/2010/02/10/eleven-django-blog-engines-you-should-know/">Kevin Fricovsky has a list</a>), but few of them jumped out at me. Most were not actively developed and depended on too many stale packages for my taste, or they just had a feature set that I didn&rsquo;t like.</p> <p>Out of all of them, two presented themselves as possibilities: <a href="https://github.com/montylounge/django-mingus">Mingus</a> (written by the previously mentioned Kevin) and Nathan Borror&rsquo;s <a href="https://github.com/nathanborror/django-basic-apps">django-basic-apps</a>. Mingus tries to be a full-featured blogging application and was much too complex for the simple project I was then working on. But the blog application in django-basic-apps (a fork of which provides Mingus with its core blog functionality) looked like it would fit the bill. As the name implies, it is meant to be a very basic blog. I dived in to the code I discovered that, with a few modifications, it would do what I needed.</p> <p>So I finished that project. But now having messed with blogging in Django I was more motivated to get started on rewriting my own site. I took another look at Mingus. Although it was too complex for the previous project, the features it provides are very similar to the features I wanted for this website. I looked at and thought about Mingus for a time, repeatedly turning it down and then coming back to it. The question centered around the project&rsquo;s staleness more than anything else. Currently, Mingus is built for Django 1.1. That&rsquo;s an old version. As of this writing, the current version is 1.3. Many improvements have been made in Django since 1.1 and I was not too keen to forgo them and run an old piece of code. Mingus is under active development, and will be updated for Django 1.3, but it&rsquo;s a hobby-project, so the work is understandably slow.</p> <p>In the end, I decided that the best thing to do was go my own route, but take some pointers and inspiration from Mingus. I would make my own fork of django-basic-apps, using that blog as the basis, and build a system on top of that. I created <a href="https://github.com/pigmonkey/django-vellum">my fork</a> last month and have been steadily plodding away on it in my free time. Over the course of the development I created <a href="https://github.com/pigmonkey/django-wmd">a few</a> <a href="https://github.com/pigmonkey/django-badgr">simple</a> <a href="https://github.com/pigmonkey/django-twat">applications</a> to complement the core blog, and <a href="https://github.com/bartTC/django-markup/commit/13654d7159a7c8b82f1fc3e5bd222441448b3f47">contributed code</a> to another project.</p> <p>It&rsquo;s not quite done &ndash; there&rsquo;s still a few things I want to improve &ndash; but it&rsquo;s good enough to launch. (If you notice any kinks, let me know.) I&rsquo;m quite pleased with it.</p> <p>This is a notable occasion. I&rsquo;ve been using Wordpress since before it was Wordpress, but it is time to move on. (Wordpress is a fork of an old piece of code called <a href="http://cafelog.com/">b2/cafelog</a>. My database tables have been rocking the <code>b2</code> prefix since 2002.)</p> <p>As you&rsquo;ve no doubt noticed, the look of the site hasn&rsquo;t changed much. I tweaked a few things here and there, but for the most part just recreated the same template as what I had written for Wordpress. I am planning on a redesign eventually. For now, I wanted to spend my time developing the actual blog rather than screwing with CSS.</p> <p>So, there you have it. <a href="https://github.com/pigmonkey/django-vellum">Everything is open source</a>. Download it, fork it, hack it (and don&rsquo;t forget to send your code changes back my way). Let me know what you think. Build your own blog with it! (There&rsquo;s even a <a href="https://github.com/pigmonkey/django-vellum/blob/master/vellum/management/commands/wordpress_import.py">script to import data from Wordpress</a>.) I think it&rsquo;s pretty sweet. The only thing lacking is documentation, and that&rsquo;s my next goal.</p> <h2>Disqus</h2> <p>The biggest change for the user is probably the comments, which are now powered by <a href="http://disqus.com/">Disqus</a>. Consider it a trial. I&rsquo;ve seen Disqus popping up on a number of sites the past year or so. At first it annoyed me, mostly because I use <a href="http://noscript.net/">NoScript</a> and did not want to enable JavaScript for another domain just to comment on a site. But after I got over that I found that Disqus wasn&rsquo;t too bad. As a user I found it to be on par with the standard comment systems provided by Wordpress, Blogger, and the like. The extra features don&rsquo;t appeal to me. But as an administrator, Disqus appeals to me more because it means that I no longer have to manage comments myself! And as a developer, I&rsquo;m attracted to <a href="http://blog.disqus.com/post/3879996850/scaling-disqus-at-pycon-2011">some of the things</a> that Disqus has done (they&rsquo;re a Python shop, and run on top of Django) and their <a href="https://github.com/disqus">open source contributions</a>.</p> <p>So I&rsquo;m giving it a shot. Disqus will happily export comments, so if I (or you) decide that I don&rsquo;t like it, it will be easy to move to another system.</p> <h2>Markdown</h2> <p>One final note: I like <a href="http://daringfireball.net/projects/markdown/">Markdown</a>. That might be an understatement.</p> <p>I first starting using Markdown on <a href="https://github.com">GitHub</a>, which I signed up for about the same time I started with Django and Python. After learning the <a href="http://daringfireball.net/projects/markdown/syntax">syntax</a> and playing with it for a few weeks, I discovered that I had a very hard time writing prose in anything else. In fact, the desire to write blog posts in Markdown was probably the biggest factor that influenced me to get off my butt and move away from Wordpress.</p> <p>So, I incorporated Markdown into the blog. But rather than just making the blog Markdown-only, I took a hint from Mingus and included <a href="https://github.com/bartTC/django-markup">django-markup</a>, which supports rendering in many <a href="https://secure.wikimedia.org/wikipedia/en/wiki/Lightweight_markup_language">lightweight markup languages</a>.</p> <p>Because I&rsquo;m still new to Markdown and occasionally cannot remember the correct syntax, I wanted to include some version of WMD. WMD is a <a href="https://secure.wikimedia.org/wikipedia/en/wiki/WYSIWYM">What You See Is What You Mean</a> editor for Markdown, a sort of alternative to <a href="https://secure.wikimedia.org/wikipedia/en/wiki/WYSIWYG">WYSIWYG</a> editors like TinyMCE. (It is my believe that WYSIWYG editors are one of the worst things to happen to the Internet.) All WMD consists of is a JavaScript library. The original was written by a guy named John Fraser, who was abducted by aliens some time in 2008. Since his disappearance from the interwebs, WMD has been forked countless times. I looked around at a few found a version that I was happy with (which happens to be a fork of a fork of a fork of a fork), and rolled it into <a href="https://github.com/pigmonkey/django-wmd">a reusable app</a>. While I was at it, I made some visual changes to the editing area for the post body. The result is an attractive post editing area that is simple to use and produces clean code. I think it is much better than what is offered by Wordpress.</p>Twitter Changes2010-06-13T00:00:00-07:002012-09-15T00:00:00-07:00Pig Monkeytag:pig-monkey.com,2010-06-13:/2010/06/twitter-changes/<p>I&rsquo;ve decided that I don&rsquo;t like pulling individual tweets into the blog as uniquely styled posts. For now, that behavior has been disabled. I&rsquo;ve moved to a single weekly aggregate post including all the previous week&rsquo;s tweets. We&rsquo;ll see how that goes.</p> <p>Since individual tweets …</p><p>I&rsquo;ve decided that I don&rsquo;t like pulling individual tweets into the blog as uniquely styled posts. For now, that behavior has been disabled. I&rsquo;ve moved to a single weekly aggregate post including all the previous week&rsquo;s tweets. We&rsquo;ll see how that goes.</p> <p>Since individual tweets are no longer being pulled in, I&rsquo;ve put a list of the most recent tweets down in the footer. Next to that you&rsquo;ll also find a new list of the week&rsquo;s most popular posts. Fancy!</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>ITS Tactical2010-03-17T00:00:00-07:002012-09-15T00:00:00-07:00Pig Monkeytag:pig-monkey.com,2010-03-17:/2010/03/its-tactical/<p><a href="http://www.itstactical.com/">ITS Tactical</a> is a site that, in their words, is dedicated to <a href="http://www.itstactical.com/about/">living better on the tactical side of life</a>. The site only launched in April of 2009, but with its tutorials, gear reviews, and other articles, has already established itself as mainstay in the community. I first discovered ITS …</p><p><a href="http://www.itstactical.com/">ITS Tactical</a> is a site that, in their words, is dedicated to <a href="http://www.itstactical.com/about/">living better on the tactical side of life</a>. The site only launched in April of 2009, but with its tutorials, gear reviews, and other articles, has already established itself as mainstay in the community. I first discovered ITS last summer, and it immediately became one of my daily reads.</p> <p>Last week, Bryan, the editor-in-chief, contacted me and said that he was interested in featuring my work with the <a href="http://pig-monkey.com/2009/06/22/diy-tyvek-stuff-sack/">DIY Tyvek Stuff Sacks</a> on ITS. I had been meaning to rewrite that article, anyways, in order to demonstrate my new method for constructing the sacks. So I jumped at the opportunity to be a guest writer for ITS. You can see <a href="http://www.itstactical.com/gear/diy-tyvek-stuff-sacks/">my article on ITS right here</a>, and all the photos are of course <a href="http://www.flickr.com/photos/pigmonkey/sets/72157620193065231/">available on Flickr</a>.</p> <p>If you&rsquo;re coming here from ITS, welcome! You might be interested in <a href="http://pig-monkey.com/tag/gear/">gear stuff</a>, or more specifically <a href="http://pig-monkey.com/tag/edc/">EDC stuff</a>. Or maybe <a href="http://pig-monkey.com/tag/wilderness/">wilderness stuff</a>. Who knows. There sure is <a href="http://pig-monkey.com/what/#archives">a lot of stuff</a>.</p> <p><a href="http://www.itstactical.com"><img class="thumb" src="http://farm3.static.flickr.com/2776/4426271074_7a12e3f6e1_m_d.jpg" alt="ITS Tactical logo" /></a></p>Updated Links2010-03-13T00:00:00-08:002012-09-15T00:00:00-07:00Pig Monkeytag:pig-monkey.com,2010-03-13:/2010/03/updated-links/<p>I decided that I wanted to do something useful with <a href="/links/">my links page</a>, so I&rsquo;ve updated it to list those blogs that I subscribe to with my feed reader. Currently, there are 59 links. I&rsquo;ll try to keep the list updated as I stop reading old blogs or …</p><p>I decided that I wanted to do something useful with <a href="/links/">my links page</a>, so I&rsquo;ve updated it to list those blogs that I subscribe to with my feed reader. Currently, there are 59 links. I&rsquo;ll try to keep the list updated as I stop reading old blogs or start to read new ones.</p>RSS Mash-Up2009-10-01T00:00:00-07:002012-09-15T00:00:00-07:00Pig Monkeytag:pig-monkey.com,2009-10-01:/2009/10/rss-mash-up/<p class="added">This mash-up feed still exists, but you probably don't want to use it. As of May 2010, Twitter feeds are now integrated into the blog and thus are included in <a href="http://pig-monkey.com/feed/">the normal feed</a>. The mash-up feed now only mashes the blog feed and Flickr photos</p> <p>When I first decided to …</p><p class="added">This mash-up feed still exists, but you probably don't want to use it. As of May 2010, Twitter feeds are now integrated into the blog and thus are included in <a href="http://pig-monkey.com/feed/">the normal feed</a>. The mash-up feed now only mashes the blog feed and Flickr photos</p> <p>When I first decided to add twitter posts to my site, I debated whether I would rather have them integrated into the actual blog posts or separated. Visually, I like to have the separation, but I always thought it would be neat to pull the twitter posts directly into Wordpress&rsquo; database, and so have them integrated into my RSS feed. Otherwise, for those who wish to follow my twitter posts, but are not on twitter, they have to subscribe to two different feeds &ndash; both my blog feed and twitter feed.</p> <p>Today, I had the idea of keeping the actual separation of twitter and the blog, but simply creating a new RSS feed using some sort of RSS-mash-up-aggregator thingy. I thought <a href="http://feedburner.com/">Feedburner</a> could do something like that, but apparently not. After searching around for other options and not finding anything that really excited me, I decided to just use <a href="http://pipes.yahoo.com/pipes/">Yahoo Pipes</a>. After all, this is pretty much what it was made for.</p> <!--more--> <p>Combining feeds in Pipes is pretty simple, but after mashing them together, I discovered that twitter&rsquo;s RSS feed is kinda ugly. Luckily, editing feeds using regular expressions in Pipes is pretty simple, too. After polishing up the twitter feed a bit, I thought Why not toss my Flickr feed into this puppy? But occasionally I&rsquo;ll upload a large group of photos to Flickr at a single time, and I didn&rsquo;t want to totally bomb my new RSS feed. Plus, most of the time when I put photos on Flickr, I create an accompanying blog post, so I wasn&rsquo;t sure that adding the Flickr feed to the mash-up was even necessary. I figured that I&rsquo;d toss in the Flickr feed for now, but compromise by having Pipes truncate it to the 6 most recent items.</p> <p><a href="http://pipes.yahoo.com/pipes/pipe.info?_id=27c9f21436b53398e2b48ec816612563">Now I have a pretty new feed.</a></p> <p>Then came the problem of what to do with it. I didn&rsquo;t want to just toss up a link somewhere. I preferred the idea of replacing my normal blog feed with this new super-feed. But I also didn&rsquo;t want to just edit the Wordpress template header. I new Feedburner had a plugin to integrate with Wordpress, so I thought about burning the new feed and then using the Feedburner plugin to pull it in, but that seemed a little excessive, particular since I don&rsquo;t care about any of the click-tracking or monetizing features of Feedburner. Then I found the <a href="http://wordpress.org/extend/plugins/wp-feedlocations/">Feed Locations</a> plugin, which does exactly what I wanted: allow me to specify the location of my feed in the Wordpress admin panel.</p> <p>Now, if you ask Wordpress for this site&rsquo;s RSS feed, you get <a href="http://pipes.yahoo.com/pipes/pipe.run?_id=27c9f21436b53398e2b48ec816612563&_render=rss">the new feed</a>. If you&rsquo;re opposed to all this new fanciness and just want the plain old blog feed, it&rsquo;s still up at the <a href="http://pig-monkey.com/feed/">same location</a>, just not linked to from anywhere.</p> <p>Let me know what you think about having the Flickr photos in the feed. If it&rsquo;s redundant, I&rsquo;ll take them out.</p>Back to Dreamhost2009-05-22T00:00:00-07:002012-09-15T00:00:00-07:00Pig Monkeytag:pig-monkey.com,2009-05-22:/2009/05/back-to-dreamhost/<p>I&rsquo;ve moved this domain back to Dreamhost. It&rsquo;s been <a href="http://pig-monkey.com/2008/06/09/a-move-to-slicehost/">a good run with Slicehost</a>. I still think that they are the superior host (I&rsquo;ve already noticed a slowness with Dreamhost compared to Slicehost) and I greatly prefer the freedom and control of a VPS over shared hosting …</p><p>I&rsquo;ve moved this domain back to Dreamhost. It&rsquo;s been <a href="http://pig-monkey.com/2008/06/09/a-move-to-slicehost/">a good run with Slicehost</a>. I still think that they are the superior host (I&rsquo;ve already noticed a slowness with Dreamhost compared to Slicehost) and I greatly prefer the freedom and control of a VPS over shared hosting, but Dreamhost is cheaper and I need to cut down expenses. In the future I may move back to Slicehost again.</p> <p>If anybody finds anything broken due to the move, let me know.</p>Jabber Changes2009-05-08T00:00:00-07:002012-09-15T00:00:00-07:00Pig Monkeytag:pig-monkey.com,2009-05-08:/2009/05/jabber-changes/<p>I&rsquo;ve changed my jabber account to <strong>pigmonkey@jabber.org</strong>. The old account is no longer active.</p> <p>The jabber.org server doesn&rsquo;t support transports, so I am no longer reachable through the old ICQ or AIM accounts. All the contacts I actually speak with seem to be on XMPP …</p><p>I&rsquo;ve changed my jabber account to <strong>pigmonkey@jabber.org</strong>. The old account is no longer active.</p> <p>The jabber.org server doesn&rsquo;t support transports, so I am no longer reachable through the old ICQ or AIM accounts. All the contacts I actually speak with seem to be on XMPP, so that shouldn&rsquo;t matter.</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>