 And when the light is bright, it's working, right? It's working. Now it works. You can check. Hello. Yes. Hello again. First, for those of you who would like to follow Vladimir's steps, I'd like to show that at our BAM.info website, there is an article, quick start, full BAM stack. And it describes, it shows how to build this web page. And it's very similar to what Vladimir has done. It also shows how to create blocks, CSS for them, BAM HTML, templates and JavaScript and how to redefine JavaScript in the library. So you can just, I guess, nobody could follow Vladimir's steps and code right now, but with this article, you can see what code you need to type, what's the result you need to get, and you can check it at home. I'm here to answer your questions, but as you know Vladimir answers already many questions. And I'd like to start with examples how to divide interface into blocks. We won't cut, but actually it's the most, one of the most difficulties in BAM because you need to make your web application architecture very well in order to have good independent blocks. And this is what many people ask, how do I decide what are the blocks on my page? I'll start from Yandex. And then you can suggest me your page and I'll show whatever blocks. So here is the page and let's imagine that this is a PSD image, it's not implemented yet. And we are to start coding. And actually if it's a single page, we need to decide what's repeated at the page and the things that are repeated and also things that may possibly be repeated in the future, they are blocks. So here you can see that there is at least one menu block and also another menu block. And again you see that already here inside the menu item there can be a drop-down. So we know that menu needs to include other blocks. And this one also can be a modified menu. But actually this is very easy. There is an invisible layout block to place block at the particular places. And we can predict that maybe in the future we will need to have one more input and one more button for questions. So the blocks in the page will be menu, the same menu and modification of the menu, layout, logo block, arrow block and controls input and button. When another page happens, we can, if you have a bunch of pages or a bunch of services, so here it's search for web and search for images. We can keep in mind that we have two pages and then decide what are the blocks of these pages. For example, you see that there are these pseudolinks, we call them pseudolinks. They also can be a block because we can provide special functionality, JavaScript functionality of not reacting or clinging or something like that. Also every image can be a block with an element, name element. And when we have two services, we can find what's similar between them and you can see that similar is yellow arrow, logo with menu and what's inside arrow. So we can define what will be the library to distribute blocks among services. And here we also have other services which we need to confirm. So you can see here that all the services have closed, not very big head, but it's the web service, web search service, it's much bigger. So we will place to the library this implementation and at the web search service we will provide per service tuning to make it bigger. Also you can see that head is yellow here, here it's blue and so on. So if you have many services, it's not a very good solution to place all these colors into the library because we cannot predict which color we will use in the future service. So we will place transparent arrow to the library and then define color at the service. So actually that's all. If you can give me an example of a page, I can actually, if it's really a question for you, you can give me an example of a page or you can ask other questions. How do you handle an internet explorer? Sorry? I will just support for IE. If I want to specify a different property for IE 6 or 7. Yeah. You can see the conditional comments here. So we provide different IE, different files for different IE versions and in them terms each CSS file, for example this one is a building technology and you could see in the made.js file in the Vladimir's example that there are a list of technologies to build and CSS, IE CSS and IE 7 CSS among them and in them tools each of those technologies is provided by a special config file, a tuning file and there are also possible inheritance so that let me find an example for you. This is how file for IE 9 looks like. It includes all the CSS needed for the page plus something that's needed for IE and conditional comments are written in a special way that makes IE to download only one file particularly for this browser. For instance, we have a width of, suppose we have a width of 500 pixels and it's working fine in both and in IE 7 I want 400 and 7 pixels where I will define that IE specific or will I have to add it in all IE CSS file? You can add, there is a folder with a blog actually I can even show you. As you can see there is a file for CSS and some IE CSS tuning in some parts. I go, we were utilizing just two technologies for CSS, which was the CSS itself and I did those CSS files. So, at that time we needed some way to distinguish the visuals that would be used by IE 6, IE 7, etc. and that's why it is IE 5 here. It's a piece of legacy. But right now when we decided to split them into separate files there is no difference. This is just a copy pasted file and under development. Actually this library for web apps I cannot show you any IE file here because it's not here yet. So with this one. If you don't have any questions then I think we can finish. Who else is using... Could you please repeat... Who else is using... The main user is of course Yanders and also there is a range of Russian companies using the other competitor Rambler, there is also Internet. They also provide a bunch of services and they also search engine and have some services for news, maps very similar to Yandex, but just smaller. Also we have a leader of web mail in Russia not Yandex, but they still use them. Not full staff, but some pieces and also they have their own tools which they are not sharing but still they have something something else for building. And also there are foreign users there is one guy from UK he implements CSS framework with them he uses only CSS part of them but still and he sometimes writes articles explaining how his framework works and refers to them. Then the leader actually works for Yandex partly and he also owns a web studio and they use them for their clients from California, yes? What's more, who uses them? Tom? That's Hunter. Yeah, that's Hunter, it's Russian LinkedIn Russian jobs searching website also uses this. I don't deserve a bunch of but not a lot of stuff but it's the best in Russia and all of them use them and a ton of stacks on them. So that's all. Can you use some info that CSS circulated? CSS circulated, yeah. This is actually a team developed some tools that can be used also outside of Buster separately and these tools are here One of the most promising is CSS O which stands for CSS Optimizer and it makes not only removing empty spaces and comments but also structural optimizations and here there is detailed description of this with many examples and I'm going to show you an example that makes it clear why CSS Optimizer is good maybe this one. You can see there are four selectors here and two and first and second are similar and CSS Optimizer understands that and he can unite them and also for many other features of CSS for example he knows that only color green should stand then this one and the extra minimum you can find the page and some people from the conference who participated in the conference they already tried the Optimizer and one guy sent me some details how good it is if compared with other Optimizers so just try besides there are also other Optimizers this one is GTO Optimizer is Eugene they both are to be run and doing NeoGIS so you need NeoGIS to be installed on your computer to run these tools other tools can be found at the special page web.info besides there is workshop also I did not show you how it plays in CSS and JS when using an event stack but still it can be used separately Cedzka is a Russian word for cif and it separates different CSS styles for example Gdendra asked me for this Hux we don't need them anymore and I can use Cedzka and say that I don't use A6 anymore please remove everything that was written for A6 and Cedzka will divide other CSS from CSS for A6 and then I can do whatever I want remove or place it in a separate file all the tools for CSS based on CSS parser it's also here it's Gonzalez so if you need your own tool for CSS and you don't need to write ready apps you can just take parser and do what you want and these Ameta.js and JS.ter are for real geeks and so I even don't I'm not sure that I can explain but please check it on your own because it's pretty hard to describe in Russian and in English I'm sure I can't also actually people would be much popular if they provide its libraries but unfortunately we don't have a lot of time to implement them and here there are some libraries but actually they are just examples of how to build your own library because not very many blocks here and you can see but still this example is very good you can see for example menu component since any block can be placed in any page we can automatically build this library site and these examples are actually iframes and so you can see you can find you can see this is iframe and this block is alive it's built from the source code this is the search code menu and when we are looking at the library website it turns into HTML and you can see it right now and it functions like a page so as I've said with Refresh this library code is the library site is built with some ugly economic files but as I've said with Refresh we are now developing a special tool for automatically building any library so to provide people the opportunity to build their own libraries and with them it's possible to use as many libraries as you would want so you can borrow one library from your team one library from your friends and so on at Webmail they use stylus and as for other services I didn't know and we at framework teams we don't use but just because we need to produce a code understandable for all the developers so if someone doesn't like stylus or don't like stylus we need to please them both and this is why we use plain CSS but again it's possible and BAM tools already knows how to work with styles and less I don't know about stylus I don't remember we can check yeah, actually we have very geeky CSS guys at Yandex and they dug out that all the preprocessors have some bugs and this is why they decided maybe in the future to build their own to make their own preprocessor and since we are creating our preprocessor we can use BAM terms so that we can not use these long classes but just define block this modify this actually I guess we are out of time it's 6 p.m. already but still if you have any questions in the future you can this is a link to our Facebook group and to Twitter and what's more I didn't say it from the stage but now I can BAM team helps other teams to solve their architectural problems and since we are living in 21st century and Skype is available so you are very welcome to comment and we can call each other and discuss your stuff thank you very much for listening