Efficient Resume Upkeep with xHTML & CSS

w3c proud css
w3c proud xhtml

Enjoy the powers of today’s CSS and xHTML? Feel you could be putting it to better use? I feel the same way, I’ve come to the conclusion that I really have little need for a word processor when my grasp of xHTML and CSS has become so complete. I don’t say this to brag for myself, but more to brag for the html – I feel this mark-up is under appreciated.

Only a Binary File and No Source

Just a “for instance”, the other day I needed to print off my resumé and quickly. However, a few obstacles stood in my way:

  • I’m in between laptops; the PC I’ve been using is my girlfriend’s. This means limited time to fiddle around and learn cool stuff like LaTeX.
  • Being that I’m in between laptops, the source file for my most recent resumé will stay buried in my old PC’s hard drive until the new one arrives.
  • The only thing I have to work off of for my resumé was a somewhat old PDF print-out I’ve kept on line.

xHTML & CSS: A Natural Choice

So, I needed a quick way to convert my PDF resumé back into source so I could edit it again. I copy/pasted a “select all” out of the PDF into OpenOffice Writer. This turned out more ugly than I had hoped, as the pretty layout of my name/contact info at the top of the page were all dropped down into plain sentences. Naturally, I hastily began restructuring everything using a table — then I thought, “What am I doing? I’m deploying bad html/1990’s habits in Open Office“. I realized I could be structuring my resumé far more efficiently and fruitfully with a few minutes between vi and Firefox.

Nasty Printer Habits

My decision turned out to be for the best, as I now have a resumé that’s sleeker looking than before which I can now tweak with more precision. Then in my haste I continued, “All right, now on to a PDF. File… Print.. ‘to pdf’Crap!” Turns out I completely took for granted the nasty print-job that’s become a standard for browser derived content. By that I’m particularly referring to the tendancy for browers not to print background colors (and more importantly css background-images) and the standard of placing time/url/title stamps on all four corners of the pages. Example screen-shot of browsers' printer output with ugly time-stamps.

FLOSS to the Rescue

Into the picture comes the wonderfully efficient and easy to use wkhtmltopdf (web kit html to pdf). This was easy to install, as per my usual findings with GNU/Linux applications, it was simply a matter of:

apt-get install wkhtmltopdf

Then, into my directory containing my beautiful xHTML/CSS Resumé and call with a “html” parameter and “pdf” parameter, like so:

wkhtmltopdf ./htmlresume.html ./htmlresume.pdf

Voilá! I now have a beautiful resumé in PDF format with divs (who’s background-images aren’t being ignored) and output that doesn’t look like it was printed off a website at exactly 02/19/2010 4:31pm and is Page 1 of 1.

Head Tag Hack: Manipulating Apache’s SSI to Realize Faster External CSS

living without a databaseYou may be asking yourself how I’ve even come to need such a hack. Well, firstly: its a hack so there’s probably another 99 approaches that I could take, but this ones mine. Secondly: good question! Let me explain what I’ve been up to that involves such a care for CSS. I’ve been falling in love with hand-coding standards compliant xHTML and CSS. I’ve been coding a new website to serve as my future home on the inter-webs (don’t hold your breath, though). Building this new site is serving a few purposes: education/experience, plain old fun, and a chance to live without a database. For the seed of inspiration, see Alex Reisner’s post. However this post isn’t about my new site, its about easily developing CSS.

Caching Is the Perpetrator

Efficiency and speed are a core theme in computing and naturally even more so in networking. This means that caching can be found at pretty much every level of the great World Wide Web – from client environments to server environments and everything in between. Wikipedia defines a cache as the “component that improves performance by transparently storing data“, keyword here being transparently. The problem for me is that I might make 10 changes to a style sheet in a matter of 20 seconds, re-checking my browser’s rendition of the work an equivalent 10 times. So, in the case of development my browser’s caching techniques are not at all transparent, but annoying because I may not see the results of my work until I’ve reloaded the page 15 times. I only suspected my browser was cached the style sheet I was editing because I recently read about, and played with, Google’s Page Speed plugin for Firefox, which scolded taught me:

