From a few weeks ago:

@maxjacobson LOOK AT YOUR DEAD FISH! UNTIL EVERYTHING GRAY SMELLS LIKE DEAD FISH!!

— So Rowdy (@So_Rowdy) December 22, 2012

I had no idea what he meant. But I should have, because he was making a reference to an essay I had shared with him and which we had then discussed called Fish. In the essay, Robin Sloan suggests, among other things, the value of revisiting things we like over constantly checking what’s new. I hadn’t meant to reference it and hadn’t thought much about it since reading it, but that idea must have kept with me.

Earlier tonight I watched this video three times:

Do you know that feeling of going to a concert for a band you love, where none of your friends like that band, and you sort of feel like a weirdo for liking them, only to discover that tons of other people like them too and you’re fine? That’s the feeling I got while watching this video, and I didn’t even need to leave the house to get it.

On a sexier and perhaps better blog, this post title would be a euphemism.

Instead, this post is a bit of a follow up to an earlier post, so this second entry might as well mark the beginning of a series.

It’s time for You’re doing it wrong!, the yearly column where I criticize people’s blog’s CSS even though I’m not an authority on that subject!¹

Let’s talk about lines.

There aren’t that many HTML tags, and markdown only supports the small subset that are relevant to writers, so it makes sense to make use of them.

Here’s how you make a horizontal rule in markdown: * * *². This becomes the following HTML:

<hr>

Which typically comes across as a horizontal line, depending on the CSS, and typically is meant to mark a new section. On this blog, in a browser, at this time of writing, it looks like two thin lines on top of one another. The CSS I used for that looks like this:

hr {
  padding: 0;
  border: none;
  border-top: medium double #333;
}

Edit: Actually, I’ve already changed it. The horizontal rules outside of the post body are still that, but the ones within post bodies are now stars as described below.

CSS is really flexible. You can even style an hr as an image. The blog post that I’m constantly googling for is this one by Marek Prokop which gives a great introduction to the different ways you can style hrs. Heres another, from which I more or less cribbed their last example.

Considering how good hrs are, I don’t understand why bloggers like Shawn Blanc and Stephen Hackett (whom I generally like), don’t use them.

They get the appeal of a nice separating line but instead of using an hr, which is easy to make with markdown, which I think they both use, they do this:

<div align="center">* * *</div>

or:

<p style="text-align:center">* * *</p>

Both commit the cardinal sin of embedding CSS in the middle of an HTML tag. You’re not supposed to do that! Even if you don’t want to use an hr, the correct move would be to separate content and presentation by assigning a class and then selecting that class with the CSS, like so:

The HTML:

<div class="separator">* * *</div>

The CSS:

.separator {
  align: center;
}

I assume they do it this way with the hope that it will be more portable. These days, people often read blog posts in their RSS reader or read later app, far out of reach of their blog’s CSS. In these contexts, the post is subject to the reader app’s CSS, and a div with a class will be treated as unstyled text, but a div with inline CSS might still be styled.

Sometimes.

If I’m reading a post outside of a browser, it’s probably in Reeder or Instapaper (links unnecessary, right?). In Reeder, the rat tactic works and the stars are centered and more or less convey what the authors want them to. In Instapaper, the CSS is totally overridden and it’s just a couple of asterisks. Same for Safari Reader, Readability, probably others.

Had they used an hr, each individual reader would style it as they see fit, but they would understand what it is and work to convey your meaning.

Besides, it’s not that semantic is it?

Blanc’s p tag is most egregious in this regard, because p means paragraph, which this is not. It may have been chosen because the blog’s CSS properties for paragraphs also applied to separators, but that does not make this a paragraph.

styling the hr with an image

Here’s the rub: as flexible as CSS is, I have no idea how to style an hr so that it looks the way these guys seem to want it to look without embedding a small image at every hr, which introduces its own set of problems.

• According to Prokop, an image hr has visual bugs in IE and Opera, so he resorts to a bit of a hack, namely wrapping the hr in a div with some additional rules, which is a bit of a nonstarter for markdown users – we need something that automatically expands from * * * and looks right.
• I’ve tried this in the past and it looked kind of lo-res and not great on a retina display

I think these problems are surmountable by:

