Hi, I am Aditya and I'm talking on Amplify your stack. So how many of you here are front-end developers? You understand when you say you are a development stack, right? You have a editor, you have a browser, you have a build system, you have a test system. Generally, a set of tools that help you be more productive. That's what you call a stack. I would say J2E is a stack or LAMP is a stack. Your front-end developer then Chrome itself is a full stack in itself. My name is not Paid, he's missing. He loves setups, so do I. I'm sure all of you do. All of you, I'm sure, when you get a fresh machine, you set up everything that you need. Browser, a test tool, plugins, like Firebar, Chrome, etc. The best possible things that you even need, that's the first thing you get. All have setups and you all love them. You can't live without them. So you're talking about setups today and how to make them more effective. But before we start that, we'll get into our foundation as web developers. When we started, I am sure this is like 95% of us. When we started as web developers, first things, or at least JavaScript developers, the first thing you wrote was onclick equal to this dot color equal to red. How many of you did that? And style equal to font fade bold. You did that, right? Everything was in line. One file, everything was there. And cool. Back in college, man, look at my page. It has red, blue fonts. It is beautiful. But two days later, you want to change the font color. And you can't find the thing. Where is it? Because you didn't use the word red. You used some x color and you can't find it. So you said, okay, I should probably move on into an external CSS file. Use some CSS rule. I should move into an external JS file. Write some functions. Probably organize code a little better. So you created main.css and main.js. How many of you created main.css or main.js or index.js? We all did. And then included the script tag and then there was a library dependency because we started working on jQuery. So there were two script tags. And then somebody told backbone is really awesome, man. So it was underscore. So four script tags. Somebody said, why don't you use some web fonts? So there was a typekit script tag and it went on and on. You have like 20 script tags on a single page. And it's getting out of hand. That's level two. But level two is not over yet. We are still struggling with our own code. Main.js. We modified it, but we're not using any version control. So the new file is called main.3.js. How about that? Somebody said, now the application needs to integrate the social media. There has to be a social integration. So there was a sci file.js. Then somebody said, you know what? There should be a fourth version. So there was a b4.js. And we got copied everything from HTML5 wallet. There was a widget.js. And it's all there. We have no glues on what these files do. Just keep including, keep bloating our pages.  Until two months later, we have to fix it. And we can't figure out how to fix anything anymore. Because it's too haphazard. It's just chaotic. And we need to find a structure to how we deal with things. Essentially, if you're doing front-end stuff, we all need to find a way. It's not just a way that you appreciate. It has to be a way that everybody appreciates in common. So that if anybody picks up your code two days later, he's not cursing at you. That's pretty common. I'm sure everybody, every one of you, when you pick up someone's code, front-end code, you start with this way of work. So let's move on. Find peace for ourselves and everybody else. All our brothers and sisters own the browser. The browser doesn't own you. You do stuff and the browsers comply to it. It doesn't matter. So this is Sunil Pai's structure. I don't accept it completely. I don't expect you to accept it completely. But what he says in general is, you should have a very good folder structure. You should care about how many JavaScripts will end up with or how many CSS cells you'll end up with. Just have a very, very verbose structure that anybody can understand. There's a template folder which contains all the templates that you're going to use. It could be jade, it could be moustache, it could be anything like that. You can also have pictures that I'll talk about later. You have, let's say, tests, which also I'm going to talk about later. There are utilities that you need to do. You can have a folder called shims where you'll probably add your S-5 shims, things that are not available in the browser, but you would like them to be available. Organize your code. Don't worry about how many files these result in, because you won't be serving these files. As you saw earlier, we had 20 files. We're serving all of them. Let's not do that anymore. We have 100 files. We have a build system that can concatenate, compress, optimize our code, and we just serve that. Let's just focus on coding. Keep serving part to the deployment part. Two different things. Fixes. Fixes are awesome. They really are. Any Java developers around? Any .NET developers around?  So you are dealt with marking and all, right? You have a service. You don't actually want to hit the network. You mock the service somehow. You say, listen, we'll get this output, right? That same thing is true if you want to develop other browsers also. How many of you work in a team where there are separate back-end guys and separate front-end guys, and you are the front-end guy? And you had some data that you needed from the back-end guy and every once in a while say, damn, your APS broke in again.  I can't develop anymore. I'm going for a P. That's how it always ends up with, right? Fixes. A way in which you take a spec data. You say, I'm always going to get a data like this. You save that file, maybe in JSON format or XML format. If you're back in 98, XML is good. Otherwise, take JSON, store it, load it in the page and when you're developing don't hit the network. Use this data to develop. If you're building a Twitter client, take a dump of Twitter feed in JSON, store it, load it in the browser and make your client work completely with it. No network requests. You don't have to depend on third-party APIs. You don't have to depend on the back-end developers. You don't have to depend on Internet. And it saves a lot of time. I used to work in an ad platform team in Yahoo. We had this very well distinction between front-end and back-end. We didn't have something like this. Every time I changed anything in the back-end code and the compilation took about 15 minutes and the deployment took about half an hour. 45 minutes and it was changing. And of course, then we introduced this and the productivity is short. The productivity is just short insanely. It makes sense. I'm a front-end developer. I don't care about the back-end evolving. I don't care about RO or I don't care about NodeJF.  As long as I spec out for this input, this should be the output. I'm cool with it. That's where fixtures come in place. So fixtures is actually one of the words for it. You can call it mox, call it. There are a lot of terms for it. So there is a brilliant MVC framework called JavaScript MVC. And they were the ones who introduced a JcoD plugin called dollar guard fixtures. Don't go into this code. I'll show it on the code after this. So this essentially says when you hit this UR, when you get a request for this UR, just use it. I have defined a fixture called magic. Just use that. Please don't hit that. How many people use jQuery? Use dollar dot Ajax? Had internet problems and got pissed? Because they're laughing at? The dollar didn't work? How many? Go and make such a request and wait for it to actually load. Everybody has to pay. At least some of you have to pay this, right? Can you read the code? Okay. So it says dollar dot fixture, method or root regex and function. What it says is whenever I do somewhere after this dollar dot Ajax or dollar dot get 2 to slash 1, 2, 3 or anything like that just don't hit the network. Just call this function. When you call this function, you can just return some data. You don't have to hit the network. This will take everything. Magic. Isn't it? You can do post, you can delete, you can do whatever you want. What do you? And there's another beautiful method in the fixed flag in client make.  So you can do get to fetch information. You can do post it. You can do delete on it. You can do put all that stuff. So if you say dollar dot Ajax, you are the snap messages and you can pass data, this offset sort by this, limit so many and you can do all that crud operations on a data source in the browser. You're not hitting the server. So if you're, let's say building an application which has to show some hundred updates, email client which shows emails. Why hit the server? Why not just completely scoop? You don't even need information from the backing guy. You don't even need a dump. Just create a random thing. Just say random something, create random strings. Just fill it with random stuff. Isn't it brilliant? Most importantly, besides being brilliant, highly efficient. Do we need to remove that picture while we release the product? No. So it kind of depends on I think there is a global variable which explains if we end production or not. So you don't have to remove it. If you are on work, don't take the picture. No, if you are on a development mode it will always take from that. You can kind of what you can do is before you include the plugin you can do dollar dot Ajax as you can pull it out into another method called dollar dot old Ajax and then if you include the script tag, you can write a method that functions which I showed earlier. In this method you can say if this thing is undefined then do an actual Ajax request fetch the information. You can do a synchronous Ajax. You shouldn't but you can just give an example. You can actually fetch the information for the first time and cache it. That's also a possibility. So it's great for if you are using any of the LBC framework. Backbone, spine, knockout, angular the list is endless. There are so many LBC frameworks out there. Why? Because essentially all the LBC frameworks one of the first criteria is you write an entire app in the browser and you just interact with someone JSON format or some format. Why not just save the format, cache it and just develop completely of things. So it's really great if you are developing an application with any of these frameworks. So these pictures also work great as reference points on what should be the output for certain input. So you can write your unit tests on top of these things. I mean understand. When you are writing unit tests you need some kind of references for certain input what should be the output. You can use this as a spec to communicate between the front end and the back end team or the third party that's providing you the idea. Speaking of which how many of you actually write unit tests? How many of you write unit tests in Java script? Please do. Please do. Very important. If you are writing it's very different from writing for Java or Python and all because those things at least compile and I mean in the compilation world things break in compilation. You fix anything here and you introduce new bar there is no compilation happening and you might be screwing up a lot of things. So you won't make sure that your code is not getting screwed by someone else write unit tests. If somebody writes something new which screws with your unit tests you can blame them. So you can just say it's his fault. Not me. So this was something that one of Sunil's colleague used to say. Pictures plus unit tests is like Photoshop. Any of you ever converted a PSD to HTML or JPEG or PNG to HTML? Frequently, right?  There's a batch of color is wrong click it again. It's a good reference point, isn't it? When you're building something it's a brilliant reference point. That's the visual part of it. When you're building an application there's a functional part of it. This is a functional Photoshop. It's a functional PSD. When you write pictures plus unit tests you ensure that anybody who's writing anything new has to comply to that design. Anyone who's breaking that can be easily caught. Anybody who's breaking that there's a build script that will say this guy committed something and it broke. Please go hit him. Please carry your baseball bag. Talks about how to write this so this thing this talk is probably going to finish really early so let's be more interactive if you have questions. Please ask. Write new bugs. Write new tests for every bug feature issue that you get. You add a new button that shows up up write a damn test make sure that it runs across all the browsers. You don't want your CEO calling you up free in the morning saying that I'm in this presentation in California and doesn't even work on i10 doesn't even work on i10 because you didn't test it. You have a Linux or a Mac box and you don't care about testing on i10 which is fine as long as it works on i10. So there are many options available. Q-Unit is used by JQA. Any other language other than Java the amount of time spent on test cases is very less compared to the amount of test programs we write for test cases in Java space, different browsers one thing is that, the second thing is if you are using some mvc or mvr libraries like DriveCon and how do you test the UI you are doing something. So when you are talking about JS testing there are two aspects of it one is the typical functional testing which is same as how you would do in Java Python anything else which is there's a pure functional expect certain output on certain input which I'm sure has to know how to do it but you don't know how to do the interaction test So what you do is there are multiple ways of doing that also there are certain frameworks that let you simulate clicks so what you can do is I will just give an example you add a button that shows a popup what you do is you write a test that simulates a click, loads the entire page simulates a click and then sees if the display property of that particular block or not is visible or not that's just it's not a good way but that's one of the ways of doing it then there is Selenium you can use Selenium to automate all your interactions so you interact with the UI in certain way Selenium will record it and can replay it across browsers to make sure that it works across everywhere just the same so interaction tests have different set of frameworks all together but as you said takes time that's only because the learning curve is different it's not the same there are async tests that you will have to deal with even if you are spoofing it via pictures there will be a callback so the test has to be async itself so there is a learning curve involved it's not the same thing as doing it in Python or Java but once you have learned those things it's pretty easy I was talking about QUnit jQuery uses QUnit entire jQuery all the methods tested in jQuery I think they have 99% coverage which is brilliant for anyone 99% coverage means if you change anything and it's screwed up it will break and from somewhere ponies will come and beat you up then Mopah and Expresso which is both on server side and client side but they are more from functional testing side they are not on interaction test really great if you are writing Node.js code JS test driver it's not JS test driver it's a project by Google it's not a testing framework it's a testing infrastructure where you write tests in some other framework and it will run all these tests across all the browsers so let's actually do all the testing for you when you write tests you just test it on one browser and this will take care of the rest it works with Selenium also why I test similar to Mopah, QUnit and all it does functional testing little bit of interaction testing and you get apps created by Yahoo for just like JS driver you write your test and then you deploy it on multiple machines so Yeti is this really crazy setup where they have a few dozen mobile phones a few dozen tablets all possible operating system with all possible browsers someone just goes and clicks and says this test run it all damn browsers available Goal deploys to each one of them all of them test and give the reply back saying done so if it's broken on any device you get a report but you don't have to write all the devices you just have to write one test as how it shouldn't when you write a unit test you're saying this is how my code should work that's what you say so you write your code as how it should work and this will tell you it's not working that way in any browser and then you go ahead and look at the code next so if you're using any of these you're making your code bullet proof there's nobody in the world the worst possible programmers who can come and screw your code the moment they screw anything you can cast them in a moment okay and Jasmine one of the best test frameworks available out there there's many more there's a complete paradigm of programming out there called TDD where you write tests first and then as I said it's like Photoshop you design everything and then based on that you write your code so you write tests everything will fail because your code doesn't work the way it should but then you give all your code to make sure that it complies with the tests as you said it takes time I assure you it will take time one to maybe learn after a while it will take almost time with anything any other unit test but after you've written the unit test it will save you a lot of time lot of you probably spend a lot of time writing or rewriting your code do you know this what is this this is a rage comics character so I'm sure some of you know rage comics do you know who is the moderator of rage comics John Rezegh the guy who wrote jQuery he can write jQuery and he has time to do all this because he writes tests and if anybody messes with his code he knows whom to blame he doesn't have to go running and fixing things he will be amazed how more productive he can get and how more time he can waste on procrastination once you write tests you don't have to keep revisiting your code rewriting your code all the time ok next step move to templating stop doing that abc plus xyz plus 123 stop doing that it's really annoying write templates write templates that can be reused across server and the client write templates that can upload processing from your server to your browser and write templates so that you don't piss off yet another person for plus plus plus plus plus I saw a person like some 8000 9000 of one javascript file it's a maintenance help somebody forgets one code somewhere and the entire file is screwed entire javascript is invalid don't do that please please don't do that it's really irritating what you do is you pick up any templating engine in jave the moustache, the ajs I like ajs because it works on the browser and the server quite well for me but there are easily 50 solutions available right now or maybe more and you as a developer should decide to yourself what you are looking for if you are looking for only server side templating stick to server side if you are looking for both probably moustache and ajs if you are looking for only client side ajs is good underscore templates are good you can use underscore templates you can use jquery templates if you are using jquery if you are writing web apps jquery template has been abandoned by Microsoft jquery template is now external it's not in the code so how are you going to continue by the code developers of jquery templates it's not in the code anymore it's just like how they are abandoning i6 support and remove it to external plugin it will still be maintained but it doesn't go in the minimal file size they want to reduce the file size how does this templating work both in server as well as in client so essentially when you say templating you have these placeholders let's say tolerabraces and you can put name or double tolerabraces and put name arrow with person pages and name inside it what it does is you write a engine that parses this page finds these placeholders looks up somewhere and it places the values into you so this thing can be done also on the server side and client side so let's say gmail there is a new email this email can be represented as markup or can be represented as json markup let's say there is a json record, some json object which represent the email you have a template that renders how it should be either you could render it using the rendering engine in the server and send the html and the browser will just say dot and html equal to whatever or you can just send the json and the client can do it for you so you are offloading the rendering to the client so when you do this you are ensuring that if you are serving to something like opram mobile you can just simply serve html from the server but if you are serving to something like chrome it can render this for you just let it render for you the question I am trying to understand is about the data structure for example I use dream path jst very often which works on json data structure but on the server side you will be using a completely different technology who is sending that json let's say I have a j2e server you have a server that does it for you so instead of sending it you can put a check which says if certain browsers which are incapable of doing it don't send json use this templating engine which will not be the same implementation there will be a templating engine for j2e there will be a templating engine for ror so you mean to say you convert the beam data structure into a json exactly you are probably using a struct plugin to do it you do it manually next thing which not exactly is my point my main point is which is the history okay I am sorry all of you saw the json website right didn't anything notice when you click on any of the links the URL changes but the page doesn't change and the URLs are still compatible the search engines can still crowd them if you look at github same thing Gmail also if you refresh the page you still come back to the same email kind of the URL kind of bookmarks where you are so you are not breaking the well when initial Ajax era started people would change the content but the URLs stayed the same and if you refreshed everything was gone so there are two things maintaining a bookmarking another is I think the last part of the I will talk about Backbone.router is a brilliant brilliant module in Backbone which wraps over its shape if available if not available it uses hash change so instead of saying my URL slash abc it will be my URL hash hash exclamation abc so it still works and atleast IA but still works on IA and pretty much all on the browser you said you are using bookmarks for generating different URLs so that you are not breaking the web so how does it work do you do something like query the whatever is left after the hash and then make an Ajax code directly to that thing so you can either make an Ajax request or since when you are hitting the server you already know that topics you can say if request is asking for resource 1 send resource 1 along render it you can same thing which you are talking about that is per history api if it is a fragment then server doesn't know it yet if the fragment server doesn't know it in that case you will have to find the Ajax request if it is a hash bang then you will have to find the Ajax request so for the fragment you are directly taking it and then including in the URL of your Ajax so let's say if it is abc.com hash applying pqr so server doesn't get the pqr anything after hash doesn't go so you see there is nothing there is just slash everything is missing but there is a pqr ask the server to send me pqr as the json response the estimate response I put it right there it is json I render it and put it that's what you do when the guy clicks on pqr2 you find another Ajax request and populate it the point that I am coming here is it is like touch.facebook.com used to be there touch.facebook.com so they try to do something similar to this what they have done is they have directly tried to get the fragment identifier and then directly put it in the $.ajax or whatever library they use and then they fire an Ajax event to their particular URL now if you replace a fragment identifier with any random URL let's say htb.com so what you can virtually do is there is definitely a vulnerability so I am just understanding how does it work without breaking the web when I say without breaking the web what I mean is if you are coming from the old data browsers you identify URLs with resources and every time something changes in the page you expect that the URL represents that with the history API that is possible if you refresh the page or you share the URL you still get the same thing across if you are using github and you go to a certain folder and it shows you that file but it doesn't actually refresh the page and if you share that file and send it to someone else the github server renders it at the server side and sends the html anywhere I am coming from and also the vulnerability is true even for any other Ajax request one way is to do different things altogether I don't think you should be answering that here that's correct I am just trying to bring that point we shouldn't be directly carrying it vulnerability people can abuse if you are not you are not sanitizing the input the bobby table thing is going to happen everywhere then first use page transitions and this week things slide across looks better right it's not just about looking better if I would suddenly change the entire page you kind of get confused user will get confused there are transitions to give a slight hint of what actually happened it's not just fancy animations sometimes it's great usability use them when necessary don't abuse them save state on the client side let's say if you file Ajax request and you are sure that this resource is not changing for the next 5 hours cache it use local storage use cache control headers somehow cache it local storage web SQL index dv so many options available use as much as possible to store stuff offline if it's not changing if it's changing do a request asking if anything has changed it's changed just to add but don't pollute the log just to add but don't pollute the log definitely if you know that certain markup is going to be used sometime don't hide it somewhere in the corner don't do that keep dom as like we can talk but probably you can save it in local storage and reload it again so when you talk about storing it on the local storage would you recommend storing the data structure which is the json and then re-rendering it or would you store the html local storage pet itself Reqna allows you only to store some key values there is a proposal for shallow copying of objects into local storage values but that hasn't been implemented yet so right now all you can do is just store strings if there is an object you serialize it as json I understand that the question is would you serialize the json and then re-render let's say using some kind of templating agent to generate the html or would you directly store the html fragment which got rendered directly into the inner html up to you I would prefer to store the html which is the 5mb limit on local storage which essentially means 2.5mb because JavaScript is completely udf16 so if you hit the 2.5mb limit which is very well possible if you are using something like facebook in that case you would probably try to keep it as small as possible and the json might make more sense but let's say a small application html is definitely better because you already rendered it 37 signals has a mobile application LinkedIn has a mobile application and they all use all these kinds of things to make really brilliant mobile applications I am sure you would have at least not seen or heard about it got popularized a lot LinkedIn mobile, they use backbone they use all kinds of fancy stuff it's not really fancy it's really really good stuff that you would be using eventually in a couple of years I am not starting using it right now deployment should I talk about this for a while because I don't know what we talked about I will talk about what I feel is important for deployment as I said earlier don't be a miser when you are creating JavaScript files don't be a miser when you are creating html, template, css or anything be generous create stuff as much as it makes sense don't overdo it just make as much as it makes sense and let the build steps take care of all their other optimizations don't pre-optimize your code beat JavaScript, beat css don't worry about it just let the build steps do its work you are not a build step please don't write everything in one file please don't concatenate please don't minify it yourself I have seen people writing functions which are more than 1000 characters now in one line why can't you make it worse and let the build tool do it for you after make much more sense so please don't be the build tool use a build tool automate as much as you can which is not just building but also testing if you are using it use pre-commit hooks make sure when you are committing there is a js-hint or js-link commit hook which makes sure that you are not writing crappy js it will make sure that at least your js code is something that other js developers would like to touch please use js-hint or js-link you can use it as a pre-commit hook continuous integration you have servers where all the tests continuously run every 1 hour so when you commit everyone a test will run and a mail will go out to everyone saying that that damn bugger screwed up everything so you can know who to blame automate as much as possible not just your deployment but also your code generation there are times when let's say you are using backbone and there is a very high possibility that when you are building a lot of similar kind of stuff there might be a lot of similar kind of code use stuff generators which kind of generates blank functions for you you fill in the logic so you don't waste time on generating the basic structure again and again it generates a boilerplate for you again and again use performance test use js perf js perf you are confused of what you should do to contact net strings should I do a plus c should I do area a comma b comma c comma dot join should I try another fancy trick there are literally I think 6-7 ways of joining strings in the house trip and you don't know which one to use go to js perf dot com create a test write each one of them run the test take the test to another browser run the test share it with other friends run it on every damn browser that is there and see where it's performance don't assume don't assume that certain thing that you know better is highly performance or it will save more time run test run performance test and unit test and all kind of test use fixtures use configurations not only on the server side also on the client side use configuration okay this let's say logging even if you forget to leave console.log in your page it doesn't screw up because it's under if people flag shouldn't be but at least view that much not sure what pages means develop boldly don't be afraid of trying new things be strong be bold be forward about what you want to do something new comes up give it a shot doesn't matter how comfortable you are with that somebody says there is a new MVC framework out there which is much much better much faster go try it be bold about it not just about trying new things also about writing your own code be bold about it have confidence in yourself what you are writing is really good if you act slowly if you act smartly make small changes go incrementally don't change 5009s in one go please don't if you are making any change and if there is a unit test missing for it please write a unit test even if this doesn't happen last night at least try to make this happen try to make every website a single page application I think the last time I said that to someone not everything is gmail why do you want engadget to become gmail it's a magazine that just serves pages like any other website but then I told him are you seeing gizmodo so what gizmodo does is you know engadget right guys engadget time to India it's the normal website where you click and then the new page opens up gizmodo used to be one of those websites not anymore it's the same code so when you click on the link if it's already page is already open you click on the link if javascript is supported updates the history fpr shows that it's a content website and even they are doing it it makes sense instead of downloading not only the 50kb of markup you are saving all the unnecessary third party javascript downloads yesl downloads you are just fetching the json object you are rendering it on the client side because server doesn't want to render it anymore and the clients can render it now you are offloading processing you are doing a lot of good to your servers and of course like if I build this tool for building this json css it's a build tool called sangam go try it though it's a shameless platform but I think it's a limited tool I had a look it's similar to it the thing is there are about 50 of these build tools out there I don't say that go ahead and use this I am saying go have a look at this the beauty of json css you can build your own build tools it's pretty easy and even if you don't use it eventually you get to learn a lot and I mean really a lot that's it click to exit questions 5 minutes how about page speed page speed Google page speed it's a great tool they rank your page and give suggestions on what is more what is the next important thing that you should do like how you have a build tool and how do you make sure that this tool does all these things even to all of the things that are big speed or wide slow or where inspector audit tab will tell you they tell you certain things about concatenate and minifier JavaScript which build tool will do for you where inspector has an audit tab which will also tell you that you have unused css there are build tools that will remove unused css let's say you are using bootstrap there are build tools that will remove unused css from your page so there are build tools that will take up some of them but not all of them so let's say any of these tools say you are firing 48 htb requests a build tool cannot take care of that in that case you have to go ahead look back into your markup what are those fortifies if there are some 36 images you have to see if you can use them as sprites instead use css sprites use images as sprites will save a lot of htb requests you can minify rather than together 16 you want to combine all of them into one the thing is not all of them if you want to combine all of them that's a great idea if you are living in Sweden where the bandwidth is insanely amazing even there 3g speeds are pathetic so you will be serving half imb of JavaScript if you concatenate all the things if you are building a real application what you should do is concatenate them logically into 4 or 5 as demand load on demand load on demand not only it's not just about when you need certain part of the application let's say if you click on settings in gmail it takes certain time to open the settings tab because the settings JavaScript is not loaded when you click on settings it loads the JavaScript that renders everything for you after that if you click on settings again it opens it's really fast of course there is one JavaScript for minimal layout for fetching the mails there is a JavaScript for settings there is a JavaScript for all the labs maybe there are 4 or 5 JavaScript friends so you have to logically decide you don't have to concatenate in one file you have to decide how logical it gets a better example would be I was doing a to-do application lately where I had to support web sql in the browser that supported web sql indexdb in the browser that supported indexdb if neither is available use a jacks packet you don't have offline application but for people who don't have offline capabilities you can fire a jacks packet so I don't want to load all the 3 modules each one of them is easily 20k do I really want to load all 3 of them and 60k so I do a dependency check do a compatibility check saying that this feature is available not features available I load certain dependency so don't concatenate everything structured logically we have all of these bootstrapping javascript classes like modernizer like head.js which loads these other javascript libraries so do you think it's better to embed these scripts part of the document itself let's say here you think the query and modernizer put in a single file and you want to load them into the rendering server side page itself or do you think it's better to load them as a CDN library it depends let's say if you use something like YLJS where many of the AMD routers are offline about AMD routers you want to have a callback when a certain thing gets loaded which is not possible if you put a static script tag so if you're using something like a script loader in that case things will be different you cannot use a CDN even if you can use a CDN it's certain versions so that things don't break but yeah so aren't there other issues like for instance if you use CDN then during development you still have to be online yeah that's one of the things CDN you have to be online of course that is something that you can figure out but the flip side of that also is that if you say building two different websites where you use the same library then obviously CDN makes a lot of sense the third part the thing that bothers me with CDN I just forgot what I was trying to say some CDNs grew up with caching a lot caching headers for I was going through so there is an app called Wunderkit which was really popular so Wunderkit was loading images from twitter so you sign up with your twitter it will show images from twitter and twitter was serving the images but cached expiry in 20 years back so every damn time there were some 50 profile pictures and it was insane there was no caching so CDN is supposed to take care of these things but there are high possibilities that somebody might be screwing up so you have to trust them which is something which I am not very comfortable trusting third parties not very comfortable what about DNS lookups DNS lookups is another problem so if you are using a CDN you have to do DNS lookup for it I will probably share so on the proposal I will go ahead and probably add a link in the comments you can go ahead and see the link so article on why why CDN sources are not that creative I keep building the perhaps any other last question often there is this I mean one of the problems in developing a javascript application is that there are multiple differences with server side one being typically the javascript initialization variables come part of the server side rendering which means you have a user name which you need to use for along with VHX that creates a dependency with the server and the second thing is typically you have the authentication especially now that you have OAuth and OpenID authentication you need to get some information before you can actually try and get some Twitter feed or something like that how do you write unit test cases which are closely dependent on other services and services let's say if you are talking about passing server sending certain information and then you are sending it again for other requests what you can do is do one Ajax request initially and cache them in local storage actually so money's point is particularly with Twitter if your app requires a Twitter login to work but Twitter is an excellent service so how do you do a unit test now you mock all of that so what happens when you do a sign in with Twitter the server requests Twitter for a token sends back to you this is the URL, hit this URL when you hit the URL then server sends back you get another token and your server says this was the first token this is the token you give me now am I allowed and Twitter says ok you are allowed to take this information that's how it works but when Twitter says take this information they give you JSON you can save that JSON and use it as a mock when you click on it you don't have to go to Twitter again you can just use that JSON object as a mock run this once that's how I do it I kind of dump that JSON when I am using a node server I just do a console.log of the JSON object and then this dump it in JSON and reuse it wherever I want the problem with OAuth seems to me very often that you can take this off time I think it's time to wrap up but this is something that I am particularly interested in a lot of people are interested in doing this yeah so typically this OAuth works at the time of execution right so let's say I try to authenticate and I find that it's not authenticated right so you at that point in time you launch an authentication so it doesn't happen that it always happens during the initialization it happens between and it goes for an authentication then comes back and then the JavaScript starts may be JSON, P or Ajax I am mainly understanding but not completely so I think we will sit together after this right that's a little more elaborate we will put you all together first this is about JavaScript caching basically if I put long time XPS header and my application is already loaded in browser and then there is a next version which I have built what is the best way to reload it in on the browser except now I go with a very complex way of handling you know some kind of a get parameter you know I use that the only way to handle it is better that's one of the ways you can use there is a concept of eTags which basically identifies when you define eTags and you reload your page instead of firing actually get request you will be requesting if the file is changed or not so only if changed that's what browsers do if you serve with eTags so this is a really ancient thing we will be doing this in the patch 1 just make sure you serve right cache control headers small question like this I encountered in a life project whenever we had too many JS files or Jesus files the entire team was working fine but once we minified and compacted it in a single thing things were breaking so there are some compressors that screw up your code this happens to the bootstrap the bootstrap code does not use semicolons anywhere so you run into JS file and compressors the code you have written is bad you are failing at minifiguring it properly so what I will suggest to you is make sure all your code is one written in old module pattern at least if you are not using AMD have ES5 strict mode enabled and pass it through JS int at least if you comply to all these things none of the compressors are going to screw up your code but the moment you start writing bad code compressors when there are these lexical parsers they will screw up basically these files I was talking about for the third party like this fit a bootstrap to .0 it does not minify it is not just your code that is going to be bad so there are a lot of for a very long time Google's AdSense was a really bad JavaScript example they fixed it in the last 2 years they used to be terrible they didn't even load it asynchronous before what you do is you take their code you put it in a module pattern put ES5 for use strict in it get all the errors in it mail them saying what are you writing you expect third party people to use your code this is what it looks like tell them be honest about it it is your responsibility of course you are benefiting out of it and you had last question ok the thing is let's say you are creating a single page app and then we have too much content in the DOM so doing a lot of Ajax calls and doing frequent DOM manipulations something like stop running the script sort of errors so either we have to clear the DOM and then accommodate new set of the tags we need to do something like that you can detach DOM of course there is a new thing coming out of the DOM you can talk about it later but in a typical DOM also you can detach nodes and put them into document fragments this is what I typically do let's say I have you guys have definitely created tabs or used tabs once in a while ok so let's say you have a tab let's say 5 tabs and 5 panels under it what you do is you do a tip show hide right don't do that what you do is let all of them show you just detach all the other panels put them in document fragment you can say document dot create fragment dot append child each one of them the moment you append child them into the fragment they get detached from the DOM and voila it saves a lot of memory saves a lot of processing that's another option I mean you have something pre rendered and you want fast switching you don't want to keep rendering it again for a tab moment I keep on second tab I don't want to render a huge log of something let's say I have a log viewer I don't want to render the entire log again I can just detach it and keep it in so why is detachment better than hiding what does it do when you hide it still in the DOM no but so what is the problem with the DOM it's still in the DOM to meet DOM elements at the time it's like I remember crockford saying that if the page is having more than 3000 elements in the DOM then we are probably doing something wrong when you have your DOM kind of applied with your CSS create something called a render tree when you have a really huge DOM doesn't matter if 90% of it is hidden huge DOM DOM tree to render tree conversion is longer it has a check what is visible when you detach it's taken off the render tree it is off DOM tree when you hide it's off render tree alone when you remove it from the DOM it's off DOM tree also it's a separate DOM all together called document fragment you can create a little document fragment when you bring it back in it's rendered all over again there so you can't avoid the rendering part of it of course it's going to be on demand you can still remove it from the memory no it doesn't you'd be amazed majority part of memory consumption is not because there's a DOM structure it's there because it has to be rendered again and again into the render tree that's one of the most memory and processing that you would take you should probably go ahead there's a review by Paul Irish about reflows and repaints you should probably go through it it's a billion dot what would happen if I say a dollar star dot length unless I'm using jQuery if you say dollar star it will look in document document fragments won't be coming document fragments are not in the document they're separate they're detached I think that would be an idea I think we're done thanks a lot guys one thing all of you guys need to know I have built it to JS website that's his work and if you want to follow me on twitter or github which I really appreciate if you want to follow me on github


