Functional CSS yesterday

Your CSS can already be just* as functional as JavaScript. It is pure, can be immutable, and can be reasoned about.

If you start thinking about CSS in the same terms that other languages use, they can use their paradigms to learn your language.

And when you start using their tooling, they’ll be running out of excuses to not embrace Specificity.

(*Well, as functional as some JavaScript 😀 )

(happy intro music plays) – [Presenter] Welcome everybody.

Today, we’re gonna look at Functional CSS Yesterday. I’d like to make the distinction that we’re not talking about what can happen with CSS. I’m gonna be talking about how our current tools will allow us to write functional CSS today. And I had a look around the room before, I’m pretty sure that there aren’t that many functional programmers in the room, so I’m not that concerned about having glasses thrown at me. But still this next slide will be very helpful, and that’s CSS isn’t a functional language. OK, I know its ground breaking, but that doesn’t mean we can’t take the attitude of functional programmers and be able to speak with them in terms they understand, which will help that process of elevating CSS from a tool to a language of its own.

We have a CSS, the potential to have a fantastic tool. Not only can it do simple layouts and take us from no grids through tables all the through to our current implementations.

We can of course get brilliant things with the new technologies, so every part of that clock is made with CSS.

The chrome is made with CSS, its not an image. The animation is done with CSS.

If you notice the minute hand, its also moving around the clock.

And if we could make the thing sit here long enough we could see the hour hand move around as well. I may keep going, because if I talk long enough, you’ll find the problem with CSS in things like this, and that’s that, if you’ve got any idea about state, so it goes back on it, so we can’t load the clock. I was thinking maybe I could set up a clock so that it would run roughly two minutes thirty-five, and I could pretend that is was actually working properly, but its not.

Has no state.

Does a great job, and we should harness the things that it can do very well and try to overcome some of the detractors from our language.

But, it is a brilliant language, but, it doesn’t do things by itself.

It needs a helping hand, and that helping hand has been around for a number of years now and that’s in pre-compiler.

The attitudes from a functional programmer start to definitely manifest in using a pre-processor for our code. And more and more we’re seeing new features coming out. We’re now getting variables and custom features which are allowing us to actually get more and more functional style into our code as well. Its ironic I think that even though JavaScript beat CSS out of the blocks, CSS had a better attitude toward updating quickly.

So, Javascript was released in 95′.

It took until 2001, when Ajax did its trick and there was a pivotal change in our perception of Javascript.

And it grew from being a toy language to being a serious contender.

CSS conversely came out in 1996.

When it came out, they iterated from version one, version two, version three.

They stopped coming out in versions and they’re now coming out in specs, but we haven’t had yet any technology which has created the age apps-like response. We’re still coming to terms with the fact that browser manufacturers don’t necessarily give our CSS language the creativeness that we hoped it would. And, a lot of the things that people talk about, when they talk about detractions from CSS, come about because of the browser manufacturers unfortunately. The fact that it takes years for a specification to be available in all the browsers. The fact that we saw so much red entries in that last presentation.

Its down to the the browser manufacturers.

Its not CSS’s fault that we can’t do wonderful things. The browser manufacturers won’t give us the toys to play with.

That playing field is being levelled, we’re now getting more and more compliance. We’re getting green fields technology which is working. And all that’s going to allow us to come to an inescapable truth, and that’s that CSS is awesome. Everyone in this room knows this slide.

(audience laughs) But I think that, as he was speaking about the last presentation, what we’ve got is the potential to take it on differently.

There’s two ways to look at it.

Nobody gives a shit.

Or nobody gives a shit, we can do what we want. Its fantastic.

(audience laughs) Cause CSS is awesome, its inescapable.

We’ve got browser manufacturers who aren’t necessarily helping us.

And to an extent, another of our detractors is the design community itself, when they don’t necessarily come to terms with what we’re trying to do for them in a browser. The square that CSS is awesomely trying to break out of, isn’t even a square.

Its actually really difficult to get CSS to do that design which you see so easily in print.

Photoshop loves doing it, the CSS you do has to be involved with ridiculous magic numbers which we should never put into our code.

Let’s not do magic numbers, let’s get a magic system and have our CSS being the champion that it can be. So, rather than going, CSS is awesome.

CSS is awesome.

We should do that, definitely.

So what’ve we got? CSS is awesome, that’s right.

But as I said, it isn’t functional.

Well, okay let’s see how it works.

