We'll just do a quick start check. So how many of you guys are aware of famous? Have you guys worked in famous, or have you been following famous over the past few months or so? How many of you guys have seen the periodic table demo of famous, right? Isn't it awesome? So for the benefit of those who have not seen, probably you can see it. But thank you very much for joining in today. So those of you who have seen the famous periodic table demo, you would obviously know what it is capable of, and those of you who have not seen it, all you can check it out. So I mean, my intention for today's talk is not to really show you those awesome animations, that anyway the famous guys are doing it. But we are going to be looking at some of the applications which we can build using famous. Specifically for the future, I mean when I say for the future, what I mean is we are going to be looking at some of the use cases, possible application areas and trends where famous can really help us. And I should say famous along with the web. So as we all know, web is pretty much prevalent in our lives, like 15, 20 years back. We only had desktop browsers. And then we have, now we have these mobile browsers. And we also have these embedded devices, which I mean, of course, earlier these embedded devices used to run some miniature OSs. But now they also run full-fledged OS, Ubuntu, or some versions of Linux. And these OS also supports some version of Chromium or Firefox. So we can actually have applications of web-enabled devices running UIs. So that's going to be the focus of my talk. I've got some demos to show you. But I'll not be showing you any code during this talk, because I'm very, very scared of showing my code in public. I'll give you my GitHub link. You guys can go and check it out. Find any bugs. Please don't ask me. But if you fix any bugs, please let me know. So my name is Shyam. I am a technology consultant. I work on a few of the emerging areas. And that includes web. And my involvement in Famous has been, for the past six months or so, so I run a meetup called Bangalore JavaScript UI Hackers Group. And as part of that, I've got the liberty to kind of fiddle around and dabble with many of the UI frameworks. So Famous is one of them. And so let's get started, guys. So first of all, we'll have a look at what Famous is, and what are the capabilities of Famous. And then we will look into those future application areas and trends and the use cases where Famous can really help us. So Famous is a user interface library. It is also an animation library. It is also a WebGL rendering library. And it is also a physics engine. It has an inbuilt physics engine. Now you would say that there are so many user interface libraries already available. You already have so many animation libraries. jQuery itself has an animation library. You also have WebGL, 3JS. Anybody has worked in 3JS? And then you obviously have physics engines being implemented in some other libraries as well. So what is the thing that Famous does which others can't do? And how does Famous really differentiate itself? So when it comes to user interfaces, Famous has something called as an imperative development approach, which is completely different from what you have in declarative syntax of HTML and CSS. So all the coding, all the widgets, the panels, whatever you build as part of your UI applications, will be directly built using the JavaScript programming language using the API, which Famous provides. You typically do not write any HTML code as most of the developers are using. Famous supports animations. And Famous claims, in fact, they vociferously claim that they can do 60 frames per second, which nobody else can do. And I guess they have done some benchmarking also. And they have got some pretty good claims about this. So they claim that they are the only library, only animation library for the web, which can do 60 frames per second. How they achieve that, we will have a look at it. I will give you a bit of an overview about that. Famous supports something called as a mixed mode. How many of you are aware of mixed mode? So mixed mode basically means that you can render DOM and WebGL in the same coordinate space, which is otherwise not possible. So you would be using, let's say, 3JS for rendering your WebGL. You could be using some other library, jQuery, UI, or something like that for your DOM. And then you will have to manipulate them separately. And you cannot even sync them together. And this is what Famous really achieved, that using Famous, you can render these two things together within the same coordinate space. I'll show you a demo, and then that will give you a better idea about this. 3D visual effects. So the physics engine, which the Famous supports, is something which is in 3D.  So you can have physics engine operating in the z-axis also, so that you can see the near-par objects and things like that. And you can have physics-based animations using that. So this is how Famous differentiates itself. Before we get into the features of Famous and before we get into the demos of Famous, I just want to give you a small prologue of how exactly the genesis of Famous happened. And I'll just take a few minutes to basically get you on track on that, and then we will basically have a look at all the demos. So this is a statement which all of us are familiar with. Do not reinvent the wheel, especially when we start a new project, our project managers, our peers, our colleagues always tell us that do not reinvent the wheel. You have got existing libraries, existing modules, existing code, just use it. And that makes sense. It always makes sense to use your existing code rather than rewriting the code and then fixing the bugs and getting into all the complexities, which is really, really good. But what happens is, I mean, for everything, there's a downside, right? So the downside is that whenever you're faced with a new challenge, you always try to avoid reinventing the wheel. So you always try to find, you always try to solve a challenge using existing solutions rather than figuring out a new solution. And this is something to do with our human psychology as well, because we all want to be in our comfort zone, right? So whenever we are faced with a new challenge, rather than getting out of our comfort zones and finding the solution to the challenge, we always try to force an association between that new challenge and some existing challenge, which we have already fixed. And then we try to fix it. The best example of this is this. This was the early days of man-powered flight when the challenge was to fly. Obviously, we couldn't fly. But we knew that the birds can fly, because they have wings. They can just flap the wings and they can just fly. So the early experiments on man-powered flight were something like these. So if you see some of the vintage videos of man- powered flight early attempts in YouTube, you can see some hilarious videos of people trying to build these machines, which will just flap their wings and they would still not fly. And there have been occasions where people have kind of wore these machines on the backpack, and they have kind of jumped from the roof top of the building. God bless them. I don't know what happened to them. There are two definite possibilities.  This is another problem which we always face as developers and programmers, software design patterns. All of us, I'm sure, have a liking for a certain design pattern. I mean, I had a fetish for observer design pattern once upon a time, so much so that I wanted to write all my code using the observer pattern.  And eventually, it became so complex that the observers started observing each other. So it becomes an observatory mess. Until one day, somebody told me that you need to basically separate out the observers using a mediator. And that's when I realized that observer pattern is not the penalty for all the problems in the world. You need to kind of do a mix and match. So this is something which always happens with us. Whenever faced with a new challenge, we always try to solve it with existing solutions. At least it happens with me. I'm not sure how many of you guys would claim to do that. But then it does happen. And something like this is also happening today in the web world. I mean, I would say the web development world. So this is nothing but a small timeline diagram of how the HTML and the CSS standards have evolved from the way back in 1995 to all the way till today. It is HTML5. And as you guys would know, most of you would know that HTML was originally not intended for the kind of applications which we are building these days. HTML was originally a standard only for representing documents which could be shared across the web. We never had Ajax in those days. We never had user interactions, except for that clicking the hypertext so that it goes to the next HTML document. So a lot of things have changed over the last 20 years. And yet, we continue to use HTML because it just serves our purpose. And it does a good job. So this is what I call as an absolute versus a relative problem. I'll just come back to that in a little while. So 20 years back when HTML was initially conceived, the HTML documents used to be like this, where you had individual document sections. So you have section one, then section two. Section two is position relative to section one, and so on and so forth. But the way we build our apps nowadays is like this, a stereotypical web application, which has a header and a footer, sidebar, navbar, whatever you call it. Bootstrap does that, semantic UI does that. I'm sure all of you guys are aware of that. So what's the basic difference between the earlier one and this one? There's a linear flow, which is basically things stacked against each other one after the other, in case of a document structuring. Whereas in case of a web app, what you have is something which is nowhere aligned in one linear pattern. It's basically its own positioning. Every UI element has its own positioning. Now, this is not something which HTML was designed for, but yet we have evolved the standards, especially the CSS standards, to basically take care of all this positioning. So earlier, we had the normal flow of HTML, then we introduced positioning elements, we introduced relative positioning, and then we have also introduced absolute positioning, so that you can actually make the DOM elements appear with respect to the top, left, right, and the bottom of its parent container, non-absolute container. I'm sure all of you guys are aware of that. And further, the standards were again enhanced in CSS2, I think, to include translation, rotation, scaling, skewing. So you can move the things around. You can rotate them in different axes. Even in the Z axis, you can scale them, you can skew them, and all these things. So to build these kind of web applications, the CSS standard has been enhanced over the years, so that you could actually do absolute positioning, and you could do all sorts of transformations and transformations. And pretty much the web browsers have kept pace. They've done a good job. But then there is some problem when it comes to building animations and 3D effects. So as you guys would know, Flash was the de facto market leader in web-based animation until that day in 2010 when Steve Jobs basically gave them a blow. And obviously now Flash is going through the downside. But if you want to try all these things in pure HTML, then your browser goes for a toss. Because your browser is not able to handle the animations and the silky smooth effects the way it works in Flash or the way it works in native apps. It just doesn't do that. So you can build your web apps. And I'm sure there are so many web apps which are there in the market in the app store and in the companies which are releasing it. But then they are just apps. They're not really the apps which can do gaming and which can do those dynamic UI kind of behavior or animations. Because if you try to do that using HTML, then what happens is every time you change the layout or the dimensions or the positioning of your DOMs, your browser has to do something as reflow as this image portrays. So anybody uses Chrome browser and is aware of the Chrome debugger, then you would know what it basically means. It basically means that every time you have an Ajax call and your DOM is getting updated, every time you do a click and your DOM is moving around, your browser has to do some reflow calculation and re-layout the entire DOM, which basically screws up the entire performance of browser. And you have to do reflow, you have to do paint. I mean, there's a whole sequence of rendering which has to happen in the browser. And if you are using relative positioning in your apps, then it's even much more worse. Because if you have a second DOM element which is related to the first DOM element, if the first DOM element is moving, the second one also has to move. The third one also has to move. The fourth one also has to move, so on and so forth. So it has got a spiraling effect. So basically, in such cases, you would see this layout taking more and more time. That's where the web-based applications, especially for building animations and 3D effects, they really, really suck, compared to native apps, compared to Flash. And this is where Famous comes into picture. So the founders of Famous, the guys who created the library, they realized it. They also realized one more thing that web app is eventually going to be the future. Because obviously, it makes more logical sense to build the app once, rather than building an iOS version, and then the Android version, and then the web version. And so many companies have already chucked their HTML5 apps. Like, Facebook is already having a separate team for iOS, separate team for Android, and I don't think they have any HTML5-based app. Because the HTML5 apps are really, really lousy. When it comes to animations and 3D effects, and all these silky smooth animation effects. There's one more problem with the current trend in web application development, which is around declarative approach to coding. Now, why is it bad? I mean, this is my own viewpoints, so I might be wrong. And I guess some of you guys might disagree with me. See, the whole point is, when you want to build animations and when you want to build UI interfaces, which are like fluid and which are supporting 3D, then you cannot rely really on HTML and CSS as a whole. Because HTML and CSS only allows you to declare the structure, and then the browser has to figure out how it has to be done. Whereas, if you follow an imperative model, then you exactly tell the machine how to do something. So how to lay out the elements, how to animate them, how to translate them, how to rotate them. And then you exactly tell the browser how it is to be done, rather than just defining the structure in HTML and then letting the browser figure out how to do it. So just to give you a small example, if you say background color is equal to blue, that blue could mean different shades of blue in different browsers, different machines. Whereas, if you specify the exact hex code of the blue or that color, then the browser will exactly know which shade to render. But then there are so many shades which are possible. There are millions of color shades. You cannot declare names for all those shades. You can only have red, blue, green, and few of the shades. So this is a declarative way of coding. Whereas, if you can specify the exact shade using the code, then that is the imperative way of coding. For me, declarative coding is not really intuitive because of one small reason. I remember 15 years back when I was learning Visual C++, Visual Basic, and Java, Swing, and AWT applications. These were desktop-based GUI applications. We never used HTML over there. We never used CSS. But we still did a good job. How did we do it? Because in those GUI libraries, there was something called the layout manager. If anybody is programmed in Java, then you would know. So what does a layout manager do?  So basically, you have several kinds of layout managers. And layout manager, it keeps a track of the viewport. It keeps a track of the height and the width of the screen. And it also has a default pattern as to whether it has to be head or footer layout, or a grid layout, or a columnar layout, or a row-based layout. And based on these inputs, the layout manager would run its own internal algorithm to place the elements in the screen. You never needed HTML and CSS for that. And to be able to place those elements in the screen, you need to run that algorithm. And the algorithm needs to run in the code. HTML cannot run your algorithms. HTML can only declare your structure. So is CSS. So if you really want to build those super silky smooth animations, 3D effects, then you cannot really rely on HTML. You have to use an imperative technique, which is, in case of web, it is obviously the JavaScript. And that's where the famous guys, they really realize that they need an abstraction between the developer and the browser so that they can define an API which can handle all this for the app, for the developer, without letting them recklessly play around with the DOM or screwing up the reflowers and all these things. So what famous offers you is a JavaScript-based UI library, which offers you an abstraction to create the UIs. So when I say creating the UI, it includes everything.  But then for style changes, it really relies on CSS. But in terms of any layout change, it does it on its own. And for doing that, famous relies on the matrix 3D parameter of CSS. Now this is something which is GPU accelerated. So you get that speed and that performance which you typically come to expect from an animation. And it also uses RAF, Request Animation Frame. Request Animation Frame is a low-level browser API which allows you to have a fine-grained control over the frame by frame animation. So all these interfaces are directly available to the developer, but then developer can screw it up because you can use relative positioning to screw up the layout and things like that. Famous basically abstracts away all these things for the developer. And to get around that problem of expensive reflows and sluggish animations, Famous has a strategy that it will use a flat DOM structure. So if you're building an app using Famous, you cannot write your own HTML. Famous will handle it for you. And Famous will ensure that it has a flat DOM structure so that whenever you're moving things around, there is no relative dependency between the other DOM so that the browser has to do subsequent reflows and recalculations, which will eventually slow down the animation performance. And that's exactly why they claim that they can achieve 60 frames per second using this approach. Finally, Famous also adopts something called the scene graph design pattern. Any one of you is a game programmer. You would know that. You have a scene graph which represents the entire application and then the scene graph is consisting of various nodes. So there is a top-level root node which basically encompasses the entire application. And then based on your layout, let's say in this case, you have a header and a footer and some content. So these can be represented as the child node of the actual app node. And the individual items in the content can be represented as the children of the content node. This is how you build your entire scene graph and then you can manipulate each node either directly or you can manipulate a group of nodes using their data. And each of these nodes, you can say these are basically DOMs. You can then style them. You can add content. You can add text, image, whatever you want. You can add WebGL also. And all this is done programmatically using the API. You never write HTML code if you're building an app using Famous. So if you're building an app using Famous, your HTML is limited to only you just have the body tag and you just add the customary JS files. And that's it. You should not touch beyond this. So how does Famous do that? Let me show you one small demo, which I call it as a Famous Magic Cube. And this will give you some idea as to what exactly. Let me first make it full screen. Usually, I am always under the influence of Murphy's law. It never works for me. So what you see is a, actually it's a cube. So when I start rotating it, you'll actually get to see it. Not sure about the rendering in the projector. You can see some much edges. But I hope you get the idea. So this is basically a cube, which is built using Famous. Now, a cube has six sides, and all these six sides are nothing but individual DOM elements. The DOMs have been arranged in such a way using the rotation and the positioning parameters so that they represent each side of a cube. And since it's a DOM, you can actually add anything in the DOM. So I can, let's say, add a text and an image. So it'll just stay there. It'll also animate along with everything else. Since it's a DOM again, and since we are in HTML5, we can also embed multimedia, right? We can embed video and media tags. So we can actually embed video, and it just works. I can also add some SVG, because SVG is also a DOM. Let me add some SVG. What you see is a SVG-animated origami bird. Now, all these are DOM, so you can actually add any kind of content, which you typically add in any HTML page. So you can also add your widgets and your grid structures, which you typically use in a bootstrap or a semantic UI. So I can also add some grid and widgets over there so that it also gets positioned in that side of the square, and you can actually animate that. So I've already covered four sides. I'm left with how many sides? Two sides. So the back side of this cube is not really visible, because the way I'm kind of rotating it, it's not really visible. But I have this bottom red side, which is still empty. Let me see what we have over here. This is WebGL. So this is called as mixed mode of famous, where within the same coordinate space, you're defining DOM, and you're also defining WebGL elements. So I have got these two WebGL. This is a 3D circle, and this prism kind of a thing, which is called as ISO software on something like that. I'm not very sure about that. So it's stuck inside this cube. And as I'm rotating the cube, the WebGL elements are also getting rotated. So what I essentially have is a top level node in the scene graph, which has got six sides representing the six faces of the cube. And it also has two additional nodes representing these two WebGL elements, and they are positioned in such a way that they are inside the cube. And then I'm applying a rotation x and the y level y coordinate rotation to the top level node so that all the child nodes, which includes the six sides of the cube, and the two WebGL nodes, they are getting rotated along with the parent node. Kind of looks a bit awful to keep the box open, so I'll just close it. So this is what famous achieves for us. And all this is done using pure HTML5. There's no flash, no third party plugins, no other kind of libraries. It's only purely HTML5 and JavaScript using the famous framework, famous platform, I should say. So now, what can we do with it? That has been the question which has been kind of hovering in my mind for the past few months. So we know we can build web applications, people have been building animations, people have been building ads, people have been building some infographics as well. But I mean, most of these applications have been built just to showcase the functionality of famous. But what can we do using famous in terms of building some practical applications for the web and for the future? So that is something which has been kind of, kind of, I've been on an exploratory path on that. And as a result, there are a couple of applications which I believe could be of relevance, just because famous allows us to build these kind of UIs. And also because the web is going to get increasingly relevant in our lives in the near future and in the years to come. So I'm going to give you a demo of some three applications. One is a fluid UI for web applications. And this is something which is a trend which is catching up these days. So on one hand, you have got a plethora of applications which are built using the standard, the stereotypical web app model, which is like the header and the footer and the nav bar and the side bar and all these kind of contents. But there has been a trend recently towards building fluid UI. So fluid UI is basically something like, it's absolutely fluid. All the contents, all the widgets and the panels are at the disposal of the user. User can decide how to kind of stack them around. It's something like your desktop Windows desktop or your Mac desktop, the way you can drag and drop the icons around. And then I'm going to show you some other demos also and we'll come back to that in a little while. First have a look at the fluid UI application, which is something very similar to the way a desktop UI works. So it basically doesn't follow any order. There's no order like headers and the footers and the bars. It's like it has its own order which can be kind of changed by the user based on his own preferences. You can just drag and drop things around. And for building such applications, famous is really, really cool because you obviously cannot build them using HTML and CSS. You can style them, you can add the internal content of those UI using HTML and CSS, but you just can't build them alone in HTML and CSS. So what we have is a famous post-it app. All of you have used post-its, right? Those yellow kind of scribbling post-it, write something and you just stick it around. And you keep sticking to many of them, and it becomes a bit kind of messy or whatever, basically sticks on the surface. So why not build a digital post-it app, you know, which you can have it on your, maybe on your desktop or on your mobile or even on a big screen. And you can write your own post-its or you can have it as a team collaboration app, which people can use in your company. And then you can collaborate together. So this is like a basic post-it app and you can add your post-its. It will rearrange itself. You can let me add a few things. I can actually drag them around and reposition them as per the way I want. I can probably, again, reset them and I can even delete them. And I can probably keep adding more of them. Now, this is kind of a fluid UI application which we are getting into. You could actually extend this to build sharing applications for sharing photos and media. You can have a scribbling and things like that. Now, this is entirely built using Famous. Now, what you see over here, I will give you the code so you can have a look at the code. Those of you who are kind of edging to kind of see the code. What we have built over here is the entire framework is nothing but a set of a few prefabs, like the way you have prefabricated units when you're constructing a building. So each of the top panel and this base panel and all these individual post-it panels are nothing but a set of prefabs, including the menu. And these prefabs are represented by the famous UI library. That's how you create it. And then you can add your translations. You can do rotations. You can actually do resizing. And you can do all that stuff. And you can drag and drop and you can do all that stuff. So except, so only the HTML and the CSS part which we have in this application is for styling these post-it elements. So the background color, these box shadows, these are typical CSS styling elements. Except for that, the entire prefabs of the entire application is built using Famous, using JavaScript. So you write that bare bones HTML.  You just lay them around. So this is the trend which we are getting used to increasingly because more and more people are looking at building such kind of user interfaces which are fluid in nature. You don't really have a static kind of a layout anymore. And once you're done with all of that, you can probably just close the application. Now this is one thing which Famous is really, really good at. Building fluid UI interfaces. Now there are a couple of other things which we can do using Famous and that's going to be the next demo for me. Which is, I call it as a system visualization. I'm not really sure whether I should call it a system but we will probably have a look. Probably I can get some feedback from you guys as well. All of us are aware of visualizations. Data visualization, D3JS, so many libraries are there and the world is going paranoid about data because we have big data and so much of data to kind of fathom and analyze and do modeling and stuff. But I want to look at visualization with a different perspective. And the basis of my perspective is this. So this is, I don't know whether it's going or air bus but this is some aircraft manufacturing facility. And assuming you are the plant manager or the supervisor who's supervising this entire assembly of this aircraft then you could be probably standing at the deck or some balcony at the upper deck of the plant and you can get a bird's eye view of the entire assembly being done and you can actually see it. Obviously it's a very, very complex process. So a bird's eye view will only give you the macro picture but as you know, an aircraft is a pretty complex system which is consisting of so many sub-assemblies and sub-modules and things like that. So if you really want to go and check out the individual assemblies and how they are doing then you would probably go to the shop floor. So basically you could get a bird's eye view or you could get a detailed drill down view if you go down to the actual assembly line and have a look at it. Now this is for the plant manager or the supervisor who's supervising this manufacturing plant and who's supervising the construction of this aircraft assembly line. What about the project manager in a software company who is supervising software construction or software development? How does it do that? How many of you are project managers over here? So I have been a project manager when I ask my guys, is it done? They will say yes. They might say no as well but then I have no way to know whether they are done or not. That's why we have these test-driven development and agile-based processes which have been incorporated so that we can quickly get the drop out and then we can actually see whether it's really working and whether it's working as per the use case or as per the requirements. So when it comes to software or when it comes to process visualization, only God knows. So typically what we do as project managers, we only capture the data. So we typically have a block diagram. So this is a typical waterfall model of software development. I'm sure all of you guys are aware. Requirement capture, design, coding, testing, release. And at every phase you have got some metrics. How many requirements are there? How many design documents have been approved or not? How many bugs are there? Whether it's unit tested or not? Whether it is integration tested or not? Whether it's released or not? How many bugs post release and all that stuff? So typically we never get an overall picture of the entire system or the entire process. We only capture the data at each point of the system and then we basically make reports and then we gather or we derive information out of it. And this typically happens for any kind of organizational workflow. What I am giving you the example is only a software development process because I'm sure all of you guys are aware of it. But every organization has workflows, internal workflows or even external workflows for acquiring customers, sales workflow, customer support and so on and so forth. And you have internal processes which you would want to track and every process can be represented in a block diagram, something like this. This is the block diagram of a e-commerce website for the checkout process of the customer. All of you would have made purchases on Flipkart or any other website. So once you are done with your browsing, once you've added a few stuff in your cart, you check out, which takes you to a checkout screen. Basically it takes you to a review screen where you review your items. Then you go to the next screen which is the shipping where you choose your shipping options.  And finally, I mean the completion, basically it's not a step but it's just a customary state to mark the completion of the order. So this is like a flow which a typical e-commerce website would follow. Obviously you don't have that luxury of the plant manager of that aircraft assembly line. You would still have this block diagram but then you would gather the data individually at each step and you would try to infer from it whether your site is working fine or not, whether your revenues are coming or not. You would never get a complete picture. So that's where I call it as a system visualization rather than looking merely at the data point at each step of your system, you basically get a bird's eye view of the entire system. And you can actually do it by spicing up the block diagram. We all of us know the block diagrams, all of us draw them, all of us kind of discuss it in team meetings but then we can actually do something more with that. And we can do that using famous. So let me show you a very, very crude. I hope the colors are good enough to be visible backside. You guys are able to see that. So this is the same workflow process of the e-commerce website which I just showed you. Check out, review, shipping, payment and this other guy is actually gone. Probably that's because of the layout. It's not really so responsive, so you can actually see that over here. It's actually in the 3D, so you can see that. So what do we have is a 3D reincarnation of the entire workflow diagram done using famous and individual steps are represented by individual blocks and I can actually move them around using 3D. So now what can we do with it? First of all, obviously we have data points at every stage of a workflow. So let me add some data. I'm ignoring the complete process for now because it's not visible, you just ignore it. It's kind of a pseudo real-time data. You can see the map updating. It kind of gives you a feel that it's getting updated in real-time but it's all simulated. So what you get is a real-time update or so-called real-time update of the main essential parameter at each point of your, at each stage of your workflow. So you can see how many checkouts are happening per hour which will give you a clear indication of how many people are buying stuff from your website. You can get a status of how many reviews are happening, how many people are doing the shipping request and this is the most important how much money you're getting. That is the most important metric for you. You would also probably get an update on how many people are kind of entering into the checkout process. So basically you can segment your data in such a way that you can get a data segmentation of the different kinds of parameters which you'd want to track in a checkout process. For example, different geographical locations from which geographies people are checking out more or which product categories people are checking out more. It's a typical data segmentation problem. You could also get some key statistics of the data which will show you how many people are passing through the checkout process, how many people are stopping over there and how many times you are having a failure which could mean a system failure or the portal failure. So you could have a key stat parameter being tracked for each and every stage of your process. Further, you could also display some alternate flows because what happens is in all our work flows, all our organization work flows, you always have alternate flows. For example, let's say I want to ship but I want to pay when I receive my items. It's something like cash on delivery. So rather than going from shipping to the payment part, you would go to the, you'll go and alternate flow which is basically the offline payment board and then you go to the completion part. You could have your own alternate flows defined. And further, you could just like the way the plan manager in that manufacturing plan could drill down to the exact assembly of the aircraft, you could probably do the same kind of drill down over here by going inside a workflow and checking out what's exactly happening. So in this case, you have the payment workflow being tracked, the payment stage of the workflow being tracked, but then payment can be constituted of multiple sub-work flows. So in this case, it could be how many people are paying for the credit cards, how many people are paying through cash, and you can actually display that matrix over here. This is what I call as system visualization. And this is something which you can do using famous pretty easily if you know the API obviously. And I believe famous is an ideal application for this kind of applications. You can't build it with HTML, you can't build it with CSS. You can't get this perspective with HTML and CSS alone. Now, this is also a kind of a fluid UI. I mean, you can actually build it in such a way that you can do drag and drop and a lot of things like that. I don't have, it's a very crude visualization which happened. But it is also another example of fluid UI as I showed you earlier, the posted app. The third and the last demo which I'm gonna show you today is, and this is something which is really, really exciting for me. So there's a story behind this. So what happened is a few months back, I got a customer who asked me to build a data dashboard on the web. And I said, what kind of data do you want to portray? Is it like a data visualization? He said, no, no, no, no, no. It's something like the data dashboard which you see in the airports. I mean, there I will time the departure time. It's a typical information display in the airports. He wanted to do it for some of his customers. And I said, this is not a data dashboard. It's basically information dashboard. It's something like a digital signage. And then I realized that you have these digital signages which are traditionally built using different technologies. And there is an increasing shift of building these kind of applications using the web. So you have digital signage. You have internet-enabled kiosks. You go to a movie theater or your ticket collection kiosk. ATM machines, right? And you have billboards, information display boards like in the case of airports and train stations. Now, traditionally they have been built using analog technologies and whatever the technologies be it. But nowadays there has been a shift that these devices are increasingly being driven by embedded devices which have full-fledged OS like Ubuntu or some version of Linux, some flavor of Linux. And then on top of that you have a web browser and these devices are anyway connected on the net, on the internet. So what you get is an IoT device through which you can stream data, you can control the devices, you can show the data. So it looks like this customer of mine he wanted a digital signage to be built using the web browser. And I told him famous is the best solution for this. He didn't give me the work but then I decided to build it myself. So I have got a hypothetical company for this application which is called as Job River. So let's say I'm the CEO of Job River and I run a recruitment consulting firm where a lot of people come to my office every day seeking jobs. So rather than these people coming into my reception area and crowding and asking for information inquiry, I can put up a digital signage outside my office and I can display all the current jobs and the openings in my company so that people can just have a look at that. So if you want to build something like that, you would build something like this. Again, this is like a fluid UI. All the prefabs are done using famous. The slow, the slow scrolling which you are seeing that's also done using famous. And this is running in full screen mode. So if you put it in a digital signage installation, you wouldn't even know that it's running. And then you can obviously make it interactive. I mean, it could be only an information display panel or it could be an interactive panel also. So you could have an HID device and you could have a category selection. I can go to the manufacturing category. I can see what all the jobs are available in the manufacturing category. I can actually go to the actual job and see the details and I can come back to the main screen which is the main scrolling screen. So this is where I believe famous is really going to excel because these are typically the traditional media applications which have a UI, which have interactions and which are typically built using non-web tools. But since web is going to be more and more prevalent in all lives, in all the applications that we do, and then coupled with such awesome libraries like famous which we have, we can build these UIs which could chart our way for the future of the web. And it's the same thing. All the prefabs for this UI are built using famous except for the styling and this shadow effects and the colors and the gradients. These things are done using CSS individually for the elements. But all the elements, they're positioning, they're sizing, their transitions are done using the famous APIs. But this is what I really believe in this code by Allen K. Best way to create the future is to invent it and that's what I kind of try to do. And so my hope is that famous will eventually come to the fore. Famous is also part of the JQuery Foundation for your information if those of you who do not know. So my hope is that famous will eventually come to the fore and we will be having these kind of new use cases and web applications built using famous. And I also hope that I can elicit some interest in a few of you guys so that you can probably go ahead and build some applications around famous. Whatever I've showed you is just the tip of the iceberg. I've not shown you a physics engine. I've not shown you several cool things which famous can do. The reason for that is they have recently released their mixed mode library around two months back and they're still going through a lot of churn. And they are currently, I think, in version six or version seven. So it will take them another few months to reach to version one when they will become stable. And then I'm also expecting some documentation updates so that we can start building apps using that. And if any one of you is paranoid about UI, you can start exploring famous and you will obviously know what it can do and how it is different and how it is better than the other UI libraries out there. Especially when it comes to animations and 3D effects. So that's it guys. Thank you very much. I hope you had an informative session. And I wish you all the best and I wish you a good time in the rest of the conference. If you have any questions, we can ask me. Yup, please. Exactly. That is more of an integration issue. You would have to create some kind of data collection applications which can interface with your enterprise specific those workflows, collect the data either in real time or with some lag and then you can visualize it. That's really a back end problem to solve. But that can be solved as long as the enterprise is willing to, I mean, if it's an open standard, you can do that. If it's a closed standard, then you need to work with those guys. Usually you always have, so nowadays everybody exposes the rest API. So you can just get the rest API, you can get the data, you can store it in your own data store or you can directly display it. Typically that's the way it is done.  So that is actually a bit problematic because customers don't really allow that. So if they allow a rest API access, secured access, then it is good. Otherwise you'll have to kind of rebuild your way out and convince them. But it can be done. What is it? Can you just say it again? Mule soft. Is it an open standard? So as I said, it's an imperative approach. So you only define the layouts. So you only figure out how to calculate based on the screen width, how to display the stuff. So yes, you will have to test it because you have to write the code. And so native applications have different native APIs, right? You have iOS and you have Android has different APIs. Over here, you're only using JavaScript. If you're building a web app and you test it on, let's say, a certain screen size, then it'll work everywhere as long as the browser support is unified. And it supports this rendering, PD rendering. But if you're comparing web app and native app, then that comparison is not really, I'm right. Right, right. Correct, correct. So as a developer, you will have to obviously, you will have to obviously code it in such a way that you can have a max and a min limit of the screen sizes. And you'll have to test it out. And as long as you have the same browser and the same rendering, it should work. It will work. Yeah, the Post-it app which I showed, right? Yeah, so the signboard is actually, it is fixed. But in a Post-it app, what you can do is if I, let's say, reduce the screen size, something like this. And if I do the Post-it app again, then it will show you only like this. Because earlier it was showing the third column, right? So this layout calculation is something which you as a programmer have to do in famous. It's not like your CSS media queries where you just mention max width and the min device width and it does it. Because CSS always does it based on its own calculation of the layout. Whereas famous is allowing you to do your own calculation. So you have to handle it on your own. So it's, there's nothing declarative about it. Which might seem to be a bit of a cumbersome thing for many of the web developers. But that's exactly the point. If you're building such high-fidelity UI applications where you want a pixel-level control of your UI elements, you have to take things in your control. You cannot leave it to the HTML and CSS. That's the whole point. Yeah, please. Right, right, right. Actually, if I were a famous platform engineer, I would have actually given you an absolutely clear response. But I'm more of a user of famous, so I'm not a developer. So what I understand is that famous has a renderable, something called as renderables, which they also kind of optimize based on the browser support for web workers, right? So that takes care of your parallelism. So you have a renderable for the WebGL and a renderable for the DOM working in tandem in parallel so that when the entire thing is rotated, both are getting rotated together. And obviously, in case of a single-threaded environment, if your browser does not support web workers, then you have to pay the penalty for the performance. As far as GPU acceleration is concerned, so all these CSS 3D transforms, especially the matrix 3D, is by default GPU acceleration. So they have just taken that into account and they are using that. It is not backward compatible. It is not backward compatible. It will not work. Don't ask me how to make it work in IE6 or stuff like that. It is not. In fact, I haven't even tested it in IE. I'm scared to do that. I'm testing only on Chrome. Yeah, easy. It can be used for? Yeah, signage. OK, yeah. Yes, yes, it does that. It does that. What I showed you is only with clicks. It can do it. So it has a gesture handler, famous as an eventing system, which also has a gesture handler, which you can listen to your swipes and taps and you can do that, apart from your clicks and scroll and the mouse. It's not backward compatible. The learning curve is a little bit tedious, because as I said, most web developers are used to writing HTML, right? When you start building a web app, you start writing your HTML. And especially if you're using, let's say, Angular, then you'll start creating your templates. But over here, you don't use any of that. In fact, you don't use MVC in famous. They have actually released a new framework, which they call it as best, DEST, behavior, event, state, and free. So it is a framework which is comparable with MVC. And if you write your code using the best pattern, along with the platform, you can build the same kind of complex app which you can build using Angular, but with additional 3D and animation performance. So yeah, I mean, primarily, two things I can tell you. It is not backward compatible, and the learning curve is slightly steeper, especially for a web developer who only does coding in HTML, which is not a programming line. No, but their tool chain uses Node.js to go to the website and go to the starting famous thing. It recommends Node.js, but actually you can use it for development testing. They usually use it. Yes, right, right, right. So obviously, I mean, if you are trying to apply a rotation, then how much angle of the rotation has to be that has to be calculated by the developer. You're stopping the rotation, again, moving it, resuming it. Those things, you have to calculate it. And famous internally uses RAF, request animation frame. And request animation frame, those of you who have programmed using this request animation frame would know that it is a frame by frame it progresses. So famous internally fire set tick, which goes and booms the request animation frame. So in certain applications where you need a continuous rotation, like the magic cube, you would need those kind of calculations. But otherwise, for these kind of applications, you just need a layout calculation and the main thing to do. So it depends on the complexity. But then the API is pretty easy. It is a bit bad, difficult to grasp initially. But then in my experience, once you spend some time, you can actually work with it. I mean, it's pretty logical and pretty simple. Any other questions? Right, did you see that? OK, I'll show you. Yeah, that's a good thing, actually. Let me connect. What is the password? jq. It's only 15 or 2015. So this was one of the initial demos which the famous guys had created. And this is how they got some money and they got some funding to develop this frame further. Now this is not using the famous library which is available today. And this is not even using mixed mode. This was something which they had created two years back just to showcase what we could do with native HTML file without using Flash or third party plugins and tools. So if you see over here, each of these elements are doms. Let me just select one of the doms. Yeah, you can see this. So all these animations are hard coded. This is not even using physics engine because this is an old famous application which was built around two years back. And if you can see in this case, they are actually manipulating Matrix 3D.  So that's how they are able to do all the calculations for transformations, rotations, queues, and scaling in the Matrix 3D matrix itself. And this Matrix 3D is web standard. It's not controlled by any. It's not a proprietary thing. All browsers support that. If you go by that, then it should work in all the browsers which support 3D. So this was one of the original demos which they had shown. And based on that, I think they got some 20 million funding they got. And based on that, they have actually developed this to the current state. And it is entirely MIT licensed. It's free. You can go to github.com slash famous slash engine. Or you can go to famous.org. And you can actually get a feel of it. This is a basic animation of the famous logo. And to give you an example of, so this is like a 3D based animation, which is happening in all the 3X, Y, and the Z direction. And all the nodes are being rotated together, just like the way I showed you the cube. And this one is an example of physics engine. So wherever I move my mouse, it creates that gravitational repulsion. And because of the gravitational repulsion, all the nodes basically move. So this is something which is really, really awesome. Because you can give those real life feel to your animations if you can use the 3D physics engine.  The smaller ball comes and hits the big ball. It doesn't move because it has got more weight and more inertia. Whereas whether the big ball comes and hits the smaller ball, it basically moves away. So you can create those kind of effects using famous. You can define mass, velocity, momentum, inertia to all the dorm elements. And then based on the physical laws of physics, they will just move and they will just behave exactly the same way. Any other questions? OK, we are way beyond the stipulated time. So thank you very much, guys, for joining in. And all the best.


