 So, hello. My name is Andrey Sitnik. Thank you for a great introduction. I am from Russia, St. Petersburg. Winter is coming. It's totally about my country. I am working at the Evel Martians team. Unfortunately, right now we have no blasters in robots. Only Ruby on Rails and React. But we are working on UBS social group on Russia. And my current project is on Plypfer, social media tool. But I think you may know me better for my open source as author of Afterprefixer and Post-CSS. So, today we will talk about CSS processing, of course, because it's CSS Conf. So, how many people here use less SAS, stylus, Afterprefixer? Who is Afterprefixer? Okay. If you have used Afterprefixer, you may see that it works not like Compas, Bourbon or any other mixing libraries. It has no mixings at all. In Afterprefixer, you just wrote properties, selectors. And just with the magic, it became a prefixed CSS. This has happened because Afterprefixer is not a preprocessor. Afterprefixer is just a plugin for Post-CSS, a new way to process CSS. A new tool to extend or even replace preprocessors. So, what is Post-CSS? We will start from theory. What is the idea behind Post-CSS? An idea is evolution. I really believe in evolution. I believe that every long-time developing process is based on evolution. We have a great example of evolution right here. The results of the biological evolution. But also we use artificial evolution in our computer science. And Richard Dawkins even suggested that human ideas, human culture is also a result of the same evolution process. So, what is evolution? These three steps are inside every evolution process. So, every evolution process is based on random mutation, natural selection in the wild and inheritance. And my main question is, do we have these steps in our web? Do we develop a W3C specification by these steps? And I think no. Of course, we have a lot of inheritance. We have a lot of old specification, legacy code, like stuff we don't want to support. But do we have a natural selection in our web? The BluTec is a good example. Think about it. Do we have a way to dismiss some specification with some problems? For example, we create some specification with our very big problem. Can we dismiss specification if many sites become to use this specification? I think no. BluTec was never a part of any specification. It was just a vendor-specific tech for Netscape only. It was supported only by Mozilla, Netscape and Opera. But in this case, in this very good case, Mozilla was forced to support it for 19 years. And the problem that we can dismiss specifications, this problem creates other problems. Will you try some interesting, but crazy idea if you understand that you must support your mistakes for years? Because we have a lot of very strange, very nice ideas, but can we use it in W3C? Because we have no way to dismiss specification. And it is why random mutation is very important part of any evolution. This is why freedom is so important. Because there is no way to find great idea without mistakes. Every great idea looks like very crazy at the beginning. Remember what people thought about iPhone when it was released? Remember what people thought about JavaScript development just five or seven years ago? So development is about making mistakes. And this is why we need some playground. And this is why preprocessors is so big deal. Preprocessors are playground where we can test some ideas before it became a standard. Of course, coffee script is a good example. How many people here hate coffee scripts? Of course, we hate it because it's not so cool. It's very strange, especially if you don't use Python. But without coffee script, we will have no such great ES6 standard. Because 30% of the ideas in ES6 was tested in coffee script. Even new ideas in ES7 was also tested in ICID coffee script. And so I'm very proud for JavaScript preprocessors because it is still a good playground. For example, we have Yelm, it is a preprocessor for JavaScript that will compile to JavaScript. This time-travel debugger. It's a really crazy but awesome idea. I think it will change the way how we develop JavaScript. But do CSS preprocessors are still this playground? Do we have some new ideas in preprocessors? I think no. I think preprocessors are in the middle of stagnation. And I'll show you why. First, what is the preprocessors? CSS preprocessors. Preprocessors is like a template language, like a PHP, when you mix your code with your styles. The first question is, is it a really great idea to mix your code and styles? But okay. Let it be. But in PHP, we can put our code in any place. But in CSS preprocessors, there is only a few places to put our magic. For example, Bourbon or Compass or any other mixing libraries can define only variables, mixing or functions. But what about the units? There is a very nice unit, RAM. It is a new unit. It is supported not by the old browsers, but it's very easy to polyfill it. So can we create a polyfill with preprocessors? It is very difficult. And it's not so easy because we have no units in preprocessors. And the first problem is because of the second one. It is very difficult to change something inside CSS preprocessors because they have a lot of code. They have a lot of files, a lot of line of codes. And SAS team go further. They revolve project to C++. How many people here know C++? So we have less developers to change something inside preprocessors. And last but not least problem of preprocessors. I'm not a big fan of JavaScript because I'm a previous Ruby developer. But let's be clear. SAS programming languages is even worse. Can you read this? I think no, me neither. But it's not some important, some big stuff. It is just a transition mixing in Compass. We need so many lines for just a transition mixings. And this is why we have a post-SAS right now to fix all the problems. But post-SAS was not the first. The original idea was by TJ Halvachuk. He wrote, I think, about the half of NPM packages. And it was a stylus developer three years ago, stylus maintainer. And he understood that preprocessors have a big problem inside. And there is no way to fix it because the preprocessors problems are inside a HHX shell. So he created a new way to process CSS. He created a modular CSS processor tools rework. And the first version of afterprefixer was based on rework. But to quickly, afterprefixer became too big for rework, so we create a post-SAS. Because rework was just proof of concept, just first generation of modular CSS processing. With post-SAS we have a better parser, better API, better source map support. So what is post-SAS? How post-SAS works? Post-SAS score is very small. Post-SAS score contains only two parts, parser, which parse your CSS string to CSS node string, three of the objects, abstract syntax tree. And CSS stringifier, which receives that node string and generate a new CSS string. So by default, post-SAS does nothing. By default, post-SAS parser your CSS and stringify it back to CSS without any changes, byte to byte, because post-SAS stores all white spaces, all information about your CSS string. All magics, all post-SAS magics happens in plugins. Every plugin is just a simple JavaScript function that receives that node string and changes something inside. It is just object tree, so JavaScript function can travel through this tree, change something, find something, add some nodes, delete some nodes, engine and return modify node string. Then we send this tree to the next plugin, to the next plugin, like a chain. And in the end, we will send these changes node string to the stringifier. And stringifier will generate changes CSS string with the new source map. But let's look at the code, because code is only things that are important. Post-SAS is not an NPM package, so we load it from NNPM. Next, we create a post-SAS instance and we set array of the plugins. And that's all. Now we can process CSS string through this post-SAS instance and get our result in promise. Plug-in code is more interesting. So, remember I talked about RAM unit polyfill. Let's write it in post-SAS. So, every post-SAS plugin is just a function that receives node tree. This node tree is objects with many methods, so we can run executer methods to iterate through all declaration node. Declaration is a property column value. In every declaration node, we try to find a RAM string inside the value and replace it by simple JavaScript. That's all. We need only four lines to create a RAM polyfill, which is impossible to do with the same API in preprocessors. So, what is the difference between post-SAS and preprocessors like SAS, lesson, styles? In preprocessors, you mix your code with your styles. It's mixed together. It's written by like a PHP. In post-SAS, all mages happen by JavaScript function. You split your code base to the styles and to the JavaScript magic. And the second difference is that all preprocessors features are inside the preprocessors. Preprocessors are analytics, too. And in post-SAS, post-SAS code do nothing. Post-SAS is a total or modular tool. So, why it's important, why it works? Because these modular structures can bring us evolution back. It can allow us to use evolution in our web development process. So, how it works? You have some crazy idea. For example, a new way to create size optimization tool. You create a plugin, just a JavaScript function. And of course, many people became to hate your plugin because hate is going to hate. But emotions doesn't matter, because if your plugin really works, if your plugin really does some interesting stuff, many and many developers will start to use it. And so, your plugin became popular, like after-prefixer. And if your plugin become too popular, you can go to W3C and create specification. And you have free time to write second plugin and go by this round again. So, with post-SAS, with the plugins, we can have evolution back in our web. We can use evolution steps to develop new specifications, new technologies to test some ideas before it became specifications. But it was only theory. Our current science says that theory means nothing without really practical results. So, if post-SS really works, we will have some practical results. Are we? Of course, post-SS has plugins for variables, for nesting rules, for mixing, because it's really too simple. But the important thing, that plugins for variables, for mixing, for nesting are very small. For example, the post-SS nested plugin is just about 60 lines of code. So, it is very easy to fork it to change something. If you disagree with me with my API for nesting, you can fork this plugin and create your own without any problem. But post-SS is not about doing preprocessor stuff with modulus. No. The main goal of post-SS is to do some new stuff, to create some new task, to solve it, to change something amazing that was impossible on preprocessors. So, I will show you some plugins that are totally impossible on SAS. The first example is after-prefixing. After-prefixing is impossible to do with preprocessors. How? After-prefixer works. After-prefixer contains, can I use database? You write some CSS, just simple CSS, without mixing, just properties, selectors. Very simple. And after-prefixer takes your CSS, takes, can I use database, takes browsers that you support, and after-prefixer automatically adds only necessary plugins, only necessary prefixes, only prefixes that are really actual for your project, for your browsers, for your CSS. But I can use database. But I think everybody know about after-prefixer, yes? How many people here use a bubble tracer? No, it's a CSS conference, yes? It's wrong place to ask. We have a new standard for JavaScript called ES6. It is a future standard. There is no browser with ES6 support right now. So, we have some compilers. Bubble and tracer compilers, as well as our future CSS, future JavaScript with ES6 futures to our current ES5 JavaScripts. But it will be good to have something like this in CSS. It will be good to write CSS4 right now. Don't wait until all browsers will support CSS4. Because CSS4 contains very amazing things. For example, CSS4 contains custom selectors. In CSS4, you can define a custom selector and use it. Or, for example, we have new properties with readable values. A lot of things in CSS4. And with post-CSS, you can use CSS4 right now. By CSS6 plugin, it was written by French developer Moogs. So, you add post-CSS, you add post-CSS plugins, and you can just write CSS4 and it will be compiled to CSS3. Next six things will be very scary. There is a... There is a... China has a very big IT market. It was... There are a lot of money there. But, unfortunately, there is one really scary thing in China's market. Chinese users still use Internet Explorer. Not just Internet Explorer 9 or 10. Chinese users use Internet Explorer 8, 7, sometimes even 6. And so, it's very difficult to develop things for Chinese market. And this is why Alibaba, it is one of the biggest IT company in China, wrote a CSS3 plugin for post-CSS. It is like CSS next, but in different way. It takes your CSS3 and convert it to CSS2 with Hux for Internet Explorer. Next things. Are you read the end of the global CSS? It was posted by on CSS3 on many sides. It is the idea to isolate your selectors by adding a random and totally unique post-fix. So, we have some JavaScript that will process your CSS and will 100% isolate your selectors. It's like a BAM, but it's more sure. It's more useful when you create some widgets for different sites and you have no idea what selectors will be on different sites. So, it is a good idea to convert them to some 100% sure unique selectors. And you can do it with post-SS plugins, CSS models. Next things. We have about 5% of color-blind users on our sites. I think for most of you it's more than Internet Explorer users. So, if you test your sites with Internet Explorer you should definitely test it for color-blind users. And this is why Netflix wrote a plugin post-SS color-blind. It takes your CSS and replace all colors to emulate some color-blindness. For example, you can see that this button is very good visible to the people who see all colors. But for some color-blindness it will be less visible. And next things. We can use post-SS not only to transform our CSS but also to link it. For example, Twitter use post-SS post-SS BAM Linter plugin to link their BAM style. But post-SS has much smarter linters. For example, do I use? Do I use link your CSS with can I use database? It can warn you that some properties aren't supported by all of your browsers that you need to support. Or other good example is post-SS flexbox fixes. There is a very good database flexboxes. It contains flexbox browser issues. And so we have post-SS flexbox fixes that will warn you if you have some CSS that doesn't work in all flexbox browsers. But it is my favorite example. It is a Hebrew Wikipedia. You see that it is something different in it. In Hebrew language and in Arabic language we wrote from right to the left. But our language our writing system has very great effect on our minds or our perspective. So in for Hebrew and Arabic users future is not on the right, it is on the right. And so progress bars must go from the right to the left. So we need to mirror all design of our sites like Hebrew Wikipedia. But of course it is very difficult to support two different versions of CSS. And so Muhammad from Jordan wrote RTL CSS plugin. This plugin will automatically mirror your site in Hebrew and Arabic users. It was used for example by WordPress to create styles for Arabic and Hebrew users of WordPress. It works simple. It replace left to right, right to left change order of the margins arguments. But I show you only plugins that are totally impossible on SAS. But we have much more plugins. We have more than 100 plugins that are with nice shortcuts with language extension. Please open our GitHub page and check our plugins list. But now we have a very difficult question. I show you that Post-SS is much smarter than SAS. Post-SS can do much more than SAS. But if it can be faster because it is very difficult to have a faster tool to do more things. Especially when you have a Lipsass written on C++. Can we compare it with performance with Lipsass? The answer is yes. Post-SS written on JavaScript is three times faster than Lipsass. It happens not because JavaScript is some good language. It is only because it is a great example of benefits of modularity. When we have a small plugins or when we have a modular architecture, it is very easy to find some slowest part of our project. It is very easy to optimize it. Because you can just test your plugins one by one and find the slowest one. This is why Post-SS is faster. It is benchmark. You can read the code on this link. We have a bootstrap CSS with 100 mixings, with 100 variables, with 100 nesting rules. And this is the result of processing this CSS. So what is the benefits of Post-SS? Why Post-SS really works? What is the real result of Post-SS? Of course we have modular design and performance. But it is not really important. The main idea of Post-SS the main benefits of Post-SS is that Post-SS can do much more. With Post-SS you will have completely different developing process. Because we opened completely new tasks for you. But I lie to you. The topic title is that Post-SS is the future. But Post-SS is the present. We have more than one half million downloads per month from NPM by NPM statistics. We have many great users. For example, Paul Irish told me Google used Post-SS with Afterprefixer. WordPress used Afterprefixer and RTL-CSS plugins. Taobao it is the biggest China e-commerce. They not just use Post-SS they write many new plugins. And my favorite example is Twitter. Twitter has no preprocessors at all. They don't use only post-processors. They use Rework right now and they are in the middle of migration to Post-SS. And Post-SS became a trend. For example, I just wrote a nice article how Post-SS will save us from dark side of preprocessors. Ben Freit, the author of Sus for Designers, wrote a good article about his migration to Post-SS. My bootstrap team now has plans to migrate to Post-SS. So, what you need to do at this weekend? First, if you have some idea of the SS tool you need to think about writing it in Post-SS. For example, the author of The Lost Grid System he has a lot of grid realization for Sus and less for stylus. He immigrated to Post-SS and he was very happy because if you write a mixing library you need to write mixing library separated to Sus, separated to less users, separated to stylus users. But if you write a Post-SS tool it will be you can use it with any preprocessors like after-prefixer. You just put it after the preprocessor compilation step. If you have a project without any Post-SS plugins you must go to home and add after-prefixer plugin. There is a many reason why you need to use after-prefixer but I think the main reason is that Google recommends only after-prefixer as a tool to handle your prefixes. It's a really only good way to work with prefixes right now. If you have a project already with some Post-SS plugins like after-prefixer you need I think you should look at other Post-SS plugins because we have really crazy ideas, we have really nice solutions. I think SSNex is a good plugin to start. And if you start new projects and only if you start a new project try to think about Post-SS only solution because Twitter has it. They are very happy. Not because Post-SS not because pre-processors are bad. Pre-processors are good things but our IT is not about code. Our IT is about keeping things simple. It's about simplicity. And one tool is always simpler than two tools. So if you start a new project Post-SS can handle simple variables too. Think about use Post-SS only solution. And that's all. This is our URL, our projects on GitHub. This is a URL for this canals Twitter for Post-SS please follow. That's all. Do you have time to questions? Nope.