Post CSS era
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Subtitle |
| |
| Title of Series | ||
| Number of Parts | 133 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/48831 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
NDC London 201673 / 133
2
6
10
12
15
17
23
24
28
30
31
32
35
36
39
40
43
44
45
47
51
52
55
58
59
60
61
62
63
64
67
69
71
73
74
75
82
84
86
87
97
103
107
108
111
112
114
115
117
120
123
126
128
129
132
133
00:00
Cross-site scriptingSoftware developerPresentation of a groupMultiplication signInternetworkingInformation technology consultingSkeleton (computer programming)Computer architectureJSONXMLUMLComputer animation
01:07
Software developerCodeFluid staticsContent (media)WebsiteProjective planeConnectivity (graph theory)BlogMeeting/InterviewComputer animation
02:04
Software developerMultiplication signSource codeWritingComputer animationLecture/Conference
02:48
Software developerFunction (mathematics)Multiplication signState of matterUniform resource locatorFunctional (mathematics)Logical constantProgramming languageOcean currentWebsiteFormal languageStatement (computer science)Metropolitan area networkQuery languageReal numberComputer animation
03:42
Inheritance (object-oriented programming)Software developerCross-site scriptingInheritance (object-oriented programming)Multiplication signMoment (mathematics)Source codePosition operatorStatement (computer science)Line (geometry)MathematicsPreprocessorSoftware as a serviceGraph coloringComputer animation
04:38
Power (physics)Software developerBlock (periodic table)Solid geometryUniform resource locatorExtension (kinesiology)Source codeMixed realityRule of inferenceAbstractionMoment (mathematics)Block (periodic table)Direction (geometry)Social classFormal languageSummierbarkeitElectric generatorStatement (computer science)Computer animation
05:33
Software developerContent (media)Product (business)outputDecision tree learningWeb pageContent (media)Rule of inferencePermianPresentation of a groupSystem callOrder (biology)Greatest elementMultiplication signLink (knot theory)Reading (process)Data storage deviceSource codeComputer animation
06:31
Link (knot theory)Software developerWebsiteMultiplication signLatent heatRule of inferenceSocial classPower (physics)PreprocessorComputer animation
07:29
Software developerKeyboard shortcutSoftware frameworkSocial classSoftware frameworkVariable (mathematics)Computer animation
08:15
Software developerCross-site scriptingAcoustic shadowEuclidean vectorData managementSource codeForcing (mathematics)MereologyAcoustic shadowWeb 2.0Connectivity (graph theory)Metropolitan area networkProcess (computing)Bit rateData managementPreprocessorComputer animation
09:12
Software developerWeb 2.0Front and back endsObservational studyPresentation of a groupService (economics)User interfaceRipping
10:01
Cross-site scriptingOrder (biology)Data managementSoftware developerUser interfaceComponent-based software engineeringCodeMultilaterationUser interfaceLink (knot theory)Latent heatData managementOrder (biology)Greatest elementConnectivity (graph theory)CodeCategory of beingBlock (periodic table)outputMenu (computing)Element (mathematics)Bounded variationComputer animation
12:09
Software developerBlock (periodic table)Bounded variationBlock (periodic table)Element (mathematics)Mathematical singularityForcing (mathematics)Endliche ModelltheorieComputer animation
13:01
Software developerBlock (periodic table)Euclidean vectorRandelemente-MethodeConnectivity (graph theory)Block (periodic table)User interfaceInterface (computing)Computer iconBounded variationQuicksortLeakComputer animation
13:43
Cross-site scriptingOrder (biology)Data managementMaizeSoftware developerSocial classObject modelBootstrap aggregatingCodeRule of inferenceNamespaceQuicksortMultiplication signTwitterLatent heatRandelemente-MethodeOrder (biology)Ocean currentSoftware bugObject (grammar)SpacetimeGodComputer animation
15:13
Software developerElement (mathematics)Block (periodic table)Randelemente-MethodeCodeMultiplication signPunched cardSocial classQuicksortBlock (periodic table)Form (programming)Rule of inferenceComputer animationMeeting/Interview
16:20
Software developerRootQuery languageHypermediaAlpha (investment)Category of beingGraph coloringFunctional (mathematics)Connectivity (graph theory)QuicksortLatent heatMoment (mathematics)MathematicsGroup actionSign (mathematics)Web pageMixed realityKey (cryptography)Projective planeReal numberWordRootVarianceParameter (computer programming)CalculusWeb browserAxiom of choiceClique-widthHypermediaQuery languageVariable (mathematics)Doubling the cubeSingle-precision floating-point formatComputer animation
19:24
Function (mathematics)Software developerAbstract syntax treeMathematicsRule of inferenceObject (grammar)Heegaard splittingFamilyNetwork topologyProjective planeMultiplication signEvoluteAbstract syntax treeFunctional (mathematics)Information systemsWritingWeb browserExtension (kinesiology)Graph coloringComputer animation
21:54
Software developerMathematicsProjective planeProcess (computing)Computer animation
22:33
Abstract syntax treeSoftware developerMathematical optimizationPreprocessorProcess (computing)LogarithmFunction (mathematics)Process (computing)MultilaterationMixed realityBit ratePixelPlug-in (computing)Execution unitFunctional (mathematics)PlanningResultantDeclarative programmingComputer animationLecture/Conference
24:01
Software developerPhysical systemMultiplication signProcess (computing)Data structureSinc functionCore dumpPlug-in (computing)TunisComputer animationLecture/Conference
25:09
RootClique-widthSoftware developerHypermediaMultiplication signPhysical systemHypermediaWebsiteOrder (biology)Computer animation
25:49
Cross-site scriptingSoftware developerMenu (computing)Nim-SpielPositional notationComputer fontPointer (computer programming)Category of beingGraph coloringHypermediaSoftware as a serviceCalculusMathematicsComputer fontImplementationSign (mathematics)Social classFunctional (mathematics)Alpha (investment)Focus (optics)Web browserTransformation (genetics)Real numberNumberStatement (computer science)FamilyCuboidSystem callAdditionMereologyResultantComputer animation
28:22
RootClique-widthHypermediaSoftware developerCloud computingComputer networkTwitterPlug-in (computing)Software as a serviceProjective planeMultiplication signProcess (computing)BlogComputer animationSource codeMeeting/Interview
29:01
Software developerComputer networkScalar fieldTwitterHypermediaCross-site scriptingProcess (computing)Moment (mathematics)Boss CorporationSource codePhysicistCoprocessorPreprocessorWebsiteCodeGoodness of fitMultiplication signRule of inferenceSource codeMeeting/InterviewComputer animation
29:57
Software developerLocation-based serviceCross-site scriptingTime evolutionCloud computingMIDIMoment of inertiaMenu (computing)Rule of inferenceProjective planeGoodness of fitExtension (kinesiology)Line (geometry)Computer fileProcess (computing)Right angleComputer animationDiagram
30:46
Cloud computingSoftware maintenanceLatent heatFormal languageSoftware developerTime evolutionCross-site scriptingPredictabilityCloud computingSoftware maintenanceData managementTask (computing)Online helpForcing (mathematics)Process (computing)Multiplication signComputer animation
31:31
Software developerCore dumpMultiplication signTask (computing)Computer fileComputer animationLecture/Conference
32:10
Software developerScripting languageJava appletPhysical systemMultiplication signComputer fileLatent heatRevision controlWorkstation <Musikinstrument>Computer animation
33:09
Scripting languageJava appletSoftware developerCompilerVenn diagramCompilerProcess (computing)PlanningForm (programming)Plug-in (computing)Tracing (software)Multiplication signECosPhysical systemComputer animation
33:48
Software developerCompilerFunction (mathematics)outputCross-site scriptingCompilation albumCompilerProcess (computing)Projective planeMoment (mathematics)Error messageInformation systemsComputer animation
34:58
Software developerServer (computing)Uniform resource locatorElectronic data interchangeData managementError messageProcess (computing)CuboidConfiguration spacePlug-in (computing)Computer animationMeeting/Interview
35:43
Software developerData managementScripting languageService (economics)Error messageCompilerComputer animation
36:38
Fiber bundleSoftware developerFiber bundlePlug-in (computing)Boilerplate (text)InternetworkingOnline helpComputer animation
37:27
Software developerWebsiteMobile appSoftware repositoryTwitterBoilerplate (text)Wave packetMultiplication signTraffic reportingWeb pageSingle-precision floating-point formatWordCartesian coordinate systemWebsitePlug-in (computing)Computer animation
38:22
Software developerModule (mathematics)Database normalizationCross-site scriptingElement (mathematics)Line (geometry)Set (mathematics)Endliche ModelltheorieContent (media)Module (mathematics)Object (grammar)Social classCoalitionRevision controlScripting languageRow (database)Electric generatorComputer animationLecture/ConferenceMeeting/Interview
39:35
CodeObject (grammar)Software developerCross-site scriptingData managementOrder (biology)Web-DesignerWeb 2.0AuthorizationAndroid (robot)Machine codeUser interfaceWritingQuicksortoutputNormal (geometry)Line (geometry)Uniform resource locatorInterface (computing)Computer animation
41:30
CAN busView (database)Software developerBuildingComputer fontDokumentvorlageComputer-generated imageryClique-widthMobile appLine (geometry)RippingEndliche ModelltheorieCodeProjective planeWritingWeb applicationWebsiteMachine codeComputer animation
42:18
DokumentvorlageComputer-generated imageryClique-widthSoftware developerMobile appLine (geometry)RippingWeb 2.0Cartesian coordinate systemGraphical user interfaceMereologyRule of inferenceFacebookProjective planeRoutingMarginal distributionImplementationGraph coloringComputer animation
43:02
Context awarenessHypermediaQuery languageRandelemente-MethodeModul <Datentyp>Cross-site scriptingSoftware developerArtistic renderingAxiom of choicePixelVideo gameProjective planeAxiom of choicePhysical system1 (number)WebsiteMixed realityBoss CorporationGodServer (computing)Cartesian coordinate systemQuicksortTransformation (genetics)Process (computing)Context awarenessPlug-in (computing)Computer clusterLine (geometry)Interface (computing)Mobile appMultiplication sign4 (number)CausalityCodeRight angleEndliche ModelltheorieArithmetic meanGroup actionRandelemente-MethodeUser interfaceHypermediaQuery languageState of matterNetwork topologyTask (computing)InternetworkingSource codeSoftware bugWeb browserComputer animation
48:43
Software developerPresentation of a groupComputer fileFormal languageMultiplication signFormal grammarHypermediaColor confinementComputer clusterComputer animation
50:45
Software developer
Transcript: English(auto-generated)
00:06
Hi, everyone. I'm going to talk to you about CSS. So the name of the presentation. But there is a lot of stuff in it.
00:22
I'm going to present myself real quick. So I'm MOOCs on the internet. If you don't have noticed yet, I'm not English. I'm French. That's why I have this accent. I'm a front-end developer, available as a freelance consultant.
00:43
So that's how I live. I start up most of the time to create, implement their architecture, the skeleton, to start with, you know, a good base that my face on internet.
01:09
But if you know me, nobody know me here? Maybe not? OK. So that's some project I did in the past.
01:24
We talk here about CSS Next sometimes. But there is, like I said, a lot of other stuff. There is a French website, the first one, where I share some, you know, experiences. It's like a blog, but we're many writer on it.
01:43
We're starting to write some English content. And there is another project, which is Statinamic. It's like a static website generator, but to make dynamic website with a React component. Just take a look if you're curious.
02:01
And I share a lot of other stuff on GitHub. So if you're here, maybe it's because you think CSS is awesome. But at the same time, you already get this feeling when you were playing with CSS. This famous GIF is nice.
02:24
And so I'm going to talk here about some CSS issues before introducing some solution. So we're going to talk about writing CSS in 2005 to 2010.
02:44
So most people, you know, felt like this when you have to write CSS back in time. So why CSS wasn't fun? We got no variable, nothing, no constant.
03:01
We got no real function. You know, there is URL that can be a function, but not really like in programming language. About the reusability, it was pretty, you know, weird. We might have import statement,
03:22
but with the current state of HTTP, which is 1, even if the HTTP 2 is coming, it won't solve all the issue we can have with, you know, lots of queries for websites. So that's not a real solution for reusability.
03:43
About inheritance and composition, we have just, you know, nothing right now at this moment. So we have CSS preprocessor. The first time you start to, you know, play with it, you are like, yeah, that's awesome.
04:00
I can inline import statement. That's cool, kind of. You are viable, yeah. So you can do math, and you can do some color manipulation. Not really standard, but you have this. You have SaaS that came in 2006.
04:22
Last was like 2008 or 2009, I can't remember, and still is 2010. So we still have some, you know, issues with CSS preprocessor. You know the sentence, it's with, you know, great tool.
04:44
You have a lot of shit that can come in. So I will talk about this real quick. Make sense? The problem of abstraction, it's when you have some CSS. CSS is a really simple language, but it can be, you know, hard to debug.
05:03
And if you have, you know, like this class, and you want to know what happened, you have an abstraction with a mix and block, and you are trying to redefine a rule. You are trying to define, or not redefine,
05:21
but you are redefining something. So you got a problem here. You also have extend statement, which is, you know, kind of cool, but at the moment you have, like, you are looking at the source code, you are generating, you are generating like this kind of content.
05:44
So that's kind of weird to have, you know, like a lot of problem. As you can see, there is sometimes some link. So when I will share the presentation, you will be able to read this, and I encourage you to read the link I've put at the bottom.
06:04
So that's what I call some cascading shit, because when you have extend, you are extending rules that are defined earlier, but, you know, you are maybe extending this at the bottom
06:21
of your store sheet, and you might have a problem because of the order when you are defining some, you know, rules. You may have some issue with nesting that you have in a preprocessor,
06:40
because if we assume that the first selector is generated by a preprocessor or made by hand, and there is a newbie in the team that wants to, you know, just add a new rule, so we create a class sidebar link, and you want to, you know, define something,
07:03
and maybe he can try a lot of time, you know, because he can't, you know, make powerful, a specificity that is higher than the previous selector, so he will use important.
07:22
That's not cool. That's called specificity shit. So now a lot of people will tell you that's kind of a PEPCA issue, because we are doing this, it's not the tool, it's what we do with it.
07:44
Ah, frameworks. I hate frameworks. I don't know you, but personally I hate them, and CSS is the worst thing ever, because, you know, every selector is a global selector,
08:03
so it's like global variable or anything, so it's, yeah, no. When we do some JavaScript, we avoid global stuff, so with CSS, you have just that. Scoping, yeah, that's the fun part.
08:20
So we have Web Components and Shadow DOM that are supposed to help us, or the CSS scoping. I will, you know, try to show you, so that's the Shadow DOM support. Pretty bad. And the scoped CSS, pretty bad.
08:49
So we can't, you know, we can't use this yet. It's not great. And dependency management in CSS, nothing, just nothing. So CSS itself or preprocessor
09:04
are not solving most of our daily problem, and we can say that CSS sucks. It sucks so bad that, you know, most people wear T-shirts with CSS sucks.
09:20
I didn't have this one, but I already saw people with it. It's an actual T-shirt I saw on a web shop. So here I used this at the beginning of the presentation, but for me, as a front-end web developer,
09:41
I don't really like to write CSS. I like to style stuff, because styling is fun, you know. I like to draw things, so I like to create a user interface, but I don't really like CSS.
10:02
There is a lot of talk right now about why CSS sucks. There is a link at the bottom about a talk about CSS in JavaScript. I encourage you to read this, but I will talk later about that.
10:24
So here is just a recap about the CSS issue I mentioned. So everything is global, that sucks. Order specificity is difficult to handle. We have too many unpredictable things, because you don't really know how is it done
10:45
and how your selector are going to affect the DOM. We have just nothing for scoping or isolating components, and we don't have dependency management.
11:03
So we are going to talk about the origin of most CSS issues. If we look at this snippet, most problems come from here. Yeah, because property and values are not really the issue.
11:26
So we have a problem here. It's for joke later. So like I said, a user interface is just a bunch of components. We have buttons, we have inputs, we have menu, etc.
11:46
Why don't we cut our user interface this way? If we take this code again, we can use BEM to make simple selector.
12:08
Here is an example. There is a good post about a lot of BEM variations you can find. So what is BEM? BEM is just block element modifier.
12:22
It's like a convention. There is a tool to use it, but it can be boring to use them. So since it's a simple convention, you can use it without any tool to set up or anything.
12:42
Here is an example. You can define a block. You can use a modifier. You can have children for this block, so elements. And you can also have a modifier for the element of your block.
13:01
So block is just a component for your user interface. This example is pretty cool. It's pretty simple. You get a button. You can have a variation of this button, like the large button. You can have an icon in it.
13:21
And you can have a small icon, depending on where you use your button. So here is the usage in HTML. So you use your button. You might use some modifier. You add them. You can have an icon and some text.
13:44
So with BEM, you can have, you know, it's a sort of workaround about the issue I mentioned here, because you will see later an example. But with BEM, you can just prefix your custom selector,
14:02
your selector, with, you know, like a prefix for your company or anything. Like, you know, Twitter Bootstrap might use something like TWT in order to prevent some, you know, issues with the global thing. You have namespace.
14:22
For the specificity, you don't have specificity issue, because you just have, you know, one class. Every time you use one class, nothing else. Just one class, one class. A selector is just one class. It's, you know, it makes it easier to debug, and everything is simple this way.
14:43
So you have less unpredictable things, because your selector is simple. And deleting some code is, you know, pretty easy, because when you don't have some generated rules that depend on the document object modeling.
15:00
So it's better. It's not the solution, but yeah, it's better. So when you, you know, understand this and practice BEM like a lot, you will take a look at your previous code and you're probably going to punch yourself in the face.
15:22
Why I didn't do that, you know, like before? That's so simple. I punched my face multiple times. My two cents. It's that when you use BEM, you define just one block per DOM element.
15:43
Don't try to mix, you know, like different classes, just classes with modifier. Don't try to compose, you know, like sort of composition with BEM. You will have more issues and you will benefit from, you won't benefit from anything.
16:03
Just this rule is stupid, but it worked. So now you can tell me, you can ask me. So with BEM, what is missing? I will stop about BEM for now and CSS issues and I will show you some of the stuff
16:25
because, you know, there is a working group and that is working, I hope. And they made stuff, you know. CSS is kind of the same thing like for 10 years, but we have new things that are, you know,
16:43
you are going to be able to use them in one year, two years maybe, you'll see. Custom properties. Who knows this kind of syntax? Nobody? Okay, that's cool. So it's sort of variable.
17:03
I say sort of because, you know, you define with double dash because single dash is used for a vendor prefix. So they make this choice. I guess it was a hard one. So you define like in the root component.
17:22
Root is just HTML when you are in a web page. And you can use it with var function and now you can recycle the calc function because you can do some math, some math rather than custom properties.
17:40
So you have, you know, dynamic values. So that's cool. Something better. Custom media queries. You can define using add custom media. You define a keyword with double dash, yeah. And you might notice the super sign.
18:05
You can mix, you can use range, a value, width or height, and another value. That's new but that will work in browser because it's a specification now. And you can use it with a keyword in parenthesis.
18:23
So it's pretty simple. Let's avoid, you know, having to define SAS mixing just for this. You have a lot of color function because there is now like four or five new function for color.
18:47
There is the color function which is named color. You can with this color use some modifier on the color like tint, saturation, alpha, lightness, blackness, darkness.
19:03
I think it's better than lighten or darken which is kind of weird but you also have the gray function just to define a gray. The second parameter is an alpha value.
19:21
So that's it for the color. There is a lot of new stuff I will show you in a moment. But you also have new selectors that are coming, custom selectors. You will see them later. You have new color function that I don't show you.
19:41
And there is nesting, native nesting in browser. And even extent that is coming. There is spec for this, yeah. So prep is over. This is mostly syntax sugar, so it's just sugar, you know. And like one year, I think.
20:04
No, in 2013, there is a project called Myth which call himself as a CSS polyfill but it's not really a polyfill because it's not executed during the writing time in the browser. So it's not really a polyfill but we can call it that.
20:24
Like that. Myth was using rework. Who knows rework? Nobody. Someone knows post TSS maybe? Yeah, one. Okay. So someone, the creator of Stills created rework
20:44
which is just an engine. So it works this way. You take some CSS. You parse it as an IST. IST is like just an object, okay. Abstract syntax tree.
21:00
So you have a tree of node in JavaScript. And you can, you know, work on your AST, make some changes, add some values, some rules, et cetera. And you can just stringify it to CSS again. That's how was created AutoPrefixer.
21:21
Who knows AutoPrefixer? Nobody? Yeah, a few. So, you know, when you use this tool you can just forget a vendor prefix like WebKit, Moz, et cetera. It's very cool to use and, you know, I didn't even write a prefix for two or three years now.
21:45
There is a bat. The evolution of rework was not really great. We can see this on GitHub. You can notice this person here.
22:02
This was, it was a creator of AutoPrefixer but he wasn't really happy because rework wasn't really open to, you know, a lot of change. So he was not happy. And he say, I'm going to do it my way.
22:21
So he kind of forked rework. He forked the ID but didn't forked the project. And that's how we got PosteSS. So PosteSS is like the same thing. You still work on the same way. And you have a nice API to, you know, iterate some things.
22:44
I will show you this later. PosteSS is not a preprocessor. It doesn't handle further syntax or it's not an optimizer, it's not a linter. But PosteSS can do all of this with just plugins.
23:02
So it's like magic. So how can I use it? So you use, you take PosteSS, you take some plugins, you plug them, you process some CSS and you got a result, so new CSS.
23:21
Here is an example of a plugin. You have a function. You just define a function. There is a better way to define a PosteSS plugin but it does this. So you can work on a declaration, for example. You can work on any nodes. You have a lot of, you know, method to iterate on the AST.
23:51
And this plugin just, you know, replace ARAM units by pixels unit. It's pretty simple to write.
24:03
So PosteSS has a great ecosystem because there is like, I don't know, 200 plugins already. But at the same time, it's like there is too many. There is some weird plugin, like Grunt.
24:26
There is a lot of stuff. I worked on those to handle further syntax that we already see as a spec. So I make a tool that I call CSS Next,
24:42
which is now just, now it's a PosteSS plugin. Just before it was a real tool with an API, but since PosteSS is, you know, is more famous than this one, I just, you know, restricted the core to be a PosteSS plugin
25:04
because a lot of people are using PosteSS directly these days. So CSS Next can handle all the things I show you earlier with sometimes some restriction, but you will get warning.
25:22
We'll take a look at the website. So here is an example of custom selector. For example, you can define your own heading selector and use it later. And you can now, you can even nest media queries. So you can nest custom media queries in your own selector.
25:45
We can take a look because there is a lot of stuff. So we have custom properties limited to root here. Maybe I can make this bigger.
26:03
We have calc that is, that might be, you know, reduced. When you define, like, font size, you want to make some math. And this will be transformed to, you know, simple stuff for old browser.
26:22
You have the support of custom media queries. The custom media arranger I mentioned before. I think you can even write this just in one single run thing, but I don't remember really. There is too many stuff.
26:40
Custom selector here. For example, you can define a button with the button tag on the class. And you can, you know, define a selector for hover and focus as well. And now you can use this, your custom selector here.
27:00
And you can make this. You have nesting. There is some variation. You can make direct nesting with the sign you use in SaaS. You can make more complicated nesting with atnest statement. And you can, like, nest media here.
27:26
You have color function. New function. U whiteness and blackness to define color. The gray function. You can even now define R G B A color for real.
27:42
But it's kind of free to define the alpha with just, you know, an exact number. You can do it. You have some fallbacks. You can use font variant property, which is very easier to write, to use than the font feature setting, which is kind of weird.
28:03
And there is fallback. You can also use this. Well, there is a lot. There is a lot. Too many. But you can use this today. And when browser will implement this, SaaS next will stop to do the transformation.
28:20
That's the good part, I think. It's like auto prefixer. You use vendor prefix. You don't care about vendor prefix, really. You just want a feature. So you write it. Auto prefixer under the prefix. And SaaS next does the same for, you know, more syntax sugar. By the way, SaaS next has auto prefixer in it.
28:43
So you can use this plugin. At the same time, there is people that are working on a prosthesis to bring, you know, a SaaS-like syntax. And they were on the channel. I remember, like, how can we call this plugin?
29:03
Sassy prosthesis, et cetera. At this moment, some people were saying that past CSS is not really a past processor. There was a debate on past processor, preprocessor. So I, you know, use this ID, pre-CSS.
29:25
Everybody laugh and they decide to use it. Well, you can do that. I don't use it, but you can do it. At the same time, you also have a linter, style lint. Who lint your JavaScript or your code?
29:44
Yeah, that's good. You can do the same now with style lint. It's a modern CSS linter, but past CSS you got already, like, I think 100 rules.
30:01
This project is just a few months old, but there is, like, too many rules. You see? That's good. That's good. So, meanwhile, that's how CSS Proposals are evolving.
30:24
The problem is it sucks, because you can't even, you know, inline a CSS file using Sass. If you want a reset or normalize, that's just, you know, raw CSS. You can do that right now in Sass. It sucks. You can inline.
30:42
You need to rename the file, the extension. It's pretty bad. And, you know, every Sass user probably know Chris Abstain. It's a Sass maintainer. And he used, like, PostSS last week. He wrote his first plugin,
31:02
because he wanted to do something that he can't do with Sass. Here is my prediction for a CSS Proprocessor. We'll see. So, I'm going now to talk about something else, which is asset management.
31:23
So, there is Grunt and Gulp. Who uses something like Grunt or Gulp? Okay. So, Task Runners, Broccoli, like, there is too many. And each time we have to add something to our process,
31:41
we're like, okay, let's make another task for that. Like, there is another app, a task. Okay, so here is an example of some Grunt file and some definition. There is, like, too many. That's a real example of what I found. I just used a huge gun file and found that on GitHub.
32:07
So, it was, like, plugged in like this in Grunt. Well, that's kind of weird. My advice is use Gulp, because it avoids you to write too many times through the file system, and it's really faster than Grunt.
32:23
But, well, I recommend Gulp, but I don't even use Gulp myself. Meanwhile, in JavaScript, it's interesting now to see that JavaScript is evolving as well. Somebody know, maybe, ES6?
32:41
No. So, it's a new specification that you can use in most browsers, but there is some piece you can use, some piece you cannot. It has been renamed like this. It's kind of weird, but you will have a new version each year now.
33:00
So, there was a tool called 6.0.5, which has been renamed to Babel. Babel.js. We define itself as a JavaScript compiler, and it's like Post.js. You know, it transforms something old to something new. You have, like, future syntax support.
33:23
You can use, you can trace form React.jsX. Somebody know React, maybe, here? Okay. And it's pluggable, so you can use your plugin. For a moment, Babel was like a single package,
33:41
but recently they explode their ecosystem to, you know, like, a ton of package. Like, there is a lot too. You can see here some transform ES2015. There is a lot for this, and there is a lot for other stuff.
34:02
So, now we are going to make a recap. We have compilers like Babel and Post.css. You take something, you change it, and you get some new things. You can use this for CSS, JavaScript, and you even have now MD-IST,
34:24
which is the name of the project, which can help you to get an IST for some markdown, and now you can put with new markdown or HTML as well. So, how should we use this?
34:45
Should we use Grunt or Gulp? I'm going to show this, you know. You all got this moment where, where is my asset? And you are not going to get this error directly in your face
35:04
with Grunt or Gulp because you don't have error management. So, I have a trick. My advice is use Webpack. There is, you know, like many tools. Recently, I even saw a post yesterday about somebody
35:20
who was complaining about the fact that there is too many tools that just do nothing out of the box. Like, Webpack Post.css doesn't do anything if you use any plugin with it, but it's like Grunt or Gulp. If you don't use plugin, there is nothing. So, you need to handle the configuration
35:43
Webpack is like this. You require some JavaScript and you can require anything like a CSS, an SVG. You have JavaScript here and below it some CSS.
36:05
The really interesting thing is that if your path is not correct, if your asset is not at the place you think it is, you will have error management. Like, the compiler will blow in your face an error.
36:26
Like, this asset doesn't exist, so you don't have a mysterious error that you can track really. You can get error directly during the compiling step. So, Webpack is, you create a bundle,
36:44
you take some JavaScript in the first place and you use Loader, which are just like plugins. You have a compiler, same thing. So, here is Webpack, JavaScript, your thing.
37:02
You get a bundle. You will find a lot of boilerplate because that helps you to set up the tool. When you don't know the tool, you don't want to read the doc because if there is like five new tools, too many docs to read.
37:26
So, you can go on internet and find, you will see like a million of boilerplate. That might afraid you, but there is a good boilerplate
37:41
you can find on using GitHub Trending repo. Use GitHub Trending repo and you will find the most heard repo on GitHub. So, you will have something accurate and that might help you.
38:01
So, this work for application, you know, like single page application or website. It's the same thing. I used WordPress like the last month to make a WordPress plugin to avoid, you know, to handle error.
38:23
So, here is a snippet again. I'm not sure you have noticed this line, which is kind of weird to, you know, require some CSS to get some content.
38:45
So, here is a trick. It's called CSS modules and it helps. Here is a BEM selector with a prefix for the company, for example.
39:01
And CSS module is just killing this port. So, you can just, you know, use a really simple selector. Now you require your CSS. You get a simple object with a generated class name.
39:21
This avoid, you know, conflicts. And you can use it. Here is a line of React JSX, but you can use it in a raw JavaScript. So, with this, we can say that we call just simple objects with style, you know, decoration and values.
39:47
So, yeah, that's what we want in the first place. We want to style your own user interface. So, why not even inline style?
40:01
This might seem like, you know, crazy, like a lot, but using inline style sort of, you know, fix all the issues we mentioned before. I can show you an example, React Native Web.
40:25
So, it's kind of weird because there is React for the web. There is React Native to write native application for iOS or Android. And now we get React Native for the web.
40:41
Whoa! I want to highlight the author of this package, which is the author of normalize.css. Who uses normalize.css? Okay. Everybody.
41:00
So, this person was not a web developer in the first place, but when he, you know, got into this, he got a lot of crazy idea. But all this idea, well, we're just, you know, here are two before we start to use it.
41:25
I'm not sure my sentence was correct, but maybe you understand me. Here is an example of some React code. We don't really care about this because it's kind of weird. We can just, you know, notice this part, the style,
41:43
and you use it like for the CSS model. So, later on your code, you can define a still sheet, which is, you know, like simple CSS like this.
42:02
That's kind of cool. So, that might not be relevant for all project, but style can be used to write React Native application as well. You can use this syntax here to write website style,
42:20
web application, or even React Native application. That's the cool part. Facebook implemented like a project they called CSS layout, which is a re-implementation of Chrome engine for CSS, but for React Native.
42:44
So, you can use some rules like margin, height, width, flex, flexbox, color, font-waist, etc. So, you can style your native application with this. That's, I think, interesting.
43:01
So, now, I said and mentioned a lot of things. You're probably like, wow, I'm not sure, but. So, today, if you have to write something or, you know,
43:20
take a legacy project and use new stuff I mentioned, you can start with adding post CSS. Maybe if you have just auto-profixer, you have a gold task for your source steel sheet, you can add auto-profixer and you're already using post CSS.
43:40
It's simple and you will remove like a ton of code by doing this. I have a friend which was using like, how was it called? It was a mix-in to handle ARAM to PIXEL for, you know, all browser.
44:05
Internet Explorer 8 and there were, in his teams, they were using this plug-in like in, I don't know, everywhere. There were ARAM units, they were using this mix-in to handle the PIXEL transformation.
44:24
So, when he started to use post CSS with a plug-in that replace, that add PIXEL's values as well as ARAM units, like removed, I don't know, 1000 lines of code by adding just, you know, like tree line.
44:49
That was something pretty cool. So, you can add easily post CSS with some plug-in and you can use BEM or CSS model depending on your stack
45:02
and the time you have to, you know, set up the things. So, with this, you will have custom syntax, new syntax, future-proof syntax eventually with auto-profixer and CSS Next. You can still handle media queries because with inline style,
45:25
it's not easy to define state and media queries. It's kind of a problem but there is some way to handle things but it's not really easy.
45:41
So, if you have some server-side rendering, I will advise you to use this stack right now and if you are in a really dynamic context like an application, you can use inline style that will make your code, you know,
46:04
compatible with React Native and you will have a lot of flexibility because you can generate in JavaScript some rules and value, etc. So, the stack with post CSS can kind of solve some issues
46:28
but this can be used today and gradually. So, you can just add auto-profixers and add post CSS with some plug-ins. Then, at the same time, you can start to use BEM now.
46:44
You can do this, it's just a convention and later you can decide to remove some code and use CSS model which is safer than BEM. Besides that, your inline style can solve all major CSS issues
47:01
but the pre-rendering is not really good but you can use this kind of today because you can switch or you can mix because there is some package that allows you to use CSS
47:25
to transform CSS to, you know, JavaScript for React Native. So, there's a package for that and you can also transform JavaScript style to some CSS. So, you can go back, you can change the way you use this.
47:46
There is even more package on GitHub or NPM to handle this kind of weird transformation but it might be relevant in some place. So, my advice is just adjust your choice depending on your need
48:05
and your current stack because we can just say, hey boss, I'm going to ditch everything and set up a new stack that's just awesome because end users don't care about that. When you make your own application,
48:21
end users just want a user interface. So, you can bring and add something for you to deliver some feature or some bug fix more quickly so we can add this for you because it's for you, it's not for the end user. You don't care about that.
48:44
Do you got any question? You can go. There is not a lot of people so I'm sure you can, all of you can ask one or two questions.
49:02
Did you, I have one. Did you understand me like for 80%? Because that's the first time I'm doing a presentation in English so that's my question. I did a lightning talk in five minutes but it was weird.
49:21
You have any question? Yeah? Okay. Yeah.
49:44
Are you asking me if you can use CSS with less? Okay, just CSS. Yes, so you use CSS files and, you know,
50:00
most syntax highlighter in your text editor, we handle basic things like nested media queries. It, you know, it doesn't add anything special to the language grammar so you can use like just CSS files. Excuse me?
50:21
Yeah, yeah, yeah. We'll already, I think, we'll already have both steps. It's not, that's not gonna stop. Another one? Please don't be shy.
50:45
Thank you.