Weekly Update 04-11Nov - Inertia Testing, Alpine Introduction, Livewire Events and more


Welcome to another week in which I automatically start commenting on updates to all the content I uploaded for the week of November 4th to November 11th.

YouTube

So as always starting a little with what I published on my YouTube channel here I'm going to tell you about last week's update here we also have what is following the basic course, the initial one with larabel 10, which is again consuming, well, creating a post with Vue and a restapi.

From here we have original content in this case it is part of the Livewire course and it is how you can use the toas, that is, show a message based on some confirmation here the interesting thing is not so much using the toas but it is the part of the handling of the events that also once some event happens on the server, understood in the component that we of course send it, it is customizable, we can also listen to it from javascript to do something and in this case it is to show a toast in practice, for example when we delete a record, a todo we send a message via toast through that event that I was telling you about.

Here is also an exclusive YouTube video in this case for the management of domains and subdomains here I show you a little how it is or how I have the free development application configured remember that I have three modules there the Academy one which is the online store for books, courses and others, the blog itself and also the administrative part then I have a subdomain for example for the Academy website therefore the Academy website can only be accessed through the subdomain of academia.desarrollolibre.net which is the subdomain this subdomain could also perfectly be another domain if you configure it that way but in this example it is a subdomain again therefore any navigation that I do here for example here in the Slash books is only accessed because I configured those routes for this subdomain I show you how it is it is very simple but it is also important that you understand it obviously this is an example and you can configure it for different purposes for example for other domains and it is also important to note or specify that it is the same application, that is to say an application has a domain and two subdomains for my example of course but this again You can customize it to your liking. I'll show you a little bit about the settings there.

From here I show you a little about the unit or integration tests in Laravel Inertia, what we have there as a difference or the addition that we have if we compare it with the basic Laravel, which is the Inertia object with which we can do some tests for Inertia, in this case the fundamental difference here is that we manage components in Vue, understood from the controller, and from the basic Arbel they would be views, therefore there we have to make some changes and with this some new comparisons, it is also important to note that all of this, the unit and integration tests for Inertia, are exclusive to the controller, therefore, what is the component, if we hit a click here or something there, you had to use the normal tests in Vue, well again here I am going with this one, continuing a little bit with the thing about the tests in Inertia, we have what is the page object, since precisely those methods, the one I was telling you about here that we configure, return a page object, and it is important to know what the hell this page object is, how we can manipulate it. how can we know how we can segment it to be able to do the tests perfectly because if we don't know what it consists of we don't know how those tests are going to be formed and it is something that I also explain to you in this video.

Here is also an exclusive YouTube video in which I show you how I organize my ccs code in this case it is the same project of the free development arab and it is basically How many modules you have you are going to have that same amount of ccs files since usually in the modules we are going to have some exclusive ccs for said modules and also many times we are going to have css in common for example for the buttons for card components and so on therefore we can create a common css file that we can then import in the rest in which we are going to define the exclusive css of course this is a scheme that you can adapt to taste based on your needs but I show you is basically how it works how I have it implemented the following class would be good is a bit with what I was telling you with the toast define the events and listeners in Livewire.

Here we also have the use of many-to-many polymorphic relationships, which I consider quite interesting because they are many-to-many and also because they are polymorphic, so this is also part of the new Laravel course.

Finally, here I have a video that breaks a little bit from what I am used to doing, in this case it is about the Mac Mini or the Mac in general, which was recently updated to the M4. And surely many people want to buy a Mac because they are also excellent for software development and I'll tell you a little bit about what I would consider since I have used a Mac since the Intel of 2018 which was the last one that came out, I used that Mac, I used the M1 and currently I have the m2 pro with the advantages that it brings me which is a 512 GB hard drive and also 16 of ram, so here basically what I'm telling you is that the base model that costs about 579 that has 16 Gb of ram which is pretty good but the problem there is the hard drive which is very small, the hard drive can usually be solved in a certain way by installing an external hard drive in this case through the thunderbolt ports but the problem is that there are certain programs for example above all the development for example Android Studio for example unre to give some examples that will always be installed on the internal hard drive of the machine therefore with 256 GB it will be very scarce even and I show you that the machine that I currently have of 512 I already have exactly half half of the hard drive is occupied and it is because I install for example a real Android Studio and everything else. Therefore the basic model for me is insufficient and I would only recommend it to you if you are completely sure since Remember that I am recommending it to you is for development if you are completely sure that your environment is not going to be, for example, you are not going to install a real, you are not going to install any game, that is to say, any program that is more than about 30 or 40 GB because if so you will fall short, so well I'll go there and show you some available options, that is to say, I'll compare what else could be interesting instead of buying this one, it is better to buy this combo and those little things so that in case you want to buy a Mac again, I'll give you some tips in case you are interested.

Courses

