JSON Feed es un nuevo estándar para formalizar un feed RSS basado en JSON que pretende simplificar la creación de feeds eliminando el estándar XML. La implementación de un feed para su sitio es simple y la especificación es sorprendentemente clara.

ejemplo:

{
    "version": "https://jsonfeed.org/version/1",
    "title": "My Example Feed",
    "home_page_url": "https://example.org/",
    "feed_url": "https://example.org/feed.json",
    "items": [
        {
            "id": "2",
            "content_text": "This is a second item.",
            "url": "https://example.org/second-item"
        },
        {
            "id": "1",
            "content_html": "<p>Hello, world!</p>",
            "url": "https://example.org/initial-post"
        }
    ]
}

La estructura de un feed

Un feed JSON comienza con alguna información en la parte superior: dice de dónde proviene el feed, y puede decir quién lo creó, etc.

Después de eso, hay una serie de objetos, elementos, que describen cada objeto en la lista.

Para conocer todas las caracteristicas te invito a leer las especificaciones.

Ejemplo rápido con laravel

Obtener la lista de post

$posts = Posts::latest();

Configura los datos basicos para el JSON Feed

La especificación de JSON Feed tiene algunos campos de nivel superior opcionales, como título, URL de fuente, ícono de sitio y más. Estos campos no son dinámicos por lo que hay que agregarlos a un arreglo de forma manual:


$data = [
    'version' => 'https://jsonfeed.org/version/1',
    'title' => 'El nombre de tu feed',
    'home_page_url' => 'https://domain.tld',
    'feed_url' => 'https://domain.tld/feed/json',
    'icon' => 'https://domain.tld/apple-touch-icon.png',
    'favicon' => 'https://domain.tld/apple-touch-icon.png',
    'items' => [],
];

NOTA en el campo items vamos a colocar todos los items (valga la redundancia) de los post.

Agregando los items al feed

Este punto es lo más sencillo del mundo, unicamente hay que hacer:

foreach ($posts as $key => $post) {
    $data['items'][$key] = [
        'id' => $post->id,
        'title' => $post->title,
        'url' => 'https://domain.tld/'.$post->uri, // o la ruta de los post
        'image' => $post->featured_image,
        'content_html' => $post->content,
        'date_published' => $post->created_at->tz('UTC')->toRfc3339String(),
        'date_modified' => $post->updated_at->tz('UTC')->toRfc3339String(),
        'author' => [
            'name' => $post->user->name
        ],
    ];
}

El resultado final

Nuestro metodo quedaria de esta forma:

public function jsonFeed()
{
    $posts = Posts::latest();

    $data = [
        'version' => 'https://jsonfeed.org/version/1',
        'title' => 'El nombre de tu feed',
        'home_page_url' => 'https://domain.tld',
        'feed_url' => 'https://domain.tld/feed/json',
        'icon' => 'https://domain.tld/apple-touch-icon.png',
        'favicon' => 'https://domain.tld/apple-touch-icon.png',
        'items' => [],
    ];

    foreach ($posts as $key => $post) {
        $data['items'][$key] = [
            'id' => $post->id,
            'title' => $post->title,
            'url' => 'https://domain.tld/'.$post->uri, // o la ruta de los post
            'image' => $post->featured_image,
            'content_html' => $post->content,
            'date_created' => $post->publishes_at->tz('UTC')->toRfc3339String(),
            'date_modified' => $post->updated_at->tz('UTC')->toRfc3339String(),
            'author' => [
                'name' => $post->user->name
            ],
        ];
    }
    return $data;
}

En nuestro archivo de rutas podemos tener algo como esto:

Route::get('/feeds/json', 'JsonFeedController@jsonFeed')->name('json.feed');

Y en el header colocamos algo como esto:

<link rel="alternate" title="El nombre de tu feed" type="application/json" href="{{ route('json.feed') }}" />

Y listo, ya tenemos nuestro JSON Feed configurado completamente...

Leer más

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por Sergio Carlavilla Delgado.

console.log no es un depurador. Es genial para averiguar qué está haciendo tu aplicación JavaScript, pero se limita a escupir una cantidad mínima de información. Si tu código es complejo, necesitarás un depurador adecuado. Es por eso que hemos agregado una nueva sección a el Firefox DevTools Playground, que trata sobre la depuración. Hemos creado cuatro lecciones básicas que usan el depurador de Firefox para examinar y arreglar una aplicación de tareas (to-do) en JavaScript.

Presentamos el Debugger Playground

Las lecciones son completamente gratuitas y el código de la aplicación de tareas está disponible para descargar desde GitHub.

Estas lecciones son un nuevo formato para nosotros y estamos muy emocionados de brindártelas. Siempre estamos buscando nuevas formas para ayudar a los desarrolladores a aprender cosas y mejorar el flujo de trabajo diario. Si tienes una idea, avísanos. Ampliaremos el Playground en los próximos meses y estamos encantados en escuchar de desarrolladores como tú.

Si no estas familiarizado con el depurador de Firefox, echa un vistazo a los documentos de depuración en MDN y mira este corto de introducción:

Ahora echemos un vistazo a una lección del nuevo Debugger Playground. ¿Alguna vez usaste console.log para saber el valor de una variable? Hay una manera más fácil y más precisa de hacerlo con el depurador.

