Week 7S Update - 14 Oct - Pad AB Unreal BP Children, Provider Cycles, Oruta UI and +

Welcome to another week and here I am going to explain all the content I uploaded for the week from October 7th to October 14th.

Youtube

Starting the moment in which I am recording this video so let's go there as always here I bring at least a couple of videos on how to create PAD in this case Remember that it is the new channel that I have for YouTube to show a little how I am creating my first video game and we continue here working a little with what the pads are or how we can add certain characteristics in this case to go from point a to b using the interset movement component to precisely make the movement and here too.

We have another pad or rather another video associated with a real one that talks a little about what is the inheritance of blueprints, that is, we place a blueprint as a child and learn How is the behavior precisely when we want to move or interact with the parent component What happens with the child there we see several little things with that in case you also find it interesting.

A demo means an introductory video in this case for the creation of an application or blog type module understood with a list and detail associated with Inertia.

This is about the wire object that as they say is the best connection or the best friend we have to connect what is the server with the client here we also have a video as they say a little personal In which I tell you what are my considerations to use CodeIgniter 4 When developing and for Who could apply this type of framework that in a few words are for projects that could be considered small or directly also for people who do not want to follow a learning curve as complicated as that of alabel or at least long is a bit here what was commented Then here also a video of what are the original publications of the Laravel 10 course that I am also publishing little by little in this case associated with the seeders to create test data.

Here is another demo, in this case for what is the javascript and the js of Livewire specifically, here we are going to see how to use CKEditor. Well, first we are going to learn some interesting things about the js of iware, which we have already presented a little bit. We are going to investigate some more things, but above all we are going to focus on the part of integrating this type of plugins and with this being able to communicate what is the javascript of Livewire. Which is obviously going to be necessary here because, for example, we are going to associate it as is. Here we have a text block, obviously all this information has to be managed by Livewire on the server in order to be able to manage it and pass it to the database, and we are going to do this through Livewire javascript and we are going to tie it, as they say, with another external plugin, in this case through node from sec editor. We are going to see how we can make this communication of both worlds.

Here we also have another somewhat personal video that is to highlight the code, in this case using Vue, we can use the following plugin, the highlight one.

Here is also another video that I am publishing little by little from the original Laravel course that is about ORUGA UI How to configure it with Vue I am coming here and this would also be from the original Laravel course in this case again with uruga and how to use it together this would be the presentation and this how to create a list this video is also something personal and it is something that also happened to me here when I am developing the free development application I am always giving some little tips here that I have a Provider that Remember that it is the global way that we have to handle as who says the Data of the application, understand the state of the application I have a couple of providers here in this case it is to handle the subject to which I refer I have two really for something else but I refer to this one for the subject here in the Main which is the startup file here I have this one with the list in true you could say that it is the default value that it is understood that every time something is changed in this property that we have defined here in any part of the application since we have it in the highest part this method would automatically be called and would rebuild What was the problem I had Note that I have it here defined with the Listen to true and here I have it defined with the list to false which would be this other one that we have here then this method is in charge of obtaining the theme at the beginning to configure it at the application level apart from that again when the theme is changed in this case in light mode dark mode which is what this Provider does then what it does is put the entire application in dark mode according to the theme that we have defined here right here This is the one that would be in charge So the problem is that in conjunction with this method that what it does is initialize the Data and with this also take from my server What is the theme that is configured as the default user and being able to configure it at the application level the problem that just when we did this update it does not matter if the value of acting for example this is a noisy value as you can see here if we already had this in true it does not matter automatically that also takes it as a change and therefore this was called again What was the issue that when this method was called again it was executed again therefore it was updated again and called again it came here again the whole widget was built again and called again and there was an infinite cycle That obviously sounds That obviously that was not what I wanted So these lists are quite like who says tricks in that sense eye the logic is fine but you have to be careful what I mean because independently here what I placed here at the end was going to be called again because as who says the father or the first one that is executed is this So it is a bit here I have talked about it in that video already finished this already this Practically everything we saw for YouTube

Blog

So let's move on to what we did on the blog here a little bit what was commented on a video published to start with the Livewire javascript here about the providers that I was telling you precisely Here also about View highlight and here is also a somewhat personal post to which I indicate a comparison between what is Laravel inertia with the creation of the traditional schema that would be a RESTAPI and that you consume it through Vue re since we remember that inertia also has Vue so that's why I put the View connection here what is it that we can use according to our needs here another is how to use when to use CodeIgniter 4 and this is also a little bit with what was commented at the beginning of the property that we have called entangle that is being the best friend of alpine then it is what was commented here and for the rest now with this we finish what are the updates on the blog.

