Forem: Devscamp

Desactivar notificaciones de Laravel Mix.

Ariel Mejia — Thu, 14 Jan 2021 15:00:39 +0000

A partir del post Configura hot reload con Laravel, algunos developers solicitaron mas tips de Laravel Mix, aquí otro muy interesante y corto.

Laravel Mix nos permite desactivar las notificaciones que usa al compilar de varias formas:

Desactiva de forma general TODAS las notificaciones:

Agrega en tu archivo webpack.mix.js, esta línea:

mix.disableNotifications();

Es probable que sea útil mantener las notificaciones solo cuando la compilación de Laravel mix falle, para esto podemos usar, el siguiente método:

mix.disableSuccessNotifications();

Ok pero y si deseo agregar hot reload como en el post anterior?

También tenemos la opción de agregarle otro valor al objeto JSON que recibe el método "browserSync" de Laravel Mix:

mix().browserSync({
    'proxy': 'tuapp.test',
    'open': false,
})

Con esto cubrimos varios escenarios usando Laravel Mix, espero les sean de utilidad y si tiene mas inquietudes por favor dejen sus impresiones en los comentarios o visiten nuestra pagína web devscamp.net (si no estas viendo este post desde ahí).

Personalizar notificaciones en Laravel.

Ariel Mejia — Fri, 08 Jan 2021 06:40:58 +0000

Dejo este pequeño tip para personalizar las plantillas de las notificaciones en Laravel.

Primero debemos publicar los archivos de las notificaciones:

php artisan vendor:publish --tag=laravel-notifications

Ahora en "resources/views/vendor", ahí podremos editar la plantilla del markdown.

Personalizar los colores

Si necesito personalizar los colores u otras reglas CSS de la plantilla, Laravel nos provee un comando para publicar estos assets:

php artisan vendor:publish --tag=laravel-mail

Ahora en "resources/views/vendor/mail/html/themes/default.css" podremos personalizar los estilos de CSS.

Algunos tips:

Para personalizar el enlace del header:

.header a {
    color: #3d4852;
    font-size: 19px;
    font-weight: bold;
    text-decoration: none;
}

Para personalizar el boton "primary":

.button-primary {
    background-color: #2d3748;
    border-bottom: 8px solid #2d3748;
    border-left: 18px solid #2d3748;
    border-right: 18px solid #2d3748;
    border-top: 8px solid #2d3748;
}

También puedes personalizar la acción de "error" y "success", justo abajo.

Espero sea de utilidad, saludos!

Crea extractos de texto en Laravel

Ariel Mejia — Fri, 08 Jan 2021 06:23:01 +0000

Laravel 7 agrega un nuevo método a la clase "Illuminate\Support\Str".

Supongamos que tenemos un modelo "Post" y al mostrar todos los posts en una vista tipo "index" o lista de posts, y en vez de mostrar todo el texto, queremos mostrar únicamente un extracto del texto, en Laravel podemos hacer esto de varias formas.

Creando un Accessor:

use Illuminate\Support\Str;

class Post
{
    const EXCERPT_LENGTH = 100;

    protected $fillable = [
        ..., 'body'
    ]

    protected $appends = ['excerpt'];

    public function getExcerptAttribute()
    {
        return Str::limit($this->body, Post::EXCERPT_LENGTH)
    }
}

So now in your blade files you can use this method:

Ahora podrás usar el accessor en tus vistas y en cualquier parte de tu codigo donde uses el modelo post.

<h1>{{ $post->title }}</h1>

<p>{{ $post->excerpt() }}</p>

Tambien puedes usar una directiva blade especifica para esto, podemos crear un provider para directivas blade:

php artisan make:provider BladeServiceProvider

Agregamos la logica para crear una directiva blade en el método "boot".

/**
 * Bootstrap services.
 *
 * @return void
*/
public function boot()
{
    Blade::directive('excerpt', function ($text) {
        return "<?php echo Str::limit($text, 100); ?>";
    });
}

Y en tus vistas puedes usar la directiva así:

<p>@excerpt($post->body)</p>

Espero que te sea de utilidad, saludos!

