So let's start. I guess Jason was still looking for some people. I think Jason is looking out in the hallway for if anyone else is standing outside, want to comment. But we can quickly start with introductions in the meanwhile. So we'll start with who we are. So basically myself, Saqeed Kumar, I work as a UI UX lead at QD42. His Piyush, he works as a technical architect at QD42. So basically today we'll be talking about, today's session is more about, we'll be talking about modern advancements in the mobile web. And diving into one of its major feature service workers. Talking about how to use them in your site and making your website more appy, more like a mobile app, and then with all kinds of tools, debug it. Followed with a small demo. So firstly, starting with mobile web versus mobile app. I'll start with a use case here. Like you have a scenario where you are in the scenario, you have to book a ticket and you don't have any mobile application with you. So what would be your preference about, will you go and download some application and download the application to book the ticket, or you'll just go to the mobile site of that ticketing agency and book the ticket. I guess, because downloading a mobile app would take you like a lot of time, a lot of mobile data as well. Let's say any app would be around 10 MB or something. So it would take time to download the app. So what would your preference be? Would you like directly go to the website and book a ticket. Given the UI is same in both the cases. You have the same UI on the app and same UI on the web. Which one would you go for? Even the stats is the same thing. Out of 7 out of 10 people will go for the mobile web and only 3 out of 10 will go for the downloading the application and then go for the ticketing. But when we see the stats from... So when we see the stats from the app stores, like this does start from Google App Store and it says more and more application being developed. And similar is the case with the Apple App Store. We can clearly see more and more applications being developed. So people rather than focusing on developing mobile-friendly web rather than making a mobile-friendly web, they are going and developing applications more. So can you think of why this is happening? Any reasons? Experience hasn't worked. I can have a better view of it in the mobile web as well. Make your site more responsive and... That's one good reason. Your apps would work offline as well, but I would not. So yeah, we can speculate a few reasons for that. Like the product owners or the developers, they don't want users to have the tabbed experience and in their application, they can do that clearly. But for mobile web, they will have this tabbed experience. And then, again, offline enable the mobile apps. Enable you to have offline data on your devices. But then again, this web, if we are relying on web, that won't be the case. Then if you think of the push notifications, which we don't have for the web, but for applications, we can clearly have this. We can update your users on the basis of any update in the application. Push notification or simple notification. Also, you have this splash screen, which is a good way of branding of your product. So these are the... And there are many more reasons. Like you have more access to this performance and then like... I think low-level hardware will be one thing. So you don't have access to hardware by any means. Yeah. In 2010, this... Wyatt published this blog about when the app world was growing, stating that web is dead, as mobile applications were the future for all... with all these new features, which mobile web did not have had. But again, later in 2014, seeing the trends which users were following, which users were using, even for... users were more like... where traffic was more on web. So then again, they came up with this trend, as even the features were great for mobile apps. They had some overhead of downloading that application to have that experience. So users were forced to download their application from the app store to the mobile and then have that experience. So downloading and install was an overhead. So still users prefer mobile web over the app, at least as per the data which we saw earlier. So progressive web apps are the new way of strategies to develop your web app mobile-friendly. We can take an example of Flipkart, an Indian e-commerce company, which was among the first adopters of this. They had mobile applications for the product, but they still found out that the traffic was more for mobile web. And even more than their desktop website. So to enhance the user experience for their users, clearly if you go to a mobile web and then if you give a pop-up to go to app store and download the application, that's not a good UX. So to enhance the user experience, they adopted this strategy of progressive web apps and they released flipkartlight.com which is clearly similar to their mobile app. So for this, the users don't have to go and then download Flipkart from the app store. They're just going to go to flipkartlight.com and they'll have this experience which is responsive, which works faster, even the network is bad. This works fine for networks like 2G or Edge and has features like push notifications, splash screens. So to get the mobile experience for Flipkart again, you don't have to download these. You just need to go to flipkart.com So in this talk, we are not going in detail with progressive web apps. We are just diving into one browser feature, Service Focus, which would enable us to have features like offline content, push notification etc. So before anything, I'd like to play this video. So I think this case would have happened with almost everyone, right? Like stuck up on a loading screen, waiting for it to load, load, load, right? So yeah, Service Workers would help you eliminate that or at least enhance this experience in some way. We'll take a look at that in details. So Service Workers are basically a browser feature which has recently been added and then work is still in progress. Currently, latest browsers like Chrome and Firefox they support it but still there are things to come in. So basically it's a worker thread working parallelly to the network thread. So you don't have access to the DOM. So I'll talk about the features. So it has features like offline web and it enables your website to be functional in case of low connections, even like Edge and 2G which we talked earlier and then it gives you a programmable cache. So earlier we had this app cache but that was very limited. Its functionality was quite limited and it was static but here you can now have a full control over the cache and you can script your cache. Then you have this background processing like you can have some tasks running in the background like you can sync user's activity later on or show the functionality like geofunction, push notifications and geofencing. So these are the features. But with every great responsibility with every new power you have a great responsibility like in here service workers are only available with STTPS networks because service workers lie between your user or the client side and then the server. So if anybody having the access to service worker can easily intercept your network request. So it's again then since STTPS is not an encrypted thing so it is only available with STTPS so that any transfer data transfer is encrypted. So the pillar of service worker it has a scoping, you are a scoping so we need to mention the scope of the service worker where it had to pick all the resources and then document matching and then it runs on same origin and then it has a separate thread of execution and has no DOM access. So now we'll dive into how to work with service workers and then I think you should take on. Hi guys. So till now we have covered like what service workers can do for you. We haven't seen how it works and how would you actually write code that would allow your browsers to intercept your network request and everything. We'll dive into those now. So starting with the life cycle of a service worker so what are the phases in the life cycle of a service worker? So initially when your web page loads it doesn't have anything like service worker installed on it by itself. So the first thing that happens is your service worker goes into an installing state. So installing is something wherein you would ideally go ahead and pre-cache something. So let's say you have your website and it has a couple of static resources like your CSS files, your JavaScript files something that could be called as an application shell something that a user would see as a skeleton. So how many of you have used Facebook applications? I think everyone would have used it. So when you open it, instantly what you see you don't see any data, you see a loading you don't see a blank screen, instead you see placeholders and you see the header. So that's called as your application shell something which is your skeleton application without any data. So pull out your data from your application and pull out the skeleton. So skeleton is something that you would pre-cache. So that's something that you will do in the installation step. So once a service worker is installed it could go into either of two states either it could go into an error state or it could activate. An error would happen in case it failed to cache a resource or something returned a 500 error one of the resources that returns a 500 error or you're not an HTTPS at all it would return a, it would go into the error state and then doing a browser refresh would restart the installation state. So far good. Once it goes into the activate state so that's where the service worker would take control of your website. So till it reaches the activate state a service worker is dysfunctional on your website. Activation is a state wherein you do a couple of other things as well. So for example you have service worker version one running. You had a couple of things which you cached earlier. Now you made a couple of updates to your website. Now let's say you added one more CSS file and one more JavaScript file. You would want them to be pre-cached as well. So that's something that you would do inside your activate event. So activate is something that acts as a place where you could clean up your cache you could rebuild your cache. Those sort of things. Because activation is something right after which service worker would take control of your website. Make sense? After going into activate state it would ideally go into idle state if nothing is happening. If you do a fetch request go into the fetch state and return back to idle after doing its processing or it could just terminate once it's done with its job. Okay? Moving on to the next slide. It's a very simple slide which talks about how connectivity could affect your web app. So in the case of good connectivity it's a simple network fetch and a normal response which you just see on the browsers. But in case of a bad or slow network connection the network fetch would happen but it would lead to ideally a timeout or a DNS look of failure, right? Which is a bad UX. The user would again be stuck with a loading screen and doing nothing. So let's see how service worker would save the day for users. So service workers are something that sits between your web page and your web server, okay? So any request which is going from your web page to the web server would pass through the service worker. You see, this is where it becomes... So as Hake talked about it should run only on HTTPS. That's a specification because it could control any and every request which is passing from your web page to the web server. So let's say you have an e-commerce website users fill in their credentials, their credit card details and if a hacker gets control of the service worker they could intercept all of these details and reuse them. With HTTPS all of this data would be encrypted and would be of no use to the hacker, right? So yeah, let's take a look at this flow diagram. The request, so let's consider fetch request which is happening for some URL. Service worker would first of all intercept it. It would look for this data, for this fetch request in the cache, in the browser cache. If it finds it, it would return a promise object which will pass back to the web page, the browser. So in this case there's no head to the server at all. So even if you're offline, you would be able to see some response, right? In case it doesn't find it, so with... How many of you are familiar with JavaScript promises? Okay, cool. So yeah, with promises it could either resolve or it could reject. In case of reject, you can program your service worker to look for this, to perform another fetch request for this URL to the network. Now the request goes to the server and the response is sent back from the server to the web page in this case. So it works both the ways. Even if you're offline, the user is able to see the data. Even if he's online, he sees the fresh data. So yeah, we'll be diving into the code base now. Let's see how service workers would actually work. How would you actually register a service worker or how would service workers take control? What code is responsible for that? So in the right side bar, you see the code that says if service worker is a navigator. So navigator is a browser object provided by browsers. Now if your browser supports service workers, it would have the service worker attribute in the navigation object. Otherwise it would not have that. So the very first thing is you should definitely check if your browser supports service workers or no. We'll take a look at the slide wherein we will talk about which browsers support service workers and which do not. So yeah, the first step is to check if your browser supports service worker or no. The second step is to register a worker. Now the second step is navigator.server.register. So you're registering a worker. Now your sw.js file is what is going to control your network request and everything. So all of the code related to your worker would go inside service worker.sw.js file. The second argument to this is an optional scope. So for service workers to work properly, it needs a scope. So it says that I will control all of the requests which fall under the scope. So if the scope is slashed, it's clearly going to control any and every request which is going to be there on your website. Let's say we put the scope as slash sw. It would control any request which starts with a path slash sw. And then again, it again is returning a promise. And if it resolves, it goes into the then function and if it rejects, it goes into the catch. So yeah, check for the browser support. Scope is defined by that. Now the second step, so the first step was registering a service worker. Over here we registered a service worker. We created a worker file. Now this worker file is registered with your scope slash for your current domain. So let's say our domain is nola.qld42.net. And we registered our service worker.js file on root scope. So what happens is any request which is going to be passed to the server will pass through the service worker.js file now. Now we talked about events, we talked about events that service worker does have, the install event, the activate event and other events. So if you need to do something on one event, you can attach a listener to that event, your custom listener. So as we talked earlier that service workers are completely programmable cache. So you could program it the way you want. So let's say we want to pre-cache a couple of resources on install event. So we would go ahead and add a listener to the install event and do a couple of operations inside it. So the first thing is install is basically used for pre-cache. App shell we already talked about. Before we go to the activate, you see the function over there which says event.waituntil. So service workers also provide you a way for your service worker to stay in a state until unless it has finished its job. So anything that's inside your event.waituntil until unless that completes, your service worker would not move from install to activate our error state. So you can basically say that pre-cache all my resources and then move to the next state. Okay? So that's where you would use event.waituntil. Activate function, activate event we already talked about it's mostly used for the cleanup of caches, cleaning up old cache. The next step and the most important one is intercepting your network requests. So service workers provide you with an API to do that. So you would again attach an event listener to your fetch event and do intercept your request, do whatever you want to do with that request whether you could return basically an empty hello world response even for any other pages by intercepting these requests. We'll take a look into how you should intercept requests or basic caching strategies which we have in place. Talking about basic caching strategies we're going to discuss only two of them today. The first one is offline first wherein all of your requests get served from an offline cache first and then it's looked up in the network. So that in the first time when you hit a web page you get a stale response in the background service worker would pull fresh data and update your cache. So basically the first request would give you a stale information but if you're online the next refresh would give you the latest information. So offline first I think we already talked about most of these. So it's mostly useful in case of single page apps or applications wherein you have data separate and your view layer separate. But yeah it works with Drupal as well. We have built a demo, a short demo. So offline first.  So let's say in this use case we are defining a cache bucket which is called as decon-nuller and the static resources which we want to cache in this cache bucket. So it's always a good practice. It's always a good practice to have separate cache buckets for different kind of resources. So you could have both the caching strategies in a single service worker. Let's say you could have a cache bucket which is going to follow an offline first approach and another cache bucket which would follow your network first approach. So you define two cache buckets in that case define your static resources in one of the buckets and your dynamic resources into another bucket and initially pre-cache both of them but when you're writing your fetch event listener you describe two different ways of handling your both cache buckets. We'll take a look at how to do that as well. So yeah in this example what we are doing is we're defining a cache bucket, a couple of static resources and attaching another event listener to the install event and inside the install event we are using one of the APIs which is provided by service workers the cache API. So this would allow you to write data into your cache into your browser cache. So cache.addall what it does is it performs requests for all of the URLs in that array in the static resources array and cache them in the browser cache. So the first part is your app shell and event.wait until we'll wait until and unless your resources are cached. The second step would be processing your requests. So you add an event listener to your fetch event and there's again a function called event.respondwith. So this is again provided by your browsers and provided by service workers which is again provided by your browsers. So you could choose to respond with data which is pulled out from cache rather than from the network. So if you take a look at the function serve from cache what we are doing there is we are doing a caches.match for the current request URL. If a match is found we do return a response from here directly. The request doesn't even hit the server. And in case we don't find a response in this case we are just returning a redirecting users to an offline.html page. So again talking a little bit of the topic here but yeah when you talk about service workers the need for service worker would differ would vary per application. You would never have a same kind of implementation or a generic application for all of your applications. It would always vary. So in this case we are redirecting users to offline.html in some cases you would want to update the cache as we talked about. Update the cache in the background and present the users with the fresh data on next request. Another interesting cache strategy is serving from network first. So what we do here is we replace the function serve from cache with serve from network. In this case what we are doing is we are doing a fetch request on the request URL and we update the cache first and then send back the response. One interesting thing to note here is we are performing a clone on the response object. Can anyone take a guess why we are doing that? Why do we need to do that? Yeah, sort of similar thing. So it's a readable stream basically which could be consumed just once. So either you could respond back to the server or you could cache it. So to cache it we create a clone and just cache it into the browser and return back the actual response object. Make sense? And in case it fails, we are going to do a lookup in the cache and present users with a stale copy of the page. So are you guys able to visualize what I'm saying? I know it's difficult just by reading the code, but yeah, if you have got any other custom scenario or handling the cache first thing which is very, very important in case of service workers, you need to be very specific when you need to basically enviromate your caches. You need to be very, very clear about that when you want to do that. And it again depends on your application needs. It's not generic. But still there are a couple of utilities which are available right now which allows you to burst caches. So for all of you service workers it's completely flexible and it's programmable cache. So go ahead, code your own logic for bursting the cache or handling your own custom caching scenario. Another important aspect of service worker is how or when, how do you update it? So your service worker is running. So Sakit already talked about service workers as separate thread, right? Now what he meant by a separate thread was your web pages would load but service workers would run in parallel. It has nothing, it has no control over your DOM. It cannot do the DOM manipulation. It doesn't have the power to do that. It's running separately from your website. So that's one of the good reasons it could do the background processing. Even if your website is not running your service worker could be running. You get the idea? So even if you don't have your tabs for your websites open, service worker could still work in the background and perform jobs. Now the tedious thing is how to update these things. Like this is once installed in your browser. Now how would you update it? Because a lot of users are already running these service workers on their mobile apps, on their web apps, right? So service workers do provide you with a way to do that as well. Let's consider a use case wherein we are going to split our cache into two parts. We're going to split our cache into JavaScript resources and CSS resources here. So the first step would be you update your service worker code base. And once you update your service worker code base and it loads on the browser, the browser would automatically detect that there's a change in this file and it needs reload, okay? And if the check succeeds, I mean if the service worker is a new file, if there's a difference between the... even a byte of difference is there in the size of the file, it would fire install event for the service worker again. Now the interesting part is here, once the install event is fired, the service workers would go into waiting state. Now what waiting state means here is they would not install, they would not update your cache buckets or update your caches or delete or do any operation on your caches. Now it would wait until or unless all the instances of your service workers, previous service worker versions are closed. Because there are other tabs, there could be other tabs on your browser which are open, which are being controlled by the previous service worker and you would never want a user to land into a scenario where he sees an inconsistency, like one of the tabs is behaving another way and another tab is behaving another way. You would never want that, right? So service worker would go into a waiting state and stay into the waiting state until or unless all the current versions of your service worker are closed. So once they're closed, the first refresh of the page would trigger the install event again and then it would go into the activate state. And activate is where you will hook in and again basically do your cache processing, cache bursting. You delete your, purge your old cache, right? So that's where you'll do all the things. One of the overheads over here is the browser checking for your service worker.js file on every request. So you could again control this using your HTTP cache headers. So you could set a max age for this file and it would not be checked for that duration. Updating service workers. So yeah, this is the code example. So what you're doing here is we're creating two different buckets, JS bucket and CSS bucket. One of the resources does, one of the buckets would hold the CSS resources and another one would hold the JS resources. Yeah. So you update your service worker.js file which was the first step. You update your install event and you basically now create two different buckets and cache data in the two different buckets for your CSS and JS files. And the next step is activate. So in activate what you're doing is you're going to create a white list of your caches. So basically this is the logic which we have done. You need not follow the same logic. What we're doing here is we are busting the old cache. We are deleting the old cache buckets. We're deleting all the cache buckets apart from JS bucket and CSS bucket. You would not want to have browser holding the old cache data. And one interesting thing here, suppose you want browsers to take control of your service worker which is getting installed currently. You want it to happen instantly even though other tabs are there which are open which are being controlled by the previous service worker. So in that case, service workers provide you with an API to do that using event.replace function. So you could just call event.replace function inside your event install event and service workers would go into activate state rather than going into the waiting state. Browser support, so Chrome 40 plus, Opera 27 plus, Firefox 44 plus. Safari, the support has come for the mobile browser but it's not in yet for the web browser. Sorry, desktop browser. It's not in there yet, I think. And you can always check the browser support at the URL mentioned below. Now there are also cases, there are also APIs for which there are polyfills which are available. So polyfills are nothing but small JavaScript libraries which you could inject to add additional functionalities for a website which is not supported by a browser. So there are polyfills which are available to do that as well. That's again available at the same URL as service worker ready by Jay Kakabal. Tools and tooling and debugging. So obviously when working with service workers you would have, it's a pain to debug service workers which I have experienced in like last week while I was preparing the demo. So yeah, there are a couple of tools which we came across. The very first one is the Chrome dashboard which allows you to see all the service workers which are installed on your browser currently. So you could go to Chrome, service worker internals. It would show you a list of all the service workers which are installed on your browser. You could emulate your events from here right away. So you could either unregister the service worker from here or you could start the service worker and perform your push notifications, perform your fetch operations right from here. You don't even need to open the website for that. This is the power of service workers being running in a separate thread. Local development, it's a pain. If you don't have an SSL certificate you cannot work with service workers. With Google Chrome, you could treat insecure origin as a secure origin using this command above. Network request, so any network request which is going through a service worker would have the size column saying that it's coming from service worker. Chrome DevTools is again a good place to do your debugging. If you open your DevTools for a page which is controlled by a service worker there would be a service worker which you could inspect in the service worker tab. Again, you could add breakpoints and when your service worker runs it would show you a stack of variables and everything. The code which we saw right now, the examples which we saw right now it included a lot of code to do very simple, simple stuff. There's a library called as Service Worker Toolbox. Let's take a look at the third example. All the code says it's toolbox.trouter.get slash all the requests, basically slash asterisk it means all of the requests. For all of the requests global.toolbox.cachefirst use the cachefirst strategy. In order to do an offline first application all you need to do is just write this piece of code and include the Service Worker Toolbox library rather than doing all of those number jumbus which we did. There are two common use cases which we came across while preparing the demo. By default, your service workers would go ahead and fetch an anonymous response. It would not send the cookie back in the request. So there's a flag which you could set credentials to. If you send a request with credentials to your cookie will be sent along with the request headers and you'll receive a authenticated response. If you need to cache cross-origin request you could pass it another flag called mode. Now mode by default it's set to course. So it respects the cross-origin request sharing principles. But you could set it to no course and it would still fetch a response for you from a different origin. The only difference here would be it would be an opaque response. By an opaque response I mean that the response that status you would never get to know if it succeeded. But if it passes you will have the data and the cache. So the demo, quickly talking about the demo what we're going to do here. So we were building a camp website for Drupal Camp Pune and we were also experimenting with service workers so we thought why not give users an offline experience. Users were demanding for an app. So we were like let's build a mobile web app rather than building mobile apps. So we experimented with service workers and we allow the users to access the website offline right now providing an app like experience. The users can add schedule to their... can use the add to schedule feature even though they're offline. So what happens is when they're offline they hit add to schedule. The data gets stored in the index TV of the browser. When they get offline this data gets synced back and the user receives a notification on his cell phone that your session preference has been synced successfully. Drupal enhancement which we had to do. There were a couple of routes which we had to build. The very first one was... the very first problem for us was to fetch the... to pre-cache the aggregated CSS and JavaScript files. Because in Drupal we cannot fetch the... we do not have a direct way to get the name of the service... get the name of the CSS and JavaScript aggregated files. Those are like random hashes generated, right? That was one of the problems. So we created a new route in Drupal 8 to do that. The second one was... so we were using flags for add to schedule feature and we had to write a custom route to handle the... backgrounds and corporations because the data need to be... posted back to the Drupal server. The third thing was caching the session and sponsoring URLs. So there was no direct way we had to... we had forgetting the list of nodes, the node IDs. So we created two different views with REST export format and session.json and responses.json which we were... returning as the JSON objects. Hook page attachment alters, hook page attachments alter to include the service worker JS file and manifest.json. So we also integrated the progressive web app... concept into this. Cache strategies which have been implemented are... offline first, network first, slow connections. In case of slow connections, the offline first kicks in and it again works well. And there's an offline page which redirects. So I'll quickly go through the demo. I don't think we have much of the time left, but yeah. Let me just quickly... So... Sorry? Slides? Slides are public. Yes, slides are public. This one? No, no, this side is public. Yeah, yeah, yeah. Yeah, I'll share the URL as well. It's... I'm not very sure if Internet is working well. Let me quickly open that. So yeah. If you could browse this webpage from your cell phone on an Android Chrome browser, it would look much better compared to the demo that I show you here. So yeah. Let's take a look at the service worker which is... Let me actually mirror my display. So I'm actually going to de-register the service worker which is in action right now and purge all the cache which is creating. There's an index to AB. Okay, cool. So I'll hit refresh. So the first refresh, it's going to now register my service worker. Do nothing else. The service workers are not taking control of your website right now. The next refresh would make service workers take control of your website. Whoops. So see, it stopped because there's another tab which is open which is being controlled by my previous service worker. So I'll need to close this tab first. And then... Re-register it. So you saw the switch, the switch from installing to the active state. So yeah, it goes into the installing state and then into the active state. And in the meanwhile, our cache. So these are the sources which we are pre-caching. There's some dynamic web URLs which we are pre-caching which is your node IDs for your session pages and your sponsored detail pages. The assets are your CSS and JavaScript files which are your aggregated CSS and JavaScript files which are getting loaded on this website. So they have been cached as well. So this is what a normal user will see when he's online. Let me see if I'm logged in. Yeah, I'm logged in as PO 23. Now let's say we go offline. Okay? We're offline, the flag says it's offline. So yeah, let's do a refresh. The page still works. The images are not getting loaded and that's why they are replaced with a static background image which I'm doing. This is something again which we're handling by our service workers. Let's browse through the website a little bit. Go to sessions. This is a list of sessions. Sponsors, it works fine. About page, when you... When you... My Schedule, we haven't cached this page. So My Schedule doesn't appear. But at the same time, we're caching My Schedule page when a user hits it for the first time. So let's go online and hit My Schedule now. Okay? Now we go back offline. The My Schedule page works. Right? Another interesting thing to note here is what we did was when you're online and you go to the sessions page, the Active Schedule feature, it works the way it should, using flags. Okay? And you see the button is green. As soon as you go offline, these buttons would turn gray telling a user that you're offline right now. You could basically add it to your schedule but the data would get synced back only once you get back online. Okay? So let's try adding another item to our Schedule. Oops, sorry. It's in the slide. It's N-O-L-A dot Q-E-D 42 dot net. Use S-T-T-P-S. Yeah. So as soon as you click on Add to Schedule, you see this pop-up which uses the Chrome API. It's asking for... It's asking you if your Chrome should be able to send you notifications or no. If you allow, the data, it gets stored in your index DB. So yeah. The session ID, the user ID and the action it should perform. These, this data, it gets stored in your index DB for the time you're offline. As soon as you go back online, this data will get synced back. Hold on. Come on. Okay. Finally, we went online and you see this notification. We got the notification that your preference for your sessions has synced successfully. This data gets purged out from your index DB and now if you go ahead and visit your My Schedule page, you should ideally see this session in your sessions list. Yeah. There we go. So yeah. This example... I would have loved to do a code walkthrough as well, but I don't think we have much of time left. But yeah. Going back to the slides. Oh yeah. One more interesting thing. So since we couldn't do the demo on the phone, we recorded the implementation of PWA with the application as well. So the user logs in by the browser. He can choose to add this item to the home screen. This is what installable web app means in terms of PWA. So as soon as he added it to the home screen, it gets installed like a normal mobile application. When you hit it and when you try to browse it, if someone who doesn't know Drupal, they would definitely say that it's a native app. It's not a mobile app. So I've tried this with a couple of my colleagues and they were like, you built an app for the Drupal Campoone? So yeah. You can browse through the... Is it stuck? No. So yeah. You can browse through the website like a native app right now. Yeah. This is the home page. Let's go to the sessions page. Now you see the same buttons over here. Now you go offline and try adding something to your schedule. The Chrome will ask you here as well if you want to allow users to receive notifications or no. Next step would be you go online. As soon as you go online, you'll see a notification appearing on your phone which says that your preference has been synced successfully. And then you browse to your My Schedule page. And then you'll see the session it appears in your My Schedule page. So yeah. That was about the demo. Moving back. What happened to this? Okay. So yeah. The resources that we used for preparing the slides are down below. If you want to try it for yourself, go to browse.url. The code base it's available at in the GitHub repo down below. If you want to read more about service workers, these are a couple of URLs which you could always refer to. And any questions that you guys have? Yeah. If you're doing an offline app like the one you just showed, would you recommend caching full HTML pages for the 20 sessions, 50 sessions, or making each of those a rest request? Rest request, I would say. Okay. Your site is going to not... And the question I have is if you preload the whole page, then your site will still work even without JavaScript. You just won't get service worker integration and so forth. If you make it rest requests, then your site is only going to work with JavaScript. You've got a lot more JavaScript on the client side, but you're downloading a third as much data or less. So how do you decide what trade-off to make there? Yeah. So that's the reason I said that I would personally go for rest endpoints. So pulling out the data. So this way it makes my life very easy. I can separate out the app shell and I can separate out the data. So a user would initially see an app shell, a header and probably a Jeff animation. But as soon as the data loads in, I populate them. Apart from that, I could do a lot more as well when I use rest endpoints. Like doing background sync becomes very easy. So let's say a user is browsing this web page on a slow connection and there's a new item which has been added. Now, pulling only one new node, pulling a couple of data related to just one node is relatively simpler for me compared to pulling out the entire listing page. Right? Okay. And then the demo site you're just showing, is that built on Triple 8 then? Yeah. Sweet. Thank you. Any other questions? Okay. If ServiceWork is running in the browser on the mobile, what happens if you are offline, do something close the browser? Would the notification still get through? Yeah. So the notification runs regardless of whether the browser's running? Exactly. Okay. Because ServiceWorks are a separate thread from your browser. Any other questions? BigBipe is entirely a different domain compared to ServiceWorkers. Yeah. Yeah, so the way I would see is BigBipe working along with ServiceWorkers would like really pump up a website to what extent I can't even imagine. Okay. What I heard about caching, what can ServiceWorkers do besides the caching? Let's say I have a mobile, I have a code for mobile using JavaScript, and when the cell phone screen gets off, that it doesn't work. Right. It's JavaScript. Can we make it work using ServiceWorkers? I didn't fully get your question, actually. So basically you're saying that when your mobile screen is off, your JavaScript doesn't work. But would ServiceWorker work? Is that your question? Yeah. Yes. Let's say I have a code that every 10 seconds checks with the server using JavaScript, but when the script gets off on mobile, let's say Android stops it. No. So it depends on what you're doing with the JavaScript. If you're doing some DOM manipulation, that's not possible with ServiceWorkers because ServiceWorkers doesn't control your document. So let's say, let's consider one of the use cases which... So I need a pull request. ServiceWorkers cannot do it. Yeah, it can do the pull. It can do a network pull. It can do a network pull in the background, even if your screen is off. Okay, that's good. Yeah. There's one interesting use case, by the way, with ServiceWorkers, which I was again planning to demo, but... So how many of you know about geofencing? Right? So ServiceWorkers is a very interesting use case for websites which are going to display different data around different geographical locations. So as soon as you move from one place to another, ServiceWorkers would, in background, pull data according to that geographical location and present it with that data. So it's right on the move. So let's say if you divide this new audience into sectors, into geofence locations, let's say you put French Quarter in one of the fences and put Downtown in another fence, you move out of Downtown and you'll see a notification on your cell phone which says that you've moved out of Downtown and this is the data... The data would be refreshed, basically. Yeah. Thank you. Welcome. Any other questions? No? Thanks, guys. Feel free to evaluate our session and put your comments on the URL below. Thank you. Thank you so much for listening.


