Podcasts about web workers

في الحلقة دي بنتكلم عن ال Web workers وانواعهم المختلفة وامتي بستعمل كل نوع فيهم وبدي امثلة عملية عن الاستخدامات المناسبة لكل واحد فيهم الي استعملتهم فعلياً في شغلي. لينكات مفيدة: Sharing Websocket connections Service workers lifecycle Partytown Concurrency worker scaling example Web workers API | MDN Transferable objects | MDN

JavaScript est un langage "single-threaded", ce qui a une incidence sur ses performances. Mais grâce aux web workers, il est possible de passer au-delà de cette contrainte !Notes de l'épisode :Article d'origine : https://code-garage.fr/blog/qu-est-ce-qu-un-web-worker-et-comment-s-en-servir/Démo : https://nicolasbrondin.github.io/basic-web-worker-extension/Farnell (sponsor) : https://fr.farnell.com

Adam Bradley joins to talk about some amazing new projects to help increase performance and productivity in Web Development: Partytown, Qwik, and Builder.io.SponsorsDaily.devdaily.dev is where developers grow together. It provides a community-based feed of the best developer news, helping you stay up-to-date. daily.dev aggregates hundreds of sources every few minutes and creates a personal feed for you according to your interests, whether it's web dev, data science, or Elixir. Anything you might be interested in, it has the content for you.Check out daily.devHashnodeCreating a developer blog is crucial in creating an online presence for yourself. It's proof of work for your future employer. Hashnode makes it easy to start a blog in seconds on your custom domain for free. It's fully optimized for developers and supports writing in Markdown, rich embeds, publishing from GitHub repository, syntax highlighting, and edge caching with Next.js blogs deployed on Vercel. On top of these, Hashnode is free from paywall, ads, and sign-up prompts.Hashnode is a community of developers, engineers, and people in tech. Your article gets instant readership from their growing community.Check out Hashnode, and join the community.Show Notes00:00:00 - Intros00:00:52 - Adam Bradley Introductions, Origins of Stencil and Ionic00:08:16 - Qwik Performance Overview00:15:31 - Sponsor Shoutout - Daily.dev00:16:32 - Intelligent JavaScript Bundling and Prefetching00:24:26 - Qwik vs Astro00:29:40 - Sponsor Shoutout: Hashnode00:30:26 - Learning in Modern Web Development00:33:18 - Web Workers and Partytown00:45:07 - Builder.io - "Drag and Drop on Your Tech Stack"

In this episode of Syntax, Wes and Scott talk through the fundamentals of web workers and service workers - examples, when you should use them, how to debug, local dev, and more. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:11 Welcome 04:34 What are threads? 06:12 Concurrent vs parallel 09:22 Green screen web cam example 13:02 Examples of what you could use web workers for Party Town Deno 19:52 Sponsor: LogRocket 20:42 Post Message API and Web Workers 25:57 What about WASM? 27:28 Offline sync 28:14 What are service workers? 31:20 How do you caching sites for offline use? 32:39 Web worker vs service worker 34:12 Sponsor: Sanity 35:40 What is the lifecycle of a service worker 38:18 Possible issues with Service Workers 42:46 Debugging service workers Svelte Kit Service workers Workbox 43:04 Testing and local development Service Workers notes from Wes' Workshop 46:45 Sponsor: Freshbooks 49:59 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Setex Gecko Grip 1mm Anti Slip Eyeglass Nose Pads Wes: Samsung Frame TV Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

Adam and Houssein talk with Alex all about how third party script are killing the web. How Partytown fixes the third party script problem. Then we show how Partytown Script is used in Next.js https://codingcat.dev/podcast/nextjs-script-with-partytown-web-workers Sponsors: Builder.io Empower your entire team to visually create and optimize high-speed experiences on your sites and apps. Provide whole-team autonomy with a platform that is developer approved. https://Builder.io --- Send in a voice message: https://anchor.fm/purrfect-dev/message Support this podcast: https://anchor.fm/purrfect-dev/support

