Zach’s ugly mug (his face) Zach Leatherman

This Web Site is a Tech Talk

February 27, 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.

Watch on YouTube: This Web Site is a Tech Talk

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


< Newer
Unicode Range Interchange
Older >
Join the Eleventy Super Professional Business Network

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 84 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

51 Reposts

David EastMatthew PhillipsGeorge GriffithsGeorge GriffithsPaul Chin Jr.ThainStephanie EcklesLuke Bonaccorsi 🏳️‍🌈rm -rf fascismStefen 🌿🦑daniel ☕Claus WahlersJag Singh ReehalGiuseppe Pizzimentiantodev89Hugh HaworthCraig WebbBrian LeRouxThainEleventyFynn BeckerMatteo CollinaClaudioTod Robbins (he/him)Tod Robbins (he/him)Mike ApariciodoniPablo Lara HStephen HayMatthias Ottjérôme coupéFriday Front-EndEco Web HostingFeedpushr feeds.akiIndieWeb Avatar for https://watchfvsslive.coMalibu IT LabsFinancial IntelligenceJohan BovéOfficial Ho.incAditicsVisionSnapIndieWeb Avatar for https://portfolio.digitalskeleton.com.ngIndieWeb Avatar for https://711web.comIndieWeb Avatar for https://www.67nj.orgIndieWeb Avatar for https://wpnewshub.comIndieWeb Avatar for https://711web.comIndieWeb Avatar for https://techfans.co.ukIndieWeb Avatar for https://www.bram.usShane BlizzyIndieWeb Avatar for https://www.reddit.com

115 Likes

Estela FrancoRussell HeimlichRyan CarniatoTodd 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 BuskbjergJohan Bové
31 Comments
  1. Mark Buskbjerg

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

  2. Zach Leatherman

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

  3. Mark Buskbjerg

    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)

  4. Matthew Phillips

    SHOTS FIRED 💣 ZACH IS NOT HOLDING BACK ANY MORE 🧨

  5. George Griffiths

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

  6. Zach Leatherman

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

  7. Paul Chin Jr.

    this is a cool talk, thanks for sharing.

  8. willmartin.dev 🐝

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

  9. Zach Leatherman

    Thanks Paul!

  10. Zach Leatherman

    Thanks Will!

  11. Stefen 🌿🦑

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

  12. Zach Leatherman

    😄 Thanks!

  13. dan leatherman

    I was highly entertained watching this

  14. dan leatherman

    How did you know how much grey hair I have

  15. Christopher Kirk-Nielsen

    Loving how meta this is. Excellent talk!

  16. Zach Leatherman

    Thanks Christopher!

  17. Jouni Kantola

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

  18. Uli Troyo

    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?

  19. Rheinard 🦊 Korf

    There goes my evening!

  20. Steve Dennett

    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.

  21. Mike Sherov (he/him) BLM

    "Not a single typo"

  22. Brian LeRoux

    Loved it! 💯💯💯

  23. Zach Leatherman

    Thanks Brian!

  24. Ehsan sarshar

    This little girl seems like Disney tinkerbell character

  25. Greg Davidson

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

  26. Zach Leatherman

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

  27. Ryan Carniato

    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.

  28. Zach Leatherman

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

  29. Estela Franco
  30. Zach Leatherman

    fake it by making it 😅

  31. Phil Hawksworth

    I love this talk so much

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

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)