this is Marc I'm doing great thanks for asking. Could you please tell me what time it is? Do you know where the closest bus stop is? Is it possible to know what the result of my test was? I wonder if you're paying attention to this lesson. In this lesson we're going to learn how to make indirect questions. So stay tuned. Yes that's right we're going to talk about making indirect questions. However I spoke about making questions. If you want to watch all those lessons you may click here. I will read you more or less how to make a normal question. What do we need first? We need the auxiliary. Yes the auxiliary is essential in a question. The auxiliary plus the subject. We have WH question words like who how where when that goes first. Then we have the the auxiliary like I said. Then the subject sometimes I will get to that in a minute. Then the verb. The verb could be the base of the verb past past participle and in the verb. And then we have the object maybe or a time expression at the ends of the sentence of the question sorry. So we have two types of questions. Object questions and subject questions. The object questions follow the following rule. So WH question word then we have the auxiliary then the subject and then the verb. Like in this example what are you doing? I'm asking for the object. I'm doing something so something is the object right? In the other example I ask for the subject so who taught you English? Here we need the subject we want to know who so somebody taught me English. So you can see that we have WH question word and then we have the verb in the past and then the object and then something else right? So is the subject question. This is a subject question. Who taught you English? So Mark for example taught me English. If you want to watch those lessons you as I said you can click there and you will get to that lesson. But in this lesson I want to concentrate on making indirect questions and when would we make indirect questions? When we want to be more polite to somebody or we want to keep a distance from someone right? So we make indirect questions in those cases and we have expressions that we use when making indirect questions and so we are going to get to all those expressions. The first expression that I introduced in my introductory example was with could. Could you tell me or can you help me or would it be possible? Notice how I used modal verbs. So could, can and would. Remember that obviously if you're making an indirect question the first part the first part of the question is the question. So can the auxiliary then follows the same rule right? The auxiliary can, then you which is the subject, then help which is the base of the verb, help and then the object. The rest is not a question. It's part of the question but it's not the question itself. Let me give you examples to show you what I said. Could you please tell me, could you please tell me? I added please here just to be polite. Could you please tell me what time it is? Notice that I don't say what time is it but what time it is. This is not the question. This is part of the question but it's not the question. The question is right here. Could you please tell me? That's why is an indirect question. So let's go to the second example with would it be possible? Would it be possible to take a look at your homework? Would it be possible to take a look at your homework? So here would it be possible is the question and the rest is part of the question. It's not a question. And the other example, would it be possible for me if you want to be very direct, I mean showing that it is you that you care, would it be possible for me to go out early from work today? So would it be possible for me is the question and the rest is not a question to go out early from work today. Now the second expression that I used and that we use actually is do you know or do you happen to know using the auxiliary do and then the subject you. Right?  And the examples are do you know where the closest us stop is? Notice here again. Do not get confused with these. Some people say where is the closest bus stop is wrong because the question is do you know? Do you know where the closest bus stop is? Right? Let's look at a second example. Do you happen to know? Do you happen to know? So here do you happen to know is the question and then if the train arrives on time? Notice something? Yes. We have conjugated the verb to arrive right here. Is third person the train? It arrives on time. Yes, it is right because the question is this part. It's not this. It's the first part. Do you happen to know if the train arrives on time? Yes, many people make mistakes with this. So I'm going to erase this and we're going to go over two other cases where we use making indirect questions. Yes, so making indirect questions. The third point, expressions with the verb to be like is it possible or is there any chance? So let's look at the examples. Is it possible to know what the result of my test was? Again, the question here is is it possible? And then we have to know the verb what the result of my test and here is the subject was a verb or auxiliary. So to know what the result of my test was not what was the result of my test. No, the question is here. Is it possible? So let's look at the other example. Is there any chance? Is there any chance for me, if you want to, to use your cell phone or to use your phone? Is there any chance for me to use your cell phone or your phone? Now, if you don't want to use any of these expressions, you can always use I wonder if or I'd like to know or I was wondering if these are not questions but they are statements made to indicate a question. Let's look at my example. I wonder if you're paying attention to this lesson. So I wonder if you're paying attention to this lesson. So this is an indirect question but if I wanted to make a direct question, I would say are you paying attention to my lesson or to this lesson? Are you paying attention to this lesson? If I want to be indirect, I wonder if you're paying attention to this lesson. The other example and the last example for today is I'd like to know, I'd like to know how much this house costs. Look at here, we have the verb to cost third person this house costs. So as you can see, there are no questions, there are indirect questions. I'd like to know how much this house costs or I'd like to know if you're coming over tomorrow. I'd like to know if you're coming over tomorrow. If I want to be direct, I would say are you coming over tomorrow? Are you coming over tomorrow? Okay, that's it for today. I hope you enjoyed the lesson. If you have any comments, any requests, you may type them under this video. If you haven't subscribed to my channel, I suggest you do. If you want to share the lesson, you may do so. Have a great day and see you next week with a new grammar lesson. Take care, bye-bye.