This podcast involves two live demos, you can catch up on the YouTube verison here: https://youtu.be/T3K_DrgLPXMLinks Builder.io https://www.builder.io/ PartyTown https://github.com/BuilderIO/partytown Qwik https://github.com/builderio/qwik https://dev.to/mhevery/a-first-look-at-qwik-the-html-first-framework-af Timestamps [00:01:53] Misko Intro  [00:03:50] Builder.io  [00:08:31] PartyTown  [00:11:41] Web Workers vs Service Workers vs Atomics  [00:15:02] PartyTown Demo  [00:21:46] Qwik and Resumable vs Replayable Frameworks  [00:25:40] Qwik vs React - the curse of Closures  [00:27:32] Qwik Demo  [00:42:40] Qwik Compiler Optimizations  [00:53:00] Qwik Questions  [01:00:05] Qwik vs Islands Architecture  [01:02:59] Qwik Event Pooling  [01:05:57] Qwik Conclusions  [01:13:40] Qwik vs Angular Ivy  [01:16:58] TED Talk: Metabolic Health  Transcript [00:00:00] Misko Hevery: So the thing that I've learned from Angular.js days is make it really palatable, right. And solve a problem that nobody else has. Doing yet another framework in this state of our world would be complete suicide cause like it's just a different syntax for the same thing, right? So you need to be solving a problem that the other ones cannot solve. [00:00:22] swyx: The following is my conversation with Misko Hevery, former creator of Angular.js, and now CTO of Builder.io and creator of the Qwik framework. I often find that people with this level of seniority and accomplishment become jaded and imagine themselves above getting their hands dirty in code.  [00:00:39] Misko is the furthest you could possibly get, having left Google and immediately starting work on the biggest problem he sees with the state of web development today, which is that most apps or most sites don't get a hundred out of a hundred on their lighthouse scores. We talked about how Builder.io gives users far more flexibility than any other headless CMS and then we go into the two main ways that Misko wants to change web performance forever: offloading third-party scripts with PartyTown, and then creating a resumable framework with Qwik. Finally, we close off with a Ted Talk from Mishko on metabolic health. Overall I'm incredibly inspired by Misko's mission, where he wants to see a world with lighter websites and lighter bodies. [00:01:23] I hope you enjoy these long form conversations. I'm trying to produce with amazing developers. I don't have a name for it, and I don't know what the plan is. I just know that I really enjoy it. And the feedback has been really great. I'm still figuring out the production process and trying to balance it with my other commitments so any tips are welcome. If you liked this, share it with a friend. If you have requests for other guests, pack them on social media. I'd like to basically make this a space where passionate builders and doers can talk about their craft and where things are going. So here's the interview.  [00:01:53] Misko Intro  [00:01:53] swyx: Basically I try to start cold, [00:01:55] assuming that people already know who you are. Essentially you and I met at Zadar and, I've heard of you for the longest time. I've heard you on a couple of podcasts, but I haven't been in the Angular world. And now you're no longer in the Angular world.  [00:02:11] Misko Hevery: The child has graduated out of college. It's at a time.  [00:02:15] swyx: My favorite discovery about you actually is that you have non-stop dad jokes. Um, we were walking home from like one of the dinners and that you're just like going, oh, that's amazing. [00:02:27] Yes. Yeah.  [00:02:28] Misko Hevery: Yes. Um, most people cringe. I find it that it helps break that. It does and you know, the Dad jokes, so they're completely innocent. So you don't have to worry. I also have a good collection of, uh, computer jokes that only computer programmers get.  [00:02:47] swyx: Okay. Hit me with one.  [00:02:48] Misko Hevery: Um, "How do you measure functions?" [00:02:51] swyx: How do I measure functions? And the boring answer is arity,  [00:02:55] Misko Hevery: and that's a good one! "In Para-Meters." Uh, [00:03:03] swyx: yeah. So for anyone listening like our entire journey back was like that it just like the whole group just groaning. No, that's really good. Okay. Well, it's really good to connect. I'm interested in what you're doing at Builder. You left Google to be CTO of Builder. I assumed that I knew what it was, from the name, it actually is a headless CMS and we can talk about that because I used to work at Netlify and we used to be very good friends with all the headless CMSes. And then we can talk about Qwik. How's that ? [00:03:34] Misko Hevery: I can jump into that. Sorry. My voice is a little raspy. I just got over a regular cold, like the regular cold ceilings  [00:03:42] swyx: conference call, right. I dunno, I, I had it for a week and I only just got over it. [00:03:46] Misko Hevery: It was from the conference. Maybe it wasn't from the other trip I made anyways.  [00:03:50] Builder.io  [00:03:50] Misko Hevery: So let's talk about Builder. So Builder is what we call a headless visual CMS. Uh, I did not know any of that stuff. Would've meant. So I'm going to break it down because I assume that the audience might not know either. [00:04:01] So CMS means it's a content management system. What it means is that non-developers, uh, like typically a marketing department think like Gap. Gap needs to update .... If you're showing stuff on the screen, you can go to Everlane. Everlane is one of our customers. Okay. And so in Everlane case, the marketing department wants to change the content all the time. [00:04:22] Right? They want to change the sales, what things are on the top, what product that they want to feature, et cetera. And, um, this is typically done through a content management system. And the way this is typically done is that it's like a glorified spreadsheet where the engineering department makes a content. [00:04:39] And then it gives essentially key value pairs to the marketing. So the marketing person can change the text, maybe the image, but if the developer didn't think that the marketing person might want to change the color or font size, then there is no hook for it, and the marketing person can't do that. [00:04:54] Certainly marketing person won't be able to add new columns, decide that this is better shown in three columns versus two column mode or show a button or add additional text. None of that stuff is really possible in traditional content management systems. So, this is where the visual part comes in. So Builder.io is fully visual, right? [00:05:13] Drag and drop. You can add it, whatever you want in the page. And the last bit is headless, meaning that it's running on the customer's infrastructure and we don't host the website. If you are, if we are hosted CMS, then it's relatively easy to make a drag and drop editor. [00:05:28] But because we don't host it, it's not on our infrastructure. It's actually quite a head-scratcher. And the way we do this, which I think is pretty cool, is, we have this open source technology called Mitosis, which allows us to give one input to Mitosis and it can produced any output in terms of like, whether you use Angular, React, Vue, Svelte, Solid, it doesn't matter what you use on the backend. [00:05:50] We will generate a component for you. And because we're generating an actual component, it drops into the customer's backend infrastructure, right. And everything just works there. Server-side rendering works. Everything that, that the customer might have on a backend, it just worked because it's a full-on regular component, whether it's Angular, React, or whatever the company might use. [00:06:13] So that's the unique bit that nobody knows how to do. And it's also the bit that attracted me to Builder.io and joining them. And the reason for that is because it is really easy for them to create new technology. So one of the things we're going to talk about later is this thing called Qwik. [00:06:30] What's super easy with Builder.io is that they can easily produce new output. So if you have a customer that already has their content, let's say on react or Angular, and they decided they want to move over to something different, like Qwik, and I will talk about why that might be a reason, it is super easy because with a push of a button, because we generate the content, we can generate the components in a different framework. [00:06:55] swyx: Got it. It's interesting. Have you seen Tailwind?  [00:06:57] Misko Hevery: So Tailwind is more of a CSS framework with my understanding is correct for  [00:07:01] swyx: building, but they had to build something for doing this essentially like having different outputs, uh, we have one central template format that outputs all these different  [00:07:11] Misko Hevery: things.  [00:07:12] So this is what Mitosis would do. Right. But Mitosis can do this across all of them, not just Vue and React, right? Every single one. Like, I don't even know what the list is, but there's a huge list of possible outputs that uh, Mitosis  [00:07:25] swyx: can do. Yeah. You have, Liquid and JSON.  [00:07:30] Misko Hevery: There's more, I mean, this for ones that you see over here. [00:07:33] Yeah. You can see pretty much everything's analyst here. We can import from Figma, given some constraints. Cause it's not a one-to-one thing kind of a thing, but we can import from Figma. So the idea is that people can design their site in Figma provided that they follow a certain set of guidelines. [00:07:49] We can actually import them and to turn it into HTML and then serve it up, whether it's React or whatever. One of the things is that's actually important. For example, for us is Liquid, right? Liquid is a templating system on Shopify. But it's a server side templating system and it cannot be done on the client side. [00:08:05] So if you pre-render on Liquid, how do you get a component to bind to it on the client? Because you would need to have the same component. Right? One of the things we can do is we can present it on a liquid and then produce an, a equivalent react component on the client and they automatically bind to it on a client. [00:08:21] Right. So we can do these kinds of tricks which are normally quite difficult.  [00:08:25] swyx: So you went from building one framework to building all the frameworks.  [00:08:29] Misko Hevery: You can think of it that way.  [00:08:31] PartyTown  [00:08:31] Misko Hevery: But my real thing, the real passion is that I want to get all sides to be 100/100. Yeah. Okay. Uh, on mobile, not on this stop, you know, a lot of people claim on desktop that they can do 100 out of a hundred mobile, that's the bar. [00:08:46] So I want to figure out how to do this. And in order to do that, you really have to get super, super good at rendering these things. And it turns out that if you just make a blank page and blank, white page with nothing on it, and you add a Google tag manager, that alone puts you essentially on the cusp of a hundred, out of a hundred on mobile. [00:09:08] So that alone, that, that act alone, right, he's kind of uses up all your time that you have for rendering. And so the question becomes like, how do we make this as fast as possible? So you can get a hundred out of a hundred on mobile. And it's very little processing time that you get to have and still get to have a hundred. [00:09:25] And so we do two things. One is be introducing a new framework called Qwik. little later. But the other thing we're talking about is introducing this thing called PartyTown okay. And I absolutely love PartyTown. So the person behind PartyTown is Adam Bradley, who you might know him from, making the Ionic framework.  [00:09:43] The guy is absolutely genius. And this is a perfect example of the cleverness of it. All right? So you have, something like a Google tag manager that you want to install on your website. And that thing alone is going to eat up all of your CPU time. So you really would like to put it on a WebWorker, but the problem is you can't because the WebWorker doesn't have DOM API. [00:10:02] It doesn't have a URL bar. It doesn't have just about everything that the Google tag manager wants to do. Right? Google tag manager wants to insert a tracking pixel on your screen. It wants to register a listener to the, to the, uh, URL changes. It wants to set up listeners for your mouse movements, for the clicks, all kinds of stuff. [00:10:21] So running it on a Web Worker becomes a problem. And so the clever bit of geniuses that Adam came up with is that, well, what you really want is you want to proxy the APIs on the main thread into the web worker thread, and you can proxy them through, you know, we have these, these objects called proxies. [00:10:39] The problem is that the code on a Web Worker expects everything to be synchronous. And our communication channel between the main thread and the web worker thread is async. And so the question becomes like, well, how do you solve this particular problem? And it turns out there is a solution to this problem. [00:10:56] And the solution is that you can make a XML HTTP request, which is synchronous, on a Web worker. And then you can intercept that the request using a service worker and then service worker can talk to the main thread. Figure out what exactly did you want to do? So for example, let's say you want to set up a, uh, you want to know the bounding rectangles of some div, the Web Worker thread can make that request, encode that request inside of a XML HTTP request, which goes to the service worker. Service worker calls the main thread, the main thread figures out what the rectangle boxes, and then sends the information back to the web worker thread, which then doesn't notice anything special. As far as it's concerned, it's just executing stuff, synchronously. It's like, you're laughing, right? Because this is hilarious. [00:11:41] Web Workers vs Service Workers vs Atomics  [00:11:41] swyx: So I'm one of those. Okay. You're, you're a little bit ahead of me now. I'm one of those people I've never used web workers or service workers. Right. Um, can we talk a little about, a little bit about the difference and like, are they supposed to be used like that? Like,  [00:11:54] Misko Hevery: uh, so we did these two because they are supported under the most browsers. [00:11:59] There's a different way of making synchronous call and that is through something called Atomics, but Atomics is not available on all browsers yet.  [00:12:07] So web worker is basically just another thread that you have in the browser. [00:12:12] However, that thread doesn't have access to the DOM. So all DOM APIs are kind of gone from there. So you can do a lot of CPU intensive things over there, but, , with limited abilities and this is what PartyTown solves is it proxies all of the API from the main thread into the Web Worker thread. Yeah.  [00:12:32] Now service worker is kind of a safe thing, but the difference is that a service worker can watch HTTP requests go by and it can intercept them. And so think of it as almost like a mini web server in your browser. And so what the service worker does over here is intercepts the request that the web worker makes, because that's the only way we know how to make it blocking call. [00:12:56] swyx: Uh, this is the one that we use for caching and Create React App and stuff like that. [00:13:00] Misko Hevery: Yeah. And then, because we can make a blocking call out of a web worker, the service worker who can use the blockiness of it to make an asynchronous call to the main thread and get all the information that you need.  [00:13:12] swyx: that's pretty smart. Is there any relation to, uh, I know that I think either Jason Miller or Surma did a worker library that was supposed to make it easier to integrate, um, are you aware of, I think  [00:13:25] Misko Hevery: all of these worker rivalries are in heart they're asynchronous, right. And that's what prevents us from using it, right. [00:13:31] Because the code as written assumes full asynchronicity, and that is the bit that's. Different. Right. That's the thing that allows us to take code as is, and just execute it in a, Web Worker. And so by doing that, we can take all of these expensive APIs, whether it's, Google tag manager, Analytics, Service Hub, I think that mispronouncing it, I think, all of these libraries can now go to the main thread and they have zero impact on your Google page speed score. And we actually talked to Chrome and we said like, Hey, we can do this. Do you think this is cheating? Right? Like, do you think that somehow we're just gaming the system and the message was no, no, because this actually makes the experience better for the user, right? [00:14:17] Like the user will come to the website. And because now the main thread is the thing that is running faster and none of this stuff is blocking. You actually have a better experience for the user. The other thing we can do is we can actually throttle how fast the Web Worker will run because when the Web Worker makes a request back to the main thread to say, like, I want the bounding box, or I'm going to set up a tracking pixel or anything like that, we don't have to process it immediately. [00:14:43] We can just say, well, process this at the next idle time. And so the end result is that you get a really high priority for the main thread and then the analytics loads when there's nothing else to do. Which is exactly what you want, right? You want these secondary things to load at a low priority and only be done when there's nothing else to do on the main thread. [00:15:02] PartyTown Demo  [00:15:02] swyx: That's amazing. Okay. All right. We have some demos here if we want to  [00:15:05] Misko Hevery: So if you, let's pick out the simple one, the element, right. And what you see in the console log is this is just a simple test, which performs, uh, synchronous operations. But what you see on the console log is that all of these operations are intercepted by the service worker. [00:15:22] Right. And we can see what particular API on the web worker is trying to do and what the result is, what the return code is, you know, how do we respond and so on and so forth. And so through this,you can kind of observe what your third party code does. By the way. The nice thing about this is also that, because you can observe, you can see is ECP. [00:15:43] If you're a third-party code, because we essentially trust them, right. Fully trust this third party code on your website and who knows what this third party code is doing. Right? So with this, you can see it and you can sandbox it and you can, for example, say like, yeah, I know you're trying to read the cookie, but I'm not going to let you, I'm just going to return an empty cookie because I don't think it's your business to do that. [00:16:04] You know, or any of those things we can do. So you can create a security sandbox around your third party code. That is kind of, as of right now is just implicitly trusted and you can, you have a better control over it.  [00:16:18] swyx: I could filter for it, I'm basically, I need HTTP calls and then I need any cookies. [00:16:23] Right. So,  [00:16:25] Misko Hevery: yeah. So in this case, there will be nothing because this is just showing off element API, but I think you go to previous page  [00:16:33] swyx: Before we go there. is there anything significant and? It says startup 254 milliseconds?  [00:16:38] Misko Hevery: Yeah. So the thing to understand is that it is slower, right? We are making the Google tag manager slower to start up. [00:16:46] Right. So it's definitely not going to be as fast as if it was on a main thread, but it's a, trade-off, we're doing intention. To say like, Hey, we want to give the CPU time to a user so that the user has a better experience rather than eagerly try to load analytics at the very, very beginning and then ruining it for the user. [00:17:04] So while in theory, you could run a react application and the web worker, I wouldn't be recommended because it will be running significantly slower. Okay. Um, because you know, all of these HTP requests, all these calls across the boundary, uh, would slow down. So it is a trade-off.  [00:17:23] swyx: So this is really for the kind of people who are working on, sites that are, have a lot of third-party scripts for,  [00:17:30] Misko Hevery: well, all the sides have third party scripts, right? [00:17:32] Like any kind of a site will have some kind of third-party whether it's analytics ads or just something that keeps track of what kind of exceptions happen on the client and send them back to the server, right. Standard standard things that people have on a website. And instead of the standard things that are making, preventing you from getting a hundred out of a hundred on your score. [00:17:52] Right. Okay, amazing. So this is a way of unloading stuff from the main thread Got  [00:17:58] swyx: What's the API? I haven't seen the actual code that, Party Town. Okay. There's a, there's a adapter thingy and then  [00:18:05] Misko Hevery: you stick it. So we, those are just for react components. There is also vanilla. Just go a little over. [00:18:14] So do   [00:18:16] swyx: you see how we have to prioritize, React above Vanilla? [00:18:20] Misko Hevery: Even lower? This just shows you how you get the PartyTown going. Oh, here we go. Text to pay. We go right there. [00:18:25] You're looking at it right there. So notice what. We asked you to take your third party script, which, you know, if you go to Google on an exit, it tells you like, oh, take this script tag and just drop it inside of your head. Right. Or something like that. So what we do is we say like, do the same exact thing, except change the type to text/partytown. [00:18:43] And that basically tells the browser don't execute it. Instead, PartyTown will come later, read the stuff, ship it over to the web worker and then do it over there.  [00:18:54] swyx: So the only API is you, you just change this, that's it? Yes. Yes.  [00:18:58] Misko Hevery: So you drop a party down script into, uh, into, which is about six kilobytes. And then you go to all of the third-party places and just add, type text/partytown, and that ships them off to the other place. [00:19:10] swyx: So, um, it feels like Chrome should just build this in like script, script type third party. Right. And then just do it.  [00:19:20] Misko Hevery: Yeah. I mean, we're having chats with them. You never know. Maybe if this shows up to be very useful technique. It might be something that Chrome could consider. Well, certainly we need a better way of making synchronous calls from the web worker thread to the main thread, not from the main ones of the web, right. [00:19:37] That's clearly a bad idea, but from the web worker, the main, it would be really nice to have a proper way of doing synchronous calls.  [00:19:44] Atomics  [00:19:44] Misko Hevery: Atomics might be the answer. And so it might be just as simple as getting all the browsers to adopt Atomics because the standard already exists.  [00:19:51] swyx: And I see what, what is this thing I've never heard of it? [00:19:55] Misko Hevery: Atomics is basically a shared memory array buffer between two threads and you can do, atomic operations like locking and incrementing and things of that sort on it. And they can be done in a blocking way. So you can, for example, say, increment this to one and wait until whatever result is three or something like that. [00:20:14] So then you're giving a chance for the other thread to do its work. I  [00:20:18] swyx: mean, this is like, so I'm writing assembly, like,  [00:20:22] Misko Hevery: It's not assembly it's more, you know, semaphore synchronization.  [00:20:26] swyx: Um, okay. Yeah. I see the, I see the locks and stuff, but this is, I can't just like throw in a third party script here. [00:20:33] Misko Hevery: No, no, no. This is something that the PartyTown would use to get synchronous messaging across. Right. Because currently it is kind of a hack that we create an XML HTTP request that is blocking that stuff with a service worker. Like this is craziness, right. So Atomics would definitely be a nicer way to do this. [00:20:51] swyx: I think the goal is definitely very worthwhile that the underlying, how you do it is a bit ugly, but who cares?  [00:20:57] Misko Hevery: Yeah. So the goal is very simple, right? The goal is, for us, we think we can have the best CMS, if we can produce websites that are a hundred out of a hundred on mobile, right? [00:21:07] That's the goal. And if you look at the current state of the world, and if you go to e-commerce websites, it's pretty dismal. Like everybody gets like 20 something on their scores for their sites, right? Even Amazon that has all the resources to spend, will only get 60 out of a hundred on their score. [00:21:24] Even Google website themselves gets it only about 70, out of a hundred. Right? So the state of the world is not very good. And I feel like we are in this cold war in a sense that like everybody's website is equally bad, so nobody cares. Right. But I'm hoping that if you can build a couple of websites that are just amazingly fast, then the world's going to be like, well, now I have to care. [00:21:46] Qwik and Resumable vs Replayable Frameworks  [00:21:46] Misko Hevery: Right? Because now it is different. And so now we're getting into the discussion of Qwik. So what is clicking and why do we need this? So, um, the basic idea behind Qwik, or rather than, let me back up a second of why existing websites are slow.  [00:22:04] And so there's two reasons, right? One is third party scripts, and we just discussed how we can solve this through PartyTown right? I mean, we can move all of their party scripts off.  [00:22:12] However, even if you move all the third party scripts off, your problem is still going to be that, uh, the startup time of your website is going to be pretty slow. And the reason for that is because all websites ship everything twice. First it's a server side rendered HTML, right. [00:22:30] And the page comes up quickly and then it's static. So we need to register listeners. Well, how do we adjust your listeners? Well, we download the whole site again, this time they came to in a form of TypeScript or JavaScript, and then we execute the whole site again, which is by the way, the server just did that. [00:22:49] Right? Yup. Yup. And then we know where to put up listeners and, that causes, you know, this is a perfect graphic for it, right. That causes double loading of everything. So we, we download everything once as HTML and then we load everything again, as JavaScript and then the execute the whole thing again. [00:23:07] So really we're doing everything twice. So what I'm saying is that the current set of framework are replayable, meaning that in order for them to have the bootstrap on the client, they have to replay everything that the server, literally just did, not even a second ago. And so Qwik is different in a sense, because it is resumable. [00:23:27] The big difference with Qwik is that the Qwik can send HTML across, and that's all. That's all it needs to send across. There's a little tiny bootstrapper, which is about one kilobyte and about one millisecond run, which just sets up a global listener and alert for the system. And no other code needs to be downloaded and it can resume exactly where the server left off. [00:23:48] So you need to have some formal way of serializing, the state, getting the state to the client, having a way of deserializing the state. More importantly, there's an importance to be able to render components independently from each other, right? And this is a problem with a lot of frameworks, which is - even if you could delay the startup time of a, uh, of an application, the moment you click on something react has to rerender the whole world right now, not rerender, that might be the wrong term, but it has to re execute its diffing algorithm from the root, right. It has to build up the vDOM. It has to reconcile the vDOM, has to do all these things, starting at the root. [00:24:26] There's no real way to not make it from the root. And so that means that it has to download all the code. And so the big thing about Qwik is, how can we have individual components be woken up individually from each other in any order? Right? I mean, people tend to talk about this in form of micro components or microservices on the client, right? [00:24:46] This is what we want, but at like the ultimate scale, where every component can act independently from everybody else.  [00:24:54] swyx: Yeah. Yeah. I think, we should talk a little bit about that because basically every single component is its own module and separately downloaded. So you're really using the multiplexing or whatever you call it of HTTP/2, right? [00:25:05] Like you can parallelize all those downloading. Right. The main joke I made, because I saw this opportunity and I was like, immediately, like, I know this will be the most controversial part, which is essentially. Uh, the way you serialize is you put everything in HTML, right? Like, like that. [00:25:23] So, so I, I immediately feel that, and it will stir up some controversy, but like also, like, I think the, the interesting, I mean, we should talk a bit about this. Like, obviously this is not handwritten by, by, by people. So people should not be that worried. Um, but also like there are some legitimate concerns, right. [00:25:40] Qwik vs React - the curse of Closures  [00:25:40] swyx: About how I think basically Dan Abramov was, was also the, the, you, you responded to Dan. Um, so Dan said something like this, okay. So it wasn't a direct response to Qwik but Qwik serializes all state in HTML, and that's something that we considered for React Suspense. And he says, basically the question was, have you considered allowing server components to have serializable state using equivalent? [00:26:03] it's been proposed somewhere earlier. This doesn't work generally state is in reaction arbitrary. Payloads would get huge essentially, like, "does it scale?" Is the question. Uh, and he said that this was done before and I went and looked it up and he was like, yeah. And it's actually what we used to do for ASP .NET WebForms. Right.  [00:26:18] Misko Hevery: So if you will look at react the way to React does things. And so I want to pull this up on one of the dev, uh, dogs. I actually talk about it and it might be useful to kind of pull it out. Yeah, the one you are on right now, the answer adoptable fine-grained lazy loaded. The point is that if you have a react component, react components take heavily, closures, right? Closure is the bread and butter of react components and they rely on closures everywhere and it's beautiful. I it's absolutely nice. I really like the mental model. However, it doesn't serialize, right? [00:26:50] You can't take a closure and serialize it into HTML. So what Qwik is trying to do is it's trying to break this up into individual functions. Clearly functions cannot be serialized, but functions can get a URL , a globally known URL, uh, which can load this. So if you scroll a little lower, you will see a, uh, Qwik component , and the difference is, in a Qwik component, we'll have these declaration template, which is which points to a location to where this particular thing can be loaded, if you scroll even further, it talks about how this particular thing can be served up in pieces to the client, if you do this thing. Right. So while it's maybe true that like, oh, it's been tried before and we didn't do it right. [00:27:32] Qwik Demo  [00:27:32] Misko Hevery: Have people really tried to solve every single one of these problems. Right. And there's a huge myriad of them that Qwik is trying to solve and kind of get over. And so maybe I can show it to you as a demo of what I kind of have a to-do app working. So let's let me, let's talk about this. [00:27:50] One of the things. So by the way, the screenshot you have on your Twitter account, that is the old version of Qwik, I've been chatting with you and bunch of other people at the conference, I really got inspired by lots of cool things. And this is a kind of a new version I'm working on, which has many of the issues fixed up and improved. So the thing I'm going to show you is standard todo example, right? I mean, you've seen this millions of times before. [00:28:15] swyx: By the way. I did not know that, uh, I think Addy Osmani made this original to do yes, he did. He did. And it's like the classic example. That was a classic example,  [00:28:24] Misko Hevery: right?  [00:28:27] So remember the goal for us is to serialize everything and send to the client in a form that the client can resume where the silver left off. Right. And then everything can be downloaded in pieces. So there's a lot of things to talk about. So let's start with, with how this works first, and then we can talk about how different pieces actually fit together. [00:28:46] So, you know, first thing you need to do, is, standard, define your interface for an item and define your interface for Todos, which is the collection of items, which contains , number of items completed in the current filter state, and just a list of items like so far, nothing. [00:29:02] Now the special thing comes in that when you declaring a object that you want to serialize, you will run it through this special function called Q object. And it's a marker function and does a couple of things to an object. But you're just basically passing all the stuff in and notice the individual items on Q objects as well. [00:29:20] The reason I did it this way is because I want to serialize individual line items separately, because I know that I'm going to be passing the individual items into separate components individually. Right? So what this basically says to the system is like, there is a top level object. Which is this guy right here and it can have rich state, but remember it has to be JSON serializable. [00:29:43] Therefore it cannot have cyclical things inside of it. It has to be a tree, but inside of it, it can have other objects and those can form cyclical things. So using the combination of those two, you can actually get cyclical graphs going inside of your application. But individually, each Q objects doesn't have that. [00:30:02] So that's a bit of a magic. If I scroll over to the actual running application, what you will notice is these Q objects get serialized like right here. So for example, this one has some ID and you notice it says completed zero and the inside of it has individual items. And notice these items are actually IDs to other locations. [00:30:22] So this ID ending in Zab is actually pointing to this object right here, which has other things. So the whole thing gets serialized. And unlike the demo I showed in Zadar, I have moved all the serialized content at the end, because I don't want to slow down the rendering of the top part. And so if you go, let's go back to our application. [00:30:41] So if you have Todo app, the Todo app is declared in a slightly more verbose way than the way the one would be declared in React. But if we do it this way, then we can serialize the closures, right? The closures don't have the issue with non serialized. By the way, the regular React way of doing things still works here and you can do that is just, they become permanently bound to their parents. [00:31:05] They cannot be lazy loaded. So you can think of it as having two mental models here. You can have lightweight components, which are essentially the same as react components, or you could have Q components, which are slightly more heavyweight, but they get the benefit of having the whole thing, be composable and get lazy a little bit so on and so forth. [00:31:24] So in this particular case, we're saying that there is a Todo app component and the QRL is this magical marker function that tells the system that this content here needs to be lazy. Or rather let me phrase it differently, it says the content here can be lazy loaded. The beauty of Qwik is that it allows you to put a lazy load of boundaries all throughout the system. [00:31:48] And then an optimization phase later decides whether or not we should take advantage of these lazy loaded motor boundaries, right in normal world, the developer has to put dynamic imports and that imports that asynchronous and a pain in the butt to work with, it's not simple. Right? So instead, what Qwik wants to do is say like, no, let's put dynamic imports everywhere, but do it in a way where the developer doesn't have to worry about it and then let the tooling figure out later whether or not we should actually have a dynamic import at this location or not. [00:32:18] Yeah. So even though this file, this there's two applications is in a single file in the tooling. We'll be able to break this file up into lots of small files and then decide in which order the things should be shipped to the client in order to get the best experience. You know, if there's a piece of code that never runs in the client will then put it at the bottom of the, of the chunks, right? [00:32:38] If there's a piece of code that is going to be most likely, you're going to click on it and put it up to the top. So, anyway, so that's kind of a diatribe here with a little bit of an off the rails here, but what this produces is a to-do and it turns the code, right? This QRL function, it says on render, it gets turned into a URL. [00:32:58] And this is what allows the build system to rearrange the code. And so this URL basically says, if you determine that Todo needs to be re re rendered, uh, then you can go download this piece of code. And that will tell you how do we render the Todo, right.  [00:33:14] You know, you're using a header and we're using main, notice we're binding Todos in there. So it looks like a regular binding, but the system has to do more work. So in this particular case, the main has to see if it has Todos, it has to refer to a object. So notice this, this ID here matches the ID here. And this is basically how the system knows that this component here, because if you look over here, the main and foot are, both of them want to know that you do this right? [00:33:42] So both of these components need to have the same object. And so, yeah, exactly. So this main here, as well as the footer, they both have a same ID passed in here. And that's how the system knows like, all right, if I wake you up, I have to make sure to provide you with the same exact ID. Now, not only that there is also this particular thing, which is just a copy of it, but, but in this particular. [00:34:08] What it does is, is the list, all of the objects that could potentially affect the state of this component. And when you go and you modify one of these, state objects, the state, these objects actually keep track of each other and they know which components need to be woken up and affected. So I think there's an example of it somewhere here later, uh, like right here, right in here, it says, Hey, if you, uh, you know, do a key up on the input right here, if I type here over here, something, then the key up runs and then eat, enter runs, you know, add a new item, which is just the function that the function right here, which just pushes an item and new item into the list. [00:34:54] And it sets my current state to text me. And so the system knows that in this political case, in a header, this input right here, Has its own state right here. So let me refresh this again. Um, this header has its own state one eight, whatever, right? Which if you look over here is right here. It's text blank, right? [00:35:16] So we find typing here. I'm going to change the state over here. And then if I set the state to blank, then the system knows, oh, that's object 1 8, 7 1, or whatever. I can run a query. I can run document DOM, querySelectorAll. And I can say, give me, uh, all the queue objects, remember how the selector for this start something like this. [00:35:44] Anyways, there's a way to run a selector that will allow me to whatever, whatever the code is, right? I'll run the selector and this selector will then return this header back to me saying this is the object or rather, this is the component that is, has interests registered into this object, which means. [00:36:04] Because I've selected this thing. I have to find the Q render message and send the Q render message to download its template and we render the object. And so what this allows you to do is have a completely distributed set of components that can be awoken only when a relative, you know, appropriate data is changed rather than having this world of like, well, the state has changed and I don't know who has a reference to what? [00:36:30] So the only thing I can do is we learn that the whole page. Well, that's kind of a, it doesn't help you, right? Cause if you run the, the whole page, then there's the whole, the code has to come in here. Right. So that's not helpful. We want to make sure that we only download the code is actually needed. And so you need to have some mechanism by which, you know, like if I change this piece of code, if I change this object, which component needs to be awoken, right. [00:36:54] And normally like if you have Svelte, Svelte does through subscription, this particular trick, the problem is subscriptions cannot be serialized into the DOM. And so we need a mechanism where the subscription information is actually DOM serializable, right? And this is what the Q object is, or the subscriptions that the individual components have to undo to other things. [00:37:18] And so the other thing I kinda want to point out is that we can then bind a complex object. Like in this case, it's a complicated state that'd be assigned to reduce yet. It turned into a binding that's serializable into the bottom, right? So if I go back here, see I'm jumping around. So we have our footer. [00:37:38] If we have our main, the main is declared over here, you know, standard, uh, JSX in here where you, you want to iterate over a bunch of items. There's a host. Okay. So one of the things we need to do is, um, in react, when you have a component, the component is essentially hostless, or I would say it's life component in the sense that it doesn't have a parent, right. [00:38:02] Uh, and that is wonderful in many, many situations, but sometimes it isn't. The problem we have is that we need to have a component. We need to have a DOM element for each component that can be queried using querySelectorAll so that we can determine if there is a listener on it, or if there is a subscription on a particular object or a single back. [00:38:24] So we have this concept of a host element, and this is one way in which the Qwik Q component is more heavyweight than the react component. You can still use react components if you want, you just don't get the benefits we talked about. And, and so a host element is, is a way of referring to the, the host element and adding an attribute to it. [00:38:47] Right. And saying like, oh, I want the host, I'm going to have a classmate. And so if you go into, let's see Maine, uh, right. So it's supposed to be a classmate, right. So it's the component that, that adamant. So normally, uh, the way you do this normally in react is that the main would be a object that the JSX of the re. [00:39:07] The child react component, right? In this particular case for a variety of reasons, we need to eagerly create this particular thing. So then it's a placeholder for other things to go in. And so we need to do an eagerly and then we need a way of like referring to it. So that's what host is, sorry for the, uh, diatribe anyways, but this is how you create your items, right? [00:39:31] And notice the way you got your items is you just got it from your prompts and you can iterate over them. Right? You can reiterate and run the map and produce individual items. And for each item you will pass. And the key. So if you look at the item here, it's prompt says like, I am going to get an item in here. [00:39:50] And my internal state is whether an I am not, I am an editable state. So these are you, basically your props. And this is the components state in here. And, uh, you know, on mound, we create a component states that we're not, we're not an editable state. And then when the rendering runs, uh, it has both the information about the item as well as about whether or not you are currently editing. [00:40:13] Uh, and if you look at the UL, so here's our, one of our items that got generated, notice that the item that passed in as a ID here, right? So if you go to the script at the bottom and see this one ends in PT six, so we should be able to find, here we go, this is what actually is being passed in to that particular component. [00:40:34] But notice there's a second object. Not only is there a, um, a PT six objects, there's also the secondary option. That's the state of the components. So if the state of the component, we're basically saying here is like, if this object changes or this object changes, I want to know about it and I need to be. [00:40:52] So these objects form a graph, right? The presents, the state of your system. And then the Qwik provides a mechanism to serialize all this information into the DOM in such a way that we know which component is to be woken at what time. So if I start typing in one of the things you're going to see is that on the first interaction, this script that will disappear, because what actually happens is that when you interact with the system, it says like "I need to rehydrate myself". Right? And so it goes to the script tag and, uh, reads it. Let me give it back over here, read it leads to the script tag and figures out. You know, these utilizes all these objects because takes this object, puts them inside of this object to build up the graph and then goes back into the DOM tree and say like, okay, so I need to put this one over here. [00:41:40] I need to put this one over here, this one over here and so on and so forth and puts all these objects back. What are they supposed to be? And now you are, your state is back in a, in these components, but the components aren't present yet. They're not awoken, right? Because none of their, uh, Mount or their render functions actually got called. [00:41:59] And because the functions didn't get called, uh, the code didn't have to get downloaded. So everything is super lazy. Right. So when I go and I hit a key over here, the state gets de-centralized, but the only piece of code that gets downloaded is right. It is, it is right. This thing right here. [00:42:18] Nothing else.  [00:42:19] swyx: Can we show that the network actually, ah,  [00:42:22] Misko Hevery: I would love to, but that part is mocked out right now in the old demo, in the demo that I have, that I did for the conference, that one actually had it properly working. But the feedback was that the D as a developer, there was a lot of things I had to do. [00:42:40] Qwik Compiler Optimizations  [00:42:40] Misko Hevery: And so I wanted to simplify it. So one of the things I did is I figured out a way, or rather I spoke with Adam, uh, the same Adam that did PartyTown. And we figured out how to make it, make the tooling smarter so that the developer doesn't have to do this. So what actually happens is that when you have the QRO over here, what actually happens is you, the, the code automatically gets refactored. [00:43:06] And you will get a new function with factor like this. The system will put an expert on it. And what gets placed in this location is a string that says something like, you know, ABC. Uh, hash you local, right. Or something like that. Right? So by doing this transformation and that piece of code is not working in this transformation, um, the, uh, the system can then, uh, lazy load, just the spirit physical code, nothing else. [00:43:39] But in order to do this transformation, we have to make sure that this code here doesn't have any closures. Right? I cannot, it cannot close over something and keep that variable because if it does the whole thing doesn't work. And so the nice thing is that we can still write it in a natural form, but one of the constraints here here is that you can't close over any variables. [00:44:01] Now there's no variables to close over them. The system is designed in such a way that it doesn't need it. Instead of things like props and state are explicitly passed into you, as well as to the thing of the child, whether they're halo as well. So you don't have a needs to create these kinds of closures, but it is a constraint. [00:44:19] And this is what allows the optimizer to go in and rearrange your code base in a way where we can then determine what things are used. So, so in this particular case, we can, for example, determined that you're likely to go and interact with the input box, but you are very unlikely to actually call this on render, because this is the kind of the Chrome, the shell of the application, and wants to show them the applications loaded you will never, ever interacted. [00:44:46] Right? So what you can do is you can take all these imports and you can sort them not alphabetically. You can sort them by the probability of usage. And then once you haven't sorted by the probability of usage, you can tell the optimizer like, okay, take the first N ones so that I have a chunk that's about 20 kilobytes because we think 20 kilobyte chunks. [00:45:08] And then the system can be like, okay, let me add a whole bunch of them until I have 20 kilobytes. Let me add a nice chunk, then underline about 20 clubs. And I kind of do these chunking all the way on the end. And then the last chunk we'll probably end up with a bunch of stuff that never ever gets loaded. [00:45:22] Right. But the problem is the current way we design applications. You can't do that. You just can't right. And so we have this mentality of like, we have frameworks that have amazing developer experience, but they set up the overall experience down the path of monolithic code base and any kind of, um, lazy loading that the Builder can add after the fact. [00:45:50] It's just like kind of a kloogey workaround. Right? And that's the thing that the Qwik solves it says like, no, no, no, let me help you design an application that has still nice developer experience, but let me structure things in a way so that I can later rearrange things, right? Let me keep you on this guide rails of like, make sure you do it in these ways. [00:46:12] And so everything is in the quickest set up in a way where it keeps you in this guide rails. And the result is, is a piece of code that the optimizer, then the Qwik can rearrange, right? It can go and pull out this function. It can pull out this function. It can pull out all of these functions and turn them into a top level functions that are exportable. [00:46:31] And it can then, um, tree shake the stuff that's not needed and produce chunks that can then be lazy loaded into your application.  [00:46:41] swyx: Like four or five years ago, I think there was some, uh, I think even at the Chrome dev summit or something like that, there was a effort to use Guess.js to basically use Google analytics, to optimize all this, intelligent pre-loading or loading predictions. [00:46:58] Um, is that how I think I missed the part about how, like, how you pull in the statistics for, for optimizing.  [00:47:05] Misko Hevery: So the first thing to talk about, I think is important to understand is that unless you can take your application and break it up into lots and lots and lots of chunks, I do that. Yeah. There's nothing to talk about. [00:47:15] Right? If your application is one big chunk, there's nothing to talk about. You would have to load the chunk end of discussion.  [00:47:21] swyx: Well, so the chunk goes page level, and now you're doing component level, right? So they were, they were saying we split it by page and we can predict the next page. So,  [00:47:30] Misko Hevery: so look at Amazon, right? [00:47:34] Most of this stuff, you will, I mean, you can click on stuff and there's a menu system up here and let's pick a random component here. How do I, let me just go to something. Oh, come on. Just give me a detail view of something every day. Uh, you know, most things here never have to be rendered. Like, for example, there's a component here. [00:47:52] This component never, ever changes. Nothing here. We're render nothing. We'll run it there, here. Uh, yes, these are components and I can click on them and they update the UI over here. But if I'm interacting here, why am I downloading the menu system? Right. And so the point is, if you have a page like this, there is huge number of components in here, but most of them either never update, or in my current path of interaction, I just don't need to update them. Right. If I'm using the menu system, then I don't need to download this thing here. And if I'm interacting with my item then I don't need the menu system, and I'm not, unless they put something out to car, do I have to worry about my shopping cart? [00:48:33] Right? And, and this is the problem is that we currently bundle the whole thing up as one giant monolithic chunk. And yes, there are ways to break this out, but they are not easy. And everybody knows how to do route level break up. But like even on rough level, it's, it's not, it's not fine grain enough. [00:48:53] Right. And so the magic of Qwik is the magic of writing the code in this particular style. Is that for a typical size application, I can break up the application in literally thousands of chunks. Now that's too much. We've gone way too far. I do. These, these chunks are too small and we don't want that. [00:49:13] Right. But when I can break things up, it's easy for me to assemble bigger chunks out of it. But the opposite isn't true, right? If I have a big chunk and I want to break it, well, good luck. You know, no amount of tooling is going to do this. As a matter of fact, the best AI system we have, which is right here in our brains. [00:49:31] Right. Even if you give it to the developer and say, go break this thing up, it's a head-scratcher that takes like weeks of work. Right? And so we are in this upside down world of like build a humongous thing and then have this attitude of like, somehow tooling will solve it. Tooling can solve this problem. [00:49:52] Right. You have to do it the other way around. You have to design a system which breaks into thousands of little chunks. And then the tooling can say, yeah, but that's too much. It's too fine-grained. And let me glue things together and put them together into bigger chunks because. Through experience. We know that an optimal chunk size is about 20 kilobytes, right? [00:50:11] And so now the thing you want is to get a list, the order of which the chunks are used, and that's easy, right? If you're running your application, you can just keep statistics on what, how users interact with your application and that's that the sticks can be sent back to the server. And so once you can get back on a server is just a ordered list of the probability by which you're going to need individual chunks. [00:50:35] And that sort of lists that sorted list is all you need to tell the optimizer, like start at the top of the list, keep adding items until you get to a correct chunk size, they'll start a new job, right. And you keep doing this over and over. Okay. Now the reason I get excited about this, the reason I talk about it is because we completely ignored this problem. [00:50:57] Right. We, we have these amazing frameworks, whether it's Angular, React, Svelte or whatever that allow you to build these amazing sites. But on the end of the day, we all have horrible page speed scores, because we're not thinking about it from the correct way. And the attitude for the longest time has been, the tooling will solve it later. [00:51:18] And my argument here is no, the tooling will not solve it later. If you make a mess of this code base, there's nothing that tooling can do. Yeah.  [00:51:27] swyx: Um, there's so many directions. I could take that in. So first of all, uh, the React term for this is a sufficiently smart compiler, which has been in the docs for like four or five years. [00:51:36] Yeah. That's an exhibit,  [00:51:39] Misko Hevery: but that's my point. Like you cannot make a sufficiently smart compiler [00:51:43] swyx: so is, I mean, is there a compile step for this because of the QRL section.  [00:51:47] Misko Hevery: So right now it's actually running without compilation whatsoever. So one of the things I want to make sure that it runs both in a compiled and uncompiled state, and that's why it comes up with these bogus things like mock modules, et cetera. [00:52:01] Uh, and I think if you go to the network stab, it loads the mock module, and it just re-exports it. I can't really show you, but basically all of these things are kind of just in there. So currently this thing runs as a single monolithic application, but the, the way this thing would work is that as I pointed out everything, every place that you see QRL is a hint to the compiler to go and extract this. [00:52:26] The compiler, literally, we would just think. Ctrl+Shift+R extract here and then gives it a name which will be a header pull on a key up. Right. And then it repeats the same exact thing over here. So Ctrl+Shift+R extract. This is a header onMount. I mistyped it. It's okay. I get it right. And the same thing here, controls have to go Ctrl+Shift+R [00:53:00] Qwik Questions  [00:53:00] swyx: what if I need to do like conditional loading because the competitor doesn't know which branch I need to go down.  [00:53:09] Misko Hevery: So I'll answer the question in a second, did you want to point out, so notice what ends up here? The header is super, super lightweight. There's nothing in here. Cause these things, these two things will get converted into these URLs, right? Yeah. And because of that, this header is permanently bound to the onRender of the to-do app. [00:53:28] Right? If you load a to-do app you're also loading the header and of Main and a footer, but the thing we've done over here is we made this super lightweight, and this is what allows the lazy loading to happen.  [00:53:41] Now you're asking what about other components? Uh, easy. I mean, uh, if you want it to conditionally include the header, you know, standard stuff. [00:53:51] Uh, true. Right now the, the header itself will always be permanently bound into the, on render of the to-do app. Right. However, because we did the trick when we extracted everything out of it had already super, super lightweight. It doesn't contain anything. Right? So the only thing the header really contains if you go in here is the what to do on this URL was the only thing that's in there and also this vendor, right? [00:54:18] So these two URLs are the only thing that is contained inside of the header by itself. Okay. It's only when we decide to render the header, do we go into the header? And we say, okay, we're doing a rendering. So what's your URL. And we look at this URL right here, we download the code. And so now the rendering pipeline has to be a synchronous. [00:54:38] We download the code and then we go and execute the content. And we basically fill in the content the better now in the process, we also realize, oh, we also have to download this piece of code. And this is where statistics would come together. And we basically tell us that this URL and this URL always get downloaded together. [00:54:57] And therefore the optimizer will be smart enough to always put them together in the same file in the same chunk. And, uh, you know, we rented the content. Got it.  [00:55:09] swyx: Okay. So, uh, one small piece of, uh, API feedback slash questions. Uh, yeah, you have, the tag name is optional there. I guess that's a hint to what to store, right. [00:55:18] Misko Hevery: So right now it says to-do right here. If I have a  [00:55:22] swyx: out,   [00:55:24] Misko Hevery: it becomes, uh, just the div. Um, so the system doesn't care. What the thing is, it means eight element. Um, it could be any element they will do just fine. It's easier to kind of on the eyes if it actually says to do right. So that's the only reason for okay. [00:55:42] Got it.  [00:55:43] swyx: the bigger piece is okay. It's like a lot of HTTP requests. Every time I basically, like every time I make a request, every time I interact with the app, I essentially need to do a whole new handshake, a whole new network transfer. There's some baseline weight for that. [00:56:00] Right. Chunking links that helps, um, is there a preload essentially? Is there a less programmatically say like, okay. And by the way, uh, this is important for offline capable apps. So I like, let's say like, I'm going offline. Like it's five things. I know I don't need it right now, but like as an app developer and  [00:56:18] Misko Hevery: I know.  [00:56:19] Yes. So, uh, we can totally do that. Um, we, uh, there is a level worker that will be set up and the web worker will get a list of all the chunks in the woodwork who will try to go and download them and set up the caching for you, uh, in these chunks of time. So that Y when you interact, the only thing that the browser has to do is execute the code now, because these chunks are small, the execution code, if we don't, we're not worried about it, right. [00:56:46] In the case of like on typical framework, that's replaceable. The problem is that the first time you interact with this thing, you have this huge amount of code to download parts and execute. But this isn't the case here because every interaction really only brings in the code that's strictly necessary for this interaction. [00:57:04] So again, we go to like Amazon, right? If I hover over here over these things, and it changes the image on the right side, the only code that gets downloaded and executed is the code for this. Now it's already pre downloaded because their web worker would go and pre fetch it for you. So the only thing that the browser has to do is parse the code and execute the code for the on hover, a callback that goes and updates this components URL. [00:57:27] Right. That's it? No other code needs to be downloaded in a presence. Yep.  [00:57:31] swyx: Got it. anything else that we should cover real Qwik?  [00:57:35] Misko Hevery: I feel like I have talked your ear off and you have been such a good and gracious host. Uh, happy to answer questions. I don't want to overwhelm people, but I am super excited as you can talk. [00:57:46] I'm super excited about this. I think it's a fundamental shift about how you think about a framework. So like, if you look at all the existing frameworks, they're all arguing about, like, I have a better index, I can do this better or that better and et cetera. Right. But fundamentally they're not the same, like essentially the same buckets they can all do about the same thing Qwik. [00:58:05] I think it's a whole new ballgame because the Qwik thing is not about like, oh, I can render a component just like, you know, 50 other frameworks can do as well. The thing that Qwik has is I can do it. I can give you microservices for free. I can give you this micro component architecture for free and I can produce a bundling. I am the sufficiently advanced compiler. Okay. Let's put it this way. This thing that you thought you could have and solve for you, doesn't exist unless you have the current guidelines. Right? So the thing with Qwik is that it is the thing that allows you to have a sufficiently smart compiler to give you this amazing times to interactivity, right? [00:58:48] At the end of the day, is the, there's nothing faster than downloading HTML for your website. I mean, that's the cake, right? Yep. So the reason why Qwik is fast is not because Qwik is clever in the way it runs JavaScript or anything like that. So no Qwik as fast because they don't have to do anything. [00:59:04] Right. When you, when you come to a Qwik website, there is literally nothing to do, right. We're fast because we don't do anything. And that's  [00:59:13] swyx: your baseline is like a one kilobyte bike loader, right?  [00:59:16] Misko Hevery: One come on loader with all the loader, does it sets up a global list? Right. So let me, let me go back. Sorry, let me share one more thing. [00:59:22] So here's your input, right? So if you go to a header, here's the input, right? The reason we know how to do something on it is because we serialize this thing called on:keyup, and there is a URL, right? So when this thing is first executed, nothing is done. Like this content shows up and it said we're done. [00:59:41] And the only reason why we know to do something next is because when I do a key up here, the event, bubbl

