Publ: Development Blog

Entries tagged demo or webmention

Embedding webmention.io pings on your site

Posted Thursday, December 20 at 11:14 PM (11 months ago)

Are you using webmention.io as your webmention endpoint? Want to get your incoming webmentions displayed on your website?

Well you’re in luck, I wrote a simple-ish script for that. (You’ll probably also want to see the accompanying stylesheet too.) And it doesn’t even require that you use Publ – it should work with any CMS, static or dynamic. The only requirement is that you use either webmention.io or something that has a similar enough retrieval API.

I wrote more about it on my blog, where you can also see it in use. For now, I’m just going to use the sample site repository to manage it (and issues against it).

It’s MIT-licensed, so feel free to use it wherever and however you want and to modify it for your needs. I might improve it down the road but for now it’s mostly just a quick itch-scratching hack that does things the way I want it to.

Some thoughts on WebMention

Posted Saturday, September 29 at 9:00 PM (a year ago)

So, for the last couple of days I’ve been playing with some of the IndieWeb concepts, in particular Webmention. Spurred on by a helpful thread with Kevin Marks, I took some time to actually do a rough implementation of outgoing Webmentions, and also did some of the work to set up the h-card and h-entry microformats on my main site.

As far as I can tell, it works great, but I’m also not going to actually merge this to master or push it to production. Read on to see why!

The shape of the float (v0.3.1)

Posted Thursday, September 20 at 10:58 PM (a year ago)

woo-ghost.png

Did you know that CSS3 has a style called shape-outline? It’s pretty neat, it makes it so that a floated object gets a shape based on the alpha channel of its specified image. But it’s kind of a pain to set up; in plain HTML it looks something like this:

<img src="/path/to/image.png" width="320" height="320"
    style="shape-outline:url('/path/to/image.png');float: left">

and if you want a different shape mask for your image than its own alpha channel, you have to do a bunch of stuff like making sure that the image sizes are the same and whatever.