Usa el depurador para saber el valor de una variable

Es mucho más fácil encontrar una variable con el depurador de Firefox que con console.log. Así es cómo funciona:

Echemos un vistazo a una aplicación sencilla de tareas. Abre la aplicación de tareas en una nueva pestaña.

Esta aplicación tiene una función llamada addTodo que tomará el valor del formulario de entrada, creará un objeto y luego lo insertará en un array de tareas. Probémoslo agregando una nueva tarea. Esperarás tener esta nueva tarea agregada a la lista, pero en su lugar verás “[object HTMLInputElement]”.

Algo está roto, y tenemos que depurar el código. La tentación es comenzar a agregar console.log por toda la función, para identificar dónde está el problema. El enfoque podría ser algo como esto:

const addTodo = e => {
 e.preventDefault();
 const title = document.querySelector(".todo__input");
 console.log('title is: ', title);
 const todo = { title };
 console.log('todo is: ', todo');

items.push(todo);
 saveList();
 console.log(‘The updated to-do list is: ‘, items);
 document.querySelector(".todo__add").reset();
 };

Esto puede funcionar, pero es engorroso e incómodo. También debemos recordar eliminar estas líneas después de corregir el código. Hay una forma mucho mejor de hacerlo con el depurador utilizando lo que se llama un punto de interrupción…

Aprende más en el Debugger Playground

El Debugger Playground cubre los aspectos básicos del uso del depurador de Firefox, examinar la pila de llamadas, establecer puntos de interrupción condicionales y más. Sabemos que hay una curva de aprendizaje abrupta para usar el depurador (y para depurar JavaScript), por lo que hemos creado una aplicación de tareas fácil de entender y decodificar. También es útil ejecutarlo en tu navegador web para mantener las cosas en orden durante tu día de trabajo. La aplicación está disponible aquí para descargar en GitHub. Tómalo y luego dirígete a el Playground para ver las lecciones.

Haznos saber qué te gustaría ver a continuación. Estamos trabajando en nuevas lecciones sobre las últimas tecnologías web y nos gustaría saber de ti. Publica en los comentarios que hay a continuación.

Leer más

Un paquete para minimizar el output HTML "on demand" con un +35% de optimización del sitio web.

La instalación

La instalación de este paquete es muy facil

$ composer require renatomarinho/laravel-page-speed

Si usas laravel 5.5 ya todo esta configurado.

Si estas en una versión anterior debes editar el archivo config/app.php y agregar lo siguiente:

RenatoMarinho\LaravelPageSpeed\ServiceProvider::class

Archivo de configuración

Terminado el proceso de instalación debes publicar el archivo de configuración con la siguiente instrucción

$ php artisan vendor:publish --provider="RenatoMarinho\LaravelPageSpeed\ServiceProvider"

Agregar los middlewares

Ahora debes registrar los middlewares de la siguiente forma

//app/Http/Kernel.php

protected $middleware = [
    ...
    \RenatoMarinho\LaravelPageSpeed\Middleware\InlineCss::class,
    \RenatoMarinho\LaravelPageSpeed\Middleware\ElideAttributes::class,
    \RenatoMarinho\LaravelPageSpeed\Middleware\InsertDNSPrefetch::class,
    \RenatoMarinho\LaravelPageSpeed\Middleware\RemoveComments::class,
    \RenatoMarinho\LaravelPageSpeed\Middleware\TrimUrls::class,
    \RenatoMarinho\LaravelPageSpeed\Middleware\RemoveQuotes::class,
    \RenatoMarinho\LaravelPageSpeed\Middleware\CollapseWhitespace::class,
]

Como usar el paquete

Podemos crear una variable en nuestro archvo .env que contenga lo siquiente:

LARAVEL_PAGE_SPEED_ENABLE=true

El paquete por defecto tiene esta opción activa. Si en algun momento quieres cambiar este comportamiento debes hacerlo aquí.

Evitar la compresión de rutas

Para evitar que ciertas rutas sean minificadas lo unico que hay que hacer es editar el archivo config/laravel-page-speed.php e indicar la ruta.

//config/laravel-page-speed.php

//You can use * as wildcard.
'skip' => [
    '*.pdf', //Ignore all routes with final .pdf
    '*/downloads/*',//Ignore all routes that contain 'downloads'
];

Antes de usar el paquete

renatomarinho/laravel-page-speed

Despues de usar el paquete

renatomarinho/laravel-page-speed

Para más información clic aquí.

Leer más

Este paquete agrega un puñado de comandos relacionados con la vista a Artisan en tu proyecto Laravel. Te permite generar archivos blade que extienden desde otras vistas usando la línea de comandos.

Como instalar:

Usando composer

$ composer require sven/artisan-view:^2.0 --dev

Como usar:

Si escribes php artisan van a existir dos nuevos comandos disponibles:

make:view
scrap:view

Crear vistas

// Create a view 'index.blade.php' in the default directory
$ php artisan make:view index

// Create a view 'index.blade.php' in a subdirectory ('pages')
$ php artisan make:view pages.index

// Create a view with a different file extension ('index.html')
$ php artisan make:view index --extension=html

Espero que este paquete les sea útil tanto como a mi

Para más info clic aquí

Leer más