John, Martin, and Gary celebrate recording over 20 episodes of the podcast reminiscing about great cheese and guests they want to have on the show. They then dive into how Web Workers work, their dream Swiss German programming language, how different result types are bundled together, and more! Google Search developer site → https://goo.gle/35HtREZ Episode transcript → https://goo.gle/sotr021-transcript  Search Off the Record is a podcast series that takes you behind the scenes of Google Search with the Search Relations team.

Lindsay and Steve discuss Web Workers with Martins Onuoha. They talk about Martins' start in programming, and how he came to love Vue for its simplicity. Martins explains what Web Workers are, when they are useful, and how to integrate them with a Vue application. Panel Lindsay Wardell Steve Edwards Guest Martins Onuoha Sponsors Dev Influencers Accelerator Links Using Web Workers Vue Applications. VUE 137: Using Laravel and VueJS in an Enterprise Application | Devchat.tv JSJ 443: All About InertiaJS with Jonathan Reinink - JavaScript Jabber Laravel Jetstream Using Web Workers Vue Applications. | Devjavu vue-worker -npm GitHub: Martins Onuoha ( MartinsOnuoha ) Twitter: this.OnuohaSef ( @OnuohaOfficial ) Picks Lindsay- Magic: The Gathering Lindsay- Vue.js Global Summit Martins- Vue SFC Playground Steve- icanhazdadjoke Contact Lindsay Twitter: Lindsay Wardell ( @lindsaykwardell ) Contact Steve Twitter: Steve Edwards ( @wonder95 )