Let’s try to imagine a functional language. Let’s talk about some of the properties a functional language might have.

One thing it will have is first class functions. These are functions that are able to be applied through variables and they give credence to the functions themselves to the point where every other object in the language that we’re working with has the same sorta level of honour. There’s also higher order functions.

These are functions which will either take a function as a perimeter or return a function from within itself. We can look at imperative code.

Imperative code is where the language itself has an understanding about what its trying to do and it will give you features without having you go through declaring every step of the process to get a function to perform.

And then there’s determinism, so deterministic code you probably have heard it come through your developer friends as reasoning.

They want a reason about what is gonna happen. They want to know before they go into a process, what’s gonna happen on the other side of their function, put a value in, expect a value out.

And then another thing which we can look at is immutable. Lots of functional language is likely immutable but its very difficult to do that without having a mutable start base.

So, we’ve got these four different processes, first class functions, higher order functions, imperative code, and deterministic code.

I want you to close your eyes and imagine a language you know of, and we all know it. That fits those four parameters.

Did you think of CSS? [Laughter] – [Speaker] Well it is, and look it’s even doing one of those nice clipping like we were talking about before. That’s CSS can make gold lettering for us on the internet. As long as you’ve got the right browser, or the right attitude.

[Laughter] – [Speaker] CSS’s problem then isn’t so much its capability.

It’s the perception of that problem.

If functional developers knew, that we knew what they’re talking about.

And we knew what they were talking about.

And we knew they knew what they were talking about. And they knew that we knew, that they knew that we were talking about.

We’d all be happy friends.

However, we’ve still got a problem with perception. Is this a straight line? Or is it a circle from very very close? Or is it actually a globe? We seem to have some troubles at the minute with perceptions of whether not the globes are round or flat all things. Uh, so it’s understandable see us having trouble. You might see up in the very top corner there, there is some check boxes.

That animation we just did then is based purely on CSS.

The circle that you saw, which was a straight line is a 60 thousand pixel wide circle.

Which goes roughly flat the further away you go. I used sibling selectors in CSS and a human being controls the state and the animation occurs.

Change the check boxes you’ve got turned on you get a different output.

We need to be able to fall in love with the tool we’ve got.

So that we delight in at ourselves and then we can delight our users as well.

We need to change the way that CSS is percepted. Or percepted, that’s not even a word.

Perceived, let’s try that on instead.

I’m not an American, for goodness sake.

We’ve already spoken about, Sorry.

[Laughter] We’ve already spoken about how wonderful CSS can be. With a small amount of curb we’ve seen that the new variables can be directed with the Java script. So we can actually set the first time that the clock will start from.

I can just run as a clock.

Java script libraries love the idea that we take ownership of our functionality.

And that we provide our users with animation from our CSS.

Rather then making the browser do it through is quite capable, but beleaguered java script managing. This sort of process, everyone has seen this in gmail.

Uh, and wait for it.

There we go.

A little bit of show at the end there.

That’s pure CSS.

Everything you do to be distracted while they’re trying to load gmail for you in the background. It’s just a CSS animation.

Now, we could have a debate about whether or not having a loading animation, which is just a non-interactive CSS function going off.

We can have that later.

But it’s a great way to use your tools to make a great user experience.

One of the other things that I’ve often heard spoken about by naleal developers and backhand types especially is why can’t CSS vertically and horizontally centre things in the middle of the page.

I think that, apart from this slide, I’ve never ever had cause to make a production site which had all the content horizontally and vertically centred on the page.

[Laughter] – [Speaker] Why was the thing they hooked on? I don’t understand.

I think it’s just because they knew it was something which was difficult for us to do.

We could easily centre things horizontally. But that vertical centering was a bugbear to us. Until the browsers came out last year and started to support flex box and away we go. We now have both calc functions and have custom properties.

So the variable in the bottom is a custom property. So what we are actually doing in our root selector there, is we are setting a variable and we’re applying the value of a function to the variable.

And then down in our side, in our decoration, we are actually taking a function and applying it as the parameter to another function.

That’s what I was talking about first.

That’s the ability of a functional programing language to differentiate it’s self from other languages. We have the capacity to be functional programmes. We just need to learn how to talk about it in the environments where all of the functional programmers are hanging out.

We can do our deterministic code, We can make sure that the classes that we have applied a style that are focused.

So that we can apply them to an element, and not have side effects.

Or mutations going on.