1. just ignoring those browsers
2. researching hi-res images and how to do it right (on my to do list)

So what would that look like?

The HTML:

<hr>

The CSS:

hr {
  height: 13px;
  background: url(hr.png) no-repeat scroll center;
  border: 0;
}

The image could be anything but here’s one I just whipped up in pixelmator with a transparent background to play nice with various sites. Keep in mind: the height property corresponds to the image’s height, so if you use a different image, adjust accordingly.

Edit: styling the hr with pseudo-elements

Edit 2: I love writing posts like this because I end up learning a lot. I especially love realizing how little I understood it at the beginning. I’ve removed the image-based-stars and replaced them with something different, something better.

Now no images are required at all! I realized while loading the dishes that I had cited an example earlier that used the :after pseudo-element to insert a glyph into an hr, so why couldn’t we do the same with Hackett and Blanc’s beloved asterisks? We can! It looks like this:

The HTML:

<hr>

The CSS:

hr {
  padding: 0;
  margin: 0;
  border: none;
  text-align: center;
  color: black;
}
hr:after {
  content: "* * *";
  position: relative;
  top: -0.5em;
}

This is a thinly-modified take on Harry Robert’s Glyph style from that earlier link (example eight).

Isn’t that great! You can use a standard markdown (or HTML or anything) hr to make some centered asterisks show up automatically.

Of course I wanted to experiment and try inserting some other characters in there. This is my first experience with the :after CSS rule and unsurprisingly it’s a can of worms. I attempted to replace content: "* * *"; with content: "✿";, pasting the unicode black florette character directly into the CSS, and there were bonkers errors. The sass compiler just freaked out and killed the whole stylesheet. So, looking at this terriffic HTML entity reference, I went for the familiar-looking code decimal correspondent, ✿, wearing those comfy ampersand-semicolon mittens (etsy, get on that). That totally didn’t work either so I ignored the third column and went googling. I came upon this great stack overflow answer which set me straight.

Now my CSS looks like this (and I promise to walk away and stop changing it for a day or two):

hr {
  padding: 0;
  margin: 0;
  border: none;
  text-align: center;
  color: black;
}
hr:after {
  content: "\273F\a0 \273F\a0 \273F";
  position: relative;
  top: -0.5em;
}

If you’re like me you’re like the fuck is that.

That’s the third column I ignored, hex code! \273F corresponds to that black florette and \a0 corresponds to a space. Isn’t that terrifically fussy?? You must pull out the hex number and add a leading \ as an escape to avoid errors.

Regarding using CSS to insert content into an hr, Chris Coyier writes:

Note that in some of these examples, generated content is used (:before/:after). This isn’t supposed to work, as far as I know, because <hr>s are no-content style elements (they have no closing tag). But as you can see, it does. If you are concerned about uber-long-term design fidelity, stay away from those.

To which I say: kewl bruh whatever tho.

Here’s an hr with this style:

This opens you up to use actual stars (or any other unicode character) instead of asterisks! I call that an upgrade. And if you turn CSS off or Instapaper it, it degrades nicely to a plain old horizontal rule³, which isn’t really so bad. It’s good enough for John Gruber anyway. His horizontal rule looks like three pale centered dots.

His CSS:

hr {
  height: 1px;
  margin: 2em 1em 4em 0;
  text-align: center;
  border-color: #777;
  border-width: 0;
  border-style: dotted;
  }

I don’t really understand how that becomes three pale dots but then I don’t really understand CSS.

Edit 3: I was wrong about instapaper

Completely wrong! I made some bad assumptions and now I’m really confused.

In the first draft of this post, I had this scattered throughout my paragraphs anywhere you see “hr” or “hrs” above:

<code>&lt;hr /&gt;</code>

Which is what my markdown processor, Kramdown, generates when I write this:

`<hr />`

It wraps it in the code tags and replaces the angle brackets with their HTML entities, with the goal to make sure it’s not recognized as a horizontal rule, but as anonymous, quoted code. Despite these precautions, Instapaper rendered those as horizontal rules, awkwardly breaking up paragraphs instead of displaying the code’s text inline.