Lindsay and Steve discuss Web Workers with Martins Onuoha. They talk about Martins' start in programming, and how he came to love Vue for its simplicity. Martins explains what Web Workers are, when they are useful, and how to integrate them with a Vue application. Panel Lindsay Wardell Steve Edwards Guest Martins Onuoha Sponsors Dev Influencers Accelerator Links Using Web Workers Vue Applications. VUE 137: Using Laravel and VueJS in an Enterprise Application | Devchat.tv JSJ 443: All About InertiaJS with Jonathan Reinink - JavaScript Jabber Laravel Jetstream Using Web Workers Vue Applications. | Devjavu vue-worker -npm GitHub: Martins Onuoha ( MartinsOnuoha ) Twitter: this.OnuohaSef ( @OnuohaOfficial ) Picks Lindsay- Magic: The Gathering Lindsay- Vue.js Global Summit Martins- Vue SFC Playground Steve- icanhazdadjoke Contact Lindsay Twitter: Lindsay Wardell ( @lindsaykwardell ) Contact Steve Twitter: Steve Edwards ( @wonder95 )

More on Javascript in 2201, looking at Jay Hoffman's writing workflow, helping pick a CMS for fun blogging, helping pick a web host and the happiest path involved, and just what the heck are workers on the web?

In this episode of Syntax, Scott and Wes bring you the long-awaited Deno show — what it is, what it replaces, how you can use it, and more! Deque - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 02:13 - What is it? A secure runtime for JavaScript and TypeScript Built by Ryan Dhal — same guy who initially built Node.js API is JS or TS out of the box 04:55 - Does it replace / what is it in relation to? Node It’s a replacement for Node.js Express Web Server Frameworks like Express will run on Deno, but Express itself won’t currently run because they are build on Node APIs https://github.com/oakserver/oak Serverless Deno can be used for anything, so it can be used for serverless functions, or a traditional web server Serverless, Deno and TypeScript with Brian Leroux React / Vue / Svelte These things are just JavaScript, so they should/will work in Deno. Deno will replace your tooling. More involved things like Next.js that require Node APIs won’t work until. https://alephjs.org/ SSR It comes with all browser APIs out of the box! Fetch Window + Add Event listener Webpack / Parcel / Snowpack Deno is a bundler Prettier Deno is a formatter TSC Deno is a TypeScript compiler and runtime ESLint Deno is a linter Jest Deno is a Test Runner NPM Deno is a package manager - it pulls in packages from URLs 14:51 - Modules ES modules from the start Modules are loaded from URLs Why? No package registry to worry about This is how the browser works Import from URL You can also specify it in the json file https://github.com/oakserver/oak/blob/main/deps.ts https://deno.land/ Fetch is built in! It’s a browser API, but who cares?! Browser APIs window.add event Listener Deno is event based, like the browser 20:10 - A nice standard library https://github.com/denoland/deno/tree/master/std 22:14 - WASM Deno can run WASM with the same APIs that the browsers can Node is doing this too (experimental) 25:06 - Multi-threading with Web Workers 26:13 - Speed It’s fast! They took everything they learned from Node - good and bad Built in Rust From what we understand: V8 is written in C++ Node is written in C, C++ and JavaScript How it talks to V8 - Rust sits in-between the JS runtime, and the C++ V8 runtime and communicates between the two. https://github.com/denoland/deno/blob/master/core/examples/hello_world.rs 29:44 - Security Sandboxed —allow-read —allow-net -allow-write https://deno.land/manual@v1.6.3/getting_started/permissions#permissions-list You can specify which dirs it can access 33:39 - Run from anywhere https://www.npmjs.com/package/npx Deno run https://cool.com/whatever.ts 37:43 - Async out of the box Everything is based on async + await / promises right away. No callback APIs, no promise wrapping. Top level await 38:53 - Node Compatibility Node APIs are being filled This means if a browser package ships an ES module of a package, we can just import it 42:21 - What we’ve built A bunch of sample scripts Lots of simple demos Very intuitive Fetched and downloaded every single Syntax mp3 https://twitter.com/wesbos/status/1326345600141582336 46:54 - Hosting Literally any linux server (Linode, Digital Ocean, etc.) https://begin.com/ https://fly.io/ 48:29 - Final thoughts Scott: Now is a great time to learn, but don’t put any crucial work into that space unless you are ready to write everything. Libraries are still being written and evolved. Docs are still sparse. Many things didn’t work on first try. I had to read lots of source. Wes: If You know JS or TS, you are already 90% there. The package ecosystem isn’t there yet Battle-tested ××× SIIIIICK ××× PIIIICKS ××× Scott: Boom/Bust: The Rise and Fall of HQ Trivia Wes: Orthopaedic Pillow Shameless Plugs Scott: Deno 101 For Web Developers - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

