[
  {
    "start": 0.0,
    "end": 3.18,
    "text": "So I recently released a brand new"
  },
  {
    "start": 3.18,
    "end": 6.72,
    "text": "course, \"HTMX - The Practical Guide\"."
  },
  {
    "start": 7.8,
    "end": 11.44,
    "text": "That's a course I actually didn't plan to"
  },
  {
    "start": 11.44,
    "end": 13.9,
    "text": "create, because I got plenty of work to"
  },
  {
    "start": 13.9,
    "end": 16.94,
    "text": "do with an ongoing Next.js course"
  },
  {
    "start": 16.94,
    "end": 19.66,
    "text": "update and an ongoing Angular course"
  },
  {
    "start": 19.66,
    "end": 22.38,
    "text": "update, and both updates will be"
  },
  {
    "start": 22.38,
    "end": 22.76,
    "text": "amazing."
  },
  {
    "start": 22.98,
    "end": 24.54,
    "text": "I'm working on them, but they will still"
  },
  {
    "start": 24.54,
    "end": 25.34,
    "text": "take some time."
  },
  {
    "start": 26.24,
    "end": 27.9,
    "text": "I get some other work and some other"
  },
  {
    "start": 27.9,
    "end": 29.7,
    "text": "course related work as well."
  },
  {
    "start": 29.92,
    "end": 33.96,
    "text": "So HTMX was originally not a topic I"
  },
  {
    "start": 33.96,
    "end": 37.8,
    "text": "planned on covering with a course, but"
  },
  {
    "start": 37.8,
    "end": 42.74,
    "text": "then I worked with HTMX quite a bit over"
  },
  {
    "start": 42.74,
    "end": 44.34,
    "text": "the last couple of months."
  },
  {
    "start": 44.76,
    "end": 48.04,
    "text": "And I have to say, it's really an amazing"
  },
  {
    "start": 48.04,
    "end": 49.78,
    "text": "JavaScript library."
  },
  {
    "start": 50.1,
    "end": 52.14,
    "text": "And you might, of course, wonder if you"
  },
  {
    "start": 52.14,
    "end": 55.0,
    "text": "haven't heard about HTMX, do we really"
  },
  {
    "start": 55.0,
    "end": 56.06,
    "text": "need another library?"
  },
  {
    "start": 56.32,
    "end": 57.24,
    "text": "What does it do?"
  },
  {
    "start": 57.32,
    "end": 58.34,
    "text": "What the others don't?"
  },
  {
    "start": 58.58,
    "end": 63.66,
    "text": "The answer is HTMX helps you avoid"
  },
  {
    "start": 63.66,
    "end": 66.7,
    "text": "writing front-end JavaScript code."
  },
  {
    "start": 66.9,
    "end": 70.28,
    "text": "You can still use it with front-end"
  },
  {
    "start": 70.28,
    "end": 72.44,
    "text": "JavaScript code, and I do cover that in"
  },
  {
    "start": 72.44,
    "end": 74.72,
    "text": "the course as well, but you don't have to."
  },
  {
    "start": 74.94,
    "end": 78.1,
    "text": "And at least in my experience, you often"
  },
  {
    "start": 78.1,
    "end": 81.7,
    "text": "end up with websites, with web"
  },
  {
    "start": 81.7,
    "end": 84.92,
    "text": "applications that have a way simpler"
  },
  {
    "start": 84.92,
    "end": 88.62,
    "text": "front-end code structure than you would"
  },
  {
    "start": 88.62,
    "end": 90.44,
    "text": "have with React and so on."
  },
  {
    "start": 90.74,
    "end": 93.76,
    "text": "Now, I'm also not saying that it's better"
  },
  {
    "start": 93.76,
    "end": 95.82,
    "text": "than React, that it should always be"
  },
  {
    "start": 95.82,
    "end": 97.3,
    "text": "used instead of React."
  },
  {
    "start": 97.9,
    "end": 100.48,
    "text": "Instead, both are amazing libraries."
  },
  {
    "start": 100.66,
    "end": 102.14,
    "text": "And of course, the same is true for"
  },
  {
    "start": 102.14,
    "end": 103.12,
    "text": "Angular and so on."
  },
  {
    "start": 103.34,
    "end": 107.3,
    "text": "But for, at least in my experience, quite a"
  },
  {
    "start": 107.3,
    "end": 109.96,
    "text": "few web applications and websites,"
  },
  {
    "start": 111.08,
    "end": 114.08,
    "text": "HTMX might be the simpler solution, to"
  },
  {
    "start": 114.08,
    "end": 114.58,
    "text": "be honest."
  },
  {
    "start": 115.0,
    "end": 118.02,
    "text": "Now, what exactly is HTMX though?"
  },
  {
    "start": 118.34,
    "end": 119.14,
    "text": "What does it do?"
  },
  {
    "start": 119.42,
    "end": 120.34,
    "text": "How does it work?"
  },
  {
    "start": 120.7,
    "end": 123.0,
    "text": "As the name suggests, the idea is"
  },
  {
    "start": 123.0,
    "end": 126.48,
    "text": "essentially that it extends the HTML"
  },
  {
    "start": 126.48,
    "end": 127.78,
    "text": "markup language."
  },
  {
    "start": 128.139,
    "end": 131.36,
    "text": "It extends it by giving you a bunch of"
  },
  {
    "start": 131.36,
    "end": 134.38,
    "text": "new attributes, which you can add to"
  },
  {
    "start": 134.38,
    "end": 136.0,
    "text": "HTML elements."
  },
  {
    "start": 136.3,
    "end": 138.78,
    "text": "Now, what do these attributes do"
  },
  {
    "start": 138.78,
    "end": 139.08,
    "text": "though?"
  },
  {
    "start": 139.72,
    "end": 143.0,
    "text": "Well, in the end, they deal with sending"
  },
  {
    "start": 143.0,
    "end": 144.34,
    "text": "AJAX requests."
  },
  {
    "start": 144.84,
    "end": 148.06,
    "text": "So, behind-the requests from the"
  },
  {
    "start": 148.06,
    "end": 149.48,
    "text": "front-end to some back-end."
  },
  {
    "start": 149.9,
    "end": 153.78,
    "text": "And they, or HTMX as a library, then also"
  },
  {
    "start": 153.78,
    "end": 158.1,
    "text": "deals with the response that's sent back."
  },
  {
    "start": 158.4,
    "end": 160.46,
    "text": "And HTMX makes sure that your"
  },
  {
    "start": 160.46,
    "end": 164.54,
    "text": "front-end UI, your DOM, is updated with"
  },
  {
    "start": 164.54,
    "end": 166.14,
    "text": "that response data."
  },
  {
    "start": 166.5,
    "end": 169.18,
    "text": "Though that data part is now also"
  },
  {
    "start": 169.18,
    "end": 170.8,
    "text": "special and interesting."
  },
  {
    "start": 171.6,
    "end": 175.26,
    "text": "Because the idea with HTMX is that,"
  },
  {
    "start": 175.94,
    "end": 178.92,
    "text": "unlike with React or Angular and so on,"
  },
  {
    "start": 179.4,
    "end": 181.68,
    "text": "you're not exchanging JSON data"
  },
  {
    "start": 181.68,
    "end": 183.58,
    "text": "between the front-end and the"
  },
  {
    "start": 183.58,
    "end": 183.98,
    "text": "back-end."
  },
  {
    "start": 184.24,
    "end": 187.4,
    "text": "But instead, the idea is that your"
  },
  {
    "start": 187.4,
    "end": 191.52,
    "text": "back-end prepares the HTML code that"
  },
  {
    "start": 191.52,
    "end": 193.88,
    "text": "should be rendered on the screen."
  },
  {
    "start": 194.72,
    "end": 197.04,
    "text": "And that could be an entire page or just"
  },
  {
    "start": 197.04,
    "end": 198.4,
    "text": "a snippet, just a fragment."
  },
  {
    "start": 199.04,
    "end": 201.84,
    "text": "And HTMX then makes sure that that"
  },
  {
    "start": 201.84,
    "end": 205.54,
    "text": "response HTML code is inserted in the"
  },
  {
    "start": 205.54,
    "end": 207.86,
    "text": "right place in the DOM."
  },
  {
    "start": 208.1,
    "end": 210.32,
    "text": "So, in the website the user sees."
  },
  {
    "start": 210.8,
    "end": 213.92,
    "text": "And you control where exactly that"
  },
  {
    "start": 213.92,
    "end": 216.6,
    "text": "response HTML code will be inserted."
  },
  {
    "start": 216.84,
    "end": 220.04,
    "text": "And how it will be inserted with special"
  },
  {
    "start": 220.04,
    "end": 223.8,
    "text": "attributes, special HTMX attributes that"
  },
  {
    "start": 223.8,
    "end": 225.0,
    "text": "you can add to elements."
  },
  {
    "start": 225.24,
    "end": 228.2,
    "text": "So that you could use these HTMX"
  },
  {
    "start": 228.2,
    "end": 231.84,
    "text": "attributes to make sure that when a"
  },
  {
    "start": 231.84,
    "end": 234.2,
    "text": "form is submitted, a POST request is"
  },
  {
    "start": 234.2,
    "end": 237.28,
    "text": "sent to a certain route, and the response"
  },
  {
    "start": 237.28,
    "end": 240.58,
    "text": "HTML code that is sent back is then"
  },
  {
    "start": 240.58,
    "end": 243.6,
    "text": "inserted in a specific place in the"
  },
  {
    "start": 243.6,
    "end": 245.54,
    "text": "currently visible page."
  },
  {
    "start": 245.86,
    "end": 247.8,
    "text": "That's the idea with HTMX."
  },
  {
    "start": 247.88,
    "end": 249.44,
    "text": "And you don't need to write any"
  },
  {
    "start": 249.44,
    "end": 251.78,
    "text": "JavaScript code for setting up the"
  },
  {
    "start": 251.78,
    "end": 253.8,
    "text": "request, for sending the request, for"
  },
  {
    "start": 253.8,
    "end": 256.06,
    "text": "preparing the data, for using the"
  },
  {
    "start": 256.06,
    "end": 258.62,
    "text": "response data and for updating the"
  },
  {
    "start": 258.62,
    "end": 258.839,
    "text": "DOM."
  },
  {
    "start": 259.16,
    "end": 260.98,
    "text": "You don't need to do any of that."
  },
  {
    "start": 261.6,
    "end": 263.4,
    "text": "HTMX does it for you."
  },
  {
    "start": 263.52,
    "end": 264.88,
    "text": "That's the main idea."
  },
  {
    "start": 265.9,
    "end": 269.84,
    "text": "Now, of course, since HTMX essentially"
  },
  {
    "start": 269.84,
    "end": 273.22,
    "text": "needs a back-end that sends back HTML"
  },
  {
    "start": 273.22,
    "end": 276.84,
    "text": "snippets or documents instead of JSON"
  },
  {
    "start": 276.84,
    "end": 282.2,
    "text": "data, you can really only use HTMX if you"
  },
  {
    "start": 282.2,
    "end": 284.7,
    "text": "own the back-end, if you're building a"
  },
  {
    "start": 284.7,
    "end": 286.44,
    "text": "full-stack application in the end."
  },
  {
    "start": 286.66,
    "end": 289.5,
    "text": "Because only then can you make sure"
  },
  {
    "start": 289.5,
    "end": 293.48,
    "text": "that it is such HTML data that's sent"
  },
  {
    "start": 293.48,
    "end": 295.34,
    "text": "back instead of JSON data."
  },
  {
    "start": 296.04,
    "end": 299.66,
    "text": "So that is essentially a requirement, you"
  },
  {
    "start": 299.66,
    "end": 300.2,
    "text": "could say."
  },
  {
    "start": 300.28,
    "end": 303.0,
    "text": "And that, of course, also means that if"
  },
  {
    "start": 303.0,
    "end": 305.16,
    "text": "you're maybe building a back-end that's"
  },
  {
    "start": 305.16,
    "end": 307.82,
    "text": "not just meant to be used by a web"
  },
  {
    "start": 307.82,
    "end": 311.32,
    "text": "front-end, but also by a mobile app, for"
  },
  {
    "start": 311.32,
    "end": 314.94,
    "text": "example, you might think twice whether"
  },
  {
    "start": 314.94,
    "end": 317.64,
    "text": "you really want to use HTMX or not,"
  },
  {
    "start": 317.72,
    "end": 320.48,
    "text": "because you might need to send JSON"
  },
  {
    "start": 320.48,
    "end": 324.52,
    "text": "data to the mobile app and HTML data"
  },
  {
    "start": 324.52,
    "end": 326.82,
    "text": "to the web app if it uses HTMX."
  },
  {
    "start": 327.44,
    "end": 329.68,
    "text": "And maintaining these two different"
  },
  {
    "start": 329.68,
    "end": 332.5,
    "text": "APIs or these different sets of API"
  },
  {
    "start": 332.5,
    "end": 335.28,
    "text": "endpoints might not be something you"
  },
  {
    "start": 335.28,
    "end": 335.76,
    "text": "want to do."
  },
  {
    "start": 336.4,
    "end": 338.6,
    "text": "In addition, if you're building a super"
  },
  {
    "start": 338.6,
    "end": 342.38,
    "text": "complex web user interface with a lot of"
  },
  {
    "start": 342.38,
    "end": 344.32,
    "text": "interactivity, if you're building something"
  },
  {
    "start": 344.32,
    "end": 347.3,
    "text": "like Google Docs or anything like that,"
  },
  {
    "start": 348.02,
    "end": 351.12,
    "text": "you also might still want a library or"
  },
  {
    "start": 351.12,
    "end": 353.38,
    "text": "framework like React or Angular"
  },
  {
    "start": 353.52,
    "end": 357.1,
    "text": "because you have a lot of DOM updating"
  },
  {
    "start": 357.1,
    "end": 360.42,
    "text": "to do and it's not all related to HTTP"
  },
  {
    "start": 360.42,
    "end": 363.16,
    "text": "requests being sent back and forth."
  },
  {
    "start": 363.88,
    "end": 366.32,
    "text": "And in such a situation, HTMX also"
  },
  {
    "start": 366.32,
    "end": 368.68,
    "text": "might not be perfect, though you could"
  },
  {
    "start": 368.68,
    "end": 371.48,
    "text": "also definitely use it for applications like"
  },
  {
    "start": 371.48,
    "end": 371.8,
    "text": "this."
  },
  {
    "start": 371.96,
    "end": 374.58,
    "text": "Also, because as I mentioned before,"
  },
  {
    "start": 375.22,
    "end": 378.74,
    "text": "you're not limited to just using HTMX."
  },
  {
    "start": 378.8,
    "end": 381.44,
    "text": "You can use it and combine it with"
  },
  {
    "start": 381.44,
    "end": 384.24,
    "text": "vanilla JavaScript code or with some"
  },
  {
    "start": 384.24,
    "end": 385.88,
    "text": "other JavaScript library."
  },
  {
    "start": 386.04,
    "end": 387.08,
    "text": "You can do that."
  },
  {
    "start": 387.42,
    "end": 389.62,
    "text": "It's not an either-or decision."
  },
  {
    "start": 390.44,
    "end": 394.48,
    "text": "But still, I'd say HTMX shines the most if"
  },
  {
    "start": 394.48,
    "end": 397.12,
    "text": "you are building a full-stack web"
  },
  {
    "start": 397.12,
    "end": 399.14,
    "text": "application where you do own the"
  },
  {
    "start": 399.14,
    "end": 401.9,
    "text": "back-end, where you don't necessarily"
  },
  {
    "start": 401.9,
    "end": 405.74,
    "text": "have other clients like a mobile app, and"
  },
  {
    "start": 405.74,
    "end": 409.2,
    "text": "where you definitely have not"
  },
  {
    "start": 409.2,
    "end": 412.4,
    "text": "necessarily a trivial website, but also not"
  },
  {
    "start": 412.4,
    "end": 416.64,
    "text": "a website that is hyper-interactive and"
  },
  {
    "start": 416.64,
    "end": 418.8,
    "text": "that got a lot of things going on."
  },
  {
    "start": 419.06,
    "end": 421.34,
    "text": "And it turns out, at least in my"
  },
  {
    "start": 421.34,
    "end": 424.9,
    "text": "experience, that quite a few websites are"
  },
  {
    "start": 424.9,
    "end": 425.56,
    "text": "like that."
  },
  {
    "start": 425.72,
    "end": 428.12,
    "text": "They are not super complex."
  },
  {
    "start": 428.34,
    "end": 430.96,
    "text": "They don't need a super-interactive,"
  },
  {
    "start": 431.52,
    "end": 433.66,
    "text": "complex web user interface."
  },
  {
    "start": 433.74,
    "end": 435.9,
    "text": "Instead, if you're building something like"
  },
  {
    "start": 435.9,
    "end": 437.94,
    "text": "an online shop where you're essentially"
  },
  {
    "start": 437.94,
    "end": 439.96,
    "text": "fetching products, fetching product"
  },
  {
    "start": 439.96,
    "end": 443.44,
    "text": "details, updating a cart, and so on, that's"
  },
  {
    "start": 443.44,
    "end": 446.6,
    "text": "something HTMX can do really well."
  },
  {
    "start": 447.2,
    "end": 451.04,
    "text": "You don't necessarily have a UI that"
  },
  {
    "start": 451.04,
    "end": 454.34,
    "text": "needs to be powered 100% by JavaScript"
  },
  {
    "start": 454.34,
    "end": 457.52,
    "text": "or by JavaScript code you write, to be"
  },
  {
    "start": 457.52,
    "end": 458.0,
    "text": "precise."
  },
  {
    "start": 458.42,
    "end": 461.64,
    "text": "Instead, HTMX might be a great choice"
  },
  {
    "start": 461.64,
    "end": 463.8,
    "text": "in situations like that."
  },
  {
    "start": 464.2,
    "end": 466.96,
    "text": "And therefore, even if you don't plan on"
  },
  {
    "start": 466.96,
    "end": 469.36,
    "text": "taking my course, which is fine, though I,"
  },
  {
    "start": 469.48,
    "end": 471.32,
    "text": "of course, am happy if I can welcome"
  },
  {
    "start": 471.32,
    "end": 473.9,
    "text": "you there, but even if you don't do that, I"
  },
  {
    "start": 473.9,
    "end": 476.24,
    "text": "would definitely recommend that you"
  },
  {
    "start": 476.24,
    "end": 480.08,
    "text": "give HTMX a try because it really is an"
  },
  {
    "start": 480.08,
    "end": 482.62,
    "text": "amazing library, in my opinion, because"
  },
  {
    "start": 482.62,
    "end": 486.12,
    "text": "it can help you write less code, simpler"
  },
  {
    "start": 486.12,
    "end": 490.02,
    "text": "code, and build websites quicker than"
  },
  {
    "start": 490.02,
    "end": 492.74,
    "text": "you might be able to do with React or"
  },
  {
    "start": 492.74,
    "end": 493.1,
    "text": "Next."
  },
  {
    "start": 493.38,
    "end": 498.0,
    "text": "Because I think as web developers, or as"
  },
  {
    "start": 498.0,
    "end": 500.9,
    "text": "humans in general, I don't know, we"
  },
  {
    "start": 500.9,
    "end": 505.3,
    "text": "sometimes tend to use the wrong tool or"
  },
  {
    "start": 505.3,
    "end": 508.36,
    "text": "maybe not the perfect tool for a given"
  },
  {
    "start": 508.36,
    "end": 509.04,
    "text": "job."
  },
  {
    "start": 509.24,
    "end": 512.94,
    "text": "And I feel like HTMX can sometimes be"
  },
  {
    "start": 512.94,
    "end": 515.24,
    "text": "the better tool for certain kinds of"
  },
  {
    "start": 515.24,
    "end": 518.4,
    "text": "websites than React or Angular might"
  },
  {
    "start": 518.4,
    "end": 518.64,
    "text": "be."
  },
  {
    "start": 518.799,
    "end": 520.559,
    "text": "Of course, it also comes down to"
  },
  {
    "start": 520.559,
    "end": 524.0,
    "text": "personal preference, and that's why I say"
  },
  {
    "start": 524.0,
    "end": 525.66,
    "text": "that you should give it a try."
  },
  {
    "start": 525.86,
    "end": 528.04,
    "text": "You don't have to use it, but at least you"
  },
  {
    "start": 528.04,
    "end": 530.98,
    "text": "should be able to use it if you want to,"
  },
  {
    "start": 531.02,
    "end": 532.44,
    "text": "and you should know about it."
  },
  {
    "start": 532.7,
    "end": 535.62,
    "text": "And therefore, definitely have a look at it"
  },
  {
    "start": 535.62,
    "end": 536.92,
    "text": "in the internet."
  },
  {
    "start": 537.2,
    "end": 539.88,
    "text": "As always, you will find lots of opinions"
  },
  {
    "start": 539.88,
    "end": 542.8,
    "text": "on it, some pretty extreme opinions in"
  },
  {
    "start": 542.8,
    "end": 545.56,
    "text": "both directions, and well, just ignore"
  },
  {
    "start": 545.56,
    "end": 545.76,
    "text": "them."
  },
  {
    "start": 545.88,
    "end": 547.5,
    "text": "That's always the best thing to do in the"
  },
  {
    "start": 547.5,
    "end": 547.84,
    "text": "internet."
  },
  {
    "start": 548.4,
    "end": 550.58,
    "text": "Don't read what people are writing"
  },
  {
    "start": 550.58,
    "end": 552.44,
    "text": "about all these libraries and frameworks."
  },
  {
    "start": 552.88,
    "end": 556.22,
    "text": "Try to find the middle ground and just"
  },
  {
    "start": 556.22,
    "end": 557.26,
    "text": "give it a try."
  },
  {
    "start": 557.4,
    "end": 560.26,
    "text": "It's really easy to get started with it, and"
  },
  {
    "start": 560.26,
    "end": 562.66,
    "text": "with my course, I, of course, try my best"
  },
  {
    "start": 562.66,
    "end": 565.72,
    "text": "to make it as easy as possible, whilst also"
  },
  {
    "start": 565.72,
    "end": 568.62,
    "text": "diving a bit deeper into HTMX and"
  },
  {
    "start": 568.62,
    "end": 571.88,
    "text": "explaining a bit more about it and also"
  },
  {
    "start": 571.88,
    "end": 573.6,
    "text": "showing you more advanced features."
  },
  {
    "start": 573.8,
    "end": 576.7,
    "text": "But you will see, using it is really simple"
  },
  {
    "start": 576.7,
    "end": 577.26,
    "text": "in the end."
  },
  {
    "start": 577.52,
    "end": 579.6,
    "text": "In the course, we start at zero, and we"
  },
  {
    "start": 579.6,
    "end": 582.04,
    "text": "then gradually dive deeper, but you can,"
  },
  {
    "start": 582.14,
    "end": 583.96,
    "text": "of course, also take a look at the official"
  },
  {
    "start": 583.96,
    "end": 587.02,
    "text": "docs, also in addition to the course, and"
  },
  {
    "start": 587.02,
    "end": 590.8,
    "text": "who knows, maybe HTMX is also a great"
  },
  {
    "start": 590.8,
    "end": 593.06,
    "text": "choice for your next project."
  },
  {
    "start": 593.66,
    "end": 597.34,
    "text": "I'm super interested in learning what"
  },
  {
    "start": 597.34,
    "end": 600.18,
    "text": "you think about it, so please share your"
  },
  {
    "start": 600.18,
    "end": 601.66,
    "text": "opinion on HTMX."
  },
  {
    "start": 602.24,
    "end": 604.08,
    "text": "Let me know if you used it, if you like it,"
  },
  {
    "start": 604.1,
    "end": 606.32,
    "text": "what you don't like about it, maybe, and"
  },
  {
    "start": 606.32,
    "end": 609.12,
    "text": "well, maybe I also see you in the course."
  },
  {
    "start": 609.3,
    "end": 612.32,
    "text": "But even if I don't, HTMX, in my opinion,"
  },
  {
    "start": 612.44,
    "end": 614.72,
    "text": "is pretty amazing, and you also might"
  },
  {
    "start": 614.72,
    "end": 615.6,
    "text": "want to give it a try."
  }
]