Yo, what's up everyone? Out there in the YouTube universe. My name is Jeff. I'm from Lightbox and right now I'm doing my 30-day 30 video challenge. Now the reason why I'm doing this is why I mean several reasons I'm trying to get used to it, but now I'm on about like day 10 and I'm seeing the challenges right now I thought this would be super easy, you know, you just turn on the camera say whatever you want to say Record it upload it. Don't worry about keywords. Don't worry about titles That's that was the plan and did not work out that way. The thing is I suffer from something called perfectionism and Usually you would think perfectionism could be good to have but as a creative It is not the greatest thing to have in fact It could kind of be a defect or like a shortcoming if you're creative and you suffer from perfectionism The problem is it stops productivity. It stops content creation and holds things back You know, I've been wanting to do this channel and start producing content and putting it out there on YouTube now for a couple years But I've always I try I make a video and it's like I'm nowhere near where I want to be and let's face it I don't even know how to use cameras yet. You know, I'm using this Logitech webcam. It's supposed to be 1080. It doesn't look like 1080 I mean the quality isn't there, you know, I have a lot to do to build it up, you know But this perfectionism thing holds me back. So, you know, what I did was I did a 30-day 30 video challenge I gave myself a challenge. I said no matter what I'm gonna make 30 videos in 30 days Now I'm tired it's late night right now It's like almost midnight and it's kind of been like this since I started the challenge I mean first couple videos were okay and It started getting hard because I got a lot of work in my daily life in my workflow There's a lot of things I got going on We got a lot of projects that we're doing right now and it wasn't as cut and dry as I thought it would be I thought it would be like hey, I'll just turn on the camera. I'll talk for about five minutes I'll just record it and just upload whatever, you know comes out and It's I found out it's hard for me to do that, you know, because I want to make it Something valuable and something that could help others So I Think you know like I'm getting ready just to talk. I look at what I'm working at right now a situation I just went through Some experience I just gained something that's working for me And I want to go ahead and put it out there But I might make one video and do like 50 takes and one five-minute video could turn into three hours And when you work in a workload, that's like, you know that you already work in 12 hours a day That could kind of get in the way. So, you know, this is I'm just kind of recording my journey on this right now I'm not planning on this getting a lot of views. I'm not planning on You know creating followers are getting subscribers from this right now I'm just recording my journey as I'm starting off into this this new area of content creation You know, I really want to put stuff out that's going to help people But I have a few things inside myself that I got to Develop I got to learn I got to grow so I found consistency is always a key I've applied this method in other areas in my life and whether it's personal whether it's business And I found that if I do anything every single day for 30 days, it becomes a habit So that's why I chose to do this challenge right here. And really I just want to get comfortable You know, I want to I want to get used to it. I want to see how it works I want to be able to see my progress and see what areas or I need to focus on what areas Do I need to improve in now?  I might not have said that actually I was wrong You know, I'm wrong a lot of the times. Well, not a lot of the times sometimes I'm wrong But that's how I learned and I'm open to it. I try to stay open-minded. I try to stay Ready to learn I try to keep my ego aside. I try to practice humility and That's how I was able to grow so fast in my career and starting my agency Well, this is it. I hope that this might be able to help someone if anybody even watches it I doubt anyone will well, maybe later on with this channel grows because I do have faith this channel will grow I do have faith that we're going to turn this into something The image quality right now it sucks. The background is like not really there. This is just my work office I'm already right now in the process and getting a new camera and getting ready to properly invest into this So I do look forward to creating some more high quality Videos that's focused just on the content. So probably later on once once this channel grows And we start getting you know people inside it and watching and discovering it might go back to the old videos and find this video So if you find this video and it's like 2022 This is how we started it all started this way is the 30 videos in 30 days It started with crappy recordings poor quality video and just wanting to produce content and Learning growing and just throwing myself out there So if you are new if you're thinking of you know, if you also feel like you want to create something That's going to help people but you want to make it perfect and it's holding you back You're not alone. This happens to so many creatives out there whether you're in design whether you're in branding Development if there's anything in the creative feel this happens. This is part of it But it's something have to get over something I have to get over and if you really want to be productive and put content out there and Make a difference. You got to get over the perfection isn't you just got to put it out there and just face the facts It's not going to be perfect. There's always something that can be improved That's never going to change no matter how good you get and now I'm not just saying this to you out there to anyone watching This I'm saying this because I need to hear Well, that's it. It's late at night. Let me see what time it is. It's 11 54 We made it another day 30 videos 30 days If you do watch this and you like it, you know, let me know what's up subscribe click like comment do all that stuff All right. Have a good night. Peace


