Let’s Make A Webpage In 2016

In today’s thought-piece I’m going to walk you through the process of creating my webpage. I’ll show you all the best practices I know, the heartbreak I’ve gone through to get here, and how I learned to love the web again. Enjoy.

The Idea

I want a simple webpage that displays my picture, some information about me, and links where readers can see some of the stuff I do. My mom thought it was a great idea, so I grabbed the pen I stole during my Medium internship and began sketching out my idea in a $24 Moleskine that I bought at a Hudson News.

Now, I have a few requirements for this project. I want it to be fast, responsive, accessible, and mobile-friendly, so I’ll be using React.

Setting Up React

For those unfamiliar, React is a web framework for building user interfaces. Below is the landing page for React explaining some of its features and a 300px banner with three lines of content in it. Since my webpage will be a user interface, it’s a perfect fit.

Now, actually setting up React takes a bit of work and configuration, so instead I’ll be using what those in web development refer to as a “boilerplate,” or a project that someone has already written for me.

I’m a big fan of Dan Abramov’s hair, so I started off by grabbing his React boilerplate off GitHub.

The Wild World of Boilerplates

I started off by creating a new folder for my project, then cloned the repository from GitHub:

$ npm install git
git@0.1.5 node_modules/git
└── mime@1.2.9
$ git clone https://github.com/gaearon/react-hot-boilerplate.git
Cloning into ‘react-hot-boilerplate’…
remote: Counting objects: 320, done.
remote: Total 320 (delta 0), reused 0 (delta 0), pack-reused 320
Receiving objects: 100% (320/320), 43.93 KiB | 0 bytes/s, done.
Resolving deltas: 100% (158/158), done.
Checking connectivity… done.

I then followed the instructions from the README:

$ npm install

While this was running I decided to go for a run. By the time I got back it was nearly done. I’m a decent runner too, in 8th grade I tried out for the cross country team and would have made it if my coach didn’t have a personal agenda against my family. I then proceeded to run the included web server:

$ nmp start
bash: nmp: command not found

And — surprise, surprise — it didn’t work (as if npm ever works am I right?). After writing JavaScript for a few hours you get used to this sort of thing, so we’ll move on and try another boilerplate. The react-transform-boilerplate, also from Dan Abramov, looks good and has many stars.

Setup for this boilerplate went a little more smoothly:

$ rm react-hot-boilerplate
rm: react-hot-boilerplate: is a directory
$ sudo rm react-hot-boilerplate
Password:
rm: react-hot-boilerplate: is a directory
$ man rm
$ rm -rf react-hot-boilerplate
$ git clone https://github.com/gaearon/react-transform-boilerplate.git
Cloning into ‘react-transform-boilerplate’…
remote: Counting objects: 177, done.
remote: Compressing objects: 100% (4/4), done.
remote: Total 177 (delta 0), reused 0 (delta 0), pack-reused 173
Receiving objects: 100% (177/177), 38.44 KiB | 0 bytes/s, done.
Resolving deltas: 100% (91/91), done.
Checking connectivity… done.

And then we’ll start the server like so:

$ npm install
$ npm start
> react-transform-boilerplate@1.0.0 start /Users/jordanscales/Projects/webpage/react-transform-boilerplate
> node devServer.js
Listening at http://localhost:3000

It’s alive!

Diving into React

Now that we’ve successfully proven all those really mean blog posts wrong by getting React up and running in under 3 hours, let’s make a few changes here. My webpage is not a counter, so I’ll be changing that, and we’ll also be getting rid of the ugly orange color that this boilerplate ships with.

Finally, let’s check out some code. After poking around for a few minutes, we see that a file called index.js (the .js part stands for JavaScript in case you were wondering like I was) actually renders our webpage.

Now, there’s a lot going here, and a lot of this may be new to you as it was for me when I first started developing web applications. Let’s take a look at a specific part of this file:

import React from ‘react’;
import { render } from ‘react-dom’;
import { App } from ‘./App’;
render(<App />, document.getElementById(‘root’));

The <App /> part may look like HTML to you, but it’s actually a templating language called JSX: an HTML-like syntax developed by a few fatigued Facebook developers looking to make React development more pleasant. We can use all the HTML elements you’re familiar with such as <p>, <a>, and <font>, and you can even define your own tags like <Comment>, <img>, or even <App>!

I’m going to move a bit quickly now since my battery is almost dead, but I highly recommend this React tutorial if you’re looking something more in-depth.

Let’s proceed to change the markup a little here:

import React from ‘react’;
import { render } from ‘react-dom’;
import { App } from ‘./App’;
render(
  <html>
    <body>
      <img alt="my face" src=”/images/me.bmp" />
      <h1>Jordan Scales</h1>
      <h2>web artisan</h2>
      <p>
        Hi my name is Jordan and I am a web developer
        currently working at Khan Academy.
      </p>
    </body>
  </html>,
  document.getElementById(‘root’)
);

And our webpage is starting to come together quite nicely!

Going Forward

At this point I now have a fast, responsive, declarative layout for my webpage, and I can begin adding more content to it without the fear of bugs or crashes.

We’ve had our fair share of problems developing this webpage and wrapping our heads around the sheer magnitude of libraries in tools available to us in 2016, but once we settle down and take a deep breath, we realize that things can and probably will be a lot worse.

We did it, together, and now we have a great story to tell.