tired of the everyday grind, ever dream of a life of romantic adventure, want to get away from it all, we offer you escape. Escape. Designed to free you from the four walls of today for a half hour of high adventure. Sparklet. Permit me to refuse the money. Permit me to return to the matter of the Yankee merchandise.  You are the men who have a catch and have saved the Caribbean from me and me. Yes sir, we're the men who have a catch and have failed. That's who we are, poet, and you? So it is a simple matter then. Since you are these men, it is a simple matter. We will make arrangements for the removal of the merchandise. Now look, Mr. Renee, my name, permit me, that is my name. Thanks. It's this way Renee, my understanding of things poetic is a little shaky these days. Mine too. Yes too. Are you trying to be clever? Or perhaps it pleases you to tweak my patience. The merchandise. Permit me, but the merchandise. When shall we remove it from your boat? Mr. Renee, I simply have got to explain something to you. It's evident that you're a mistake. We are not mistaken. You have been much a nice... We would be if Renee had fun farewell, Josh. He needs to keep his head covered for the taking of time. But this is a matter of...no, you cannot! The merchandise! You cannot refuse about the merchandise! You cannot refuse! When I walked down, I looked over my shoulder and saw Renee's face become suddenly gray, suddenly old, and then a blur fading into the crowd that swarmed the narrow streets. Episodes of the dream trip. Cockfight followed by native poet making Calypso on a type of merchandise that didn't exist. Poet. Also dealer in intangible souvenir to be stored away. Anecdote to regale the young ladies of New Kensington, Pennsylvania in our return. When the dream money ran out from the place to come back to was New Kensington, CA. But now unguided tour of Port-au-Prince and a side street you never believed you'd walk. I like what we're doing. I like where we are. Me too. Yes, sir, me too. It's all around here. It's wonderful. It's a no-regret. Ah, Josh, you mean we gave up a nice-going habit-assery business and took off? That's what I mean. I talked you into it. No regrets, sir. What do you mean you talked me into it? This idea, this dream, if you will. I will, I will. I remember this very minute, the night it germinated in my brain. We were sitting in the dorm of the good old University of Pittsburgh stripped of the waste. It being a hot night prior to graduation and a bottle of beer in the hand. And you said, Haiti, someday let's buy a boat, you said. See? You can see it was my idea. Sure, sure it was, Josh. Then you said, Haiti. And I said, Haiti. Why? The Citadel. What about it? Just I got to see it, that's all. The Citadel of Henri Christophe. Ever since I was a kid, I've been reading about it, and one will see it. Where? That's something I got to explain to your kid. A couple of fellas like us, they hid a new country after an ocean voyage. You know they need time to condition themselves, become acclimated, mingle with the group, you know, meet some of... Am I reading on the subject of young women of Haiti? Yeah. I have read that the young women of Haiti are sheltered in circumspect, and a formal introduction arranged by a mutual friend or acquaintance is the etiquette to be followed when a visiting gentleman has the wish on me where it says. Right, I was... I just want to make sure you and me... Yeah. Visiting gentlemen, that's what. Le Café de Pavillon de Toulon. I don't change the subject, right? What? Le Café de Pavillon de Toulon. Translation, Café de Pavillon de Toulon de Toulon. Oh, my, oh, my. Oh, you feel okay? The heat, the excitement of the new... Let's dine over the café there. Come on, George, let's go get Moon's drug. I want to. I'm glad I said what I said. I'm graduating from the University of Pittsburgh. After me, kid. Bartender! Who plays the years, Miss Scherf? The pleasure presents no problem, Bartender. First, we want rum. Who are we, Miss Scherf? Right. Hush, kid. Let there be hush. Leave the bottle, Bartender. We made it, kid. We made the dream a toast, huh? Sure, Hater. I love you. The death of Lean, Toussaint, and the jeweled Bay of Garnay, and to the jungle mysteries and the delights of them, and to the jungle mysteries and the delight. Hey, you turn a phrase, Miss Scherf. Then may I propose to another term. Be our guest. To the young lady who sits there, where, at the tavern in shadow, and before they've carried sunshine across her cheek. There, you see? I see. Oh, my, oh, my. Where? Where? I don't see her. Where are I? Show me, too. You could look upon her with near, man. I could. I'm just a chap who could. Come then. She has whispered it to me. Bring them to me. Bring the voyagers to me what I whispered. Why, where? Lady whispered, Josh. That's a call I've been waiting for. Why? Bring the bottle, Josh. Oh, now I see her. Oh, I'll bring the bottle. After you, Miss Scherf. Pepe. After you, Pepe. The voyagers for whom you have whispered. No, Miss Scherf. Speak yourself with bb, Miss Scherf, before they near me. Oh, thank you very much. Yeah. I'm Josh Ford from New Kensington, PA, and this is my buddy, Ryan Dixon. He's from New Kensington, too. At present, sir, we're a retired habit, actually. I am bb, and I've longed for the time of our meeting. Pepe. Are we? You did a splendid job of greeting us. And you no longer have a need for me. And we no longer have a need for you. Then I shall make my small departure. No hard feelings, Pepe. It's just a fact. Till another fee. Yeah, yeah. Till then. You were lonesome for us, bb, for both of us. The moon was full and it grew slender. For the passage of this time, I've longed for you. You don't even know us, bb. We live thousands of miles apart in different worlds. How could you? Josh, you ever been in New Kensington, bb? University of Pittsburgh? Josh, what the man's else said? Went for your boat. And the things of your boat, for these two, I have longed for. You talk in puzzles, miss, bb. I don't. The merchandise of your boat. Bb, a poet of your country said merchandise to us.  You have sold it into the other. We haven't sold a thing. We gave him a dollar. And I don't mind telling you, the budget we've got worked out for this trip is. Then it is a matter of more money. Could be. More money for what, bb? A glass. Bargainers. We're not haggling, lady. All we got on our boat is a few supplies. Some canned fruit juices and cans of dried beef. You want some? When I don't have more money for the merchandise of your boat, my amy, we will pay it. And there will be no delay. Bb, we started out real good together. And suddenly, uh, Josh, how do you tell a beautiful girl she's lousy and everything? Well, the room at the end of the passageway is there. It is where I shall be, with the more money. In ten minutes, be there, at last. She moved away from us, and she moved like some uncalling phrase of primitive melody. It took her maybe a half minute to cross the floor and vanish behind a glass bead curtain that made small songs as she moved through it. That left maybe nine and a half minutes to toast the many things above, bb, that were worth drinking to. And then all that was left was to find out what it was all about. Room at the end of the passageway upstairs, she said. You know what I think? No, I don't. I think she's got her confused with somebody else. Couple of entirely different fellows. I said I heard you. It's funny you got her missed. Funny. First, a native poet, a big song of ants about some merchandise we haven't got. And there's a bb. What merchandise we're supposed to have, right? Cry. Yeah. Had noise. It's already happened to us once today. But now it's inside. Hey, I came from down there. That's where she went. In lines of blood crisscross bb's face and throat like some abstract design and horror. The new twist on death in the afternoon, young lady, beautiful young lady, slashed to death by the spurs of a game cock. The bird jumped to the window, still encroached to death once more. Pretty pink and blue sign, smiled, welcome to Haiti. There's a New Kensington, Pennsylvania, that you've got the world ahead of you. Keep in mind that anything is possible when you finally get to Haiti and come across a beautiful woman slashed to death by a fighting bird bred to kill, except it's men run. Like Josh and I did three blocks until a sign said, hotel of seven sisters, fans in every room. We paid for one night in advance. The sign wasn't kidding, there was a fan. This one you grasped in the hand waved back and forth under the chin, creating refreshment and letting the sound of the island drift in through the open window. We're strangers in a strange country, baby. Who knows what we're supposed to do? Anybody who dies is a concern of... I'll get it. Look who, the poet. Come in, come in. How'd you find us? I inquired of two Americans running in the noon date. Why are you looking for us? An explanation of the events of the Cafe de Pavillon de Telluna. The killing of the girl, Bibi, was a mistake. She, her permit me, what is the hour? Almost 2.30. A good, good, an excellent time. For a punctual competitor of mine, we'll arrive in a moment and the deal will be consummated. You're throwing it again, Renae, you're talking red light. Oh, forgive me, like so. The merchandise you have brought, those of us across the water there, the small way across the water, we wait for the guns, so guns, they find the way to purchase human dignity. Born, huh? Get the picture? This guy's a revolutionary.  You think we've got guns for a revolution or something? You know what I'm gonna say in New Kensington? They're gonna... Josh, Renae, what about the girl? Why did that beautiful girl have to die like that? Ah, Bibi, unfortunate. Like so. She won't give it because, oh, permit me, the competitor to whom we are expecting. Well, tell them it's like so. Somebody's got our boat mixed up with somebody else's, huh? Renae. My intention, quickly, quickly now, come. Now, listen here. Or you will lie down beside this man, also dead, quickly. Where are we going? Quickly, quickly. I asked you. Pistol barrels, lacerate, so now, quickly. The front side of his gun had cut my cheek, and there was nothing to do but put my hand to it. He prodded us outside. The men in goatee, US Army surplus, and German Luger into a waiting cab. Unhappy driver looked at my cheek, and then at the upholstery, and then shrugged about the whole thing. He'd better take us somewhere, or he can get his cheek attended to. He said, my friend, Josh. Sure. Sure, sure, sure. It was the stir my friend, Josh, created. In a while, the bleeding stopped. We got out in the park, where it was no longer Port-au-Prince, where it became the apron of jungle around the city. A mansion of columns and glazed brick and flamingos looking coy behind royal palms. A butler in knee breeches told us we were late, that everybody was in the auditorium. A private theater, gentlemen, that you may watch if you wish. I'll tell Etienne you're here. Etienne? Well, who's he? You try to make a break from here. You'll be shot down before... What part of a name is that? Etienne. In there. In there. In there. Boudot. Native dance Haitian style. Thank you, gentlemen. Who wouldn't be that impressed? As you appear to be, I mean. They're all of them professional dancers. Twenty dollars each for the performance. So are you. You're close. Etienne? Yes. This way, please. And you're the man who can tell us... About the BB. About Rene. You... It's about guns. It's all on the state. I know, I know. Somebody got our boat mixed up with... I know, I know. In here. What's the matter? Why are you looking so unhappy about it? How to tell you what I must. It'd be crazy if we tried to run, wouldn't we? Oh, yes. You'd be shot down like the poet was. With no sadness.  Rene was not an enemy. As also was the girl. They have their cars. We have ours. And both of you after the gun. We have them. They came on another boat. Not to you. What am I supposed to say? Use them in good health?  Well, we don't know what... You don't realize what's happening to you, now do you? A little bit. The sliced cheek I have. Yes, yes, that's an indication. The reason, of course, I haven't offered you a physician or even iodine should be coming up talent now. Correct me. Josh and I know there's a thing about guns. About a revolution coming up close by. Also about two mothers. And you can't let us go. I don't mind telling you. I am a patriot. Murder is necessary. It seems it goes with the word. We will have to take you far away. And you must be lost forever. Please try to understand. Said with grave concern. And the door opened, some men walked in. And would pick us up at the hotel and two others. Also looking grave. Also looking concerned. Tight fitting dark suit. So tight you could almost tell the caliber of guns the bulge has made. We went then on a boat ride. A boat called Bumba. Look, look there. The Citadel. Floating on a sea of tropic moon. The Citadel of Henri Christophe. Ever since I was a kid, Ryan. Ever since you were a kid. You admire our citadel? Listen again. Of course. The Citadel is practically all we came to see in Haiti. We're getting a fine view now. Really, all of it we want. So why don't you say the word to turn this boat around? Yeah, it is saying the dead outside. Now look, yours will be privileged.  Human dignity. The poet used the same word. On opposite sides in both of you using the same slogan. Regretful. Regretful. Regretful. The both of you now onto the ground. And this is where... Quickly, quickly. Move quickly. And if you didn't have that gun, I have it. Straight ahead. One thing I'd want before this is over. Two or three, the Citadel. Yeah. Josh. Uh-huh.  You think we ought to make a break for it? I would say so. Listen, just before we hit that clearing up ahead. You there. You too. If you are discussing running away, you will be shot like pigs. Right. I still think we ought to try. Uh-huh. Like now? Right. Josh! A man who stood ankles deep in the sticky waters was the man we had seen before, Petley. A man in a bar called the Pavilion of the Small Moon. A man who had taken us to beating. You too recognize me, I can't say. A bandolier of bullets over his shoulder the snout of his submachine gun sniffing a circle at our belt buckle. A chin the others who had brought us here face-deep in the mud. A brown marsh water washing their blood away slow. Very slow. Eventually I knew they had to come here where the guns are cached. See, those cases. The guns, the cause of everything. Boy, are we glad to see you. Truly? I like the way you said that. What do you have in mind? These. These are my slaves.  Correct?  You were nice to them? Well, sure. My artistry was kindest for you both for they were my friends. I asked you something. What do you have in mind? Surely you know.  Words must not leak out of what happened here. These are the guns. These are the killings. Right? Yeah. Listen, you. What? A favor. Huh? All you have to do is take a look at the Citadel. Hey, mate, there it is. Look. My friend here, he wants to take a look up close. This was his dream trip, the Citadel of Henri Christophe, his dream place. I see. No, he... A gene monument built by a crazy king. You see all those cannons pushed through those embrasures? That's the set. You see all those cannons? What about them? Not one ever fired. You know what else? What else, Josh? This was built on an exact line with a great pyramid of Egypt and a great pyramid built by the mayors of Central America. That way. Enough. Look down. Christophe used to force his slaves to jump from this park. He enjoyed their screams. Will you scream? I don't think so. Good. Please do not believe I am vile, messieurs.  Neither side can afford your staying alive. Bitter. Some pity. Alive. Oh, dead from a bullet. Junk. Now, hold it a second. One more word with my friend. Josh. What do you want? All of it. Your fault. Mine? Leaving the business. The boat. Haiti, all of it. How can you talk like that? In a citadel. What is it? Brick and moss. Hope you get a nice view of the East Wing on the way down. You know what you are? A child. A birdbrain of a child. You're not going to talk to me like that. Oh, are you miserable? You got it so better than that.  I'm okay. You? Okay. What about him? Time up. Leave him. I don't know something. All right. What? You see that over there? What over there? That slag. What about it? That family Christmas tomb. He was buried there. Look what he was killed. Right over there. Something, isn't it? Really something. Boy. Escape has brought you Night of the Guns, a story written and directed by David Friedkin and Morton Fine. Featured in the cast were Herb Ellis, Byron Kane, Jack Prussian, and Jay Novello. Also heard were Lillian Bayef, Chep Mankin, John Dana, and Paula Pascal. You're an author, George Walsh. The special music for Escape is composed and conducted by Leith Stevens. Next week. We're adrift in a native canoe somewhere up the Solomon Islands. Ahead of you by the unknown terrors of native savagery. And closing in on you is a white man whose gunboat will smash you to the bottom of the sea. So listen next week when Escape brings you John Russell's story, The Price of the Head.


