Zach’s ugly mug (his face)

Zach Leatherman

This Web Site is a Tech Talk

February 26, 2021 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 IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

Previous
Unicode Range Interchange
Next
Join the Eleventy Super Professional Business Network

65 Retweets

Shane BlizzyBramus!VisionSnapAditicsOfficial Ho.incJohan BovéFinancial IntelligenceModeratorGTModeratorGTMalibu IT LabsadminakiFeedpushr feeds.Eco Web HostingFriday Front-Endjérôme coupéMatthias OttStephen HayPablo Lara HdoniMike AparicioTod Robbins (he/him)Tod Robbins (he/him)ClaudioMatteo CollinaFynn BeckerEleventyThainBrian LeRouxCraig WebbHugh Haworthantodev89Giuseppe PizzimentiJag Singh ReehalClaus Wahlersdaniel ☕Stefen 🌿🦑rm -rf fascismLuke Bonaccorsi 🏳️‍🌈Stephanie EcklesThainPaul Chin Jr.George GriffithsGeorge 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-HJAMDhaval ShahTod Robbins (he/him)Matteo CollinaSimeon.__proto__ - BLMSean C DavisFynn BeckerRajat✨JoëlGeorge GriffithsSara SoueidanSamuel HauserAkshit GargScott McCrackenJake DohmMahinth Joe ChristensenJordan DavisChris AldrichFederico "Edo" GranatadaaitoulaamDeepanshu narwalGregor AlbrechtJulian ElveDanielTamkinMarkus Gebka 🏕️Nick NisiRheinard 🦊 KorfMike Sherov (he/him) BLMbebsicoYannick 🦕Kiran SonleyJeremias MenichellidamiagroupptSteve DennettTRST_BlogGuilherme CamilloGarrett WelsonNatan SchlingJamCowChris TseEnrique Marques Jrantodev89John MeyerhoferJouni KantolaPavithra Kodmadctrl_f 🥃 ☄️Rodrigo FloresRodney PruittFábio M.R. BarbosaRyan Florence˗ˏˋ D͟i͟e͟d͟e͟r͟i͟k͟ 🙋🏼‍♂️ ˎˊJag Singh ReehalMiķelis ZaļaisClaus WahlersAndy BellSteve Leemason conkrightMikie Etlingermithu ( Will work for 🍪cookies🍪 )Rhian van EschMartin BerglundNaomi See 🤖👩🏻‍🎤❤️🤦‍♀️🥸🦠Christopher Kirk-NielsenIan ThomasbayuThanh TrầnUli TroyoMatthias WestonDanHTeuMeuLeuStephanie EcklesKong YangArpit BatraDaniel EhnissAndrew AquinoGeorge GriffithsMichael HastrichPaul Chin Jr.Gaël PoupardStefen 🌿🦑Rob BlakeLucas CherkewskiMohammed AmeenknutJacob LeechSamuel HauserDavid EastEric WallaceMark Buskbjerg
28 Replies
  1. 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

    @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

    @zachleat

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

  4. Greg Davidson

    @syncopated

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

  5. Ehsan sarshar

    @ehsan_sarshar_

    This little girl seems like Disney tinkerbell character

  6. Zach Leatherman

    @zachleat

    Thanks Brian!

  7. Brian LeRoux

    @brianleroux

    Loved it! 💯💯💯

  8. Mike Sherov (he/him) BLM

    @mikesherov

    "Not a single typo"

  9. 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

    @rheinardkorf

    There goes my evening!

  11. 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

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

  13. Zach Leatherman

    @zachleat

    Thanks Christopher!

  14. Christopher Kirk-Nielsen

    @ckirknielsen

    Loving how meta this is. Excellent talk!

  15. dan leatherman

    @danleatherman

    HOW dId yOu KNOw HOW MucH grEy haIR I HAvE

  16. dan leatherman

    @danleatherman

    I was highly entertained watching this

  17. Zach Leatherman

    @zachleat

    😄 Thanks!

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

  19. Zach Leatherman

    @zachleat

    Thanks Will!

  20. Zach Leatherman

    @zachleat

    Thanks Paul!

  21. 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.

    @paulchinjr

    this is a cool talk, thanks for sharing.

  23. 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

    @griffadev

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

  25. Matthew Phillips

    @matthewcp

    SHOts fIred 💣 ZACH is nOt hOLDinG bACk aNy mORE 🧨

  26. 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

    @zachleat

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

  28. Mark Buskbjerg

    @MarkBuskbjerg

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

    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)