Made By Just a Couple of Guys

The interesting part about Google and Facebook is that these super giants didn’t even exist a couple of decades ago. Google was created by two guys from their university dorm room, and Facebook started in basically the same way. Just take a look at this screenshot of Facebook from 2005 (7 years ago):

and Google from 1999 (13 years ago):

These sites, employ thousands of people (33,000 employees currently work at Google and 3,000 for Facebook) and get billions of hits from users. For me the amazing thing is that beneath the hood, the code which makes up the core of their functionality is really just a tweaked and improved upon version of what Zuckerberg, Brin and Page came up with in their free time.

404: Blog Post Not Found

What’s a 404 error message?

It’s the message you get when you navigate to a webpage which is not there, for example:

http://www.google.com/dsjkfdkjlfdkjls

A lot of tip top websites spend millions on making sure their sites are the bee’s knees. Yet when it comes to 404’s, they often forget. Check out Facebooks lackluster attempt:

http://www.facebook.com/dsjkfdkjlfdkjls

I checked out a lot of the bigshot sites, and Google, Tumblr, Stack Overflow, MLKSHK and Github have some of the best custom 404 pages.

It’s not too hard to set up your own 404 page, but beginners may find it confusing. Now I’ve set up the .htaccess file in my local copy of PJs.Cat to redirect to an “error.php” file, but there’s nothing special there yet. In the meantime check this out:

Massive props to whoever put the “!!1” in Googles 404:

Massive props to Github for embracing their Geekiness:

And finally Propus Maximus to MLKSHK for making it’s own 404 mascot:

Cute! ᵔᵜᵔ

Catistics

Something which we believe in, here at PJs.Cat HQ, is giving users accurate, attractive feedback on the Posts that they create. I decided on creating a graph to let people know how often other users were saving their Posts but after trying a lot of different graph-creating software, found that the free stuff doesn’t look good enough, and I am committed to using open source software as much as possible when building this site.

I was willing to make an exception for the Google API, which I though made pretty good graphs, however I have not used it in the main site, because the look and feel just didn’t fit in with the rest of the page. I think I might create an Awsome-O-Meter for the catistics page (which I have yet to create and will show things like site traffic, total number of users and Posts per day).

After being unable to find what I wanted, I ended up creating my own bar chart, showing users how much their Posts had been saved in the previous week.

It made sense to display it when you are looking at Posts you have saved, and makes the process of using our micro blog a little more interactive.

Embedding

A friend asked me yesterday if he would be able to embed videos in his Posts. I’d already decided that I’d make it possible, so today I set about implementing it.

Turns out that embedding a youtube video is pretty easy, and just a little Regex, or URL parsing (thanks to Stack Overflow) was necessary.

Some people, when confronted with a problem, think
“I know, I’ll use regular expressions.”   Now they have two problems.

Jamie Zawinski

I tried to make Sound Cloud songs embed automatically as well, but the way they process URLs is currently preventing that. Maybe I’ll send ’em an email – their service is pretty good so I assume that they are on the ball.

So now you can just Post a Youtube.com URL (like “http://www.youtube.com/watch?v=QH2-TGUlwu4”) and the video will be posted for you. ᵔᵜᵔ

Pretty neat, eh?

We think it’s Nyantastic!

Making a Motto

Google’s unofficial slogan is “Dont Be Evil”

Volkswagen Beetle “Think small”

Nike’s awesome slogan is “Just do it”

PJs.Cat needs an awesome slogan too, and I was thinking of a slogan which communicated the coolness of the site. After much deliberation, we have it. We decided to re-purpose a coloquial expression, hope you like it.

PJs.Cat: “It’s the Bee Knees”

This will form part of our brand identity. It communicates that despite our grassroots beginnings and non corporate nature, we still strive for greatness.

Tool Bar Gradients

Okay, so “Tool Bar Gradients” doesn’t sound exciting, but it’s an important concept, which has been grasped and used by a whole bunch of multi billion dollar companies, including Google, Twitter and Facebook.

Facebook:

Google:

Twitter:

By toolbar I mean the little bar used for navigation at the top of the page. And if we look very very closely at these toolbars we can see some reoccurring tricks which the big shots use make their websites look neat, clean and together.

Some extreme toolbar close ups:

Facebook:

Google:

Twitter:

At the bottom of each title bar you’ll notice that there is a dark line which marks the end of the bar. Just underneath this, you can see that a shadow has been drawn on, making the title bar appear distinguished from the rest of the page.

All of the cool kids are doing it. Just take a look at the wordpress toolbar:

Close up:

If you use this $5 trick, it’s a part of making your site look a million bucks.

The Merits of Positive Feedback

The like button 

The +1 button 

The press this button 

People love positive feedback. People love praise. People like cats.

That’s one reason why PJs.Cat is going to be great. Gamification is written into its design from day one. Below is a sneak preview of what I am working on at the moment. It’s not complete, but with the Star, Save and Follow icons, users have three different ways to give positive feedback; which I hope will help encourage users to contribute quality content to the site.

The design is not perfect but I am …. positive that you’ll like it.