A static site generator should be your next language learning project

a static site generator
should be your next
language learning project
john sj anderson | @genehack | openwest 2018

hi, i’m
john.
a/k/a @genehack
2 — why&how2learn • #openwest18 • @genehack

custom software
development, training,
and technology
consulting
vp,technology

used to be a biologist,
sort of fell sideways into
IT, originally via Perl but
currently sort of
polyglot-ish
ex-biologist
perl tribe
polyglot coder

I submitted this talk with this
title, because Iʼve been telling
people this for the past couple
years -- “wanna learn a new
language? you should write a
static site generator” -- and I
kinda figured I should maybe
explain in more detail and maybe
try to justify it just a little bit
a static site generator
should be your next
language learning project

And during the course of
actually writing the talk -- as
frequently happens -- I figured
out that the title I pitched it
under kinda wasnʼt what the
talk wanted to be. This title is a
better description of the talk I
ended up actually writing.
the why and the how of
learning
a new programming language

one of the basic ideas
here is that continual
learning is super
important in our line of
work
premise:
lifelong
learning
is critical.

the only constant thing is people
telling you over and over that
the only constant thing is
change.

who here has heard this
before?
“learn at least one
new language
every year.”
— david thomas & andrew hunt, “the pragmatic programmer”, 1999

or, this more modern
variant...
“learn at least one new
javascript framework
every month.”
— me, this talk, right here right now

some of the languages i’ve “learned”
basic
pascal
applescript11 — why&how2learn • #openwest18 • @genehack

perl
ruby
python12 — why&how2learn • #openwest18 • @genehack

javascript
php
c13 — why&how2learn • #openwest18 • @genehack

lisp
clojure
scala14 — why&how2learn • #openwest18 • @genehack

node
swift
c♯15 — why&how2learn • #openwest18 • @genehack

how do you
learn a
language?16 — why&how2learn • #openwest18 • @genehack

readbooks and docs

dopractice exercises

whoʼs used exercism?
exercism.io

i'm trying to learn how to
garden and i'm starting
out by having a small
raised bed. you can see
here gesture that my
hand-sowing technique
still needs a lot of work
learning
projects

my language learning project of choice:
static site
generators

whatis a static site generator?

sometimes called 'ssg'
ssg23 — why&how2learn • #openwest18 • @genehack

static site generator just
takes some sort of input,
usually text files, and
then generates a web
site from those inputs
some inputs
➡a website24 — why&how2learn • #openwest18 • @genehack

this is strictly my definition, but to
my mind, once you have a database
involved, it's no longer a static site
generator -- databases push you
over the line into CMS territory
image source: https://i.pinimg.com/
736x/39/fc/
a1/39fca1f4193640cded1d84d0d7
c55c9c--disney-movies-disney-
cruiseplan.jpg
nodatabases!

can be very
simple

single
page28 — why&how2learn • #openwest18 • @genehack

part of a larger
site29 — why&how2learn • #openwest18 • @genehack

automatically
generated
every day

based on
simple
structured data ﬁle

this 'open all' button down
here will spawn a new tab for
each one of these links. so
the SSG code here is turning
the data not only into HTML,
but into a list of URLs in some
javascript code that runs
when you click that button

wrote ~10-15
years ago

ssgs can also be
kindacomplicated

iinteractive.com/notebook

company
site37 — why&how2learn • #openwest18 • @genehack

jekyll
^ hugo
^ hid
weblog
with tags, archive, et cetera

so why are
ssgs great for
learning?

thereʼs a quick early
payoff and then thereʼs
a lot of potential to go
other places
iterative
& incremental

think about what you
need to do
they hit on all the
classics

basic “hello world” ssg:
turn 1 input file into 1
web page
hello
world
as a ssg

o hai
there

(at this stage, you can
cheat and hardcode
most of the HTML in
print statements)
1. read input from ﬁle
2. process the input
3. write output to ﬁle

hello world!

#! /usr/bin/env perl
use strict;
use warnings;
open( my $in , '<' , 'index.txt' )
or die "cannot read index.txt: $!";
my $input;
while( my $line = <$in> ) {
$input .= $line;
}
close( $in );
my $top = <<EOF;
<!doctype html>
<html>
<head><title>$input</title><head>
<body><h1>
EOF
my $bottom = <<EOF;
</h1></body>
</html>
EOF
my $output = $top . $input . $bottom;
open( my $out , '>' , 'index.html')
or die "cannot write to index.html: $!";
print $out $output;
close( $out );

open( my $in , '<' , 'index.txt' )
my $input;
while( my $line = <$in> ) {
$input .= $line;
}
close( $in );

