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.

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

51 Retweets

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

    @MarkBuskbjerg

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

  2. Zach Leatherman

    @zachleat

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

  3. 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)

  4. Matthew Phillips

    @matthewcp

    SHots FIrEd 💣 zach IS NOt holdING bACk AnY MoRE 🧨

  5. George Griffiths

    @griffadev

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

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

  7. Paul Chin Jr.

    @paulchinjr

    this is a cool talk, thanks for sharing.

  8. willmartin.dev 🐝

    @willmartindev

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

  9. Zach Leatherman

    @zachleat

    Thanks Paul!

  10. Zach Leatherman

    @zachleat

    Thanks Will!

  11. Stefen 🌿🦑

    @stefen

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

  12. Zach Leatherman

    @zachleat

    😄 Thanks!

  13. dan leatherman

    @danleatherman

    I was highly entertained watching this

  14. dan leatherman

    @danleatherman

    HOW Did yOU kNOW hOw mUCh gRey HaIR I HAVe

  15. Christopher Kirk-Nielsen

    @ckirknielsen

    Loving how meta this is. Excellent talk!

  16. Zach Leatherman

    @zachleat

    Thanks Christopher!

  17. Jouni Kantola

    @jouni_kantola

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

  18. 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?

  19. Rheinard 🦊 Korf

    @rheinardkorf

    There goes my evening!

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

  21. Mike Sherov (he/him) BLM

    @mikesherov

    "Not a single typo"

  22. Brian LeRoux

    @brianleroux

    Loved it! 💯💯💯

  23. Zach Leatherman

    @zachleat

    Thanks Brian!

  24. Ehsan sarshar

    @ehsan_sarshar_

    This little girl seems like Disney tinkerbell character

  25. Greg Davidson

    @syncopated

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

  26. Zach Leatherman

    @zachleat

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

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

  28. 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) 😅

  29. Estela Franco

    @guaca

  30. Zach Leatherman

    @zachleat

    FAKe It By makinG It 😅

  31. Phil Hawksworth

    @philhawksworth

    I love this talk so much

Shamelessly plug your related post:

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)