The Life of Pablol: How to make a site in 30 minutes that even Kanye West can enjoy.

This is a quick tutorial about a Javascript framework called Ember (wait, don’t run!) and how to build a dumb site using it. Not sure how to code at all? I’m working on a new code school called SuperHi — we’re launching soon!

“wana make a generator of kanyes album cover?” said Simon, popping up in Facebook Messenger. This wasn’t the first time we’d made an album cover generator together. We’d previously made one for Drake’s If You’re Reading This It’s Too Late a few months earlier called “If You’re Typing This It’s Too Late” that had a few million hits and coverage in mainstream media, despite spending 45 minutes creating it one Friday evening. It was almost as if the less effort we put into things, the more popular it became.

After launch, again we have a ton of coverage (example: 1, 2, 3) and best of all, Kanye himself used the site twice!

I also now have Kanye’s IP address, passwords and log-in details for sale. (I am joking, Kanye’s legal team. No. Really.).

So how did we make it?

I had 55 minutes to create this new Kanye cover creator before I had to leave for a Javascript meetup (yes, I am that cool) about a framework called Ember. I’ve been using Ember for around a year now, it’s a great library for building complex, interactive websites, and while the general use case isn’t for a dumb album cover generator, it was my first thought to use the power of Ember for the short timeframe we had.

Simon and I thought let’s keep this super simple, or in his words “pure”. We wanted this to be instantly usable without any user interface — just type and get what you want. From a code point of view, all we need is an input field and when you type in that, it changes the text.

I already had the latest version of Ember installed on my laptop but it’s a fairly quick thing to do. Just go to http://emberjs.com/, open your command line (Terminal on Mac or Command Prompt on Windows) and follow the instructions.

First thing you need to do create a new application in your usual code folder

ember new thelifeofpablol

Quick aside, we called it The Life Of Pablol because we were looking through the domains list and saw there are now .lol domain names. Who knew? We felt it fit well enough for a quick joke so it stuck. You can call your project whatever you like as long as you do “ember new [whatever]”.

You should get something happening that looks like this.

Next, move your command line into the folder you’ve just made by doing:

cd thelifeofpablol

Open up your folder in a code editor (I use Atom personally) and let’s explore what’s just happened. Ember is set out in a particular structure which makes it very useful if you’re working with other people — everyone knows where everything is.

The main folder we’ll be concentrating on is the /app folder. This has seven different folders:

  • Components: for reusable bits of code across your webapp — if a particular area of code appears multiple times across different pages, it’s probably best as to make it as a component.
  • Controllers: the bit that hooks up the routes to the data it needs. Don’t worry about this too much as we’ll talk about this later.
  • Helpers: for use in simple data formatting, e.g. turning a date into “two hours ago” would be done in a helper. Think of them as mini-components.
  • Models: for talking to your database — we don’t need it for this project but if you have any kind of stored data that may change or update, you’ll probably need to use models in your code.
  • Routes: for preparing which URL (e.g. /about) you’re about to go to into. They work closely with controllers. Again more on this later.
  • Styles: where your CSS lives
  • Templates: where your HTML lives

For our site, we need one page only — let’s call this “home” as it’s the first and only page we’ll hit on this site.

When I go to the root domain (e.g. “www.thelifeofpablol.com” without any “/about” or “/contact”), I need to handle this particular URL to go to a router first of all. This router will then set up a controller to talk to and all our fun stuff will happen in this controller.

Let’s generate a “home” route first of all.

ember generate route home

This will generate all the files we need for the route.

We also will need a controller called “home” too. Let’s generate this too.

ember generate controller home

Okay, great. Next we need to run the Ember server so we can see what we have in our browser so far.

ember server

You should get something that looks like:

If you look, it says “Serving on http://localhost:4200” — in your browser, go to that URL and you should get:

Phew. Okay, so we’ve done all the commands that we’ll need for a while. At least we can concentrate on making some cool stuff happen now.

