Change the slides.
Magic.
So we have Pablo from Tenpot, talking about Tenpot 2.
It's here.
It's here.
So excited, so excited to be the last talk of the day.
Also, there's some nice free chocolate.
Not called to action yet.
Just free chocolate there so that on your way we exit.
But we will have a bit of a birthday party here with all of you.
Because we're turning four today.
So yeah, we have some waffle here from Brussels instead of a paella from Spain probably,
that way we're using.
But basically it's very important, very exciting.
Every time we come to Fosn, I think my first Fosn was 2005, 2006.
But it was only four years ago, 2020, that we announced this was going to happen.
So every year we come here and say this is something new,
and then we have Alfa and then Beta and then 1.0 and then 2.0.
So very exciting.
So I'm going to take a bit more water because of the excitement.
So we're going to discuss PEMPO 2.0 and then it's time to meet Hanson Demo.
We'll see how it goes, the staging server, and the Wi-Fi.
So for those of you who might not know about this PEMPO,
PEMPO is this open source design platform for design and collaboration, code collaboration.
And we like to discuss, and this is very, very relevant for the open source design track,
design and code collaboration.
Perfect talk by Ariel, perfect takeaway also for PEMPO 2.0.
So we believe we bring design freedom for our product teams,
and we do so in various ways.
The fact that PEMPO is open source, definitely a key ingredient.
It gives you privacy, security and customization.
You can hack it, you can do it whatever you want.
You can use cloud, you can self-host it.
We are pro open standards, so that means everything is SVG and CSS native.
We make sure that we're not creating yet another proprietary format.
We want to have this sustainable design and sustainable collaboration with code.
And we do believe that it's important that whatever tool we build
has to bring something that was not present in existing design and prototyping tools in the past,
which was this collaboration between designers and developers.
It was felt similarly as some good tools or code tools that are not welcoming to designers.
Similarly, design tools, design prototyping tools were not welcoming developers.
So what if we fix that?
That was the whole idea behind Gradient PEMPO.
The next generation of design tools should be about collaborating design code.
So this is like the basic intro on PEMPO.
But we are here to discuss PEMPO 2.0.
This is a major release.
You could call it PEMPO 2.0 or PEMPO 10.0,
because it's just a massive change in just one year.
So we're going to cover UI redesign.
We're very proud of that.
The new component system, wonderful new inheritance and overriding and all that stuff.
CSS read layout and some of the stuff.
So let's see how PEMPO 2.0 UI redesign looks like.
Like this.
No, that was 0.2.
But that was only four years, five years ago.
It is elegant.
It is simple.
Why frame me?
Of course, the reference.
Anyone gets the reference of the picture?
No? Willow? Willow fans?
No?
Ah, I said, ah, Willow fans.
Yeah, that's my age.
And so, no, this is PEMPO 2.0.
Look at this.
It's very fancy, right?
I would like to have the light steam, you know,
but perhaps at this time that would not be smart for me to ask.
This is just wonderful.
I mean, this is just a design that is being created with a beautiful interface.
Because open source and, you know, beautiful go along.
What was behind this, the whole UI redesign?
Well, this is a design tool, design prototyping tool.
It has to be interactive, it has to be real time collaboration,
it has to be multiplayer, and it's a productivity tool after all.
So we needed to reduce the cognitive load.
So, it's so tempting to make many things be achieved differently.
So, in terms of real estate and how you would achieve things,
goals, we reduce the cognitive load through heretics and through research,
and just intuition sometimes.
By the way, the picture you are looking at is a portion of our design system,
which is completely available.
I will show it now in a minute.
We also improve accessibility.
We, strong believers in accessibility should be a de facto standard
for everything we do.
It is absolutely challenging to include all accessibility in a design
and prototyping tool, since it is very visual and it's very a complex tool
and has a lot of micro interactions, and we already discussed cognitive load.
But we try our best for the size of the team that we are,
you know, just 15 people in the broad team.
And still, we do want to pursue that.
So, major work here was color, of course, and typography and size
and relative shapes and that.
So, pretty basic, but still, I think, worthwhile.
We will continue to do that.
Of course, you should be able to use Pemport to design accessible UIs.
But here we are discussing Pemport itself as an accessible tool.
And I think it is beautiful.
I really honestly think it is beautiful.
Probably one of the best, most beautiful open source tools,
but also one of the most beautiful tools.
Okay.
I think it's also, sometimes it's just about pride.
And why not, right?
So, here we are showing just like a crop.
We are going to see just the theming, dark theme, light theme.
As in case you are, you know, you are fans of one or the other.
It's not important what we are showing,
it's just so that you can see how different Pemport looks now
that we have support for both dark and light themes.
And of course, you could create your own theme,
whether it's corporate theme or just some other theme,
because now we have the possibility of having n themes.
We just created the two most common, okay?
Before I go into that, why did, what?
Okay, that's probably, okay.
So, is it, yeah.
So, here, that's for later.
So, you can actually enjoy our design system as a library, if you want.
I mean, this was meant to develop our own UI,
but if you like it so much that you would like it to inspire your UI, why not?
So, we have many libraries and templates available,
thanks to our great community that, you know, continues to provide amazing stuff for everyone to reuse.
This also will be available, and I think it's pretty cool.
So, it follows the typical design system pattern, so, and all that.
So, we use that, okay?
Yeah, okay.
New component system.
This was, a ton of requests, basically, had the underlying theme of new component system.
For those of you who are not familiar, basically, it is now a thing in design,
I mean, not now, but like now in the past few years,
to make everything highly reusable.
Similarly, as we developers have thought about how to code.
And so, we actually, part of this design work has borrowed terminology and abstraction.
Abstractions from the code and engineering world into design, because it works.
Design is also a science, and so, it is easy to borrow those concepts.
The, what we wanted was to make it easier for everyone to build, like, the main components,
like the original elements that are like the ideas, like the ideas of the components,
and then very easily track the copies of those ideas.
Pembot 1.x did not have this metaphor.
It was much more abstract, and you had some trouble finding where the ideal component,
or the master component, the parent component was.
Now, it has a kind of physical representation, sorry, not physical, but, you know, what I mean.
And it is easier to track those components, the main version, and then follow their copies.
And that comes with all sort of very cool ideas about inheritance, overriding, overloading,
and also using a copy to reset the ideal.
If you are so happy with a copy that you think every other copy should now follow this copy.
The way you do that is that you basically reset the main component through that copy.
So, by the way, Riz of Hans, who here is a developer?
Okay.
And who here is a designer, or does the design?
Okay.
Both.
Both, both.
Yeah, yeah, yeah.
The question is, not exclusively.
So, then I have a call for action for you developers in the room.
The proprietary design tools are coming for you.
They're coming for you because you represent ten times, well, here, much more,
but you represent ten times the market size of the designer world.
So, it's now obvious for the proprietary design tools,
design proprietary tools that you are the next in line for milking, being milked.
I hope you have strong opinions about that.
Also, the updating workflow is now much obvious what's going on.
The synchronization, and we'll show, I hope we'll be able to show that during the demo, is obvious.
I mean, when you are synchronizing things that are there, right there, simultaneously,
that is very obvious, but also, and I don't think I'll have the time to show this during the demo,
when things are synchronized behind the scenes, okay?
You get notifications, updates, you can decide to dismiss some synchronization,
and perhaps later on, now is the good time.
So, that has been improved.
And then we also have new capabilities, very obvious ones, very tangible ones.
Annotation, which is, okay, I'm going to document this component,
whether it's the main component or the copy of that component,
but also the swapping, the quick stopping.
Because when you have everything as a component, you sometimes want to swap that component for another one
that is also capable of taking the role of that component within that context, okay?
So, here's a very simple example where you have the main component,
that's a very simple landing page.
The main component is the one top left, right?
You know that because it has a specific legend on top, so it's very easy to spot.
And then the rest are copies, and the synchronization is instantaneous.
This is really like capturing what someone is doing on Pembroke campus.
This is a very simple example, of course, but it's good for animator GIF on a presentation here, okay?
So far so good, right?
Yeah, yeah.
This is a component swap, and I was discussing a minute ago.
So, here we go from image gallery to image gallery, but with title and description.
So, basically, someone decided to have different components that could fit into, in this case, this is an app.
Looks like an app.
But what if I try this, or perhaps in a different context, I want to show different stuff.
For whatever reasons, you should be able to have your components easily be swapped.
And, of course, this is easy to navigate.
Here you can see, you pay close attention.
You see there's the content.
The content is basically an arbitrary categorization that the designer or the user used.
But you can then go back one level and find everything in your component library.
This was just to show just a small list, okay?
Very good.
And, wow, we have CSS Grid Layout, or CSS Grid CSS Layout.
Not Grid Layout, because Grid Layout, of course, we had that from probably 0.2.
Grid Layout is the print media standard of columns and rows.
This is the CSS.
Why is this so important?
Because this delivers on a promise.
We said if we really want to unite designers and developers around one language,
what if we're able to bring the code language, the expressiveness of the cloud-tip programming,
that is, in CSS, natively into building a design, without using the code, just using a user interface.
Okay?
See some people saying, aha.
So this is a complex theme.
Probably it would deserve its own, I wouldn't say, Fawcett and Track, but perhaps a talk,
which is the cloud-tip programming, the cloud-tip design.
So this is about if you want to read more on this, just stick with the cloud-tip design.
And the cloud-tip versus imperative is about expressing rules to get to a point,
but not exactly how I get to the point.
And CSS is perfect about that.
Because the browser understands the rules, tries to get to a goal their way.
So when you're designing for the real world, one could argue that imperative design is problematic.
It's not fluid.
It's not reactive.
It is limited.
But the cloud-tip design is able to be okay with a fluid world uncertainty.
And CSS embodies that very keenly, finally, after the specs of CSS Grids or Grids CSS
layout came in 2019.
So it's very recent.
And for an open standard, that's very recent.
So we started with FlexLayout, which is about alignment that was present earlier in Pempot.
So Flex is about one-dimensional alignment.
But Grids is about bi-dimensional.
So with both, and you can combine them the way you want, you have almost total freedom.
You can do all sorts of compositions.
You know, Flex, Grids, and you can nest them the way you want.
And Pempot was able to build that natively.
For the first time ever for any design tool, we decided to trust the code standard
instead of creating our own interpretation of how design should be created with new vocabulary
and terminology.
So this is very opinionated software building here.
So here you are seeing edits in a grid, again, cropped and very simplistic for the sake of,
and you can see where, if you're familiar with CSS, you're basically seeing CSS visually.
And you can see how the code next to the UI is automatically being updated
because it's synchronized by design in a way.
We actually started with the code, created the user interface, and it is trivial for us to impact the code.
This code is part of the Pempot's user interface.
You can go to inspect code and you can see that.
I just pasted there, you know, synchronously.
So it gives Pempot users the possibility of the CloudTip design, which is amazing.
And all those YouTube tutorials about you designers you know about CSS,
this is the code tutorial you, it's easy for you.
You just follow this code.
No need for that anymore because you can just use your visual language,
knowing that it is expressed as code instantly.
So I would rather, I mean, I would like to ask for a round of applause for the team to get us to this point.
Demo time.
So this is, I hope you can see it, yes.
So this is a very simple design.
I'm going to just select this and make it like this.
So this is a, I mean, don't pay, this is a bento design, it's trendy, that's not important.
So this is a grid.
I'm going to actually edit it.
And I'm going to just go and add a column to the right.
Okay.
So notice that we are using FR units by default.
You could use whatever you can do.
Go out, auto, pixel, doesn't matter.
It's fine if it's like this.
And by the way, I forgot to duplicate this file, so I'm messing with someone else as by now.
We have a limited undo.
So, yeah.
And then what I want is to pick this one, this element, and I'll just put it here.
It automatically understands this lot.
This one, I'm going to do something different because I'm going to create a component out of this, so Ctrl K.
And I'm going to duplicate this component, so Ctrl D.
Now I have a copy and I'm in Components.
You can see that, sorry if you cannot see it very precisely, but there are different legends there on my console.
So what I'm going to do is I'm going to just move it here.
And you notice it doesn't react really to the fact that there is more space available.
And this is a reactive design, so I want to do that.
So that's easy.
I just select it.
This is a copy.
And I can go here and just...
No, no, no.
This is not going to happen to this demo.
Okay.
Just one, just a mouse.
Just a mouse.
And I'm using a trackball.
It should be easy.
It's great that I feel the...
Everybody stop breathing.
Okay.
This is a certain level, you know, whatever, precision.
So here I will go for just use the space you have.
Okay.
Totally...
But notice, notice, there's more, there's more.
Notice that the main component did not react because I overrided, I overwrote this attribute, which is fine.
But if I go to the main component and change, perhaps let's go for something silly as the fill here.
Okay.
And I changed that, then the main copy does react.
This is the synchronization that I was talking about.
So I'm going to use something like this, I don't know.
That's it.
There's more.
Because...
And this is something that happens a lot.
I go to the copy here.
You can, of course, navigate all this, but if I go and select button and I change the fill, yeah, like this, let's say, something like that.
And now we all praise to the demo gods, okay?
I can decide, okay, I like it so much that I'm going to update the main component.
Okay.
And I update, and that happened.
And now the main component, if had all the copies across not only this file, but elsewhere, if I use this as a library, would have the notification that that main component has changed.
Do you want to apply those changes to your copies?
This is very nice, right?
And so to finish, because I know I'm out of time, one last thing.
I have here a code pen.
I always like to end with something like this outside pen pod.
So I can take this, I can go to inspect, I can go to code.
All this is there for you to enjoy, to fund, everything.
So I'm going to copy the CSS and just copy this, okay?
It's going to take a while because there's a lot of images that depend on the Wi-Fi.
We now have HTML on top of SVG, so you pick what you want.
We don't care, you know.
It's everything is, as long as it opens up, that's fine.
We copy that.
So what this is doing is, since we are, if we are telling the truth,
you should be seeing, the moment it downloads all those base 64 encoded pictures,
the design, let's see.
Yeah, that's what I'm trying.
I have Wi-Fi, it works.
Yeah, this is, well, I'll send you a link.
But basically, this is basically what you need.
You need the HTML, the CSS, and it's built exactly to your, to the perfect standards.
Because nothing I did was not possible using the CSS expressiveness.
So there's no way you're going to mess it.
It is one-to-one perfect match.
So that lost in translation, that back and forth issues that typically designers and developers,
you know, express that they're having, very frustrating, doesn't happen with Pembot.
And of course, this is real tank collaboration.
I'm just single player mode here.
But so, so quickly to finish, we saw the UI design, new components, this is right now.
We have some other cool stuff going on.
And the question is, when Pablo, when do I get Pembot to buy it all?
It's coming, it's coming.
Wouldn't it be nice if we had it today?
We have a staging server.
If anyone interested, come to any of the Pembot team members.
We can give you the security URL, which is basically quite simple.
And you can try it out.
But it's in the next few weeks, basically.
So we're aiming for February.
So it's still forced in month.
And so very, very soon.
So thank you a lot, the team, the community, and everyone.
You can find more stuff there.
Thank you everyone for staying up to now.
And I hope you enjoy all the work that came from Pembot to Bueno.
And now, before we leave, or where all the track ends, anyone has a lighter?
I do not have a lighter.
So.
May I steal the light?
Yes.
You didn't sing happy birthday?
Yeah.
Okay.
Hello.
How's it going?
Oh, yeah.
All right.
So it's so exciting.
This is our event.
It's basically how we were born.
So it's very exciting to do this.
So I wish everyone wishes something nice for their open source project for Pembot,
for Foslan, for the community.
So it is like this.
Yeah!
Take it.
It is chocolate.
It is chocolate from Pembot.
Thank you very much.
Thank you.