Speaker 1: Hey, welcome back to another JavaScript jabber. This week on
Speaker 1: our panel, we have aj O'Neill yo.
Speaker 2: Yo yo, come at you live from the winter wonderland
Speaker 2: of Utah. Well, at least we had our first the
Speaker 2: first frost that I noticed. The grass is all frozen.
Speaker 3: Yeah. We also have Dan Shapier.
Speaker 4: Hello from Tel Aviv where here it's the first day
Speaker 4: of fall. We've essentially had the first day of rain.
Speaker 4: We're still wearing T shirts though.
Speaker 3: I'm Charles Maxwood from Top End Devs.
Speaker 2: Yeah.
Speaker 1: I had to scrape the car this morning. I didn't
Speaker 1: notice frozen grass. I don't live terribly far from aj
Speaker 1: so anyway, we have a special guest this week, and
Speaker 1: I am going to slaughter your name. I'm sorry, Danny.
Speaker 1: We have Danny Moore Kirk. Did I get anywhere in
Speaker 1: the ballpark.
Speaker 5: Yeah, somewhere around more Cadica. It's a pretty complicated name.
Speaker 5: It's Dutch or it's Belgian actually I think, but pretty good.
Speaker 3: Yeah, I'm sorry.
Speaker 1: I don't speak Dutch or Flemish in very little French,
Speaker 1: so I'll pro how it all breaks down. But yeah, welcome.
Speaker 3: To the show.
Speaker 1: We are you very much discussing down access and browser
Speaker 1: APIs and some of the capacity the browser gives you
Speaker 1: for PWA's. Before we do that, do you want to
Speaker 1: just inform people a little bit more about who you
Speaker 1: are what you do.
Speaker 5: Yeah, of course. Yeah. First of all, thanks for having me.
Speaker 5: I'm Danny Moolkaka. I'm from Amsterdam. I'm a freelance JavaScript
Speaker 5: what develop rice should say. Started professionally around two thousand
Speaker 5: and seven, two thousand and eight, and I've been also
Speaker 5: been messing around with a Tari home computer since I
Speaker 5: was a kid. I've done a lot of stuff. Worked
Speaker 5: a lot of time for the i G Bank in
Speaker 5: Amsterdam where we by on need web components, did a
Speaker 5: lot of work on Polymer back then and later with
Speaker 5: the lit framework. Currently doing a lot with web components
Speaker 5: and progressive web apps, and the creator of what p
Speaker 5: w A can Do Today, which you can find that
Speaker 5: What pw A can do dot Today. It's basically a
Speaker 5: showcase of what is possible with progressive web apps today
Speaker 5: and the apps itself a p w A. So what
Speaker 5: you can do is you can install it to your
Speaker 5: own device and then see for yourself what is possible
Speaker 5: on your device and your platform. I also publish a
Speaker 5: weekly newsletter called The Modern Web Weekly, where I also
Speaker 5: write about web components and progressive web apps in general.
Speaker 5: You can also find me on Medium and on X.
Speaker 4: So you're the guy who's still using web components, I.
Speaker 5: Am the one. Yeah I heard, I'm the only one
Speaker 5: who's still doing that.
Speaker 4: Well, I don't know, I don't think you're the only one.
Speaker 2: To be fair, No Jojo Bite does it too. That's
Speaker 2: at least two.
Speaker 4: You know, there have been a couple of of you know,
Speaker 4: those techno storms, debates, arguments, whatever you choose to call
Speaker 4: them on X and a recent, relatively recent one was
Speaker 4: about web components. Yet again, I think it started with
Speaker 4: a post that our friend Ryan Carneato wrote which was
Speaker 4: very I wouldn't say dismissive, but the harsh critique I
Speaker 4: think would be a better term of web components. But
Speaker 4: and then Rich Harris or another friend of ours, also
Speaker 4: joined the discussion, also very critical of web components. So
Speaker 4: so yeah, probably need to get Alex Russell on the
Speaker 4: show again.
Speaker 1: Yeah, YouTube says that there does and dozens of people
Speaker 1: using it. The other thing that I'll throw in is
Speaker 1: that I've used a few items libraries on my front
Speaker 1: end stuff that once I kind of cracked it open
Speaker 1: and piked under the hood, it's like, oh, they're using
Speaker 1: web components in here, and I just didn't know. So
Speaker 1: there are a lot more people probably that just don't
Speaker 1: know they're they're using them.
Speaker 5: Yeah.
Speaker 4: Yeah, but that's the thing, you know, I don't want
Speaker 4: to derail us to web components, but that's the thing
Speaker 4: the question wasn't. The discussion wasn't so much how prevalent
Speaker 4: web components are on the web. Rather it was about
Speaker 4: do web developers these days, you know, should they be
Speaker 4: using them? Do they like using them? Should they be
Speaker 4: using them if they're using some sort of framework such
Speaker 4: as React or Spelt or whatever. I think that was
Speaker 4: the main Yeah.
Speaker 5: Yeah, And there was a lot of criticism of web
Speaker 5: components because they don't really integrate quite well with the
Speaker 5: ex system framework like Swelter that Rich Harris built and
Speaker 5: React in general. There are a lot of pain points
Speaker 5: with integrating web components into these frameworks because, yeah, like
Speaker 5: the standards are taking different routes, they have different APIs.
Speaker 5: So that was basically what the what the discussion was
Speaker 5: mostly about. And yeah, I can't understand in one way
Speaker 5: that that it's quite hard if you have an existing
Speaker 5: framework to integrate these components in there that are taking
Speaker 5: different routes. But yeah, I wouldn't say it is impossible.
Speaker 5: I personally have work a lot with lit, which is
Speaker 5: also compiling down to two raw vanilla web components, and
Speaker 5: that actually works quite well.
Speaker 4: Yeah, but LID was specifically built, designed and built to
Speaker 4: work with web components. I think the majority of the
Speaker 4: criticism came, indeed from the fact that other frameworks which
Speaker 4: were not specifically designed for web components are having a
Speaker 4: hard time integrating with them. I think that that was
Speaker 4: the main source of criticism.
Speaker 5: Yeah, yeah, that was exactly it.
Speaker 3: Yeah.
Speaker 5: Yeah.
Speaker 4: Also, you know, a while back, micro front ends were
Speaker 4: all the rage, and then I completely stopped hearing about them.
Speaker 4: Now I assume people are still implementing that pattern, but
Speaker 4: for some reason, nobody's really talking about micro frontin's, at
Speaker 4: least not in my vicinity.
Speaker 5: No, I don't hear too much about that either as well.
Speaker 4: Anyway, so p WA's also yet again, I kind of
Speaker 4: paraphrase about p was that p WA's are the future,
Speaker 4: always have been, always will be and no, but I
Speaker 4: mean it's kind of a kind of criticism because it
Speaker 4: means that p w as might never arrive, because if
Speaker 4: they're always the future, It's it's the basic question is
Speaker 4: can p WAS survive Apple's attitude towards them. That's that
Speaker 4: the crux of the thing.
Speaker 5: Really, Yeah, I think that's that's the million dollar question
Speaker 5: right now. Yeah, it's it's it's like Apple is still
Speaker 5: actively frustrating the development of p w as or basically
Speaker 5: there's a lot of browser APIs that they still don't do,
Speaker 5: not support on iOS. At least here in the EU,
Speaker 5: things are changing a little bit with the digital market acts.
Speaker 5: There's at least some movement in the direction that Apple
Speaker 5: will be forced to change their ways, but that might
Speaker 5: take some quite some time before that happened, if if
Speaker 5: it will ever happen. I do think in the end
Speaker 5: it will, but it might take quite some time, just
Speaker 5: like with Microsoft in the nineties. But yeah, that is
Speaker 5: still a big issue, the lack of parity between between
Speaker 5: the Android platform and the iOS platform. But that is
Speaker 5: still something that will need to change in order for
Speaker 5: PWAs to really be the future. Yeah, although I think
Speaker 5: it's not the only ones. I think we should also,
Speaker 5: you know, hold up a mirror to ourselves as developers.
Speaker 5: This is also something that I write frequently about, is
Speaker 5: that we should also build better web apps because right now,
Speaker 5: if you look, there's so many web apps that their
Speaker 5: only job is to promote the native version of themselves.
Speaker 5: For example, if you go to LinkedIn nowadays, the first
Speaker 5: thing you see is like this big app banner that says,
Speaker 5: go to our native app, don't use our web app,
Speaker 5: go to our native app, and then the web app
Speaker 5: is just basically a dumped down version of the native app,
Speaker 5: which is really unnecessary because a lot of stuff that
Speaker 5: these native apps can do, web aps can do just
Speaker 5: as well, even worse. A lot of times, when you
Speaker 5: go to a native version of some app, it doesn't
Speaker 5: offer you anything extra that the web app cannot do.
Speaker 5: So I think we as web developers should also start
Speaker 5: just spitting out web aps that are only there to
Speaker 5: promote native apps and really start using these browser APIs
Speaker 5: that we have at our disposal nowadays.
Speaker 4: To be fair, I don't think it's a developers. I
Speaker 4: think it's the marketing department. The way that I like
Speaker 4: to put it is that when you're a web application,
Speaker 4: then on a mobile device, you're like a guest in
Speaker 4: a hotel. On the other hand, when you're a native application,
Speaker 4: it's like somebody renting the apartment. It's like a much
Speaker 4: more last in permanent relationship. The whole process of going
Speaker 4: to the store, downloading the app, installing it, getting an
Speaker 4: icon on the desktop. That's a much more permanent relationship.
Speaker 4: And that's what the marketing people want, uh. And they
Speaker 4: want to be able to push notifications, which you know,
Speaker 4: I'm not sure can you now do this on iOS
Speaker 4: or not? For a long time?
Speaker 5: You can for a long time you putdn't.
Speaker 4: I really hope that that changes the conversation. If if
Speaker 4: iOS can do that, then then maybe. But but that's
Speaker 4: that's the thing.
Speaker 3: Now.
Speaker 4: What they're what they're ignoring is the fact that people
Speaker 4: don't like installing apps. So you might prefer that people
Speaker 4: install your app, but the likelihood that they're in that
Speaker 4: they're install your app is actually very low. So you
Speaker 4: should try to make the most of your shorter term
Speaker 4: web based engagement that you have with them and make
Speaker 4: them repeat visitors. And if what you built as a
Speaker 4: web app is a PWA and the browser notices that
Speaker 4: you visit again and again, it would actually offer you
Speaker 4: to install an icon on your desktop, and like you said,
Speaker 4: you can now start sending push notifications. So it's actually
Speaker 4: a better way of getting onto the device. But I
Speaker 4: think that a lot of marketing managers just are not
Speaker 4: aware of this now.
Speaker 5: They are not, they are not. And I also see
Speaker 5: some role for developers in there to educate these these
Speaker 5: these marketing managers that these things are now available on
Speaker 5: the web. I mean, I can understand if you're not
Speaker 5: gonna that you're not gonna move all your stuff from
Speaker 5: native apps right now to web apps because you still
Speaker 5: have a lot of lack of support on iOS. But
Speaker 5: for example, if I look now at the the the
Speaker 5: PWAs that action Instagram have, you have perfectly fine functioning
Speaker 5: p w as until you turn off the network. When
Speaker 5: you try to make them work offline, it doesn't work anymore.
Speaker 5: You refresh the page, you get nothing. If you go
Speaker 5: to t X on the native app, it will just
Speaker 5: keep giving you your feet. Of course you won't have
Speaker 5: any new stuff, but you can still still use it
Speaker 5: on X. That's not the case because if you turn
Speaker 5: down the network or you you disconnect the network and
Speaker 5: you try to start up the app, it will not
Speaker 5: give you anything. There's nothing, So at least that's something
Speaker 5: that we yeah, that should be improved and that we
Speaker 5: can use right now.
Speaker 4: Yeah, Cache APIs and various storage APIs have been around
Speaker 4: for a long time on all platforms.
Speaker 5: Yeah. Yeah.
Speaker 1: And also want to point out is that the mobile
Speaker 1: platforms have an incentive to make you go through the
Speaker 1: App store as well.
Speaker 5: Oh absolutely, absolutely, Yeah.
Speaker 1: So that's just another reason why they may or may
Speaker 1: not be jazzed I guess about, you know, giving you
Speaker 1: the kind of support you want from heal.
Speaker 3: Yeah.
Speaker 4: We spoke about this on several I think on on
Speaker 4: on an episode with Bruce Lawson that we had him
Speaker 4: as a guest to talk about how mobile platforms and
Speaker 4: iOS in particular Apple and iOS in particular try to
Speaker 4: you know, kind of stammy the whole concept of p
Speaker 4: w as just in order to preserve their their store
Speaker 4: based revenue stream. It's like what it's like a thirty
Speaker 4: cut on every app based or somethings like that. That's
Speaker 4: that's insane, you know, why billions of dollars? Why would
Speaker 4: they give it up if as long as they have
Speaker 4: a choice.
Speaker 5: Yeah, yeah, I think that's that's the main intentive for them.
Speaker 5: It's just the revenue streams that they get from the
Speaker 5: from the app stores and the control that they that
Speaker 5: they have. I understand that they're not going to give
Speaker 5: it up like that. Yeah, let's hope maybe Apple and
Speaker 5: Google will find a new business model there with with
Speaker 5: web apps. Maybe that will finally give them the incentive
Speaker 5: to to move toward webaps or Yeah, otherwise, I think
Speaker 5: it's the only legislation that will force them in the end.
Speaker 5: I think that's the way.
Speaker 4: It's maybe, though, it's worthwhile to backtrack a little bit
Speaker 4: and kind of explain the difference between a p w
Speaker 4: A and a regular old web app, Like what's the
Speaker 4: what makes so what transforms a web app into a
Speaker 4: p w A.
Speaker 5: Basically, there are two things that that are like the
Speaker 5: pillars of a p w A, which is the manifest
Speaker 5: dot Jason file, which is just a metadata file that
Speaker 5: describes the items that that will be added to your
Speaker 5: home screen whenever you install the the app. You can
Speaker 5: also define other stuff in there. You can define the
Speaker 5: name in there, you can define the background color. In
Speaker 5: Chromium browsers, we also now have what they call the
Speaker 5: Enhanced Install UI. So what that means is whenever you
Speaker 5: go to a Chrome browser, like atro Chromium or Opera
Speaker 5: on the right in the address bar. When the app
Speaker 5: can be installed, when it has a manifest dot jason file,
Speaker 5: there's icons in there. You can click it and then
Speaker 5: you can install it to your device. You can also
Speaker 5: put some screenshots in there nowadays for Chromium browsers, So
Speaker 5: whenever you click that button to install the app, you
Speaker 5: get a screen that is more like installing the UI
Speaker 5: that you get when you install a native app. So
Speaker 5: you can see a nice name there, you can see
Speaker 5: a description there, and you can see some screenshots that
Speaker 5: are different for desktop and mobile. Those are also the
Speaker 5: things that you can define there. You can define short
Speaker 5: cuts also in the manifesto jason file, which is for example,
Speaker 5: on an Android device, if you push and hold the icon,
Speaker 5: then like a shortcut menu will pop up and then
Speaker 5: you can go straight to some pages in your PWA.
Speaker 5: Those are some of the things that you can define
Speaker 5: in the manifest adjacent file. And then the other thing
Speaker 5: is the service worker, which is a special kind of
Speaker 5: web worker that sits, as it were, between the network
Speaker 5: and your app. So what it can do. It can
Speaker 5: intercept the network requests and it can also cash, so
Speaker 5: it can cash assets like style sheet, scripts, images, you
Speaker 5: name it. It can also cash whole pages or whenever
Speaker 5: you install the web app, you can just give it
Speaker 5: a list of routes and URLs that it will then
Speaker 5: all visit and then it will cash the resulting HTML
Speaker 5: or the image or the script or the style sheet
Speaker 5: or whatever. Then you can define a fetch handler in
Speaker 5: the air that can just decide whenever you go to
Speaker 5: the network what it should do. So, for example, you
Speaker 5: can have it serve everything from the cash and then
Speaker 5: it can after that you can do an additional request,
Speaker 5: for example, to get any stuff that is new, or
Speaker 5: what you can do is, for example, you can let
Speaker 5: it always go to the network, and whenever that fails,
Speaker 5: it can serve content from the cash. The service worker
Speaker 5: also takes care of push notifications. So whenever, even when
Speaker 5: your device is or when your app is not running,
Speaker 5: whenever a push notification arrives, the operating system will wake
Speaker 5: up the service worker, and then the service worker will
Speaker 5: take care of receiving the push notification and then showing
Speaker 5: a notification on your screen. And yeah, other stuff like
Speaker 5: background sync is also something that is doing. So for example,
Speaker 5: if you have a form on your web app and
Speaker 5: the network is gone and you want to send the form.
Speaker 5: What it can do is that the service worker can
Speaker 5: intercept that request that post requests from the form. It
Speaker 5: can storage somewhere maybe in index TV, and then whenever
Speaker 5: the network comes back, there will be a sync event
Speaker 5: will be fired, and then the service worker can send
Speaker 5: that request. For example, I also use that for Google
Speaker 5: Analytics or even when people are offline, I can get
Speaker 5: that analytics data there as well. And it can also
Speaker 5: do background fetch, which is very interesting for podcast apps
Speaker 5: for example. So normally in a webpap, when you download, yeah,
Speaker 5: when you download stuff in a web app and you
Speaker 5: close the webpap, then your download is gone. But now
Speaker 5: with background fetch, that download can continue in the background.
Speaker 5: So you can just switch off your web app, the
Speaker 5: download will continue and then whenever you activate it again,
Speaker 5: the download will be will be ready for you. So
Speaker 5: those are the two main things. The service worker that
Speaker 5: takes care of all the network stuff, that intercepts network
Speaker 5: requests and cash your stuff for you. And the manifest
Speaker 5: ob Jason file, which is the metadata file that describes
Speaker 5: the icons, the callers, uh, the name and stuff like that.
Speaker 1: Okay, I want to jump in here, because you you
Speaker 1: kind of pushed a couple of my buttons and I
Speaker 1: don't I don't know if you knew this, but you did.
Speaker 1: So I have a couple of things that I'm kind
Speaker 1: of looking at, and this is specifically with the caching.
Speaker 3: And the offline download. I can't remember what you call it, but.
Speaker 1: So I've been wanting to, yeah, to give people better
Speaker 1: options for listening to podcasts, and I kept thinking, man,
Speaker 1: it should be nice.
Speaker 3: It was just a p w A. And then we've
Speaker 3: we've discussed this on other stuff.
Speaker 1: But the technology that I typically use on the back
Speaker 1: end is Ruby on Rails and they've got this nice
Speaker 1: Turbo Native which you can wrap around.
Speaker 3: A p w A and it it does pw A things.
Speaker 1: But even if I just wanted to do in the browser,
Speaker 1: there for me to have it download new episodes in
Speaker 1: the background and have them ready to go, so that
Speaker 1: if I'm offline and I'm going through the airport or whatever,
Speaker 1: I can still listen to those episodes on my device
Speaker 1: in airplane mode without internet and be good to go.
Speaker 5: Yep, exactly.
Speaker 1: And similar to that, because I'm starting to put together
Speaker 1: training videos and you know, I'm getting into AI and
Speaker 1: starting to offer those videos. But I'm also looking at
Speaker 1: I want to do kind of comprehensive like if you
Speaker 1: want a video that walks you through an API, like
Speaker 1: a web API or a you know, browser API, or
Speaker 1: you know whatever. You know, maybe I pick up something
Speaker 1: that's commonly used out there, like I don't know, you know,
Speaker 1: but it walks through.
Speaker 3: Hey, these are all the APIs.
Speaker 1: Similarly, if somebody's interested, they can say I want to
Speaker 1: be able to watch these ones offline, and then they
Speaker 1: can go and it can have those ready to go.
Speaker 1: And again they can just browse to the website on
Speaker 1: their browser and it'll just play them even though they're
Speaker 1: not connected to the Internet because it actively pulled it
Speaker 1: in when they were.
Speaker 5: Yeah. Yeah, that's exactly what you can do. So basically
Speaker 5: what it does is the service worker takes care of that.
Speaker 5: There's a couple of events there, like I don't know
Speaker 5: the exact name, it's background seeing start or something whatever,
Speaker 5: and it will download the things in the background. If
Speaker 5: you go to what PWA can do today, there's also
Speaker 5: a demo there that just downloads a lot of stuff.
Speaker 5: I think it's from Jake Archibald from some of his podcasts.
Speaker 5: I just did that to make it really take a
Speaker 5: long time. So in the meantime you can play with it.
Speaker 5: For example, if you have an Android device, it doesn't
Speaker 5: work on iOS yet, although it should be coming because
Speaker 5: it's already in Safari Tech Preview in the the future
Speaker 5: flags you can enable it. It's it's it's there, but
Speaker 5: it's not functionally yet, so it should be coming to
Speaker 5: iOS as well in the near future. Then you can
Speaker 5: see in the Messaging center or whatever it's called in Android,
Speaker 5: you can just see the download continuing and you can
Speaker 5: pause it. You can you know, go to flight Molde
Speaker 5: and then it will stop. And even if you go
Speaker 5: if it's if it's running in the background and you
Speaker 5: go back to the app, you can see that after
Speaker 5: a few seconds, the progress will pick up, so it
Speaker 5: will just continue. If it's still downloading, you can see
Speaker 5: the progress also, yeah, progressing. And basically what it does
Speaker 5: is whenever that that download is finished, it will be
Speaker 5: presented to the web app as a response, and then
Speaker 5: that response can be put in the browser cache.
Speaker 3: So that is.
Speaker 5: Basically how that that that works. It's a very simple
Speaker 5: system and yeah, that that really enables exactly what you're
Speaker 5: looking for, so you can download whatever you want in
Speaker 5: the background while the web pap is not running.
Speaker 1: Yeah, all the audio only people, I'm making all kinds
Speaker 1: of happy gestures and movements and smiles.
Speaker 3: I'm super excited about this.
Speaker 2: So and by the way, I'm I'm clicking around on
Speaker 2: the site right now, just kind of testing things out,
Speaker 2: and I'm actually kind of surprised at some of the
Speaker 2: stuff that's supported. I'll have to try it in Firefox
Speaker 2: and Mobile Safari to see if this is real. Is
Speaker 2: this all evergreen stuff, is this baseline stuff or is
Speaker 2: some of this still not everything?
Speaker 5: If you look at the for example, there's a one
Speaker 5: with the screen capturing, which is quite experimental. These are
Speaker 5: a couple of the what they call origin trials and chromium,
Speaker 5: so that's chromium only. That's the screen capturing and the
Speaker 5: element capture, which enables you, for example, to do a
Speaker 5: screen recording of a short and dumb element. Yeah, and
Speaker 5: then there's also the stuff that that Apple just blatantly
Speaker 5: refuses to implement, like Bluetooth and NFG stuff like that.
Speaker 5: I don't know if that will ever come Okay, Well, yeah.
Speaker 2: I was I was really impressed that I typed it
Speaker 2: in and I hit enter, and I could tell instantly
Speaker 2: you were used you were not using React because the
Speaker 2: page loaded when I hit enter, So that was that
Speaker 2: was That was great. And then and then I can
Speaker 2: also tell you weren't using React because when I click
Speaker 2: on a button, the U r L changes. When I
Speaker 2: click back, the back button works. So I'm pretty stoked
Speaker 2: on this.
Speaker 4: Good.
Speaker 5: Yeah, I'm currently using a a what do you call
Speaker 5: it a skeleton, so it just uses or just loads
Speaker 5: to HTML quite quite quickly. It's still a single page app,
Speaker 5: but I really want to move it to a multipage
Speaker 5: app as soon as the the cross cross document view
Speaker 5: transitions are already they're already working also in Safari Tech
Speaker 5: preview right now. Basically the only reason it's a single
Speaker 5: page app right now is because I wanted to have
Speaker 5: those sliding transitions on mobile, and the only way to
Speaker 5: do that when I started building this was to do
Speaker 5: it as a single page app and have both pages
Speaker 5: in the DOM and then do some animations.
Speaker 2: But now with the this is beautiful, I think thanks.
Speaker 2: I wish that there was something basically some boilerplate, like
Speaker 2: some copy paste boilerplate that somebody uses this as a
Speaker 2: template for how to start their web out because I mean,
Speaker 2: just no website works anymore. And this works like everything
Speaker 2: that I click, it responds instantly. There's an animation or
Speaker 2: a transition to let me know that my click was
Speaker 2: responded to. I mean, this is like using the web
Speaker 2: in nineteen ninety five, but with flat design as if
Speaker 2: it was in nineteen eighty five.
Speaker 5: Yeah, yeah, yeah, thanks thanks. I have if I had
Speaker 5: a euro for every time somebody asked me to open sources,
Speaker 5: that would be a millionaire by now. But I really
Speaker 5: want to do it. But the thing is that the
Speaker 5: code is not Yeah, I think it's a bit messy,
Speaker 5: and it's pretty integrated with Amazon. It runs on AWS.
Speaker 5: So I am thinking of starting a boiler plate for
Speaker 5: people to really start up a PWA what I did
Speaker 5: do in the meantime. On my GitHub page, there is
Speaker 5: a project called basic service Worker, which is just a
Speaker 5: service worker that enables you to make your web app
Speaker 5: work offline, because I think that's really the baseline that
Speaker 5: web apps should have, and there's so many web apps
Speaker 5: that just do not work offline, and I think any
Speaker 5: any web as should work off line nowadays.
Speaker 4: What you should do what you should do. I think, now,
Speaker 4: maybe this already exists, and maybe Fred can chime in
Speaker 4: and tell us it exists, but I would look to
Speaker 4: integrate something like that with Astro. You know, Astroid is
Speaker 4: multi page and not single pages, so they support view
Speaker 4: transitions between the pages in their framework. So having really
Speaker 4: good offline support with Astro, I think would really open
Speaker 4: up a lot of interesting possibilities for a lot of developers.
Speaker 5: Yeah.
Speaker 1: Yeah, I'm using stimulus and I'm looking at the same
Speaker 1: kinds of things.
Speaker 3: You know, it's like, oh, how much of this can
Speaker 3: I tie in?
Speaker 1: Because again, stimulus is like weight and inside your controllers,
Speaker 1: you can call into any of these APIs.
Speaker 4: Yeah, for sure, Just just to say chuck, just to
Speaker 4: say it's so yeah, to emphasize the fact that Danny
Speaker 4: kind of stated it, but it really needs to be
Speaker 4: emphasized that it's so easy to transition from a plain
Speaker 4: old web application to a p WA. Basically all you
Speaker 4: need is adjason file, which is the manifest you know,
Speaker 4: how hard is it to do adjason file and and
Speaker 4: the service worker. You know, we've been talking about all
Speaker 4: the sophisticated things that service workers can do, but you
Speaker 4: can also have a really dumb down service worker that's
Speaker 4: basically passed through and there are you know, examples of
Speaker 4: this on the web, and and just add that and
Speaker 4: and you're done. It's a p w A. Uh. And
Speaker 4: then you can start adding all the sophisticated bells and whistles.
Speaker 3: Yeah, I was I was going to ask too.
Speaker 1: So on all the demos on what pw A can
Speaker 1: do dot today, I mean, these are all just using
Speaker 1: straight up browser APIs and dom APIs.
Speaker 3: Right. There's there's no.
Speaker 1: Library or you know, special this or that you have
Speaker 1: to pull in.
Speaker 5: It's no, no, there's there's nothing really there. It's just
Speaker 5: basic vanilla JavaScript. I think. The only thing is I
Speaker 5: think I used three D dot j s for one
Speaker 5: of these demo. Have to look it up. I think
Speaker 5: it's in the orientation or the motion demo. Oh yeah,
Speaker 5: it's in the device orientation demo. If you look on
Speaker 5: that on a mobile device, there's a nice texted cube there.
Speaker 5: That's what I used three D do js for. But
Speaker 5: I don't even Yeah, I think I could even do
Speaker 5: that myself really not that hard. But the rest is
Speaker 5: no framework. Nothing is just browser APIs. Like I said,
Speaker 5: the the service worker and the manifest adjacent file. It's
Speaker 5: funny that you mentioned then the the integration with astro.
Speaker 5: I at my time, I g I did look a
Speaker 5: little bit into Astro, but I'm not even sure if
Speaker 5: we need any specific integration for that, because the service
Speaker 5: worker itself is just a a separate web worker file
Speaker 5: that probably doesn't even need any integration with with with
Speaker 5: the framework.
Speaker 4: Oh yeah, for sure. It's just that if you make
Speaker 4: the whole process as seamless for Astro developers, that would
Speaker 4: immediately provide benefit for a lot of developers. That's that's
Speaker 4: all I'm saying. Obviously, at the technological level, you don't
Speaker 4: really need anything because you know, like you said, service
Speaker 4: worker is basically just a JavaScript file. Astro is basically
Speaker 4: just a web server, you know. Yeah, that's yeah, you
Speaker 4: don't need much in a way of integration to get
Speaker 4: web service to deliver JavaScript files.
Speaker 5: Yeah, yeah, yeah, it's interesting. Now I'll have a look
Speaker 5: at that to see what I can do over there.
Speaker 5: It's the Yeah, the main thing about the service worker
Speaker 5: that people always struggle with is like the life cycle
Speaker 5: management of it and also the way you know, if
Speaker 5: something goes wrong in your service worker, it can go
Speaker 5: really rough sometimes.
Speaker 4: But I think that is mostly fixed.
Speaker 5: Though.
Speaker 4: It used to be that if you got a bug
Speaker 4: in yourself service worker, you could literally get into a
Speaker 4: situation where you would need to call your visitors and
Speaker 4: ask them to reload the page or clear the thing something.
Speaker 4: But I think they fixed that.
Speaker 5: Yeah, I don't even think there was a fix needed
Speaker 5: on the on the platform level, but I could be wrong.
Speaker 5: You can always just you know, just to put a
Speaker 5: put a no observed worker in there. But the thing
Speaker 5: is that people whenever they go to your web app,
Speaker 5: they need to get that service worker, which is mainly
Speaker 5: the hardest thing. So what I did in this basic
Speaker 5: service worker project I have on GitHub is that I
Speaker 5: made sure that the service worker can update as soon
Speaker 5: as possible, and it also actively checks if there are
Speaker 5: any new versions of that that service worker. And then
Speaker 5: I also use you know, like like page events like
Speaker 5: page height and all stuff like that. So whenever right
Speaker 5: before you close it, it will check. And then the
Speaker 5: next time you open it and the service worker is
Speaker 5: already down there, it's installing, it will be activated straight away.
Speaker 5: Whenever that is possible. It won't be possible if somebody
Speaker 5: has like multiple taps with your web app open, because
Speaker 5: that would be very messy.
Speaker 4: So you you we mentioned a couple of the items
Speaker 4: on the list here, it's worthwhile to mention a couple
Speaker 4: of more. So we've got geolocations in here, notifications. We
Speaker 4: already talked about the forms of capture. We've already talked
Speaker 4: about vibration, barcode detection, web share, payments. What what what
Speaker 4: is the payment API? What can it do? Uh?
Speaker 5: The payment API is just integrate with Google Pay and
Speaker 5: Apple Pay. So yeah, if you just got it, it's
Speaker 5: just a very simple demo. You can just click the
Speaker 5: button and then you will see in Chrome you will
Speaker 5: see a Google Pay screen coming up with one dollar cent,
Speaker 5: just just for demo, and whenever you open it in
Speaker 5: in iOS, you will see the Google pay sorry, the
Speaker 5: the Apple Pay screen. So what you can do there
Speaker 5: is is just call yeah the APIs for those specific
Speaker 5: things and have a payment done in your app. So
Speaker 5: it just integrates with with that. It's also our browser API.
Speaker 5: But then you can pick if you want to, if
Speaker 5: you want to do it with Chrome Pay or Apple Pay,
Speaker 5: and that will just completely integrate with that.
Speaker 4: And we've got speech synthesis, speech recognition, wakelock, which means
Speaker 4: that you can get your phone to unlock.
Speaker 5: No, it prevents your screen from locking, which is why yeah,
Speaker 5: which is also something like I love to cook, my
Speaker 5: wife loves to cook, so I regularly get get the
Speaker 5: recipe on my phone and then whenever your hands for dirty,
Speaker 5: you want to scroll through the recipe or you want
Speaker 5: to do something else.
Speaker 1: And then in my language, my friend yeah yeah, and
Speaker 1: that's all the time.
Speaker 5: Yeah, me too, and then the screen just goes off.
Speaker 5: You know. That's the thing. None of these sites use this,
Speaker 5: and it's so easy, so simple to use. It's just
Speaker 5: a couple of lines of code, and that will make
Speaker 5: your recipe websites stay on. You know, it will keep
Speaker 5: the screen on. You know, if you're a cook, if
Speaker 5: you're cooking and your hands for dirty, that's really something
Speaker 5: you need. But they don't use it. It's yeah yeah.
Speaker 1: My solution to this is I call my eight year
Speaker 1: old over, Okay, can you unlock my screen?
Speaker 3: Now?
Speaker 5: I do that too with my daughter. Yeah, yeah, yeah, yeah,
Speaker 5: I would come coming back. Like you said, AJ, like
Speaker 5: you were surprised that a lot of stuff is already supported.
Speaker 5: I hear that so often by web developers say oh,
Speaker 5: I have no idea that this was supported, because yeah,
Speaker 5: people don't know. And that's also why why I write
Speaker 5: about this, is to educate people about what is possible
Speaker 5: nowadays with web pats, because a lot of developers have
Speaker 5: really have no idea of what is already supported. But
Speaker 5: that's also the reason they don't use this stuff, because
Speaker 5: they don't know about it.
Speaker 3: So I guess my question on this is how much
Speaker 3: of this stuff is.
Speaker 1: Like I'm looking at the wakelock for example, and okay,
Speaker 1: so it's it's under the navigator stuff, so you really
Speaker 1: it's already there, you just you just have to run it.
Speaker 1: How much of this stuff requires you to have that
Speaker 1: service worker and how much of this stuff is just
Speaker 1: kind of part of the dom api.
Speaker 5: Let me see, I think the service worker is only
Speaker 5: for the let me see, for the backgrounds it requires
Speaker 5: a network basically, yeah, no, not even that. Basically the
Speaker 5: background fetch API for example, to download stuff in the background. Yeah,
Speaker 5: that's what needs a service worker. The background sink as well,
Speaker 5: although you could poly fill that the background sink. What
Speaker 5: it does is you can ever whenever there is for example,
Speaker 5: you want to send out some message. Let's say that
Speaker 5: you have an email client and you want to send
Speaker 5: out an email. What you can do with background sync
Speaker 5: is to create like this out box functionality. So what
Speaker 5: you can do is you can send it straight, you
Speaker 5: can send it to an outbox, and whenever you are online,
Speaker 5: it will go from the outbox it will be sent immediately.
Speaker 5: But when you are offline, it will go to the
Speaker 5: service worker and then the service worker will take care
Speaker 5: of sending it whenever the network is back. But that's
Speaker 5: also something you can poly fill. With the online and
Speaker 5: offline events, you won't have the granular control that you
Speaker 5: have with background sync.
Speaker 4: Also also the limitation that the web page would need
Speaker 4: to be open and in focus, whereas with the service
Speaker 4: worker it can it can work even if your web
Speaker 4: page is closed.
Speaker 5: Uh yeah, yeah, yeah, oh yeah, that's another thing yet
Speaker 5: that also where yeah, the sink will also be raised
Speaker 5: when when it's not. No, I don't think so with
Speaker 5: the background sync.
Speaker 4: No. What I mean is with background sync, with using
Speaker 4: a service worker, the web page doesn't need to be open,
Speaker 4: like whereas if you're just using the online offline events
Speaker 4: in the page itself, obviously the page needs to be
Speaker 4: open in order for it to work.
Speaker 5: So what you're saying is that whenever I register a
Speaker 5: SYNC something that needs to be done whenever the network
Speaker 5: is back. So when I close the p w A
Speaker 5: and then the networks come back, that that task will
Speaker 5: be executed.
Speaker 4: Might be and I need to you know, I haven't
Speaker 4: played with it, you're the PWI expert, but that but
Speaker 4: that would be that, that would be Like the whole
Speaker 4: idea of a service worker is the fact that you've
Speaker 4: got code that is running like p w I basically
Speaker 4: serves two purposes really. First of all, it's a proxy
Speaker 4: between the page and the network, so it gives you
Speaker 4: a lot of control over what goes through the network.
Speaker 4: You know what comes from the cash. It gives you
Speaker 4: a lot of cashing capabilities that are otherwise not available.
Speaker 4: And the fact that it continues to run or can
Speaker 4: run when the page is closed, which means that it
Speaker 4: can do background things even when the page is closed,
Speaker 4: even theoretically when the browser app is not in the focus,
Speaker 4: like the background sync, like sending push notifications.
Speaker 5: Have to admit, I didn't even try that yet. With
Speaker 5: the background shink like like having some shank registered and
Speaker 5: then closing the p w A and then reconnecting the network.
Speaker 5: So that's interesting. I'm going to try that tonight. I
Speaker 5: didn't even I didn't even try that. Yeah, it's a
Speaker 5: very good, very good remark.
Speaker 3: So his mad scientists costume on for Halloween and then
Speaker 3: try it.
Speaker 5: Yeah, yeah, no, that's really good. That's really good. Actually,
Speaker 5: other than that, it's only the notifications that will need
Speaker 5: a service worker, but like the rest, I'm quickly scanning
Speaker 5: through it. Yeah, all the other stuff is just basically
Speaker 5: workable even without a a service.
Speaker 1: Worker, right, because it's either dom or browser and it
Speaker 1: doesn't need the network.
Speaker 5: No, no, it doesn't really need to need a network.
Speaker 4: No, no, Yeah, it's it's a huge shame that all
Speaker 4: this API is there, it's available, a lot of it
Speaker 4: is even supported by Safari, and yet web developers hardly
Speaker 4: ever use it.
Speaker 5: Yeah exactly, exactly, Yeah, yeah exactly. I think it's a
Speaker 5: combination of people not being aware of this, that this
Speaker 5: stuff is available, and yeah, whenever they need something or
Speaker 5: functionality like this, I think they will be quicker to
Speaker 5: go to a native app and build that, and then.
Speaker 4: The company, the company might go to a native app,
Speaker 4: but the actual developer, I mean, you know, there are
Speaker 4: a lot of people who are web developers and don't
Speaker 4: really have much experience in building native applications. Me for example, Uh,
Speaker 4: and you know, obviously I can go and learn it.
Speaker 4: It's you know, it's not the end of the world,
Speaker 4: but it's effort. And if I can get the same
Speaker 4: functionality using technologies that I'm very familiar with, then you know, it's.
Speaker 1: So when Yeah, the point is is that a lot
Speaker 1: of this stuff that's on what compete WA, what PWA
Speaker 1: can do today I'm trying to it's a jumble of
Speaker 1: letters in front of my face and so I struggle
Speaker 1: to read it. But a lot of these I didn't
Speaker 1: know were there, and so it wouldn't even occur to
Speaker 1: me to try to do it with my application, if
Speaker 1: that makes sense. But I mean, like a barcode detection, right,
Speaker 1: I would have gone out and I would have found
Speaker 1: some library that would have you know, magiced it in.
Speaker 1: But you know, it's like, oh well, anyway, So one
Speaker 1: other thing, and yeah, now we're getting into kind of
Speaker 1: the NUBE questions is so let's say that I want
Speaker 1: to put this in to my application, and you know
Speaker 1: I mentioned that like the background sync and the background
Speaker 1: fetch and some of this other stuff is some of
Speaker 1: what I'm interested in. Those require service worker. How do
Speaker 1: I set one up?
Speaker 3: Is it just.
Speaker 1: I mean, is there just an API for that that
Speaker 1: I just you know, call, and then how do I
Speaker 1: tell it how to connect to the back end to respond?
Speaker 1: And then finally what does that response look like?
Speaker 5: Yeah, So basically what you need is a script, so
Speaker 5: a separate script which is a service worker. And like
Speaker 5: I said, it's a special kind of web worker. And
Speaker 5: what it consists of. I already mentioned the life cycle
Speaker 5: of a service worker, So what it goes through. Whenever
Speaker 5: a web page is loaded and it finds a service
Speaker 5: worker script, it will load that script. The service worker
Speaker 5: will then start to install itself. So basically what you
Speaker 5: do is you define an event handler for the install event.
Speaker 5: So it's really a simple event handler that you put
Speaker 5: in there for the install event. And then you can
Speaker 5: call the cash API, which is cash ad or cash
Speaker 5: ad all. You can just give it an array of URLs.
Speaker 5: That's all you need to give it. Let's say you
Speaker 5: have a couple of scripts, you have a couple of images,
Speaker 5: you have a couple of style sheets. You all put
Speaker 5: the r ls to those files into the array. And
Speaker 5: then let's say you also have some htmail routes that
Speaker 5: don't end in a dot htmail file, you can also
Speaker 5: give that to the service worker, and then when the
Speaker 5: service worker starts to install, it will run that that
Speaker 5: install event handler, and inside that event handler, it will
Speaker 5: add all those it will fetch all the all the
Speaker 5: stuff it needs, like the the the assets style sheets,
Speaker 5: whatever you put in there, it will fetch that. It
Speaker 5: will fetch the pages, and then it will put a
Speaker 5: response object into the browser cache. And I'm not talking
Speaker 5: about the cash that the browser uses for the network,
Speaker 5: but it's really like it's it's a property on the
Speaker 5: window object. And then after that, whenever that is finished
Speaker 5: that that install phase, it will go to the to
Speaker 5: the activate phase. And in that phase you can, for example,
Speaker 5: you can remove some old cashes. For example, one of
Speaker 5: the best practices is to always version it. So I
Speaker 5: always put like a version variable in my service worker,
Speaker 5: and then I attach that to the name of the
Speaker 5: of the cash, which can be anything you want. And
Speaker 5: then what you can you can check for other cases
Speaker 5: that are still there, like for a previous service worker,
Speaker 5: you can delete them and then you can add yeah,
Speaker 5: or you can start up. You can you can even
Speaker 5: create an index TV or something like that if you
Speaker 5: have to serve other stuff. And then after that, yeah,
Speaker 5: you need a fetch handler, which is also a simple
Speaker 5: simple event handler. So whenever there a network request is done,
Speaker 5: the service worker will raise a fetch event and then
Speaker 5: the event handler for that will, yeah, will handle the
Speaker 5: network requests. And then inside that you can just do
Speaker 5: basically whenever you want. You can let's say, you can
Speaker 5: use you can serve other pages if you want, you
Speaker 5: can serve offline pages. You can decide if you want
Speaker 5: to serve everything from the cash or if you want
Speaker 5: to serve everything from the network, or maybe something in
Speaker 5: between whatever. So basically it's just yeah, a lot of
Speaker 5: scripts and a lot of event line was that you
Speaker 5: use for that. Like, for example, a push notification is
Speaker 5: also an event that is raised, so you put an
Speaker 5: event handle for the push event. The background fetch is
Speaker 5: also an event, and background saying they're all events, so
Speaker 5: a lot of it is just event based.
Speaker 4: Like I said, the easiest I think way to think
Speaker 4: about it is as a cloud as a proxy, but
Speaker 4: instead of running somewhere out in the cloud, it's running
Speaker 4: locally on your device. So all the network, all the
Speaker 4: network goes through that and it can and it you know,
Speaker 4: has total insight into the actual content going back and forth,
Speaker 4: and it can pretty much do whatever it wants with
Speaker 4: the requests that are for that for the pages on domain.
Speaker 4: That's that's willing to know. So if you're making requests
Speaker 4: to third party stuff that does not go to the
Speaker 4: service work, it does it does? It does go to
Speaker 4: the service Yeah.
Speaker 5: Yeah, yeah it does. I think what you're referring to
Speaker 5: is that the service worker can only control its own domain.
Speaker 5: It cannot control any other domains. There are some okay,
Speaker 5: help me right now. Sorry, yeah, yeah, yeah. So for example,
Speaker 5: what you can do is if you have Google Analytics,
Speaker 5: for example, I always had that when I when it
Speaker 5: was trying to fetch the Google Analytics script, that it
Speaker 5: would just give an error and then it wouldn't work
Speaker 5: offline anymore because it would would give an error. So
Speaker 5: what I did at a certain point, I would just
Speaker 5: fetch the script and also store that in the browser cache.
Speaker 5: So if you have third party scripts, you can also
Speaker 5: catch those and then deserved worker can also yeah, serve
Speaker 5: those value are offline. And that's very important because you know,
Speaker 5: if you want your app to work offline and there
Speaker 5: is like an error in there, and you know that
Speaker 5: the worst thing is if you have an error in
Speaker 5: your index page is like the first page, then it serves.
Speaker 5: If there's something wrong in there, it won't work, it
Speaker 5: will give you an error, it won't serve the page,
Speaker 5: and your whole offline functionality is gone.
Speaker 4: Yeah, this is one of those really annoying things. Like,
Speaker 4: for example, if I go on a flight and you know,
Speaker 4: I'm reading something interesting at the airport just before the flight,
Speaker 4: you know, boards, and then I bought the flight and
Speaker 4: I want to keep on reading but the pages, but
Speaker 4: because I switch between apps or something, the browser decides
Speaker 4: that it has to reload the tab. I can't because
Speaker 4: I'm in airplane mode or whatever. And that's gone on,
Speaker 4: and you're thinking, hey, it's just text. Why can't I
Speaker 4: see what was there before? But I can't. And with
Speaker 4: service worker, it's so easy.
Speaker 5: It is it is. Yeah, it happens to me all
Speaker 5: the time as well. I use the Fiery browser to
Speaker 5: put it in the reading list, and it always or
Speaker 5: like nine times out of tend it just refreshes for
Speaker 5: no reason, and then it's it's not stored right or something.
Speaker 5: I don't know, but yeah, that's that's like you said,
Speaker 5: it's another very nice use case for a service work
Speaker 5: and just put a button on your pages if you
Speaker 5: haven't already cashed them, and then put a button like
Speaker 5: read offline or something.
Speaker 3: That's.
Speaker 5: Yeah, that's also something that you can do with a
Speaker 5: service worker.
Speaker 1: Yeah, it's It's interesting because so topendevs dot com for example,
Speaker 1: it uses import maps, right, and so a lot of
Speaker 1: the a lot of the scripts are being pulled from
Speaker 1: a CDN somewhere instead of being loaded up by my
Speaker 1: own domain. And so what you're telling me is is
Speaker 1: that it can capture and cash those so that yeah,
Speaker 1: when somebody comes back around, the page still works even
Speaker 1: though that's the third party stuff. The other example I'm
Speaker 1: thinking of is I've played with the idea, and this
Speaker 1: is on another app that I built several years ago,
Speaker 1: played with the idea of allowing people to essentially put
Speaker 1: together their own podcast feeds out of other third party audio.
Speaker 3: And so for example, you know and.
Speaker 1: I, the idea was to put a plug in into
Speaker 1: like Chrome, and so then it's I'm on this page,
Speaker 1: it has some audio or video that I want to
Speaker 1: add to this feed, and so I can you know,
Speaker 1: click something in there, but then it.
Speaker 3: Would load it up on the page for the actual app.
Speaker 1: And so what you're telling me is I can catch
Speaker 1: those two even though I'm not hosting them and they're
Speaker 1: not under my own domain.
Speaker 5: Yeah, yeah, yeah you can.
Speaker 3: You can.
Speaker 5: You can just fetch it. You can. You can let
Speaker 5: the surface work and fetch anything you want and then
Speaker 5: store the response objects in uh in the browser cache.
Speaker 5: That's that's really really no problem. And another thing but
Speaker 5: I also use is I can also put that in
Speaker 5: the chat. By the way, another demo app that I
Speaker 5: built some time ago is that also uses a readable stream.
Speaker 5: So and that's something that I started working on again
Speaker 5: because now with the with the cross document view transitions,
Speaker 5: this could be very handy. If you have cross document
Speaker 5: view transitions, you need to make sure that your page
Speaker 5: is loaded very fast, because otherwise, if you click a
Speaker 5: button or you click a link and you have a
Speaker 5: transition and it takes like two seconds, you know, that
Speaker 5: really doesn't look good. So a couple of years ago,
Speaker 5: I also I put it in the chat. Now is
Speaker 5: also a demo app, very simple that uses a readable stream.
Speaker 5: To serve the responses. So what it does is everything
Speaker 5: is split out in a header, footer, and a content
Speaker 5: and then what the browser or what the service worker
Speaker 5: does is it intercepts all the requests and then when
Speaker 5: it does, it streams the response back to you, which
Speaker 5: stitches it back together from the header, the content, and
Speaker 5: the footer. And that allows you to have a multipage
Speaker 5: app that is well nearly as fast as a single
Speaker 5: page app because it streams the content to the browser
Speaker 5: and then the browser streaming partier which is insanely fast
Speaker 5: and can stream everything. And yeah, you can basically have
Speaker 5: a multipage app with a service worker that's just as
Speaker 5: fast as a single page app.
Speaker 3: Sounds a lot of like what Turbo does.
Speaker 5: Yeah, I think it's similar. I think it's I heard
Speaker 5: that term before. Yeah, I think I think they also
Speaker 5: do something like that. Yeah. Yeah.
Speaker 4: If we can get some of our listeners to just
Speaker 4: try out the stuff, you know, go into your page,
Speaker 4: look browser around, try it out, get inspired, and actually
Speaker 4: try it out, I think I think we've done.
Speaker 2: We've done a few the.
Speaker 5: Web that would be wonderful. Yeah, yeah, yeah, yeah, yeah,
Speaker 5: that's also what I consider my job to educate people
Speaker 5: on what is available what you can already do with
Speaker 5: with web apps today, because there is yeah, like there
Speaker 5: is so much that you can already do. I mean,
Speaker 5: even if you don't want pw A, you don't want
Speaker 5: people to install your app, you know, really with the
Speaker 5: with the icon to their home screen, at least make
Speaker 5: sure that your app works offline. That when you know,
Speaker 5: whenever they go to you, and not even because people
Speaker 5: they tell me, yeah, I have this chat app, and
Speaker 5: there's no point for it to work offline because you
Speaker 5: cannot chat when you are off line. Of course you can,
Speaker 5: but I've been in so many situations. You know, you're
Speaker 5: in a parking garage or in a building, or you're
Speaker 5: in some rule area where you just do not have
Speaker 5: a network, maybe for thirty seconds or a couple of minutes.
Speaker 5: I mean, that is my definition of line. It's not
Speaker 5: like totally offline, but it's for those situations where people
Speaker 5: have a bad network, they're in a parking garage or something.
Speaker 5: You should make sure that your web app also works
Speaker 5: in those those conditions and that they don't get this
Speaker 5: ugly dinosaur screen that tells them that they're offline. There's
Speaker 5: there's really no need for that. It's not something that's
Speaker 5: uh that that that native apps do and that web
Speaker 5: app shouldn't do either, I think. So at least get
Speaker 5: the service worker running.
Speaker 4: Well, yeah, you've got you, you've got you've let's say
Speaker 4: a user filling this big form and then clicks submit
Speaker 4: or something, and because they're walking around so that I
Speaker 4: don't know, they move between two cell towers or something,
Speaker 4: and they lost connectivity for a second or two. You
Speaker 4: know that that shouldn't kill that form submit.
Speaker 5: No, no, exactly, but that's what happens all the time.
Speaker 1: Well, the other the other thing is you're talking about
Speaker 1: a chat or something that maybe it might be time sent.
Speaker 1: You could also simply just put some intelligence around it,
Speaker 1: right because at this point it's just JavaScript calling an
Speaker 1: API in your browser as, hey, you are offline for
Speaker 1: more than five minutes, do you still want to push
Speaker 1: this chat post?
Speaker 5: Yeah? Yeah, yeah, for example, or you could maybe store
Speaker 5: a couple of messages and then send them later. Might
Speaker 5: not always make sense, but that's at least something that
Speaker 5: that that you can do. And also, you know, when
Speaker 5: when you have a service worker, you already have all
Speaker 5: your assets cashed and people are on a bad network,
Speaker 5: they don't need to download that anymore because it's already there.
Speaker 4: So yeah, that's completely true. But I want to emphasize
Speaker 4: that even though you get fine grained, granular control over
Speaker 4: cashing with service worker, that's not a justification to not
Speaker 4: put proper cash shadders on your stuff.
Speaker 5: So of course should always always of course, yeah, of course.
Speaker 5: But what I mean is that you know, if you
Speaker 5: are on a bad network and people already visited you're
Speaker 5: at one time that the assets are already there, so
Speaker 5: they don't need to download these again. So you can
Speaker 5: use that that little network that you have, you can
Speaker 5: use it for more important stuff.
Speaker 4: M Yeah, for sure. The amount of times that you know,
Speaker 4: let's say, at the airport, I you know I'm late
Speaker 4: from I you know, I'm late for my flight, or
Speaker 4: I'm worried that I'll be late for my flight. But
Speaker 4: I'm overseas on a data plan. Connectivity is shitty. I
Speaker 4: try to check what's going on, and I'm having frustrating
Speaker 4: problems trying to get the air line website to load.
Speaker 4: You know that's happened too often.
Speaker 5: Yeah, I'm sure I have the same thing. It's I
Speaker 5: was in the last weekend, I was with my wife
Speaker 5: at Aka to pick up something. So we were at
Speaker 5: the pickup point down in the parking garage, and then
Speaker 5: I wanted to I was checking the my my newsletter.
Speaker 5: I got a couple of new subscriptions, so I wanted
Speaker 5: to go to the member list and I had to
Speaker 5: do some filtering. So I clicked the filter button and
Speaker 5: then this dialogue screen comes up, but it's initially it's empty.
Speaker 5: There's not even a button there to close it. So
Speaker 5: I was there for two minutes with this filter screen
Speaker 5: that you know, blogs like more than half of the screen,
Speaker 5: and I couldn't even click it away because it was
Speaker 5: still loading all the stuff. It was loading everything that
Speaker 5: is inside. Yeah, of course this is just bad programming.
Speaker 5: They should have put the button already there and at
Speaker 5: least tested it on a slow network. But if you
Speaker 5: already have that, you know, framed out with a service worker,
Speaker 5: that stuff wouldn't happen.
Speaker 4: I have to say that, you know. Again, going to
Speaker 4: our initial conversation about native apps versus web apps, even
Speaker 4: with other PWA stuff, a lot of times web apps
Speaker 4: are just better. For example, I've seen a lot of
Speaker 4: news apps that when you go to let's say some
Speaker 4: news article. Until they load everything, they show nothing, so
Speaker 4: until it finishes downloading the largest ad or something, you
Speaker 4: basically can't read anything. And this is something the web
Speaker 4: has solved like ages ago. So it's it's so frustrating.
Speaker 4: Sometimes I just wish that, you know, that instead of
Speaker 4: using their native app, I could just use their web app,
Speaker 4: because sometimes you can't, but a lot of cases you can't. Yeah, yeah, frustrating.
Speaker 5: Yeah, yeah, yeah, I do the same thing I I.
Speaker 5: You know, sometimes I just refuse to go to the
Speaker 5: to the native app. But for example, the other day,
Speaker 5: I also write articles on mediums. The other day somebody
Speaker 5: responded to one of my articles, and then I was
Speaker 5: sitting on the couch at home with my phone and
Speaker 5: I wanted to respond, but I couldn't do it because
Speaker 5: then you have to go to the native app, which
Speaker 5: is I think it's about eighty four and a half
Speaker 5: megabytes just to fill out a form to write a comment,
Speaker 5: which is simply not of course it's possible, but it's
Speaker 5: something that they want you to download the native app for,
Speaker 5: which is ridiculous, of course, but that also feats the idea,
Speaker 5: I think to end users and maybe to developers to
Speaker 5: a certain extent, that web apps are just bad, they're inferior,
Speaker 5: they're not as good as native apps, which is of
Speaker 5: course not true. But because a lot of stuff is
Speaker 5: in native apps that is not in web apps. While
Speaker 5: it could be, or maybe it's deliberately not there, people
Speaker 5: really get the idea that web apps are inferior, and
Speaker 5: that's really a shame, I think, because it doesn't have
Speaker 5: to be that way.
Speaker 3: Yeah.
Speaker 1: So are there any things that the native apps do
Speaker 1: that the PWA's don't like? And I'm even talking about
Speaker 1: experience things like, for example, your web app does have
Speaker 1: to say ask for permission to use your camera and
Speaker 1: microphone before it works, as opposed to in a native
Speaker 1: app it just kind of does it without asking you.
Speaker 5: Yeah. Yeah, those are a couple of things.
Speaker 3: Well.
Speaker 5: For example, I think the main thing that that hinders
Speaker 5: web app is the install experience, and that's also something
Speaker 5: that Apple Apple refuses to implement properly. There is a
Speaker 5: browser API that allows you to trigger that install screen.
Speaker 5: Like I said before, in Chromium browsers, you can even
Speaker 5: have like a better screen with screenshots and a description
Speaker 5: and the name of the app, all the nice stuff
Speaker 5: that makes it look more like you're installing a native app.
Speaker 5: Apple doesn't do that. You have to go to the
Speaker 5: share screen and scroll all the way down, and then
Speaker 5: there's this add to home screen button. I think that
Speaker 5: that's the main thing that hinders us. But for the rest, yeah,
Speaker 5: it's stuff like I think there's a couple of background
Speaker 5: I think native apps can do some more stuff in
Speaker 5: the background. I'm working also on a web artisty app
Speaker 5: that you that you can it's a bit like like
Speaker 5: WhatsApp that you can make calls to each other. That's
Speaker 5: something a web app cannot do. You cannot have like
Speaker 5: a somebody is calling you screen. You know, the whole
Speaker 5: screen is lighting up, just just like you have when
Speaker 5: somebody calls you. That's something you you you cannot do.
Speaker 5: And then of course there's a lot of bugs, things
Speaker 5: that don't really work well, especially on iOS.
Speaker 4: iOS is the thing. If let's put it this way,
Speaker 4: If iOS forget about adding new features and capabilities, if
Speaker 4: iOS just added a chief sufficient parity with what Chrome
Speaker 4: already provides on Android, I would be a happy camper.
Speaker 5: Yeah yeah, yeah, me too, me too. But still there
Speaker 5: is a lot of stuff that you can already use
Speaker 5: in web apps that is still underused, like like all
Speaker 5: the APIs I'm showing here now that that can already
Speaker 5: be used across platforms.
Speaker 4: And one more thing important to note, a lot of
Speaker 4: these APIs you don't need to be a p w
Speaker 4: A to do them. Like like you know, everything having
Speaker 4: to do with the background, you need a service worker.
Speaker 4: If you want to get added to the home screen
Speaker 4: on a mobile device, you need the manifest. But if
Speaker 4: you just want to do something with audio or video,
Speaker 4: you don't need to be a p w A for that, not.
Speaker 5: At all, Not at all. You really don't need any
Speaker 5: any stuff to be a p w A like that.
Speaker 5: Like you said, it's really the background stuff and the
Speaker 5: notifications that you really need to be uh, that you
Speaker 5: need to have it installed for. But for the rest
Speaker 5: you can use everything. I can understand that, you know,
Speaker 5: companies that haven't NATed app right now are not going
Speaker 5: to bet their whole business on a web app when uh,
Speaker 5: the installed experience for iOS and Android is that different.
Speaker 5: I can understand they don't want to do that. But
Speaker 5: besides that, there is yeah, all the stuff that you
Speaker 5: can already use in a web app, and that it
Speaker 5: doesn't even need to be a p w A four.
Speaker 5: So yeah, it's it's it's really a shame that it's
Speaker 5: so underused all this stuff. Yeah, yeah, so that's yeah,
Speaker 5: that's that's basically what I'm trying to do to educate
Speaker 5: people and show them what is possible. I regularly post
Speaker 5: screen recordings as well on X when I take one
Speaker 5: of these demos and then you know, run it on
Speaker 5: a device, make a recording of it, and then show
Speaker 5: what can be done. Is to educate people and show
Speaker 5: then what is already possible and what they should be using.
Speaker 3: Yeah.
Speaker 4: Yeah, I wasn't familiar, for example, with the APIs for
Speaker 4: screen capture and element capture. That's really cool.
Speaker 5: Yeah it is, but I have to say those are
Speaker 5: quite experimental still.
Speaker 1: So yeah, so we're recording this on stream Yard, and
Speaker 1: stream Yard does that right where if you hit the
Speaker 1: button right you can share your screen.
Speaker 3: So is that not that API that they're using here?
Speaker 4: I don't think so. I think with web arty C
Speaker 4: you have the ability to just basically just capture screen,
Speaker 4: but if you want to capture specific elements on the page,
Speaker 4: I think that's more sophisticated.
Speaker 5: Okay, so I'm not aware of being able to capture
Speaker 5: screens with web artists without the browser API.
Speaker 4: Are you I'm to be honest, I'm not exactly certain
Speaker 4: how it works. But obviously you've got it in stream Yard,
Speaker 4: you've got it in Google Meet, so there are quite
Speaker 4: a number of a.
Speaker 5: Yeah okay, yeah, yeah, yeah, yeah, yeah okay yeah. In
Speaker 5: a web ap you will you will always need to
Speaker 5: have this. It's called get display media, so navigator Media
Speaker 5: devices dot get display media that you can use to
Speaker 5: to get like a screen or a browser tap or
Speaker 5: like a whole display. You can also limit that with
Speaker 5: the with the options that you can set, but you
Speaker 5: will always need that browser api, uh to to be
Speaker 5: able to share something, to get a video stream of
Speaker 5: a program or a tap or the whole screen, you
Speaker 5: will always need that. But then yeah, you could do
Speaker 5: something like, for example, you can take that video stream
Speaker 5: that you get from whatever you are sharing and then
Speaker 5: put it on the canvas and then maybe limit it
Speaker 5: or crop it or whatever. That's also something that I'm
Speaker 5: being playing with lately. But to really get like a
Speaker 5: specific thing like with the element capture that that's really
Speaker 5: what you need chron for right now. And a lot
Speaker 5: of this stuff is like I said, it's still experimental
Speaker 5: in the sense that those are origin trials, so you
Speaker 5: really need to get like an API key to h
Speaker 5: to activate it. So it's just a meta tack that
Speaker 5: you put on your in your web app and then
Speaker 5: it will be activated there. But it's not activated by
Speaker 5: default in these these browsers and.
Speaker 2: Then usually what I'm supposing that so that they can
Speaker 2: contact you when when they change it or remove it.
Speaker 2: Were about the break your side or something.
Speaker 5: No, they're not, They're they're not going to contact you.
Speaker 5: It's it's really to activate it in uh. So it's
Speaker 5: really just a metattack with a name and a long
Speaker 5: API key long string that you have to put there
Speaker 5: and then the the API will be activated and you
Speaker 5: Basically what they was it forced to test out stuff
Speaker 5: and to get a feedback from developers so you can
Speaker 5: give feedback.
Speaker 4: You know, the basic issue with the web is that
Speaker 4: once something is in, it can never be removed. Now,
Speaker 4: in the past, you know, they've tried to do things
Speaker 4: by let's say, prefixing things with the browser names like
Speaker 4: the WebKit stuff or stuff like that, and what they
Speaker 4: it ended up being is that those things had to
Speaker 4: be backwards supported as well, so they essentially landed on
Speaker 4: these origin trials as the only mechanism that seems to
Speaker 4: work to give you know, developers' ability to test things
Speaker 4: out without being tied down to particular implementation and being
Speaker 4: able to either change the APIs or even totally remove
Speaker 4: APIs if it turns out that they were bad ideas.
Speaker 5: Yeah, yeah, exactly, exactly, And Edge is doing something similar.
Speaker 5: They have their own origin trials. But then whenever there's
Speaker 5: an origin trial and chromium that also works in Edge,
Speaker 5: so you can, yeah, just activate it and play with it.
Speaker 5: It's not guaranteed that they will stay though. Sometimes they
Speaker 5: have like origin trials that end and then they don't
Speaker 5: come back, or they only come back when they've done
Speaker 5: some refining or technical stuff and then they come back.
Speaker 5: And yeah, sometimes they don't. They think it's not worth it,
Speaker 5: or maybe the API is too difficult. I think it
Speaker 5: also happened with view Transitions long ago, or there was
Speaker 5: some different name for it. It wasn't called view transitions,
Speaker 5: but that was also in an origin trial. I was
Speaker 5: also playing with it, and then it went away, and
Speaker 5: then it came back under the name view Transitions, and yeah,
Speaker 5: now it's now it's widely supported. So yeah, that's basically
Speaker 5: what they use it for.
Speaker 3: Very cool.
Speaker 1: We're kind of getting towards the end of the time
Speaker 1: that we scheduled, but I want to make sure that
Speaker 1: we've given everything a fair hearing. Is there anything else
Speaker 1: that we haven't touched on that people might be interested
Speaker 1: to know?
Speaker 5: Yeah, maybe it's quickly some APIs that are now available,
Speaker 5: Like we haven't discussed the file system API just quickly.
Speaker 5: It enables you, at least on desktop, to actually to
Speaker 5: access the actual file system of the device. So on
Speaker 5: desktop you can just create files there, read files there,
Speaker 5: you can browse through your whole file system. And then
Speaker 5: on mobile it's not available maybe in the future, but
Speaker 5: right now you only have the Origin Private file system,
Speaker 5: which is like a yeah, like a virtual file system,
Speaker 5: so it will not correspond to so called physical files
Speaker 5: on your disc. It might be in in the database
Speaker 5: or whatever. But it's also something that that photoshop on
Speaker 5: the web users. But because it's very optimized for very
Speaker 5: fast reading and writing. But from the perspective of your
Speaker 5: web app it, yeah, it just looks like a file system.
Speaker 5: That's a very nice one. And there's also the authentication. Yeah,
Speaker 5: the demo in what p w A can do today
Speaker 5: is a bit boring because I haven't really found a
Speaker 5: nice way to show it off. But the web authentication
Speaker 5: your web often for sure, it enables password less authentication,
Speaker 5: so you can just have phase ID or touch ID
Speaker 5: fingerprints to log into your web app, which is yeah,
Speaker 5: unfortunately also still an underused one, but a very nice one.
Speaker 2: Well, for the first ten years it was useless. It's
Speaker 2: only in the last eighteen months or so that the
Speaker 2: APIs have become stable. And even still the documentation out
Speaker 2: there is horrible and to understand what it is, what
Speaker 2: it does, and the simple way to use it, you know,
Speaker 2: and many companies are capitalizing on this to try to
Speaker 2: push you through their SaaS platform. But it there, there
Speaker 2: is a way, you know, there is a way to
Speaker 2: just you know, you call it with a couple of options,
Speaker 2: it generates assigned key, you send it off to the server,
Speaker 2: it verifies it with a public key, and you know
Speaker 2: you're done. You can be very simple, but it's it's
Speaker 2: not it's not marketed. Is very simple. It's certainly not
Speaker 2: profitable for any of these companies that are doing the
Speaker 2: off stuff to show you how to do it in
Speaker 2: a simple way because they want to show you the
Speaker 2: complex way, so you get roped into their so that one,
Speaker 2: that one's that one's a tragedy in a lot of
Speaker 2: and and most of the features don't don't work or
Speaker 2: unreliably like it was built. It seems to have been
Speaker 2: built around the idea of trusted platform computing. So there's
Speaker 2: a whole bunch of stuff with attestations and keys and
Speaker 2: a gu U I d S and all that, but
Speaker 2: none of it's none of it's useful at all. You
Speaker 2: can't rely on any of it because because it because
Speaker 2: the reality of that is that anybody, any any government
Speaker 2: can just spoof any of those things, because they could
Speaker 2: just open up a ubikey and get the private keyat
Speaker 2: you know, they just use X ray machine and soldering
Speaker 2: and you know, so it's it's it's it doesn't provide
Speaker 2: if you're trying to log a user into their email
Speaker 2: and it's just a Joshmo or their Twitter or whatever. Yeah,
Speaker 2: it's great, but but I mean, well sorry, the authentication
Speaker 2: mechanism is great no matter what, because what it is
Speaker 2: is it's just better than a password. But a lot
Speaker 2: of the advanced features, if you look into it, the
Speaker 2: enterprise features. None of them could be trusted at the
Speaker 2: level of a government because you can't trust that the
Speaker 2: hardware is I'm modified.
Speaker 5: Yeah, yeah, I haven't looked into a debt deep but
Speaker 5: I have to say that I was playing with the
Speaker 5: the al a metic upgrade to a pass key. So
Speaker 5: whenever you log into a website and then the browser
Speaker 5: alto fills your credentials, then you should be able to
Speaker 5: upgrade to a pass key. But that was kind of
Speaker 5: I still haven't figured out how that is supposed to work.
Speaker 5: And like you said, the documentation is very sparse around this.
Speaker 2: I'll I'll link a demo. I've got passkeys dot js
Speaker 2: dot org, and I'm gonna get the documentation for this,
Speaker 2: uh in a in a better state. But I'll just
Speaker 2: throw throw that out there because I spent a ton
Speaker 2: of time on this. One of my clients is moving
Speaker 2: to pass keys and and we wanted to get it
Speaker 2: in a way that would work reliably, and we ran
Speaker 2: into a couple of problems. And you know, it ends
Speaker 2: up being really really simple with very few caveats, but
Speaker 2: the path to learn it was frustrating. But you know,
Speaker 2: you've got your demo there and I've got mine in
Speaker 2: the get Source. I'm going to be linking to more
Speaker 2: and better documentation as I firm this up for them.
Speaker 2: But yeah, it's something where it's like I want to
Speaker 2: tell people go use this, but I don't yet have
Speaker 2: the resource to point them to that shows. Okay, you
Speaker 2: follow these steps in these steps and you're done.
Speaker 3: Yeah, yeah, all right, Well I'm gonna go ahead and
Speaker 3: push us to picks. Now.
Speaker 1: For those of you who are new to the podcast,
Speaker 1: picks are just things we shouting out about. We try
Speaker 1: and keep them short, try and keep him interesting, and
Speaker 1: I will let Dan go first.
Speaker 4: Excellent. So I've got two picks today. My first pick
Speaker 4: is a movie that we watched. It's a movie from
Speaker 4: two thousand and well, it's actually a movie from this year,
Speaker 4: although it seems that it came out last year. Originally
Speaker 4: it's called Knox Goes Away. It's starting Michael Keaton. Also
Speaker 4: I think directed the movie. Yes, I see that he did.
Speaker 4: It's crime thriller, drama sort of thing. But it's just
Speaker 4: an excellent movie. I don't want to start telling what
Speaker 4: it's about because I'll probably spoil it, so I'm going
Speaker 4: to say that, you know, just just watch it if
Speaker 4: you can. My wife and I both watched it, and
Speaker 4: we both enjoyed it very very much. It's just an
Speaker 4: excellent movie. So that would be my first pick. My
Speaker 4: second pick is I make it a point on social
Speaker 4: media to kind of separate between my technical views and
Speaker 4: opinions and posts and my let's call them political commentary
Speaker 4: social posting. So on x it's almost all technical. Sometimes
Speaker 4: I respond to stuff, but I don't just post political stuff.
Speaker 4: I make a point of it. But on Quora it's
Speaker 4: actually kind of the other way around there. Most of
Speaker 4: my posts are about you know, what's going on, as
Speaker 4: it were, So if you're interested in that part of me,
Speaker 4: you can check out my account. I'll post a link
Speaker 4: in the show notes to it, just as a point
Speaker 4: of interest. Turns out that my account is relatively popular there.
Speaker 4: Just in the past week, I've got something like almost
Speaker 4: one hundred thousand views there and something like almost a
Speaker 4: thousand up votes, so you know, some people enjoy it
Speaker 4: what I write. If you're interested, check it out, and
Speaker 4: you know, I'd appreciate the feedback. And those would be
Speaker 4: my picks for today.
Speaker 3: Awesome, how about you, aj.
Speaker 2: Well, I'm linking to both the Past Key's demo and
Speaker 2: the Past Keys presentation that I gave because I do
Speaker 2: really like past Keys. I just wish I had a yeah,
Speaker 2: like I said, a way to say, here's the quick
Speaker 2: and easy path, and I'll have that. I'll have it,
Speaker 2: it will come, but I just don't quite have yet.
Speaker 2: But the presentation I kind of go through the well,
Speaker 2: I go through the happy path, but I also explain
Speaker 2: a lot of the the pitbull pitfalls and stuff as well.
Speaker 2: But anyway, Yeah, then I also want to pick Sabine Hassenfelder.
Speaker 2: I don't know if I'm pronouncing that Sabine Sabine. I
Speaker 2: think that yeah, yeah, she is totally getting red pilled
Speaker 2: little by little, you know, I've I've watched her videos
Speaker 2: over the past year, and she is uncovering more and
Speaker 2: more and more. She's a physicist over in and I'm
Speaker 2: I'm assuming by her accent that she's in Europe, but.
Speaker 4: Maybe she is German.
Speaker 2: Yeah, does she currently live in Germany.
Speaker 4: Or well, I'm not sure where she lives right now,
Speaker 4: but she studied and worked in Germany, as I recall.
Speaker 2: Yeah, so she's a top physicist or she seems to
Speaker 2: be a top physicist, and she's been she's been on
Speaker 2: uh some of the long form podcast sites. Anyway, she
Speaker 2: got tons of great videos. Some of them I agree with,
Speaker 2: some of them I disagree with, but I've just been loving.
Speaker 5: Well.
Speaker 2: It's terrible because she's getting so depressed over the last
Speaker 2: few months as more and more stuff comes out with
Speaker 2: hoaxes in scientific papers, and you know, the foil is
Speaker 2: getting peeled back.
Speaker 4: It's worse than that. You know, hoaxes are people being certain,
Speaker 4: people being dishonest. The bigger issue is, based on my
Speaker 4: understanding of what she's saying, is that she's kind of
Speaker 4: seeing the current situation in physics as basically the death
Speaker 4: of physics. It's like physics, the field of physics, in
Speaker 4: her opinion, or at least theoretical physics, has kind of
Speaker 4: run into a wall, and she has a very pessimistic
Speaker 4: and cynical viewpoint of of you know, how that this
Speaker 4: field is progressing or should I say regressing. For example,
Speaker 4: I don't know if you know this, but the two
Speaker 4: Nobel Prize winners for physics this year aren't physicists.
Speaker 2: Yeah, she covered one of those.
Speaker 4: Yeah, they basically they got the Noble in Physics for
Speaker 4: their work on AI ne on neural nets. They were
Speaker 4: like the pioneers of neural networks or something like that.
Speaker 4: And it's kind of strange that, you know, the Nobel
Speaker 4: Prize Physics doesn't go to physicists.
Speaker 2: Yeah, well yeah, anyway, My point is I really like
Speaker 2: her channel. I think that uh, I think it's just
Speaker 2: about anybody who's interested in that sort of stuff could
Speaker 2: like it because she her viewpoints are varied. She's not
Speaker 2: towing a specific party line. She is letting herself explore.
Speaker 2: And you know, she'll criticize one thing one month and
Speaker 2: then come back and say I was wrong the next month,
Speaker 2: or well normally it's she is pro something one month
Speaker 2: and comes back and criticizes the next month. But but anyway, yeah,
Speaker 2: so I just want to I want to throw her
Speaker 2: channel out there because I I've been watching it and
Speaker 2: I and I learn a lot, and I'm very interested
Speaker 2: to see her you know, critique of video from a
Speaker 2: year ago or from two years ago or whatever. And
Speaker 2: that's uh yeah, anyway, that's that's what I got. So
Speaker 2: Paski's paskis are great. There is a happy path it.
Speaker 2: It doesn't have to be complicated. I just don't have
Speaker 2: the blog post appointed to you yet. And then Sabina
Speaker 2: Uh for her her physics videos and just hear takes
Speaker 2: on things that are that are going on in the
Speaker 2: realm of science.
Speaker 3: Cool.
Speaker 1: I'm gonna throw in some picks of my own and
Speaker 1: then we'll get some from Danny here. So the first
Speaker 1: one is I was do a board game pick. The
Speaker 1: last time I got together with my friends, we played
Speaker 1: a rousing round of the game. We played a couple
Speaker 1: of rounds. Actually, the game is essentially it's a really
Speaker 1: simple game board game. Geek waits it at one point
Speaker 1: two four, which means it's a really simple game.
Speaker 3: Essentially, it's called the game and it's hard game.
Speaker 4: It's kind of like the band.
Speaker 1: Sure that there's another variation on it, and I can't
Speaker 1: remember what it's called, but it's it's got some other
Speaker 1: simple name like that. But you have cards the number
Speaker 1: from one to one hundred. You've got four sets one
Speaker 1: to one hundred.
Speaker 3: And so you start with four piles.
Speaker 1: There are other ways to vary this, but we start
Speaker 1: with four piles to the start with one, and two
Speaker 1: that start with one hundred.
Speaker 3: I guess it's just two sets one to one.
Speaker 1: Hundred anyway, So then what you're doing is you're trying
Speaker 1: to make the cards either count up from one or
Speaker 1: down from one hundred, and you're trying to discard all
Speaker 1: the cards onto those piles, moving up or down, and
Speaker 1: you can jump backward, right, So if you're counting up,
Speaker 1: you can jump down by exactly ten, and if you're
Speaker 1: counting down from one hundred, you can jump up.
Speaker 3: By exactly ten.
Speaker 1: And if you can manage to discard all the cards
Speaker 1: out of your hands playing in turns, and it's just
Speaker 1: you have so many cards in your hand and so
Speaker 1: many cards you're playing, you win. And so anyway, it's
Speaker 1: kind of a nice game that we can kind of
Speaker 1: sit back.
Speaker 3: And chat while we play.
Speaker 1: And there was a lot to talk about this last time,
Speaker 1: and so we were having an interpersonal talk while we figured.
Speaker 3: Out what to do.
Speaker 1: And sometimes you can you can all there's a little
Speaker 1: bit of table talk that you can do. You can't
Speaker 1: tell people what numbers you have, and you can't hints
Speaker 1: that specifically tell them what numbers you have, but you
Speaker 1: can tell them, for example, I would like to play
Speaker 1: on this pile, right, And so then the other players
Speaker 1: unless they don't have any other good plays, we'll try
Speaker 1: and leave that pile alone or things like that. And
Speaker 1: so you try and get people clues as to what
Speaker 1: you can do for the pile, either you know, not
Speaker 1: playing too far out so that you know, bridge a
Speaker 1: huge gap and then you've got to figure out which
Speaker 1: other pile you can play those cards on, or you know,
Speaker 1: sometimes you're trying to hint to them, hey, I can
Speaker 1: jump this one back ten and then we can play
Speaker 1: more cards on it.
Speaker 3: So anyway, it is a super fun game.
Speaker 1: I think usually takes this half hour to play it,
Speaker 1: you know, maybe less, depending on how how hard we
Speaker 1: made the game. Right, Because you have more cards in
Speaker 1: your hand, that makes it easier. If you have to
Speaker 1: play more cards out of your hand, that makes it harder,
Speaker 1: and so you know, you can vary it that way.
Speaker 1: I think I mentioned yes or last time that I'm
Speaker 1: putting together the AI boot camp that is going to
Speaker 1: be an aidvboot camp dot com website. I'm still working
Speaker 1: on it. I've had to fix some stuff on top
Speaker 1: of devs, so I'm hoping I have that fixed up
Speaker 1: this week.
Speaker 3: And there was a.
Speaker 1: Website that I wanted to pick, but I can't remember
Speaker 1: what it is, so I'll pick it next time.
Speaker 3: Danny, what are your picks?
Speaker 5: Yeah, I had two picks, and I'd like to sneak
Speaker 5: in a third one if I have time. Yeah, Social movie. Yeah,
Speaker 5: I was just a remind us because then you mentioned
Speaker 5: the movie. Also had a nice movie I just saw.
Speaker 5: First one is the I'll past it in the chatter
Speaker 5: is the Open Web Advocacy. This is a group of
Speaker 5: engineers web developers. What they do is they provide technical
Speaker 5: information to regulators, legislators, policy makers to fight the anti
Speaker 5: competitive stuff in our industry. For example with with Google
Speaker 5: and with Apple. They do a lot of research, they
Speaker 5: publish a lot about this. Yeah, they get involved to yeah,
Speaker 5: to get rid of all kinds of anti competitive stuff. Yeah,
Speaker 5: the link is there, great organization. The second one I
Speaker 5: have is actually when I picked up here is the
Speaker 5: web components compiler Projects. What's the guy's name that from
Speaker 5: Owen Buckley that you also had in April as think
Speaker 5: on the.
Speaker 3: Show imented on this episode in YouTube.
Speaker 5: So okay, okay, cool, because it's really I'm working with
Speaker 5: web components, I'm doing a lot of service side rendering
Speaker 5: with lit elements, but there was nothing like that for you,
Speaker 5: like for Vanilla web components. So I was really happy
Speaker 5: to see that that Owen already built something like this.
Speaker 5: So I was quite quite happy with that. I mean
Speaker 5: using it and it's working quite well to do yeah,
Speaker 5: to do service side rendering for Vanilla JavaScript web components.
Speaker 5: And the third one is the movie I just saw.
Speaker 5: I think I saw it the last weekend. It's called
Speaker 5: The Whale. It's from twenty twenty two. I won't give
Speaker 5: away too much, but it's a very simple movie. It's
Speaker 5: the whole movie is set like in one room, and
Speaker 5: I always tend to like these kind of movies. It's about, yeah,
Speaker 5: a man, very unhappy man who struggles with obesity. What
Speaker 5: struck me about this movie is when it came out
Speaker 5: in twenty twenty two is the main star of it
Speaker 5: is Brendan Fraser. And I don't know if you know him,
Speaker 5: but you're probably see The Mummy and movies in that
Speaker 5: like he always played in. I always never considered him
Speaker 5: like a very good actor, but that was basically because
Speaker 5: of the movies that we played in, like like for example,
Speaker 5: The Mummy. But this is really really impressive. He plays
Speaker 5: this very obese guy in a suit, but you can't
Speaker 5: even tell it's a suit. It's amazing. You want an
Speaker 5: oscar for this great movie. Not a very happy movie,
Speaker 5: but definitely one I would would recommend you to to watch.
Speaker 5: It's called The Whale. So those are my picks.
Speaker 4: Yeah, it was. It was Brendon Frazer's comeback movie.
Speaker 5: I think, yeah, it is, it is, and what a
Speaker 5: comeback it was.
Speaker 1: Yeah, I think about it, but I I'll have to
Speaker 1: go watch it.
Speaker 5: Yeah, yeah, it's it's really Yeah. I loved it. I
Speaker 5: think the acting was really really impressive.
Speaker 3: All right, Well, I'm just gonna throw this out here.
Speaker 1: So besides the what p w A can do today,
Speaker 1: if people want to contact you, maybe volume on social
Speaker 1: media or reach out and say hey, can you help
Speaker 1: me with or train me on this stuff?
Speaker 5: I mean, yeah, yeah, sure, there's a form. There's a
Speaker 5: contact form of what people p w A can do
Speaker 5: today where people can reach me. They can find me
Speaker 5: on X then you move just my name medium shame thing.
Speaker 5: I also right there, and I also have a website
Speaker 5: it's a bit outdated, dannimookcharacter dot com where people can
Speaker 5: also fund me. So I think X would be the
Speaker 5: best way to.
Speaker 1: Richmond sounds good. All right, well we'll go ahead and
Speaker 1: wrap it up. Thanks for coming. This was really great.
Speaker 5: Thank you for having me. I really enjoyed it absolutely
Speaker 3: All right, Well until next time, folks, Max A