PhotoAlt

Foursquare has adopted the proposed rel=”logo” standard. You should too.

Dec 10 2011 32 Notes
PhotoAlt

Since posting about relogo, a new standard for easy and automated logo distribution, I’m noticing it’s gotten a little bit of attention. I think the next step is to build a library of example uses, to show it off a bit.

In order to do that, I’m looking for some sites to use as examples. If you are a webmaster, all you have to do it is upload an SVG file of your logo and add this line to your site:

<link rel="logo" type="image/svg" href="http://yourdomain.com/logo.svg"/>

Replace the ‘yourdomain’ url with a link to your logo of course.

If you’ve started using this on your site, please send me a link on twitter, @mattmc, or reblog this post. I’d love to see examples so I can start using them on relogo.org.

Nov 20 2011 90 Notes

I know I said I wasn’t going to be updating clipping.us anytime soon, but I guess I spoke too soon. This morning I added the ability to create permanent links for any piece of text you’ve stored in a clipping.us url. The video above shows you a quick way that you can use this feature to extend the length of a tweet beyond 140 characters by adding a short link to the end of your tweet. Sorry for the distortion in the video by the way, I screen captured in a non-standard format, but I think it’s still easy enough to follow.

The basic idea of a clipping permalink is that you can generate a permanent link for any piece of text in a current clipping URL. This link can’t be edited or deleted, unlike a standard clipping URL. These urls are stored in the subdomain p.clipping.us. Once a permalink is created, a short url is automatically generated so that you can quickly share it twitter. My initial intention was to just give everyone the option of permanently saving a clipping quickly, but after playing with it, I realized it can easily extend the character count of a tweet with just a simple link.

(Source: vimeo.com)

Jun 12 2011 15 Notes

Code Post Type

This is a feature I was wondering about since the begining of Tumblr, but never came to be, so I figured why not add it in myself. This is based on an idea by Cameron and makes use of highlight.js.

For the styling of these code post types, you can get as in depth as you’d like. For my tumblr, I’m just going to add a little graphic next to the header of my Text posts. I started with a quick edit to my text post classes using TagAsClasses. TagAsClasses will allow you to restyle posts based on tags added under Advanced options.

<div class="post {TagsAsClasses}">

I’m going to use the tag “code” to create code posts. Because I’m using the tag “code” I added this line of CSS:

div.code h3{background:url("http://pixelspread.com/tumblr/tumblus/code.png") no-repeat;padding-left:15px;}

Next I’ll add a the highlight.js code so my code will show syntax highlighting

<link rel="stylesheet" title="Default" href="http://pixelspread.com/tumblr/tumblus/highlight.css">
<script type="text/javascript" src="http://pixelspread.com/tumblr/tumblus/highlight.js"></script>
<script type="text/javascript"> hljs.initHighlightingOnLoad();</script>

Now anything I wrap in

<pre><code> </code></pre>

will automatically be detected and highlighted. Hightlight.js includes support for: Python, Ruby, Perl, PHP, XML, HTML, CSS, Django, Javascript, VBScript, Delphi, Java, C++, C#, Lisp, RenderMan (RSL and RIB), Maya Embedded Language, SQL, SmallTalk, Axapta, 1C, Ini, Diff, DOS .bat, Bash.

Like I mentioned before, you can get as in depth with the styling of the post type as you’d like. For example, if I wanted to add code posts to the Obama theme, I’d be able to use this method to create a whole new icon for the code post type. Anyway, hope you find this useful.

Nov 01 2008 4 Notes
Page 1 of 1