We can do it already, this a piece of tachyon. It might not be a library you are hoping to use but that process of taking the time to make the selectors you need to give yourself a greater amount of surety that what you apply to an element is the only thing that’s going to happen to it. Getting toward a functional way of thinking in your web.

Again down in the bottom we’ve got some variables, there applied as arguments to another method. So we’ve got methods, inside methods.

And by using those within the bounds of our media inquires, we can change or flexbox process so that rather than having the apparent two by two columns, we can offer that and have one by four.

So, the amount of control we have over the web will become scarily become limitless very soon. We’ll have no reason for our applications not to be fantastic and delightful opportunities. Rather than just a table with a image in it, holding it open to make sure the layout was what the art director wanted.

So we are back to so, so what have we got? We have got a language which is, has first class functions.

It has higher order functions.

It has an imperative attitude and it is deterministic. We don’t have monads, uh we [Laughter] – [Speaker] Yeah. Um, unless you get really loose with terminology.

But let’s not that far.

We don’t have a mutable code, because by our nature being in the browser we’re of open to opportunity. We can’t guarantee that the code won’t change. But we can take on the attitude of the majority of the process that’s owned by functional programmers and assure them that our code is going to create products that they can trust as well.

We need to look at our CSS and apply through our CSS some methodology’s.

We might apply Bim technology to it.

We might try some tachyons, maybe not.

We should always opt for an idiomatic code solution where we can.

Even if you’re only idiomatic amongst your own team. The capacity for your code to look like one developer has written it, means that every developer working on that code will be more productive, straight away.

We can look at processing some of our CSS, getting some functions coming through.

Uh, getting some mixed things happening.

Changing the way we think about how we build our code together allows us to get more towards a componer based architecture in our CSS, which is a again, something our programme medic detractors are focusing on.

We need to not endure the package process.

We need to take the tools that the programme is using, and turn them back on them.

Because we understand them better then they do. Make sure you’ve got your code sitting in the structures that you want.

Rather than having something forced upon you. Own the package system, don’t just get it thrust upon you.

And if you can’t get something done through java script or CSS or sorry, not just with java script.

So CSS or pre compiled code, potentially you’ve got another avenue open to in a JSS.

It will really allow a detractor in your team to be open to you using a more programmatic approach when, if they’re saying that it’s impossible for you to tear down your monolithic CSS star sheets because you don’t know what’s going to happen from one with page 34.

Applied the thinking from a reactor, and get a component based architecture in your star sheets. Actually if you don’t have a pre compiled code you can still use the pre-componer based architecture from CSS itself.

You don’t need to have all of your CSS stuck in a directory called CSS.

You can put your CSS in small snippets inside all the directors with your components and just call them and or include them in your page. In the same way that we would do it through react and through JSS, uh sorry.

Through Java script and CSS.

Don’t just use your editor to make a flat image.

Make use of every tool you’ve got in the airsoft. Get dynamic code coming through.

With doing prototypes, don’t just put the same thing stamped on a page three times.

Don’t have a single length heading that’s going to come through.

Every developer knows that as soon as they put it in the real world, that it will break.

Employ the technology’s that these tools have got now. Embrace the developer side of our nature.

Get a Jason Donovan coming into your sketch file and come out with the way that when people are looking at your prototypes that they’re seeing the possibility and not the restrictions straight away.

This thing.

Embrace the command line.

It really is your friend.

It’s a little bit scary, they still have a lot of trouble with the fact that whatever you read about it they’ll pre-pend a loan with a dollar.

If you copy the entire line and put it into the command line, it barfs Let’s take away the dollar.

We own the way that the code is being displayed on the page.

Work with our more assured friends.

Give them a solution in the UI that believes they can easily cut and paste from their documents, into their interface and have a great experience.

And lastly, wow.

I’ve trunneled through this at a great rate of knots.

Lastly, designed systems.

Don’t just expect that there are things that other people can have.

Your team can work with a design system.

There are so many great examples out there. Don’t scare your developers by having them trying to imagine what’s going to happen when they make a change to your website.

Employ a design system which will allow them to try things out.

You can see what’s going to happen in your interface well before it hits the prime time.

And we are going to do, we are going to put all of those features all the way into our CSS.

And come out with a tool set that allows us to get inspiration as well.

And put that back in there.

And we’ll have find that CSS isn’t functional, potentially. However, functionally it’s functional.

[Laughter] – [Speaker] Thank you very much.

[Applause] [Upbeat Music]