18 comments

  • Joel CalifaJoel Califa, 8 years ago

    Hey, I've had this sitting in my drafts for about 6 months now. I'd love to get your thoughts on this :)

    11 points
    • E BensleyE Bensley, 8 years ago (edited 8 years ago )

      Your localstorage solution is really neat and a very novel approach but in this case were there any reasons not to go with a combination of :visited and ::after to do the same thing? I'm playing with using js to create an empty span within each link tag that i can then use css to insert a check mark and make visible on visited links. I like the idea of the check marks on visited links as an aesthetic feature as well.

      3 points
      • Joel CalifaJoel Califa, 8 years ago

        Hey thanks so much! I felt just creating a hook rather than an entirely new DOM element was a cleaner solution, at least for the way I wanted to use it. Something like :visited:after unfortunately doesn't work on its own, due to the limitations set on :visited.

        3 points
    • Conlin "Wuz" DurbinConlin "Wuz" Durbin, 8 years ago

      This is actually really close to the implementation I used in BetterDN. I use it for opening all the links that people haven't clicked on. Code is here: https://github.com/conlinism/BetterDN/blob/master/js/unvisited.js

      2 points
  • Jim SilvermanJim Silverman, 8 years ago

    another advantage of your implementation, :visited doesn't fly in incognito mode.

    4 points
  • Alex WrightAlex Wright, 8 years ago

    Really love the simplicity of your solution - thanks for sharing! What do you think about changing the text based on the number of visits? Would that be possible with local storage?

    For example, if a user clicks on one of your portfolio items multiple times, maybe the text would change from 'Seen' to 'Frequently Viewed', or 'Popular'—something like that.

    Appreciate you taking the time to write this!

    1 point
    • Joel CalifaJoel Califa, 8 years ago

      Hey that's a really cool idea! Hadn't occurred to me at all.

      Yeah it would be really simple, instead of true just start at 1 and ++ the value every time someone visits. Then check for >0 instead of true.

      0 points
  • Paul @StammyPaul @Stammy, 8 years ago

    Great post - I've been doing something similar using localstorage for my photosets so users know which one they've seen already. :)

    http://paulstamatiou.com/photos/greece/crete/ (under the collections dropdown I pop in a check for the ones you've seen)

    1 point
    • Joel CalifaJoel Califa, 8 years ago

      Thanks! I love your implementation. The design in general is beautiful and the content is envy-inducing :P

      1 point
  • kean ferinkean ferin, 8 years ago

    Joel this is great, and it's equally wonderful to see how many people are chiming in with their own iterations as well. This dredges up my feelings on the declining provision of sitemaps; often times more useful than what the front-end was providing for many reasons.

    0 points
  • Travis VocinoTravis Vocino, 8 years ago (edited 8 years ago )

    You answered your question with this:

    "I really want to click on this cat, but now I know better."

    This is by far the primary reason for the disappearance of visited links. In your example from Buzzfeed, your :visited link styles prevented you from clicking down that trail—thus preventing Buzzfeed from generating revenue from that impression.

    The removal of :visited from anything but navigation type areas is a business decision, not so much aesthetics.

    0 points
    • Joel CalifaJoel Califa, 8 years ago

      It's funny, I originally had a paragraph about this in one of my drafts but thought better of it. Felt too bait-y and there's no evidence content sites are any more intentional about this than any other site. I'll post it here though:

      "On content sites such as BuzzFeed, unstyled visited links cause more users to accidentally return to previously visited pages, to see more ads, and to possibly increase the company’s bottom line (depending on how ads are sold, of course. BuzzFeed is just an example.) In fact, scatter-brained as they are, people are probably even more likely to click on a link they’ve already demonstrated interest in rather than a new one. Considering the amount of sites that have neglected :visited CSS, I’m going to assume this was not done on purpose. But in the cases where it is — and I’m sure there are — where do we draw the line? Is this too small a deception to be considered a dark pattern?"

      1 point
  • James Young, 8 years ago

    Really nice solution and I must admit I found myself nodding along about just forgetting to do it these days!

    0 points
  • Erik BeesonErik Beeson, 8 years ago

    Nice solution. Definitely agree that it's disappointing to have lost this useful styling in the name of "design".

    btw, typo in the third code block (missing a closing paren after the if statement).

    0 points
  • Ivan VásquezIvan Vásquez, 8 years ago

    Awesome. I would've guessed you could make a simpler implementation just by using an :after pseudo-element, kinda like this:

    a:visited::after { content: ' Seen'; //... s'more styles here }

    It turns out you can't! However, using ::after with other pseudo-classes such as :hover does work. Here's an example.

    Can anyone explain why that is? What's special about visited that doesn't let me use pseudo-elements?

    0 points
    • Joel CalifaJoel Califa, 8 years ago

      Hey Ivan, glad you enjoyed this :) The reason :visited is special is because of the security implications which I highlighted around mid-way through the article. It's a huge bummer but at the end of the day it's good for everyone.

      2 points
      • Ivan VásquezIvan Vásquez, 8 years ago

        You're absolutely right, I totally missed that part.

        I ended up looking up more info on this, and found this great article that gives some background on why this was necessary and a few technical details about the solution.

        3 points