I'm Eileen Paolo-Crisco, guest host filling in for a great friend and dynamic community leader, Wendy Lo. Taking Your Health Back is aired live at 2 p.m. every other Tuesday. Joining me on the show today is Anthony Crisco, founding member of the Fashion Research Society, inventor of the fashion nation method of self-myofascial release, co-author of the best-selling book, pain-free every day, and a passionate wellness educator and coach, who not only island hops to teach and inspire, but he even travels globally to share his knowledge. Anthony, it's great to have you here today. Today we're going to discuss long-term self-care that you can incorporate today. Well, thanks for having me on the show, as always, and let's get started. Okay. Let's talk about self-care very quickly. It should be a no-brainer, right? Yeah, it should be. However, what do we end up noticing? There's always something that comes up that keeps us from getting to the point where we can take care of ourselves, whether it's the kids, the groceries, the refrigerator breaks, I got the car breaking down, I got PTA, I got sports. It's always something. And the trick is, how do we incorporate things today to ensure our long-term success in the future? And that's what we're going to talk about. Right. We want to take care, most of us want to take care of others, but really we, I, you are the most important person in your life so that you can do things that make you feel good. Take care of others, right? Absolutely. Right? If you're doing everything for everybody, but at the end of the day, you feel like a wreck. What's the point in that? Right. Okay. Now, feeling like a wreck, how do you, first of all, how do you not feel like a wreck? What is the first thing that you would suggest? Well, the first thing I would suggest is use a fascinator roller or any type of massage, movement, yoga, anything on a regular basis that's going to get you to get out of your shell and start focusing on self-care for yourself. And I've never heard anyone ever say, boy, I sure have regret going out into the ocean and getting some fresh air. No one's ever said that. They always go, wow, I can't believe I live on this island. We never get out. I'm so glad I did. I mean, I know that's happened in our world. Right. So you're talking about massage, and we know we've seen your classes all around the island, and you've also taught at autoimmune conferences, especially last month all around the island. Yeah. The islands. Self-care has a lot to do with knowing yourself, and I really believe that massaging, self-massaging, you really get to know yourself. That's right. Well, if we can look at slide one, I'll give an example of one of the best techniques that you could do for yourself. In this image, I'm rolling my side of my neck. However, it's more than just the side of the neck. What you have in this area is a muscle that goes from the front of your chest and wraps all the way around to behind your ear, and it's the muscle that turns your head left to right.   It's under here as well. It's known as the wanderer. It goes to all of your organs, and this can help with respiration. This can help with your heart rate. This can help with your digestion. This helps with what we call all of the autonomic processes in your body, meaning it can help stimulate the things that you cannot control. If you have a methodology to de-stress yourself and allow all your natural functions to occur at a higher rate and a more natural state instead of always in this fight or flight, guess what? You're going to live longer, sleep better, be more happy. Everything around you is just going to get better. Why?  Yeah, that really makes sense. You talked about the vagus nerve, and now it stimulates the parasympathetic system, which we know is a system to rest and digest. Kind of brings things down a level. I know a lot of people that run around in a frenzy, and you can see this very shallow breathing, and I'm thinking, that's got a skyrocket, those cortisol levels, right? Well, if you think about cortisol, it's the stress hormone. And think about it like this. If you're always going and you don't have a chance to restore and rest, it's like having one foot on the gas and one foot on the brake. Is your car going to last very long running it to the ground like that every day? Well, what's more important? Your vehicle or your body? I would say my body. OK. And I would say my breathing just, some people say it's overrated. Just breathe, take deep breaths. But we know that breathing is healing, right? And if you want to learn more about this whole method, we have our book being published. It's coming out soon. It's been a long process, but it's called Pain-Free Every Day. And within the book, it talks about this fascination method of self-mile-fast release, of self-care. It talks about all the other way you can learn to balance your body in terms of breathing, meditation, social engagements, et cetera. Right. So you talked about meditation. Another great way to really just keep your breathing in check, right? Yeah. Meditation. Now, I don't meditate as often as I should, but I do make sure it takes some time out of every day.  I breathe deeply. I feel. I wait until I can hear my heart beating inside my ear, and I exhale slowly, and I let my belly rise, and I let it sink. And trust me, after a few of these solid, intentional, deep breaths and solid exhalation of all the old air, I feel great. I'm feeling like, wow, it just felt like I had a 20-minute nap, but I did it. Right. Yeah. Yeah, it is really good. I probably should meditate more myself. But when I do, I really feel like I've spent that time with myself to collect my thoughts, but just not keeping track of this frenzy of thoughts that go by. But just one thought at a time, and it's really refreshing. It's great to have that time to be still, or even just to be one with maybe your creator. It's interesting you mentioned that frenzy of thoughts, right? What are those frenzy of thoughts?  Where's my son? Oh, I've got to get gas. Oh, I've got to fix the truck. Oh, the dog. We need dog food. It's nonstop, and it will run your life if you don't get a hold of it. So part of this meditation is also, instead of complaining all the time about, oh, I got to do all these things, maybe you should stop and look around and appreciate what you have. Because there's a lot more people in more dire situations than a lot of people. I know that all they do is grumble, grumble, grumble. And I'm like, if you stop and smell the flowers like my father used to teach me, guess what? You realize, I'm a pretty lucky guy. Every morning I wake up, and I go, hey, I'm still alive. I'm still here. I have another chance to make an impact on someone. That's how I do it. Yep, that's great. So meditation sounds like it will help reset your mindset. Just says this self-massage process that you were talking about helps reset your tension in your body, maybe your posture. Right. We have to reset the physical. That's the self-massage part. We have to reset the mental. That's the purging of all of the rat race thoughts.  Because if you don't pay attention, you might miss it. Right. You might miss the good stuff in all the time you're complaining. Right. Sometimes I feel like when I'm at the beach, I'm meditating. Absolutely. I swim regularly. And I've noticed as I began to swim longer and longer and longer, it's almost like I'm going to fall asleep in my sleep while I'm swimming. Why? Because I'm so relaxed. I'm so happy. I'm in the perfect place at that moment for me. Right. Well, let's hope you don't get too relaxed and fall asleep swimming. That sounds a little dangerous. Now that we're on the topic of swimming and water, let's talk about hydration. Ah, wonderful. Well, let's talk about hydration. Yeah, this fascia that we talk about, this connective tissue that binds to all of your other structures in your body, it actually holds four gallons of water. Four gallons. How many ounces is four gallons of water? I don't know, but it's a lot. I'm imagining it all dumped out on the floor. That's a lot of water. And if you ask anyone around Honolulu or anywhere around the rest of the United States, ask them, how much water do you drink? And usually, the typical answer is not enough. I drink Coca-Cola, I drink coffee, I drink beer, I drink soda. Well, all of those things are just sapping your nutrients, causing you to dry up and get all sticky, causing your cells to have a hard time functioning. So with hydration, you want to cure 50% of your problem. Drink the water in the amounts that you should. And that amount is at minimum half your body weight in ounces. So I'm about 170. I actually drink about 128 ounces a day. Well, I'm not 256 pounds, but I'm active. So I'm drinking the amount of water I need to supplant the cellular activity that I'm causing my body to have. Does that make sense? That does make sense. A lot of people don't want to drink water simply because they don't want to go have to find a bathroom or they don't want to have to stop doing what they're doing. Usually, it's work or something like that to take care of themselves. It's funny because drinking and going to the bathroom is really an important aspect of self-care that you don't even think is self-care. Well, I'll give you a perfect example. If you have a dog or a cat, would you not give your dog water because you don't want to take them out to go to the bathroom? Would you do that to your dog? No, that is a good point. So why do people do that to themselves? Can anyone answer this? Why do people do this to themselves? Yeah. I think a lot of people think that they're not in a constant state of dehydration, and they don't think that that constant state of dehydration or the level of dehydration that they're at, which they don't believe they're even dehydrated, really affects their health. Well, they want to know why they don't think they're dehydrated. The reason people don't think they're dehydrated is your body has a feedback loop where when you don't drink water, it causes you to be less thirsty. And when you do drink water, you have to drink more water because your body says, oh, I like that. Do more of that. But when you're starving your body of water, your body starts to go into this conservation mode. Therefore, it says, well, we don't know when we're going to get water again, so don't utilize water in my organs.  Sjogren syndrome. And that's where they have dry eyes and also dry mouth.  Imagine. And it could have been prevented if you drank some water. Yeah. We need water for running around, even if we're not running around, just functioning every day. I always have to remind myself that water is a catalyst for chemical reactions. So these mechanisms of our body aren't happening if we just don't have enough water. And isn't our body just one giant vessel of trillions of chemical reactions happening every second?  You did breast cancer research. If your cells didn't have water, what's wrong with it wouldn't function, right? Yeah, just complete imbalance. Complete imbalance. And oftentimes, you don't see the result of the imbalance until months later, even a year later. We could even call it catastrophic chaos. And you're doing it to your cells. Right. Yes. So if you're watching out there right now, drink some water while we're doing this show, please, I beseech you. And make sure they're not diuretics, or even maybe eating fruit. Fruit has a lot of water content, right? I love fruit. Fruit has tons of water, and fiber, and vitamin C, especially all the citrus. And it's the vitamin C is, I would say, get on a limb here and say it's the antioxidant of antioxidants. True or false? That is true. Do you want to expand on antioxidant? I mean, a lot of people, if you throw that word around, antioxidant, antioxidant, we know that has something to do with stuff that we buy off the shelf, right? Supplementations and vitamins. What exactly is happening when you do take an antioxidant? OK, well, before we talk about antioxidants, we have to talk about what oxidation in our body and what that means. Basically, your cells produce waste products. Those waste products can become toxic in your body.  Yes? Yes, that is true. We're going to hold that thought on free radicals. That's kind of another big word like antioxidant. We're going to take a one-minute break. We'll hear a little of some words from our sponsors, and we'll be right back with Anthony Crisco on Taking Your Health Back. Thanks to our think-tech underwriters and grand tourists, the Atherton Family Foundation, Carol Mun Lee and the Friends of ThinkTech, the Center for Microbial Oceanography Research and Education, Collateral Analytics, The Cook Foundation, Dwayne Kurisu, The Hawaii Community Foundation, the Hawaii Council of Associations of Abarbon Owners, Hawaii Energy, the Hawaii Energy Policy Forum, Hawaiian Electric Company, Integrated Security Technologies, Gailin Ho of BAE Systems, Kamehameha Schools, MW Group, the Shidler Family Foundation, the Sydney Stern Memorial Trust, VOLO Foundation, Yuriko J. Sugimura. Thanks so much to you all. Hello, Hawaii. We're back on ThinkTech Hawaii with Anthony Crisco. I'm guest host Eileen Paulo Crisco. And we're back to talk about healthy ways, healthy tips that you can incorporate every day to live a healthy life. And you can start today. Anthony, so we were talking about antioxidants and nutrition. Let's continue that. OK, so we talked about antioxidant. We talked about how sales produced waste products that like to fester in your body.  You don't belong here causing damage in this body. Let's go. And the bottom line, if you have more water and more vitamin C and you're getting some sun and you're moving, getting some activity and you're having social interactions and you're laughing, your body produces chemicals that help decrease the amount of cortisol, the amount of stress, the amount of oxidation that can happen in your tissues. And with that, when you take care of the body by moving and by giving your body the proper nutrients and the proper hydration and the proper interactions, then guess what? All the stress that you carry starts to decrease. And the outlook on things actually improves. So all those elements that you quickly listed, those are actually things that give you more energy, right? Right, well, think about it. Have you ever been like, I'm working. I'm working. I'm working with the kids. I've got to cook and clean. And you hit your bed and you pass out. That's probably most of us. If you're a working parent with children, that's probably you too.  And say, I don't want to talk to anybody. I know how it goes. I've been there too. Yeah, yes, I know. Social interaction is kind of a tough one for me. I'm kind of an introvert. So there are days where I think, oh, there's this event I want to go to. And then maybe about an hour before the event, I'm thinking, oh, I'm a little too tired to face all these people. But anyway, social connections super important in staying healthy, right? That's right. And not only just the social connection, it doesn't have to be with humans. It can be with animals too. They even have a horse therapy where did you know when you get close to these therapeutic horses and you put your chest against their body that their heart rate matches your heart rate because they are literally connecting with your body, with your system, with your autonomic process. They are connecting with you as a whole other being. And they use that for troops who have ADHD and other trauma. And they use it for kids who have a rough upbringing. But again, social interaction, whether it's your friends, your dog, your bird, your cat, that's quality time. Again, have you ever seen your dog sitting in the corner because you're too busy to acknowledge him? Think about how that poor dog must feel. My owner's right there, but they don't even see me. Yes. And when I see my dog, I make sure I put things down or I get down there and I play with him. And he's happy. You can see it. There's my guy Bruce right there. As a matter of fact, what I'm doing, you see I'm holding this little roller. I'm using the roller to roll my dog's fascia too, which is a perfect segue into, we just got approved to do our first fashionator for K9 event at the Elite Animal Hospital. It's a brand new hospital right off of Ward Avenue. But if you have a dog and you want to learn how to pet with purpose, meaning find where those lymph nodes are. We're going to find where those stiff muscles, where the muscles that get so tight typically give the dog's arthritic hips and arthritic shoulders and elbows. You might think of your dog's front arms as legs, but their arms, biceps, triceps, forearm, flexors, extensors, help prevent arthritis in your dogs with purpose. At the same time, you're getting your quota of social interaction. It's a win-win situation, guys. Yeah, that's great. I really see our little dog, Bruce, as our family therapist.  It's definitely our family therapist. He's the one in our house who listens and no one else wants to hear you. That's true. It is so great to have a comfort dog. That's right. Absolutely right. All right.  That's right. And help them move better. I remember I used to have a dog that was on Remedill, which is an arthritis medication. And I think one of the reasons why this dog was on Remedill was because I worked many hours, 12 hours a day, and that was a time where he wasn't moving. So his dogs have to move. We also have to move. And I know that there are so many movement programs out there, which ones are good? You know what, when it comes to movement programs, the bottom line is do something that fits your levels of ability, meaning if I have not worked out in 20 years, I'm not going to go out and try a high-intensity program that's going to end up ruining my joints and causing inflammation in all my other areas. You have to start slow, whether it's Tai Chi or yoga or Pilates. Pilates, as I say, is one of the best ones you could start with, because it goes at your level. And then save the other things for later when you know you're fit enough to tackle these physical challenges, because I work with a ton of people where they're like, oh, I'm doing this class five days a week.  Oh, it's because you're doing the same thing five days a week. And you're not giving yourself any time to recover and restore and replenish your body's ability to stay mobile and free. That's what's really going on. So which program? Well, I would say start with the fashionator program, a self-mile fashion release program. That's the first thing, because you cannot get stronger if your joints are tight and locked and stressed out. You have to purge, restore, reprogram.  Right, that makes sense. And that kind of movement, that repetitive, whether you're running in the same plane or lifting weights in the same plane, that actually can become repetitive stress. So rather than relieving stress, that type of exercise is actually causing more strain or injury, basically.  Wrong answer. Weakness is your body telling me, stop hurting me. That's not right for me right now.  I gotta push, push, push. It's good if your body can handle it. But you shouldn't be punishing yourself if you already are having a life full of stress, not giving to yourself, not appreciating where you are, and just absorbing all the hits from everyone in your circle. Be selfish, be first, put yourself first and take care of you. Right, yeah, you said a key phrase is not ready for you right now. Right, you gave all these tips and you don't wanna just go full speed ahead and try to incorporate it all at once. If your body can't take it, I know some people that try to drink a gallon of water every day just from drinking one pint to one gallon. You know, that scared them away, right? That's right, that's right. Baby steps, right? Baby steps to get there and you have to understand, your body will adjust over time. Remember, if you suffer chronic pain, if you had chronic pain for 20 years and did it happen overnight or did you have these things that you kind of subtly ignored and then it got a little worse and it went from your shoulder to your elbow to your wrist.  Listen to your body, give it the opportunity to change slowly and you'll see. I've had students in my class, five, six years, the same students and you know what, I love it. They started when they're 81, now they're 87, 88, 89 years old. Wow. And they're not in a wheelchair, they're not using canes. They said, oh, I'm going on vacation. I'll see you in two weeks. And you know, the best thing is I get these pictures of my seniors. They're at the great pyramids in Egypt. Guess what, they're holding over their head. They're a fashionator traveler that they brought with them so they can walk while they're on vacation. Yeah, a self massage tool. A self massage tool. And if you don't have a fashionator, you know, use your own hands, you know. That's right. Use whatever, a hydro flask, you know, maybe not as safe, but you know, just try to get that self massage in, right? It's this mechanical movement you're doing yourself. We've had students who, they forgot their fashionator and they went on a cruise and they said, oh, you know what I used? I used the empty wine bottle and it got rid of the sciatica. So yeah, it doesn't matter what implement you use. Well, it kind of matters. But what matters is, do you know what to do with your body right now for long term result? Right. Now that's a great story about your 80 year old client. I'm sure you've got plenty and plenty of stories about, you know, how somebody came to you and really just needed to revamp their self care program so that they could add years to their life or just improve their quality of life. What is your favorite story? Ooh, my favorite story, that's a tough one. But I would have to say, my favorite story is a woman we started training when she was 81 years old. Her name is Amy Fu. She had severe scoliosis. I mean, so much, it was so bad.  She couldn't walk sideways. She couldn't walk backwards. She couldn't put her hands over her head. And by the time I was done with her, now granted, this was a three year process.  She was sprinting from a kitchen to close the door in her room because she didn't want me to see her messy room. And I'm like, Amy, did you just run past me like that? She was so embarrassed. Oh, I did, I didn't want you to see my dirty room. I said, well, think about that. When we started, you couldn't even walk sideways or backwards. And now you're embarrassed at your room. So you're closing the door really fast. That's my favorite story. And the best part was when she said, Anthony, I have to talk to you. I don't think I need you anymore because I'm pain free. And I rose my hands in triumph. And I said, yes, that's what I was waiting for because you now have taken all the things I've taught you and used the tools through your abilities and you don't have the problem and you don't need me. And that's the past the whole point. You need you, you don't need me. Right. So you're saying that her posture was really bad. How much water was she drinking when you first met her?  Okay, half your body weight announces. Right, right. Okay, so yeah, she started out like a wilted plant or something. Well, thank you so much for your tips, you know?  That's right. You can really empower yourself to be in the driver's seat of your own health. Yeah. But first you have to what? Realize who comes first? That's right. You come first. You come first. And I want you to look into me or ask yourself, who's gonna take care of you? Who's gonna take care of you? And yes, I like to point. You should take care of you because you know what I do every morning? I look in the mirror and I go like this. You're number one.  Yes, nourish your body with water, great food. Well, Anthony, thank you so much. I thank you for joining us here and audience. I thank you for joining Anthony and me on Think Tech Hawaii. Big Mahalo to our sponsors and founder of Think Tech, Dave Fidel. Come back and learn more healthy discussions with Wendy Lowe on Taking Your Health Back every other Tuesday at 2 p.m. Aloha.