That behavior may make sense in some contexts, but not really in this one. So I went through and removed the brackets, despite it looking kind of goofy without them. But this post was ostensibly about writing blog posts with things like Instapaper in mind, and I wanted it to be readable in there.

What’s even more baffling is that hrs that weren’t inline with paragraphs wouldn’t display at all. Just regular plain old hrs. Not on Daring Fireball and not on here. For a parser that is so aggressive as to forcibly render hrs that don’t want to be, it’s bizarre that it ignores the ones with their hand raised.

So, I dunno. I’m pleased that I managed to find a CSS replacement for Blanc and Hackett’s vibe, but now I’m not sure if they were doing it wrong at all. At least theirs show up.

I keep learning new things as I slowly make this ruby gem. I had sent a copy to a friend and wondered if he would be able to unpack it and see the source code, and that led me to the command gem server which starts up a local server so you can go to localhost:8808 in your browser and read about all of the gems installed on your machine, including the included documentation.

Now, writing some documentation has been on my to do list. I ain’t done that yet. In fact I hadn’t gotten around to adding it to my to do list. But I was delighted to see that my gem is listed along with all the others, and – magically – there’s some documentation there.

What!?

It pulls out all of your class methods presents them as a collapsed excerpt. In some instances it pulled out my comments. Those were functioning as notes-to-self but now I know to groom them for others to read by the time I’m close to sharing.

This is cool as shit.

One of the projects I’ve been intermittently working on is called smashcut. I’ve been keeping it sort of vague and secret because I’m imagining tickling a wild beast of an audience that isn’t necessarily real and that tickles me.

I’m planning to release it as a gem soon enough. I’ve just learned how to do that and it was shockingly easy. A real delight. It’s even quite easy for the gem to be a command line tool. I am using it locally by running smashcut and it is doing things. I am thrilled.