Okay, welcome back everybody to our second lecture on BC314 Median Technology and Ministry. We've just had a little lecture on AI and its use in church and Christian ministry. Let me just read the comments that have been put in the chat. Divya has some things to share. Churches and Christian ministries can leverage the potential of AI in terms of increasing efficiency and productivity. So it's a great audience. It's a great content that can convey biblical truths in a creative manner. Also, feed LLMs with the correct scripture content. That's not done. The well-contained models with incorrect data can mislead masses. That is true. Also, if churches and Christian missions have stayed themselves from this trending technology, there's a danger of becoming less relevant among communities that could rely on AI in the future. That's also very important. That's true. Good thoughts. So I think Divya is pointing out something very important that if we don't get involved, we could get left out and sometimes in some ways, especially in the context where people are using AI. It's becoming more and more prevalent and I'm sure people are going to start developing tools, all kinds of tools based on AI that will basically run on our phones eventually. It'll just become so commonplace and so many tools. If the church does not get involved, doesn't engage, doesn't see how it can use it for advancing the word of God, we could become in this space, we could become less relevant, less impactful, we could miss out on opportunities. So that's a good point. We must do our best to engage. Good. Thank you for sharing that. So now we're going to move into this last chapter. As I mentioned, we're going to talk about data privacy, data protection, which is important. So what we must be aware is that different countries, different regions have their own written statements and regulations on how data has to be protected. And in this space, the European Union is probably the toughest, strictest, in terms of privacy, security of data, personal data, and a lot of other countries then follow their regulations and their frameworks that they have put out. So essentially, generally, I'm speaking generally, like we said earlier, every country has their own written rules or policies or regulations. But generally, what is the intent or the motivation here is to protect people's data and to hold organizations who are entrusted with this data accountable. So if you think about a church, a Christian organization, the congregation or people, even beyond the congregation, entrust them with their data. Typically, their name, numbers, phone numbers, email IDs, lots of other things, addresses, and it could be more, they're entrusting them with the data. So the organization then is responsible to protect that data, keep it private, keep it confidential, not be misused, not be leveraged for commercial purposes, other than the fair use that is agreed upon and be accountable if anything goes wrong. So there has to be lawfulness, fairness and transparency, how this data is being collected, how it's being used, limitation, its purpose, that means you use it only for what you've stated that you're going to use, you're collecting the data for, and you only collect what is absolutely necessary, minimal amount of data, keep the data accurate and, you know, after date, and store the storage. It's stored only as long as is needed for the specified purpose, integrity and confidentiality, that means keep it in a way that's encrypted, it's secure, nobody else can take it and misuse it, and you must be accountable. If anything happens, you need to report or you need to inform the people who've given you the data and be accountable for this. So basically that's the motivation in these policies or regulations that governments, you know, put together. So when we as a church or a Christian ministry, when we are collecting data, we need to remember that these laws or these policies apply to us as well.  You're part of the country, you follow the rules of the country, wherever you are. And today we are collecting data from all over the world, right? Because you're online, people from all over the world could come, they can give you their information. So you're really collecting information of people from so many different parts of the world. You are accountable and it's true that, you know, you're operating in that country, but actually you're also reaching out to other countries so nations could hold you or could do things that will hold you accountable even though you are physically outside, but you're collecting data from people in other geographies, right? So they can hold you accountable or expect certain things from you and how you're handling data. So data protection, protected data from unauthorized access or being taken away. So that essentially is how you set up your database and how you store it, how you back it up, all those things, which of course the IT team is responsible and you need to know. And then there also the danger of malware, that means people are other people, external people are trying to attack, trying to disrupt systems and trying to even take away data. And we keep hearing in the news, you know, data breaches that all happen often where people succeed, whether it's in a medical hospital data or whether it's in a financial data, whether it's in a corporate company data, you know, people are trying to attack and take this data and cause problems. They can hold others for ransom and so on, especially if we get the financial data, financial information. So data protection is one important area to think about. Make sure you're securing the machines in which this data is being stored. Tell your IT people, right? So for example, I talked to our IT people and our IT people are there. We secure the servers in which the data is stored. We put them behind firewalls. We secure the ports, a lot of different ways in which, you know, you can secure data that's sitting on those servers. And then keeping it confidential. That means you don't allow other people to access this data and misuse it. Right. So there are several ways to secure the data, of course, through using passwords and access controls. And also let's say within your organization, people use the data. They need to know that they have to keep it secure. So example, you know, and in church, our pastors and a few of our staff, they have access to a church management system where we store all our, the data of all the people and a lot of other information, you know, the personal data. So, yeah, our pastors, everyone has all the pastors have access to it because at any time they need to log in, if they need to contact somebody, then, you know, for the work they're doing. And then we also have, or just excuse me, please, one minute. I just need, one minute, I just need to pause here. Sorry, sorry about the interruption. All right. So when we, when we are, we have all of the data, our pastors have access to it, our member kit team has access to it. And they use it for, you know, their work. So they need to call people, they need to respond to various things, so on. They have access to the church management system, which is, which has all the personal data. But they all are aware that this data is confidential, right? So we're using it for data they use to serve the people. But we can't take it out and pass it out to our outsiders at random, right? So that's our responsibility, right? As an organization, we tell our people who have access to this data, we're using the data to serve, also to keep it confidential. So let me just go back to the PDF. Yeah. So the confidentiality, you all have access only by authorized users. In our case, it will be the pastors and the member kit team. They are the ones who are making the calls or caring for the people and so on. They are the only ones who have access to this data. So keeping information about the individual private, keep it secure. They may not, nobody wants their personal information to be given out to others randomly. So keep that. And if there is a security breach, for some reason, you know, if somebody manages to take the data off or misuse it, the law requires us to notify people immediately as soon as possible. And of course immediately take action to secure whatever data is there from further loss and damage. That means we need to inform the people, hey, example saying, hey, you know, we were storing your data securely as best as we could, but somebody has been able to break through our security measures. They have taken your data and so please be careful. So that notification. Now, maybe if you're storing, there are degrees of impact that can happen. If you're storing just contact details and maybe birthdays and anniversaries, that's one degree, but if you're storing personal information like bank details and others, that's very serious, right? If that data is breached, that's very serious, right? So financial information is very serious. So, but the thing is you have to notify the people. If something goes wrong, it's our, it's a responsibility to notify people. So just keep these things in mind as a church, as a ministry, when we are collecting data, we need to be responsible. We need to protect the data. We need to keep it confidential, keep it private. And if something goes wrong, we need to notify the people, inform them and respond to that. Okay. And that's a quick short lesson, but it's a closing lesson. It's something for us to be mindful about when we set up our software systems and all of that as we collect data. Any questions on this? Okay. So this brings us to the completion of this course on media and technology. Just a few words and review. So basically, we started out this course by saying that the way things are, huge numbers of the world's population are engaging with media and technology. And we can see current data online, which means the church also must engage in the space. The church also must leverage media and technology and not be left out, but engage very meaningfully with people. And we started off by giving some guidelines that the tools and the methods may change, but the message is the same. The message is the gospel of Jesus Christ to be delivered by the power of the Holy Spirit. And that's how we go about things. And then we, you know, the tools and methods will keep evolving. There may be new tools who knows by years from now, something new might come up. We don't know. But the message is the same. And our dependence is on the Holy Spirit. And there are standards by which we govern ourselves as we use these tools and technologies. So we started with some basic things of how things have changed in the contemporary church, in the sermon that's being preached, in the worship, in the gathering place, in the manner in which communication happens. Things have changed. And the goal is to be relevant. The goal is to be impactful. We keep preaching the same message. And we keep adapting to the, you know, the changes. But the goal is, you know, let's reach people. And then we talked about, we started talking about different tools right from looking at television, radio, television, drama, music, theater, arts and poetry and all of these things that have been used over time to minister to people. And then we went into talking about digital engagement. So we want to engage people digitally. How should we position ourselves? We gave some simple guidance on understanding your congregation, understanding the people. Where are they engaging? And how do you meaningfully engage? How do you engage meaningfully on various platforms? And then we started getting into some details. We talked about the various technologies or tools that we could use, the equipment that we could use, digital equipment that we could use. So we went through, right from starting from basic photography, audio, video, video production, live streaming. So we went through all of that and just gave you some information.  But general idea, look, this is what you would need to do these things in your church or ministry. And then we also talked a little bit about software platforms that we use. I just kind of shared with you some of the things that we use here at APC. And then we closed out just today by talking a little bit about AI and data production, data privacy. So we've covered a lot of ground. But I hope this gives you the impetus that, yeah, let us use media and technology for ministry. Encourage the development of the skills. That means there'll be people around you. Encourage them, hey, you developed the right skills so that you can make use of, you know, whatever technology or use it. And then think of ways, creative ways by which you can use those tools, those technologies, media to reach people. Right? So with this, we will close this course. And next week, I will work on putting out an assignment. It's a non-technical assignment. I'm not going to ask you any technical questions. It's just for us to do a full review.  So you keep your PDFs open.  It should not take you more than one or maximum one and a half hours, two hours to do the assignment. And the assignment will then give you a grade for the course. Okay. The assignment will be simple. It's based on, you know, whatever we discussed. It will be non-technical. So I'm not asking, couldn't expect you to know technical information because we have a mix of people here. And so once we put out that assessment, you will, it'll be on Google classrooms. You'll be notified and you can work on it. And with that, we will close. Right? Any questions? Anybody has any questions before we pray and dismiss? Any comments? Let's close. Somebody could please pray with us and then we will dismiss. Anyone can pray, please. That's fine. Heavenly Father, I come to you under the name of Jesus. Thank you for this day. Thank you for this time of prayer. We thank you for this course that we have learned. We thank you for the technology around us and the development and for the knowledge and the wisdom and understanding you have given to us humans. And what I pray that Jesus is everything that we learned when our ministry needs it a lot. You will remember us, the things that we've learned, help us to apply it as leaders, as we go out, help us to walk in wisdom and understanding. Above all, the glory by Jesus. We thank you for Pastor Ashes. We thank you for everything that he has taught us. And I thank you for all my classmates. May all grace, peace, love and blessing be always our promise. We give you all the glory and honor and Jesus may enter. Thank you everyone for being part of this course. I hope you enjoyed this journey. Please look out for the final assessment. Make sure you do it so we get you great and we'll be done with that. Thank you so much. See you tomorrow. God bless. Bye.


