Friday, November 23, 2012

Repainting the Monastery

Every time I search for something related to Perl, I stumble upon the Perl Monks site - I stay as little as possible on the site, because I can't stand how it looks - everything is too cluttered.

I feel like I am this guy


travelling 20 years back in time. My opinion is that everything that is more than 10 years old in IT is completely irrelevant and the Perl Monks site looks like it was build in '95.

Besides the aesthetics, there are also ergonomic issues that makes me want to run away:

  • the fonts are too small - my eyes hurt if I stay on the site for too long
  • the code snippets font is even smaller - sometimes I find myself copy/pasting from the site in notepad in order to comfortably read the code 
We, the Perl community, are trying in many ways to attract fresh brains among us - with sites that look like Perl Monks is looking now, we just scare them away. 

I don't want to be misunderstood, Perl Monks is one of the biggest diamonds in the Perl's tiara. We should make it sparkle. It already attracts the views of thousands of people because of the high quality brain capital that its member bring in. We can and should make those thousands of people feel good when talking and reading about Perl.

This is how Perl Monks looks right now:



In about 2-3 hours of HTML forging and with the help of Bootstrap from Twitter, I made it look like this:


The beautiful part is that, by simply changing the referred css file you get quite different aspects of the site. Of course, this is what's supposed to happen with a CSS file. But the fact that so many people are using Bootstrap means that there are lots of CSS themese available out there.

Bootswatch offers open source bootstrap themes, and Wrapbootstrap offers paid ones.

Have a look at the links below and see how the Perl Monks would look on Bootstrap:


What do you think, would it be worth the effort to change the look of the Monastery?
Wich of the themes do you like more?

19 comments:

  1. I like #1 and #2. But of course all of them still need to be tweaked.

    "My opinion is that everything that is more than 10 years old in IT is completely irrelevant." Using your logic, guess which one is *not* irrelevant: Unix, Linux, Windows XP, Java, .NET, Perl, Perl 6, Python, Ruby, PHP. (Answer, none of them :-)

    ReplyDelete
    Replies
    1. With the exception of windows xp, I'd like to believe that none of the versions released in pre-2002 are not used in production anymore and even if they are, it doesn't mean perlmonks have to be the last one to be brought in current times

      Delete
  2. The biggest problem with PerlMonks is that it is extremely slow.

    It is also ugly. Things like syntax highlighting and using POD for markup would be nice.

    ReplyDelete
    Replies
    1. There are numerous "extensions" to Perlmonks. I have had nicer colors and syntax highlighting for many, many years... Maybe some of these should be made part of defaults instead of personalisation settings.

      Delete
  3. I've been on perlmonks since 2001, unfortunately (or fortunately), when I go to google with a Perl related question, I'm increasingly landing on stackoverflow - and the depth, breadth, and quality of the questions and answers there are quickly catching up to perlmonks. What perlmonks has over SO, is that it's a place to hang out (at least for me). SO may eventually have a better catalog of relevant and current topics, but perlmonks (at least I hope) will always be a hangout for JAPHs.

    ReplyDelete
  4. Perlmonks allows its users to customize the appearance by setting their own style or link to an external stylesheet (your home node -> Settings -> Display Settings).

    ReplyDelete
    Replies
    1. Yes, I changed the theme for myself, it's the people that are learning Perl that might get discouraged to learn more because of the unattractive UI

      Delete
  5. @pra: I think Perl-Blue theme should be the default, it looks nicer and more "modern". Its code font is slightly larger also.

    ReplyDelete
  6. > Which of the themes do you like more?

    None of the above. They all add an ugly 5-7cm, non-scrolling header to the page. Well you gained 2 years of web development by moving from static to frames, but I thought your goal was to move 10 years, not 2. ;)

    ReplyDelete
    Replies
    1. the menu is not an iframe, it's a div with a fixed position http://twitter.github.com/bootstrap/components.html#navbar

      Delete
  7. Last here: Jul 30, 2009 at 06:02 UTC (3 years ago)

    That was the last time I visited perlmonks. That was the day the site got hacked and they gave up a load of their user's passwords - which they stored in unencrypted plain-text on disk.

    To add insult to injury the whole thing was handled in the most rude, irresponsible, and/or blasé way possible that it permanently burned a visceral anger response in me everytime I visit the site. The cherry on top was the promise that when the passwords were no longer stored in plain-text that they would post in Tidings... I checked randomly for about a year and then gave up.

    There is no CSS to fix bad coding, hubris, and poor management.

    ReplyDelete
  8. Initially, I thought it too monochromatic, but on reflection, realized that it's a benefit that draws attention to syntax-highlighted code.

    This would be a solid default.

    Here's how it could be taken farther IMHO:

    • icons, perhaps from http://fortawesome.github.com/Font-Awesome/ which plays nicely with Bootstrap
    • A logo overhaul. The v-centered text next to the monk is misplaced. Both the image and the font could be bigger and bolder. The monk's midriff is cut off. He may look better moved vertically down to the baseline and scaled up by 10-20%.
    • Super Search should be positioned close to the Search textfield; either to the left, right, or maybe below.
    • The text in the footer should be v-centered. The left margin here is curious because it doesn't align with anything else in the document. I think this block may look better r-aligned or l-aligned.

    Minor details, all. In short, excellent work!

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Did you know that you can link to external CSS from perlmonks by changing your personal preferences? (http://perlmonks.org/?node_id=450961).

    I've set my personal External CSS Link in my preferences to http://bootswatch.com/cerulean/bootstrap.min.css just to prove this works!

    ReplyDelete
    Replies
    1. This indeed does help me and other ones who have accounts on perlmonks, but it is not a solution for people who get there from search engines

      Delete
  11. Sorry, a simple CSS facelift is simply insufficient. Perlmonks is not a diamond in Perl's tiara, it is a lump of coal. It needs a deeper transformation than just polishing to become a diamond.

    ReplyDelete
    Replies
    1. Given that its pages appear as top results for bunch of perl related google queries, I'd say it is much more than a bunch of coal. You are right when you say it needs more changes, but I think the simple change of the default css and some HTML is a big low fruit.

      Delete
    2. A CSS facelift is a simple non invasive method that can be done without breaking anything. I like the idea, but unfortunately is the perl community neophobe :-(

      Delete