The following resources are missing a cache expiration. Resources that do not specify an expiration may not be cached by browsers. Specify an expiration at least one month in the future for resources that should be cached, and an expiration in the past for resources that should not be cached:

  • package.css
  • front.css
  • main.css

Knee Jerk Reaction

So realizing that my browser was caching the style sheet because it was external, I simply made my CSS internal, just temporarily for development. Although this did work, I quickly remembered why I keep my sheets external: internal CSS makes a mess of html documents. External sheets become infinitely easier to navigate and edit when they’re isolated from their html document.

Compromise, though still Temporary

So, I think its pretty obvious to see my next step if you’ve used Apache SSI. Here’s how much clutter is caused by an inline style sheet, when its brought in by Apache’s SSI:

<html>
        <head>
        ...
        <!-- external css files
	<link rel="stylesheet" href="main.css" mce_href="main.css" type="text/css" media="all" />
        TEMPORARILY COMMENTED OUT -->
 
        <!-- inline development css -->
        <!--#include virtual="/site/css/resume/main.css"-->
        ...
        </head>
        ...
</html>

This way I get to keep my style sheet external to the document for the development/server process, and my document will be served with inline styles – keeping the browser from doing any caching. This is working out wonderfully for me on my local server, for development. However, since this is certainly not a standard way of doing things I’d strongly suggest not doing this in a production environment unless you a) know what you’re doing and b) you’re the only one who will be working with the code. Oh and don’t forget to flip back to a proper external link before your stuff goes live.

Tux, GNU and a Patchy server: My IDE!

Haven’t you heard of an IDE Before??

Integrated?? Ehh.. I feel like they should be called Hidden Development Environments. Although I’ve worked in places where I was forced to use some IDEs, I personally prefer my own environment, my Operating System. I feel like people forget: the OS is here to provide for us; GNU/Linux has provided me with everything I could need: a shell, a browser and vi. So far, I’ve found that using my own environment actually allows for a more transparent process. Whether its an IDE for C++ development (like Code::Blocks) or an IDE for web development (like Kompozer) I just like my OS better.

How To Fix: Synaptic Package Manager and Update Manager Won’t Start

Synaptic Package Manager and Update Manager application iconsToday I had a little mini panic over a technical issue, but thanks to really awesome Community Technical Support for my Linux system it was solved in mere minutes. This post is my attempt to insure no one else has to connect the same dots.

The Problem

I couldn’t start Synaptic Package Manager or Update Manager. Going to the gnome menu and choosing one would yield the following results:

  1. Clicking Synaptic Package Manager would bring up gksu, but only to be followed by a brief flash of graphics across the screen as if Synaptic was launching, and then nothing.
  2. Clicking Update Manager would do nothing

Hunt for Answers

Instinctively I Googled “synaptic won’t start” and found a forum thread immediately, but unfortunately its only solutions were to reinstall the operating system. Being that this isn’t Windows XP, I figured that’d be overkill. However, I was starting to break a sweat, as I’m in the process of clearing my stuff off this laptop to give back to my girlfriend (who is not a computer science major).

Next I tried out the IRC channel, #ubuntu on irc.freenode.net. I got a help right away, but it was an ueber vague, “apt lock file needs to be deleted“. Alas, a little more probing got me a slightly more helpful, “this forum thread says to apt-get autoremove && apt-get clean && apt-get autoclean“. Yes, it is only slightly less vague of an answer, but I deemed the commands harmless after skimming the apt-get man page and tried it out.

Pot of Gold

The above mentioned command is what lead to my victory finding. Running the command (either on one line or all separately) each apt-get statement would fail with:
Reading Package Lists... Done
Segmentation faulty Tree... 50%

So, a quick hop on Google with “segmentation faulty tree” brought me my answer, all I needed to do was delete a few files with:
sudo rm /var/cache/apt/*.bin
Thanks to Debian mailing list