Zach’s ugly mug (his face)

Zach Leatherman

This Web Site is a Tech Talk

February 27, 2021 #14 Popular Watch in 45 minutes

Over the weekend I was finishing up some polish on the slides of my most recent conference talk when my daughter walked in to my office. We decided to record a short video of that interaction and put it up on Twitter.

Needless to say, the tweet—uh—went much further than I expected.

If you’re at all curious how we did it, I’ll explain it and more in this talk about building web sites. The talk also delves into Single Page Applications, Multi Page Applications, modern JavaScript Frameworks, and what I believe to be a better future for web development.

March 8, 2021: Update: make sure you check out Queue Code, a service to let you live code like I did in this talk.

Slides and Source Code


Teasers

I think I’ve put more work into this @smashingconf talk than any other talk I’ve given in my life 😅😅😅—October 9, 2020

I am really excited and nervous to give this talk but I also want to punch past me for being obsessed with this weird idea—October 12, 2020

Zach’s ugly mug (his face)

Zach is a builder for the web with Netlify. He created the Eleventy static site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

Previous
Unicode Range Interchange
Next
Jamstack 101: Getting Started with Eleventy

20 Retweets

doniMike AparicioTod Robbins (he/him)ClaudioMatteo CollinaFynn BeckerThainBrian LeRouxCraig Webbantodev89Giuseppe PizzimentiJag Singh ReehalClaus WahlersStefen 🌿🦑rm -rf fascismThainPaul Chin Jr.George GriffithsMatthew PhillipsDavid East
113 Likes
Ryan CarniatoJohan BovéTodd MoreymkJabran RafiqueJohn MeyerhoferdoniJack HallMike AparicioRex PanNaomi See 🤖👩🏻‍🎤❤️🤦‍♀️🥸🦠Jake HamiltonStephen BellRoberto CapuanoMarco useCauseAndEffect()Oleksandr ShutMartin BerglundSonnyPatrick HaugSantiago CardonaClaudio˗ˏˋ D͟i͟e͟d͟e͟r͟i͟k͟ 🙋🏼‍♂️ ˎˊEric PortisCh-HJAMTod Robbins (he/him)Dhaval ShahMatteo CollinaSimeon.__proto__ - BLMSean C DavisFynn Becker✨JoëlRajatGeorge GriffithsSara SoueidanSamuel HauserAkshit GargScott McCrackenJake DohmMahinth Joe ChristensenJordan DavisFederico "Edo" GranataChris AldrichdaaitoulaamDeepanshu narwalJulian ElveGregor AlbrechtMarkus Gebka 🏕️DanielTamkinNick NisiRheinard 🦊 KorfMike Sherov (he/him) BLMbebsicoYannick 🦕Kiran SonleyJeremias MenichellidamiagroupptSteve DennettTRST_BlogGarrett WelsonGuilherme CamilloNatan SchlingJamCowChris TseEnrique Marques Jrantodev89John MeyerhoferPavithra KodmadJouni Kantolactrl_f 🥃 ☄️Rodrigo FloresRodney PruittFábio M.R. BarbosaRyan FlorenceJag Singh Reehal˗ˏˋ D͟i͟e͟d͟e͟r͟i͟k͟ 🙋🏼‍♂️ ˎˊMiķelis ZaļaisClaus WahlersAndy BellSteve Leemason conkrightMikie Etlingermithu ( Will work for 🍪cookies🍪 )Rhian van EschNaomi See 🤖👩🏻‍🎤❤️🤦‍♀️🥸🦠Martin BerglundChristopher Kirk-NielsenIan ThomasbayuThanh TrầnUli TroyoMatthias WestonDanHTeuMeuLeuStephanie EcklesArpit BatraKong YangDaniel EhnissAndrew AquinoMichael HastrichGeorge GriffithsPaul Chin Jr.Gaël PoupardStefen 🌿🦑Rob BlakeLucas CherkewskiMohammed AmeenknutJacob LeechDavid EastSamuel HauserEric WallaceMark Buskbjerg
28 Replies
  1. Zach Leatherman

    Zach Leatherman @zachleat #

    Oh, no—no apologies needed at all. I don’t assume anyone knows me or my work (the world is a big place) 😅

  2. Ryan Carniato

    Ryan Carniato @RyanCarniato #

    For sure, I've always been on the highly dynamic side of things, so apologies, my familiarity with static generation solutions is a bit less. But I imagine a lot of the same considerations apply.

  3. Zach Leatherman

    Zach Leatherman @zachleat #

    🙌🏻 whoa 4 hundos and an ice cream—I’ll take it

  4. Greg Davidson

    Greg Davidson @syncopated #

    So good 😊 I laughed out loud many times. Thanks 🙏 so much Zach 💯

  5. Ehsan sarshar

    Ehsan sarshar @ehsan_sarshar_ #

    This little girl seems like Disney tinkerbell character

  6. Zach Leatherman

    Zach Leatherman @zachleat #

    Thanks Brian!

  7. Brian LeRoux

    Brian LeRoux @brianleroux #

    Loved it! 💯💯💯

  8. Mike Sherov (he/him) BLM

    Mike Sherov (he/him) BLM @mikesherov #

    "Not a single typo"

  9. Steve Dennett

    Steve Dennett @Wolfmans55 #

    Funny timing. I channeled this energy today and got around to making my blog which is a no-js MPA. Created a build system that uses just markdown, html, and css files. No templating languages or webpack. Feels good.

  10. Rheinard 🦊 Korf

    Rheinard 🦊 Korf @rheinardkorf #

    There goes my evening!

  11. Uli Troyo

    Uli Troyo @UliTroyo #

    Yay! I was hoping this would wind up on YouTube. Great talk! I'm already VERY biased in favor of less JS on the frontend, but hey, we need at least a little echo in our chamber, no?

  12. Jouni Kantola

    Jouni Kantola @jouni_kantola #

    Good job, Zach! 🍨 The cam stream going red was fun👌

  13. Zach Leatherman

    Zach Leatherman @zachleat #

    Thanks Christopher!

  14. Christopher Kirk-Nielsen

    Christopher Kirk-Nielsen @ckirknielsen #

    Loving how meta this is. Excellent talk!

  15. dan leatherman

    dan leatherman @danleatherman #

    HoW DiD yOu knOW HoW muCh grEy HAIR I hAve

  16. dan leatherman

    dan leatherman @danleatherman #

    I was highly entertained watching this

  17. Zach Leatherman

    Zach Leatherman @zachleat #

    😄 Thanks!

  18. Stefen 🌿🦑

    Stefen 🌿🦑 @stefen #

    I'm calling all our websites Multi Page Applications from now on 🤣 — great talk🔥

  19. Zach Leatherman

    Zach Leatherman @zachleat #

    Thanks Will!

  20. Zach Leatherman

    Zach Leatherman @zachleat #

    Thanks Paul!

  21. willmartin.dev 🐝

    willmartin.dev 🐝 @willmartindev #

    The flow of your ideas in this talk is 💯. The reveal at the end is just so satisfying.

  22. Paul Chin Jr.

    Paul Chin Jr. @paulchinjr #

    this is a cool talk, thanks for sharing.

  23. Zach Leatherman

    Zach Leatherman @zachleat #

    😅 I’m just usually too busy to take any shots but if they can do 100 million vaccines I figure why not

  24. George Griffiths

    George Griffiths @griffadev #

    About 11 minutes in this gets spicy 🌶️🌶️😂😂

  25. Matthew Phillips

    Matthew Phillips @matthewcp #

    ShOts FIreD 💣 zaCH Is NOT holdiNG bACK Any MOrE 🧨

  26. Mark Buskbjerg

    Mark Buskbjerg @MarkBuskbjerg #

    Nice. I really see a use case for this in tutorials. Like the small showcases on the frontpage of @tailwindcss docs. Yours just seems to be next step automated with the liveview and autotyping (still don't know how you did it, just watched the start of the talk)

  27. Zach Leatherman

    Zach Leatherman @zachleat #

    I’ll post the slides so that anyone can use it tomorrow!

  28. Mark Buskbjerg

    Mark Buskbjerg @MarkBuskbjerg #

    Really intrigued by the autotyping effect. I really love it!

    45 Mentions
    1. Shane Blizzy

      Shane Blizzy @blizzy_shane #

      This Web Site is a Tech Talk—zachleat.com #WebDesign via twinybots.ch zachleat.com/web/this-websi…

    2. portfolio.digitalskeleton.com.ng #

      Show original post ThiS lITeraL TEcH tAlK (YOutUBe vIDEo EMBeDded in there) By zaCH LeatHeRman Is a gOoD TIme. THe tALk IS SPrINKLED with FuN tRICkERY, so i’m JUST takING nOtes oN SOMe ON IT HeRe: i hAvE no iDeA HoW He PUlLeD OFf ThE “BAng On THe keyBoArD anD GET PeRfeCt Code” ThiNG, BUt It rEmi… Truncated

    3. 711web.com #

    4. Bramus! https://www.bram.us/author/bramus/ #

      Great talk by Zach Leatherman as recorded at Smashing Conf Austin 2020: The talk delves into Single Page Applications, Multi Page Applications, modern JavaScript Frameworks, and what I believe to be a better future for web development. /me nods along for the entirety of this t… Truncated

    5. websitedesign-usa.com #

    6. www.67nj.org #

    7. pixallus.com #

    8. pixallus.com #

    9. wpguynews.com #

    10. wpguynews.com #

    11. wpguynews.com #

    12. VisionSnap

      VisionSnap @VisionSnap #

      thIs WeB sITE is A tEch tALK csS trICkS zaCHlEaT.Com/WEB/tHis-WebsI…

    13. wpnewshub.com #

    14. Aditics

      Aditics @Aditics2 #

      This Web Site is a Tech Talk—zachleat.com #WebDesign via twinybots.ch zachleat.com/web/this-websi…

    15. Official Ho.inc

      Official Ho.inc @hocherntung #

      This Web Site is a Tech Talk—zachleat.com #WebDesign via twinybots.ch zachleat.com/web/this-websi…

    16. www.digitasbuzz.in #

    17. Johan Bové

      Johan Bové @johanbove #

      Hadn't seen this great presentation by Zach Leat yet - highly recommended for every web dev out there who understands English and dry humor. : zachleat.com/web/this-websi…

    18. Financial Intelligence

      Financial Intelligence @businessnetwor5 #

      This Web Site is a Tech Talk—zachleat.com #WebDesign via twinybots.ch zachleat.com/web/this-websi…

    19. ModeratorGT https://gotutoral.com/author/admin/ #

      Over the weekend I was finishing up some polish on the slides of my most recent conference talk when my daughter walked in to my office. We decided to record a short video of that interaction and put it up on Twitter. Needless to say, the tweet—uh—went much further than I expecte… Truncated

    20. ModeratorGT https://gotutoral.com/author/admin/ #

      Over the weekend I was finishing up some polish on the slides of my most recent conference talk when my daughter walked in to my office. We decided to record a short video of that interaction and put it up on Twitter. Needless to say, the tweet—uh—went much further than I expecte… Truncated

    21. 711web.com #

    22. 711web.com #

    23. 711web.com #

    24. Malibu IT Labs

      Malibu IT Labs @it_malibu #

      This Web Site is a Tech Talk: This literal tech talk (YouTube video embedded in there) by Zach Leatherman is a good time. The talk is sprinkled with fun trickery, so I’m just taking notes on some on it here: * I have no idea how he pulled … --- The post… zachleat.com/web/this-web… Truncated

    25. pikopong.com #

    26. dztechno.com #

    27. dztechno.com #

    28. techfans.co.uk #

    29. marketingsolution.com.au #

      Show original post This Web Site is a Tech Talk April 1, 2021 Web Development No Comments This literal tech talk (YouTube video embedded in there) by Zach Leatherman is a good time. The talk is sprinkled with fun trickery, so I’m just taking notes on some on it here: I have no … Truncated

    30. admin https://watchfvsslive.co/author/admin/ #

      tHIS lITeRal teCh TalK (YOuTUBe VIdEo EMBeDded iN thERE) BY zAch LEaTHeRmAn iS a GOoD tiME. tHE taLk Is SPRiNkLed wITh fUn TrIckeRy, so I’M JUsT tAKIng nOTes on SOme on IT hEre: i Have NO Idea HOW hE pulLED OFF THe “baNg ON tHE KeybOaRd AnD get peRFecT cODE” ThiNg, buT it REMiND… Truncated

    31. なんだか癒された zachleat.com/web/this-websi…

    32. Feedpushr feeds.

      Feedpushr feeds. @feedpushr #

      This Web Site is a Tech Talk zachleat.com/web/this-websi…

    33. Eco Web Hosting

      Eco Web Hosting @ecowebhostinguk #

      Not your average tech talk. @zachleat codes a website in real-time to talk HTML, CSS stylesheets, Javascript, efficiency, and more! zachleat.com/web/this-websi…

    34. Friday Front-End

      Friday Front-End @fridayfrontend #

      This Web Site is a Tech Talk, by @zachleat zachleat.com/web/this-websi…

    35. jérôme coupé

      jérôme coupé @jeromecoupe #

      Really enjoyed this talk by the one and only @zachleat about multiple pages applications being a good baseline for building websites and lighter / simpler tooling #jamstack zachleat.com/web/this-websi…

    36. Matthias Ott

      Matthias Ott @m_ott #

      “My only plea today is that we question the assumptions of SPA-by-default tooling. The pendulum of web development could really use a little bit more equilibrium.” – @zachleat 💯💯💯💯🍦 zachleat.com/web/this-websi…

    37. Stephen Hay

      Stephen Hay @stephenhay #

      @zachleat Didn't see this one until today. zachleat.com/web/this-websi…. Loved it.

    38. Pablo Lara H

      Pablo Lara H @pablolarah #

      This website is a Tech talk by Zach Leatherman @zachleat #webdev #SinglePageApplications #MultiPageApplications #JavaScriptFrameworks zachleat.com/web/this-websi…

    39. Tod Robbins (he/him)

      Tod Robbins (he/him) @todrobbins #

      This talk is incredible, made me think a lot more deeply about global accessibility and sustainability when it comes to web development.

    40. Eleventy

      Eleventy @eleven_ty #

      #BuiltWithEleventy

    41. Hugh Haworth

      Hugh Haworth @elliotclydenz #

      Some spicy takes from @zachleat here🌶 A good reminder to ask if you're sure you need an SPA. zachleat.com/web/this-websi…

    42. daniel ☕

      daniel ☕ @danielfilho #

      this tech talk is so good. SO GOOD. I repeat: SO GOOD. I totally recommend you to watch and understand the reasoning behind it. Lovely content.

    43. Luke Bonaccorsi 🏳️‍🌈

      Luke Bonaccorsi 🏳️‍🌈 @CodeFoodPixels #

      It may be spicy, but it's true

    44. Stephanie Eckles

      Stephanie Eckles @5t3ph #

      Must watch 👏🏼💯🔥

    45. George Griffiths

      George Griffiths @griffadev #

      Web apps also knows a slower websites 😂

    Social Card Image Preview

    This is what will show up when you share this post on Social Media:

    How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)