EEA Faceted Navigation and Plone 6
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 | 44 | |
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/60237 (DOI) | |
Publisher | ||
Release Date | ||
Language | ||
Production Place | Namur, Belgium |
Content Metadata
Subject Area | ||
Genre | ||
Abstract |
|
Plone Conference 20229 / 44
10
14
22
23
26
27
40
00:00
Turtle graphicsPortletPerfect groupRight angleFiber bundleRepository (publishing)Web pageWebsiteDemo (music)NeuroinformatikType theoryGroup actionProfil (magazine)Multiplication signCodeVulnerability (computing)Bootstrap aggregatingMathematical analysisPlastikkarteSoftware testingContent (media)Query languagePlanningClient (computing)Equaliser (mathematics)Default (computer science)Plug-in (computing)VideoconferencingStress (mechanics)Integrated development environmentOpen sourceRepresentational state transferThumbnailMetropolitan area networkWave packetDifferent (Kate Ryan album)Moment <Mathematik>Slide ruleScaling (geometry)Object (grammar)Canadian Mathematical SocietyEmailFreewareGoodness of fitTemplate (C++)Connectivity (graph theory)Block (periodic table)Core dumpYouTubeSemantics (computer science)Classical physicsImplementationInstance (computer science)Traffic reportingRevision controlSoftware bugInstallation artCloningOnline helpConstraint (mathematics)DemosceneComputer fileValidity (statistics)VoltmeterUniform resource locatorMereologyWeb 2.0Module (mathematics)Digital photographyContext awarenessBuildingComputer configurationSubject indexingLibrary catalogMessage passingSet (mathematics)MetadataSchwerpunktsystemToken ringRule of inferenceCoefficient of determinationSmartphoneElectronic mailing listConfiguration spaceWebdesignAlpha (investment)Moment (mathematics)Physical systemProduct (business)Musical ensembleFilter <Stochastik>Speech synthesisEndliche ModelltheorieGraph coloringWhiteboardHTTP cookieLibrary (computing)Presentation of a groupSimulationReal numberGoogolExpert systemMenu (computing)Game controllerLevel (video gaming)GravitationEnterprise architectureSystem callComputer animationLecture/Conference
00:37
BootingMoment (mathematics)Lecture/ConferenceComputer animation
01:02
Meeting/Interview
02:25
GEDCOMMach's principleBootingFile formatForm (programming)Computer animationMeeting/Interview
02:58
Moment (mathematics)Multiplication sign
03:36
Slide ruleMoment (mathematics)
04:03
Multiplication signPresentation of a groupLecture/ConferenceMeeting/Interview
04:37
OvalSpeech synthesisExpert systemLecture/Conference
05:03
Human migrationForm (programming)Product (business)Classical physicsComputer configurationComputer animationMeeting/Interview
05:48
Digital filterFilter <Stochastik>XMLComputer animationLecture/Conference
06:14
Digital filterLecture/Conference
06:40
Software developerClient (computing)Meeting/InterviewLecture/Conference
07:15
Cloud computingIntegrated development environmentGroup actionCodeMathematical analysisSoftware developerDefault (computer science)Computer animationLecture/Conference
07:58
Cloud computingIntegrated development environmentGroup actionCodeMathematical analysisPlug-in (computing)Mathematical analysisVulnerability (computing)Computer clusterCodeBootstrap aggregatingMultiplication signGroup actionIntegrated development environmentPlastikkarteComputer animationMeeting/Interview
08:53
PlastikkartePortletType theoryWebsiteProfil (magazine)Demo (music)Lecture/ConferenceComputer animation
09:18
Software bugPlastikkartePortletInstallation artWeb pageContent (media)Computer animation
10:01
InformationDemo (music)Coma BerenicesWeb pageDefault (computer science)Computer animation
10:26
Demo (music)PortletTemplate (C++)Configuration spaceComputer animation
11:01
MassDemo (music)Moment (mathematics)GEDCOMFood energyFocus (optics)AverageData recoveryIntegrated development environmentContent (media)PortletWeb pageSlide ruleLecture/ConferenceComputer animation
11:51
Revision controlCross-site scriptingInstallation artRevision controlProfil (magazine)Lecture/ConferenceMeeting/InterviewComputer animation
12:26
Software bugGroup actionOpen setSoftware testingCloningWindows RegistrySoftware testingIntegrated development environmentLecture/ConferenceMeeting/InterviewComputer animation
13:22
CloningComputer animationLecture/Conference
13:57
CloningSoftware developerCloningBuildingLecture/ConferenceMeeting/InterviewComputer animation
14:30
Normed vector spaceCloningBlock (periodic table)Core dumpComputer configurationDemo (music)Block (periodic table)Computer animationXML
15:08
MUDUniform resource locatorBoom (sailing)Musical ensembleDemo (music)Web pageBlock (periodic table)Block (periodic table)Lecture/ConferenceMeeting/InterviewComputer animation
15:50
Demo (music)Drum memoryFood energyBounded variationBlock (periodic table)Eigenvalues and eigenvectorsBlock (periodic table)Type theoryComputer animation
16:48
Demo (music)Revision controlMereologyLecture/ConferenceMeeting/InterviewComputer animation
17:27
Block (periodic table)Core dumpCore dumpLipschitz-StetigkeitXML
17:59
Digital filterGreen's functionMathematical analysisSource codeMaizeAreaDirected setQuarkLecture/ConferenceComputer animation
18:30
Green's functionDemo (music)Block (periodic table)Core dumpOpen sourceDemo (music)Lecture/Conference
19:20
Client (computing)Meeting/Interview
19:48
Enterprise architectureContent management systemVideoconferencingClassical physicsStress (mechanics)YouTube
20:17
Enterprise architectureContent management systemWave packetSemantics (computer science)Goodness of fitFreewareLecture/Conference
20:57
CodeOpen sourceEnterprise architectureCanadian Mathematical SocietyLecture/Conference
21:46
Integrated development environmentMultiplication signLibrary (computing)Physical systemLecture/ConferenceComputer animation
22:16
Software developerContent (media)Template (C++)Computer-generated imageryLink (knot theory)LaceStatisticsVariable (mathematics)AdditionCuboidUser interfaceComputer animation
22:41
Physical systemTelecommunicationMenu (computing)GEDCOMIntegrated development environmentVacuumOpen sourceComputer animation
23:07
Group actionArrow of timeGamma functionComputer animation
23:35
Boom (sailing)Food energyGEDCOMDemo (music)MomentumFocus (optics)Real numberCodierung <Programmierung>Interface (computing)Extension (kinesiology)BootingElectronic visual displayCloningWeb pageData typeGamma functionGreatest elementMathematicsQuery languageUniform resource locatorGraph coloringMeeting/InterviewLecture/ConferenceXMLComputer animation
25:15
AverageUniqueness quantificationMaxima and minimaTerm (mathematics)ExplosionDemo (music)System programmingData recoveryIntegrated development environmentShift operatorPlastikkarteInformationCurvatureAsynchronous Transfer ModeAvatar (2009 film)GEDCOMInternet forumPortletLecture/ConferenceComputer animation
25:47
Classical physicsCodePlug-in (computing)Wave packetLibrary (computing)Lecture/ConferenceMeeting/Interview
26:57
Meeting/Interview
27:26
Grand Unified TheoryArithmetic meanPlug-in (computing)Meta elementGamma functionLimit (category theory)Dedekind cutFiber bundle2 (number)Perfect groupLecture/ConferenceSource code
28:05
Equals signSoftware developerOnline helpBootstrap aggregatingLecture/ConferenceSource codeProgram flowchartComputer animation
28:49
Gamma functionMaxima and minimaInstallation artConstraint (mathematics)Source code
29:17
WebdesignSemantics (computer science)Meeting/InterviewLecture/Conference
29:47
GEDCOMContent (media)Software developerDigital signalProduct (business)Dean numberPhysical systemGroup actionControl flowAsynchronous Transfer ModeModel-driven engineeringMenu (computing)Semantics (computer science)Connectivity (graph theory)EmailComputer animation
30:22
Form (programming)Maxima and minimaGroup actionInsertion lossComa BerenicesMultiplication signSource codeComputer animationMeeting/InterviewLecture/Conference
31:12
MetadataObject (grammar)Scaling (geometry)Library catalogSynchronizationMeeting/InterviewLecture/Conference
31:49
Meeting/Interview
32:14
Turtle graphicsMultiplication signLecture/ConferenceComputer animation
Transcript: English(auto-generated)
00:07
Okay, this call is presented by Alin Voneia. He has worked at Odaweb in Romania.
00:33
Thank you. My name is Alin Voneia. I work with Odaweb Romania and we work mainly for the European Environment Agency.
00:44
And you see there also the logo of the company of Philips. You will see why in a moment. Yeah, this is what I've been doing in the past 15 years.
01:03
So I do Python, I do React, Docker, NLP, Elasticsearch, everything basically. But before we start, because Errico and Fred said that you should come to this stage, it's not easy.
01:28
I mean, I've been a lot of talks in the past 12, 14 years, so man, you have to prepare first. So here in Belgium there is this airspace indoor skydiving. So basically there is no gravitation there.
01:55
And I think the feeling is the same as being on this stage.
02:01
And look, for these guys it seems so simple, but I was there.
02:33
And this is not all you have to do, because you also have to go to the Walibi Belgium, which is also 30 minutes from Namur.
02:55
Find the highest rollercoaster, and remember this is not a simulation, this is the real thing.
03:06
I've been there, my daughter dragged me in this thing. I mean, every time I submit a talk to the Plonk conference, I have this, okay, it's okay, we're going to the sky.
03:23
But then, this comes. The moment of the talk. And from the moment when you arrive to the conference, until the moment you deliver the talk, it's indeed a rollercoaster.
03:50
I mean, you experience emotions more like this one.
04:02
So, yeah, and then you have to deal with these Google slides. Okay, then you come to the conference, and you spend your time with these beautiful people until 3am in the morning.
04:29
And you don't have the presentation done, actually you start doing the presentation during the conference. Now being serious, this is an expert in doing public speaking into the public.
04:50
And it's very powerful, just look for him on TED. So, going back to EA FASTA navigation and Plonk 6.
05:03
You are here because I used buzzwords. In the Plonk community, these are some of the buzzwords. So, yes, if you want to find more buzzwords, or if you're new to this community, or as Erika said, if you are in Brasilia or Argentina,
05:28
and you don't want to come to deliver at the Plonk Conf, make your product a buzzword by adding it to Awesome Plonk and also Volto,
05:42
and then come here and people will come to your talk. So, Plonk Classic and FASTA navigation, you have some options doing FASTA navigation in Plonk Classic.
06:00
If you don't, you have EA FASTA navigation, but if you don't want the advanced stuff within EA FASTA navigation, you have collective collection filters. Then also Andreas Jung showed us a light and talked about TypeSense.
06:21
I'm sure there are more. I'm sorry if I didn't include them in here. But yes, EA FASTA navigation 16 was released. Alpha, of course, 67. No, it's Alpha 1.
06:42
And you have to give this guy a beer, at least one of Belgian type, because Philip came to us and said we have a client that wants EA FASTA navigation to work with Plonk 6, and we said add Volto, and he said no, the client wants FASTA navigation.
07:06
So, okay, we started working on it. And yes, we have Lingua Plonk in FASTA navigation 16. No, we dropped all this. So, we dropped Python 2 and Plonk 4 support.
07:23
We dropped CC build out from development environment, Lingua Plonk. We dropped all the dependencies. EA GQuery, EA FASTA, Vocabularies, CollectiveJS, GQuery UI. We dropped by default behavior on the folder in collection.
07:46
You will see why. Actually, you may understand that the folder is not in Plonk 6 anymore. Enable by default.
08:01
So, yeah, what's new? We have the, we use Webpack to bundle the JavaScript and CSS resources. We upgraded some jQuery plugins like JS3 and jQuery UI, because jQuery UI also had a vulnerability in it,
08:23
and the Lighthouse always complained about it. Then we have the PIP-based development environment. We have Bootstrap 5, Grid, and Card for the faceted reviews.
08:40
We have GitHub Actions for code analysis and testing, and it's 10 times faster, or maybe 100 times faster. Nobody knows that. So, you can try it right now. If you open your computer, just type docker run site and add-ons and profiles.
09:07
And, of course, because I like roller coasters, here should be a demo. But I will do a live demo of it. So, no.
09:24
So, you know how to install an add-on. You know how to enable. I will just show you that you will have to, after you install the add-on, you have to go to content types, page, behaviors,
09:46
search for faceted navigable, and just enable this behavior. And then, if I add a new page, the faceted demo, I have it already here.
10:08
And in the actions, you will have enable faster navigation and enable faceted search. For the people that don't know what's the difference, faceted search will not search by default when you enter the page.
10:25
Faceted navigation will search by default to do that. But I didn't disable the faceted search.
10:43
Okay. What did I say in this slide? Enable configure portlets. Okay, portlets. So, as I said, this template is using boostup5 grid.
11:01
So, no more custom grid, what we had there before. So, basically, if I go to this one, I can enable left portlets and the grid will adjust automatically. I can enable the right portlets
11:23
and also have the grid. And I can enable smart faceting, disabling, and this will hide the facets if you have only one page of content because you don't have to filter.
11:42
I mean, it's no sense to filter something that it's one page of content. Anyway, going back to the slides. So, because in 16 we dropped the Python 2
12:05
and Python 4 support, we have an intermediate version. So, if you're upgrading your website, I suggest you to upgrade to 15 first because this one has some profiles of cleaning up,
12:24
like collected JS jQuery profiles, the faceted bundling in the resource registry and all that old stuff. And then upgrade to 16. Yeah, and run the upgrades available in the set setup.
12:45
Now, if you find a bug, it's a feature by design if you don't report it. If you have an idea but you don't open a pull request,
13:03
then it remains just an idea. And the pull is broken by default, as David said, if there are no tests and documentation. So, now, as I said,
13:20
we have the PIP-based development environment. And, yeah, you can just clone it from collective, CD, make, make-start. So, the make is here just to simplify some commands,
13:41
but this will just install cmf-clone and the latest one. You also have a docker-compose there, so basically you can start if you don't want to, I don't know why wouldn't you want to use PIP, but if you want to use Docker, just token-compose up clone 5 or clone 6,
14:03
and see how it looks on clone 5 or clone 6. How do we, what do we do with the resources? We use Yarn and Webpack. So, you just run Yarn and Yarn build.
14:21
You don't have to do this manually because when you do make-start, all the resources will be automatically rebuilt. But, yeah, if you change something in CSS or in JavaScript, then just do Yarn build, and the resources will be recreated.
14:46
Now, the options we have on faceted navigation and Volto, so we have the search block demo, already did a keynote about it in the morning,
15:01
so just go, I will not do the demo here, just go to the keynote from this morning and search for faceted navigation. So, basically we have faceted navigation. Ah, I still wanted to demo something because, so we have this backend,
15:23
and if I go to the Volto part, try to ignore that you already have this block here.
15:45
So, this will, if you put Volto on it, it will look like this, but if you add the search block, so basically you can add the search block from the, from the core, which is here,
16:04
and replicate manually, for now, the facets you had in the, was it in controls, no controls, facets. So, you can add a title,
16:22
it's like portal type. Okay. It's type, yes. You can move it on the right, on the left,
16:45
and was this a checkbook? So, now you have faceted navigation on the same content, and it can stay, I mean, it can live there
17:04
together with the classic part. So, the classic, if you go back to classic, nothing changed here, changed here. So, you still have a working faceted navigation here, and you also have another version of it
17:21
on the Volto part. So, this is built in Volto core. If you want something more advanced, we have some add-ons,
17:41
we have the Volto search lip and Volto global search, and if you've been at Ramon's presentation, there is something more advanced, like Nuclea core, and I think there are more, but I will show you what we have at the EA.
18:04
So, here we have, so we have facets, basically you can filter the content, but we also have the NLP part.
18:25
So, basically you can question it, and you will get a direct answer from the solution we have. We are using an open source solution
18:41
called HiStack from Deepset AI, and you can see that it gave us that we have to walk more. So, if you're going to Valibi,
19:01
use the walking transportation method. It will help. What else? Demo. Okay. So, now you have no excuse
19:21
to not upgrade to Plone 6. I mean, if your clients come to you and say, yeah, but I want to stay in Plone 5 because I have faster navigation, we have it also in Plone 6, classic. We have solutions for Plone 6 Volto.
19:43
So, yeah, I will just remind you what Plone is. This is a video we made for the Plone World Day this year. So, yeah,
20:01
and I saw it gained a lot of traction on YouTube. So, I think new people still ask what's Plone, and Plone is not about the Plone Classic or Plone 6 or Plone.
20:21
It's about accessibility, internalization. We have the latest technologies in it like Pustra, PS5, Semantic UI. We have documentation, good, very good documentation and free trainings. We have REST API,
20:42
and the most important of it, we have an awesome Plone community. And, yes, this is a code from Sorrento.
21:03
So, you can take the man out of the Plone, but you can't take the Plone out of the man. That being said, we have a lot of resources at Plone.org.
21:21
We have the docs at Plone.org. We have the demo, and the classic demo, and we have the trainings, and you can ask your questions on community.
21:40
So, Plone is the ultimate open source enterprise CMS. If you have questions, here you can find the FASTA navigation and the Volto search lib packages.
22:03
We have more. We have some time. I want to show you a quick... Well, it's not related to the FASTA navigation, but if you go to EA GitHub IO, we are working on a design system for Volto. For the EA, the branding for the European Environment Agency,
22:24
and here you can find resources about how to build,
22:42
and we have also a storybook. We have colors, all the branding stuff you will need for, and this is open source. You can fork it. You can use it for your needs. It's free.
23:01
It's in the spirit of the Plone community. So, with this one, I think we can also improve the storybook we have on Volto Core. Yes, question, please. Any questions?
23:31
Thank you. Someone who never used FASTA navigation, is it context-aware?
23:40
It is context-aware. So, if you... You can add in the FASTA navigation. You can... Let me show you how it works. If I find it, it's here.
24:03
So, here you have this menu. You can configure it, and you can add visible facets. The one with the blue color on title, and these are hidden. So, this works as collection did before.
24:22
So, this will define the initial query. So, basically, here you can say, okay, I want the location, path, and say location,
24:42
the title, so you have validation also, and the location. You can say,
25:00
look in news, hide it, and now it will show content only from the news. Yeah, you have only four, six items. So, you can also say, okay, give me only the news item. Now it's giving also the folders.
25:21
Let me disable the portlets.
25:44
Thank you. Okay, there is a question on this code. The question is, will the classic UI resource be refactored to Model Federation support? No, I'm sorry I didn't
26:03
went to the Johannes training about Model Federation on his talk. I don't know how to, I don't know. I didn't dig into it. Maybe the sixth final will have Model Federation.
26:22
But right now, we only reuse the jQuery, the jQuery library from Plon Classic, but the rest of models, I think there is only one, the cookie, the barbecue cookie, and maybe the select two.
26:43
But other than that, there are just new jQuery plugins there. But I would like to dig into it and use the Model Federation. Okay, thank you. Any other question?
27:01
There. I also wanted to ask the same question about Model Federation, but aren't you also using jQuery as a dependency?
27:21
Are you including that in the bundle? No, the jQuery, I added it into the Webpack. Let me find it. So if you look at the Webpack config, I said that
27:41
is not here. It's, look. So it's external. So basically, it's using jQuery from Plon. Perfect. And the second thing is, did I get it right? You do not provide the build bundle in the GitHub repository,
28:02
but in the PyP package, right? No, no, it's on GitHub. No, only, you know, in the old way of doing, of developing add-ons, you would have build.cfg here, or... Yeah. So now we have just a simple makefile. And if I go to sandbox,
28:32
you have just
28:41
the bootstrap install, develop, start, test, and help. For now. And behind the scenes, it's just doing pip install. Find it. So it's doing pip install Plon, with the constraints from Plon version,
29:04
and it's doing the sub-instance. Other question?
29:21
Web design system, the implementation, is it independent from Semantic UI? It's based on Semantic UI, so it only adds to the Semantic UI components, and we also have, where is it?
29:43
So we have styled all the Semantic UI components. Not this one. This one.
30:03
Yeah. And we have also some custom components. Like the footer, the header.
30:30
Also a question. Thanks for the work.
30:41
Why is it ten times faster? Good question. I was about to say, but I forgot. So, we found out that in the previous faceted preview template,
31:02
we were doing doc get object, brain get object, and it was there for 12 years, and nobody complained about it. But we did that because of the thumbnail, in Plon 4. Now we have the
31:20
scale sync catalog. So basically, we can just use the brain, and as a general rule, in listings, don't do brain get object. It's killing your website, so use the catalog as much as possible. Create new indexes
31:42
and use the brain, use the data from the brain metadata. Ok, is there any other question on Discord?
32:05
No more questions. Ok, thank you very much. The next talk
32:34
is at 11 and 50, so we have a little time.