Zachโ€™s ugly mug (his face) Zach Leatherman

This Web Site is a Tech Talk

February 27, 2021 4,088 Views Watch in 45 minutes Tagged: Speaking

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

Zachโ€™s ugly mug (his face)

Zach is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He created 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 72 talks in nine different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS.

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

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

    @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

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)