Let's launch a website
right friggin' now!

Hi!

My name is Lemon.

(I make websites.)

Websites I've made for money...

Recipe aggregator for a multinational food corporation

Ticket exchange service for a professional hockey team

Daily use software for casino marketers to project future success.

Health and frequency reporting for national chain of fitness centers

Human resource information system for multibillion dollar banking corporation

I'm not gonna show you any of these

Websites I've made for fun...

A game that shows you wikiHow drawings and asks you to guess the article they came from.

A game that has you guess which sentence fragment is Google's top search query

Where members of the Trump family enter in their passwords to earn points!

You are at a party of celebrity impersonators.

partypartypartyparty.party

A button that helps you party.

All these sites have a few things in common

  • they were quick to build
  • No backend code
  • I found them fun

I've learned things from both.

One thing:

Complex systems make for complex solutions.

But

Tight scopes allow you to think about websites differently.

This is my first time in Australia.

I wanted to make a new site for you.

I had a couple ideas...

Here's one of them:

Urban Dictionary Jeopardy!

How about...

Hollywood Court Reporter

What's Elon Musk Launching Into Space Right Now?

Uhhhhhh....

A website for a lawn care company called
Marquis De Sod.

(that's stupid)

So maybe

Past Life Medium

How about

Dress Up Björk

Hideous Socks As A Service

Please find me an investor

Let's provide a service!

Zoom & Enhance

Let's be news-based thoughtleaders

Is This A Real VICE Headline?

That's VICE.

That's not VICE.

But then I was on the bus...

Clickers (incremental games) are games where the number gets bigger.

One of the most popular:

Clicker Heroes 1 $0
Clicker Heroes: Boxy & Bloop Auto Clicker $9.99
Clicker Heroes: Zombie Auto Clicker $9.99
Clicker Heroes: Unicorn Auto Clicker $9.99
Clicker Heroes: Red Nosed Clickdeer $9.99
Clicker Heroes: Turkey Auto Clucker $9.99
Clicker Heroes 2 $29.99
Clicker Heroes 2 Soundtrack $7.99

TOTAL:  $87.93

TOTAL $121.33 AUD

TOTAL (with VAT):  $133.46 AUD

This is all very depressing.

And so, our game for
NDC {Sydney}

  • A clicker game...
  • which is fully aware of its own futility.
  • And it will try to encourage you to stop playing it.
  • Also: The game will get worse as time progresses
  • But there will be achievements!

Our tech stack...

Sass...

Pug...

Vue

All of this tech requires a preprocessor.

  • Pug -> HTML
  • Sass -> CSS
  • JS -> JS

We could do this with npm

  • npm install gulp --global
  • npm install gulp-sass
  • npm install gulp-pug
  • npm install gulp-concat
  • npm install gulp-minify
  • npm install gulp-livereload
  • npm install gulp-wait

Then we'll need to edit package.json to include this stuff, as well as gulpfile.js to define how this stuff works.

This will give us a node_modules folder with over 10,000 files spread out over 1200 folders, for a total of 36 megs of code.

Also, we'll have to touch the command line.

I'm gonna present another option...

I use

Compiles...

  • Sass
  • Less
  • Stylus
  • CSS
  • Pug
  • Haml
  • Slim
  • Markdown
  • TypeScript
  • CoffeeScript
  • LiveScript

Features...

  • Live Reload
  • Project-Specific Settings
  • JS Concatonation
  • Image Optimization
  • Error Logging/Debugging
  • Browser Sync
  • Network Preview
  • Remote Inspect
  • FTP
  • Cross Platform (Windows, Mac & Linux)

Basically, it's a bunch of Gulp features in a UI.

This is not a paid endorsement.

Prepros costs $29 for a single user license. I personally think it's worth it.

There's also

  • CodeKit ($34 / Mac Only)
  • Koala (Free / Cross Platform)
  • Crunch! (Less only)
  • Scout (Sass only)

Or use Gulp.

Or use Grunt, or Webpack, or Broccoli.

Or write HTML & CSS and avoid this step completely

Whatever you like is probably fine.

Okay, so

Let me show you this website

And briefly

Let's see how we made it

Let's get this domain set up!

In your GitHub repo, go to options and set a branch to be handled by GitHub Pages.

HTTPS thru Cloudflare

Nameserver (set on registrar)

  1. dom.ns.cloudflare.com
  2. edna.ns.cloudflare.com

DNS (set on Cloudflare)

Type Host Value
A Record @ 192.30.252.153
A Record @ 192.30.252.154
CNAME Record www {username}.github.io.

Thanks to a recent GitHub update

We can skip Cloudflare entirely...

For HTTPS

Type Host Value
A Record @ 185.199.108.153
A Record @ 185.199.109.153
A Record @ 185.199.110.153
A Record @ 185.199.111.153
CNAME Record www {username}.github.io.

Or, if you want to make security experts mad

just ignore HTTPS

For HTTP

Type Host Value
A Record @ 192.30.252.153
A Record @ 192.30.252.154
CNAME Record www {username}.github.io.

We are online!

https://futile.fun

Our repo is public.


https://github.com/AhoyLemon/futile.fun


Submit some pull requests!

This deck is also public.


https://ahoylemon.github.io/NDC-Sydney-2018


(this doesn't need pull requests)

Costs

Item Duration Cost Subtotal
Domain 1 year $1.15 $1.15
WhoIsGuard 1 year $0.00 $1.15
Hosting $0.00 $1.15
SSL Cert $0.00 $1.15
"The Cloud" $0.00 $1.15
Total: $1.15

Let's be friends!

@AhoyLemon

My only request

Use your own time to make something cool.

Oh, and put a green card in the bowl on your way out.

Thank you.