Retour d’expérience : migration d’Elementor vers FSE avec Claude Code

No, no, I haven't prepared anything at all. No introduction is needed. There is the first page of the slideshow. Okay, it says Toulouse and June 15, 2026, but it's a return to the past. So you'll see, it's going to be super interesting to see how it happened in the past. I had forgotten about that. So, well, it's not like it was 15 days ago or anything. So it's okay, it hasn't changed much. Uh, OK. So the objective was to test the migration of a site using Cloud Code. So, in this case, the migration was the migration of a site under Elementor to FSE mode. Uh, so, uh, the purpose of this presentation, uh, because [clears throat] well, like many others, I discovered a few weeks ago, at the beginning of May I think, uh, the whole advantage of having Cloud Code running directly on a machine and, uh, its efficiency in working directly on files. So. So, so I entrusted it to an agent, uh, wait, I'm going to... Oh no, if he moves, I'm not going to see him. Wait. So, there's a screen issue, I need to... Okay, we'll do it this way. So, using Cloud Code to migrate a site. So, who am I ? Well, I'm Tyril Sanson, a WordPress website designer for over ten years. Um, I'm primarily an information systems engineer. I renewed my OPQast certification at the beginning of the year and I encourage everyone to take this certification exam. This allows us to reframe things in terms of website design. I am also a teacher for the MSc Digital Marketing at TBS Toulouse Business School and, until recently, co-organizer of the WordPress Toulouse Meetup. And as My announced this morning on LinkedIn, but I didn't have time to reply, I'm also leaving this great adventure to rest a little, but that wo n't stop us, as you said Myis, from returning to attend the Meetup. Uh, and then uh, I'm also a WordPress contributor with uh, with translations, uh, and I've been exploring uh for 2 and a half, almost 3 years, uh, AI in uh, my daily work. So. So, uh, the objective was, uh, if we got rid of Elementor and let an AI automate the bulk of the work. Because, well, uh, so why uh, fire Elementor? Well, because now, uh, FSEOR or any other builder, uh, because now FSE seems to be reaching maturity, uh, it offers great ease of use. That is to say, we only have one editor in the site, right, we don't have an element or div or uh and so forth and uh the native editor. Well, sites that are built in FSE mode are generally much faster than those made with a builder. Uh, unless we go back to the time, I used to spend one to two days optimizing the site I had made with Elementor. Well , now it's no longer necessary. So, there is an undeniable time saving. And, and especially for the users of the site, a single editor, and that's a point, it's a point that's a bit late but important. So [clears throat] my test was to see if I can migrate quickly because I can do it by hand, uh, there's no problem with that. But if I can do it faster with Unia and in this case Cloud Code. Uh, so the framework is a site I left, since then I've done better and uh, basically the example I'm taking today was a site that had been a blog, a simple blog built with Elementor. So, I wanted to test it on that site. So it's not a benchmark, it's just a test to see how it goes. OK. So uh the objective was to migrate the site, as I said uh from Elementor to the FSE uh by managing the agent uh and uh it has to be reliable, supervised and profitable. Profitable, what does that mean? Well, that means we don't spend an eternity on it, or at least less time than if we did it by hand. Uh, the perimeter, so it's a real site. So, I started with a clone of the site, you know . I didn't, uh, I cloned the site, I didn't recreate it from scratch. I made a clone of the site in which I disabled Elementor and uh, so the cloud code had to have all the data locally. That's what prevents potential data loss or transfer errors. Uh uh [cough][throat clearing] there was also uh a CPT work since it is a blog by an author, a philosopher and author who has published books. So, there is an extension called Moberry Book Manager which creates a CPT book. So, uh, it was necessary to be able to manage, uh, the CPT work. The imposed method was a design system and an audit of quality and accessibility to begin with, and then we do the migration once we have analyzed the situation. Uh, and that's the goal, well, the end result is achieved if we have the complete, functional site without a builder and with a time saving. That's the goal. Uh, so I started from a set of specifications that I made with Cloud, but not with the other code. I did it in the AI ​​cloud, explaining to him what I wanted, that it was necessary to move from mentor to FSE, that it was necessary to respect, uh, finally analyze the web design to reproduce the same. So I spent one to two hours, I think, making this specification document, and for me it's an important point because it's the starting point, meaning that afterwards when I launched Clut Code I only had to tell it to look at the specification document and let's go. Uh, so, uh, the filotude site is, well, it has 42 articles, 10, 10, 10, 10 works in CPT format and 9 models. The goal was to do it with 2025, so the default WordPress theme, the most compatible theme par excellence with WordPress, and the certainty that this theme will always be compatible since, as we saw with previous themes with each WordPress update, the themes since 2018, I think it was the first one, right 2018 or yes, I think it was 2018. Anyway, they all followed and in principle they are all compatible. Uh so that's why I was aiming for 2025 and uh and I had uh I added Spectra uh because it seemed to me that it was missing certain features uh and we'll see that well we won't see but uh I made another one then I moved on to another stage after that project and in fact I don't even need Spectra. But anyway, we used it in, uh, I used it on this, on this, on this test. Uh so Eléor Pro uh the starting theme is Elémentor Pro, the Hello theme which is the default theme of well which is offered by uh by Elémentor. Uh, the site is hosted by Switch, the CPT works as a Manager, I mentioned it and there was also a contact form. So uh Ah yes, the contact form, it has an anti-spam called Mosparo. Uh, I'm not going to talk about it much here, but I recommend Mosparo. It's a very interesting solution that I've been using in production for at least a year and which is really very effective on anti-spam and which obviously one of the first criteria for me is respect for privacy. So, it's settling in like a matomo on our emergence. And then, the thing is, you have to connect it to the form. And there was a little point of tension because uh Mosparo offers modules uh that connect with some uh some form extensions and with Elementor obviously, but not with everything. Uh, for example, some time ago, when I started making FSE sites, I used Cadence and there was no module for Cadence and there isn't one for Spectra either. So, uh, this was the point where I was going to be able to challenge Cloud Cloud Code, since this problem needed to be solved . OK. So, the configuration uh on my PC was uh well then I quote, the clone I installed it, I used Devkinsta. Uh, it's uh, a bit like the same systems as uh, local byfly Wheel or MAMP, Wamp and so on, everything we've known uh for years to generate a local web server with everything you need as if you were with a hosting provider. But it's local. So, I did it , I used Devkinsta on my end because being on a Linux machine, uh, uh, there was, uh, local, it wasn't working. Uh, there are a few tools like that which claim to work under, uh, I think local claimed to work under, uh, Linux, and I spent a few hours trying to get it working only to realize in the end that it said, "Yes, yes, it works, but we do n't maintain it." Well, thanks for wasting your time. Finally, Deathkinsta works, and for the record, Deathkinsta works with Docker. So it also allowed me to delve into the use of Docker, which I find really interesting. Uh, so there was a second effect that was cool, Defkinsta, so to install the code, to install the site, the clone of the Cloud Code site. So, well, it's settling in now. There is an installation script that works on all platforms that is provided by Cloud. Well, there you go . Then, I uh I used the MCP uh Firefox uh because on a previous project uh where I had already tested Claude Code on site migration huh, not as formal as on this project. Uh, there was a problem, which is that when uh, Claude made changes, he asked me to take a screenshot and submit it to him to see what he had done. And so, uh, you can imagine how laborious that can be. And actually, uh, well, I discovered, uh, I discovered that there was an MCP. Um, I'm hesitating because actually I need to talk about Camirou, I think uh who is a guy uh that's it, it's Camirou that I recommend to you as a resource. Uh, he publishes a newsletter every Friday, uh, with a watch, uh, on lots of tools, and uh, at the same time as I was doing this project and other projects with ODIA, I added all the extensions, skills, uh, and MCPs that he could talk about. In this case, it was he who led me to, I think it was he who led me to, to learn about MCP Firefox. So the MCP, the MCP model context protocol, as a reminder, is actually like an API. This allows Unia to understand or know how to use such and such a thing. So the Firefox MCP allows Cloud to know how to use Firefox and the Firefox Dev Tool. So that means having access to the code inspector and that's huge because then he has a whole range of tools that allow him to properly analyze what he is doing. When there are problems, he can go into the code of the page, he can see what is wrong and so on, and then I can give him the inspector, take a piece of code, tell him here is this code, what is happening or change it and so on. And so there is a much more precise dialogue which, well, allows for a more precise dialogue. The concept of skills as well. Uh, so the skills, uh, last night at the WordPress Toulouse Meetup, there was uh, Valentin who gave a presentation uh, uh, of Cloud Code. We don't see things the same way. Um, for me, skills are about defining an ability. Uh, so I'm not going to go back over what Valentin was saying because it doesn't belong in this video and it would complicate things. But uh, for me, that's what I understood uh from different videos and different tutorials uh about skills. It defines a context, a role and uh limits and uh and deliverables, let's say, uh that the AI ​​must provide. So, I see that you, Thierry, are nodding your head , we don't agree. intervene if you have a different view because I had a point of disagreement with him and I would be quite ready to discuss it. Thiry, yes, in my opinion it's more of a skill, actually. So actually, uh, yes, you can give it a context. Uh, actually your approach is more like a master prompt, basically, a very global prompt in which you will give it a role to embody, uh, a task to perform and then a deliverable. but ultimately it could be much more powerful than that. It's, uh, it's really a skill in its own right . And uh so there you go , so you can have some for example uh I use them for example for writing to make content uh accessible in fact to readers. So in fact the ability will be to say, "Attention, there are people who have difficulty understanding content." Well, there are methods that exist that are proven. This is how they work. And uh, so basically , this allows the AI ​​agent to have that skill. So it's like you have Batman who doesn't have any superpowers, and you give him the skill of another superhero, and so he can acquire that skill and therefore embody it and use it. Well listen, I might have expressed myself poorly because that's what I meant, because that's what I mean, what I hear in the skills. For me, I have a WordPress development skill, I have a skill in preparing quotes, I have a skill in writing emails or writing articles. Write articles while respecting SEO. Well, there you go, I have different skills. I have a manager that manages my Olibar tool. Uh, and indeed, it's a skill, not a task; it's not just "I do n't know how to do a small task." So. So, uh, well, anyway, so I have uh skills, uh, there are some uh, on site maintenance and so on. Uh, and I also used, uh, the, uh, so it was, uh, Wép training, Fabrice Ducarme who had published, that's also what put me on the, and also, uh, let's pay tribute to Thierry since he's here, uh, your articles on LinkedIn that boosted me to go in that direction. Uh so the skill was uh a skill that came out uh Fabrice Ducarme which is called Spectra uh Astra Spectra uh which I recovered and transformed into 2025 Spectra. Well, although, a priori, as Fabrice says, that skill, Astra Spectra can do 2025. But anyway, since I had absolutely no intention of using Astra, I wanted to clean all that up. So I made a fork, uh, well, I had Claude make a fork. Uh, and there's also a skill called WP FSE Redesign. So he has a framework for what she should do, how, and in particular an important point, is to try to use WordPress as much as possible because Claude can easily start, develop snippets, develop code, develop CSS. Uh, so we'll get the result, but if we're not careful, we'll end up with a set of elements that could have just been the WordPress settings. Another important point is that I didn't want to do a children's theme. Um, it would have been possible to create a child theme for 2025 to integrate um all the settings um specific to this site. I wanted to stay on the default 2025 theme and have all the data be records in the database, except when that's not possible and well we used the custom CSS but it remains so it's in the it's in the custom CSS area of kind I don't know if it's specific to 2025 or it's the custom CSS area of ​​the WordPress editor. Can someone shed some light on this for me ? Sorry, I was reading your article, I wasn't listening to you. [laughs] Ah well there you go, I was saying uh there is a uh a custom CSS field uh custom CSS. Yes. Does it belong to 2025 or does it belong to the publisher? That's the publisher. OK. And so whatever the theme, we will have this CSS, which will be the CS, or rather the custom CS for the block. Yeah, okay . We are talking about the same thing, that is, the area in the back office where I open custom CSS and paste all my CSS into it. Not the CSS for each block, right? So I was talking about the block level. After the other one, yes, it must be global from memory, but I do n't use it so I'm not going to tell you anything wrong. All right. OK. Ah yes, so I don't use the C'est vrai que on aussi par bloc csc but in my opinion uh it becomes manageable afterwards if we have to Ah yes but in which block did I put it and so on. So I put everything together in the custom CSS and it could indeed be in a child theme with the CSS like we do with child themes. Uh, OK. Cyril, I just have one question. How do you add features and functions without a child theme? Do you create plugins or use code snippets or things like that? Snipe codes? Yes yes yes yes yes yes indeed. Yeah, yeah. Uh, yes, yes, it's uh, for now I've never had to, it's always snippets, that is to say, code. Finally, what I need to add is that there are often 30 lines, maybe 50 lines maximum. Uh, I'm not going to develop an extension to do that. Uh, and I find that, well, I use CodeSnippet, uh, I find that the interface is, well, yes, there is a conversation, a discussion on yes, but uh, it's in a database, whereas if it were in files, it would be faster. I think it comes down to microseconds. So I find it very practical to have my snippets exposed in my code snippet in the back office. I can activate them, deactivate them. I have the code right in front of me. Well, rather than going to edit a functions.php file if I've put it in a theme or uh in a plugin. Well, there you go . Actually, Olivier, if you're on a custom theme, you can go and modify your theme directly. So, but in this case, it's true that if you're talking about any kind of toy, yes, the idea would be to either make an extension, a child theme, or use a code-adding plugin. So, I'm not a big fan of code-adding plugins for security reasons because when you get hacked, well, you already have the wolf in the sheepfold, you know. We have all the tools that allow us to inject code and this was exploited for a time by these types of plugins. So, uh, be careful anyway. Hm. OK. Uh, so then there were guards before launching the Bon, I'm going to speed things up a bit because it's been almost half an hour. So there were safeguards which were placed, uh, in the skills, I think. And uh, so the production is obviously read-only since there is no access to the production anyway. He has access to it as a testimony. That's the starting point. So there is absolutely no risk at that level. Uh, then, I realized after a while, because it's spread out, I do this over several days, that I need a change log and I need a tod list because when I start again the next day, where am I? I noted things in my notebook, so I have a change log and a tod list, and it has the constraint of constantly logging what it has done with the date, time, etc., so that in the change log and the tod list, well, the next things we're going to have and that may happen as we go along, saying, oh well, we'll have to think about doing that, so we don't have the tod list, yes, just a small remark, in fact, when we use Cloud Code in the terminal, it uses sessions made of work, and when we finish it, it often says, " Attention, you can resume the previous session," and it gives an identifier. So remember to note it down because of the exchange we had previously. So sometimes you have to do a little compaction because the context window can be very large, but then you can resume a discussion that didn't exist. So yes, well, uh, well, I didn't see the identifier go by. What I have is that I have the Claude T-Continue command which actually brings up the previous session. OK. Uh, when I've done a normal workday, I don't need that because at the end of the day, I tell him, uh, double-check that you've filled out the change log. So for me, that's how it is, that's where it will be the source of truth. Uh, on the other hand, if I stop during the day because I have to do something, I closed the session, indeed, I go and I have the work not finished, there is an action that is still in progress, I will restart it with Claude T-R, continue, uh, and he goes back to the session. Uh, speaking of sessions and compaction, I read. After obviously, there are a lot of things we're still in the dark about with Lia, but I read that it was good to have a compact camera at 40%. So the idea is that it's an order, the orders that we place. So, I haven't shown it, I don't have an image, I'll have one later, but it's a terminal, we're working in a terminal, so for those who aren't used to it, it can be a little unpleasant. I believe Cloud Desktop can use Cloud Code. So there you have it , I haven't installed Cloud Desktop because Cloud Code in terminal mode suits me just fine. But for those who don't like terminals, Cloud Desktop can be used. Uh, another important point is that I installed Claude, uh, and then when I start it, I start it in a folder. That is to say, he does n't have access to my entire PC. That's in theory, in theory, he doesn't have access to my entire PC. Okay, let's assume that's true because anyway, if he has to go all over my PC, he's going to burn through all his tokens, he's going to get lost. So, there is... But anyway , how does that work now? We launch Claude, so we call it in the terminal, we type Claude, it's the UDE, it appears , finally the session appears and at that moment, the first command to type the first time in the folder where we have a project is /hinit. So, Claude is going to get started, he's going to analyze the environment. So this case, he's going to first ask whether we trust this case or not. So it's a kind of lock to tell him that yes, we can go into this file, we trust what's in this file. So he analyzes the file potentially as there is already the specifications, he will find the specifications, he will take them into account and he will generate the cloud. MD MD for Mark. So, it's a simple layout language that allows you to have bold text, titles, lists, and so on, and it's easily editable. It's a text file, the MD, but one that is very popular with AI. This allows them to have a more structured text than just plain text. So, once we've launched Init, it generates the cloud code, the cloud.md file, sorry. And that's where he will, uh, he will, uh, have a definition of his mission himself, a first definition. Contrary to what I've heard recently, it is not necessary to restart the init every few days. Well, one time is enough on this matter, on this project. If we start a new project, Claude is not aware of the new project. In fact, I did a test. So, maybe he can lie to me. I asked him, uh, I asked the chat if he could retrieve some information I had done on a cloud code session. He told me, "No, I ca n't." I say, "But then, a priori, he can't." Okay, and I say, "But what makes me sure you're not doing it?" He told me, "It's a matter of trust, uh, so it's a matter of trust with the users who have a duty to preserve, uh, to respect private data, and if we ever discovered that this was not the case, his reputation would be ruined." I see that makes you smile, Thierry, we agree. That's it, in fact, he can retrieve sessions, in fact, as the sessions are recorded on the disk, in fact he can retrieve them. Uh, you should know that the cloud.md MD file, when it has the root of the project, is a file that is always read. Every time we communicate with Lia, he always goes through that file. So it's really an important file when you want to give it instructions, rules to follow, or whatever. So if, for example, you said earlier that you had an accessibility constraint or something else, you can really tell it in the club cloud.md to say, "Here's a heads-up, each time you have checks to do, guards to respect, and so on." And there is also a cloud MD or instructions that are at a more global level in the very installation of the cloud. So it means that we can have working methodologies that are really global in fact, regardless of the discussions. Yes. By the way, on my PC, there is a cloud point in my profile which contains the cloud code installation and which contains a skill folder in which I put all the skills I have generated. So, I generally generate skills using the chat. Uh, he uses the skill creator himself, no, which is a default skill of Claude's. So the skill creator, we call it uh to call a skill, you have to press slash and the name of the skill. And at that moment, he knows he has to use that skill. Sometimes, you do n't need to call up a skill. If we ask him for a task, I don't know, give me a quote, he knows that in his skills, he has quotes , he will go and get it himself. So. Uh, so then regarding the safeguards, uh, we don't generate a whole page, we do three sections maximum and then we analyze, uh, we check the result before declaring it a success. And uh, so that's what I was saying earlier, CSS as a last resort, we exhaust native settings first. Uh ah yes so I had a problem because of kebabs at one point for those who don't know what kebabs are actually it's not that it's that it's kebab cases uh I discovered so what's also interesting with Claude Code is that it's very educational too it makes me discover things that I didn't know methods that I didn't know that he himself proposes that secures processes and that I adopt and that seems very relevant to me. So. So the kebab case is actually, I'm not going to go into too much detail, but it's a way of writing. So kebab case is when we write with dashes, we separate the words with a dash. So it makes a skewer with pieces of meat on it. Hence the kebab case, not to be confused with the camel case. The camel case, which is a lowercase capital letter drawn as a capital letter. So. No, it's not even that there's no shot in the glued camel. Yeah, it's all stuck together. And the words, the new words, each word is determined by the capital letter. That's the camel case. The snake, uh sorry, there's the snake case where you replace dashes with underscores. THANKS. Well, there you have it, one more piece of evidence. Uh, OK. So there was a little bit of a mess at one point because, well, with the kebab case, he had put a CSS class that was not well understood by WordPress and so my titles were not in the right format. So I say, "But what's going on?" And he ended up discovering the bug himself because of the uh kebab case. Uh, and so it was diagnosed thanks to MCP Firefox and the Death Tool. Uh, then uh, the result is, well, uh, there were uh, zero theme files that were modified since we kept them. All settings were made at the base level. Uh, I deleted Mentor so I earned 140M. Uh, all the customization, uh, like the Jon type, it's in Global Style. And he also generated, uh, uh, a MU plugin, uh, of 30 lines, uh, to answer your question, Olivier. So this is an M plugin because it consists of functions, or rather elements, that must be launched at the base. So, there you go, it's done, it's placed in a mu plugin but it handled that automatically. So the agent audited the data and the mentors, since as he was, we were on a clone, he had the production as a reference visual, he had the clone with Elementor disabled. So the pages were broken, but he had access to all the data, all the metadata of Elementor. So it allowed him to have uh the visuals and the code directly in the clone's database. Uh, we converted, uh, the pages and articles. Uh, there was a small quality audit of the content that was done. So, I was able to make a few small changes. Uh, there were some bugs and he cleaned them up. Uh, so that's the agent. And me, uh, well, I actually had the first action, which was to tell him, uh, analyze the design of this site and give me, uh, give me the system design, well, report it in the system part of the design part of 2025. So the color palette, the fonts, the spaces, uh, the heading levels, uh, well, everything that is used in the site. He analyzed the production site and generated a design.mmd file for me. So then I spent an hour or two rereading it and realized that, well, he had discovered that there was a font that was loaded but was never used. We cleaned up. Uh, so, like that, I was able to clarify the design, make decisions in this design.md file, and then when the project was launched, well, he first implemented this design in 2025, and then he only had to retrieve the fonts, or rather use the fonts that were defined, the colors that were defined, and so on. Uh, and then, well, after page by page, when he was putting the models in place, I would go and check and make corrections. Sometimes, to save tokens, uh, well, I tell him, uh, if there's a modification I can make, tell me, I'll make it. If it's a setting to be made in the uh in the font size or something like that, I'll define it myself. He can do it, but uh, we'd be better off saving tokens by doing the actions ourselves. So, we need to find the right balance between letting him do whatever he wants but it will potentially involve a lot of tokens. So, uh, speaking of tokens and subscriptions, uh, on this project, I started with Claude Max. Before, I had started a first project with Claude Pro, which is available here for €18. Well, after 2 or 3 hours, I had reached the limit of my credit and I had to wait another 2 or 3 hours to be able to benefit from more credit. So very quickly, I switched to Cloud Max, but that was on a previous project, and to this day, so I've been using it for 3 months, I haven't exhausted Cloud Max. So. And the subscription costs €90. Uh, 100 dollars is 90 euros, that's, uh, there you go. Well, there you go. So in fact it's a dialogue with the machine. Well, the point is that while he's working. So sometimes it's true that it's a bit long. There are actions that I believe the longest action must have lasted half an hour. Uh, sometimes it's a few seconds, but more often it's a few minutes . Uh, sometimes it starts with 5 or 6 minutes and so it's another way of working because at that moment, well, I'm going to read some dog, I'm going to test something else, I'm going to check something . So in fact, it's like we're working as a team, there are two of us working. Well, while he's cooking, I'll do something else. We meet up, uh, well, sometimes I do something else, like hanging out the laundry that I work on from home. But well, it has to be done. So it's best to do it at the right time. Well, let's say that it frees up time in professional tasks, it frees up the mind to think, to anticipate, uh, to add things to the to-do list because while we're waiting for a result, we're still connected to the project. We think to ourselves, "Ah, but in terms of security, what have I planned, or in terms of and so forth? Ah, look, this feature." Okay, there you go. Uh, Cyril, yes? Do you have an example of the before and after screenshots? Ah well, it's the same thing. Ah, it's the same. Well, otherwise he did a bad job. No, because it could be adapted. Perhaps if the blog is a little bit old or if they had used Elementor to really touch it up, add a graphic touch, I don't know, visual effects or stuff, there could have been a little evolution too. So, uh, it just so happens that I'm the one who originally created this site . Uh, I think this is one of the first sites I made about twelve years ago. Uh, I did it first with a theme, uh, a free theme I think. Uh, and it was me who migrated it to Elementor when the Elementor hype arrived. Uh, and so, uh, it's me who made this site. So it's true that the design isn't great, but my goal was to reproduce the same design. The next step, if I have the time, will be to give it a new design using Cloud Design for example. But here, the proof of concept was: can I create perfect pixels? That was the goal. So, to answer your question about uh uh things about effects, there were no effects, it was really very basic. Uh, you can go see it at filotude.fr, but I have done since now that I have validated this proof of concept with this example, I have made another site for one of my clients, much more elaborate with a design that had been done by Ines Fipo, which was really very elaborate. I managed to migrate it. There were, uh, two or three effects that were a little, uh, tense. Uh, like, there were little vignettes that were just floating around like that. There was some text, uh, which in a dynamic way, uh, in a title, there was the "le" which was surrounded, uh, like that in a dynamic way. There was a line that came and went around it. Uh, there might have been yet another effect. And actually, I'm going off-topic here, from what I'm trying to explain. It's not in that context, but what I did was, well, actually Claude generated the code for that, to make my moving thumbnails, to make my text surrounded. He did it really well and I said, "No, I don't agree, I want us to find a solution together." So, we found two plugins, one that does the text in a circle, the other that does the moving thumbnail. And so, I implemented them. Uh, and I have... Oh, well, oh no, that's it, Thierry, it's on this project that I used your carousel since you released a carousel extension that works in block mode. I had to complete it because, well, at least I can show it this way. So, with my cunning, I'm going to show you. We're waiting for it to appear. Is everything alright ? Yes. So there you have it, Finitude. And actually, it's, uh, it's in a book. So, this part is based on your carousel Thierry which I had redrawn because I needed the arrows to be in the design, I needed uh the little dots underneath. Uh, so this is actually an addition because it didn't exist in the base version under Elementor, it didn't exist, uh, but I took advantage of it, I saw that you had released this, I said well, I'll test it and there you go, so it allows you to do this. Uh , then there was also another thing, which was integration. So, he gave me some code to integrate Mosparo because the Spectra form doesn't integrate Mosparo. Uh, knowing that on the new project I made where it was necessary to surround the text and so on, uh, well, I didn't use Spectra, I just used Jet Builder form builder uh to make the form, well, to make yes the contact form, and Jet Form integrates Mosparo by default. So the choice was made more in that direction. In other words, what uh form system uh is capable of responding to my request? Uh, so here the "I" with, uh, in this case, we are in project manager mode with my team. So my team is an employee who costs me €90 per month and is called Cloud Code. Uh, you have to frame it and follow it. Delegation and verification are necessary. Well, that's what I already said. I am constantly learning, I take advantage of this advice. When I don't understand, I ask again , I say "But explain to me why that?" Well, for example, this is anecdotal, but at the kebab case, I said, "Wait, I've never seen that before. What does that mean?" And that's why I went with an explanation where he showed me all the documentation and I understood, that's the story about Kbabe. And you, you learned, but how did you manage to make sure that Claude learned too ? But he was the one who taught me that. Yes, but during this project, are there things that you say you need in the next project, that I must not rediscover, or rather, that he must rediscover new things in fact. Have you dealt with this aspect of memory? He has, he has, it's one of his basic instructions. The POC, the proof of concept, was there to improve the process. So the WP skill, uh, FSE migration, uh, and its entire change log procedure, the whole procedure is done to, uh, improve. Uh, he keeps the scripts he generated to perform actions. He keeps them and he includes them in his WP skill, uh, FSE migration. So he has an obligation to do that and he generates it, so I discovered the terms quirk quirks, which are kinds of tricks and workarounds. Uh, so he knows, he has all that, he has little by little, he has a library of quirks of things that you need, well, for example, the kebab case can get trapped on that. He is learning. So, that's what's really interesting, it improves with each project, and the project I did next was much more elaborate, and I got a result that really blew me away. I saved time and so on. And you checked that physically because sometimes Claude says yes yes uh because in fact it's in his context. So actually no, it writes the files, it writes the files. There are the, there is the Louise of quirk, there are the scripts, there are the uh and in the skill, there are uh there are the, there are the quirks and the bypasses as we are, what is it in English, I don't remember, there is a term, uh no, the goocha, the traps. Yeah, it 's gocha. So, he made a list of gocha, so he has his own terminology which is rather Anglo-Saxon, right? Uh, but so he knows that he mustn't, he mustn't get trapped by this, this, and this. Well, afterwards there were very few hallucinations, very few really, and a great stability, something I did n't have with Chat GPT which I used for 2 years. When I asked to modify some code, it went off in all directions, he changed a lot of things. So. When he modifies something for me, he only touches one sentence, one word, one function. There you go, that's where it's staying and everything else hasn't changed. That's really what gave me confidence to go ahead with a site migration because I wasn't going to do a site migration if the result was a disaster. So we keep control, uh, with reorientations along the way, uh, because there is no total automation. So each time there are steps, uh, we move forward step by step, I can change my mind depending on how things present themselves and where to seize an opportunity when, well, I added this carousel, uh, well, that wasn't planned at the start. So , I had a quick question, it's uh, Clone, actually you had, I do n't know, 20 or 40 articles there, in fact he dealt with them one by one. Uh no no , the articles actually there is an article template. All right. But how exactly did he do the cleaning each time? Who is it, or did he create a cleanup script? He uh, so there is very little cleanup to do uh because the articles were the old articles, they were in the old WordPress editor mode. The new ones were already in FSE mode so there's nothing to change. And the only thing he changed was that he converted the articles in editor mode, he converted them into So there, there is nothing to do. It's like if you go to an article, you do a bulk conversion, they are converted in a block. Uh, I had another project where I actually developed an extension, I should publish it, which cleans up articles. There were 700 articles there; it was another project I did before where I had 700 articles. It wasn't feasible to do it by hand . But with the other code, he uh removed the line breaks, uh transformed it. I had H4 tags which were used to take an image and the text to make the caption. Well, he, uh, he noticed that. Finally, he created filters and uh, he cleaned all that up. I generated an extension, I'll try to publish it, it's buggy but it's a really interesting page and he made me an amazing interface. I did the project by hand with him and afterwards I developed the extension that I would have liked to have . Okay, I'll try to share it because it might be useful. The gain, uh, well, I don't have an exact figure on the timing. Finally, I think I put 4 days, presumably 4 consecutive days. Well, the advantage is that I can do something else while it's working. Well, the limit was that it was a simple site, but since then I've made a more elaborate site and it went well . Uh, we'd have to see there, I might have a site with that to see what it would look like. Uh, there was no animation, but on the project I did afterwards, well, there were animations and it worked, and uh, and I worked locally. So, if we need to work directly on a server, it might be more complicated. I don't know about that . Have you already tested it with Thierry, using Cloud Code installed on a server and working on the website on a server? Your microphone is muted. In fact, you can, uh, there is, so it's always tricky to go, uh, directly to a server, uh, but with the MCP, in fact, we can connect, uh, for example, for example, I am an elected official of my municipality here and uh, I have to regularly post news, events and all that, and so I get sent things in bulk, sometimes it's a PowerPoint, sometimes it's a poster, and then I have to write the content. Finally, and this is kind of the least fun part . Actually, I give it to Claude, he automatically does the events, the news, everything is a mess on the site. So in fact, he is connected to the site and uh in fact with the pay-per-access there, in fact, we can give him possible actions in fact on the site. So, all of this requires developing a small plugin to do it. But as a result, he can actually go directly to do things on the site. That's why earlier I was asking whether it was the AI ​​that works directly because we can also come with an MCP or just the PI remains in fact we can go and dialogue with a site and do things in H which and it can go as far as building a site. Oh, well, it can even go as far as building a website. Yes, we can do things. Yes. All right. OK. Well, I preferred to do it locally. Anyway, I did it locally because it seemed simpler and because there is no latency, no risk of losing connection, etc. So, uh, and he had all the files, all the files, at hand. So for me, that was the point. Um, and regarding what you were saying, I can do something else while I'm working. Well, while there's work to be done, I don't want to go hang out my laundry. There is a command/remote in fact which allows when you have the Cloud application on your phone and in fact you can have on your phone a view of what Claude is doing and in the Cloud application you can see where he is and you can validate things, talk to him even without being next to him. Slash remote and I send it to my mobile. Yeah. OK. In fact, when your mobile is connected to your cloud account, when you go to the cloud code section of your mobile, you will be able to find the exchanges. OK, agreed. I'm watching your Netflix series while he's working, you know. Yeah, OK. Uh [laughs] not really. Uh, so I have the V2, that's what the MCP Quest was connected to, and well, it's done. Uh, and I also connected uh with the MCP Chrome Lighthouse uh on another project recently, I did uh a pass uh I had to do an audit of a site. So I did the audit and then I thought, let's see if I do a Lighthouse audit. So, Quest was over in 20 minutes. Uh, he gave me the summary, uh, but I didn't go into it because it wasn't the purpose for my client, but I still provided it as an appendix to my audit to the client to say, well, if you want to go further, there might be things to see, but uh, but you have to dig deeper . That's not it, that's not it. But it's interesting because, uh, because it gave me the opportunity, I provided it there for a clear explanation, but I also did it on the site that comes right after this example. Uh, so which was more elaborate, uh, I launched, that's where for the first time, I launched the HP Quest MCP and I saw that there were things that I hadn't done. It's a site that I developed myself, well with Ines, but uh there were things that I had overlooked which are not much but uh for example, there were words in Spanish, well you have to indicate in the code that the word is in Spanish. So. Well, if you don't have something that reminds you, there you go, there weren't many non- conformities but I found it interesting as a method of finalizing a project to say well, if we're going to be really thorough, we'll remove all the... there are three levels of non- conformity but so we can at least remove the red non-conformities. Well, there you go . Uh, so I wrote an article about this project and you can find it using the QR code or the URL below. So. So. Do you have any questions? We have one minute left. [laughs] We can, we can go overboard. We are allowed to do so exceptionally. OK. So, you made your skill available then, or uh, the skill, well, WP remote, uh, WP migration FSE. Yeah, that was your personal skill. Yeah, so I have the project, I published them all on GitHub but privately uh because uh I realized there was customer data and I need to clean it up. I ca n't publish them like this, but uh, I hope I'll have time to clean them up because, well, it's getting richer, you know. It's, uh, in our best interest to do that. Well , I benefited from your work, from that of Fabrice du Carme, from what is finally shared by the gems that Camille Rou finds. So. So, uh, we have, well, I'm finally in the free software world, I'm convinced that we have an interest in sharing information. Cyril, can you cut the presentation so we can see everyone? Uh, no, not that there are a huge number of us . Ah yes, I cut while doing that. So. THANKS. And my question is because, well, ultimately, the starting site, it seemed relatively simple. You had used Elementor but it wasn't there was a need for layout on more complex sites. Do the layouts created using Elementor truly adhere to Gutinberg standards? Is it, or is it only columns with... That's what you were saying earlier with a lot of CSS, so avoid that, but will it use, I don't know, the media block? Is he going to use things like that? Uh, so, uh, so, I haven't mentioned it, but there is, there is still a small optimization process because, for example, in the footer, I noticed that he had put blocks within blocks within blocks within blocks a little too much, uh, not in an unreasonable way. I'm exaggerating in my wording, but uh uh I corrected him on that. I said, uh, optimize this for me. And then I did it by hand and I said, "You see, we can go further." Ah yes, okay . Okay, well, I'll make a note of that. So. So there is that. But otherwise, uh, uh, I'll do it if you don't frame it well, of course, how does the FSE work, what are the, uh, you see the constraint you were saying, use native blocks, use native styles, in short, make sure to, and as a last resort, add a CSS class and make a CSS overlay. If you don't hammer it constantly, it can eventually uh ignite and put an HTML block in there and do a big brute force thing inside it. I haven't, I haven't, uh, I have n't had that case too much, I don't think. But uh, that's because you may have framed it a little bit beforehand. But if a novice says, "Hey, here's a JPEG file of a page template, and put it back in, convert it to FSE, it'll do it 80-70-80 % clean, you know. Uh, but when you open the Gutinber code, you'll say, 'OK, that's not right,' because there are HTML blocks everywhere. So it'll be pseudo- pixel perfect, but not 100% native. And then there are subtleties specific to Gutinber because Gutinber will declare things in a `` tag. In fact, when you open the Gutinber code, when you display it in code view, you have HTML comments inside, you have Jison data, and then you have data in the tags, so CSS classes, for example, or styles. Well, in fact, there are orders to respect, and if the order of the CSS classes, for example, Jison, isn't the same as the one in the HTML tag, well, it creates an error. And that's where we get the famous block that appears, attempting to recover. There you go, I've had it, that's become something he knows he has to check. Yeah. Yeah. That's recurring, and even when you frame it, there's always a point where, what you have to see is that it works very well for the first 10 minutes, and then after a while the context is a bit too big and he hallucinates. We often say that hallucinations start to make up nonsense. Well, in this case, it's just that he's coding nonsense. Okay . In both cases, well, so far, I haven't had that problem. And the overall assessment is very positive for me because there's no... so the concern is that I won't put any code in. I'm not a developer by training. I 'm a website designer, but I don't... development. I do a little bit, but I don't have the ability to analyze thousands of lines of code. Uh, so I won't put online any code that seems a bit complicated or a bit long that I do n't fully understand. Snippets are short; they're for creating a small effect in one place. Uh, I have, in these instructions, there are security guidelines too. You have to be careful to respect the security rules. Uh, here, everything I've done is just pages that are published, so there are no functions in them. It's separate, you see, apart from a form, but the form is provided by a form extension. So it's not the extension that creates the form and could generate an error. So that's the main advantage of FSE. FSE is still HTML files, apart from the function.php PHP file and then possibly a few features that we can add to the theme, but It's practically all HTML, after all. And here's a little tip: I use Obsidian a lot, actually—the famous second brain—for my note-taking. The cloud, the global cloud point, is instructed to always invoke my... my... what do we call it? My... my repository, well, what's the term? Repository, yeah. And the whole repository is built to have entry points. When it arrives at an entry point, depending on its requests, it's directed into subfolders. All of this is interconnected with the Obsidian naming convention, with tags and so on. So it allows it—it's really Claude's second brain— and sometimes when I come across a problem, I'll say, "Hey, put this in the... capitalize it, reference it." And so the next time it arrives, it... The instruction is always to say, "Is it in the repository or not?" Do I already have an instruction that allows me to respond to a need, a problem, or something else? And if it does n't find it, well, then it will look for it itself. It's on your Obsidian machine. Obsidian, it's on my machine. Well, the repository is on my machine, but you can find it there. Well, you can find the repository, maybe if you take the cloud option with them, you can find it everywhere. But, uh, so that, well, I mean that, it's a problem of knowing where you put it, how you share it. No, but so it accesses it directly... Oh yes, there it does. Yes, yes, it has access, in fact, that's why when you said, when I launch Claude in a folder, it doesn't know the other folders, actually. Yes, it wanders around, well, it won't do it without asking your permission, but It can wander wherever it wants on your computer. So, uh, yeah, it could. Yeah. Hm hm. So, there you go, it knows where my repository is, uh, it knows what it finds inside. For example, there are all the accessibility rules. Well, sometimes you have 115 performance audit points , the op rules, you know, there are a lot of things there, actually. And it knows that when, for example, it's going to create a button, it'll say, "Hey, how do we make a button?" It'll make sure that it complies with the rules. You see, it's OK. And I'm not obligated to invoke an MCP server, to be dependent on a serial number because today you're using Quest's SMP server, uh, well, that's going to generate costs for them because all of that is still machines to maintain, so all of that, so you 're not immune. that tomorrow they make this service paid, the closure, well, you see, so the more you capitalize on things, the better. But you shouldn't internalize everything either, because there's the problem of updating all that. But, uh, and that means you have a Quest section in your Obsidian? Uh, yeah, well, I have a lot of stuff in there, actually. It has everything. It has my identity. So, in fact, it knows who I am, what I do, what the different structures are that I work for, what my methodologies are. So, in fact, there's a folder for identity, offers and services, methods and processes, tools. It also has the history of all the projects. So, for example, the difficulty we also have is, for example, you did this work on Elementor, and then in six months you're going to do another one, and then maybe you haven't forgotten that one because it's the first one, but But at some point you'll say, "Ah, I don't remember which project I used to put Thierry's tool for making carousels." The kind of classic thing Leenir is starting to lose a few brain cells [laughs]. And so, well, actually, your second brain has capitalized on it, so [clears throat] you can ask him, we go to each project at the end of a project, do a bit of a review of what we did, how we did it, what tools we used, and so on. So, it's really specific to each person, their own method. Do you plan to do an article on the basics of using Obsidian? Because I imagine it's quite elaborate, but just a point, the 1, the 101 of Obsidian. Well, actually, I know it's in a proposal for a conference at an upcoming World Camp, so I don't know if it will be accepted. Okay, well, we'll see you there. [laughs] But but The idea is to address these points, to also discuss the possibility of creating cloud plugins. This is incredibly interesting. We can create our own marketplace. We can register it there when we're working collaboratively, so we'll see more about that during the contribution day. I won't give too much away, but the idea is that, for WordPress France contributors, we can create a cloud plugin. This plugin can be downloaded, updated, and developed; it's a GitHub repository. And then, behind it, we can have skills, scripts, commands, agents, and so on. This is a plugin that we install, and so we can all have the same one . This is incredibly interesting because we have the same work tool . So, in a business or community context like ours, this can be very useful because we all have the same tools, and if tomorrow one of us... We update it because we've acquired a new skill or updated an existing one, or something else. We put it in the plugin, and then we do a plugin update. Cloud even knows this; it can configure Cloud to auto- update. It can say, "Hey, this repository has been updated," and it will automatically update itself, and we'll always have the correct skill updates. Okay . Super interesting. Anyway, yeah, it's always interesting to have these kinds of challenges, to step outside the box a bit because it allows you to try new things and, above all, to develop your skills. That's good. So I think you've learned more here than with Camille's posts, where sometimes it's interesting, but putting it into practice is always a bit complicated. So yes, well, here it's about getting your hands dirty. Uh, if I had done it manually, I would have done what I know how to do it. Uh, there, I was faced with someone who brought something new, who... who did tasks that freed up my time and mind. Uh, so it's... it was... Yes, it's very enriching so far. With hindsight and the objectivity I know you for. [laughs] Do you think that if you had done all that yourself because, as Olivier said, we weren't working on a complicated site, do you think it would have taken you more than four days doing it completely from scratch by hand? Uh, oh yes, oh yes, oh yes. Oh, no problem. Yes, yes, yes, yes. No, no, no, I would have taken... potentially maybe a week, but I did it with a different site, you know . Right after that, I started a much more elaborate project, uh, and I delivered it. I'm waiting for the client to approve it, but I'm waiting... If he tells me OK, I put it into production. Because what I've noticed with Lia is that it ultimately saves time in the sense that you're not the one doing the work, but it doesn't really save you time because you still have to supervise, control, and so on. So, you have to, and it adds a bit of extra mental workload because sometimes you might think, "I've thought of a new feature or something," as I was saying earlier, and then, like you said, when your brain isn't actually executing the task, it doesn't get the self-satisfaction of completed work. So, you feel like... I know I have some days where I feel more tired than I am, even though I've been working all day. So, I agree with you because it actually speeds things up, and so there's a There's actually a difference: we do more things. We do the task, we follow along, and there are times when we have to wait for it to be finished, but we're not resting. We're moving on to something else, and that makes time feel denser. And then there's also—maybe it's because it's new that next year I'll be tired of it—but even outside of that, I'm running around thinking, "Hey, what if I told him this, and if he did that, girl, and hey, I could try that." So, I've moved on to a higher level. It's not migrating a website; it's managing a client. And on top of that, it happened with a client where there's tons of information, where I'm drowning in it, with emails, emails with 10 points to address. Luckily, I have Claude, and an email with 10 points to address, but four people to deal with. So If I had to do that with my limited skills and limited brainpower, it would take me all day. Here, in two hours, I was able to process a huge email. The problem is, the client I'm dealing with—I wonder if he's not a bit of a handful—is throwing things out there, topic after topic . I have to keep him in check. I mean, we'll see later, we'll finish this, we'll see later, we'll see later, we'll see later, because, well, that's an attitude clients can have when you start a project with them; they want to cram in as much as possible before things get complicated and the bill increases. Actually, I wrote a LinkedIn article about this. I use the ADR method a lot, Architecture Decision Records. Basically, when you get an email, a client sends you something—a decision—they'll say, "Okay, now I'd like the button to be green, I'd like..." "Add this feature and so on." Well, basically, you give that to Lia, she makes a standardized document with our databases in mind, and you say, "Well, on such and such a day, we agreed to make the button this color." And I make a new ADR which says, "On such and such a day, we agreed to add this feature." And that's how I'm going to implement it. So, when Lia starts coding, she has the whole history of what was decided and everything that was rejected because sometimes she can go off on a tangent thinking she's doing the right thing, but sometimes I might ask her for something because I myself forgot, and she'll tell me, "Be careful, in ADR72 we said we weren't doing it like that," and you see, so there's that. It actually forces you to have slightly stricter methods, or to find your own method. Hm Hm. OK. Uh, I'll have to leave you now. This is interesting. Yeah. Thanks Thierry, thanks Jean-Baptiste. We didn't hear from you, but you're alright. You did leave for a moment, though, huh? Yeah, I arrived this morning, it was complicated, sorry. Uh, no, it's all very dense. Uh, I haven't gotten my hands on it yet, but it does scare me a little to face this, and I'm not super comfortable with the idea of giving access to my entire computer via the console. Uh, indeed, as you mentioned earlier , it's a contract of trust, but you don't know how far he'll go . Uh, in my opinion, he doesn't have the interest or the energy. Uh, that consumes resources, we mustn't forget that. And uh, why would it consume resources? To retrieve information. Uh, he's going to search a computer, he's going to Trying to grab information. Google already does that. Okay. So, well, Google does it for everyone with Gmail addresses. Uh, their emails are scanned. Okay. Uh, I'm not sure it's in Lia's best interest to produce anything other than what she's asked to do, uh, to do parallel work. Because if, while I'm asking her to transform a page, she's going to rummage through, I do n't know, my social security files or my contacts, you know, personal stuff, uh, what's she going to do with that? No, she's not necessarily going to do that. On the other hand, you can have problems if you use Cloud Cork, or cloud cowork, in fact, she can, uh, manipulate programs on your computer and, uh, execute actions or other things. And in that case, it needs to be well controlled because she could potentially send an email without your knowledge, thinking she's doing the right thing because you asked her to do things, and so yes, that can happen later in terminal mode or something, it's Yes, I think there is less risk and above all the fear we often have is to say "I'm afraid of losing control of the skill because that can also be that sometimes we can feel dispossessed of certain things. So at some point, we also have to accept that AL allows us to do things that we might not have allowed ourselves to do before. Uh, Cyril was talking about development, saying I don't do development or something. Well, maybe he'll do it now, but it's Claude who will do it . In fact, he might just be checking that it's doing things the way he asked. Uh, maybe he 'll ask our agent to check security or something. So it will never be 100% reliable, but I think we'll see, or rather we're already seeing, for example on the WordPress repository, more and more plugins arriving because anyone can develop plugins now. And besides, I saw an article this week where premium plugins are actually declining in terms of other licenses because today you were talking about using Gravity Forms or some other tool, well you say but today I created my own form solution, you see that's what it can ultimately bring you. Yes. Anyway, I prefer to use Gravity Form rather than something I do n't know, whether it's made by Unia or by a developer with 100 users. No, well, actually, there is a real change in mentality. We, we will say that we have the knowledge of the fact that when you pay for a license, it is because it will be maintained , secured, updated and so on, that your own code, well, in fact, after 6 months, it can have security flaws and then it's over. But for many people, in fact, there is the aspect, there is the satisfaction of having done it yourself. We can see it on the posters now, well, stuff, uh, we have some really wow posters. So we, as graphic designers or at least sensitive to this, would say it's a horror, it's overloaded, it doesn't tell a story, we don't even know where it is. So there you have it, there are some because we have an expert eye on this, but for newbies, it's a new Eldorado that opens up, you know. So, and we're really going to see that at all levels. Yes, yes, yes. Yes, yes, yes. I can see it. I'm so annoyed, I have a... we have... we have... we have... cut the recording there or not? Uh no, no, not on Ostera. I'll cut it if you want. We'll say goodbye, okay? Bye. [laughs] And the off-air part starts, huh. And the off-air segment begins. Uh, it's cut off there.