Juegos muy interesantes para aprender CSS

Ariel Mejia — Fri, 08 Jan 2021 03:13:42 +0000

Si estas empezando en el mundo del desarrollo web, es muy probable que tengas todo el entusiasmo del mundo por personalizar cada vez mas tus sitios.

Si por el contrario vienes del mundo del backend pero no realizas mucho trabajo de frontend, este post igualmente es para ti.

Y es que todos en nuestra carrera como programadores nos topamos con algún diseño "marciano" (Saludos a mis amigos diseñadores hehe), ante lo cual debemos posicionar algun elemento de forma compleja.

Bueno hoy traigo dos recursos increibles para aprender a trabajar con CSS, sin sufrir en el intento (o al menos no mucho).

Flexbox froggy

Es un excelente juego para aprender a dominar Flexbox, ?sabes posicionar un elemento centrado vertical y horizontalmente?, pues dejame decirte que Flexbox nos permite hacer muchas mas cosas, puedes aprender de forma muy divertida y ademas esta muy bien para una reta con tus amigos programadores un viernes ;)

Grid garden

Aprovechando que estamos hablando de aprender jugando, esta es otra muy buena opción, CSS grid nos ofrece una excelente solución para encolumnar elementos, esta es otra muy buena opción para cambiar el típico aprendizaje y pasar un muy buen rato aprendiendo CSS Grid.

Espero que las recomendaciones les parezcan útiles y entretenidas!

Sitios útiles para trabajar con TailwindCSS

Ariel Mejia — Thu, 07 Jan 2021 23:17:45 +0000

Aquí una lista de varios sitios de donde podemos tomar inspiración, para crear sitios usando componentes de TailwindCSS:

En estos sitios podemos encontrar infinidad de ejemplos.

Espero te sean de utilidad y te animes a aprender TailwindCSS.

Configura hot reload en Laravel

Ariel Mejia — Thu, 07 Jan 2021 23:10:58 +0000

Laravel Mix nos provee una opción llamada "BrowserSync", aquí veremos como configurarla para que cuando hagamos cambios en nuestras plantillas blade, la pestaña del navegador con nuestra aplicación, recargue automáticamente.

Modificar el archivo webpack.mix.js

Vamos a hacer uso de otra instancia de mix, abajo del codigo que ya esta presente:

mix.browserSync({
    'proxy': 'tuapp.test',
})

Guardamos los cambios.

Ejecutamos el comando en la terminal

npm run watch

Si no se ha realizado ningun comando previo como:

npm install

El proceso tardara un poco mas pero apenas unos 20 o 30 segundos.

Nota

Si en este proyecto no se ha ejecutado el "watcher" con anterioridad, "npm" primero va a descargar todas las dependencias necesarias y nos solicitará que volvamos a ejecutar el mismo comando:

npm run watch

Con esto podremos abrir nuestro proyecto y este recargara cada vez que realicemos algún cambio.

Espero les sea de utilidad el tip!

Agrega la opción de verificación de emails con Laravel Jetstream.

Ariel Mejia — Wed, 06 Jan 2021 12:49:04 +0000

Modificar el archivo "config/fortify.php":

Debemos quitar el comentario sobre este feature.

