Theming Plone-React
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 |
| |
| Title of Series | ||
| Number of Parts | 53 | |
| Author | ||
| License | CC Attribution 3.0 Germany: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/54870 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
Plone Conference 201820 / 53
2
3
11
12
13
16
19
20
21
24
34
35
37
38
39
40
42
50
52
00:00
Computer iconPresentation of a groupDigital photographyLecture/Conference
00:55
Observational studyCASE <Informatik>Library (computing)Mobile appFront and back endsMedical imagingView (database)1 (number)Computer animation
02:13
Front and back endsRight angleRevision controlImplementationPlanningProof theoryContext awarenessXMLUML
03:19
Bootstrap aggregatingQuery languageMereologyEndliche ModelltheorieSemantics (computer science)PhysicalismUniform resource locatorObject (grammar)ImplementationRight angleComputer engineeringSoftware framework
05:50
ArchitectureSemantics (computer science)Software frameworkComputer architectureConnectivity (graph theory)
06:46
Evolutionarily stable strategyModul <Datentyp>Element (mathematics)PlastikkarteMenu (computing)Division (mathematics)EmailBootingComputer-generated imageryoutputModal logicComputer iconMessage passingConnectivity (graph theory)View (database)Shape (magazine)WebsiteSemantics (computer science)Sheaf (mathematics)Closed setTerm (mathematics)Revision controlMoment (mathematics)Cloud computing1 (number)View (database)Module (mathematics)Element (mathematics)BuildingWebsiteBlock (periodic table)Connectivity (graph theory)Graph (mathematics)XMLUML
09:18
CodeMobile appRight angleComputer animationSource code
10:09
PlastikkarteWebsiteVoltmeterView (database)Web pageElement (mathematics)Configuration spacePoint (geometry)Reduction of orderDirectory serviceData structureGroup actionGeneric programmingView (database)Mobile appBlock (periodic table)Element (mathematics)Decision tree learningConnectivity (graph theory)Logical constantComputer animation
11:24
Euclidean vectorVariable (mathematics)Connectivity (graph theory)Variable (mathematics)MereologyPoint (geometry)CountingClient (computing)Computer fileDigital photographyComputer animation
12:23
Convex hullLogical constantMaxima and minimaDefault (computer science)Connectivity (graph theory)Router (computing)SimulationWebsiteElement (mathematics)Web pagePoint (geometry)Computer fileClient (computing)Moment (mathematics)BitComputer animation
12:58
Computer iconoutputWebsiteDivision (mathematics)FlagEmailComputer-generated imageryConfiguration spaceBitStructural loadStandard deviationMessage passingMappingAreaSlide ruleComputer-assisted translationConnectivity (graph theory)Configuration spaceDefault (computer science)Semantics (computer science)Different (Kate Ryan album)Right angleSource codeXML
15:01
Default (computer science)MathematicsInternet service providerModul <Datentyp>Router (computing)Database normalizationWindows PhoneGraph (mathematics)Web browserCubeView (database)Module (mathematics)Configuration spaceLarge eddy simulationDigital photographyDemosceneMorley's categoricity theoremWebsiteConnectivity (graph theory)Type theoryComputer animation
15:39
Configuration spaceWebsiteMaxima and minimaDefault (computer science)WebsiteConfiguration spaceDifferent (Kate Ryan album)Computer fontPoint (geometry)Moment (mathematics)Right angleXML
16:32
MereologyBlock (periodic table)BuildingDefault (computer science)BitSemantics (computer science)Point (geometry)Right angleMultiplication sign
17:37
Element (mathematics)Division (mathematics)FlagComputer iconoutputWebsiteConfiguration spaceWeb pageTrailThumbnailInverse problemGreatest elementLink (knot theory)WebsiteSource codeConnectivity (graph theory)Right angleDefault (computer science)Semantics (computer science)Computer animation
18:21
Computer fontClique-widthGraph (mathematics)SmoothingEmailLocation-based serviceLarge eddy simulationDefault (computer science)Semantics (computer science)Function (mathematics)Building
19:18
Default (computer science)Source codeComputer fileFunction (mathematics)CodeVariable (mathematics)AreaRight angleWebsiteXMLUML
20:19
Windows PhoneLine (geometry)Module (mathematics)Variable (mathematics)Graph (mathematics)Web browserDatabase normalizationComputer fontLatin squareGUI widgetWeb pageLeakMassModulo (jargon)View (database)Electronic visual displayBlock (periodic table)PlastikkarteComputer fileDefault (computer science)Variable (mathematics)Function (mathematics)1 (number)DampingComputer fontGraph (mathematics)WebsiteDirection (geometry)Graph coloringForm (programming)EmailGoogolCache (computing)Right angleProgram flowchartComputer animation
22:29
Variable (mathematics)Default (computer science)Simultaneous localization and mappingIntegrated development environmentSemantics (computer science)Default (computer science)Extension (kinesiology)Projective planeRight angleGame controllerFunction (mathematics)Variable (mathematics)Direction (geometry)Category of beingPoint (geometry)Local ringInformationSpring (hydrology)Goodness of fitGraph (mathematics)Online helpProper mapComputer configurationComputer fileComputer animation
26:03
Component-based software engineeringPlane (geometry)12 (number)Element (mathematics)FlagEmailDivision (mathematics)BootingComputer iconComputer-generated imageryPhotographic mosaicElectronic visual displayAbsolute valueSolid geometryGame theoryModulo (jargon)Semantics (computer science)System callComputer fileWebsiteDirectory serviceFunction (mathematics)Configuration spaceVariable (mathematics)Theory of everythingMorley's categoricity theoremSet (mathematics)Barrelled spaceDefault (computer science)Graph (mathematics)Mobile appCodeNetwork topologyComputer animationXML
27:56
Event horizonWebsiteLarge eddy simulationGraphical user interfaceElectronic data interchangeBasis <Mathematik>EmailGraph (mathematics)WhiteboardRegular graphConvex hullMobile appAngleComponent-based software engineeringMenu (computing)Computer fontComputer fileProcess (computing)WebsiteSemantics (computer science)BootingLocal ringDirectory serviceComputer font1 (number)Open setGraph (mathematics)Software bugMobile appSource codeComputer animation
30:08
Component-based software engineeringConfiguration spaceContent (media)Computer fileCross-site scriptingVariable (mathematics)Element (mathematics)PrototypeConnectivity (graph theory)Point (geometry)Client (computing)Barrelled spaceSemantics (computer science)INTEGRALVariable (mathematics)Function (mathematics)Type theoryStructural loadQuicksortComputer fileResultantSelectivity (electronic)Right angleSystem callHoaxResolvent formalismDrop (liquid)BitDataflowSpiralMixed realityMiniDiscProgram flowchartXML
34:06
Standard deviationConfiguration spaceWordBitStructural loadRule of inferenceDeclarative programmingPlug-in (computing)Computer fileConfiguration spaceComputer fontSocial classIntrusion detection systemBootstrap aggregatingGraph (mathematics)PreprocessorProjective planeStandard deviationCloud computing
36:07
Descriptive statisticsPlastikkarteConnectivity (graph theory)Computer fontVariable (mathematics)Semantics (computer science)Point (geometry)Software developerElectronic mailing listSinc functionBootstrap aggregatingIntrusion detection systemSoftware frameworkMultiplication signGraph (mathematics)MereologyDecision tree learningRight angleBarrelled spaceVideo projectorFrame problem
39:01
Video gameMultiplication signSemantics (computer science)Web pageConnectivity (graph theory)PlanningReduction of orderPrototypeGroup actionElectronic program guideDescriptive statisticsSoftware testingVoltmeterWebsiteObservational study
42:05
Mathematics
Transcript: English(auto-generated)
00:00
Well, welcome to my talk. Thanks for coming Yeah, we're going to start All the photos that will you will see except one it were taken by me in my previous stay in Japan eight years ago in my honeymoon and Others in during this one as well. So yeah after these
00:24
This presentation I will rather star so you all know that we are no longer from react we are Volto And yeah, and this is a preliminary icon. You already might have seen it
00:41
in some presentations made by the almighty Albert Casado And Yeah Let's let's start. Yeah, you probably have been in the other talks that I have that we already made we
01:06
The next don't miss the next ones, especially Yeah, the new leisure and we will explain one of the main Tooling that we have right now in the Volto ecosystems. We just create a Volto app
01:21
Which we will show in in a minute. So the idea is that Blown love react right but not only react we love also blown I'm sorry angular and view and whatever finger that comes out in the next 10 minutes So yeah, and it's not about a pillow fight. This is the only image that is not mine, right?
01:44
Yeah, and But who cares? I mean the idea is that we have a Strong community lovely people there and we are not going to fight. Everybody is doing great things and It's not the thing to stop in Volto we
02:02
Really have to continue this effort on front-end developing in all the other possible ways and And yeah, so loves blown loves modern front-end like all of them
02:20
But both especially Right, and this is another version That will provide us with the logo the colorful one. I love this this one, especially Yeah Let's talk also about person a guy UI person UI was another
02:40
Concept that was developed also by Albert and the first implementation that we had was was done in in the last one conference in fact and was On angular Later on we started to implement it in in November
03:01
last year in plan react itself in the the proof of context concept that was already done by Rob and We decided it. I Will not show anything from personality. I already know all about it, but We started to implement it on the top of semantic UI
03:25
Semantic UI is yet another CSS framework, right and we choose that we choose it because very Specific reasons that I will I will go over them in the next slide and first of all because there's a
03:41
already an implementation Of semantic UI on the top of react which is called react semantic UI You have the URLs here from both things. So we have four or four one One part the semantic UI itself, which is kind of bootstrap causing causing we
04:01
Could say which is implanted the all the JavaScript that is done there is done with a G query Allah bootstrap, okay, but but the we have a Good react implementation of everything that semantic UI is brings you and you can find it here in react
04:21
That's semantic UI calm and we're using that for implementing pasta Naga on Volto one of the main things that semantic UI is endorsing is one thing that Frederick Brooks that was a it is still because he's still alive is a
04:43
X computer engineer architect from IBM. He designed a lot of things that did a lot of Books, one of them is the design of design and is one thing that is called progressive truthfulness. So I have my cheat sheet here
05:01
The idea is that progressive truthfulness is there is the best way to implement Models of physical objects is to start with a model that is fully detailed but only resembles like the final thing but it's fully detailed already so what you do is
05:25
Incrementally do steps for reach what you want in the end But starting with this thing that is fully detailed and has everything that you will need in the last one but only resembles and it's kind of there, but it's not fully there and
05:43
And that's important in semantic UI because it's the whole foundation of it We'll see it later How it does Semantic UI endorsed to that Why semantic react semantic UI the before?
06:01
mainly because of the components architecture which matches directly to react all say and Not only react of course to other major frameworks so You it is divided in a lot of small pieces, which each piece is a component and you can You have a lot of flexibility on
06:22
Customizing those components and also you can extend them and The most important feature feature there is seeming and we will know why in a while He it has it sports a very very good and I never seen something like this in the
06:41
Industry like the like like the one that semantic you I have and we will see it in a way so Semantic UI is built on less So yeah, not sass, sorry You have to deal with it Pillow fight. Yeah, I love sass. I mean I'm also was disappointing when I knew that
07:06
But the things the In fact the building blocks that made this make the seeming possible is is it just cannot be done with sass at this moment and We'll see them as well. What what is exactly what sass lacks and
07:25
For for as far as I can I as far as I know It's no way that sass is going to do that in the short term So we will have a version of semantic UI insights anytime soon, but it's very not I mean both things are
07:41
Close. We already have less implode And it's not that bad I mean, yeah, of course as is quicker because of Lisa leaves us and everything but So we have components in semantic UI we have a full site
08:03
CSS that is applied first. So things are applied first the blue The blue section then the other ones from left to right, right? So It is they are applying a CSS cascade mood and We have the site CSS and then the reset all the other way around
08:25
But yeah, yeah, you know you you know the the idea then then the Elements and the components are all these ones Available already in semantic UI and are applying these in this particular order
08:44
So are divided into elements into collections Modules and views and you you already can have a good Idea of what is come of what semantic UI is composed by Those are building blocks that we can use already in Volto
09:04
There are semantic UI Components you can reuse and extend and You also have the Volto one. So so you can build your own side with all of them And we in fact build Volto on them as well So, okay. Yeah fine, but show me right? I mean
09:24
Let's see some code so we have Volto app which I don't want to spoil things but This is something that you do about launching the create react app
09:41
Please go to the English talk and he will teach you about about that as well. And then you only have to do to specify your That's very thin I want to show much much console thing is but but you only have to
10:03
Provide your your Here and then it will create some something like like this, right which you will have The structure generic structure that we will need for for our app. So we will have
10:22
Actions components constants customizations Helpers reducers when you can here put all of your custom elements like that then What we interest us in this talk is the theme the theme directory
10:44
We will come soon to this theme config which is very important in the in the semantic configuration and is one of the entry points, but the main thing that I want to show here is How semantic UI is composed of so it's to see for you to see
11:01
these Themes Sorry these blocks that are made that make semantic that you can see here and There for example the views you have the cart view the common the feet Okay, we'll come to that later
11:26
So after these which which is the component anatomy The component anatomy it comes of three parts each of one component that you already seen is the less variables The vase styles definition and the react component itself. So we have these three things
11:46
available and That we can we should replicate if we create new components as well and we have a main entry point for all these so we have to tell webpack if You have any knowledge of that, but we have to tell well webpack where is our
12:07
Less files and this is entry point that we have for Volto to look into that and start loading things and this is located here in at blown Volto star client
12:22
Which we can see in the Volto Client or js not here here here. You can see the entry point Okay, this instructs webpack to load this less file and then pull over all the all the
12:45
theming Engine and everything else, right How what? Yeah, we have it here and we'll look into that in a moment And it looks a bit like this, right? It's standard import or less imports definitions and loads the
13:11
The the small pieces that would you already saw in the in a previous slide one by one in a cat in the cascade that it was supposed to be and
13:23
Yeah, and that's about it You can add more here at some point but but we can still yet But don't worry about that It's it's very nice for now Then we have another artifact which is the same config right here in this same config. We find a
13:46
Mapping of less variables because Inside this flexibility that I told you about you can in fact theme each of the components With a different theme here. All all the components are based in pasta naga, but you could say, okay
14:07
I love pasta naga way of doing Messages so so pop-up messages, but I like the most the other theme that is whatever I don't know
14:20
Semantic UI has several themes already and maybe we like the The alerts from the github theme so you could go here and say okay No, my let my alerts my message component will be like the github theme one and you only have to touch this really and it's it's very flexible
14:42
Another thing that the theme config has is Where the theme leaves for now by default you can find the themes inside Volto So it goes to the Volto themes where the pasta naga theme leaves. Well, we will also see it now Why in fact I can show you
15:02
right away In Volto, we have this we have the same folder as well and we have Inside the themes folder we have the pasta naga theme Which as you can see is also divided in the same folders that represents the types the categorization of the
15:23
of the components and for example in the global's you see Also the site and the reset that you can override we will see how to do that later as well
15:41
So another another thing is The site folder that we will see also in a moment a lot of things that are recursive, right? I can notice I can show you things without I'm doing recursive things so we will see that don't worry and what it means but I wonder that the theme config is the the way that you
16:04
Configure how semantic will be high for you, but basically all all here is by default is fine You don't have to come here right away and start changing things you you only should know that here is the point where you Customize things and do do different things than the default one, right?
16:26
You can configure also where the your fonts path is and things like that well let's continue the seeming engine which is the Important part The
16:41
Seeming engine Works a bit like that So we have three parts three parts that are loaded each time that we go to the entry point that I show you So semantic will pull all these three parts and these three artifacts. The first one is the defaults
17:00
semantic UI has the building blocks as If you remember about the progressive trustfulness we need The full definition of our building blocks as much detail as possible But that doesn't resemble doesn't have all the styling already there, but they are building blocks for
17:25
Fulfill every Where we are going where will be our final goal, right? So we'll have these definitions These definitions leaves here if we go to the semantic UI less
17:44
Source we have in in this folder is called definitions we have the site dot less and We have here for example all the default Styling for the site
18:01
That doesn't really match any of the components but it's it's defined it's the things like Default tax bodies the heaters things like that right is the body definition by default and
18:20
What else yeah, we have a default theme as well Theme that leaves here in themes and here in the default team you will have The overrides that already applies to the default
18:42
Definitions and everything in this theme is empty So if you want to make a new theme You have to start from this default theme Because it's the theme that it's empty We when we started with the pasta naga theme which we will also come back later
19:05
We started from this theme and build upon default Semantic UI theme that sorry definitions So This is the default. So we have the definitions with our less files and we have the default theme which
19:27
Already have you can find it then them here either on with and we'd have or in the code because They're important when you are building your theme or either building your see the CSS the custom CSS for your site
19:43
Because you need somehow like at the source, right? I mean which is the default and which is the things that I have to overwrite Right and it's handy to have them at hand Then we have this the package themes pasta naga we made a thing a
20:03
theme out of pasta naga and when What you have to do as you've already seen is to use another artifacts that are called the variables Files and they override files those
20:21
Files will override The default ones in a casket CSS way so for example We have pasta naga and we have the side variables for pasta naga
20:41
Right that will override the default ones Okay, for example, this is the variables that will That will set the phone name that will take it over directly from Google we have the heater font the
21:02
More things like the text the font size the default font size and So on so on primary color from the branding or secondary color we have the text color as well somewhere which is Here the default text color for all our site we can set it up from scratch and this lives in the site
21:27
Variables, it's the main variables that we are going that are general and we are going to use along over all our site and we can directly Set them here to define how our theme are going are going to be hot
21:46
Okay same for same for The overrides files. For example, this is the the override file from for pasta naga This file will override the default one Like in us override as in CSS, so it will come later
22:04
So you can override Previously defined directives, I mean CSS directives so here like the body In past another we have flex Layout in the body so we override it here
22:23
Right and so on and so on so More more information about variables. We have more than three three thousand theming variables. Okay
22:41
Yeah, which is a lot. I know and it's kind of overwhelming I Can also see that for someone that it's not used to CSS magic or to more into CSS I think that probably it's the best way. It's a good entry point for someone that doesn't know how to
23:08
do proper CSS, so It's like a downside. I mean, it's a lot of things good, but this I Have to really search for that variable
23:20
It's kind of yeah Compromise, I don't know I'm guilty myself. So I am lazy and instead of searching for the good which variable controls what I I'm guilty of simply override the CSS and whatever
23:41
But the idea in pasta naga theme is not to do that and use use the proper variable so non-experienced Experienced people is coming here and can kind of theme Pasta naga properly using only variables and that can be done in semantic UI
24:01
It's kind of a TML back base properties But yeah, I did I don't think that base properties back in the day was that so but yeah Yeah, whatever. I don't know so yeah, there are more of the season and
24:20
Yeah, the overrides as I said, this is simply as they are less file So but they are only they have a different suffix there. I mean Extension but they are over right they are less files. You have to set up that right in your IDE if not So pasta naga UI theme you we made a theme we made a theme with
24:45
Semantic UI theme with pasta naga, you can find it here. It's still not complete Help Is will be very welcome during the spring to finish and to polish rough edges around pasta naga theme and
25:04
Yeah, finally we have the side theme which I think that is the best Thing that we ever had so we had the defaults Okay, we have a theme already in pasta pasta naga is a theme But if we want to make a project we don't need to build another theme
25:22
We build a local side theme which is called a lot a local side theme So you only have on the top of that you have a still Something that is overriding again everything that is set up that you set up before so this is the full cascade and it goes like this in this direction and
25:47
The most rightful one is the one who wins Either using variables or either using overrides and I think it's great and it's a great idea That we can we only have to take advantage of so
26:09
Okay, so we extending past enaga UI the semantic UI way it can be done We're gonna have to drop some File that we can call extras
26:22
I'm not saying that here that here is where you should put your your customizations No, you should put your customizations In this side theme which I have to show you So we have the Volto
26:40
We have our all Volto app here our theme config which we don't have to touch anything and we are Going to set the globals folder The same globals folder that we will have in the past enaga theme is sorry
27:03
This is the past enaga theme and as you can see we have to comply with the categorization of these of the Semantic UI themes, right? So if we want to customize the site The side variables of the site override the silo styling we have to make a global directory
27:23
I inside that there tree we have to have Side variables and the site overrides for example in the side variables we have we've changed the The phone name and we set it to red and in the
27:41
Sorry in the set variables and in the site overrides we are setting this small piece of code There so we're seeing yeah phone size 54. Why not mine it? I am so, let's see how it looks like so Yeah, it's already started as we introduced
28:02
Neo new files. We have to restart the Volto process unless Volto The watcher is not that smart but once we finish tip to do
28:27
Volto site here and Here it is. We have our How it was called the via rhyme font and it's it was set up to 54 and we can watch it live because it we have the nice reloader and
28:48
We will we can set it to 84. We should have the yeah, of course
29:04
Should have the developers open if not doesn't happen No, no, it's an edge to in fact agent it oh, yeah
29:22
This is the main site yeah here not because it's blown side, yeah It's a bug we have to correct in this Yeah, the non blown side one sees There are edge to because it should be edge to okay, and that's it. And here is where your your site
29:49
your local site Theme should leave so in the theme The Volto app theme directory then you put you start to put there the semantic UI
30:06
Customizations so So it's yeah extending past another UI When I say this is for example, we have we've seen
30:21
in the interwebs The Nice component drop-down component and it's the react select component for example, and you see oh well That's awesome. I want that in my Volto side and then it has its own CSS Hopefully also built on less and it has the component
30:43
So you only have to use that in your Volto app, which is fairly easy But then you have to deal with with CSF right so you can Do create these extra those dot less and put it on SRC client and
31:03
Allah Allah semantic UI you can do the import of the select and then in this select Fear fear sort of file you have only have to Maintain these heaters, so you you have to set this
31:23
This heater setting the type which is an extra and set it a set in an element Which is called select and then import this month multiple, which is one of the last Features that sass doesn't have unfortunately and makes the old theming work and then place your
31:44
Third-party less CSS or less files here and then load call this Mixing which is called load to UI Overrides thingy and that's it. You have your react select less Integrated into your theming engine, which is kind of cool
32:18
Okay same for the variable
32:21
So, let's see that react select has barrels and in fact it has and then you only have to put the variables coming from your third-party component here, that's it and the Semantic UI theming is going to take care of it. So
32:41
Yeah, I'm getting to this point I want to talk also about the depth workflow that you get in Volto and I We tried a way of doing things that we like the most and it helps the client to see things right away by building a prototype in the middle and
33:01
You saw this something that we react you can do very quickly In fact, so you have mock-ups from the agency the same design agency or the designer that you do the the styling Sorry, they look and feel for you and then you make a prototype that doesn't work but it seems like the
33:20
it resembles a matches the mock-up and without do any wiring at all and You can it is something that you can even show to the client with I know fake Data or something and Then get approval from the client and then wire it up
33:44
Back with Volto and make it work with the right with the real thing with blown on the back and there's something that We really work for us and it's very handy and the client can see results right away very quickly and I really recommend you to do that because
34:02
React allows you to do that. I mean, it's that easy So a little bit wording on Tooling quickly, so Use prettier use prettier I mean you have it doesn't matter the ID that you are using you use prettier
34:22
which has a nice plug-in that is called prettier styling and Use also styling styling is the next big thing in in linting CSS less SAS and it has also to Plugins that I like the most the first one. Well, it's the just load the
34:42
Standard rules For for linting whatever styling preprocessor that you are using Here less, of course But you can if you have all the projects you can work With that as well and also style config idiomatic order. This is something that
35:00
MDO from bootstrap started to enforce in bootstrap itself. That is okay No, I don't want to just a bunch of declarations in my less Classes or IDs in my styling and but I really wanted ordered That to have to have any special order. So first go the layout then goes the
35:23
Font then there goes the I don't remember now really because because this plugin does it for you so when you save all the all the declarations are ordered in in the Pre-established way which is kind of cool and
35:42
You have always the same thing in the same order in your CSS files and yeah you only have to do this to install them and in package the JSON you have to enable the idiomatic order and the prettier styling like this and
36:02
And that's it you have it I Don't think yeah, I think that that's it more or less So final thoughts I Was very really I was weary at first coming from bootstrap another frameworks that yeah, just another framework, right and
36:21
but at the end I really enjoy to to have it To have to work with it and it's very enjoyable and the developer experience is not that bad. However it has Some drawbacks which I had in my notes and since I'm not seeing my notes
36:44
Yeah Yeah, semantic is not perfect I mean The idea of the seeming is is unbeatable I have to say but semantic itself is not it's not perfect is far from being semantic at some point So you you get some what the Fox?
37:05
Along the way but At some point it also has too much specificity Because of the variables. So yeah, you have a variable for the
37:20
Description of the cards of the cards component and in that variable says yet. This is your font size What does it mean? It means that you have to override that each time that you have a card and you want to change that font size
37:42
Yeah, well But thanks to modern IDs. It's also Fairly easy to overcome but yeah, it's that the specific you can tell from three thousand variables, right? Yeah, it's something that
38:00
It's very old but you say yeah again, I have to go and set my own size there, whatever Then yeah, again, the seeming in enzyme is brilliant and You have when you were with Walter, you only have to take care of these you don't have to have
38:24
A templating you don't have Yeah, I have to write these here in a j-bot, but I can because it's a navigation port and I have to write the Python for that and yeah, and a lot of things that you I can you can think about it and and
38:43
You only have to deal with react and semantic UI, right? So you are from a list of these like Dependencies or technologies that you have to think you only Go back to to which is also fine
39:02
So questions
39:21
No, no, well the the question is where how we made the prototyping It's react right you may you wrote the your react components around in Volto, but you don't have to wire them What what what? What means wiring them? It's wiring it wearing them to plown with actions and reducers
39:45
So you get the actual data from plown and made it appear in your prototype you just don't do that because that's takes some time, but you only do the component and the styling with fake data That you later will remove and do the
40:04
Proper wiring so you don't have to throw anything away and everything stays in the same thing in the same place So you have your components in your components folder you have your styling in your styling folder and everything's fine The only thing is that it's not wired to plown well for a client fair enough and
40:23
Then you wire it to plown with actions and reducers and everything. You don't have to throw anything away Everything's there only it's static And that's it Because we are running out of time
40:43
One of the nice things that we've had in plan for a long time was like long before Living a style guides or anything. There was a page called test rendering where you could go and just see how does everything look? Does semantic UI or Volto have something like that? No, but there's something else in the JavaScript world which is called a style guide dist
41:08
and the storybook which both are fine and their purpose is Precisely do that. So you have a gallery of components and along with the gallery you get the the
41:23
Description about them so you can you have you have the reference guy On one side and and you can build things around that It's something that that we we already look into that but we haven't time still to do it Especially for the volatile components the semantic components themselves. They are very fairly well
41:47
documented in the semantic in these react semantic UI Website, which is cool and you even have life You can life modify them and play with them, but definitely we have to do that
42:01
So thank you so much Victor and we it's time to change