and presenting a case with vote on radiological manifestations of one hippal in Dowson Dome. Clinical history, a 41-year-old male without a significant past medical history, presented to Oberhospital, complaining of 15 days history of vomiting and abdominal pain. Physical examination was unremarkable. Root and lab investigations were within normal limits, including blood counts, venal and liver function tests. Imaging findings, ultrasound of a prominent pelvis remonstrated, bilateral multiple simple venous cysts, multiple simple liver cysts and bilateral large adrenal masses. So, in the first image here we can see a well-defined smooth fault puce cyst noted in both lobsters of liver, such as stroke simple liver cyst. In the second image, there is a well-defined smooth fault puce cysts are noted in both the kidneys such as stroke simple renal cyst. In the third image, there is a well-defined heterogeneous soft tissue lesion predominantly hypoechoic noted between the spleen and left kidney. Left kidney is not shown here. It is most likely suggestive of adrenal mass. In the fourth image, there is a well-defined heterogeneous predominantly hypoechoic soft tissue lesion noted between the liver and right kidney, most likely suggestive of adrenal mass. Subsequently, a contrast enhanced CT abdomen demonstrated multiple thin wall cysts lesions of varying sizes noted in both kidneys consistent with bilateral simple renal cyst. Second, multiple thin wall cysts lesions of varying sizes noted in both lobsters of liver consistent with simple liver cyst. And third, heterogeneous reenancing bilateral adrenal masses, most likely suggestive of bilateral pure homocytonous. So here we can see there is a multiple well-defined smooth fault cystic lesions are noted in both lobsters of liver. In the second image, there is a bilateral adrenal masses seen on the right side. Adrenal masses somewhat heterogeneous and there is a hypodensity seen within the lesion suggestive of necrosis. Again, we can see there is a bilateral renal cystic lesions and a liver simple cyst. And also there is a bilateral adrenal masses. A contrast in our summary of pre-postural demonstrating a cystic lesion in the inferior aspect of cerebral hemisphere with an enhancing solid component. This lesion is likely represent hemangioblastoma. Discussion, von Eppel-Lindau syndrome is an autosomal dominant inherited neoplasmic disorder that demonstrates age-dependent penetrates and mapenotypic variability. The basic underlying abnormality is mutation in VHL tumor separation gene, located on the short arm of chromosome number three. The tumors are initiated by VHL inactivation and are associated with abnormal activation of hypoxic gene response pathway. The most frequent tumor are retinal and CNS imangioblastoma followed by a clear cell RCC, pleochromocytoma, pancreatic eyelids tumors and endolymphantic sac tumors. In addition, renal and pancreatic cysts as well as epididymol or broad ligament cysts terrenomas also occur. All of the tumors that are typically found in VHL disease can occur as a sporadic event. So, a clinical diagnosis of VHL disease in a patient with a positive family history requires the presence of two tumors. Example two hemangioblastomas or a hemangioblastoma and a visceral tumor. All those specific gene mutations can be demonstrated. Diagnosis is generally clinical and depends primarily on the imaging. Location-wise, patients may develop some or all of the various regions which includes abdominal pelvis region. Their renal is most common which includes renal and carcinoma, renal cyst and renal angioma lipooma. Promises renal cell carcinoma are most common. The second is adrenals. Adrenals where piochromocytoma or extraadrenals piochromocytoma can be seen where piochromocytoma is 25 to 30 percent common. In pancreas, maybe represented earlier and pancreatic cysts are most common. P-net can be seen usually non-functional and frequently multiple can be seen in 9 to 17 percent of patients. Pancreatic serial cyst adrenoma or pancreatic adrenal carcinoma can be seen. In liver, liver cysts are more common. Neurogenitally, there is epididymal cyst can be present. Brot ligament cyst adrenomas can be present. In CNS, 70 percent of patients may be presented with a CNS menjoblastomas where the most common site is cerebellar or second most common is spinal cord or can be seen in brainstem. Pio presented here classical case of rare P-HR syndrome. C-C-T abdomen were consistent with bilateral piochromocytomas, liver and renal cysts. MRF findings were consistent with hemangioblastoma of left cerebellar hemisphere. Imaging findings confirmed the diagnosis of P-HR syndrome. Therefore, serum and urinary cataclylamides levels were done for screening of piochromocytomas and were found to be risk. The patient is now being worked up for a section of piochromocytomas and hemangioblastomas and for the follow planning was made. Treatment, primary treatment of all vaginal related tumors is global. For example, surgical resection, RFA or radiotherapy. Systemic treatment is recommended in the metastatic settings addressing the same therapeutic principles as in the sporadic malignancies. Due to the reality of VHL data about systemic treatments are sparse. PEGF targeting agent seems to be reasonable choice with regards to the panthopysiology in most of the tumors. High levels of PEGF are found in hemangioblastoma and it has been hypothesized that blocking the PEGF pathway might result in disruption of the tumor angiogenesis and consequently tumor regression. Conclusion, early diagnosis and application of recommended screening program for VHL is of utmost importance to prevent early morbidity and mortality. Local therapeutic approaches are the means of tumor treatment and should be provided by experienced physician with the widespread knowledge of VHL disease. Further understanding of pathopysiology and consequences of VHL gene mutations may guide further targeted therapies. Even if all symptomatic such patients should be followed to detect new lesions and to monitor the progression of new lesions. Follow-up evaluation focuses on hemangioblastomas and endolympathic sac tumors, pyrchromocytomas, pyrcell RCC, and pancanetic study tumors as well as regions of epididymis and broad pigment of uterus and can be tailored to individual patient needs. Thank you.