'features' => [
    Features::registration(),
    Features::resetPasswords(),
    Features::emailVerification(),
    Features::updateProfileInformation(),
    Features::updatePasswords(),
    Features::twoFactorAuthentication([
        'confirmPassword' => true,
]),

En el modelo User implementar la interface "MustVerifyEmail":

class User extends Authenticatable implements MustVerifyEmail

Agregar un servicio proveedor de correos de prueba.

Puedes usar mailhog, pero el mas conocido y utilizado para pruebas en mailtrap.io, te logueas gratis y el servicio para una sola cuenta no tiene costo.

Agregas las llaves del servicio de mail

En tu archivo ".env" agrega las credenciales del servicio seleccionado, aquí un ejemplo con mailtrap.io

MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=273b5ab0b82231
MAIL_PASSWORD=b5612d6ea6iir3
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS="admin@tuapp.com"
MAIL_FROM_NAME="${APP_NAME}"

Nota

Si deseas trabajar en producción, uno de los servicios mas beneficiosos y fáciles de implementar es Sendgrid.

Espero el post sea de utilidad.

Agrega la opción de emails de verificación en Laravel Jetstream.

Ariel Mejia — Wed, 06 Jan 2021 12:39:58 +0000

Modificar el archivo "config/fortify.php":

Debemos quitar el comentario sobre este feature.

'features' => [
    Features::registration(),
    Features::resetPasswords(),
    Features::emailVerification(),
    Features::updateProfileInformation(),
    Features::updatePasswords(),
    Features::twoFactorAuthentication([
        'confirmPassword' => true,
]),

En el modelo User implementar la interface "MustVerifyEmail":

class User extends Authenticatable implements MustVerifyEmail

Agregar un servicio proveedor de correos de prueba.

Puedes usar mailhog, pero el mas conocido y utilizado para pruebas en mailtrap.io, te logueas gratis y el servicio para una sola cuenta no tiene costo.

Agregas las llaves del servicio de mail

En tu archivo ".env" agrega las credenciales del servicio seleccionado, aquí un ejemplo con mailtrap.io

MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=273b5ab0b82231
MAIL_PASSWORD=b5612d6ea6iir3
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS="admin@tuapp.com"
MAIL_FROM_NAME="${APP_NAME}"

Nota

Si deseas trabajar en producción, uno de los servicios mas beneficiosos y fáciles de implementar es Sendgrid.

Espero el post sea de utilidad.

Envía email de verificación de forma manual en Laravel.

Ariel Mejia — Wed, 06 Jan 2021 12:39:24 +0000

Escenario

Estoy creando un Seeder de usuarios, ya tengo implementada la verificación por correo, pero quiero que todos los usuarios que se generan por medio de mi seeder, reciban el correo de verificación.

Crear el seeder de usuarios.

php artisan make:seeder UserSeeder

Codigo para crear un usuario y enviar la notificacion por correo

<?php

class UserSeeder 
{
    public function run()
    {
        $user = User::create([
            'name' => $name,
            'email' => $email,
            'password' => bcrypt($password),
        ]);

        $user->sendEmailVerificationNotification();
    }
}

Registrar el UserSeeder en la clase DatabaseSeeder

public function run()
{
    $this->call([
        UserSeeder::class,
    ]);
}

Ejecutar el seeder en la terminal

php artisan db:seed

Con esto puedes revisar tu servicio de depuración de correos como mailhog o mailtrap.io y tendras el correo en tu bandeja de entrada.

Creando multiples usuarios

Puede darse el caso donde necesitemos crear una gran cantidad de usuarios de prueba, para ello podemos usar el metodo times() para crear una gran cantidad de usuarios e iterar para enviarle a cada uno el correo de confirmacion.

$users = User::factory()->times(10)->create();

$users->each(function($user) {
    $user->sendEmailVerificationNotification();
});

Espero el post sea de utilidad, saludos!

Mostrar excepciones de una API en Laravel.

Ariel Mejia — Thu, 10 Sep 2020 20:18:38 +0000

Si estas trabajando en Laravel con una API es posible que ante algunas validaciones uses metodos como:

abort
abort_if
abort_unless

Esto funciona muy bien en producción lanza el error especifico con el código Http que representa el error.

Sin embargo en desarrollo lanza todo un stacktrace del error, es posible que necesites el comportamiento de producción en desarrollo para visualizar exactamente como se ven tus errores, en este caso puedes:

Ir al archivo ".env" y cambiar el valor de la llave "APP_ENV" de "local" a "production".

Con esto podrás visualizar los errores, sin embargo es probable que quieras este comportamiento por defecto cuando la petición viene de una API, puedes hacer lo siguiente:

Ir a archivo "app/exceptions/handler.php" y en tu método render agregar el siguiente snippet:

if($request->expectsJson()) {
    return response()->json([
        'error' => $exception->getMessage()
    ]);
}

Ahora podrás visualizar por defecto este comportamiento en desarrollo, gracias por leer el post, saludos!