Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A static site generator should be your next language learning project

250 views

Published on

When learning a new language, some folks prefer to read the language documentation, or work through simple exercises like you might find on http://exercism.io — but I prefer to have something more like an actual project. I find that holds my focus a little better, and that I do a better job of absorbing the new language syntax and features if I’m using them for something real.

In this talk, I’m going to outline why writing a static website generator is the perfect task for this sort of language learning project. I’ll cover the code you’ll need to write in order to develop a simple template-based website generation system, and show how this particular project actually manages to hit all the points you need to understand to claim basic understanding of a language.

Published in: Software
  • Be the first to comment

  • Be the first to like this

A static site generator should be your next language learning project

  1. 1. a static site generator should be your next language learning project @genehack | the perl conference 2018 | #tpcislc
  2. 2. hi, i’m john. a/k/a @genehack 2 — why&how2learn • #tpcislc • @genehack
  3. 3. custom software development, training, and technology consulting vp,technology 3 — why&how2learn • #tpcislc • @genehack
  4. 4. 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
  5. 5. 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 5 — why&how2learn • #tpcislc • @genehack
  6. 6. 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 6 — why&how2learn • #tpcislc • @genehack
  7. 7. one of the basic ideas here is that continual learning is super important in our line of work premise: lifelong learning is critical. 7 — why&how2learn • #tpcislc • @genehack
  8. 8. the only constant thing is people telling you over and over that the only constant thing is change.8 — why&how2learn • #tpcislc • @genehack
  9. 9. who here has heard this before? “learn at least one new language every year.” — david thomas & andrew hunt, “the pragmatic programmer”, 1999 9 — why&how2learn • #tpcislc • @genehack
  10. 10. or, this more modern variant... “learn at least one new javascript framework every month.” — me, this talk, right here right now 10 — why&how2learn • #tpcislc • @genehack
  11. 11. some of the languages i’ve “learned” basic pascal applescript 11 — why&how2learn • #tpcislc • @genehack
  12. 12. some of the languages i’ve “learned” perl ruby python 12 — why&how2learn • #tpcislc • @genehack
  13. 13. some of the languages i’ve “learned” javascript php c13 — why&how2learn • #tpcislc • @genehack
  14. 14. some of the languages i’ve “learned” lisp clojure scala14 — why&how2learn • #tpcislc • @genehack
  15. 15. some of the languages i’ve “learned” node swift c♯15 — why&how2learn • #tpcislc • @genehack
  16. 16. how do you learn a language?16 — why&how2learn • #tpcislc • @genehack
  17. 17. readbooks and docs 17 — why&how2learn • #tpcislc • @genehack
  18. 18. dopractice exercises 18 — why&how2learn • #tpcislc • @genehack
  19. 19. whoʼs used exercism? exercism.io 19 — why&how2learn • #tpcislc • @genehack
  20. 20. 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 20 — why&how2learn • #tpcislc • @genehack
  21. 21. my language learning project of choice: static site generators 21 — why&how2learn • #tpcislc • @genehack
  22. 22. whatis a static site generator? 22 — why&how2learn • #tpcislc • @genehack
  23. 23. sometimes called 'ssg' ssg23 — why&how2learn • #tpcislc • @genehack
  24. 24. 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
  25. 25. 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! 25 — why&how2learn • #tpcislc • @genehack
  26. 26. can be very simple 26 — why&how2learn • #tpcislc • @genehack
  27. 27. 27 — why&how2learn • #tpcislc • @genehack
  28. 28. single page28 — why&how2learn • #tpcislc • @genehack
  29. 29. part of a larger site29 — why&how2learn • #tpcislc • @genehack
  30. 30. automatically generated every day30 — why&how2learn • #tpcislc • @genehack
  31. 31. based on simple structured data file 31 — why&how2learn • #tpcislc • @genehack
  32. 32. 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 32 — why&how2learn • #tpcislc • @genehack
  33. 33. wrote ~10-15 years ago 33 — why&how2learn • #tpcislc • @genehack
  34. 34. ssgs can also be kindacomplicated 34 — why&how2learn • #tpcislc • @genehack
  35. 35. 35 — why&how2learn • #tpcislc • @genehack
  36. 36. iinteractive.com/notebook 36 — why&how2learn • #tpcislc • @genehack
  37. 37. company site37 — why&how2learn • #tpcislc • @genehack
  38. 38. jekyll ^ hugo ^ hid weblogwith tags, archive, et cetera 38 — why&how2learn • #tpcislc • @genehack
  39. 39. so why are ssgs great for learning? 39 — why&how2learn • #tpcislc • @genehack
  40. 40. thereʼs a quick early payoff and then thereʼs a lot of potential to go other places iterative & incremental 40 — why&how2learn • #tpcislc • @genehack
  41. 41. think about what you need to do they hit on all the classics41 — why&how2learn • #tpcislc • @genehack
  42. 42. basic “hello world” ssg: turn 1 input file into 1 web page hello world as a ssg 42 — why&how2learn • #tpcislc • @genehack
  43. 43. o hai there 43 — why&how2learn • #tpcislc • @genehack
  44. 44. (at this stage, you can cheat and hardcode most of the HTML in print statements) 1. read input from file 2. process the input 3. write output to file 44 — why&how2learn • #tpcislc • @genehack
  45. 45. 45 — why&how2learn • #tpcislc • @genehack
  46. 46. hello world! 46 — why&how2learn • #tpcislc • @genehack
  47. 47. #! /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 ); 47 — why&how2learn • #tpcislc • @genehack
  48. 48. open( my $in , '<' , 'index.txt' ) or die "cannot read index.txt: $!"; my $input; while( my $line = <$in> ) { $input .= $line; } close( $in ); 48 — why&how2learn • #tpcislc • @genehack
  49. 49. 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; 49 — why&how2learn • #tpcislc • @genehack
  50. 50. open( my $out , '>' , 'index.html') or die "cannot write to index.html: $!"; print $out $output; close( $out ); 50 — why&how2learn • #tpcislc • @genehack
  51. 51. hello world! 51 — why&how2learn • #tpcislc • @genehack
  52. 52. 52 — why&how2learn • #tpcislc • @genehack
  53. 53. let’s pause here53 — why&how2learn • #tpcislc • @genehack
  54. 54. 1. read input from file 2. process the input 3. write output to file 54 — why&how2learn • #tpcislc • @genehack
  55. 55. in those 3 steps we just did a whole bunch of stuff55 — why&how2learn • #tpcislc • @genehack
  56. 56. writing some code andgetting it to build/run 56 — why&how2learn • #tpcislc • @genehack
  57. 57. reading & writing files57 — why&how2learn • #tpcislc • @genehack
  58. 58. (which probably means figuring out where to find documentation) 58 — why&how2learn • #tpcislc • @genehack
  59. 59. getting data from a file into a variable59 — why&how2learn • #tpcislc • @genehack
  60. 60. interpolating a variable into output 60 — why&how2learn • #tpcislc • @genehack
  61. 61. o/ yay!61 — why&how2learn • #tpcislc • @genehack
  62. 62. next: adding yaml front matter62 — why&how2learn • #tpcislc • @genehack
  63. 63. title: Hello World! --- hello again world! 63 — why&how2learn • #tpcislc • @genehack
  64. 64. #! /usr/bin/env perl use strict; use warnings; use YAML::XS; open( my $in , '<' , 'index2.txt' ) or die "cannot read index.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; open( my $out , '>' , 'index.html') or die "cannot write to index.html: $!"; print $out $output; close( $out ); 64 — why&how2learn • #tpcislc • @genehack
  65. 65. open( my $in , '<' , 'index2.txt' ) or die "cannot read index.txt: $!"; my $lines; while ( my $line = <$in> ) { $lines .= $line } close( $in ); 65 — why&how2learn • #tpcislc • @genehack
  66. 66. my( $yaml, $content ) = split( /^---$/m, $lines , 2 ); my $front = Load $yaml; my $title = $front->{title}; 66 — why&how2learn • #tpcislc • @genehack
  67. 67. my $top = <<EOF; <!doctype html> <html> <head><title>$title</title><head> <body> EOF my $bottom = <<EOF; </body> </html> EOF my $output = $top . $content . $bottom; 67 — why&how2learn • #tpcislc • @genehack
  68. 68. open( my $out , '>' , 'index.html') or die "cannot write to index.html: $!"; print $out $output; close( $out ); 68 — why&how2learn • #tpcislc • @genehack
  69. 69. 69 — why&how2learn • #tpcislc • @genehack
  70. 70. 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 files 70 — why&how2learn • #tpcislc • @genehack
  71. 71. 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! 71 — why&how2learn • #tpcislc • @genehack
  72. 72. which probably means figuring out how to install libraries/ packages/deps/whatever the language calls them which means: figuring out packages72 — why&how2learn • #tpcislc • @genehack
  73. 73. (note: writing your own templating system is a different learning project) note:probably don’t write your own template engine 73 — why&how2learn • #tpcislc • @genehack
  74. 74. also:loops & conditional logic oh my74 — why&how2learn • #tpcislc • @genehack
  75. 75. after that…75 — why&how2learn • #tpcislc • @genehack
  76. 76. the sky’s the limit76 — why&how2learn • #tpcislc • @genehack
  77. 77. 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
  78. 78. folding in other processing (e.g., SASS -> CSS processing) which means figuring out how to invoke and manage external processes add other processors 78 — why&how2learn • #tpcislc • @genehack
  79. 79. a real CLI app with sub- commands -- more library usage! code organization! add a subcmd-style app79 — why&how2learn • #tpcislc • @genehack
  80. 80. and then you can get fancy… 80 — why&how2learn • #tpcislc • @genehack
  81. 81. http server81 — why&how2learn • #tpcislc • @genehack
  82. 82. automatically rebuild output when input is modified 82 — why&how2learn • #tpcislc • @genehack
  83. 83. and the list can go on and on only rebuild output when necessary 83 — why&how2learn • #tpcislc • @genehack
  84. 84. finally when you think you’re “done”… 84 — why&how2learn • #tpcislc • @genehack
  85. 85. once youʼve done a good chunk, go back and rewrite the earlier bits to be more idiomatic go back & take another look 85 — why&how2learn • #tpcislc • @genehack
  86. 86. 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. 86 — why&how2learn • #tpcislc • @genehack
  87. 87. so, to sum up:87 — why&how2learn • #tpcislc • @genehack
  88. 88. continuing to learn is vital!88 — why&how2learn • #tpcislc • @genehack
  89. 89. figure out how to make that happen 89 — why&how2learn • #tpcislc • @genehack
  90. 90. both in terms of “maintain interest in it” 90 — why&how2learn • #tpcislc • @genehack
  91. 91. & in terms of “be good at it” 91 — why&how2learn • #tpcislc • @genehack
  92. 92. 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 92 — why&how2learn • #tpcislc • @genehack
  93. 93. your mileage will vary 93 — why&how2learn • #tpcislc • @genehack
  94. 94. thanks to organizers, attendees thanks! 94 — why&how2learn • #tpcislc • @genehack
  95. 95. tpc organizers 95 — why&how2learn • #tpcislc • @genehack
  96. 96. you! 96 — why&how2learn • #tpcislc • @genehack
  97. 97. questions? 98 — why&how2learn • #tpcislc • @genehack
  98. 98. ps: seeking qa lead! hit me up for deets 99 — why&how2learn • #tpcislc • @genehack

×