Now here we move on to the course level updates regarding the iwar here I am with the alpine js section since remember that alpine js is an important part of Livewire and therefore it seems prudent to make an introduction to said js framework that is very similar to Vue if already with Vue 70% of Vue of what we do in Vue can be done here, you could say we have x-if which is the equivalent of v-if the show the syntax is very similar but no matter what we are going to present little by little and also seeing the differences that we have that other 30% that would be different then as always we start working with the os attributes in this case Well the last one that came out was the style but before that there are others for example of the classes the conditionals the for here a comparison between the cycles with object and conditionals to continue polishing a little what we had before the script block since usually the alpine components are defined directly in the html but if it is a lot of code then it is better to define it in a separate block As if it were in Vue to reference elements, it is quite useful and we don't have it in Vue, for example. This would be something different and from here we are making an application of the entire list, just like we did with Inertia, but in this case, obviously, focused on Alpine.

We are starting first by implementing it, which is very important for the development mode. We adapt the previous tests, the authentication system. Remember that we have a module protected by authentication, the dashboard module. From here, we continue working on the same tests that we had, which is working on the dashboard module, doing the tests for the categories and then we pass them directly to the publications, and that is what we are doing.

Introducción a Alpine JS

  1. Atributos: style

    1. Vamos a trabajar con el atributo de estilos.

  2. Condicionales: x-if

    1. Vamos a conocer el uso del condicional.

  3. Ciclos: x-for

    1. Vamos a conocer el uso del for.

  4. Ciclo for con objetos y condicionales

    1. Ejemplo en donde empleamos los objetos y con condicionales.

  5. Bloque de script

    1. Vamos a organizar el código anterior en un bloque de script.

  6. x-ref

    1. Conoceremos cómo crear una referencia a cualquier elemento HTML.

  7. Aplicación de todo: Listado

    1. Vamos a crear el listado para los TODO.

  8. Aplicación de todo: Búsqueda

    1. Vamos a crear una aplicación tipo TODO, primero, el campo de búsqueda.

  9. Aplicación de todo: Crear Todos

    1. Vamos a crear todos.

  10. Marcar todo completada

    1. Vamos a realizar la opción marcar una tarea como completada.

  11. Eliminar todo

    1. Vamos a realizar la opción de eliminar un todo.

  12. Borrar todos los todos

    1. Vamos a realizar la opción de borrar todos los todos.

  13. Modificar un todo

    1. Vamos a realizar la opción de modificar un todo.

Integración con Inertia - Pruebas

  2. Configurar base de datos

    1. Vamos a configurar una base de datos de prueba.

  3. Facades y adaptar pruebas anteriores

    1. Vamos a crear unos factories para generar datos de prueba.

  4. Autenticación

    1. Vamos a autenticar un usuario para los módulos protegidos por autenticación.

  6. Dashboard: Prueba para crear, POST

    1. Vamos a crear la prueba para crear una categoría.

  7. Tarea: Dashboard: Prueba para editar

    1. Vamos a crear la prueba para editar una categoría.

  8. Dashboard: Prueba para eliminar

    1. Vamos a crear la prueba para eliminar una categoría.

  10. Dashboard: Pruebas para el Post

    1. Crearemos las pruebas para el post, partiendo de las pruebas de las categorías.

  11. Dashboard: Pruebas para el Post, Ordenación en el index

    1. Corregimos el problema que tenemos para la prueba del index y la ordenación.

Blog

The blog that we have more or less the same content I also published this on the day well this is a lie this this would already be a little bit out of the flow but there we have it how you can explain rotations in unre what I was telling you about the mat the events listen in this case also with the toas and everything else This is for the highlighting of the highlight code for Vue that is to say that the code when you use the pre tag appears with a style applied in this case we use a specific plugin for Vue I show you how you can configure it here the same as I was telling you how you can organize your code here we have the base file the base. css that's what I called it and then we inherit it from the rest of the modules that are going to need this sss in common for example for the buttons there I explain it to you a little bit here about the domains that I was telling you also domains and subdomains there you have well the written part that of the toas in this case is for here I made a mistake in the image now that I'm seeing because it's for lar and I placed inertia here but for there and finally here we have the importance of modularizing the application in this case focused on the routes, which helped me a lot so that I can have the routes organized especially for the academy application in which I am following what is an application in Vue my restapi that I also use to consume the application that I created for flurer, which I also mentioned to you in another video the advantages of this approach instead of using the arabel inertia I preferred this approach although it was already a few years old I simply renewed it and from here everything that I have handled a little with the routes previously I had for example some routes defined for tutorials that you can see in two ways, a simple one that is simply the tutorial scheme and the complete one in which it returns the tutorial, the section and the classes again tutorials are the courses, the courses have sections and they also have classes, so from there I created two route schemes and I am showing you some tricks there, for example when you want to bring a tutorial whether simple or not through the slot or through the ID you can perfectly use the same controller and That kind of schemes, so well, that's practically everything we uploaded for the week mentioned and without further ado, we'll see you next week.

- Andrés Cruz

En español

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.

!Cursos desde!

10$

En Udemy

Quedan 1d 03:00!

Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!
© 2024 Copyright | Contacto | Acerca de | Versión PC