The expectance of discovery is a heightened desire to realise ancient secrets and for hundreds of years knowledge of advanced disciplines was a crime. Seen as sorcery or witchcraft and inflicting this fear wherever interest would arise was the inflection by the ruler of the time. But all over the world throughout the different ages secrets have been kept from an elitist group who only seek to keep a hold over their surroundings, wait to hear this. Back in 2007 the Farron, Sun Jewel, Tommy and Stuart Mitchell revealed to the world that at Roslyn Chapel a music score existed that they had deciphered and was then played by an orchestra in concert. Carvings on the 600 year old Roslyn Chapel in Scotland represent a coded form of a musical mystery in its architecture and design. At one end of the chapel on the ceiling are four cross sections of arches containing elaborate symbolic designs on each array of cubes. The cubes are attached to the arches in a musically sequential way. And to confirm this, at each end of the arc there is an angel playing a musical instrument of a different kind. And after 27 years of studying research by Tommy Mitchell, he revealed he had found the pitches and tonality that matched the symbols on each cube revealing its melodic and harmonic progressions. The musical score has been frozen in time at the chapel for 600 years. Inside the chapel there are 13 angels that Tommy has called the orchestra of angels which are carved into the chapel's arches and who appear to be musicians. Surrounding the angels are 213 geometric symbols that were found to resemble sound waves at different pitches. After decoding all the symbols to match the sound waves they found a song which researchers says part of the somatic's music system which is the study of wave phenomena associated with physical patterns produced through the interaction of sound waves in a medium. Tommy said in an interview that it is what we call frozen music a little like cryogenics. The music has been frozen in time by symbolism. It was only a matter of time before the symbolism began to fall out and began to make sense to scientific and musical perception. The Mitchell's describes the song as sounding like a Celtic melody or an ulcerary rhyme. The unusual combination of instruments, their dynamics, tunings and textures recreate a sound long forgotten from our past. The melodies are simple but harmonically developed and unfold in the most simplistic but charming way. The sequential arrangement of the cubes at many times is a series of repeated notes signifying a more functional than aesthetic sense to the music. Sometimes it sounds like a ulcerary rhyme and there's also a feeling of a Celtic air about the music. The Mitchell's have added words from a contemporary ham and touring music and have named the composition the Rosalind Motette which is performed by the Talis Chamber Choir and produced by Stuart Mitchell.