Okay, cool. So this talk is very related to the previous talk, and it doesn't work with Ivan Damgar, Claudia Orlandy, and by me, Mark Zimkin. So we also look at the multi-party computation setting, and I'm not going to explain again what is multi-party computation, but there is like one point that I want to highlight is that, like, let's say we have three parties, and they run some protocol in their private inputs, and they obtain some output. Now, if you consider passive security, then kind of what we know is that all of the parties behave honestly, and if the protocol is passively secure, then they don't learn anything beyond what they, like, learn from their input and their output. And if we consider active security, like, when we think about what is the difference between the two, well, basically there could be a malicious party, and he could start sending messages which are, which do not follow the protocol specification. And from these messages, he could, for example, learn something about another party's input, or he could influence the output of the computation. So on a very, very abstract level, the only thing we need to do to go from passive security to active security is we need to prevent malicious parties from behaving maliciously or, like, from not following the protocol specification. And so this is what we do in this talk. Okay, so we have several contributions. So the first one is we show a generic way of taking any passively secure protocol and transforming it into an actively secure protocol for some slightly worse corruption threshold. And the nice thing about this compiler is that, so, first of all, it doesn't look at the specific way the semi-honestly secure protocol works. So, like, if you fulfill the security properties that we need, then you can plug it in and you get an actively secure protocol. The compiler is information theoretically secure, which means that if you plug in an information theoretically secure passive protocol, then you get an information theoretically secure, actively secure protocol. To kind of give a concrete example in the paper of a protocol that we can plug in there is we look at beaver circuit evaluation approach, which is very similar to what you've seen before. So this is, again, something where you compute on these additive secret shares and you add them locally and you need to multiply them with some correlated randomness. So we apply our compiler to the online phase and then we give a specific pre-processing phase, which we can then kind of use along with our compiler to get a full protocol kind of from start to end. And then the last thing that I'm not going to talk about in this talk in detail is we also provide a complete fairness compiler. So what does this compiler do? It takes an actively secure protocol, where active security, I mean active security with a board, which means that kind of the adversary gets to see the output and based on the output he can decide whether he wants to abort the protocol execution or not. And in complete fairness we have the case that the adversary doesn't see the output of the computation and he has to decide kind of blindly whether he aborts or not. So we show a compiler that takes a protocol that is actively secure with a board and the compiler makes the protocol actively secure with complete fairness. Okay, so let's start with the first question. Like how can we go from passive to active security in a black box manner? And again, like in a black box manner means we cannot look at the specifics of how the protocol works. We need to find some generic way. And there are two very simple main ideas. So let's say for the sake of this talk we focus on three parties and we want to have a protocol that is secure against one active corruption, okay? Three-party computation with one active corruption. So then there is a simple observation, which is well known, I guess. So if we take any pair of two parties and one of them is malicious, then the other one is honest. And the other thing that we do is instead of letting the real parties directly execute the semi-honestly secure protocol, we will kind of introduce one layer of indirection. So the real parties will kind of simulate some virtual parties and these virtual parties will execute the semi-honestly secure protocol. And the idea is kind of in the way the real parties simulate the virtual parties, we prevent an active adversary from misbehaving, okay? So let's look at the idea. So imagine we have three virtual parties, v1, v2, and v3. And we are given some semi-honestly secure protocol that tells us how we can compute some functionality. And these three virtual parties would like to run this protocol. So what this means is if the protocol says v1 sends a message to v2, then we kind of simulate this in some way. And if neither v1, v2, or v3 misbehave, if they all behave honestly, then kind of the semi-honestly security guarantees tell us that they learn nothing apart from the output and what they learn from their input. So how do we simulate? Well, we let kind of always two parties in this case simulate one virtual party. So for example, in this case, we have p2 and p-, the real parties p2 and p3 simulate the virtual party v1, okay? And then we do this kind of for all of them. And what you can already observe here is that every real party simulates two virtual parties, okay? So for example, we have the real party p2, it simulates v1, and it simulates the real party v3, okay? And what do they do to simulate? Let's for the moment assume that somehow the, for example, the real parties in v1, let's say p2 and p2, somehow they already agreed on an input and they already agreed on a random tape that they want to use for the computation. So if they have the same input, and if they have the same random tape and they run the same protocol, then they always, then they can always send the identical message. So what we then do is kind of let's say v1 should send a message to v3 and the protocol execution of the semi-honestly secret protocol, then we will let p2 and p3 send the message to each p1 and p2. So p1 in this case will receive a message from p2 and p3. And p2 will also receive a message from p2 and p3. Like, it doesn't make sense that p2 sends a message to p2, but like you get the point. So now that let's say p1 receives two messages and we know that we have, we want to be secure against one active corruption. So what does that mean? That means if the adversary misbehaved, then he will not be consistent with the other honest party. Because he can either behave honestly, then the two messages that the party receives are the same. Or if one party misbehaves, then the two messages receiving party receives are not the same. And in this case, the party can abort and it doesn't respond to a maliciously formed message. So this is the idea of the protocol. And this way, like we can see that in this case, we, for example, achieve security against one active corruption. And now the question is what do we need from the semi-honestly secure protocol in terms of security guarantees? Well, as I said before, like every real party participates in the simulation of two virtual parties. So now, basically, if I corrupt one real party, then I corrupt two virtual parties. So that means that the underlying semi-honestly secure protocol that I need, it needs to be secure against two semi-honestly secure corruptions. Okay. And this idea also generalizes. So for example, there is no reason why this needs to be three. So it can also be more than three. It can be like an end party protocol. And you can also increase the number of corruptions that you can handle. The main point here is that every virtual party contains one honest party. So that means that if all but one part, like if you have, let's say, five corruptions, if you want to be secure against five active corruptions, then every virtual party will be simulated by six parties, which means that if any of them or all of them misbehaved, there will be at least one same, like one honest party that sends the correct message. Okay. Cool. So there are two kind of small details that I glossed over. So the first one is I said they already agreed kind of on an input and a random tape that they will use. But obviously, like one party cannot just distribute their plain input. So we need to somehow take care of this. And the second thing is, what about the random tapes? So the random tapes, we either use coin tossing for so that kind of the group, like a group of a set of real parties to simulate a specific virtual party, they will basically run a coin tossing protocol to agree on a random tape that they will use. And then the inputs of the virtual parties, we take care of them as follows. So let's say I have again, the real parties P1, P2 and P3. And they would like to compute the function f of x, y, z where x, y and z are their actual inputs. But now we have the virtual parties. And what we now do is, well, we simply split. So for example, P1 simply splits his input x into three shares. And then he gives one share to every virtual party. So what does it mean by he gives a share to a virtual party? He sends it to all the real parties that simulate that virtual party. Now, as I said, like an active adversary would kind of corrupt two virtual parties. And this means that he's still missing one share to reconstruct the input. And all of the other people do that as well. And then instead of computing the original functionality, we compute a related functionality which first reconstructs the inputs, and then evaluates the function f on them. So apart from this being nice, what is this good for? So what we then looked at, we said, okay, let's take a specific protocol and see how efficient our compiler gets with this. So we've focused on the Beaver's circuit evaluation approach, which requires a pre-processing phase. So we design a pre-processing phase with active security. We apply our compiler to the online phase. And then we get an efficient 3PC overrings. So why is it interesting that it's overrings? I didn't mention that before. When we consider semi-honestly secure protocols, we can do them over many domains. We can do it over a field. We can do binary circuits. We can do rings. But as you have seen in the previous talks, it's quite challenging to get active security over a ring. For example, the approaches with Macs, you need to do a lot of trickery and magic to get there. But since the compiler doesn't use any kind of Macs, if you start with a semi-honestly secure protocol overrings, the actively secure protocol will work overrings just fine. Because the only thing you do is you send message redundantly. You don't need to exploit any kind of underlying structure over which you do the computations. So like this I will do very quick, because we've just seen it. So the Beaver's circuit evaluation approach, everybody additively secret shares his input. They evaluate the circuit gate by gate. And then they reconstruct the outputs. So for example, if you have an input X, for the case of three parties, it will be split into X1, X2, and X3. And one of the real players gets one of those. If they want to add them, they can do it locally. And if they want to multiply them, well, then they need multiplication triple. So now kind of the question is, how do we generate these multiplication triples efficiently overrings? And I will only give a very high level idea of the protocol to not get lost in the details. But kind of the main challenge is we can generate multiplication triples with semi-honor security very easily. And then how do we lift them to active security is we generate two multiplication triples which may be potentially incorrect. And then we sacrifice one of them to check the correctness of the other one. So if we generate two triples, we lose one of them. But we know that the other one is correct. And we don't learn anything about the secret shared values of those multiplication triples. The issue with this is that if we want to generate multiplication triples over a ring, then this check of sacrificing one triple to check the other one doesn't work directly over a ring. So what we do instead now, as we say, we will kind of first generate a triple over the integers. So that means we will generate a triple which is not a secret shared modulo sum number m. But instead, we will just throw a lot of noise onto it. So if you want to, for example, share a number in Zm, then we will expand this number with security parameter many bits of noise. And if you secret share something over the integers without any modular operation, then the parties can still not learn which value was secret shared, even though you didn't perform any modular arithmetic on these values. So the first step what we do is we secret share, we use the standard approaches of semiannously generating a multiplication triple over the integers with these noise things. In the second step, we generate a triple, a multiplication triple, again, semiannously secure over a field. And what we require is that the field is so large that the multiplication triple from Zm does not overflow. So we can embed the multiplication triple from Zm into the prime field without requiring to ever do a mod p operation. And then we interpret the triple over the integers as a triple in the field. And we sacrifice the original triple in the field that we generated to check the correctness of the triple over the integers. And why is this useful? Well, the whole point of this is that now we know that the triples are correct and we can simply reduce the triple over the integers modulo m to obtain a triple in Zm. Because if it's a valid multiplication triple over the integers, then it's a valid multiplication triple in Zm. So this is the idea. And so we are at the summary, which means I am way too fast. So to recall the results, we propose a compiler where you have an n-party protocol, which has, let's say, roughly a t-squared privacy guarantee. And then you can generate an actively secure protocol, which only is secure against t-active corruptions. And this compiler also works for adaptive corruptions, if you assume that the same as the secure protocol is also secure under adaptive corruptions. The second thing that we do is we show that you can transform an actively secure protocol that is actively secure with a board into a protocol that is actively secure with complete fairness. And then the last thing that I just gave a sketch of is we also propose this three-party, one actively secure for generating triples over a ring, and then compiling it with our compiler. We get a three-party computation over rings, which tolerate one act of corruptions. And where the computation overhead is very low, because all you do is you just send values redundantly. There is no heavy computation involved there. Questions?