Courses

In terms of course level updates here we have the following starting with the inertia course Remember that I also carry this for the book so here we are implementing a shopping cart and right now I will show it to you but we are creating here the initial structure that would be the visual part We are simply focusing at least at the moment in which I am recording this video on the functional part then we can apply a layer of css to make it look nicer we do the functional part and also here we are making the database replica so that not only the session remains but we also have it there directly in the database and we can replicate it At the time of login which was precisely the last thing I did at the time in which before recording this video in the Livewire part we are here working with the section editor part and that is why I published the introductory videos that I told you about before about CKEditor how to integrate it Here you have a little more detail apart from installing it we have to here indicate to Livewire not to update this component, the CK Editor when we are building the component when the component is changing because if not it will destroy it apply certain css to the CKEditor so that the style is not lost, understand that I have an overwrites the entire style of the application So now we have as who says that we have to activate it again a little bit of what was commented here and here the properties that we have in Laravel some characteristics that I consider to be important this more than anything in a theoretical way well around here a little bit of what was commented computed properties and other options that you have here for the properties and finally around here what it would be for the blog again here we create a simple application type detail list for a blog and we are starting well this week there is no coupon for Emi because I take it out already for the next one and this would be all that I covered for the mentioned week So without further ado I will see you next week.

Integración con Inertia - Carrito compras

  1. Componente de Vue para administrar un Item del carrito

    1. Vamos a implementar la opción de agregar un producto al carrito.

  2. Compartir datos del carrito mediante la sesión a Vue

    1. Vamos a realizar la adaptación para compartir la sesión en los componentes de Vue.

  3. Listado de Post en el carrito: Adaptar

    1. Adaptamos el listado de post del carrito al nuevo esquema.

  4. Vista de detalle del carrito

    1. Vamos a crear una página para el detalle del carrito.

  5. BD: Crear migración y modelo

    1. Vamos a crear la estructura para trabajar con la base de datos.

  6. BD: Registrar cambios en la base de datos

    1. Vamos a guardar la sesión del carrito en la base de datos.

  7. BD: Replicar carrito de la base de datos a sesión al momento del login

    1. Vamos a escuchar cuando ocurre el login y replicar en la sesión el carrito.

  8. Componente de Toast de Oruga UI

    1. Vamos a utilizar el componente de Toast cada vez que realicemos un cambio en el carrito.

 

Integración con Livewire - JS

  1. CKeditor: wire:ignore

    1. Vamos a evitar que el CKEditor se vea afectado por las actualizaciones de Livewire.

  2. Ckeditor: Detectar cambios al escribir

    1. Vamos a conocer como obtener el HTML generado por CKEditor y un evento para los cambios.

  3. Ckeditor: Registrar cambios en una propiedad de Livewire

    1. Vamos a registrar el HTML generado en el CKEditor en una propiedad.

  4. Ckeditor: Establecer contenido inicial

    1. Vamos a establecer el contenido por defecto al CKEditor.

  5. Ckeditor: Aplicar CSS al editor

    1. Vamos a aplicar un CSS al editor para que que se distinga los elementos Hx y listados.

  6. Node y JavaScript de Livewire

    1. Vamos a hablar de si podemos usar Node con el JavaScript de Livewire.

 

Integración con Livewire - Propiedades

  1. Opciones en las propiedades wire:model

    1. Hablaremos sobre algunas propiedades antiguas para diferir la actualización de las propiedades desde la vista.

  2. Propiedades computadas

    1. Vamos a presentar las propiedades computadas.

  3. Otros datos sobre las propiedades

    1. Vamos a conocer otras características de las propiedades

Integración con Livewire - Propiedades

  1. Cambios iniciales

  2. Página de listado: Estructura inicial

    1. Vamos a crear el esqueleto de la app.

Acepto recibir anuncios de interes sobre este Blog.

AaB Pads and Child Blueprints, When to use C4, Providers and Infinite Cycles, Seeders and Caterpillar UI Laravel Vue highlight - Courses Inertia Shopping Cart, Properties in Livewire

- Andrés Cruz

En español

© 2025 Copyright | Contacto | Acerca de | Versión PC

Su experiencia en este sitio será mejorada con el uso de cookies.