I learned this from the first google result for the query “how to make a gem” (http://guides.rubygems.org/make-your-own-gem/) which I’m sure you could just as easily have found.

I need to learn more about testing and also sleep more.

It was something like five or six months and I needed one anyway. I’ve always had hair and I’ve always threatened to get rid of it. It was just a matter of getting bored enough, and now it’s gone.

It’s already growing back.

If I weren’t pretty sure it’s a kind of racist thing to think, I’d be more comfortable admitting that my motivation is to look like a buddhist monk. A lot of western people, myself included, have a shallow appreciation of Buddhism. I don’t meditate, but I feel like I would meditate. I aspire toward being zen but don’t really know what that means. I took one class in Eastern religion in college, to fulfill a requirement, and ended up loving it mainly because the professor had a great sense of humor.

So now my hair is short and I clog less the shower drain. I feel very self-conscious. I feel like I look weird or creepy. I’m nervous to take a Christmas photo with my sisters. Who’s the scary baby?

I’m glad I did it. I feel like a male GI Jane.

I was thinking it would imbue me with a seriousness and I would be able to think more clearly. Is there a fog surrounding your head? It may or may not be your hair.

a video from my travels:

Some additional photos via my instagram (http://instagram.com/maxjacobson):

Earlier while sleeping on the plane I had an idea for a method that I want to write.

I use erb, not haml, because haml is confusing, and erb looks like HTML which isn’t really confusing anymore.

What I do is I have a layout.erb file which is the template for the entire site. All the pages look the same because they all use the same template. The only three things that change are the title, subtitle, and yield.

So whenever you try to go to a page, the code runs and figures out what the HTML should be, which I typically put into a String variable called the_html. Then, depending on what you’re doing, I set the title and subtitle in two global variables, @title and @subtitle. These will fill out the <h1> and <h2> header tags.

Then the last thing I do in the code is run erb the_html which sends the freshly-tossed-together html into the “yield” aka the body of the page.

Here I’ll just share what my template looks like right now:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title><%= @title.downcase %> - <%= @subtitle.downcase %></title>
  <link href="/css/style.css" rel="stylesheet" />
  <link rel="alternate" type="application/atom+xml" href="/feed" />
  <meta name="author" content="<%= get_author_name %>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="HandheldFriendly" content="true" />
</head>
<body>
<div id="container">
<h1 id="title"><a href ="/"><%= @title.downcase %></a></h1>
<h1 id="author">by <%= get_author_name.downcase %></h1>
<h2 class="instapaper_title"><%= @subtitle.downcase %></h2>
<%= yield %>
<hr />
<form action="/search" id="searchbox">
  <input type="text" name="q" placeholder="Search..."> <input type="submit" value="search">
</form>
<p><small>This blog running on an as-yet-untitled and unfinished blogging engine created by <a href="http://maxjacobson.net">Max Jacobson</a> on the morning of December 1, 2012. It uses Ruby, Sinatra, and Heroku.</small></p>
<p><a href="/feed">RSS Feed</a></p>
</div>
</body>
</html>

And I’m pretty happy with this! I have no idea if I’m doing things in any kind of best-practice way but it makes sense to me and I can do a couple things with it and I’m pretty happy.

But the one thing I’m kind of not happy with is the problem of indendation. When I’m assembling the_html, it’s all going into one String. Here’s a typical chunk of code:

if post_info[:tags_array].length > 0
  the_html << "<p>Tags:</p>\n"
  the_html << "<ul id=\"the-tags\">\n"
  post_info[:tags_array].each do |tag|
    the_html << "  <li><a href=\"/tag/#{tag}\">#{tag}</a></li>\n"
  end
  the_html << "</ul>\n"
end

See how I’m manually inserting spaces and new lines (\n)? I feel like this is not how it’s meant to be.

So the idea i had earlier today is to not bother with new lines or spaces at all, just throw it all into one flat string, and then pass it through a method at the end for, essentially, “prettifying” it and indenting it properly, and then running erb on that. I don’t know if I want to bite off that problem to solve just yet but I’m starting to want to. But I’m sure there’s an easier way to be doing this.

I am flying to California with my sister and my dad and we’re going to look at some schools that she has applied to. I’m grateful I was invited on this trip. I’m not sure I’m strictly necessary.

I went to California as a kid as part of a “Teen Tour” summer camp. It was a bunch of kids (I was twelve, most of the rest were around fifteen, sixteen) crammed on a bus and shuttled down the coast. My memories of it are all, weirdly, from the hotels we stayed in and the bus itself. I don’t recall LA, for example. But I’m excited to see it in part because up until fairly recently my main goal in life was to write for the movies and / or television shows. It’s been fun and weird transitioning life goals. There’s a sort of sadness to it? Not on my end, but a perceived one on theirs. I perceive that they’re sad for me. Which is fine, and kind, but not necessary.

Gaby wants to study linguistics because she loves learning and learning about languages. I support that very much. She’ll expand her brain like crazy studying this stuff.

I am a stalk of grass bending in the wind, growing toward the sun. I hope she will be too.

She just caught me writing this and laughed at me. Namaste.

I read somewhere that when you install a gem you shouldn’t use sudo which stresses me out because I can’t figure out how to do it without sudo so what does that make me? Some kind of rude-ass strongarm? I shudder at the thought.

MY FAV STUFF

I’m not Daring Fireball but I still like linking to stuff. This is something I’ve always struggled with. Many years ago my friends wrote a song about me and the lyrics mention all those links I’m copyin’ and pastin’.

We used to do all that on AIM. I’d read something, share it, talk about it (if I was lucky). Now I post it to Pinboard, which is mirrored on my homepage. I don’t think a lot of people look at it but I still do it. It scratches a fun little itch.

All my favorite stuff has to go somewhere I won’t lose track of it, and that’s Pinboard.

HOW FAV?

So Pinboard has a bookmarklet you can use to send pages to it and it’s fine but I rarely use it. It’s a bit too manual don’t you think? Instead I use ifttt.com to automatically send anything I love to Pinboard as a private bookmark.

• Whenever I fav a tweet, it goes to Pinboard
• Whenever I favorite a YouTube video, it goes to Pinboard
• Whenever I Like a Vimeo video, it goes to Pinboard
• Whenever I Heart something in Instapaper, it goes to Pinboard (Instapaper supports this natively, so I don’t use ifttt for this one)
• Whenever I Heart an Instagram, it goes to Pinboard
• Whenever I like a Flickr photo, it goes to Pinboard

Then I use the linkroll widget to display this on my homepage.

Jason Kottke made a web app called Stellar for aggregating your favorites across various social media. It wasn’t until I used this that I started reflecting on the whole purpose of Like/Fav/Hearting across the web. Stellar is really great. I wish more people I knew were on it. The idea is that I can follow you, and instead of seeing what you post like on every other site, I see what you like on every other site. It’s a bizarre and appealing premise. It’s frustratingly limited to just a few social media networks (Twitter, Youtube, Vimeo, Flickr) and doesn’t seem like it’s being actively developed, but it’s great. Part of what’s great about it is that it works passively. Even though I haven’t checked Stellar in months, my page has been kept up-to-date due to my remaining active on those four networks.

Alas, no one I know uses Stellar (or Pinboard for that matter), which is why I’ve been copying the same kind of content elsewhere, where someone someday may see it. Or at least I will.

Because I find this stuff interesting, I was initially excited about the Mac app Favs. It lets you hook in to all the usual suspects of social networks and browse your favs. But it didn’t resonate as useful to me, because new items were marked as unread which I found curious, because of course I’ve already “read” these… how else could I have already marked these as my favorites? That paradigm would only be useful if, Stellar-like, Favs allowed me to subscribe to others’ favorites, not my own. And it does, but only for some services, and it felt a little off and difficult to use for some reason. I appreciate how it’s pitched:

Find Favorites

Instead of spreading your favorites across different networks, use Favs to sync them to your Mac. Don’t waste any more time on searching for your favorite content - Favs has a powerful search feature build right into the application that makes finding what you like a breeze.

Which is great but that’s what I use Pinboard for already and I’m very satisfied with that.

Follow Favorites

Many favorites are public, for example on Twitter. This allows you to follow the favorites of persons you like and just see their hand-picked articles. For those sources Favs marks new entries as ‘unread’ and you can use Favs as a sophisticated Reader app.

Which is closer to what I want: basically a Mac Stellar app. I may have to give this one another chance. My consumption of others’ favs is minimal to non-existent, so I should similarize my expectations for others’ interest in my favs.

A curious phenomenon: I’ll often fav a thing in the heat of the moment, and then later on when browsing my private Pinboard looking for things to make public and share, I decide it’s either not worth sharing (it’s depreciated in value somehow) or it’s just too personal to me and my interests and no one else will care. It’s the difference between the stellar firehose (especially notoriously fav-happy people like Anil Dash) and a more curated linkblog. I probably fav 50 tweets for every one I retweet.

So why fav?

WHY FAV??

The way I see it, there are three reasons to fav something.

1. To send your compliments to the chef; to give some kudos; to pat someone on the back and say “good job”
2. to bookmark it because you love it so much you would hate to lose track of it in the swirling streams of internet
3. To re-share it to your people – think the Twitter “Discovery” page, or the Instagram “news” page, the Pinboard public page

I don’t like a limp fav. I want something to happen. I want to send a positive blast of emotions to whoever made the thing. I want to spread the good word.

YouTube’s fav paradigm is kind of interesting. I can Like or Dislike a video (thumbs up or down), which I never do. I favorite videos. I favorite a lot of videos. I’m not sure the video creator even sees that (though it is listed publicly), but I prefer it because there are APIs for things like ifttt to turn that into a trigger that does something for me. Likes/Dislikes are an anonymous little tug of war. There’s no point… except to win.

I also rarely Like posts on Facebook, because the usually-private nature of the posts means the hooks just aren’t there, and probably shouldn’t be. That’s purely a kudos situation and maybe I’m just too selfish to give that.

I know a lot of people who never favorite anything on the internet. I’m sure to some people, favoriting means something entirely different (some of the most popular ifttt recipes are to take the links from favorited tweets, and send those to Instapaper. That’s crazy to me. You should just get TweetBot which has native send-to-Instapaper functionality).

I like that all of these services have a button that amounts to I SPURT LOVE but for this probably-OCD bubbula, I need all of that to be in one place, whether anyone else is getting anything out of it or not.

I’ll give the final word to Rob Delaney:

People ask me why I fave or star so many tweets. I’M A PASSIONATE MAN & THIS PASSIONATE MAN NEEDN’T EXPLAIN HIMSELF TO YOU LOT.

— rob delaney (@robdelaney) August 22, 2012