At the moment, the home route isn’t hooked up with the root URL. By default, it works when you go to “/home” but not the normal “/”. Let’s fix that. Go to your code editor and find the file in /app/router.js

There will already be some code set up for one “route”, we just need that route go to the correct place. We want the code for our home route and home controller to work when we go to “/”. Find the line:

this.route('home');

And change it to:

this.route('home', { path: "/" });

Okay, this means our home route and controller will work when we go to this particular URL but we don’t have any code yet. You’ll still get the same thing when you look at your site.

Next let’s get rid of that “Welcome to Ember”. We don’t want our users seeing that. Go to /app/templates/application.hbs and remove the line:

<h2 id="title">Welcome to Ember</h2>

We don’t need that. Leave the {{outlet}} bit as it is though.

If you notice in the folder, there’s a application.hbs file and home.hbs file — the application.hbs file is for the entire site, so if you go on “/about” and “/contact” they’ll both use this file, but home.hbs is specific for that route.

If you want a header across your site, you’d put it in application.hbs whereas if it’s page specific, you would put it in the correct template. For our generator, we only want to do things in the home.hbs so our controller can talk to it.

Open home.hbs and let’s start using The Power of Ember.

At the moment, there’s just {{outlet}} in there. Delete that and replace everything with:

{{input value=say autofocus="autofocus"}}
<p>{{say}}</p>
<p>{{say}}</p>

The first line of this is an Ember input helper. Basically it will make a variable in your code called “say” and update it based on whatever you’re typing into that input field. The second attribute (autofocus=”autofocus”) will make your browser focus onto the input field when you load the page

Below it we have two paragraphs with {{say}} inside. This won’t actually say “{{say}}” when you view it but it will hook up with the variable “say” in your code and replace it.

Try going to your site and typing in the input field.

Whatever someone types into the input box, they’ll get in the two paragraphs below that. Simple, right? That’s pretty much most of the functionality of the album generator! Let’s add some more things into it.

Notice at the moment that when we have a empty input field, we have no copy. Wouldn’t it great to have a default value. We can’t do this directly in our template home.hbs so we’ll have to write some code to do this for us.

Go to your code editor and to the file /app/controllers/home.js

At the moment you should have an empty controller that looks like:

import Ember from 'ember';
export default Ember.Controller.extend({
});

Let’s add some code in to give us a default value when our input is empty.

import Ember from ‘ember’;
export default Ember.Controller.extend({

sayWithDefault: function () {
if (this.get("say")) {
return this.get("say");
} else {
return "Start typing";
}
}.property("say")


});

I’ve created a new function called “sayWithDefault”. Inside the function, I’m looking to see if “say” is not empty:

if (this.get("say"))

If it isn’t empty, return back the variable “say”

return this.get(“say”);

If it is empty, then return back “Start typing” or whatever default you’d like.

This function is also dependent on the variable “say” — it will change depending on what the user types in so we want to keep this whole function up to date whenever the variable say changes — so we make the function dependent on that.

}.property(“say”)

Now to use this new function we’ve just made in our template, we need to go back to /app/templates/home.hbs and update our code. We can leave our input alone as this is where people are typing in, but the output paragraphs will change.

{{input value=say autofocus="autofocus"}}
<p>{{sayWithDefault}}</p>
<p>{{sayWithDefault}}</p>

So now when we view our site, by default it will have “Start typing” in the paragraphs.

Next, wouldn’t it be great if the URL changes so that it reflects what you’re typing. I want to be able to share my hilarious comment about how Kanye likes fish-sticks that definitely hasn’t dated since 2009. At the moment, if I share the URL it doesn’t pre-fill the input box. Let’s update the URL as we type so we can share our finished result.

In Ember, this is fairly easy to do. It’s built in to the framework itself. Go to your home controller in /app/controllers/home.js and add in the following line:

queryParams: ["say"],

just before the sayWithDefault function to get something that looks like:

Watch out for the comma at the end! This queryParams bit is part of Ember’s Controller classes. It helps keep the URL up to date with that array of variables. Notice the URL change when you type now.