This video will be a mathematics talk on the following topic. Is the Conway not a slice knot? This topic is a little bit unusual for me. In fact, it was requested by an audience member, and I should warn you in advance I'm not exactly an expert in this area. In fact, I was learning about it by hastily reading up Wikipedia earlier today, so you're kind of being warned that not everything I say is necessarily actually correct. So, this question, is the Conway not a slice knot, was an open question for quite a long time. It was answered very recently by Lisa Piccarillo in the following paper, who showed that the Conway knot is not slice. I should also warn you, I'm not quite sure how to pronounce her name correctly and I'm sorry if I've got it slightly wrong. So, what I'm going to talk about is, first of all, what is the Conway knot? And secondly, what is a slice knot? And then I'll say a little bit about how Lisa Piccarillo was able to prove that the Conway knot is not a slice knot. So, first of all, let's discuss what the Conway knot is. Well, first of all, we should just sort of review what a knot is. So, a typical knot might be something like a trefoil knot, which looks something like this. And if you've got two knots, you might want to tell whether they're different. So, is the trefoil knot different from an unknot? And it sort of looks intuitively obvious that they're different. And for simple knots like this, it's not very difficult to tell whether they're different. But in general, if you've got a really complicated knot and another really complicated knot, it can be really hard to tell whether they're the same or not. And one way to show two knots are different is to look at the Alexander polynomial. So, the Alexander polynomial is a certain polynomial. Actually, it's really a Laurent polynomial, usually denoted by delta of t, depending on the knot. And you can calculate the Alexander polynomial for knot. For instance, the Alexander polynomial of this sort of unknot is just one. And the Alexander polynomial of this trefoil knot is t minus one plus t to the minus one. And these are different polynomials, which shows that these are different knots. Of course, for this particular case, it's trivial, but in more complicated cases, it's much easier to tell whether or not two polynomials are the same. And for complicated historical reasons, there's a variation of the Alexander polynomial called the Conway polynomial, which is usually denoted by delta of t. And these are related because the Alexander polynomial of t squared is equal to the Conway polynomial of t minus t to the minus one. So, how do you figure out what the Alexander polynomial of a knot is? Well, you can work it out using the Skyn relation. And the Skyn relation is a little bit easier to do for the Conway polynomial, so I do it for that. So, the Conway polynomial of the trivial knot, sorry, the Conway polynomial of the trivial knot is just one. So, here this isn't a zero or an O. It's an actual knot consisting of just a circle. And if you've got a knot like the trefoil knot, then what you can do is you can close in on one of the crossings in some plane projection and you can twiddle this crossing in several ways. For example, you could change it like this, where you put one piece of string under the other piece of string and you could just change it so it's going over. And another thing you could do is you could just cut these two strings and rejoin them and you would then get something like this. So, there are three very close related knots. You know, this one isn't actually quite a knot, it's a link, but let's not worry about that. And what's happening is you get three different sorts of links here. Here you get a link, sorry, a crossing which can be denoted by L minus. And here we get a crossing that looks like this, which is usually denoted by L plus. And here we get a crossing that looks like this, which is denoted by L zero. So this is really a picture of what's going on inside this little circle here. And now the Conway polynomials are related by the Conway polynomial of L plus of T minus the Conway polynomial of L minus T is equal to T times the Conway polynomial of L zero of T, where these represent the three knots where you've done this crossing, this crossing and this thing inside the knot. So this would be L plus, this is L minus and L zero. And you can check this recursion relation actually defines the Conway polynomial of any knot. So this is the famous Skyn relation. It was actually first discovered by Alexander in the 1920s, but everybody forgot about it. He put it in a sort of little footnote right at the end of his paper that nobody paid any attention to. So it then got rediscovered and it was only later realized that this was really first found by Alexander. So if the Alexander or Conway polynomial of a knot is not one, the knot is non-trivial. And you can ask the converse if the Alexander polynomial is equal to one, is the knot trivial. And Conway found an example of a knot with trivial Alexander or Conway polynomial where the knot wasn't trivial. So here is Conway's knot. I haven't dared to draw it because I'll undoubtedly get it wrong. So Conway's knot is the left-hand one. And as you see it's got, I think it's got 11 crossings and is trivial Alexander polynomial. And the knot on the right is another knot that also is trivial Alexander polynomial. And it's something called a mutation of Conway's knot that we'll come to later. So just explain what a mutation is. You see inside the red circle the two, the knot's the same except that the stuff inside the red circle has been sort of twisted round a bit. So that's roughly what a mutation of a knot is. You take a sub-piece with four bits of string sticking out and you twiddle it round a bit. So next I'm going to talk about what is a slice knot. So the first attempt at defining a slice knot.  Well, for various reasons, knot theorists don't use three-dimensional Euclidean space. They tend to use a three-dimensional sphere, but it's just a minor technical difference. But I want to think of S1 inside R3 for the moment. And what you can do is you can think of R3 as being embedded in R to the four. And what you can do is you can take a copy of a sphere, S2 inside R to the four, and you can intersect this sphere with R3. So what you're doing is you're really taking a slice of a sphere by the standard hyperplane R3. And most of the time this intersection will be a copy of S1 inside R3.  Well, it turns out that's a completely stupid definition because every knot can be obtained in this way. And you can see this quite easily as follows. So suppose I take a copy of R3 and I'm going to draw R3 as a plane because I'm going to need a bit of extra room to move in. So you have to pretend that this plane is three-dimensional. And now suppose we take a knot in R3, and I can't really draw a knot very well because this is a plane and there's not room to draw a knot. So pretend this is a knot in R3. And what I do now is I take a point in R4 and I just sort of join it up to all the points on the knot. And then I can do the same thing on the other side. And if you think about it a bit, you will see that if I do this, I get a copy of a two-dimensional sphere S2 whose intersection with R3 is just the knot I started with. So we can't define slice knots quite like that. We would like to define them as slices of a sphere, but the obvious definition just breaks down. Well, if you notice there's something rather funny about this construction. This point here is rather weird. In particular, it doesn't look locally like the standard R2 contained in R to the 4. So you can think of R2 as being a vector space inside R to the 4. And you'd really like the sphere to look locally like that. So what we say is that it's locally flat. And this construction isn't locally flat. So we can try saying that something is a slice knot. So we can say something is a slice knot if it is a slice of a locally flat copy sphere in R to the 4, or possibly S to the 4, depending on what you want to embed things in. So this gives a slightly better definition, but there's still a slight problem with it. So there's a theorem of Friedman from 1984 which says that if the Alexander polynomial equals 1, this implies that the knot is a locally flat slice in R to the 4. So it means you can take it by intersecting a sphere with R3. Well, if we use this as the definition of a sliced knot, then this would show the Conway knot is a sliced knot because it's Alexander polynomials 1. I mean, that's the interesting thing about the Conway polynomial. It has Alexander polynomial 1. Well, it turns out that there are two slightly different concepts being locally flat. So we can either demand that it's topologically locally flat, or we can demand that it's smoothly locally flat. And a lot of the time, anything you can do with topological functions, you can do with smooth functions, essentially because any continuous function can usually be approximated as close to you like by a smooth function, but sometimes you can't. And this is one of the cases where it really matters whether you're doing things topologically or smoothly. So Friedman's result says that a knot with Alexander polynomial 1 is topologically locally flat. And this is sometimes called topological flatness. On the other hand, what Lisa Piccarillo proved is that it's not smoothly locally flat, and this is what's more difficult to prove. So let's just give an example of something that is smoothly locally flat. What I'm going to do is I'm going to take the following knot. See if I can draw it correctly. Real knot theorists are much better at drawing knots than I am. So what I'm going to do is I'm going to take a knot here. Notice that what I've done for this knot is I've taken a knot and kind of joined it together with its mirror image. So you can think of this as being a mirror, and then this is just the reflection of the knot in a mirror. And what I can do now is I can make this knot a slice of a sphere in four-dimensional space sort of adding semicircles in four-dimensional space from each point to its mirror image like this. So you should think of these orange semicircles as kind of sticking out in four-dimensions. And that gives me half of the sphere, and then I can get the other half of the sphere by joining up with semicircles going in the other direction in four-dimensional space. So anyway, if you do this construction, you find that any knot that's obtained by taking a knot and joining it with its reflection in this way is actually a smooth slice knot. Well, now the problem with telling whether or not with showing that the Conway knot is not a slice knot is the following. First of all, Conway knot is a mutant of a slice knot. And let's just recall what this means. Well, if you go back to this figure here, the Conway knot is the one on the left, and it's a mutant of the one on the right, meaning you can get from one to the other by sort of chopping out something with four bits sticking out and rotating a bit. The one on the right is actually a smoothly slice knot. Well, the other problem is that the Conway knot is a topological slice knot. And this follows from Friedman's result because its Alexander polynomial is trivial. And the problem is that before Lisa Piccarillo's result, we had some methods for showing that mutants of slice knots were sometimes not sliced. However, they all worked by showing that the knot was not topologically sliced. So they completely fail for knots that are topologically sliced knots. There were no ways to show that a mutant of a slice knot that is topologically sliced knot is not a smoothly sliced knot. So this was the sort of hard problem that she had to solve. And the way... I'm now going to sketch very roughly how the proof goes, and for reasons that become obvious in a moment, I'm not going to go through the details precisely. So the idea is as follows. First we've got a knot k. So I'm going to write k for a knot. And a knot is contained in s3. And s3 you can think of as being the boundary of a foreball. And what we can do is we can form something called the knot trace, which is denoted by x of k. And what you do is you think of the knot in s3 and we sort of add a fattened disk to b4 joined along k, which is in s3. So a disk has boundary circle s1, so we can join the boundary of the disk to k, and then we can fatten it out a bit and we get a foremanifold with boundary, which is called the knot trace. And then you can check that k is smoothly sliced, sorry, smoothly sliced, is equivalent to saying that the knot trace xk smoothly embeds in s4. So now these picarello strategies are now the following. So step one, pick a special knot, which is denoted by k prime. So I'm going to take k to be the conway knot. So first we're going to select k prime and k prime has to have the following property. We want to show that x of k is equal to x of k prime. And thirdly, we want to show that k prime is not smoothly sliced knot. And we show that k prime is not smoothly sliced by showing that s of k prime is equal to 2, where this is a certain invariant called Rasmussen invariant, which has the property that s of l is not if l is smoothly sliced. So if we can show all this, then this will show that the conway knot is not a smoothly sliced knot because our special knot k is not smoothly sliced because this invariant vanishes and these two have the same knot traces. So if k prime is not a smoothly sliced knot, then k is not a smoothly sliced knot. So there's no reason why this invariant s should be the same for k and k prime, by the way. So the clever thing is you first have to change the knot to a different knot and then calculate an invariant of this different knot. Well, that's the overview of the proof. The details are kind of really rather complicated. So first of all, we need to know what the knot k is and the knot k looks like this. Let me just check I've got it right. So this is the knot k prime and you can see it's already looking a little bit complicated. Now we have to do step two, which is to show that the knot trace of k and k prime are the same. And the proof of this looks like this. Okay, well, you start with these rather complicated looking diagrams which are indicating various constructions you do with knots. This is a sort of calculus of four-dimensional manifolds that knot theorists use. And it's worse than this because this calculation goes on a bit like this. So we've got two pages of these rather hairy-looking geometric manipulations. And I sort of look at these. You know there's a sort of goal which is to formalize all mathematics so it can be computer checked. And imagine trying to take these diagrams and formalize them in some formal language that a computer can check. I really don't envy whoever has to do that in the future. So that sort of does step two, which is showing that the knot traces of these two knots are the same. Then we have to do step three, which is to calculate the invariant of this strange knot k prime. And the calculation of that looks a bit like this. Okay, well, as you can see, this is a highly non-trivial calculation. You need to calculate this large table of numbers in order to work out Rasmussen's invariant. Okay, so the proof sort of is one of these where the step... If you just look at an overview of the proof, it perhaps doesn't look too difficult, but actually figuring out the details of these three steps is really rather hairy calculation. I must admit I have no idea how she managed to pick this particular knot k prime in. Once you've picked this knot k prime, then checking step two and step three is in some sense a reasonably routine calculation. The difficult part of this proof is thinking of this process in the first place and picking the right knot k prime. Okay, as I said, I haven't put in the details. If you want to check the details for yourself, I'll put a link to the paper in the description of the video.


