A static site generator should be your next language learning project

a static site generator
should be your next
language learning project
@genehack | the perl conference 2018 | #tpcislc

hi, i’m
john.
a/k/a @genehack
2 — why&how2learn • #tpcislc • @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 coder4 — why&how2learn • #tpcislc • @genehack

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.8 — why&how2learn • #tpcislc • @genehack

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
applescript

perl
ruby
python

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

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

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

how do you
learn a
language?16 — why&how2learn • #tpcislc • @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 • #tpcislc • @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 • #tpcislc • @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/39fca1f4193640cded1d84d0d7c55c
9c--disney-movies-disney-cruiseplan.jpg
nodatabases!

can be very
simple

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

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

automatically
generated
every day30 — why&how2learn • #tpcislc • @genehack

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 • #tpcislc • @genehack

jekyll
^ hugo
^ hid
weblogwith 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
classics41 — why&how2learn • #tpcislc • @genehack

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 • #tpcislc • @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 stuff55 — why&how2learn • #tpcislc • @genehack

writing some code
andgetting it to build/run

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

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

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

interpolating
a variable into output

o/
yay!61 — why&how2learn • #tpcislc • @genehack

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

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
packages72 — why&how2learn • #tpcislc • @genehack

(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 my74 — why&how2learn • #tpcislc • @genehack

after
that…75 — why&how2learn • #tpcislc • @genehack

the sky’s
the limit76 — why&how2learn • #tpcislc • @genehack

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
weblog77 — why&how2learn • #tpcislc • @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
app79 — why&how2learn • #tpcislc • @genehack

and then you can get
fancy…

http
server81 — why&how2learn • #tpcislc • @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:87 — why&how2learn • #tpcislc • @genehack

continuing to learn
is vital!88 — why&how2learn • #tpcislc • @genehack

ﬁ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!

tpc
organizers

you!

questions?

ps: seeking qa lead!
hit me up for deets

A static site generator should be your next language learning project

Recommended

Recommended

More Related Content

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

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

More from John Anderson

More from John Anderson (20)

Recently uploaded

Recently uploaded (20)

A static site generator should be your next language learning project