 Okay, I guess we are all familiar with this view, right? Pretty slow uploading. And we can't do much about it, right? Like right now we are all connected to the same Wi-Fi network, like this auditorium Wi-Fi handles 500 people right now and we can't buy faster connection, right? There is no way we can do it. So maybe as a developers we can do something that our apps will accept files faster, so it will seem like it's uploading faster. And that's what I wanted to talk to you about in those five minutes, because you know, downloading is fast. Your network is often really fast when downloading, often something like 10 times faster than uploading. And there is a bonus there, because when you download data from the internet, it's often compressed. Your server sometimes uses libraries like ZLIP and algorithms like GZIP to compress data that you download. So HTML, JavaScript, CSS, it's all compressed. And they have those fabulous logos from 90s. So maybe can we compress data when uploading? Maybe we can try to do the same thing, you know, not downloading but uploading. And we can, there is a JavaScript library called Paco that does exactly the thing we want. It's a ZLIP port to JavaScript, very fast. So just we go to the GitHub, download it, and use it like this, paco.deflate, and then we throw our file there. Enough talking, time for a demo, I guess. You can see a link up ahead, and it's a simple example application and there is a link to short blog posts on this topic if you want to get more technical. So I recommend you go to CodePen and try it yourself. Or you can just Google for paco upload, and it should be like up the top. Anyway, back to the example. As you can see, this is some simple file upload form. It's not really uploading anything, it will just simulate uploading uncompressed files and compressing the file and uploading compressed version with the selected network speed. So we need some files. We have some 3D JSON, we have some STL, which is a 3D model. We also have huge text files like CSV, log files, some files that don't compress well, like images, movies, keynote file. And one interesting thing are those PSD files. Just take a look at facebook.psd. It's over 400 megabytes in size, and it's just Facebook logo. I'm not sure what they did there, but it's enormous. Okay, so first let's take a look at files that don't compress well. So images, if we throw an image here, it will just start uploading, and then the packed version will start uploading. But we don't see any gain here because images are already compressed. The same goes for videos. And if we throw keynote here, it just blows up because keynote is not really a file, it's a directory, doesn't matter. But what about files that do compress well? Let's throw a PSD file here. And we can see we saved a few megabytes. If we throw this huge facebook.psd, and wait for a bit because it has to process 500 megabytes of data, but once it does, we can see that it got much, much smaller. And just see how much faster the upload gets. The same goes for GIMP files. And now we can just try this with all those text files like JSON, like STL. And on average, we go down like five times in size, sometimes even more. So that's quite a huge gain. And if you're uploading files like this in your application, there is something you should definitely try and check if you can just have some gain. Check if you can have some improvement with it. And if you do, don't forget to let me know. So I know that I have helped you. Thank you. Thank you. So I'm Alex Lakatos, and I do a bunch of different things. For starters, I'm a JavaScript developer advocate for Nexmo. And in my spare time, I volunteer for Mozilla. I'm a text speaker and the reps council member. But at heart, I still remain like a front-end developer. And I think I'll always be that. And I wanna show you guys some of the productivity hacks I use for my DevTools. I'm showing you what I do on Firefox, but everything I show you is translatable to Chrome and other DevTools as well. So how do we open up DevTools? The easiest way is to just right-click and do inspect element, and DevTools appears on page. Now, I have this website which is kind of buggy. It's my excuse for a blog which I never use. But I wanna show you guys how I edit it. So for example, if you look at the button, it's kind of orange and not red, the same as the links. How do I go to the button? So I could right-click and inspect that element and it would snap to it. But the websites I work on are layout heavy, a lot of Z-team decks and stuff like that. So it's element on top of element on top of element, which is hard to select. So there's the search feature right there. You can power it up with like Command-F or anything else. The cool part about it is this CSS selectors to select anything on a page. So I know my button is an MDL button. And then if I search for it, I can see I have four instances of it on the page. If I keep searching for it, it's gonna pop up eventually. So that's my button. Now, if I wanna change the color of my button, there's a bunch of CSS attached to it, I should have to scroll through it and figure out which one is color. Easier is I just filter for styles and everything that has a color attached to it, like a color in the name pops up. And that's even nested styles and stuff like that. So I'm gonna scroll until I see my background color or my color, which is, well, it's this thing here, which is red, green, blue. I don't really know how that works. I think Martin had a talk this morning which explained how this works. I still forgot, so I'm gonna just say red, right? And that changes the color of my button. Now one of the other problems I have, I used to work with a bunch of big teams and those had like style guides and the style guide says, well, the color has to be a hex color, right? How do I figure out if what's the hex color for red? When I started developing, you used to go online, there was a website for it, you typed in red, it showed you the hex color. But now I've got this little dot in here, so if I shift click on it, it's gonna display all representations of the color I have in there. So red has like hex, hue saturation and light and red, green, blue. And I can circle to it, I can find out what the hex color is, right? If I look at the website, maybe the projector like this resolution isn't that good, but it's not the same shade of red as what I have in there. I'm not gonna like change this until I get it just right. That would be insane. And it would take a long time. What I can do is, if I click on that colored circle in there, color picker pops up. Now I'm not gonna try to match it because I'm never gonna get it. I'm half color blind anyway. But I have this little color picker in there that just lets me go on the page and select it from somewhere else I have it. And voila. So that was basically part of what I did to hack my CSS to make me more effective. But I've got other issues. For example, if I hover over this button, I have a shadow on it, and I kinda don't want that. Now, as soon as I hover out, well, I can't inspect it anymore, but I can force the hover state. If I go to the element in DevTools, I can right click that and say somewhere in there hover. So I can force hover state on it. Now I have an indicator in there to like remind me that it's there. And if I force hover state, I can just say background color somewhere in there. This is how we fail on stage, like 10 seconds. Okay, I got it right in 10 seconds. They can say white. And now if I disable it, I can actually test that it works. Thank you. Hi everyone, I'm Tom. I'm Liran. And we are here from, we work at Wix.com, which for those of you who don't know is a platform for creating websites with millions of users all around the world. And we are here to share in these five minutes some insights we had from making Wix sites accessible. We hope you enjoy it. So why should we care about accessibility anyway? First of all, we want to make the internet available for everyone. And by everyone, I mean also people with disabilities, such as blindness or inability to use mouse. Also, we're seeing laws all over the world that are requiring site owners to make their sites accessible. This is like a store that has to have a ramp for a wheelchair that some people just can't use if it doesn't happen. So about six months ago, we got the task, we started working on making Wix sites accessible, and we need to do this now due to this law that is going on in Israel. So we started by asking ourselves what actually makes a site accessible. So when we say an accessible site, it needs to be perceivable by everyone. And when I say by everyone, I mean, for example, that an image that you have on your site should be perceivable by a blind person. It should be operable. So as Liran mentioned, there are some people who are unable to use a mouse, for example. So if someone is unable to use a mouse or uses some speech recognition software, they should still be able to see, use, and interact with your programs. It should be understandable, which says something about the meaning and the content of stuff, but it also says something about the order. The order of stuff needs to make sense. Now we'll see this in a bit. It may sound a bit trivial currently, but it's really not. And of course, we want it to be as compatible with as many assistive technologies as possible. We want it to be as inclusive as possible to make the internet truly available for everyone. So when we started this task, we first started by wanting to understand how screen readers really work, how a blind person experiences Wix sites. So we opened up Safari, we opened VoiceOver, which is free on that, and we opened this and heard this sound. 369-375-2D474-3D-8-8-8-3-9-8-D65-8-0-6.Weppy. We were not happy. Now, Liran, you wanna say what the hell was that? Okay, so this is how blind people see this image that has no alt text on it. So basically, screen reader, and how does that work? So screen reader basically interprets an accessibility tree that is being built by the browser according to the HTML DOM and only the HTML DOM. Okay, now when you say only the HTML DOM, so we need to remember this is the document that we write, body, all kinds of HTML tags on. And let's think about for a second what that currently looks like in the developer landscape. And basically, it pretty much looks like this. Now, I don't know about you guys, but if you looked at most of the sites out there that have not made serious accessibility efforts yet, most of the components there are just divs. Now, I want to see that this is really a universal problem, whether it is. So please raise your hand if you ever use the div on your website, if you ever wrote a div. And if you ever, please leave your hands up only if you also use the table ever. And leave your hands up if you use the figure and the fig caption. And how about an article and the side and footer. Okay, so there are still some hands up, which is great, but the hands went down. Okay, and why do we do this? Well, basically for two reasons. One, it's easy just to use divs. And the second is that we are afraid of the default browser styling, which may destroy our styling and we have to take control of it. But there are actually solutions for that. So now I want to play a game. As Tom mentioned, we see a lot of divs. So this is part of code that was in weak sites lately. Basically, I'm looking at it and I can't tell what it is and it could be anything in the world. And just by making a small adjustment like that, I can tell the browser in the whole world that this is actually the footer. How about this one? All I see here is two links wrapped with some divs. I don't know what that is, what that's all about. It could be also a footer, but just by making this adjustment, it's now really easy to see that this is the main menu of the site. And even if it didn't have the ARIA label, I can still see that this is a list with an aft tag. So this is the main issue. We are saying that basically you want your HTML to be semantically correct. How do you do it right? Well, it's not easy, but you can start by asking yourself the right questions. The kind of questions you need to ask yourselves are almost like metaphysical, philosophical, deep questions. Like, I'm writing a menu now. What is this component? What is its role in the overall page that I'm building? Is there any text that I can add? Thank you. Hello, people. So I'd like to show you some software. I don't think it's necessary for you to use it because you are finally footing. But it's just another approach for routing. I use this approach also on the backend. This is the frontend library once, and I've reduced the configuration file which has like thousands of definitions and there was no definitions because I believe we can automate routing and we should treat URL as a store. So this is just the demo of it. I'm using here param which is just, let's say, I'm asking if night is true. And I can toggle it. And it works on site. The library of this routing is agnostic in terms of the technology. You can use it with React, with whatever you want. And I think it's cool because usually it's really tightly coupled with your library. So we see. I have param name. I'm just writing it and it's updated all the time because with each key I'm just writing. But it's much more clever because as you will see, here is the param amount which I'm using on this page. And you can see it's already a number so I can add to it. So just look here. I have getters and setters for it. So I have all the tools we want to have in store. So I'm casting to number. I'm even setting default value for one. Also while writing, I'm defining like I don't want to write this value if it's lower than two. So if you will check the URL, it's just disappearing if it's one and it's one by default. So I'm just operating on real object all the time and not casting it like I'm not. So the alternative what we are doing is like we are regexping a string to take some data from URL. And while we are writing, like imagine you're just writing by hand JSON because you want to communicate something and then you're parsing it with regex instead of serializing and deserializing things. So that's my assumptions. Assumption and let's check what's the object. What's that the object? It's date, so let's check how it looks in console. It's real date object. I have some logic here like I will not go to yesterday on this object. That's somewhere in setter or getter. I don't know, let's go for the more impressive demo thing so you can serialize everything like this. And it's just the image. Let's go and make from this. This is real image already, it was canvas before. So let's just copy our state open and this is the same stain in different applications. So the side effect of this approach, like you have really convenient tool to use to define routes. You don't define routes at all, they are just serialized. So it's pretty convenient tool and the side effect is like you can do this serverless thing like you can send your standalone application by email. You can set some state, let's say order some goods online and then send the email with your state like with your things which you ordered by email and then on the provider side he can open the same. So there is no server inside, it's just the side effect. I'm using this approach and it's really easy for me for any kind of complexity of application. I'm just not defining routes by myself. So one more thing, if you'd like to go to reactive conference next month in Bratislava, just ask me, I have discount code for that and that's all, thank you. Hello, Full-Stat Fest, my name is Kirill Pimenev and I'm a leaf proof that you can have a full-time job as Rust programmer. And today I'm going to tell you that you should learn Rust then go back to your language and that will make you better at the language you're writing day to day. And Rust is a compiled, multi-paradigm, whatever, if you're interested in that stuff, go Wikipedia. What's interesting for us is the Rust is a compiler with the most picky compiler you can imagine. So there are lots of programs which are valid in other languages but they have subtle bugs and Rust compiler is designed to catch those bugs. So let me show you just in code examples how other languages allow you to make mistakes and how Rust compiler will catch it. And we'll do the really easy task, we'll write a small function which receives the vector of numbers and it will remove all the zeros out of there, a really trivial thing and yeah, I understand not every one of you can write C++, I cannot write C++ so this is how you do it. It's pretty normal, pretty boring function and I think everyone can understand it but do you know how they're going to use it actually? They're going to use it multi-threaded and now you're screwed. It's bad because the function goes through your vector and it locates the length of the vector and it removes something in place and if you start doing that in multiple threads at the same time, you will end up with clashes going out of some values going out of a scope and other threading issues. I understand everyone who ever deployed something multi-threaded have seen those issues and this is still perfectly valid C++ program. You will be able to compile it and compiler will sell nothing to you. Yeah, this is why we invented other languages like Ruby. This is valid Ruby program doing exactly the same and it is good because it won't have those multi-threading issues but it will be damn slow and it will be slow because in that reject method they're making mutics on every iteration on every attempt you're doing and even if you are not doing multi-threading you're still paying additional price for the mutixes. So let's see how the same program can be expressed in Rust. And if you look at this code it's pretty close to what we wrote in Ruby not to what we wrote in C++ but this program won't compile because we are doing that mistake, we are passing the same vector into multiple threads and this is not a valid thing to do and this is how compiler will say yes. You see there is numbers vector and you're passing it around and you are not passing it around careful enough. Please fix it. They give you some example how you can fix it. Obviously you cannot still fix it with move semantics which is not what I'm going to explain to you right now but the thing is this is what you will see the first two weeks you are writing Rust all the time and this is why I think it is a good thing to do because after you figure out what compiler wants from you what's this move semantic, what's this ownership thing you can still apply it to your Ruby code you can still apply it to your C++ code whatever code you are writing and you will be able to avoid trading bugs memory safety bugs and generally the right programs which are faster and safer and will save you lots of time. So this is mostly about developing a special mental muscle which will help you avoid these mistakes and after you move back to your language this same muscle will save you from the same class of errors if your language is not supporting you anymore. And just to recap this is how I'm making it right and you see that I'm doing mutexes I'm doing them explicitly but I'm locking it and just dropping it and Rust takes care of unlocking mutex after it's no longer needed also quite an efficient. Thank you. That's it. Don Rust. Hello everyone. My name is Raj. I work as a senior iOS developer at Tommy Elfigur and Calvin Klein. So today the topic I'm going to discuss about is between communication between iOS devices. These days mobile is everywhere and internet is also becoming very scarce resource here because people how they are using internet metaphase with so many issues, probably I assume so. And to avoid this kind of scenarios we can have a communication among ourselves without no internet using a bunch of connectivity. So we don't require any rest APIs, we don't require any internals, we don't require anything but still we can get all the data and everything is under transmitted across all the devices. So we had a kind of scenario in our office like a person comes to me and ask me like Raj can you develop an application where I have to communicate anonymously to one of my colleagues. So in that case you want to hit on somebody you can use this application to hit on. And the good part about this application is that you can explicitly tell who you are or else you can just be an anonymous guy out there in the application. And also it enables the user to communicate with the new joiners in our application in a very random way. Because when you see in companies like every group has their own set of people like nobody mingles with other and everybody has their own set of territory. So to avoid this kind of problems we just created a kind of an application where it helps others to hit on somebody and trying to play around others. So how did we do this one? So that's an important thing. So the thing is that we used a thing called a bonjour connectivity. Bonjour connectivity is nothing but a network discovery protocol. So each and every iOS devices has a kind of a network identifier. So the moment you turn on your Wi-Fi or Bluetooth even both of the things. So each devices is identified through a kind of a network. So when I switch on my Wi-Fi when one of my colleagues switch on my Wi-Fi so both devices are speaks to each other through a network discovery protocol. So that's what we call it as a bonjour connectivity and it works via Bluetooth. It works via Wi-Fi. It works via Wi-Fi and Bluetooth together. And also the thing is that you can connect with users by auto connect. Also you can connect by invitation also. So sometimes you feel like why should I need to connect to this guy? Why should I need to connect to another guy? So you can always send an invitation to others to get it connected. And this is how it works. The beautiful part about this one is let's say the user C is out of range of user A. So but still a user A can speak to user C using user B. So now the user B can act like an amplifier so which can act like a medium between user A and C where both people can talk to each other. So that's a beautiful part about this one and you can have this kind of use cases everywhere. Let's say I'm coming to an office where I'm not able to find a person. So in that case the person can share a location to me. I can identify exactly which floor he is in and where can I go and identify him through somebody's internet, somebody's wifi, not internet. And also there are a lot of use cases around this. Let's say I'm flying in a flight where there is no internet connectivity. So I want to talk to my friend who is at the back. So still you can use this one to talk this one. You can do a streaming. You can do a file transfer. You can do a video call. You can do whatsoever that you can imagine with all your Viber or Facebook or whatsoever. And an important part is that when somebody goes offline. Let's say he's out of range. So in that case, whatever information that you wanted to share with other person shouldn't get lost. In that case, so we have implemented something called a replicated distributor database. What happens is, whenever somebody sends information to the already connecting guy, so all the information, when the guy is not there, we send a kind of a notification to the person B saying that this guy is not there. So the information is catch on his network, catch on his device. Once the guy connects, automatically it gets transferred to only to the guys. So you can always have a person-to-person communication. Also you can have a person-to-group communication. So it works in either ways. And how can you ensure security? Because security is an utmost importance these days. So basically we use a symmetric authentication as well as use a kind of a transmitter ID, so which is always encrypted. And the channel we use here is like TLS RSA with AES 256, which is one of the most encrypted channel. So we make sure that all the information, whatever we transfer is secured. So employee also feel much confident and much happy that nobody's overseeing the network. So that's it from my side and one more thing. So you can connect with me in Twitter as well as in GitHub page and also we are hiring. And I would like to thank my team. So we encourage me to have a talk here. Thank you. Hi, I'm Paulo. I was born here. I live here. I work at Bitcrown. I like Doge. I like my cat. I like math, no, yes. I like functional programming for that. It fits my mental map. Many languages have it and it just feels right to me. So this is a code I will write on a daily basis. This is just basically mapping in a rate of strings. I call them to integer. This will output me one, two, three. Same thing on Ruby. One, two, three. Two, I is basically one, two, three. But that doesn't happen on JavaScript. So I couldn't apply my mental models directly. I had to read documentation and other stuff. Just a note, this is not a rant about JavaScript. I really like the community frameworks libraries, underscore, JS, React, they're really good. But maybe I should use another language which will compile to JavaScript, Elm, ClosureScript, PureScript, or even Lix orScript. So I did that. I use Elm to make a game. And it's a very simple flappy bird clone but actually has a score right down there which will put the top three players using web sockets. So on the server side I use Elixir and more specifically I use Phoenix web sockets and OTP which was nice because it also matched my mental model. This is actually a function from the game. It will grab the game, apply gravity, physics, check the upper limit, check the collision, update the pipes and update the score. This you can see as very neat pipeline of computations. This is also from the game. This is the function that will update the score. This basically will filter all, get all the pipes, filter the pipes that were already passed. It will get the length of that list and it will divide by two. And if the score is updated, I'll just update the score on the server. And this is a server code which will get all the players, will sort them by score and it'll take three. Kind of similar and very nice. So just wrapping up, I'm not comfortable with JavaScript and if you're not, just try other languages. Make games, they're pretty cool. This is the URL, you can play it. And thank you, thank you on Twitter. So hi, I'm Marta, I'm a web designer and I'm part of the team that designed the full stack website. So I have a small web design studio, it's called Suite. I have the studio together with my husband, this is us. So you know what to do, right? So when Goldgram asked us to design this website, we were super happy because we knew that this was gonna be a fun project. I was gonna be fun because we knew the main target audience were developers. And it's always fun to design for developers. So the first thing a developer does when she comes across a new website is fire up in Spectrum. So we wanted to add a little something, little surprise in the code. Yeah, we're not using Moji for our classes and yeah, Moji was born this way. So. Yeah, no, I only have five minutes. We had different classes, obviously, the header, the footer, container and a wrapper, the speakers and the sponsors, and the backend and frontend. So we obviously combined them, so this would be the image element for the speaker block. There were some expected advantages of using Moji for our classes, with less characters, which is not a big deal, but still it's nice to have. It forced us to be really, really, really consistent with the class names because it went crazy really fast. So yeah, we needed to use a shared language within all the development team, and obviously it was fun. So I'm saying, should you use Moji for all your classes from now on? Yes, that's what I'm saying. We also use quite a bit of SVG in many different ways across the side. So we had symbols, these gradients in symbols that we could reuse over and over. We animated some things with the little trick that Sara told us yesterday. This is animating the length of the dash, of the stroke, just cool. We had some fun things like this polyline that is responsive and adapts to the hidden width of the container, of the two containers, which seems obvious, but it's kind of tricky. To do this, you need to add preserve aspect ratio none to the SVG element, and then back to the effect of non-scaling stroke to the polyline itself, because if not, the stroke width was changing, which was not the effect that we were looking for. In the middle of building the side, CSS Grid became available in Chrome and Firefox. So CodeGum told us, why don't you use Grid? And I was like, yeah, that's a good moment to learn Grid. Yeah, it's a perfect moment. So yeah, we did that. So we used CSS Grid on the speaker side, on the speakers page, and we wanted to be kind of obvious that it was CSS Grid, so we did different grids for the different breakpoints. You can see. So this is not the best way to use CSS Grid, because one of the good parts is that it does all of the most of the calculations of the layout for you. And to do this, we had to do a specific grid for each web point and rewrite all the grid, which was not that fun, but still we managed to produce a layout that it's virtually impossible to do without CSS Grid, which is cool. Also, you can kind of design the grid directly in CSS, so you can plot all your grid spaces in CSS. So you can see where C1 would be the first content. I want the first image of the first speaker, so and the three dots is an empty space. So you can do that with code. So that's really cool. And well, while doing this, we ran into a lot of bugs because we were using on the speakers page at the same time, Grid, Flexbox, SVG filters. There was animation at some point and it all crashed. So we kind of had to redesign some things. And I don't know, we wanted to animate mass, but Firefox don't really allow to SVG mass to be animated, which was a bit of a bummer, but still we had lots of fun. And I hope you like the website. Thank you.