So guys, when it comes to shooting travel content, I like to bring only the necessary gear with me so that I can create the best possible travel video. The less gear I have with me, the more enjoyable and stress-free the trip will be. Now, last week I went to Paris and shot a lot of videos on my iPhone 13 Pro Max, I think over 700 clips. One of the biggest advantage of a smartphone camera is that you always have it with you, and if you come across an unexpected moment that you'd like to capture, you can simply pull out your phone and take the shot. You don't have to worry about carrying around heavy camera gear. It's all possible using your smartphone and a couple of accessories. Now, I remembered where I didn't use my smartphone to capture all my travel content. I used to bring my Canon ADD with me with this huge travel backpack, and I would pack my Canon ADD, my gimbal, my drone, my tripod, and all of that stuff, and then walk up Machu Picchu, feeling super exhausted at the end. And the funny part is I didn't even use half of the gear during that trip. So guys, keep it mobile. What's up guys, Bennett Grazer here with smartphonefilmmaking.com, the epic online program to shooting awesome videos with your phone. In this video, I'll be sharing with you my best travel video setup when filming with an iPhone. Now, if you're using a different phone, it doesn't matter the same rules apply. Now, keep in mind that all products mentioned will be in the video description below, so feel free to check them out. So, starting with the first item that I always bring with me when creating travel-type content is the Tool Legend sling bag. There are many sling bags that you can get, but I like to use this particular one because it has several multi-function pockets and fits all of my smartphone gear in it.  Originally, I used this for my GoPro, but I find it works well when shooting with a phone. I had this sling bag for quite a long time now, and as you can see, it's very durable. So, moving on to the camera I'm using is the iPhone 13 Pro Max. This is the camera I bring with me when traveling. As of making this video, it is the latest iPhone you can get. It has a pretty good battery life, which is important when filming on the go. It has great image quality, and I especially love cinematic mode. I think it works great for shooting medium and close-up shots as it adds a nice shallow depth of field to your videos. I like to mix it up with the video shot in the standard video mode to add more interest. And what's great is that you have three lenses on the back. This allows me to get a variety of different focal lengths without the need to use third-party lenses. I can quickly switch between the lenses to get the desired shot I need. I like using the telephoto lens a lot whenever I can't get closer to the subject. Now, the telephoto lens by Sandmar is a third-party lens I sometimes use on the built-in telephoto lens that allows me to get 4.5 times closer. Now, you could zoom in, but zooming in too far will eventually degrade the image quality. Now, for those that only have one lens, I do recommend getting a telephoto lens as it does look nice on the subject's face, and you can get a closer shot. Now, what I like about the telephoto lens by Sandmar is that it comes with a clip that you can mount on most smartphones just like that, and then straight away start shooting. Now, when using a third-party lens on a gimbal, it can get heavy, so make sure to get counterweights to balance the weight. The next item I like to bring with me when traveling is the DJI OM4. This is by far my favorite gimbal as I can charge my iPhone while shooting and also has a quick setup time. Now, let me show you what I mean by that. This is a trick I like to do that not many people know of that allows me to get quick gimbal shots. When I'm on the go, a lot of times I have the DJI OM4 in standby mode. And to enter standby mode, I simply press the M button three times, and I can quickly fold it and leave it that way. And when I see something interesting that I want to shoot, within seconds I can unfold the gimbal and simply press the trigger button and I'm ready to shoot. And this way I don't always have to turn on and off the gimbal all the time. But do you know how the pros unfold their gimbals? Like this. Oh yeah. Now, this is no joke. I sometimes really unfold the gimbal just using one hand. Now, what's great about standby mode is that I'm also able to charge the gimbal. And during my trip to Paris, I always ended up charging my phone because shooting in Filmic Pro does use up a lot of battery. And if I want to go handheld, I can quickly detach the phone from the gimbal so I can simply turn it off, fold it back, take it off. That simple. Now, when shooting with the DJI OM4, I never have a case on the iPhone 13 Pro Max as it adds more weight and doesn't really fit with the magnetic clamp. But at no point during my trip did it fall off the gimbal. So I highly recommend the DJI OM4 as it does the job well and has everything you need for capturing those moments. Something else you should use when shooting travel content is Filmic Pro, which is a professional video app that allows you to have full control over your camera. You can get by shooting with the native camera app, but you will still have less control. With Filmic Pro, you can control the focus and exposure separately, dial in and lock your wide balance, set your ISO and shutter speed and much more for better video results. In my course, I talk about it a lot and have a dedicated section on how I use Filmic Pro to get professional video results. While I was in Paris, I shot 90% of the footage using Filmic Pro. I'm actually currently working on the video of Paris and it's going to be pretty cool. Now, I'm really glad that Filmic Pro made such an advanced video app for those wanting to take their mobile filmmaking skills to the next level. At first glance, it might seem overwhelming with all of its features, but with the basic understanding and simple process, you can get some really great results. Last, you will need some kind of editing app such as LumaFusion. Now, I prefer editing on a desktop computer. My main editing software is Filmic Pro, but when it comes to editing on an iPhone, LumaFusion is my go-to app. I find that LumaFusion is the best and most advanced editing app out there as it's inexpensive and packed with many great features. It will soon be also available for Android users, so stay tuned for that. Now, even though I don't edit that much in LumaFusion, it's still great to have an editing app with you as you can import the clips you shot and create a quick edit for your social media. Now, if you want to learn more, head over to smartphonefilmmaking.com, the epic online course where you will learn everything there is to shooting cinematic and professional-looking videos with your smartphone. Now, if you're new to making mobile videos, make sure to also download my free smartphone filmmaking guide that will help you get started making quality videos on your phone. Also, make sure to hit that subscribe button as this will help me make more valuable content for you guys. If you have any further questions, let me know in the comment section below. I appreciate all of you. Keep it mobile and I'm out.