Tim's Bandwagon » Markup and CSS

Preview Markdown Documents in BBEdit

Tim Brayshaw — Mon, 31 Oct 2005 18:52:41 +0000

A quickie: here’s a way of directly previewing Markdown documents in the BBEdit preview window using PHP. (Inspired by this Python method that does the same thing).

Make a template file (you’ll probably want to add some styles to this).

~/Sites/markdown-preview/template.html


        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Markdown Preview</title>
</head>
<body>
##markdown##
</body>
</html>

Make the php file, and follow the instructions in the PHP comments.

~/Sites/markdown-preview/index.php


 
/*
 * Download these and put them somewhere in your php path:
 *
 *     http://www.michelf.com/projects/php-markdown/
 *     http://www.michelf.com/projects/php-smartypants/
 */
include_once 'markdown.php';
include_once 'smartypants.php';
 
/*
 * You'll need to change this:
 */
$markdownDocsDir = isset ($_SERVER['MARKDOWN_DOCS_DIR']) ? $_SERVER['MARKDOWN_DOCS_DIR'] : '/Users/username/Documents';
 
/*
 * You'll need to set up BBEdit to use something like this as the Preview Server URL:
 *
 *     http://localhost/markdown-preview/?file=/
 */
$file = $_GET['file'];
$text = file_get_contents ($markdownDocsDir . $file);
$formatted = SmartyPants(Markdown($text), '2');
 
/*
 * Display the formatted text via a simple template.
 */
$templateFile = './template.html';
$templateText = file_exists ($templateFile) ? file_get_contents ($templateFile) : "##markdown##";
echo (str_replace ('##markdown##', $formatted, $templateText));
 
?>

Google Maps Stockist Finder

Tim Brayshaw — Thu, 30 Jun 2005 17:15:25 +0000

I’ve been playing with the Google Maps API this afternoon, and it looks pretty good. I’ve knocked-up a stockist map for Cardtastic. (For those who don’t know me, Cardtastic is a greeting card company run by my partner, Helen.)

One problem encountered was performance is bad when adding lots of markers, we’re only adding about 180 markers to the map, and my browser kept alerting that a script was running slowly and asking if I wanted to abort it or continue. Not ideal.

I’ve worked around it by adding a little time between adding the markers to the map so the browser catch its breath again. I’ve also grown to quite like the gimmicky animated effect while stockists start popping-up all over the country!

Javascript window.open sizes not reliable?

Tim Brayshaw — Sun, 20 Mar 2005 21:46:17 +0000

In Safari, why are windows opened via Javascript 2 pixels wider and 1 pixel higher than requested?

I googled for the answer no avail, so made a simple test page, and asked for answers on a (usually quite reliable) local mailing list, but haven’t got an answer. So, I posted the test page to my linklog in the hope of it gaining a wider audience. A few hits, but no answer .

So: now, I’m re-posting the question here to drizzle a little google-juice on the test page, and hope one of my legion of trusty feed subscribers can spring to my assistance.

I suppose a keyword-stuffed rephrasing of the question could be: Is there reliable cross browser way or technique for opening a fixed-size window via Javascript or with DOM browser scripting (window.open or similar)?

My Spartan Stylesheet for NetNewsWire

Tim Brayshaw — Thu, 28 Oct 2004 12:08:42 +0000

I’ve just uploaded Spartan – yet another simple stylesheet for NetNewsWire 2. If you’re looking for a high-falootin’ rootin’-tootin’ fancy-dancy piece of eye-candy, this isn’t it. It’s just a simple plain stylesheet designed for everyday reading.

The Yellow Fade Technique

Tim Brayshaw — Sat, 21 Feb 2004 09:47:30 +0000

Signal vs. Noise: The Yellow Fade Technique:

[…] The YFT uses JavaScript to create a yellow highlight that briefly spotlights the change when the page reloads. Then, in a second or two, the highlight fades and the page reverts to its normal state. The YFT makes it super easy to spot edits/changes yet its unobtrusive nature lets people quickly get back to work once a modification is confirmed.

Kind of like a super-slow version of the colour changes on the BBC site. In reverse.

New Stylesheet

Tim Brayshaw — Fri, 20 Feb 2004 00:20:16 +0000

According to Zeldman drop shadows might well be the new black. There is a CSS 3 text-shadow property that gives drop-shadows to text; at the moment, I think only Safari 1.2 on Panther supports it. A little while ago I knocked-up a bare bones retro style stylesheet subtly enhanced by CSS text-shadows on the headlines (choose Monotone from the style-switcher page to view it).

Nifty CSS Content-type Link Icons

Tim Brayshaw — Sat, 14 Feb 2004 22:27:05 +0000

The Extensible Open XHTML Outlines Experimental Specification has an example of an XOXO document that employs CSS attribute selectors to display fashionable antipixel-style icons based on a hyperlink’s specified content-type. (Nothing spectacular, but the simplicty appealed to me!)

max-width in Internet Explorer

Tim Brayshaw — Fri, 19 Dec 2003 14:52:54 +0000

Ingenious hackery from Svend Tofte — using Internet Explorer’s proprietry expression() value in CSS to simulate max-width:

Most web-developers know that IE has fallen behind in the race for standards and being able to show the latest and greatest. Many CSS2 properties are unsupported. Some of the more useful ones, are properties such as max-width, max-height, min-width and finally min-height. I will argue, how max-width is a crucial property, when it comes to on line readability, and then I will show you how to make IE emulate the behavior of max-width, and in turn, how to make it emulate many other properties that it’s not directly capable of.

[via Hypothecate]

CSS Target Trick

Tim Brayshaw — Wed, 17 Dec 2003 18:13:36 +0000

Spotted on Daniel Glazman’s weblog, a good use of using the CSS :target selector to highlight the active target (example). I knocked-up a simple demonstration.

XHTML Friends Network

Tim Brayshaw — Mon, 15 Dec 2003 23:22:42 +0000

I spotted Tantek Çelik’s use of the profile attribute a while back. Now, Tantek Çelik, Matthew Mullenweg and Eric Meyer have announced XFN.

XFN™ (XHTML Friends Network) is a simple way to represent human relationships using hyperlinks. In recent years, blogs and blogrolls have become the fastest growing area of the Web. XFN enables web authors to indicate their relationship(s) to the people in their blogrolls simply by adding a ‘rel‘ attribute to their tags, e.g.:
rel="friend met">...