my $top = <<EOF;
<!doctype html>
<html>
<head><title>$input</title><head>
<body><h1>
EOF
my $bottom = <<EOF;
</h1></body>
</html>
EOF
my $output = $top . $input . $bottom;

print $out $output;
close( $out );

hello world!

let’s
pause
here53 — why&how2learn • #openwest18 • @genehack

1. read input from ﬁle
2. process the input
3. write output to ﬁle

in those 3 steps we just did a
whole bunch
of stuff

writing some code
andgetting it to build/run

reading & writing
ﬁles57 — why&how2learn • #openwest18 • @genehack

(which probably means
ﬁguring out where to ﬁnd
documentation)

getting data
from a ﬁle into a
variable59 — why&how2learn • #openwest18 • @genehack

interpolating
a variable into output

o/
yay!

next:adding yaml
front matter62 — why&how2learn • #openwest18 • @genehack

aside:don’t know from
yaml?
see this talk tomorrow!

title: Hello World!
---
hello again world!

#! /usr/bin/env perl
use strict;
use warnings;
use YAML::XS;
open( my $in , '<' , 'index2.txt' )
my $lines;
while ( my $line = <$in> ) { $lines .= $line }
close( $in );
my( $yaml, $content ) = split( /^---$/m, $lines , 2 );
my $front = Load $yaml;
my $title = $front->{title};
my $top = <<EOF;
<!doctype html>
<html>
<head><title>$title</title><head>
<body>
EOF
my $bottom = <<EOF;
</body>
</html>
EOF
my $output = $top . $content . $bottom;
print $out $output;
close( $out );

open( my $in , '<' , 'index2.txt' )
my $lines;
while ( my $line = <$in> ) { $lines .= $line }
close( $in );

my( $yaml, $content ) = split( /^---$/m, $lines , 2 );
my $front = Load $yaml;
my $title = $front->{title};

my $top = <<EOF;
<!doctype html>
<html>
<head><title>$title</title><head>
<body>
EOF
my $bottom = <<EOF;
</body>
</html>
EOF
my $output = $top . $content . $bottom;

print $out $output;
close( $out );

and thatʼs when you
need to deal with loops
and getting all the files
out of a directory, maybe
skipping over some files,
recursion into the
directory, etc.
next:two input ﬁles

this is also when youʼre
going to want a
templating engine
because hardcoding
html in your code is only
going to take you so far
as well:
templates!

which probably means
figuring out how to
install libraries/
packages/deps/
whatever the language
calls them
which means:
ﬁguring out
packages

(note: writing your own
templating system is a
different learning
project)
note:probably don’t
write your own template engine

also:loops & conditional logic
oh my75 — why&how2learn • #openwest18 • @genehack

after
that…76 — why&how2learn • #openwest18 • @genehack

the sky’s
the limit

support for blog-like workflows
(which means 1 input file
generating more than one page
and 1 page being generated
from more than one input file)
which means tracking more
internal state during program
execution, which means diving
into data structures
add a
weblog78 — why&how2learn • #openwest18 • @genehack

folding in other
processing (e.g., SASS -
> CSS processing)
which means figuring out
how to invoke and
manage external
processes
add other
processors

a real CLI app with sub-
commands -- more
library usage! code
organization!
add a subcmd-style
app80 — why&how2learn • #openwest18 • @genehack

and then you can get
fancy…

http
server82 — why&how2learn • #openwest18 • @genehack

automatically
rebuild output when input is
modiﬁed

and the list can go on
and on
only rebuild output when
necessary

ﬁnally
when you think you’re “done”…

once youʼve done a
good chunk, go back
and rewrite the earlier
bits to be more
idiomatic
go back & take another
look

donʼt just write your
favorite language in the
new language, figure
out how the new
language is supposed
to work
don’twrite your $oldlangin your
$newlang.

so, to
sum up:88 — why&how2learn • #openwest18 • @genehack

continuing to learn
is vital!

ﬁgure out
how to make that happen

both in terms of
“maintain interest in it”

& in terms of
“be good at it”

maybe an SSG isnʼt the right
learning project for you,
maybe projects arenʼt the
right learning mechanism for
you -- but you need to figure
out what the right mechanism,
the right project is, so you can
keep on learning
disclaimer:
this talk is based on
my opinions and experiences

your mileage
will vary

thanks to organizers,
attendees
thanks!

special thanks
@qedunham

special thanks
@vmbrasseur
@garethgreenaway

openwest
organizers

you!

A static site generator should be your next language learning project

questions?

A static site generator should be your next language learning project

More Related Content

Similar to A static site generator should be your next language learning project (20)

More from John Anderson (20)

Recently uploaded (20)

A static site generator should be your next language learning project