You might wonder why there’s the funny %20 between hello and there in the URL. That’s the browser converting our data into a safe string — spaces aren’t allowed in URLs but can be converted to “%20” (URL-speak for gimme a space please). You can now share your URL and this will be the text when your friends see it.

I’m going to skip the CSS and styling part of the generator as it’s a bit more code and specific to just one album cover. The way we styled up the page for the Kanye generator was to hide the input off the top of the page so no one could see it, then we repeated the text and placed it where it should go on the album cover.

Let’s add one more thing in before we finish. When you look at the generator on a phone, it doesn’t autofocus. That’s because most mobile browsers correctly think that a keyboard popping up on page load would annoy users. So let’s make something a user can click that would focus them into the input box.

To do this we’re going to add in an Ember action — something that will happen when a user interacts with it — in this case, when a user clicks on something, it will focus the input box. We could have used this for instance to change the photo on Kanye’s album or to change the color of the background for instance.

Let’s go to /app/templates/home.hbs and at the bottom of the file, add in.

<span {{action "focusOnInput"}}>Focus on input</span>

We’ve created a span tag with the text “Focus on input” but with this, added in an Ember action called “focusOnInput” — I’ve just made up that name, I could have called it “doThisDumbThing” instead.

If you click the span tag right now, it won’t do anything and will give you an error. That’s because it’s not hooked up to anything yet. Let’s make it focus on that input field instead.

Go back to your home controller in /app/controllers/home.js.

First thing is we’re going to add a comma at the end of the function for sayWithDefault:

}.property("say"),

Watch out for this, it’s something I forget a lot. It means that there’s more code to your controller class after this.

Okay, all good. Let’s add in some actions. Below that line, write in:

actions: {
focusOnInput() {
Ember.$.find(“input”).get(0).focus();
}
}

What this means is our controller has some actions (as a Javascript object). You can have as many action functions as you like here too. We’ve just got the one called focusOnInput.

Inside this focusOnInput function, we have a tiny line of Javascript that runs when the user interacts with the span tag. It will first of all, ask Ember to talk to jQuery (the dollar sign bit). Then jQuery will select the first “input” in its HTML, and then make that input have focus. Fairly straightforward!

In our CSS, I made this something that covers the entire page so whenever a mobile user clicks anywhere, they automatically get the keyboard pop up.

So once you’re finished with your beautiful generator, how do you get it online?

The Kanye and Drake generators are both hosted on Heroku which handled the insane amount of traffic we got without any problem whatsoever. Simon and I didn’t have to do anything apart from get it online. Sign up for an account if you don’t have one already! Heroku give you a lot of command line tools you can use by installing their Heroku Toolbelt so that it’s very easy to get the generator live.

Once you’ve got all the Heroku tools set up, quit out of your Ember server by pressing Ctrl+C (yes, Ctrl even for you Mac users, not Cmd).

First of all, we’re going to add all our new files to Git by doing:

git add .

Then we’re going to commit them all to the version control by doing:

git commit -am "First version complete"

Now we’re going to set up Ember on Heroku’s server (we’ve already have Ember on our laptop).

heroku create --buildpack https://github.com/tonycoco/heroku-buildpack-ember-cli.git

Put this all one line (it’s pretty long) and press Enter. This will create your Heroku app ready to receive your code.

Next, let’s put the code we’ve written online!

git push heroku master

This might take a few minutes to setup but once it finishes you should get something that looks like:

Done! It says on mine that https://salty-dusk-42233.herokuapp.com was deployed to Heroku. Yours will be something similar to that. Go to your URL by copy and pasting the URL or by typing “heroku open” into your command line and there you have it! Your own online generator!


Of course, this is a very simple example of what you can do with Ember and Javascript in general. Hopefully it shows off the power of Ember and why I’ve been using it heavily for the last year or so.

Little sites won’t change the world but they might just make the world’s biggest ego notice you.

If you liked this article, please press recommend. If you’re interested in what I’m doing with SuperHi or about learning to create websites, sign up at http://www.superhi.com/