Do you think making music is difficult?
Maybe you've seen these guys playing Lady Gaga's "Poker Face", The Beatles "Let it Be", AND that freaky Barbie Girl song — and all with just the same four guitar chords!
Once you learn a couple of chords, you can play an infinite number of songs. It's just learning the first few chords that are tricky.
Websites are a like that. Once you learn the basic chords and movements, you can improvise on just about any new theme.
There's a pattern!
In the web design world we call these patterns.... "themes."
The same is true for websites: after six months of learning to develop websites you might be struck with a profound realization: Websites are (for the most part) all the same.
Here are a few examples of website patterns:
1. Yelp is Just a "Blog" with Ratings and a Map
- The posts are the same.
- The descriptions are the same.
- The avatar image is the same.
- Yelp adds ratings and map functionality!
Similarities: The skeleton of both of these sites starts the same: Medium is a list of blog posts, Yelp is a list of restaurants.
Differences: Yelp then adds ratings, and maps.
2. Airbnb is like Yelp With Payment Processing
- The posts are the same.
- The Google Map API functionality is the same.
- The concept of search is the same.
- Showing a logged in user on the top right-hand corner is the same.
- Airbnb let's you put in a credit card and make payments.
Similarities: Yelp is a site that categorizes restaurants, Airbnb is a site that categorizes vacation homes.
Differences: Airbnb allows you to send money via credit card to the person who created the listing.
3. Twitter is just Public Facebook
- The posts are the same. Note that Facebook calls their posts "Posts", Twitter calls their posts "Tweets." But it's basically the same stuff.
- Both sites are two column sites.
- This concept of user pages is the same.
- Twitter just allows functionality to make the posts public. Whereas Facebook is private.
Similarities: Both Twitter and Facebook allows users to make posts.
Differences: Facebook is a private version of Twitter, and has some differences on how two people connect: On Twitter you click to "follow" a user, on Facebook you "add friend" and you'll need a confirmation from the other person.
4. Wordpress is just Wordpress
Millions of websites that you see around the web use Wordpress: they're just post-based layouts with differences in styling.
- The posts are the same.
- Almost everything is the same.
- The big change here is the layout (ie. the HTML & CSS Layout)
Similarities: Most Wordpress sites are the 80% the same.
Differences: The HTML, CSS and PHP (ie. the site layout) changes slightly for each new theme. In addition to that, each site may have differences in plug-ins that the developer chose.
The Two Most Common Types of Sites:
When you look across all these examples, most websites can either be understood one of two sites: a Blog or a Web App.
1. The Blog (80% of all websites):
- One-to-many: one person writes blog posts, and many people are reading them.
- Only admin users can sign in and create new content.
- Examples: Wordpress sites, Squarespace, About.me sites, simple landing pages.
2. The Web App
- Many-to-Many: many people are writing posts, and many people are reading them.
- Anyone can sign up and create new content.
- Examples: Airbnb, Facebook, Twitter, Ebay, etc
If it's all so simple, what are web developers doing all day!?
The last 20% is the tricky part. That's why it's free to get an 80% Wordpress blog, and it's $4000 to add your company's face to the header, SEO lead tracking, and a customized payment page. Because as soon as you want some weird customizations, you need to hire someone.
Luckily, each coding framework comes with a library of plug-ins to make life easier. (FYI - Plug-ins are free code that you can use to install specific features to your existing project) For each type of website framework, you have a corresponding set of plug-in tools:
- Ruby on Rails: Gems
- Python: Packages
- Wordpress: Plug-ins
Did you just create a "Yelp"-like site, and now you want to take payments? There's a plug-in for that.
Take a Look at These Patterns
In the new One Month Python class Eric Neuman (the teacher) and myself (producer) put some thought into how you can learn these common Website patterns.
In the class, we convert a static page to a landing page, and a Blog into a Web App. We also deploy some customizations like the Google Map API, and ratings.
Check out the projects. What patterns can you notice?
I'm Oversimplifying — Don't Freak Out
I'm sure some developers on Hacker News are reading this saying "Facebook is SO MUCH MORE complex than Twitter! It's impossible to compare the two."
Yep, I get it.
Comparing the two is not very different from saying, "The Beatle's Let it Be is only four chords." It's a true statement, but admittedly the art is in how you play those chords.
You can play Beatles songs with just four chords, but to become The Beatles, it might take a lifetime. That doesn't mean you shouldn't master the basic chords and begin to play — everyone should learn the basic chords. And who knows? You might become the next Big Thing.