Hi you guys, Lindsay here. Welcome back to my channel, Inside the Hymn. So the holiday season is here and I know a lot of us are going to be trying to rack our brains to come up with some gifts that we can make for our friends and family. So I am here today and every Saturday in November bringing you new and unique gift ideas that you can make for the loved ones in your life. The gifts that I am going to be showing you how to make are going to be quick like under a couple of hours and super affordable because we are making them ourselves. We just buy a couple of supplies. You can make multiple versions and get the cost per gift down even lower. So keep all that in mind. Today I am wearing a huge hint as to what we're going to be talking about and that is pom poms. So I recently got the pom pom makers from Clover and these little guys have brought me so much joy and happiness. I'm basically addicted. The pom pom maker itself comes, it's like one package, comes with four different sizes. I got a bunch of different materials because I wasn't quite sure what was going to be best. So the very first thing that I tried was this 100% cotton yarn. I guess, I guess it's called yarn. And I also got it in this orange, pink, blue kind of situation because I really liked how those colors looked and I wanted to know what an ombre yarn would look like as it was wrapped around into the pom pom. And these were the results. So here's the largest pom pom in the blue and orange kind of ombre and then here's the one of the littler ones in the navy. And you can kind of already tell what, like why this didn't work. The cotton yarn isn't fluffy enough and so it doesn't really fill out. Like this one is like droopy and sad. You know what I mean? It's like it wants to be more fluffy like this and it's really just, it doesn't stay and it doesn't look that great. So if they had this like ombre color, not in 100% cotton, something with some more acrylic, I think it would be a lot better. But I immediately ruled this out for any of my projects. I didn't use that at all. This one here is three different colors of acrylic yarn wrapped together all the way around the pom pom maker all at one time creating kind of your own ombre effect. I also wanted to try other materials. So you can tell the one I just showed you is nice and fluffy. You can see here's another version that's just two colors. This is what a two color version looks like. But it's super full, super fluffy. I also really enjoyed this one, which was kind of like a Chanel kind of you can tell that it's a little bit fuzzy and that turned out really well. And I also tried it with fur. So apparently they have these fur yarns. I had never seen these before. It kind of got me inspired for some garments that I might have coming up. But either way here is the fur yarn that turned out really cute. It looks like this. It's like this isn't been trimmed. It's a funny little shake. But anyways, there's the fur one. That one's really fun. And then I also tried a sparkly, I don't know, it's like it's like the fur but it's more like an eyelash trim. And when I did that mixed with white acrylic yarn, this is what that looks like.  But you can see how fluffy that is. So lots of different materials that I experimented with. The sort of Cliff's Notes version is 100% cotton doesn't work. The more acrylic and polyester and more fluffy, the yarn is the better it's going to work for you. And to try and mix materials like fur, like eyelash trim, whatever it is that speaks to you. So now let me show you just how easy it is to use the pom-pom maker. And then I'll show you all the projects that I made. And there are quite a few because like I said, I'm basically addicted to this thing. So you open up your pom-pom maker like so. You take your yarn and you simply start wrapping it around one half of the pom-pom maker. And you're trying to get the entire white part of the pom-pom maker completely covered. And I tried to do this in one single layer and it just wasn't as poofy and it wasn't as full. So I like to do like starting a little bit further back and then filling in and then filling in over top of that. So you're getting roughly like doubled up on your yarn as it's going around. All right. Now you close that end up. So you've got half of it. You've still got the string. Start the other side. Same thing. I also found while doing this, there really isn't a way to mess this up. The wrapping part anyways, even if you did, you know, you didn't get it as full. It doesn't look bad. It just doesn't look as full. If you did it too full, it doesn't look bad. It just looks super, super full and fluffy. All right. So this is what you've got now. Now you need to take some scissors and I actually got special scissors just for this project. They also came from Clover and they are the Patchwork Scissors. And what's beautiful about these Patchwork Scissors are that they are a little bit sterrated. So when you cut through things, it's not going to slip out of the blade. It's going to cut all the way to the tip and make for super, super precise work, which is why I chose them for this particular project. So you have your little wrap like this and you're going to take your scissors, put it into the little groove that's there.  And so now you have something that looks like this. Now, even though I did not use the cotton yarn to make the actual pom-poms, I did find that it worked really well for the next step. So you just want to cut a length. I like to err on the side of caution.  And that has just pulled the string into the center of the pom-pom maker. And now you take the ends of your string and you tie them super tight. And this is why the cotton yarn works really well because it's very, very strong and durable. So once you've got that all tied up, now you want to, this is where the magic happens, you lift your little rainbows, I guess, and then release them from the pom-pom maker. And just like that, little fluffy action, a little trim action. You just want to get the ones that are like going rogue and not wanting to look super pretty. And there you have a beautiful little pom-pom. I went to town and made a ton of these and then turned them into some really, really great projects. Here are all the ideas that I executed. And believe me, there are even more that I did not get done yet, but that you will see very soon. Take it away. First up is a cute pair of sneaks. To add the pom-poms to the shoes, I simply took some velcro dots and applied the loop side to the shoe and the hook side to a flattened portion of the pom-pom. This also means that the pom-poms are interchangeable. So when you're thinking of specific people to make these four, think of fun ways that you can celebrate with them. Maybe their favorite sports teams colors, holiday colors, and fun colors that coordinate with their favorite clothes. Sticking with footwear, next up are these slippers. Since the slippers are made from fabric, I was able to thread the cotton tails of the pom-pom through a needle with a large eye and sew through the upper part of the slipper. After both sides of the tails are through the shoe, simply tie them in a knot. I know a lot of you will be making family pajamas for the holidays. How cute will this little addition to the outfits be? The next one is probably the easiest and fastest of them all, and that's this knit headband. The knit headband I purchased was already knotted in the middle, so I simply tied the tails of the pom-pom around the knot of the headband, and that's it. I made this one for some upcoming Carolina Panthers games and combined two colors for the largest pom-pom and just the blue for the smaller one. For this pom-pom hair tie, I made the pom-pom a little bit differently. Before tying the cotton string around the pom-pom maker, I slipped the thread through a hair tie. Then when you pull the cotton string through the center tunnel of the pom-pom maker, it sandwiches the hair tie in the center of the pom-pom. This made it more durable and conceals the hair tie better.  So for the hat, I used the exact same technique as I did with the slippers. Thread the cotton tails through a large eye needle, so both ends of the string through the top of the hat. There's a pretty substantial seam in that inner section on the top, so the tails tie around it and are very stable. These kind of pom-pom hats are everywhere this season. I've seen a bunch even with the fur pom-poms, which would also be super, super cute. Grab your hot glue gun for this next one. To make the headband, I applied a dab of hot glue to the flattened center of the pom-pom and pressed it firmly into the headband for a few seconds to set. Easy peasy. You can make these headbands with various size pom-poms like I did here, kind of grading from largest in the center, tapering down to smaller. You could do them all the same size, but in a bunch of different colors that would be adorable as well. The possibilities are really endless with this one. Remember the sew-on method for the slippers and the hat? I used the exact same technique to sew the pom-poms onto this sweatshirt. To make your sweatshirt a little bit more trendy, think of really fun, popular colors. So I opted for orange and pink. Orange and blue is also a really fun combination. I can imagine burgundy and pink. You could obviously do school colors here. You could do team colors here. You could go red and green. You could really have a lot, a lot of fun. Another option is to do all the pom-poms in tons of different colors on a neutral sweatshirt like gray, black, white, or cream. I'm pretty sure you're getting the hang of this now, but I used the sew-on method again to adorn this woven bag with pom-poms. My bag was fully lined, so the tails tied nicely and securely. But if your bag isn't lined or the lining is loosely woven, slip the threads through some clear buttons on the inside to give it some stability. Sort of like you would use a washer in your wood projects. Also be sure to add the pom-poms to the side of the bag that doesn't have the inner pockets. It will ensure that you can still use the pocket, and it will be easier to tie off since you're not going through multiple layers of lining. So as you can see, I had a lot of fun with this, and I really feel like any one of those ideas that I just shared would be great for someone in your life. Whether it be a young person, like a child, would do really well with maybe the hair type pom-pom. A teenager might really love the headband. Someone in their 20s or 30s might like the pom-pom sweater or the shoes. I just feel like there is something for everyone in one of those ideas that I just shared. So maybe it made you think of someone in your life that would really love one of these pom-pom projects. I hope that you will go grab a pom-pom maker for yourself and get to work making them. It is super fun. I was watching all of the Hallmark holiday movies and making pom-poms and just living my best life, and I want that experience for everyone. I will be sharing with you guys a lot more ideas that I have to use for the pom-pom makers. So stay tuned for that. This will not be a one and done purchase for you. You are going to be using the pom-pom maker year round. Trust me. Okay, and like I said, I'm doing these DIY gift idea projects every single Saturday, this entire month. So come back next Saturday. I have a really fun idea that I was able to do for less than $10, which is really, really great. And it's very in style, very trendy, something that I think a lot of people will really like. So come back here for that, but I will see you in the meantime as well for a lot of other really great videos. See you all soon. Bye.


