We're pretty close to being done building the homepage of the Snippets area of the site. Right away, we start tweaking things and getting more stuff into shape.

We have a weird experience where the absolutely positioned pseudo element didn't respond to a negative left margin but was fine with a positive right margin. Who knew.

Then we move into making an "active" class for the left menu of snippet categories. You only browse one of them at a time (seeing a list of related snippets on the right). Say "HTML" is active and you click on "CSS", a new list of only CSS-related snippets shows up on the right. There needs to be some styling in place to show which is active. Changing z-index on an active class is enough to work for us (making it sit above the shadow).

For the list on the right, it's temping to make the links display: block - but it almost is too much clickable area. It seems weird to think that, but I think it's true. You don't want accidental clicks very far away from the text of the link itself to activate that link. It would be surprising and weird. So, the links themselves can be inline-block so they can have some padding, but don't fill the full width like the list item they are in is.

For the links themselves, we decide that coloring the title of the snippets in the color of the category they belong to is too strong. Instead, the links will be gray but the rollover color can take on that special color.

We also decide that the straight down one column list works for now, but if scrolling got too ridiculous maybe someday we can break into two columns and shorten it up.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.