This episode Dave's been blogging about the tangled webs we weave with dependancies and the internet, we talk more about web workers, and making peace with production code written by your earlier self. And Jeremy Keith kicks off part 1 of a reading of the history of the web.

We're talking about health, Tailwind CSS, getting overwhelmed with where to start on a project, some follow up on SVG sizes and web components, and why isn't there a bigger focus on web workers?

JavaScript Remote Conf 2020 May 13th to 15th - register now! Despite JavaScript being a single-threaded language, you can now leverage multi-threaded computing thanks to modern browser features such as web workers, workouts and service workers. In this show, Majid explains how these features work and what problems they solve. We also discuss the strategies you can use to introduce them to production codebases and give your users a much more enjoyable experience on your web app. Panel Paige Niedringhaus Carl Mungazi Charles Max Wood TJ VanToll Guest Majid Hajian Sponsors G2i | Enjoy the luxuries of freelancing "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! Links Comlink makes WebWorkers enjoyable Workbox Figma The AssemblyScript Book Houdini: Demystifying CSS Picks Majid Hajian: Follow Majid on Twitter > @mhadaily Deep Work - Cal Newport Carl Mungazi: Off the Main Thread | The Web Platform Podcast Charles Max Wood: Natural Goat Milk Soaps for Healthy Skin — Goat Milk Stuff ‎Flip Timer & stopwatch on the App Store Desktop tripod Devchat.tv Remote meetups Devchat.tv Remote Conferences Paige Niedringhaus: DJI Phantom 4 Drone Ozark show on Netflix TJ VanToll: Goat-2-Meeting — Sweet Farm Follow React Round Up on Twitter > @reactroundup