This is stock number 9978. We are here at Summit Automotive in Fond du Lac, Wisconsin. You're new and used heavy-duty truck headquarters today. We are checking out this super clean 2018 Ram 2500 crew cab short box This truck has this 6.7 liter Cummins diesel From this HD video you will be able to tell that this truck is extremely clean all the way around Inside and out no dents or dings on that front bumper has the front bumper parking sensors Granite crystal is the color We shoot all of these videos in 1080p So if you have HD capabilities on your computer Tablet or smartphone device turn them on right now because it's like you're right here looking at the truck with me Factory painted step bars. This particular truck has an AEV Aftermarket wheel set on it. No scuffs or scrapes on that and it has open-country Toyo Extreme tires. These are 35 by 12 and a half R17s and they have right around half the tread left Has a Bilstein shocks. Looks like it has a two-inch leveling kit in there Frame and underbody is very clean didn't see any dents or dings on that front fender The hood is an excellent condition Didn't see any dents or dings on that Does have the clearance lights the blacked out headlamps Passenger side fender no dents or dings on that and the passenger side rim Absolutely perfect. No scuffs or scrapes on that as you go down this side of the truck You can see just how clean the body is how reflective and mirror like that paint is We take these HD videos So if you are far away or even if you're close by and just cannot make the trip down You can still see the truck hear the truck and have confidence in the vehicle that you're looking at before you even get here Cab is an excellent condition You want to be able to see if there are any imperfections in the paint any dents Any body work this truck's been very well maintained and is an excellent condition That's why we do the videos so that you can have that peace of mind Before you make the trip or buy that plane ticket You know that you're gonna be getting a high quality truck Frame and underbody is an excellent shape. It has all the remaining factory exhaust has a weather guard Toolbox in the back that comes with the truck as we come around to the back rear bumper excellent shape No dents or dings on that back up parking sensors full towing package Of course with the receiver hitch four pin and seven pin wiring the tailgate is an excellent shape as well You get the blacked-out Ram emblem blacked out four by four with the believe it's the sport package or the blackout Package, I'm not sure it's one of the two they do about the same thing But I think it's a sport because of the seats that are in this truck Boxes very clean has a really nice spray and bed liner As we go down this side of the truck just as clean as I pass in their side No dense or dings on the box here And for the full disclosure this back rim is in really nice condition as well We want to make sure you get the most accurate representation. So when you get here, there's no surprises Has the heated fold-out tow mirrors They also fold in. I'm not sure if they're power or not. They might be power. We'll check in a second here They are not power fold-in, but they are power mirrors power windows power locks and those power mirrors has the auto headlamps The bighorn sport package gives you the black cloth and leather mesh seating No rips or tears on the seats really nice condition power driver seat with lumbar factory all-weather floor mats and as we hop inside the truck here, you can see that this one has 26,656 miles outside temperature and compass display has the digital Spenometer instrument cluster is nice and clean has a heated Leather wrap steering wheel cruise controls on the right Bluetooth and information center controls on the left Also has audio controls on the back of the steering wheel comes with the six-speed automatic transmission has the 8.4 touchscreen radio. This is the 4c radio. So it's the It's has Android Auto and Apple CarPlay capabilities on it Dual climate control There you got your heated seat heated steering wheel button has a factory brake controller downhill assist control stability control factory exhaust brake a tow-haul mode and then you can turn those front and rear parking sensors on or off Turn dial four-wheel drive and it does have a 115 volt 150 watt plug-in Passengers seat just as clean as the driver seat no rips or tears this truck smells very clean I don't think it's ever been smoked in Very very nice all the way around has power sliding rear window and your map lights up there Has the SOS and assist buttons which are features of the vehicle that you never have to pay a subscription for We'll take a quick look Sorry about that at the back seats, then we'll check out under the hood Back seats are just as clean as the front seats no rips or tears back here It does have the latch child safety system that power sliding rear window these seats do fold up for extra storage It does have a load floor which is a really nice feature if you got pets They can lay on a nice flat surface if you got both sides down or if you got muddy boots or tools you put them on here You're not going to wreck your nice leather and cloth seats Storage underneath the seats and then finally there is Two in-floor storage bins on both sides and they are removable bins so it's easy cleaning So you can put ice and drinks and stuff in there and just dump it out when you're done It's like you have two coolers with you wherever you go I'd personally like to thank you for checking out the video today Hopefully from this HD video you will have been able to tell just how clean this truck is all the way around Inside and out under the hood we have these 6.7 liter Cummins diesel engine base very clean runs very smooth everything looks stock underneath here and This truck has been fully safety and inspected by our service shop as a fresh oil and filter change All the fluids have been checked and topped off and this truck is 100% ready to go To see more pictures of this truck or one of our other 450 new and used cars trucks SUVs minivans Wranglers half tons three-quarter tons one tons you name it. We got it go to our website www.SummitAuto.com full pictures and descriptions of every single vehicle on our lot from two locations all at SummitAuto.com And if you'd like to check out more HD videos you can go to youtube.com Summit Auto remember to like subscribe and share on this video and all the videos that you see there In fact in a second you will see a link to subscribe to our YouTube channel on your left A link to more heavy-duty truck videos like this one on your right If you have not been to our website on the bottom link to this vehicle on our website click those check us out And we really look forward to help you with this super clean 2018 ram 2500 crew cab short box big horn Sport package. Thanks again