Episode 3: Cloudflare Workers and Breaking 11ty

1 00:00:00,000 --> 00:00:02,580 (upbeat music) 2 00:00:02,580 --> 00:00:14,460 - Hello, welcome to Okay, What Went Wrong? 3 00:00:14,460 --> 00:00:15,340 Episode three. 4 00:00:15,340 --> 00:00:19,840 As always, I'm Michael Sean Becker and joining me 5 00:00:19,840 --> 00:00:22,160 - Is Zane Becker-Byrd, how's your day been today? 6 00:00:22,160 --> 00:00:23,440 - It has been a day. 7 00:00:23,440 --> 00:00:24,280 It's been a good day. 8 00:00:24,280 --> 00:00:25,100 How have you been? 9 00:00:25,100 --> 00:00:26,780 - That is fair. 10 00:00:26,780 --> 00:00:28,980 - No, it's been good. 11 00:00:28,980 --> 00:00:29,820 It's been good. 12 00:00:29,820 --> 00:00:31,820 Honestly, we'll get into this a little bit. 13 00:00:31,820 --> 00:00:35,980 A lot of Cloudflare and GitHub actions in the day job, 14 00:00:35,980 --> 00:00:37,620 which we'll talk about. 15 00:00:37,620 --> 00:00:40,420 I also have been dealing with a lot of Git stuff, 16 00:00:40,420 --> 00:00:43,180 not GitHub specific, but just Git in general. 17 00:00:43,180 --> 00:00:47,140 Yeah, I love that as a creative writing major, 18 00:00:47,140 --> 00:00:48,140 you're having the exact same problems 19 00:00:48,140 --> 00:00:49,820 I'm having at my tech job. 20 00:00:49,820 --> 00:00:51,260 It's just fantastic to me. 21 00:00:51,260 --> 00:00:53,180 Yeah, well, I mean, I don't use Dropbox, 22 00:00:53,180 --> 00:00:55,420 so I sync all of my projects through GitHub 23 00:00:55,420 --> 00:00:57,660 because that's what I decided I was gonna be doing 24 00:00:57,660 --> 00:00:58,500 in high school. 25 00:00:58,500 --> 00:01:00,180 choices were made. 26 00:01:00,180 --> 00:01:01,780 - Yeah, they're good choices. 27 00:01:01,780 --> 00:01:06,780 Now I don't have to worry about Google Drive Edit history. 28 00:01:06,780 --> 00:01:07,820 - Yeah. 29 00:01:07,820 --> 00:01:08,660 - Obsolete. 30 00:01:08,660 --> 00:01:11,360 We're using version control software here. 31 00:01:11,360 --> 00:01:13,780 It's going great though. 32 00:01:13,780 --> 00:01:15,500 - Good. 33 00:01:15,500 --> 00:01:16,340 - All right. 34 00:01:16,340 --> 00:01:17,580 - So you mentioned Cloud Fair Workers. 35 00:01:17,580 --> 00:01:21,540 What's the situation with that? 36 00:01:21,540 --> 00:01:23,460 - Oh yeah, no, I can kick us off this week. 37 00:01:23,460 --> 00:01:27,700 So at my day job, we are in the process of, 38 00:01:27,700 --> 00:01:33,560 We have a Gatsby cloud app that we're in the process of working on our next hosting situation. 39 00:01:33,560 --> 00:01:39,480 One of the problems with switching hosts is Gatsby cloud, well, Gatsby generates a redirect 40 00:01:39,480 --> 00:01:46,080 file that redirect file has all of our, all of our like, we call them vanity URLs where 41 00:01:46,080 --> 00:01:55,260 the, it's a short link and then redirects to UTMs. 42 00:01:55,260 --> 00:02:02,580 But one of the things that we are needing to work through is getting those vanity URLs 43 00:02:02,580 --> 00:02:07,560 pointed because there's a cap inside Cloudflare pages on how many they'll take. 44 00:02:07,560 --> 00:02:10,960 They'll take like 2,000 and we have like 42,000. 45 00:02:10,960 --> 00:02:13,140 So there's a big discrepancy there. 46 00:02:13,140 --> 00:02:19,420 So what the current plan is, is to use KV store, which is a key value store inside of 47 00:02:19,420 --> 00:02:22,780 of Cloudflare pages, Cloudflare workers, excuse me, 48 00:02:22,780 --> 00:02:25,900 that will then do a lookup before it even gets 49 00:02:25,900 --> 00:02:26,740 to the website. 50 00:02:26,740 --> 00:02:27,920 There's two things that this is gonna accomplish. 51 00:02:27,920 --> 00:02:30,580 One, it's going to pull out all of our redirects 52 00:02:30,580 --> 00:02:31,420 from the site. 53 00:02:31,420 --> 00:02:36,420 So if like 42,000 line file that we're no longer 54 00:02:36,420 --> 00:02:38,080 gonna have to generate when we're doing 55 00:02:38,080 --> 00:02:39,580 a static site generation. 56 00:02:39,580 --> 00:02:42,700 So that's gonna cut down on build time. 57 00:02:42,700 --> 00:02:44,740 But the other thing it's gonna do is it's going to allow us 58 00:02:44,740 --> 00:02:47,860 to not have to rebuild the site if somebody updates 59 00:02:47,860 --> 00:02:49,140 one of these redirects. 60 00:02:49,140 --> 00:02:52,760 So there's a lot of positive things that come out of this, but I've never used 61 00:02:52,760 --> 00:02:56,100 CloudFlare workers before, so I'm having to learn how to do this. 62 00:02:56,100 --> 00:03:00,600 And on Friday, one of my coworkers, um, and I kind of like slammed our head 63 00:03:00,600 --> 00:03:03,720 against a wall, trying to get a local environment set up because you're 64 00:03:03,720 --> 00:03:09,040 talking about functions that exist on the edge, like out at a serverless instant 65 00:03:09,040 --> 00:03:13,180 instance, and serverless is basically just somebody else's computer that 66 00:03:13,180 --> 00:03:14,780 you don't control any of the pieces of. 67 00:03:14,780 --> 00:03:16,680 Yeah. 68 00:03:16,680 --> 00:03:17,240 And yeah, 69 00:03:17,240 --> 00:03:19,520 It's not that there's no server, it's just not your server. 70 00:03:19,520 --> 00:03:19,960 Correct. 71 00:03:19,960 --> 00:03:20,160 Yeah. 72 00:03:20,160 --> 00:03:25,480 You're, you're basically just renting almost, uh, what you use time. 73 00:03:25,480 --> 00:03:29,520 And, but getting a local environment set up for that when like the 74 00:03:29,520 --> 00:03:32,720 runtime doesn't matter and like how it's containerized doesn't matter. 75 00:03:32,720 --> 00:03:33,920 It's just the function. 76 00:03:33,920 --> 00:03:38,120 And especially when it's based on a trigger where it's like, go to the 77 00:03:38,120 --> 00:03:41,480 website, do this thing, figuring out how to make that work. 78 00:03:41,480 --> 00:03:42,880 And our read me was a little bit out of date. 79 00:03:42,880 --> 00:03:46,080 So it just took a little bit of time to kind of like sort through that. 80 00:03:46,520 --> 00:03:49,860 And once we got that done, once he got that done, 81 00:03:49,860 --> 00:03:53,200 I completely benefited from all the work that he did. 82 00:03:53,200 --> 00:03:54,360 We now have a local environment. 83 00:03:54,360 --> 00:03:55,680 So I can start this process. 84 00:03:55,680 --> 00:03:57,300 But one of the things that we're having to do 85 00:03:57,300 --> 00:04:02,100 is I'm manually having to update this one file right now. 86 00:04:02,100 --> 00:04:04,040 Because one of the problems that you have in Gatsby 87 00:04:04,040 --> 00:04:08,900 is if you have a query parameter on a string, on a URL, 88 00:04:08,900 --> 00:04:11,640 and you redirect, it will do one of two things. 89 00:04:11,640 --> 00:04:13,720 It will see the query parameter 90 00:04:13,720 --> 00:04:16,340 and do just take you to that query parameter 91 00:04:16,340 --> 00:04:20,300 and not actually execute the additional query parameter redirect, or it just won't work. 92 00:04:20,300 --> 00:04:27,500 So like an Instagram where a lot of social media stuff happens, tax on this 93 00:04:27,500 --> 00:04:34,220 thing called FBC ID, which is a Facebook click ID that breaks our redirects. 94 00:04:34,220 --> 00:04:36,020 And we discovered that back like in November. 95 00:04:36,020 --> 00:04:38,460 So we're still just trying to unwind all of this stuff. 96 00:04:38,460 --> 00:04:41,420 And the cloud filler worker is the right way to go about doing this. 97 00:04:41,500 --> 00:04:46,680 And the other thing is it opens up so many new ways that you can work with static 98 00:04:46,680 --> 00:04:50,380 sites, because I'm not sure if you've looked into Cloudflow workers yet. 99 00:04:50,380 --> 00:04:53,800 I have, I don't understand it. 100 00:04:53,800 --> 00:04:55,920 This is perfect. 101 00:04:55,920 --> 00:04:59,440 Cause like I did not understand it either, but basically if you think of it this way, 102 00:04:59,440 --> 00:05:04,780 it is a function that runs off of triggers on your website. 103 00:05:04,780 --> 00:05:06,640 That can be a number of things. 104 00:05:06,640 --> 00:05:09,840 You can call it directly as if you were calling an API endpoint. 105 00:05:09,840 --> 00:05:11,020 They call those web hooks. 106 00:05:11,020 --> 00:05:15,120 You can set it up so it triggers off of an event. 107 00:05:15,120 --> 00:05:19,360 Like I go to a URL, it fires this function and then basically you get that, 108 00:05:19,360 --> 00:05:21,600 of that event fed into the function. 109 00:05:21,600 --> 00:05:23,120 And then you can do things based on that. 110 00:05:23,120 --> 00:05:26,400 So you can basically do a comparison being like, if this string exists, 111 00:05:26,400 --> 00:05:27,960 then do this thing. 112 00:05:27,960 --> 00:05:32,080 We just set up the microbin and in the same way that that now has 113 00:05:32,080 --> 00:05:35,340 redirects on short codes, you basically can set that up in a key value 114 00:05:35,340 --> 00:05:36,760 store inside of cloud flare. 115 00:05:36,760 --> 00:05:40,540 And at the free tier, you can do a lot with it. 116 00:05:40,540 --> 00:05:41,540 Yes. 117 00:05:41,540 --> 00:05:47,780 So, if you think about those functions in terms of, you know when, like you're taking 118 00:05:47,780 --> 00:05:51,300 computer science, a function is called by something. 119 00:05:51,300 --> 00:05:52,740 Yeah, yeah. 120 00:05:52,740 --> 00:06:01,060 So the thing that is calling the function is either a web event, a trigger on a URL, 121 00:06:01,060 --> 00:06:02,900 or a, well, actually it's the same. 122 00:06:02,900 --> 00:06:06,740 It's just that the routing to that URL is directly to the function and then does not 123 00:06:06,740 --> 00:06:08,460 return a web page. 124 00:06:08,460 --> 00:06:11,980 But Cloudflare workers can actually step in as you're rendering a page. 125 00:06:11,980 --> 00:06:14,980 So let's say zane beckerberg.com, your website. 126 00:06:14,980 --> 00:06:19,820 You write a Cloudflare worker that goes, if you're coming from the UK, like if your geolocation 127 00:06:19,820 --> 00:06:25,820 is the UK, redirect to this other, or like in Cloudflare workers, you can actually say, 128 00:06:25,820 --> 00:06:30,500 okay, go get this HTML snippet out of the key value store and stick it in the header 129 00:06:30,500 --> 00:06:32,320 of the website. 130 00:06:32,320 --> 00:06:37,560 So you can, from a static site perspective, you can alter what you are sending to the 131 00:06:37,560 --> 00:06:42,880 browser without actually having to run a server because you are using Cloudflare's infrastructure 132 00:06:42,880 --> 00:06:47,800 to do so. 133 00:06:47,800 --> 00:06:50,600 So it's just programming? 134 00:06:50,600 --> 00:06:51,600 It is. 135 00:06:51,600 --> 00:06:52,600 It is. 136 00:06:52,600 --> 00:06:55,320 It's just your writing functions and the calling functions. 137 00:06:55,320 --> 00:06:58,400 Well, that's what this all basically boils down to. 138 00:06:58,400 --> 00:07:03,600 But if you take the, if you think about a computer or like your phone and it has a runtime 139 00:07:03,600 --> 00:07:09,240 and it like software operates in it, I've felt this way for a long time, but the web 140 00:07:09,240 --> 00:07:11,300 is a platform in and of itself. 141 00:07:11,300 --> 00:07:12,300 Yes. 142 00:07:12,300 --> 00:07:18,000 The way we trigger functions is by calling URLs and functions will either return a human 143 00:07:18,000 --> 00:07:23,920 readable website or machine readable objects or like a combination of two, like a Jason 144 00:07:23,920 --> 00:07:29,920 object is kind of human readable, but it's really designed for consumption by a machine. 145 00:07:29,920 --> 00:07:31,960 It's not in binary. 146 00:07:31,960 --> 00:07:35,160 As a noted human, I would beg to differ on the JSON thing. 147 00:07:35,160 --> 00:07:36,160 That's fair. 148 00:07:36,160 --> 00:07:37,160 That's fair. 149 00:07:37,160 --> 00:07:38,160 XML is human readable. 150 00:07:38,160 --> 00:07:39,160 JSON is terrifying. 151 00:07:39,160 --> 00:07:40,160 Yes. 152 00:07:40,160 --> 00:07:41,160 JSON is just... 153 00:07:41,160 --> 00:07:47,880 I think this is someone who works with JSON files quite a bit in my spare time, trying 154 00:07:47,880 --> 00:07:50,360 to get everything into XML. 155 00:07:50,360 --> 00:07:51,360 Yeah. 156 00:07:51,360 --> 00:07:53,040 If you think about the way all of those applications 157 00:07:53,040 --> 00:07:56,100 and functions work, all they are doing is calling. 158 00:07:56,100 --> 00:08:00,940 So the web is just the transport mechanism to do that. 159 00:08:00,940 --> 00:08:05,160 And the activator is these universal resource locator. 160 00:08:05,160 --> 00:08:09,180 You are literally locating a resource on the internet 161 00:08:09,180 --> 00:08:11,160 that you're asking for a response from 162 00:08:11,160 --> 00:08:14,000 by passing it parameters, which is just a function. 163 00:08:19,840 --> 00:08:21,200 - Yeah, the way you're describing it 164 00:08:21,200 --> 00:08:23,240 sounds very intuitive. 165 00:08:23,240 --> 00:08:25,080 - If you break it down and don't think about it 166 00:08:25,080 --> 00:08:26,920 in terms of web pages, 167 00:08:26,920 --> 00:08:29,440 you start to wrap your head around it in a different way. 168 00:08:29,440 --> 00:08:32,400 And that's when phone development makes more sense, 169 00:08:32,400 --> 00:08:35,620 because all phones are doing is they're fetching data 170 00:08:35,620 --> 00:08:38,760 from an external endpoint that then does a bunch of stuff 171 00:08:38,760 --> 00:08:42,800 and returns formatted data that the client on your end 172 00:08:42,800 --> 00:08:45,240 then takes and sticks into fields. 173 00:08:45,240 --> 00:08:47,400 That's it, that's all these things are doing. 174 00:08:48,560 --> 00:08:51,060 All of this hubbub, all the billions of dollars 175 00:08:51,060 --> 00:08:53,020 is like text into form fields. 176 00:08:53,020 --> 00:08:54,460 That's it, that's all it is. 177 00:08:54,460 --> 00:09:00,540 - I guess probably a good thing to ask is like, 178 00:09:00,540 --> 00:09:03,380 so how do you write the functions for Cloudflare? 179 00:09:03,380 --> 00:09:05,860 I guess probably a good starting point would be like, 180 00:09:05,860 --> 00:09:07,500 what language do you need to know? 181 00:09:07,500 --> 00:09:10,180 - You're about to love the answer here. 182 00:09:10,180 --> 00:09:12,260 There's two languages it supports. 183 00:09:12,260 --> 00:09:13,300 Guess the first one. 184 00:09:13,300 --> 00:09:15,420 - JavaScript. - That's correct. 185 00:09:15,420 --> 00:09:16,560 Guess the second one. 186 00:09:17,980 --> 00:09:18,820 - Yeah, that's true. 187 00:09:18,820 --> 00:09:20,320 - I'm just making sure that that's true. 188 00:09:20,320 --> 00:09:21,820 I'm pretty sure that's true. 189 00:09:21,820 --> 00:09:24,140 Yeah, native Rust support on Cloudflare workers, 190 00:09:24,140 --> 00:09:26,380 phew, I am saying from that. 191 00:09:26,380 --> 00:09:27,540 - That's really cool. 192 00:09:27,540 --> 00:09:29,460 - Yeah, so if you ever wanna, 193 00:09:29,460 --> 00:09:32,820 if someone wants to back door Rust into their infrastructure, 194 00:09:32,820 --> 00:09:33,660 Cloudflare workers, 195 00:09:33,660 --> 00:09:35,140 you can go to the Cloudflare workers 196 00:09:35,140 --> 00:09:36,980 and you can go to the Cloudflare workers. 197 00:09:36,980 --> 00:09:38,980 - Yeah, and then you can go to the Cloudflare workers. 198 00:09:38,980 --> 00:09:40,980 - Yeah, and then you can go to the Cloudflare workers. 199 00:09:40,980 --> 00:09:42,980 - Yeah, and then you can go to the Cloudflare workers. 200 00:09:42,980 --> 00:09:44,980 - Yeah, and then you can go to the Cloudflare workers. 201 00:09:44,980 --> 00:09:46,980 - Yeah, and then you can go to the Cloudflare workers. 202 00:09:46,980 --> 00:09:49,660 infrastructure, Cloudflare workers, because no one will know what they're doing. 203 00:09:49,660 --> 00:09:54,020 Um, it is one of the, one of the issues in looking at like software 204 00:09:54,020 --> 00:09:57,740 development and trying to figure out, okay, how do we architect this so that 205 00:09:57,740 --> 00:10:02,500 we can expand and we have an understanding of exactly what our systems look like. 206 00:10:02,500 --> 00:10:06,260 The only issue with Cloudflare workers is they kind of exist outside of your 207 00:10:06,260 --> 00:10:08,420 system where they can, if you're not careful about it. 208 00:10:08,420 --> 00:10:08,700 It's. 209 00:10:08,700 --> 00:10:12,420 It's like kind of a black box. 210 00:10:12,460 --> 00:10:17,460 It's not like a pure black box, but it's like a gray box. 211 00:10:17,460 --> 00:10:18,220 It's it. 212 00:10:18,220 --> 00:10:20,700 And the thing is, it's not intuitive to know that it's there, 213 00:10:20,700 --> 00:10:23,100 especially when it steps in on other requests. 214 00:10:23,100 --> 00:10:28,200 This is where like marketing scripts, a Google tag manager. 215 00:10:28,200 --> 00:10:29,900 I don't know if you're familiar with these at all. 216 00:10:29,900 --> 00:10:33,780 Basically what they do is they are systems that set up to inject. 217 00:10:33,780 --> 00:10:37,900 JavaScript into your website from third parties. 218 00:10:37,900 --> 00:10:39,420 Sounds great. 219 00:10:40,140 --> 00:10:44,780 The problem is you are injecting JavaScript from other companies on your website that 220 00:10:44,780 --> 00:10:45,780 you don't have control over. 221 00:10:45,780 --> 00:10:46,420 Yeah. 222 00:10:46,420 --> 00:10:51,100 Typically when someone says the phrase is web development and injection, you're 223 00:10:51,100 --> 00:10:54,580 talking about a security vulnerability or a SQL bug. 224 00:10:54,580 --> 00:10:57,700 That is, as you get more into the internet, you will discover that most of what we 225 00:10:57,700 --> 00:11:01,180 built on top of were bugs in the system that we exploited without question. 226 00:11:01,180 --> 00:11:03,700 And JavaScript. 227 00:11:03,700 --> 00:11:07,900 And also, I mean, I was just lumping JavaScript in security vulnerability that 228 00:11:07,900 --> 00:11:09,940 we did not intend for it to be the way that it was. 229 00:11:09,940 --> 00:11:15,320 But yeah, but the thing about Cloudflare workers that you have to be careful of is like, let's 230 00:11:15,320 --> 00:11:20,220 say yours and mine sites that we're working on, which we're going to talk about in a minute. 231 00:11:20,220 --> 00:11:26,100 The idea that you have a common guys, that's a tease. 232 00:11:26,100 --> 00:11:31,900 The way that static site generation works, you can create those pages and then intercept 233 00:11:31,900 --> 00:11:33,420 those calls and add things. 234 00:11:33,420 --> 00:11:38,260 So if you take like our podcast feed, for example, let's say we did not add the value 235 00:11:38,260 --> 00:11:41,200 block at time of publish. 236 00:11:41,200 --> 00:11:44,740 What you could do is set up a Cloudflare worker, and this is actually the way the podcast index 237 00:11:44,740 --> 00:11:45,740 works. 238 00:11:45,740 --> 00:11:53,020 It steps in before it delivers that RSS feed to a client and injects code into it to be 239 00:11:53,020 --> 00:11:57,300 like, "Oh, here's the value block that was not included." 240 00:11:57,300 --> 00:12:01,380 So it allows you to do dynamic things on static files. 241 00:12:01,380 --> 00:12:02,380 Yeah. 242 00:12:02,380 --> 00:12:10,580 See, I'm the type of person who at that point I would probably just spring for a server. 243 00:12:10,580 --> 00:12:14,420 Because I don't know if that's just because I'm what I'm used to or... 244 00:12:14,420 --> 00:12:18,940 Yeah, and I mean, you and I are in an interesting situation where we have built out our own 245 00:12:18,940 --> 00:12:24,180 infrastructure be it our home lab of Raspberry Pi clouds that has Docker on it so we can 246 00:12:24,180 --> 00:12:25,920 deploy pretty much anything. 247 00:12:25,920 --> 00:12:29,940 We have the Oracle Cloud instance that we can have Docker on and we can basically deploy 248 00:12:29,940 --> 00:12:30,940 anything. 249 00:12:30,940 --> 00:12:33,520 like low cost or free instances. 250 00:12:33,520 --> 00:12:36,540 One of the things that we're talking about at work is the 251 00:12:36,540 --> 00:12:42,540 idea that when you have a large website managing that and not 252 00:12:42,540 --> 00:12:46,460 having to have the infrastructure to support, it is much easier to 253 00:12:46,460 --> 00:12:50,060 create a JavaScript HTML CSS page and cash the crap out of it at 254 00:12:50,060 --> 00:12:54,620 the edge on cloud flare than it is to run a load balanced stat, 255 00:12:54,620 --> 00:12:56,740 a server generated page server. 256 00:12:56,740 --> 00:13:00,340 There's so many more issue vectors that you can have. 257 00:13:00,820 --> 00:13:04,620 beyond just like, yes, there are with JavaScript, but like you're, you're now 258 00:13:04,620 --> 00:13:06,940 introducing another layer of complexity. 259 00:13:06,940 --> 00:13:10,860 So it's, it's separations of concerns and layer of complexities and how you 260 00:13:10,860 --> 00:13:15,340 break those into smaller chunks so that they are easily maintained and 261 00:13:15,340 --> 00:13:16,420 supportable on the call. 262 00:13:16,420 --> 00:13:17,740 Yeah. 263 00:13:17,740 --> 00:13:22,740 I think, I think probably what it comes down to with a lot of this type of stuff. 264 00:13:22,740 --> 00:13:27,580 Uh, Cloud for workers, static site versus dynamic. 265 00:13:27,580 --> 00:13:30,460 It's how complex you want to be able to do something. 266 00:13:30,460 --> 00:13:31,980 Mm hmm. 267 00:13:31,980 --> 00:13:36,140 Because if you want like an entire if you want an entirely dynamic site, 268 00:13:36,140 --> 00:13:42,260 static sites aren't good for you, which which sounds really obvious. Right. 269 00:13:42,260 --> 00:13:47,740 But but of course, like the complexity comes at the 270 00:13:47,740 --> 00:13:50,060 in between those two. 271 00:13:50,060 --> 00:13:54,620 Yeah, like complexity allows for you're able to do more things, 272 00:13:54,620 --> 00:13:55,780 but then you have to support that. 273 00:13:55,780 --> 00:13:58,380 And that's that's the trade. Yeah. 274 00:13:58,380 --> 00:14:01,500 Complexity is great if you want to be complex. 275 00:14:01,500 --> 00:14:03,100 Correct. It. 276 00:14:03,100 --> 00:14:05,020 However, it is more complex. 277 00:14:05,020 --> 00:14:08,640 So you have to do you have to support that complexity. Mm hmm. Yeah. 278 00:14:08,640 --> 00:14:13,180 Basically, we're just saying the same thing over and over again. 279 00:14:13,180 --> 00:14:16,640 You can you can tell it's late. 280 00:14:16,640 --> 00:14:19,980 Before we move on to the next section, I do want to kind of put out there. 281 00:14:19,980 --> 00:14:22,180 I think one of the things I'd like to see us start doing 282 00:14:22,180 --> 00:14:24,940 is doing some promotion for the show specifically. 283 00:14:25,840 --> 00:14:31,280 Yes. I found a couple of products that allow us to take clips and have like text and then 284 00:14:31,280 --> 00:14:35,800 it will do an audio waveform so that we can post those to Instagram. I know we are both 285 00:14:35,800 --> 00:14:39,680 very much Fedverse, open source, all that stuff. I want to leverage. 286 00:14:39,680 --> 00:14:43,360 I think I still have an Instagram account. What I want to do is kind of leverage that 287 00:14:43,360 --> 00:14:48,320 and see what we can do. Because this is a value for value podcast. I want people to 288 00:14:48,320 --> 00:14:53,080 be getting things from the information we're talking about. I have sent this to a couple 289 00:14:53,080 --> 00:14:54,240 people and they're like, wow, that was great. 290 00:14:54,240 --> 00:14:55,560 I had no idea what you were talking about. 291 00:14:55,560 --> 00:14:57,960 I'm like, you are probably not the audience for the show. 292 00:14:57,960 --> 00:15:00,000 Um, but that's fair. 293 00:15:00,000 --> 00:15:03,200 Uh, so yeah, so I want to start doing some promotion on that. 294 00:15:03,200 --> 00:15:08,560 Um, I posted this on my mass on account that we were go, that we're, uh, recording today. 295 00:15:08,560 --> 00:15:13,400 I also want to play around with the live item tag where we could actually broadcast live 296 00:15:13,400 --> 00:15:14,400 potentially. 297 00:15:14,400 --> 00:15:19,360 Um, if for no other reason, then I want to experiment with that and see how it works. 298 00:15:19,360 --> 00:15:20,640 Like that's what the show is for me. 299 00:15:20,640 --> 00:15:22,800 It's just like, Ooh, something to play with. 300 00:15:22,800 --> 00:15:26,120 Just as a warning for anyone in the future 301 00:15:26,120 --> 00:15:29,080 who is listening to a live show, 302 00:15:29,080 --> 00:15:30,880 there will be technical difficulties. 303 00:15:30,880 --> 00:15:32,840 - That's the fun of a live show. 304 00:15:32,840 --> 00:15:34,160 (laughing) 305 00:15:34,160 --> 00:15:35,000 - You're correct. 306 00:15:35,000 --> 00:15:36,040 - That's correct. 307 00:15:36,040 --> 00:15:39,880 - Cool, so yeah, those are all the things I had on my list. 308 00:15:39,880 --> 00:15:41,480 What's on your show notes today? 309 00:15:41,480 --> 00:15:46,720 - I'm doing my best not to groan into the microphone 310 00:15:46,720 --> 00:15:48,040 'cause I know that sounds terrible. 311 00:15:48,040 --> 00:15:48,880 - Please don't do that. 312 00:15:48,880 --> 00:15:51,840 - But yes, noted, acknowledged, and seen. 313 00:15:52,720 --> 00:15:55,160 I would like to verbally express my frustration. 314 00:15:55,160 --> 00:15:58,760 Now, let's get into it. 315 00:15:58,760 --> 00:16:00,460 My site broke. 316 00:16:00,460 --> 00:16:06,200 My my site broke and I don't know why. 317 00:16:06,200 --> 00:16:09,600 You still don't know why I tried debugging it. 318 00:16:09,600 --> 00:16:14,600 It was it while I was while I was finishing up the. 319 00:16:14,600 --> 00:16:21,140 CSS configurations, the the 11D RSS plugin. 320 00:16:21,140 --> 00:16:24,640 started throwing errors. 321 00:16:24,640 --> 00:16:26,680 And I still don't know why. 322 00:16:26,680 --> 00:16:30,180 And the reason I don't know why is because I reinstalled the levity. 323 00:16:30,180 --> 00:16:32,740 You broke my content. 324 00:16:32,740 --> 00:16:34,580 That is, and by the way, that config. 325 00:16:34,580 --> 00:16:35,720 That is a rite of passage. 326 00:16:35,720 --> 00:16:37,880 You have broken production. Congratulations. Yeah. 327 00:16:37,880 --> 00:16:41,380 So everything's working again. 328 00:16:41,380 --> 00:16:43,180 You turned it off and on again, didn't you? 329 00:16:43,180 --> 00:16:46,320 Yeah. The one issue I had with that, 330 00:16:46,320 --> 00:16:49,080 it was a flawless situation. 331 00:16:49,080 --> 00:16:53,000 Except between me making the initial install of it, 332 00:16:53,000 --> 00:16:56,200 levity and the current levity version, 333 00:16:56,200 --> 00:16:59,000 they removed. 334 00:16:59,000 --> 00:17:02,880 So many node modules. 335 00:17:02,880 --> 00:17:04,400 Yeah, it's amazing. 336 00:17:04,400 --> 00:17:06,720 I. So. 337 00:17:06,720 --> 00:17:11,080 But I still kept the same get repository. 338 00:17:11,080 --> 00:17:14,760 So they were all still logged in the get repository. 339 00:17:14,760 --> 00:17:17,800 So then I had to learn some new get commands. 340 00:17:17,800 --> 00:17:20,240 You checked in your node module directory, didn't you? 341 00:17:20,240 --> 00:17:22,120 I did. Yeah, I did. 342 00:17:22,120 --> 00:17:24,160 You want to get ignore your node module directory. 343 00:17:24,160 --> 00:17:28,840 Yeah, I wasn't sure whether Cloudflare needed me to do that or not. 344 00:17:28,840 --> 00:17:33,600 So the build process in Cloudflare pages will build that and then upload. 345 00:17:33,600 --> 00:17:36,000 So there's two ways to look at this. 346 00:17:36,000 --> 00:17:37,320 One is to copy. 347 00:17:37,320 --> 00:17:42,360 Like if you want to use GitHub as a just like launch mechanism 348 00:17:42,360 --> 00:17:47,000 where you like it builds in stores and then you copy that distribution out. 349 00:17:47,680 --> 00:17:50,800 Great. If you want to check in your distribution, basically, you can do that. 350 00:17:50,800 --> 00:17:51,120 Yeah. 351 00:17:51,120 --> 00:17:55,600 But the thing about checking in node modules is you just discover the problem. 352 00:17:55,600 --> 00:18:01,000 When you put those into git history, what you are basically doing is then you have to manage them. 353 00:18:01,000 --> 00:18:04,920 And those are derivable assets. 354 00:18:04,920 --> 00:18:09,680 So like the package JSON file is the recipe to build out node modules. 355 00:18:09,680 --> 00:18:14,240 So you don't need to include it because you have the recipe to rebuild it at any point. 356 00:18:14,800 --> 00:18:20,160 Yeah, the basically as far as I see it, the pros and cons are is if you check everything 357 00:18:20,160 --> 00:18:24,360 into your get repository, your builds are very deterministic. 358 00:18:24,360 --> 00:18:24,960 Sure. 359 00:18:24,960 --> 00:18:31,440 They will always compile if it compiles locally, it will compile when you push it. 360 00:18:31,440 --> 00:18:35,960 And if somebody deletes a node module from the node repository like the node. 361 00:18:35,960 --> 00:18:38,840 Oh, Lord, I forgot the word of it. 362 00:18:38,840 --> 00:18:42,200 If you delete it from the node repository, it's not the get repository. 363 00:18:42,200 --> 00:18:44,160 It's not the package. 364 00:18:44,160 --> 00:18:46,800 Yeah, from the package library. 365 00:18:46,800 --> 00:18:48,460 Okay, that's just fantastic. 366 00:18:48,460 --> 00:18:52,960 - I use Python, Rust, and LISPS, 367 00:18:52,960 --> 00:18:55,240 so I barely know what I'm talking about here. 368 00:18:55,240 --> 00:18:56,080 - That's fair. 369 00:18:56,080 --> 00:18:59,540 But if you delete it, if someone was to remove, 370 00:18:59,540 --> 00:19:05,920 if someone was to remove the package from the, 371 00:19:05,920 --> 00:19:10,280 from your registry, that's what it is, package registry. 372 00:19:10,280 --> 00:19:12,280 Wow, it's the end of the day. 373 00:19:12,280 --> 00:19:15,500 If someone was removed package registry, then you couldn't install your site. 374 00:19:15,500 --> 00:19:19,000 Do you know the story about this about a pad left? 375 00:19:19,000 --> 00:19:20,320 I think it was pad left. 376 00:19:20,320 --> 00:19:21,560 Um, I do not. 377 00:19:21,560 --> 00:19:32,000 There was a, um, JavaScript, uh, library that, um, everyone used. 378 00:19:32,000 --> 00:19:38,000 And it basically did padding and the guy got really frustrated and he deleted 379 00:19:38,000 --> 00:19:44,500 it and like tons of stuff, stop building because it no longer existed, which is why there's 380 00:19:44,500 --> 00:19:46,140 a couple of different ways that you can manage this. 381 00:19:46,140 --> 00:19:52,940 You can either set up your own, um, cache of those packages so that you can install 382 00:19:52,940 --> 00:19:53,940 from yours. 383 00:19:53,940 --> 00:19:57,960 That's what we do with our Docker containers on our local network is we cache a Docker 384 00:19:57,960 --> 00:20:01,160 container just in case it gets deleted upstream. 385 00:20:01,160 --> 00:20:02,160 We still have access to it. 386 00:20:02,160 --> 00:20:03,160 Yeah. 387 00:20:03,160 --> 00:20:04,160 And then you can fork it. 388 00:20:04,160 --> 00:20:05,640 Yes, exactly. 389 00:20:05,640 --> 00:20:10,120 you can do what you did and check in your node module directory. Yeah, it it worked. 390 00:20:10,120 --> 00:20:18,160 It worked wonderfully until I sent you a screenshot or something. I think it was 82,000 lines of 391 00:20:18,160 --> 00:20:25,760 code were gone. Yeah, which props to the 11D team for producing that amount of dependencies. 392 00:20:25,760 --> 00:20:34,400 Yeah. However, I did have to learn the get get add dash u command, which updates it to 393 00:20:34,400 --> 00:20:37,160 the working directory. I don't regret anything. 394 00:20:37,160 --> 00:20:43,020 No, this is a great learning, except for the nine commits of just me manually 395 00:20:43,020 --> 00:20:46,280 doing the things until I realized someone's done this before. 396 00:20:46,280 --> 00:20:48,320 There's probably a built in command. 397 00:20:48,320 --> 00:20:50,480 And then I spent 30 minutes Googling. 398 00:20:50,480 --> 00:20:56,240 Uh, I spent more time trying to find the command than doing it the tedious way, 399 00:20:56,240 --> 00:20:58,340 which is just how this works. 400 00:20:58,340 --> 00:21:02,060 Uh, but then I, this literally described my job. 401 00:21:02,060 --> 00:21:03,820 That's all you've described right there. 402 00:21:03,820 --> 00:21:10,940 Yes, I. But yeah, it was it was a nightmare, but everything's working now. 403 00:21:10,940 --> 00:21:15,540 Once again, this started because a plug in broke and I had no idea why. 404 00:21:15,540 --> 00:21:19,300 I have to say I'm more and more impressed by 11 day. 405 00:21:19,300 --> 00:21:23,220 One of the there was a post on Mastodon this last week 406 00:21:23,220 --> 00:21:26,420 where they were showing how much JavaScript is required 407 00:21:26,420 --> 00:21:28,940 on a bunch of these different frameworks. 408 00:21:28,940 --> 00:21:30,780 And it was like Gatsby, Next. 409 00:21:30,780 --> 00:21:33,060 J. Jess. And they all had like JavaScript on them. 410 00:21:33,340 --> 00:21:37,860 And it was like 11 D and Astro and like they require zero render 411 00:21:37,860 --> 00:21:43,540 JavaScript in the browser to work because they default to HTML and CSS. 412 00:21:43,540 --> 00:21:46,320 And I did a conversation about this today. 413 00:21:46,320 --> 00:21:49,940 That is really the direction personally that I'm trying to go. 414 00:21:49,940 --> 00:21:53,820 Strip things down as simply as possible and then build on top of it. 415 00:21:53,820 --> 00:22:00,660 And I say that because for years, years and years and years, I relied very 416 00:22:00,660 --> 00:22:04,620 heavily on very large frameworks to do things. 417 00:22:04,620 --> 00:22:09,060 And it put me in a situation where I became overly dependent on those frameworks. 418 00:22:09,060 --> 00:22:15,620 And I kind of lost the plot on how to do this stuff from a very basic baseline level. 419 00:22:15,620 --> 00:22:19,620 And if you're not building on the fundamentals, you're abstracting things away. 420 00:22:19,620 --> 00:22:25,020 And as far away as they get abstracted, you start to not have like it, you start 421 00:22:25,020 --> 00:22:27,140 to lose the understanding of how things work. 422 00:22:27,140 --> 00:22:28,900 It's why I'm doing all the home web stuff. 423 00:22:28,900 --> 00:22:31,900 Yeah, I am. 424 00:22:31,900 --> 00:22:36,700 The 11 D lack of HTML is really help. 425 00:22:36,700 --> 00:22:40,260 I'm sorry, that was the wrong sentence. 426 00:22:40,260 --> 00:22:42,660 The 11 D lack of JavaScript. Cool. 427 00:22:42,660 --> 00:22:48,540 No lack of lack of HTML is a different. 428 00:22:48,540 --> 00:22:49,540 Then it's nothing. 429 00:22:49,540 --> 00:22:52,060 Then it's just text files. 430 00:22:52,060 --> 00:22:55,260 Yeah, or it's or it's entirely JavaScript rendering the site. 431 00:22:55,260 --> 00:22:58,220 It's a dynamic site rendering on the client side, 432 00:22:58,340 --> 00:23:00,600 Which is a wonderful recipe for things not working. 433 00:23:00,600 --> 00:23:03,440 It's all shadowed down at that point. 434 00:23:03,440 --> 00:23:05,940 But the lack of JavaScript in the rendered 435 00:23:05,940 --> 00:23:13,200 Alepni output is it is very useful to understand. 436 00:23:13,200 --> 00:23:16,100 Like you have like an input and then you have an output. 437 00:23:16,100 --> 00:23:21,900 I like that because that allows me to actually know what my site is going to do. 438 00:23:24,900 --> 00:23:26,900 CSS, HTML. 439 00:23:26,900 --> 00:23:35,700 That for most things, most websites, that is all you need. 440 00:23:35,700 --> 00:23:39,540 And then there's everything else which you have. 441 00:23:39,540 --> 00:23:43,620 PHP, JavaScript, yada, yada, yada. 442 00:23:43,620 --> 00:23:49,940 But I feel like if you're able to make a working site for what you want with 443 00:23:50,620 --> 00:23:54,940 HTML and CSS, that should be what you that should be what you do first 444 00:23:54,940 --> 00:23:58,540 and then add all of the scripting and. 445 00:23:58,540 --> 00:24:03,980 Stuff on top of that, because if you don't have that foundation, 446 00:24:03,980 --> 00:24:09,740 you you don't have a site, you have you have a you have a new gizmo. 447 00:24:09,740 --> 00:24:16,940 I mean, there are exceptions, like say you're making like a browser game in 448 00:24:16,940 --> 00:24:20,260 that you've compiled down to WebAssembly. 449 00:24:20,260 --> 00:24:22,260 I don't think you should need to. 450 00:24:22,260 --> 00:24:26,860 I don't think you should need to write the game in HTML 451 00:24:26,860 --> 00:24:30,060 before you before you can make the game. Yeah. 452 00:24:30,060 --> 00:24:33,500 But but stuff like a blog is good to. 453 00:24:33,500 --> 00:24:38,200 It's good to know what you're making before you make it. 454 00:24:38,200 --> 00:24:40,900 Super complex. 455 00:24:40,900 --> 00:24:41,540 Absolutely. 456 00:24:41,540 --> 00:24:42,800 Basically the thing. 457 00:24:42,800 --> 00:24:47,040 And I mean, both of us are working with 11 day now. 458 00:24:47,040 --> 00:24:50,140 And like the baseline of that is Markdown files. 459 00:24:50,140 --> 00:24:54,140 and a template that renders out an HTML page. 460 00:24:54,140 --> 00:24:59,140 I am in the process of looking at something, 461 00:24:59,140 --> 00:25:02,140 trying to figure out, trying to see if I can find, 462 00:25:02,140 --> 00:25:05,140 they've just, it is going to be moving. 463 00:25:05,140 --> 00:25:07,140 Right now it's called Netlify CMS. 464 00:25:07,140 --> 00:25:08,140 Oh no, it's Decap. 465 00:25:08,140 --> 00:25:09,140 Decap CMS. 466 00:25:09,140 --> 00:25:12,140 I'm going to put this in the show notes. 467 00:25:12,140 --> 00:25:18,140 What it allows you to do is it sits in your browser 468 00:25:18,140 --> 00:25:23,140 and allows you to edit the Markdown files. 469 00:25:23,140 --> 00:25:28,300 And it exposes the front matter as parameters. 470 00:25:28,300 --> 00:25:31,320 And, but the other thing that it does 471 00:25:31,320 --> 00:25:33,680 is it also sets up a workflow with draft and publish. 472 00:25:33,680 --> 00:25:35,660 You can still go in and edit the HTML, 473 00:25:35,660 --> 00:25:37,840 like edit the Markdown files directly, 474 00:25:37,840 --> 00:25:39,620 but it basically creates a branch for each one. 475 00:25:39,620 --> 00:25:41,720 So you can build, like you can, 476 00:25:41,720 --> 00:25:46,720 it gives you a publishing workflow inside the browser 477 00:25:47,100 --> 00:25:49,720 for when you want to ramp into that. 478 00:25:49,720 --> 00:25:51,900 Like you can still just use markdown files 479 00:25:51,900 --> 00:25:53,000 on the command line, 480 00:25:53,000 --> 00:25:56,760 but let's say you want a little bit more of a GUI for it, 481 00:25:56,760 --> 00:25:57,940 or you wanna hand this off to someone 482 00:25:57,940 --> 00:25:59,100 who's maybe not as technical 483 00:25:59,100 --> 00:26:02,180 and they wanna contribute or write something for you. 484 00:26:02,180 --> 00:26:05,860 It's a plusing application, like it pluses up. 485 00:26:05,860 --> 00:26:10,140 - It sounds like kind of like the, 486 00:26:10,140 --> 00:26:14,580 kind of like a WordPress setup in a way. 487 00:26:14,580 --> 00:26:21,060 It is, but it is headless and it very much is reliant on the Markdown files that are 488 00:26:21,060 --> 00:26:24,020 there as opposed to being database driven. 489 00:26:24,020 --> 00:26:26,300 It literally just sits on top of your head. 490 00:26:26,300 --> 00:26:28,740 No sequel version of WordPress. 491 00:26:28,740 --> 00:26:29,340 Kinda. 492 00:26:29,340 --> 00:26:30,180 Yeah, kinda. 493 00:26:30,180 --> 00:26:31,980 I mean, it uses the local file system. 494 00:26:31,980 --> 00:26:35,100 That's like, it uses the files the same way that you would if you were editing 495 00:26:35,100 --> 00:26:39,620 them through like VIM, Emacs, Obsidian, but it's through the browser. 496 00:26:39,620 --> 00:26:42,020 Other more popular text editors. 497 00:26:42,020 --> 00:26:42,740 Yeah. 498 00:26:42,740 --> 00:26:44,260 I threw an Emacs there for you. 499 00:26:44,260 --> 00:26:47,300 B.S. Code. Yeah. Notepad. 500 00:26:47,300 --> 00:26:51,080 Made a I made made a post in Notepad once it was 501 00:26:51,080 --> 00:26:55,140 it was it was it was an intentional challenge. 502 00:26:55,140 --> 00:26:57,180 And it worked. 503 00:26:57,180 --> 00:26:59,080 You can you can use any text editor to do this. 504 00:26:59,080 --> 00:27:02,520 That's one of the reasons why I'm liking these systems is the simplicity 505 00:27:02,520 --> 00:27:05,860 and being able to get up and publish is one of the things that like the implosion 506 00:27:05,860 --> 00:27:10,660 of Twitter was really nice to see just people kind of going back to basics 507 00:27:10,660 --> 00:27:14,120 on a lot of this stuff and like owning their own things and realizing that like 508 00:27:14,120 --> 00:27:16,520 RSS never stopped being a thing. 509 00:27:16,520 --> 00:27:17,700 Like it's been a thing. 510 00:27:17,700 --> 00:27:18,040 Yeah. 511 00:27:18,040 --> 00:27:18,560 Forever. 512 00:27:18,560 --> 00:27:22,320 Google, the death of Google feeds did not kill RSS. 513 00:27:22,320 --> 00:27:22,520 Yeah. 514 00:27:22,520 --> 00:27:24,120 It killed people. 515 00:27:24,120 --> 00:27:27,600 It killed a bunch of people thinking about it. 516 00:27:27,600 --> 00:27:28,100 Yeah. 517 00:27:28,100 --> 00:27:35,320 I mean, from Google reader to feedly to feed bin to like tiny RSS running 518 00:27:35,320 --> 00:27:39,280 our own server, like there's this line of like somebody else doing it. 519 00:27:39,280 --> 00:27:41,160 Oh, I can pay somebody to do this. 520 00:27:41,160 --> 00:27:42,360 Oh, I can spin up one. 521 00:27:42,360 --> 00:27:43,680 There's so many flavors of that. 522 00:27:43,680 --> 00:27:49,480 But yeah, like Google the first time I ever lost trust in Google was when they killed reader 523 00:27:49,480 --> 00:27:55,920 Because it was just like such a fundamental piece of so many workflows and there's like nope. We're not gonna do that anymore 524 00:27:55,920 --> 00:28:01,900 Yeah, I on the topic of RSS. I recently transitioned my 525 00:28:01,900 --> 00:28:07,500 Having a YouTube account to having a having an opml file 526 00:28:09,200 --> 00:28:14,000 So now so now what I do is my RSS reader will tell me hey 527 00:28:14,000 --> 00:28:18,820 There's a new YouTube video and then I download it onto my computer and then I watch it. Yeah, it's really 528 00:28:18,820 --> 00:28:24,320 Inconvenient you don't recommend anyone do that you've invented the internet DVR 529 00:28:24,320 --> 00:28:29,300 Yeah, pretty much amazing. Don't do it guys 530 00:28:29,300 --> 00:28:31,960 Your YouTube account is fine 531 00:28:31,960 --> 00:28:35,380 That the web browser works fine. Yeah 532 00:28:35,980 --> 00:28:39,860 Well Zane, thank you again for another half an hour really appreciate it 533 00:28:39,860 --> 00:28:45,060 My pleasure we I almost pulled the oh I need to do something this afternoon 534 00:28:45,060 --> 00:28:47,680 I'm very glad that like we just pushed it back half an hour 535 00:28:47,680 --> 00:28:53,020 Yeah jokes on you. I don't have a social life. So I'm just always here fair. No, that's fair 536 00:28:53,020 --> 00:28:56,980 That's and I mean I have a job. So that's very similar to the same thing. So 537 00:28:56,980 --> 00:29:00,400 Well, I appreciate you spending your time with me 538 00:29:00,400 --> 00:29:03,900 Where can people find you on the interlet? 539 00:29:05,540 --> 00:29:10,540 pixelfed.social/atzane, 540 00:29:10,540 --> 00:29:13,620 8dr-hnt, 541 00:29:13,620 --> 00:29:18,560 103.social@zane, 542 00:29:18,560 --> 00:29:23,140 and that's it currently, still working on that website. 543 00:29:23,140 --> 00:29:24,340 - Cool. - It'll be here next week, 544 00:29:24,340 --> 00:29:25,540 guys, I promise. 545 00:29:25,540 --> 00:29:30,260 - And for me, you can find me at msp@103.social. 546 00:29:30,260 --> 00:29:33,420 The rest of my links are all at msp.link, 547 00:29:33,420 --> 00:29:35,720 GitHub, LinkedIn, all that other nonsense. 548 00:29:35,720 --> 00:29:42,220 Yeah, Zane, have a lovely weekend and or rest your week and then I'll see you next Tuesday. 549 00:29:42,220 --> 00:29:44,060 Thank you. I'll see you. 550 00:29:44,060 --> 00:29:54,060 [MUSIC] 551 00:29:54,060 --> 00:29:56,640 (upbeat music) 552 00:29:56,640 --> 00:29:59,220 (upbeat music) 553 00:29:59,220 --> 00:30:01,800 (upbeat music) 554 00:30:01,800 --> 00:30:04,380 (upbeat music) 555 00:30:04,380 --> 00:30:06,960 (upbeat music) 556 00:30:06,960 --> 00:30:09,540 (upbeat music) 557 00:30:09,540 --> 00:30:12,120 (upbeat music) 558 00:30:12,120 --> 00:30:14,700 (upbeat music) 559 00:30:14,700 --> 00:30:17,280 (upbeat music) 560 00:30:17,280 --> 00:30:19,860 (upbeat music) 561 00:30:19,860 --> 00:30:22,440 (upbeat music) 562 00:30:22,440 --> 00:30:25,020 (upbeat music) 563 00:30:25,020 --> 00:30:27,600 (upbeat music) 564 00:30:27,600 --> 00:30:56,640 [Music] 565 00:30:56,640 --> 00:31:06,640 [MUSIC]