JavaScript Remote Conf 2020 May 13th to 15th - register now! Despite JavaScript being a single-threaded language, you can now leverage multi-threaded computing thanks to modern browser features such as web workers, workouts and service workers. In this show, Majid explains how these features work and what problems they solve. We also discuss the strategies you can use to introduce them to production codebases and give your users a much more enjoyable experience on your web app. Panel Paige Niedringhaus Carl Mungazi Charles Max Wood TJ VanToll Guest Majid Hajian Sponsors G2i | Enjoy the luxuries of freelancing "The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today! Links Comlink makes WebWorkers enjoyable Workbox Figma The AssemblyScript Book Houdini: Demystifying CSS Picks Majid Hajian: Follow Majid on Twitter > @mhadaily Deep Work - Cal Newport Carl Mungazi: Off the Main Thread | The Web Platform Podcast Charles Max Wood: Natural Goat Milk Soaps for Healthy Skin — Goat Milk Stuff ‎Flip Timer & stopwatch on the App Store Desktop tripod Devchat.tv Remote meetups Devchat.tv Remote Conferences Paige Niedringhaus: DJI Phantom 4 Drone Ozark show on Netflix TJ VanToll: Goat-2-Meeting — Sweet Farm Follow React Round Up on Twitter > @reactroundup

Добрый день уважаемые слушатели. Представляем новый выпуск подкаста RWpod. В этом выпуске: Ruby Ruby 2.7: The Pipeline Operator, Ruby-2.7 adds Enumerable#filter_map, Introduce support for ActionView::Component, Rails 6 adds private option to delegate method и The Ultimate Checklist to Properly Internationalize Devise Normalization, Consistency, and Clowne, A Rails middleware to change log level at runtime, Impersonator - a Ruby library to record and replay object interactions и Compacting GC in Ruby 2.7 - Aaron Patterson Web Entropic: a federated package registry for anything (The economics of open source by C J Silverio), Announcing styled-components v5: Beast Mode, Promise combinators, The reduce ({…spread}) anti-pattern и When should you be using Web Workers? Algorithm Visualizer is an interactive online platform that visualizes algorithms from code, Pika CDN: A CDN for Modern JavaScript, Readme-md-generator - CLI that generates beautiful README.md files и Relearn CSS layout

Houssein Djirdeh works with the Developer Relations team at Google, educating React developers on web application performance. He created the world best iPhone and Android app for Github — GitPoint. Chantastic asks about his experience creating GitPoint (a fully featured GitHub client, built in React Native), what performance vernacular like tti, fcp, and Web Workers mean, and common performance pitfalls and misunderstandings found in React apps. They discuss the importance of limiting scope to ship a product, the performance value of Hooks, tools and automations you can use today, and which projects to follow for inspiration.

This week on The Web Platform Podcast your hosts ask the question “Why aren't Web Workers more widely adopted”? Your hosts talk about what problems can be solved by Web Workers providing some interesting use cases and talk about their own experiences in past projects. Resources https://nolanlawson.com/2015/09/29/indexeddb-websql-localstorage-what-blocks-the-dom/  Around the Web in Two Minutes Chrome Canary gets JavaScript Modules https://jakearchibald.com/2017/es-modules-in-browsers/ TypeScript 2.3 Released https://blogs.msdn.microsoft.com/typescript/2017/04/27/announcing-typescript-2-3/ Firefox 53 arrives with new themes, separate graphics process https://venturebeat.com/2017/04/19/firefox-53-arrives-with-new-themes-separate-graphics-process-on-windows-and-compact-tabs-on-android/ Node.js 8.0.0 has been delayed until the end of May https://medium.com/the-node-js-collection/node-js-8-0-0-has-been-delayed-and-will-ship-on-or-around-may-30th-cd38ba96980d Published “A Practical Guide to Vanilla Web Components” my first Pluralsight course all about my favourite topic; Web Components. https://www.pluralsight.com/courses/vanilla-web-components-practical-guide Guests None Panel Leon Revill (@RevillWeb) Justin Ribeiro (@justinribeiro) Danny Blue (@dee_bloo)  

