http://www.bjerrehuus.dk/blog/jens The personal website of Jens Bjerrehuus has articles about web development, photography and computing. en jens@bjerrehuus.dk Copyright 2008 2008-06-15T15:41:00+01:00 http://bjerrehuus.dk/blog/jens/article/how-to-automatically-create-transparent-overlays-on-images-with-javascript/ http://bjerrehuus.dk/blog/jens/article/how-to-automatically-create-transparent-overlays-on-images-with-javascript/#When:15:41:00Z Here we describe a way to automatically add a transparent overlay to an image to allow text placed on top of the image to be legible. When you want to place text on top of an image you need to either choose an image that has a large area of mostly the same color to work as the background for the text or you need to overlay the image with a transparent layer that will then act as the background for the text.  Here we choose the second option and describe a simple JavaScript function that will apply the extra mark-up needed automatically. How to Create the Transparent Overlay Sara Flemming describes a technique involving an extra div element that will prevent the transparency from being applied to the text elements contained by the wrapper element. Basically, the trick is to add an empty div before the text elements and apply the transparency to the extra empty div.  That empty div is then positioned, so that it overlaps with the text elements. Applying the Transparent Overlay Automatically To simplify the use of this technique, I created a small JavaScript function that will add the extra transparent div along with the needed CSS styles automatically.  All, you have to do is add the class transparent-overlay to the element you want to have the overlay and create the styles that define the layout of the transparent overlay. The Structure of the HTML In the example here I have a div with a header element and a paragraph of text.  The div has a background image that is not immediately usable as a background to place text on, so I need to create a transparent overlay on the image to place the text on. The first thing to do is to include the JavaScript file in the header: <script src="javascript/overlay.js" type="text/javascript" charset="utf-8"></script> After the JavaScript function is included you can add the class transparent-overlay to the elements you want to have a transparent overlay.  Here I have added it to the div that contains my text elements. <div class="module order transparent-overlay"> <h2>Udfyld en</h2> <p>bestillingsseddel og send den til os…</p> </div> This div element has an image background. .module.order { background:url(../images/orderpad.jpg) no-repeat 0 0; } Once the JavaScript function has transformed the HTML there will be two extra div elements. The first is an empty div that has the class overlay-background added.  This class is styled by the JavaScript function as described in the next section, but you can of course override that styling by adding your own stylerule for the overlay-background class. The second div is wrapped around the elements that were originally wrapped in the element with the transparent-overlay class.  This div has the class overlay-message added, which again allows you to style the text as you want to. Here’s how the structure looks after the transformation. <div class="module order"> <div class="overlay-background"></div> <div class="overlay-message"> <h2>Udfyld en</h2> <p>bestillingsseddel og send den til os…</p> </div> </div> The CSS Rules To Style the Overlay The transformation function adds a stylerule at the beginning of the first stylesheet in the page.  That stylerule defines the look of the empty div added to the HTML.  The rule looks like this: .overlay-background { background:#222; filter:alpha(opacity=80); height:100%; -khtml-opacity:0.8; -moz-opacity:0.8; opacity:0.8; text-shadow:0 0 0 #000; width:50%; } You are of course free to add your own stylerule to override this or to add other attributes to the look of the transparent overlay; you might e.g. want the transparent layer to be darker, in which case you would change the background color of the overlay-background stylerule. In the example here I would probably add some styles to position the overlay background and the overlay message on top of each other and I would also add a specific width to the overlay-background to match the amount of text better than the default width of fifty percent of the containing element. .module .overlay-background { left:1em; position:absolute; top:0; width:11em; } .module .overlay-message { left:1em; position:absolute; top:0; } Conclusions And that is pretty much all there is to it.  I’ve seen this work in Safari 3, Firefox 2, and IE 7.  The JavaScript function is released here with an MIT license, so feel free to use it under those rules. You should be aware of one restriction on the use of this script because of the way that it inserts a stylerule in the first stylesheet on the page.  I initially had a couple of @ (at-sign) directives at the start of my stylesheet; i.e. a @charset directive and a couple of @import directives.  It turned out that Firefox does not like that.  It fails to insert the rule complaining that the node cannot be inserted at the specified point in the hierarchy. 2008-06-15T15:41:00+01:00 http://bjerrehuus.dk/blog/jens/article/improve-the-typographic-style-of-your-expression-engine-websites/ http://bjerrehuus.dk/blog/jens/article/improve-the-typographic-style-of-your-expression-engine-websites/#When:08:43:00Z Have you noticed the increased focus in the last year or so on better typographic style on the internet.  Topics like typographic grids and vertical rhythm have recieved more attention in relation to web design.  Other aspects of typographic style like the styling of ampersands and the use of proper quote characters has also received more focus than before.  It is the application of these latter aspects of typograhic style in the context of the Expression Engine CMS that is the focus of this article. Have you noticed the increased focus in the last year or so on better typographic style on the internet.  Topics like typographic grids and vertical rhythm have recieved more attention in relation to web design.  Other aspects of typographic style like the styling of ampersands and the use of proper quote characters has also received more focus than before.  It is the application of these latter aspects of typograhic style in the context of the Expression Engine CMS that is the focus of this article. The Background Story Typogrify is a collection of filters for the Django Web framework, which provides filters that help you follow better typographic styles.  It filters your website through a number of regular expressions and wraps certain typographically significant entities in HTML span elements with a class name that identify the typographic element; e.g. the class amp is set on a span enclosing ampersand characters. Typogrify Plugin for Expression Engine The typogrify plugin for Expression Engine is a reinterpretation of the Django filters of the same name.  I have used the original ideas and expanded a bit on them. Here I present the functions that are available in the plugin with a short description of what it does to your text. {exp:typogrify:amp} Wrap ampersands in a span with class="amp".  This enables you to follow Bringhursts recommendation to “In heads and titles, use the best available ampersand”. {exp:typogrify:caps} Wrap sequences of capital letters in a span with class="caps".  This is useful if you want to set sequences of capitals as small capitals. There must be at least two capital letters in the sequence, the letters may be separated by periods, and the sequence must be surrounded by characters other than letters. That last criteria is a change from the Django filters, which means that we will not wrap the initials in a name like W.B.Yeats, because the W.B.Y capitals are followed immediately by a lowercase letter.  The reason for this change is that it is not usually considered good practice in typography to set those capitals as small capitals. {exp:typogrify:initial_quote} and {exp:typogrify:final_quote} Wrap a quote character that is the first/last character in a paragraph in the two classes “initial"/"final" and “quote”.  A paragraph in this context means either an actual paragraph element, a heading element or a list element. The quote characters that we recognize here as initial quote characters are the left double angle, the left angle, the left double and the left single entities—the characters classified in Unicode as initial quote characters. The quote characters that we recognize here as the final quote characters are the right double angle, the right angle, the right double and the right single entities—the characters classified in Unicode as final quote characters. {exp:typogrify:smartypants attr="2"} This is just a wrapping of the PHP port by Michel Fortin of John Grubers SmartyPants perl script.  I have made one change from the original script; the default attribute is set to 2, which means that ”---” (three dashes) are used for em-dashes and ”--” (two dashes) for en-dashes; this default can be overridden with the attr parameter. {exp:typogrify:widont} Insert a non-breaking space entity between the two last words in every paragraph.  A paragraph in this context means either an actual paragraph element, a heading element or a list element.  This will avoid what typographers refer to as “widows"—a single word on its own line at the end of a paragraph. {exp:typogrify} A shortcut to apply all the functions in the plugin. Where the Functions Don’t Apply Except for the widont function, any text inside pre/code/kbd/script/math elements is not processed by these functions, but just passed through unchanged.  The widont function has proven somewhat problematic in this regard and as for now that function will change all text where the function is applied. 2007-12-16T08:43:00+01:00 http://bjerrehuus.dk/blog/jens/article/heres-a-quick-way-to-use-color-constants-in-css/ http://bjerrehuus.dk/blog/jens/article/heres-a-quick-way-to-use-color-constants-in-css/#When:10:03:00Z In CSS files of even moderate size it quickly gets complicated to keep track of where a specific color is used. Here I present a way to define your colors as constants at the top of the CSS file and then use those constants in your CSS declarations.In CSS files of even moderate size it quickly gets complicated to keep track of where a specific color is used. Here I present a way to define your colors as constants at the top of the CSS file and then use those constants in your CSS declarations. There are some techniques floating around where server side scripting and simple comment lists is used to implement color constants. These techniques either require you to install PHP scripts and modify .htaccess files on the server or they rely on you remembering to search and replace the color values when you change them. What I present here is a technique that works locally on your computer and results in a static CSS file that you then upload to the server as you normally would. The specific implementation is described in terms of the TextMate editor for Mac OS X, but the general idea could be implemented in any editor with the ability to add extensions. In TextMate it is possible to create new commands that are specific to the kind of file you are currently editing. Here we create a new command that filters the current file through the M4 macro processor (which comes standard with Mac OS X) and places the output in a file named the same as the current file but with a .css extension. This means that the CSS file with the color constants should be named something other than .css; e.g. .mcss as I've used here. Fig. 1: Create a command in the CSS bundle. The actual command is this: cd $TM_DIRECTORY echo "changecom('/*', '*/')" | m4 - `basename $TM_FILEPATH` > `basename $TM_FILEPATH .mcss`.css The command is set to save the current file, take no input and discard the output. I called my command Replace Constants, but you can call it whatever you want. I also set a key equivalent of Command-B (for build) to make it easier to get at. With this command set up it is possible to create color constants at the top of your (M4-)CSS files. The way you define color constants looks like this: Fig. 2: Define color constants at the top of your CSS files. And you can then use these constants where you would normally write the color code. Fig. 3: Use the color constants in your CSS declarations. After inserting the color constants in the .mcss file you activate the command and it creates the .css file with the color constants expanded to the color values. And that's it! Simple and readable color constants in your CSS files. This is just a very simple use of the M4 macro processor; one extesion to this technique could be to create a file with color names (e.g. from the X11 or the Pantone color list) in M4 format and include that file in your CSS. That would give you access to a lot of symbolic color names without having to lookup the RGB values. Or you could build a file with all your own favorite color names and their RGB values. Two things that you should be aware of with this implementation: Macros in M4 are processed repeatedly and it might therefore be advisable to quote the color names in the definitions. See M4: Defining a macro When the defines are processed by M4 it leaves behind a blank line, which is then in your CSS file. This could be removed by piping the output from M4 through some other filter to remove repeated blank lines before saving the .css file. I haven't done this here but it would probably be advisable if you create a lot of color constants as each one gives a blank line. 2006-12-27T10:03:00+01:00 http://bjerrehuus.dk/blog/jens/article/edgy-photography/ http://bjerrehuus.dk/blog/jens/article/edgy-photography/#When:23:52:00Z Photographs taken about twenty minutes from where I live in two different directions.It's kind of nice to live on the outskirts of town--the distance to the outer industrial district of Århus and to the rural idyll of the Fulden village is about the same. When I jump on my bicycle and go about twenty minutes to the north-west I end up in the industrial district of southern Århus with car dealers, the local power plant and container parking. Fig. 1: Containerparking in Viby industrial district. It's not a picturesque neighborhood but very quiet on a saturday afternoon, which is when the photo of the containers was taken. Equally quiet, in a very different sense of the word, is the small village Fulden, which I get to in about the same time riding to the east. This photo is taken on another day just before nightfall. Fig. 2: A small bridge in Fulden. Both photos here have been photoshopped a bit to give them a slight Lomographic tone. I'll probably get back to how I did that in a later article--it's a combination of some of the techniques found on other sites. 2006-07-31T23:52:00+01:00 http://bjerrehuus.dk/blog/jens/article/the-redesign-is-done/ http://bjerrehuus.dk/blog/jens/article/the-redesign-is-done/#When:23:25:00Z A short blurp about the redesign of the website in 2006.A bit later than I planned the redesign is done. There are still a few places where the design is not pixel perfect, but the design is basically as I imagined it at the outset. There are also some parts that don't work entirely as I want them to in MSIE, but I'll leave that for now--that is a very troublesome browser to cater to if you try to create a standards compliant HTML/CSS layout. The site looks great in Firefox though. I have tried to list the choices I made and the Textpattern plug-ins I have used to create the design and the layout in the colophon (Note: There is no longer a colophon for this website). The source HTML and CSS could still do with a bit of cleaning up but that will have to wait until I have learned a bit more about modern web coding. 2006-07-22T23:25:00+01:00 http://bjerrehuus.dk/blog/jens/article/redesign-going-on/ http://bjerrehuus.dk/blog/jens/article/redesign-going-on/#When:10:16:00Z I'm redesigning the site to add a little colour, so things might be a bit wanky for a while. Hopefully it will all be good in just a couple of days.I'm redesigning the site to add a little colour, so things might be a bit wanky for a while. Hopefully it will all be good in just a couple of days. 2006-06-06T10:16:00+01:00 http://bjerrehuus.dk/blog/jens/article/cleaning-out-my-closet/ http://bjerrehuus.dk/blog/jens/article/cleaning-out-my-closet/#When:23:36:00Z Trying to make life a little less cluttered.Got inspired by a Lifehacker article about getting rid of stuff. First up was a run through of all the books I already read. The ones I don't expect to read again are in a pile, which I'll let family and friends go through before handing the rest to the nearest charity for reselling. Next is looking through the closets to weed out all clothes that I don't wear or don't wear regularly enough to warrant the space it takes up. A small pile is already building. This feels good. It should be a regular event, e.g. every three months. Maybe I should schedule an event in my calendar. 2006-06-04T23:36:00+01:00 http://bjerrehuus.dk/blog/jens/article/a-unit-test-framework-for-common-lisp/ http://bjerrehuus.dk/blog/jens/article/a-unit-test-framework-for-common-lisp/#When:23:25:00Z I was reading Peter Seibels book Practical Common Lisp a couple of months ago and got inspired by his very simple testing framework. I thought how hard can it be to expand that into a "real" framework in the SUnit tradition. Well, it wasn't really hard, but it did take a couple of months anyway.I was reading Peter Seibels book Practical Common Lisp a couple of months ago and got inspired by his very simple testing framework. I thought how hard can it be to expand that into a "real" framework in the SUnit tradition. Well, it wasn't really hard, but it did take a couple of months anyway. So here is my attempt at a unit test framework for Common Lisp. I'll call it 1.0 when there is some proper documentation. There is very little documentation at this point but if you are familiar with the Test::Unit framework from Ruby it should not be too hard to get started with this. There is also an example use of the framework in a sub-directory in the distribution. Basically, you define a test case with the DEFINE-TEST-CASE macro. This macro defines a CLOS class with the same name as the test case. You could just define your test cases with DEFCLASS but the macro wraps up the definitions of the SET-UP and TEAR-DOWN methods so it's probably easier to use the macro. Test cases are identified by being subclasses of the TEST-CASE class. The individual tests are then defined with the DEFINE-TEST macro. This macro defines methods with the same names as the tests so you would think that it would be just as easy to define the tests with DEFMETHOD instead. But, the framework depends on a couple of special variables, which are automatically set if you define your tests with the macro. The assertions you use in the tests are called ASSURE-* instead of assert so as not to clash with the standard ASSERT. Finally, to run the tests you use the RUN-TESTS function. When you tell it to run all tests for a test case it uses introspection to find all methods whose names start with TEST- so for this to work all tests should follow this naming convention. The framework use the MOP, which is known to differ between Common Lisps. I have tested this with current SBCL and OpenMCL on Mac OS X. The license is the MIT license. 2006-03-25T23:25:00+01:00 http://bjerrehuus.dk/blog/jens/article/automated-backups-with-rdiff-backup-on-mac-os-x/ http://bjerrehuus.dk/blog/jens/article/automated-backups-with-rdiff-backup-on-mac-os-x/#When:10:04:00Z Since I wrote the original article I've come across another article about automated backups with rdiff-backup. This is the setup that I've got working on Mac OS X—Tiger on the server and Panther on the client.Since I wrote the original article I've come across another article about automated backups with rdiff-backup. This is the setup that I've got working on Mac OS X—Tiger on the server and Panther on the client. The disk volume setup is still as originally described: an HFS+, journaled partition with case preserving turned on and changed to not ignore permissions. The rdiff-backup version is still the latest stable release and the exclude file list isn't changed either. It is also important to note that the rdiff-backup program has to be installed somewhere in the SSH path; i.e. typically in /bin or /usr/bin. Backup on the server is now handled identically to backup on the client. This required a SSH setup for localhost (here called dorado-backup) as well. The command to backup the server is now: $ rdiff-backup --include-globbing-filelist > ~/src/tools/rdiff-backup-filelist > dorado-backup::/ /Volumes/Backup/Dorado The backups are initiated from a new backup user as described here and rdiff-backup is run as root on the clients. This got rid of the problems I experienced initially with files that my backup user couldn't access. I had to leave out one part of that setup though. When the authorized_keys2 file is setup on the client I had to leave out the from="server" part; probably because there is no DNS setup on my network or maybe it's because the root logins are disabled on both hosts. With this setup in place all that was left was to automate the whole thing with a crontab for the backup user. 2006-02-20T10:04:00+01:00 http://bjerrehuus.dk/blog/jens/article/keeping-the-precious-data-intact/ http://bjerrehuus.dk/blog/jens/article/keeping-the-precious-data-intact/#When:05:57:00Z Last week there was an article on ars technica about the backup tool rdiff-backup. This looked like a simple way to get automated backups implemented for both the Mac mini and the PowerBook, so I set out this weekend to get it installed and activated.Last week there was an article on ars technica about the backup tool rdiff-backup. This looked like a simple way to get automated backups implemented for both the Mac mini and the PowerBook, so I set out this weekend to get it installed and activated. I've been running (ir)regular backups manually for some time on the Mac mini, but have never got any backup scheme set up for the PowerBook. This is a description of the (still manual) set up I've got working now. The first thing to do was get a disk partition set up as the backup target. After a few trial and errors I succeeded with a disk that has a partition formatted as HFS+, journaled and with case preserving. It seemed that the version (1.0.4) of rdiff-backup I ended up using did not like the usual HFS+ habbit of ignoring case; all filenames with capital letters in them ended up looking quite peculiar. As per the advice in the rdiff-backup wiki I changed the partition to not ignore permissions. I then installed the latest stable version of rdiff-backup and was effectively ready to go. There are some files that you would not normally back up and these are listed in an include/exclude file: - **/Caches - **/Movies - **/Music - /Network - /Volumes - /tmp - **/tmp - /dev This set up was adequate for creating a local backup, so I ran the command: $ rdiff-backup --include-globbing-filelist > ~/src/tools/rdiff-backup-filelist > / /Volumes/Backup/Dorado to create a backup of the Mac mini. I ran the command as an administrative user, but not as the root user. This meant that some files could not be read and thus were not backed up. The plan here is to check the permission on the problematic files and see if any of them should have their permissions changed or if they should be excluded from the backup. In order to run the backups of the PowerBook from the Mac mini over the wireless network I had to set up SSH as described in the rdiff-backup wiki. With this set-up it was possible to backup both computers from the stationary, and almost always on, Mac mini. The next task is to automate the backup procedure, so I can stop worrying about not remembering to do it. 2006-02-05T05:57:00+01:00