Today on the show, we've got a look at running OpenBSD on a APU, some BSD in your Android, managing your own FreeBSD cloud service with ansible and much more. Keep it turned on your place to B...SD! This episode was brought to you by Headlines OpenBSD on PC Engines APU2 (https://github.com/elad/openbsd-apu2) A detailed walkthrough of building an OpenBSD firewall on a PC Engines APU2 It starts with a breakdown of the parts that were purchases, totally around $200 Then the reader is walked through configuring the serial console, flashing the ROM, and updating the BIOS The next step is actually creating a custom OpenBSD install image, and pre-configuring its serial console. Starting with OpenBSD 6.0, this step is done automatically by the installer Installation: Power off the APU2 Insert the bootable OpenBSD installer USB flash drive to one of the USB slots on the APU2 Power on the APU2, press F10 to get to the boot menu, and choose to boot from USB (usually option number 1) At the boot> prompt, remember the serial console settings (see above) Also at the boot> prompt, press Enter to start the installer Follow the installation instructions The driver used for wireless networking is athn(4). It might not work properly out of the box. Once OpenBSD is installed, run fw_update with no arguments. It will figure out which firmware updates are required and will download and install them. When it finishes, reboot. Where the rubber meets the road… (part one) (https://functionallyparanoid.com/2016/11/29/where-the-rubber-meets-the-road-part-one/) A user describes their adventures installing OpenBSD and Arch Linux on a new Lenovo X1 Carbon (4th gen, skylake) They also detail why they moved away from their beloved Macbook, which while long, does describe a journey away from Apple that we've heard elsewhere. The journey begins with getting a new Windows laptop, shrinking the partition and creating space for a triple-boot install, of Windows / Arch / OpenBSD Brian then details how he setup the partitioning and performed the initial Arch installation, getting it tuned to his specifications. Next up was OpenBSD though, and that went sideways initially due to a new NVMe drive that wasn't fully supported (yet) The article is split into two parts (we will bring you the next installment at a future date), but he leaves us with the plan of attack to build a custom OpenBSD kernel with corrected PCI device identifiers. We wish Brian luck, and look forward to the “rest of the story” soon. *** Howto setup a FreeBSD jail server using iocage and ansible. (https://github.com/JoergFiedler/freebsd-ansible-demo) Setting up a FreeBSD jail server can be a daunting task. However when a guide comes along which shows you how to do that, including not exposing a single (non-jailed) port to the outside world, you know we had a take a closer look. This guide comes to us from GitHub, courtesy of Joerg Fielder. The project goals seem notable: Ansible playbook that creates a FreeBSD server which hosts multiple jails. Travis is used to run/test the playbook. No service on the host is exposed externally. All external connections terminate within a jail. Roles can be reused using Ansible Galaxy. Combine any of those roles to create FreeBSD server, which perfectly suits you. To get started, you'll need a machine with Ansible, Vagrant and VirtualBox, and your credentials to AWS if you want it to automatically create / destroy EC2 instances. There's already an impressive list of Anisible roles created for you to start with: freebsd-build-server - Creates a FreeBSD poudriere build server freebsd-jail-host - FreeBSD Jail host freebsd-jailed - Provides a jail freebsd-jailed-nginx - Provides a jailed nginx server freebsd-jailed-php-fpm - Creates a php-fpm pool and a ZFS dataset which is used as web root by php-fpm freebsd-jailed-sftp - Installs a SFTP server freebsd-jailed-sshd - Provides a jailed sshd server. freebsd-jailed-syslogd - Provides a jailed syslogd freebsd-jailed-btsync - Provides a jailed btsync instance server freebsd-jailed-joomla - Installs Joomla freebsd-jailed-mariadb - Provides a jailed MariaDB server freebsd-jailed-wordpress - Provides a jailed Wordpress server. Since the machines have to be customized before starting, he mentions that cloud-init is used to do the following: activate pf firewall add a pass all keep state rule to pf to keep track of connection states, which in turn allows you to reload the pf service without losing the connection install the following packages: sudo bash python27 allow passwordless sudo for user ec2-user “ From there it is pretty straight-forward, just a couple commands to spin up the VM's either locally on your VirtualBox host, or in the cloud with AWS. Internally the VM's are auto-configured with iocage to create jails, where all your actual services run. A neat project, check it out today if you want a shake-n-bake type cloud + jail solution. Colin Percival's bsdiff helps reduce Android apk bandwidth usage by 6 petabytes per day (http://android-developers.blogspot.ca/2016/12/saving-data-reducing-the-size-of-app-updates-by-65-percent.html) A post on the official Android-Developers blog, talks about how they used bsdiff (and bspatch) to reduce the size of Android application updates by 65% bsdiff was developed by FreeBSD's Colin Percival Earlier this year, we announced that we started using the bsdiff algorithm (by Colin Percival). Using bsdiff, we were able to reduce the size of app updates on average by 47% compared to the full APK size. This post is actually about the second generation of the code. Today, we're excited to share a new approach that goes further — File-by-File patching. App Updates using File-by-File patching are, on average, 65% smaller than the full app, and in some cases more than 90% smaller. Android apps are packaged as APKs, which are ZIP files with special conventions. Most of the content within the ZIP files (and APKs) is compressed using a technology called Deflate. Deflate is really good at compressing data but it has a drawback: it makes identifying changes in the original (uncompressed) content really hard. Even a tiny change to the original content (like changing one word in a book) can make the compressed output of deflate look completely different. Describing the differences between the original content is easy, but describing the differences between the compressed content is so hard that it leads to inefficient patches. So in the second generation of the code, they use bsdiff on each individual file, then package that, rather than diffing the original and new archives bsdiff is used in a great many other places, including shrinking the updates for the Firefox and Chrome browsers You can find out more about bsdiff here: http://www.daemonology.net/bsdiff/ A far more sophisticated algorithm, which typically provides roughly 20% smaller patches, is described in my doctoral thesis (http://www.daemonology.net/papers/thesis.pdf). Considering the gains, it is interesting that no one has implemented Colin's more sophisticated algorithm Colin had an interesting observation (https://twitter.com/cperciva/status/806426180379230208) last night: “I just realized that bandwidth savings due to bsdiff are now roughly equal to what the total internet traffic was when I wrote it in 2003.” *** News Roundup Distrowatch does an in-depth review of NAS4Free (https://distrowatch.com/weekly.php?issue=20161114#nas4free) Jesse Smith over at DistroWatch has done a pretty in-depth review of Nas4Free. The review starts with mentioning that NAS4Free works on 3 platforms, ARM/i386/AMD64 and for the purposes of this review he would be using AMD64 builds. After going through the initial install (doing typical disk management operations, such as GPT/MBR, etc) he was ready to begin using the product. One concern originally observed was that the initial boot seemed rather slow. Investigation revealed this was due to it loading the entire OS image into memory, and the first (long) disk read did take some time, but once loaded was super responsive. The next steps involved doing the initial configuration, which meant creating a new ZFS storage pool. After this process was done, he did find one puzzling UI option called “VM” which indicated it can be linked to VirtualBox in some way, but the Docs didn't reveal its secrets of usage. Additionally covered were some of the various “Access” methods, including traditional UNIX permissions, AD and LDAP, and then various Sharing services which are typical to a NAS, Such as NFS / Samba and others. One neat feature was the built-in file-browser via the web-interface, which allows you another method of getting at your data when sometimes NFS / Samba or WebDav aren't enough. Jesse gives us a nice round-up conclusion as well Most of the NAS operating systems I have used in the past were built around useful features. Some focused on making storage easy to set up and manage, others focused on services, such as making files available over multiple protocols or managing torrents. Some strive to be very easy to set up. NAS4Free does pretty well in each of the above categories. It may not be the easiest platform to set up, but it's probably a close second. It may not have the prettiest interface for managing settings, but it is quite easy to navigate. NAS4Free may not have the most add-on services and access protocols, but I suspect there are more than enough of both for most people. Where NAS4Free does better than most other solutions I have looked at is security. I don't think the project's website or documentation particularly focuses on security as a feature, but there are plenty of little security features that I liked. NAS4Free makes it very easy to lock the text console, which is good because we do not all keep our NAS boxes behind locked doors. The system is fairly easy to upgrade and appears to publish regular security updates in the form of new firmware. NAS4Free makes it fairly easy to set up user accounts, handle permissions and manage home directories. It's also pretty straight forward to switch from HTTP to HTTPS and to block people not on the local network from accessing the NAS's web interface. All in all, I like NAS4Free. It's a good, general purpose NAS operating system. While I did not feel the project did anything really amazing in any one category, nor did I run into any serious issues. The NAS ran as expected, was fairly straight forward to set up and easy to manage. This strikes me as an especially good platform for home or small business users who want an easy set up, some basic security and a solid collection of features. Browsix: Unix in the browser tab (https://browsix.org/) Browsix is a research project from the PLASMA lab at the University of Massachusetts, Amherst. The goal: Run C, C++, Go and Node.js programs as processes in browsers, including LaTeX, GNU Make, Go HTTP servers, and POSIX shell scripts. “Processes are built on top of Web Workers, letting applications run in parallel and spawn subprocesses. System calls include fork, spawn, exec, and wait.” Pipes are supported with pipe(2) enabling developers to compose processes into pipelines. Sockets include support for TCP socket servers and clients, making it possible to run applications like databases and HTTP servers together with their clients in the browser. Browsix comprises two core parts: A kernel written in TypeScript that makes core Unix features (including pipes, concurrent processes, signals, sockets, and a shared file system) available to web applications. Extended JavaScript runtimes for C, C++, Go, and Node.js that support running programs written in these languages as processes in the browser. This seems like an interesting project, although I am not sure how it would be used as more than a toy *** Book Review: PAM Mastery (https://www.cyberciti.biz/reviews/book-review-pam-mastery/) nixCraft does a book review of Michael W. Lucas' “Pam Mastery” Linux, FreeBSD, and Unix-like systems are multi-user and need some way of authenticating individual users. Back in the old days, this was done in different ways. You need to change each Unix application to use different authentication scheme. Before PAM, if you wanted to use an SQL database to authenticate users, you had to write specific support for that into each of your applications. Same for LDAP, etc. So Open Group lead to the development of PAM for the Unix-like system. Today Linux, FreeBSD, MacOS X and many other Unix-like systems are configured to use a centralized authentication mechanism called Pluggable Authentication Modules (PAM). The book “PAM Mastery” deals with the black magic of PAM. Of course, each OS chose to implement PAM a little bit differently The book starts with the basic concepts about PAM and authentication. You learn about Multi-Factor Authentication and why use PAM instead of changing each program to authenticate the user. The author went into great details about why PAM is useful for developers and sysadmin for several reasons. The examples cover CentOS Linux (RHEL and clones), Debian Linux, and FreeBSD Unix system. I like the way the author described PAM Configuration Files and Common Modules that covers everyday scenarios for the sysadmin. PAM configuration file format and PAM Module Interfaces are discussed in easy to understand language. Control flags in PAM can be very confusing for new sysadmins. Modules can be stacked in a particular order, and the control flags determine how important the success or failure of a particular module. There is also a chapter about using one-time passwords (Google Authenticator) for your application. The final chapter is all about enforcing good password policies for users and apps using PAM. The sysadmin would find this book useful as it covers a common authentication scheme that can be used with a wide variety of applications on Unix. You will master PAM topics and take control over authentication for your organization IT infrastructure. If you are Linux or Unix sysadmin, I would highly recommend this book. Once again Michael W Lucas nailed it. The only book you may need for PAM deployment. get “PAM Mastery” (https://www.michaelwlucas.com/tools/pam) *** Reflections on Trusting Trust - Ken Thompson, co-author of UNIX (http://www.win.tue.nl/~aeb/linux/hh/thompson/trust.html) Ken Thompson's "cc hack" - Presented in the journal, Communication of the ACM, Vol. 27, No. 8, August 1984, in a paper entitled "Reflections on Trusting Trust", Ken Thompson, co-author of UNIX, recounted a story of how he created a version of the C compiler that, when presented with the source code for the "login" program, would automatically compile in a backdoor to allow him entry to the system. This is only half the story, though. In order to hide this trojan horse, Ken also added to this version of "cc" the ability to recognize if it was recompiling itself to make sure that the newly compiled C compiler contained both the "login" backdoor, and the code to insert both trojans into a newly compiled C compiler. In this way, the source code for the C compiler would never show that these trojans existed. The article starts off by talking about a content to write a program that produces its own source code as output. Or rather, a C program, that writes a C program, that produces its own source code as output. The C compiler is written in C. What I am about to describe is one of many "chicken and egg" problems that arise when compilers are written in their own language. In this case, I will use a specific example from the C compiler. Suppose we wish to alter the C compiler to include the sequence "v" to represent the vertical tab character. The extension to Figure 2 is obvious and is presented in Figure 3. We then recompile the C compiler, but we get a diagnostic. Obviously, since the binary version of the compiler does not know about "v," the source is not legal C. We must "train" the compiler. After it "knows" what "v" means, then our new change will become legal C. We look up on an ASCII chart that a vertical tab is decimal 11. We alter our source to look like Figure 4. Now the old compiler accepts the new source. We install the resulting binary as the new official C compiler and now we can write the portable version the way we had it in Figure 3. The actual bug I planted in the compiler would match code in the UNIX "login" command. The replacement code would miscompile the login command so that it would accept either the intended encrypted password or a particular known password. Thus if this code were installed in binary and the binary were used to compile the login command, I could log into that system as any user. Such blatant code would not go undetected for long. Even the most casual perusal of the source of the C compiler would raise suspicions. Next “simply add a second Trojan horse to the one that already exists. The second pattern is aimed at the C compiler. The replacement code is a Stage I self-reproducing program that inserts both Trojan horses into the compiler. This requires a learning phase as in the Stage II example. First we compile the modified source with the normal C compiler to produce a bugged binary. We install this binary as the official C. We can now remove the bugs from the source of the compiler and the new binary will reinsert the bugs whenever it is compiled. Of course, the login command will remain bugged with no trace in source anywhere. So now there is a trojan'd version of cc. If you compile a clean version of cc, using the bad cc, you will get a bad cc. If you use the bad cc to compile the login program, it will have a backdoor. The source code for both backdoors no longer exists on the system. You can audit the source code of cc and login all you want, they are trustworthy. The compiler you use to compile your new compiler, is the untrustworthy bit, but you have no way to know it is untrustworthy, and no way to make a new compiler, without using the bad compiler. The moral is obvious. You can't trust code that you did not totally create yourself. (Especially code from companies that employ people like me.) No amount of source-level verification or scrutiny will protect you from using untrusted code. In demonstrating the possibility of this kind of attack, I picked on the C compiler. I could have picked on any program-handling program such as an assembler, a loader, or even hardware microcode. As the level of program gets lower, these bugs will be harder and harder to detect. A well installed microcode bug will be almost impossible to detect. Acknowledgment: I first read of the possibility of such a Trojan horse in an Air Force critique of the security of an early implementation of Multics. I can- not find a more specific reference to this document. I would appreciate it if anyone who can supply this reference would let me know. Beastie Bits Custom made Beastie Stockings (https://www.etsy.com/listing/496638945/freebsd-beastie-christmas-stocking) Migrating ZFS from mirrored pool to raidz1 pool (http://ximalas.info/2016/12/06/migrating-zfs-from-mirrored-pool-to-raidz1-pool/) OpenBSD and you (https://home.nuug.no/~peter/blug2016/) Watson.org FreeBSD and Linux cross reference (http://fxr.watson.org/) OpenGrok (http://bxr.su/) FreeBSD SA-16:37: libc (https://www.freebsd.org/security/advisories/FreeBSD-SA-16:37.libc.asc) -- A 26+ year old bug found in BSD's libc, all BSDs likely affected -- A specially crafted argument can trigger a static buffer overflow in the library, with possibility to rewrite following static buffers that belong to other library functions. HardenedBSD issues correction for libc patch (https://github.com/HardenedBSD/hardenedBSD/commit/fb823297fbced336b6beeeb624e2dc65b67aa0eb) -- original patch improperly calculates how many bytes are remaining in the buffer. From December the 27th until the 30th there the 33rd Chaos Communication Congress[0] is going to take place in Hamburg, Germany. Think of it as the yearly gathering of the european hackerscene and their overseas friends. I am one of the persons organizing the "BSD assembly (https://events.ccc.de/congress/2016/wiki/Assembly:BSD)" as a gathering place for BSD enthusiasts and waving the flag amidst the all the other projects / communities. Feedback/Questions Chris - IPFW + Wifi (http://pastebin.com/WRiuW6nn) Jason - bhyve pci (http://pastebin.com/JgerqZZP) Al - pf errors (http://pastebin.com/3XY5MVca) Zach - Xorg settings (http://pastebin.com/Kty0qYXM) Bart - Wireless Support (http://pastebin.com/m3D81GBW) ***

1:50 - Introducing Torgeir Helgevold Blog Github Twitter 3:05 - Defining and using Web Worker 8:55 - Web Worker and value communication between threads 15:05 - Booting an app in Web Worker vs a browser 20:15 - Web Worker and mobile browsers 23:55 - Reality and perception of running apps on mobile devices 29:00 - Multi-threading and Web Workers Picks: Angular NgModule Doc (John) Tinker Crate (John) Angular 2 Router by Victor Savkin (Lukas) “Out of the Tar Pit” by Ben Moseley and Peter Marks (Lukas) Hardcore Henry (Joe) Vid Angel (Joe) Angular 2 Class with John Pop and Dan Moleen. Use code “AIA” for $200 off registration (Joe) Angular 2 Gitter chat (Tor)

1:50 - Introducing Torgeir Helgevold Blog Github Twitter 3:05 - Defining and using Web Worker 8:55 - Web Worker and value communication between threads 15:05 - Booting an app in Web Worker vs a browser 20:15 - Web Worker and mobile browsers 23:55 - Reality and perception of running apps on mobile devices 29:00 - Multi-threading and Web Workers Picks: Angular NgModule Doc (John) Tinker Crate (John) Angular 2 Router by Victor Savkin (Lukas) “Out of the Tar Pit” by Ben Moseley and Peter Marks (Lukas) Hardcore Henry (Joe) Vid Angel (Joe) Angular 2 Class with John Pop and Dan Moleen. Use code “AIA” for $200 off registration (Joe) Angular 2 Gitter chat (Tor)

1:50 - Introducing Torgeir Helgevold Blog Github Twitter 3:05 - Defining and using Web Worker 8:55 - Web Worker and value communication between threads 15:05 - Booting an app in Web Worker vs a browser 20:15 - Web Worker and mobile browsers 23:55 - Reality and perception of running apps on mobile devices 29:00 - Multi-threading and Web Workers Picks: Angular NgModule Doc (John) Tinker Crate (John) Angular 2 Router by Victor Savkin (Lukas) “Out of the Tar Pit” by Ben Moseley and Peter Marks (Lukas) Hardcore Henry (Joe) Vid Angel (Joe) Angular 2 Class with John Pop and Dan Moleen. Use code “AIA” for $200 off registration (Joe) Angular 2 Gitter chat (Tor)

Angular 2 testing using Protractor, Karma and more withJulie Ralph   Panelists: PatrickJS, Ed Conolly Guests: Julie RalphOutline Background Testing landscape Firstquestion...Jasmine or Mocha? j/k Seriously, though, give us a layout of the testinglandscape. What are the major tools/libraries involved in testing an Angular 2web app? When do you use Karma vs Protractor How has the landscape evolved over theyears? What is new with the latest Karma and Protractor? New world of JavaScript How doyou deal with the build process and testing? Webpackor System offer advantages for testing? Are thereare special features in Karma or Protractor for Angular 2? Testing as a discipline How doyou get developers to actually write tests? Why don’tdevelopers write tests? How doyou maintain discipline over time? Generalguidelines for testing to follow? Anythoughts or experiences with BDD / CucumberJS and protractor? Testing strategy When doyou use unit tests vs integration tests vs e2e (and server vs browser) MockedAPIs vs Real APIs, should my protractor tests really be e2e? Other frameworks What doyou think of AVA? https://github.com/sindresorhus/ava Future What doesthe future hold for testing?Tips & Picks PatrickJS Zone.js0.6.x https://github.com/angular/zone.js/ How toTest RxJS http://staltz.com/how-to-debug-rxjs-code.html Chaos Monkey http://techblog.netflix.com/2012/07/chaos-monkey-released-into-wild.html Gremlins.jshttps://github.com/marmelab/gremlins.js   Jeff Whelpley StraightOutta Compton With latest TypeScript, you may not need Webpack https://medium.com/@vivainio/with-latest-typescript-you-may-not-need-webpack-417d2ef0e773#.2z0xbjndi Ng2 testseed https://github.com/juliemr/ng2-test-seed Web Workers and Service Works by Gleb https://www.youtube.com/watch?v=4axZ3D75Llg&list=UU_DH6Z_K_3JRgOdDnwHLrLw   Ed Instanttest feedback in your IDE - http://wallabyjs.com/ ConfigurableAPI responses -  https://github.com/wongatech/angular-multimocks AngularConnectScholarships / CFP   Julie Angularmaterial is alpha: https://github.com/angular/material2 Niftyproject website from Seattle Times: http://projects.seattletimes.com/2016/elwha/ Juliepromises to update ng2-test-seed today :) --- Support this podcast: https://anchor.fm/angularair/support

Why Ionic 2 is going to rock your world Panelists: Olivier Combe, PatrickJS, Josh Moont (fromAngularConnect) Guests: Adam Bradley, Brandy Carney, Tim Lancina, Mike Hartington#main-content Intro Ionic 2 Beta How is it going? Any numbers you can give us for adoption rates so far? https://www.npmjs.com/package/ionic-angular Just switched from ionic-framework npm to ionic-angular https://www.npmjs.com/package/ionic Any notable apps published with Ionic 2? Navigation Create own router How does it work on the web? Work with deep linking? Work with UI Router or Component Router in the future? Jeff note: mention working with universal Cool stuff Ionic team has been working on: Ionic Creator Started off with subset of functionality. How has it gottenbetter over the past 4 months? Works much better Cleaned up a lot of bugs Added more components and customizations Way better now than 4 months ago and more polished,stabilized Who is the target audience for this? Two target, drastically different Developers to speed up boilerplate code dev and focus oncoding hard stuff Designers/Marketers: Starting up an app to create aclickable prototype to hand off to devs  In the future, can you create simple apps and publishwithout opening an editor? Ionic Playground Really awesome, but when will it be available for 2.0? Recent changes and Roadmap Agnosticism Initiative Why change name of package from ionic-framework toionic-angular?  Will there bean ionic-react? Have you looked at Touchstone? Angular 1 bindings? How does Web Workers and Serverside Rendering fit in?  Why change webpack to browserify? Has build complexity with webpack caused problems? What other types of issues have people run into? Ionic Market - brandy How is the adoption? Over 70k unique sessions/mo Ionic View - Tim What is the diff with TestFlight? Do you plan on supporting Windows Phone? What is the status of CodePush-like deployments? How does that work? Will Apple potentially crack down on this eventually?  Themes / SASS Sweet spot for Ionic apps? Apps that require heavy use of the camera? Memory intensive apps? How do you compare yourself with NativeScript? (Olivier)  Tips& Picks   Jeff Whelpley (not a troll FYI, lots of Ionic love in this podcast) ReactNative Radio episode 6 - React Native vs Hybrid https://devchat.tv/react-native-radio/06-developing-with-react-native-vs-hybrid Josh Moont AngularConnect - just announced our workshops including anIonic workshop with Sani Yusuf called Building Mobile Apps With Ionic 2 - see www.angularconnect.comfor more info Olivier Combe Upgrading Your Application to Angular 2 with ng-upgrade: http://blog.rangle.io/upgrade-your-application-to-angular-2-with-ng-upgrade/ Universal Windows App + Angular 2 : https://github.com/preboot/angular2-universal-windows-app Angular 2 RC milestone: https://github.com/angular/angular/milestones Brandy Windows phone support https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md#windows-mode Mike ionicworldwide.herokuapp.com Adam Help contribute to Ionic Timionic-native --- Support this podcast: https://anchor.fm/angularair/support

51 ngAir - Getting Past the Angular Learning Curve with Pascal Precht   What’s the story behind Thoughtram? What’s in a name? Overall Philosophy Why did you decide to teach? What is your approach to teaching? How do people learn? How many workshops do you give per month? Does it get tedious to teach the same thing to people over & over? Angular 1 Are you still doing Angular 1 training? What was hardest thing for people to grok with Angular 1? Angular 2 Do you see mostly people coming from Angular 1 or people totally new to Angular? What is the hardest thing for people to grok with Angular 2? How do you teach *ngFor in a way that makes sense for developers? Harder/easier to teach/learn than Angular 1? How do you manage staying involved in so many different projects? How is it to be a digital nomad? How long did it take until you could leave your daily jobs & work on Thoughtram full time? What do you think about Merrick Christiansen’s comments about not needing DI anymore since he has gone full functional programming?    Tips & Picks   Olivier Combe   Links: Read the source on Angular 2 Web Workers:  https://www.youtube.com/watch?v=5T2YySJISQw                      Picks: NG-Conf CFP, Angular Connect 2016   Jeff Whelpley      Picks: [Univesal Prerender](https://github.com/angular/universal-starter/tree/prerender) [20 Minute VC with Jeff Seibert] (http://www.thetwentyminutevc.com/jeffseibert/)   Pascal Picks: [Belgium Angular  Conference] (https://twitter.com/ngbeconf/status/690625713481846784 [Thoughtram Master Class](http://thoughtram.io/angular-master-class.html)            Angular Air is a video podcast all about Angular hosted by Jeff Whelpley. Please visit the Angular Air website (http://angularair.com) to see upcoming and past episodes. Also be sure to follow Angular Air on Twitter and Google+ to stay up to date with future episodes. Also, all episodes are on the YouTube channel as well. AngularClass Learn AngularJS, Angular 2, and Modern Web Development form the best. Looking for corporate Angular training, want to host us, or Angular consulting? twitter: @AngularClass email: info@angularclass.com chat: Join AngularClass Chat --- Support this podcast: https://anchor.fm/angularair/support

Writing Challenge: Create a Link Post for Your Blog It's time for another writing challenge - today is all about creating a 'link post' for your blog. Link posts used to be the bread and butter of bloggers but have become less popular over the last couple of years - but I think they still have real benefit for your blog - so I challenge you to create one today. Once you've published it I'd love to see what you've created in the comments of these show notes below. You can listen to todays episode above or in iTunes or Stitcher (where we'd also LOVE to get your reviews on those platforms if you have a moment). In this Episode The way things were with link posts and why they were good for the blogosphere Why link posts have become less popular Reasons to consider using link posts on your blog 6 types of link posts to try (choose one for todays challenge) Examples of the 6 Types of Link Posts Let me also give you some quick examples (all taken from the archives of ProBlogger) on the 6 types of 'link posts'. Build Upon the Points of Others - How to Build Your Blog's Audience with Long Form Evergreen Content (where I built on the ideas shared by Tim Ferriss in a podcast) Take the Opposite Point of View - 9 Reasons Why I AM an Amazon Affiliate - where I bounced off a post by another blogger who took the opposing view Build a Resource on a Topic - Four Blogging Tools to Make your Content Go Further or Where to Find Free Images Online Speedlinking/WrapUp - 11 SpeedLinks for Professional Bloggers and Web Workers (it's an old one as I've not done it for a while) One Question Interviews - 14 Bloggers Share Their Daily Blogging Routine (where I emailed some other bloggers to ask them to answer a simple question) Further Reading - Follow These Six Steps to Make Plenty of Time to Write (and Enjoy it Too) (this post had numerous 'further reading' links scattered through the post. Other Tools/Links Briefly Mentioned in todays Episode BuzzSumo Flipboard Evernote Also check out Feedly as a good RSS reading tool. Share Your Link Post In Comments Below On day 2 of this challenge I challenged you to write a 'list post' and many of you wrote and then shared links to the lists you wrote. You did so well and I enjoyed reading them. Today I'd like you to share you newly published 'link posts' in comments below. Please only share newly written posts and please also take a moment or two to surf around some of the links that others share so we can get to know other bloggers taking this challenge. Can't wait to see your posts! Full Transcript Expand to view full transcript Compress to smaller transcript view Welcome to the ProBlogger Podcast episode 7 and day 7 of 31 Days to Build a Better Blog. Today, your challenge is to create a link post for your blog. It’s a little bit retro, something I used to do in the early days of my blog, that’s disappeared a little bit from the blogosphere, but we’re going to bring it back today and I look forward to seeing your posts. You can find today’s show notes at problogger.com/podcast/7.  Before we get into today’s episode, I want to just draw your attention to our wonderful sponsor, 99designs, who make it easy for your next project to get off the ground with a quality, affordable design. To get your logo, business card, mobile app, blog template, or other blog creatives up and going, visit 99designs.com/problogger and get a $99 upgrade for your next design for free. Hi, this is Darren from ProBlogger. Welcome to day 7 of 31 Days to Build a Better Blog, where I’m giving you 31 different challenges to help improve your blog. Today, we’re going to write a blog post. It’s been a few days since we’ve done one. I think day two, we did a ‘write a list’ post and today we’re going to write a link post. A link post is a post where you are simply linking to another b...

Сегодня у нас в гостях хайлоад-дел мастер, Стас Корчагин. Поговорим про недавно вышедшие новые версии Руби и Рельсов и обсудим самые значимые, полезные нововведения. Расскажем про Web Workers: с чем их едят и для чего они могут пригодиться. Попытаемся выяснить, где можно применить в реальной жизни PHP-фреймворк Phalcon. Напоследок - про недорогой и неплохой облачный хостинг DigitalOcean. В выпуске: - Релиз Ruby 2.0 и Rails 4.0. Что нового и хорошего - Что за зверь такой, Web Workers - "Злой" PHP-фреймворк Phalcon, написанный на православном C - Про cloud-hosting DigitalOcean Наши гости: Стас Корчагин Ссылки: Web Workers animated demo Podsafe: J.1.0 - Frozen Paradise

Schepp und Peter holten sich Verstärkung bei Sebastian Golasch und beackerten mit ihm zwei Themen aus dem Bereich der Frontend-Performance. Dazu kommt die übliche Ladung Links. Schaunotizen [00:00:17] CSS-Performance Angestachelt von der Frage how much CSS should you have mäandern wir quer durch den Problemkomplex CSS-Performance. Peter und Sebastian grillten Performance-Papst Schepp unter anderem mit […]

The last few years have seen JavaScript evolve in many significant ways. The language itself saw it’s first changes in 10 years with the introduction of ECMAScript 5. The runtime is now significantly more capable with access to binary data using Typed Arrays and multiple threads using Web Workers. And JavaScript can now be used in a wide range of Microsoft platforms, including Windows Store applications, Windows Azure applications using Node.js, and of course rich web applications on IE10. In this talk, we’ll take a look at the modern JavaScript that is now available across these Microsoft platforms and the rich standards-based JavaScript applications that can be built on top.

Devices have caught up; That is, our technology dreams from the mid 90's have finally been realised. However since this time, HTML has lay dormant. We've been through a decade of tech wasteland. It's time to change the status quo and take back the web. During my session we'll look at where the future of HTML lies, including new structural elements. You'll also grasp an introduction to associated technologies that have come into popularity with the steam of HTML5: SVG, Web Sockets, Web Workers, Geo-location and making applications useful offline. Ben Schwarz is a well known Melbourne Rubyist who funds his love of good food (at home) and sake (in bars) by designing sophisticated web applications using standards-based technology. More than anything else, he is driven by a maniacal desire to produce not only elegant code, but also beautiful software in the hands of its users. Follow Ben on Twitter: @BenSchwarz Licensed as Creative Commons Attribution-Share Alike 3.0 (http://creativecommons.org/licenses/by-sa/3.0/).