{"id":6052,"date":"2022-02-20T15:41:09","date_gmt":"2022-02-20T15:41:09","guid":{"rendered":"https:\/\/the7.io\/elementor-agency\/?p=6052"},"modified":"2022-08-16T19:39:13","modified_gmt":"2022-08-16T19:39:13","slug":"post-001","status":"publish","type":"post","link":"https:\/\/temperies.com\/es\/2022\/02\/20\/post-001\/","title":{"rendered":"Construyendo p\u00e1ginas con Vite"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"6052\" class=\"elementor elementor-6052\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8d13317 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8d13317\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-16707e0\" data-id=\"16707e0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-554d148 elementor-widget elementor-widget-heading\" data-id=\"554d148\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Construyendo p\u00e1ginas con Vite<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d5a1b55 elementor-widget elementor-widget-spacer\" data-id=\"d5a1b55\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9d6d5b elementor-widget elementor-widget-heading\" data-id=\"c9d6d5b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">Autor: GERM\u00c1N SARACCA<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-267ad40a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"267ad40a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6b724479\" data-id=\"6b724479\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-38820d42 elementor-widget elementor-widget-text-editor\" data-id=\"38820d42\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Vite es una herramienta que mejora la experiencia de desarrollo front-end. Se puede utilizar para inicializar un proyecto de html, css y vanilla-js, o un proyecto de Vue,Svelte,React y\/o Preact. Automaticamente viene con un servidor de desarrollo y luego podemos construir el build de nuestro proyecto optimizado para producci\u00f3n.<\/p><p>Vite mejora el entorno de desarrollo dividiendo los modulos de nuestra aplicacion en dos categorias: dependencias y codigo fuente.<\/p><ul><li>Para las dependencias que no van a cambiar genera un pre-bundle usando Esbuild, que esta escrito en Go y trabaja desde 10 hasta 100 veces mas rapido que empaquetadores javascript. Esto acelera el proceso de desarrollo.<\/li><li>El codigo fuente es cargado segun lo necesita la ruta del html en el que se esta ( route-base code-splitting) y ademas se sirve el codigo tal cual como es modules nativo, ya que la mayoria de navegadores hoy en dia lo soportan y esto podemos cambiarlo luego en el bundle para produccion si queremos apuntar a versiones de navegadores mas viejos que no lo soportan.<\/li><\/ul><p>Tambien al realizar cambios trabaja con el HMR (Hot Module Replacement) lo que va a ser que solo actualice el modulo modificado y no realice el bundle de toda la aplicacion completa.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-afa2363 elementor-widget elementor-widget-spacer\" data-id=\"afa2363\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e279923 elementor-widget elementor-widget-heading\" data-id=\"e279923\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Creando nuestro entorno de desarrollo<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d88794 elementor-widget elementor-widget-spacer\" data-id=\"3d88794\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aa2b109 elementor-widget elementor-widget-text-editor\" data-id=\"aa2b109\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>A continuacion creamos un template para desarrollar una pagina con html, css y vanilla\/js y luego iremos agregandole distintos extras a traves de la configuracion de vite y distintos plugins de postcss.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-975960c elementor-widget elementor-widget-spacer\" data-id=\"975960c\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ed67e5 elementor-widget elementor-widget-heading\" data-id=\"2ed67e5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Creaci\u00f3n de proyecto.<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3a62cb8 elementor-widget elementor-widget-spacer\" data-id=\"3a62cb8\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df9ffcf elementor-widget elementor-widget-text-editor\" data-id=\"df9ffcf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Para comenzar abriremos una terminal en la carpeta donde guardamos nuestros proyectos y correremos el siguiente comando <code>npm create vite@latest<\/code>. Luego nos pedira nombre de proyecto, damos enter y a continuacion elegiremos vanilla y vanilla(tenemos la opcion de typescript).<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2fe33f0 elementor-widget elementor-widget-spacer\" data-id=\"2fe33f0\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d04763c elementor-widget elementor-widget-heading\" data-id=\"d04763c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. An\u00e1lisis de estructura base creada.<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0c86703 elementor-widget elementor-widget-spacer\" data-id=\"0c86703\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ffbbad3 elementor-widget elementor-widget-text-editor\" data-id=\"ffbbad3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Ahora podemos abrir la carpeta con el proyecto generado por Vite en nuestro editor de codigo y ver que nos genero. Deberiamos tener los siguientes ficheros:<\/p><ul><li><code>.gitignore<\/code><\/li><li><code>favicon.svg<\/code><\/li><li><code>index.html<\/code><\/li><li><code>main.js<\/code><\/li><li><code>package.json<\/code><\/li><li><code>style.css<\/code><\/li><\/ul><p>Vite ya nos creo un template listo para comenzar a desarrollar. Tenemos nuestro <code>index.html<\/code> linkeado a nuestro <code>main.js<\/code> donde importaremos nuestro <code>style.css<\/code> y todos los demas ficheros Javascript. Esto ayuda mucho al modo desarrollo, luego en el bundle de producci\u00f3n el css sera importado en el head del <code>index.html<\/code> con una etiqueta link de estilos tradicional. Pero nos falta realizar un paso m\u00e1s y es a traves del comando <code>npm install<\/code> para instalar las dependencias que utiliza vite. Una vez realizado esto veremos que se agrega nuestra carpeta <code>node_modules<\/code>.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b2f16d9 elementor-widget elementor-widget-spacer\" data-id=\"b2f16d9\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3b5aa36 elementor-widget elementor-widget-heading\" data-id=\"3b5aa36\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Levantar nuestro servidor de desarrollo.<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-adb9703 elementor-widget elementor-widget-spacer\" data-id=\"adb9703\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fea183f elementor-widget elementor-widget-text-editor\" data-id=\"fea183f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Si miramos el <code>package.json<\/code> veremos que dentro de <code>scripts<\/code> tenemos 3 comandos existentes: <code>dev<\/code>, <code>build<\/code> y <code>preview<\/code>.<\/p><ul><li><code>dev<\/code> es para levantar nuestra aplicaci\u00f3n en un servidor local en el puerto 3000 por defecto.<\/li><li><code>build<\/code> construye nuestra aplicaci\u00f3n para producci\u00f3n en la carpeta <code>dist<\/code>. Por default nuestro css, js e imagenes seran concatenados con un hash ej: <code>index.070a6bf2.css<\/code> para evitar el cacheo del navegador e iran dentro de una carpeta assets. Tanto css como js seran minificados.<\/li><li><code>preview<\/code> nos levanta el build de nuestra aplicac\u00edon en el puerto en el que nos indica al levantarlo ( 5000, 4173, varia segun version).<\/li><\/ul><p>Hasta estos 3 puntos tenemos un entorno de desarrollo y configuracion de build de producci\u00f3n sin ninguna configuracion por nuestra parte. Podriamos dejarlo hasta este punto y maquetar asi y ser felices pero vamos a complicarla \ud83d\ude00 .<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-275220d elementor-widget elementor-widget-spacer\" data-id=\"275220d\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dbf24a5 elementor-widget elementor-widget-heading\" data-id=\"dbf24a5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Estructurado de carpetas<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-70f36bd elementor-widget elementor-widget-spacer\" data-id=\"70f36bd\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f60947 elementor-widget elementor-widget-text-editor\" data-id=\"9f60947\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>En este paso agregaremos una carpeta <code>src<\/code> a nuestro root y dentro de esta una carpeta assets para colocar la carpeta css, fonts, images y js ademas del archivo index.html y una carpeta about con un index.html. Nos quedaria una estructura asi:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4508d26 elementor-widget elementor-widget-spacer\" data-id=\"4508d26\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44d6d53 elementor-widget elementor-widget-text-editor\" data-id=\"44d6d53\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre><code><br \/>node_modules  \nsrc  \n    about\/  \n        index.html\n    assets\/  \n        css\/  \n            style.css  \n        fonts\/  \n        images\/  \n            favicon.svg  \n        js  \n            main.js  \n    index.html  \n.gitignore  \npackage.json  \npackage-lock.json  <br \/><br \/><\/code><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-99af851 elementor-widget elementor-widget-spacer\" data-id=\"99af851\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5e06393 elementor-widget elementor-widget-text-editor\" data-id=\"5e06393\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Al cambiar la estructura por default que trae Vite, tendremos un problema al crear el build. La primera vez que lo creemos no habra problema pero cuando tengamos un build existente y realizamos otro, este no se reemplazara automaticamente por el nuevo, para que esto funcione debemos cambiar el script del build en el package.json. <code>\"build\": \"vite build --emptyOutDir\"<\/code>, de esta manera al realizar un nuevo build, el script primero se encarga de vaciar el directorio donde se guarda el mismo primero.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ec21fc elementor-widget elementor-widget-spacer\" data-id=\"9ec21fc\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ac48d2 elementor-widget elementor-widget-heading\" data-id=\"9ac48d2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. Configuracion vite.config.js<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb26e9f elementor-widget elementor-widget-spacer\" data-id=\"bb26e9f\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2387990 elementor-widget elementor-widget-text-editor\" data-id=\"2387990\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Al realizar esto debemos crear un archivo de configuracion en la raiz del proyecto llamado <code>vite.config.js<\/code> para que todo vuelva a funcionar. Nuestro archivo de configuracion de vite deberia quedar asi:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7d90a20 elementor-widget elementor-widget-spacer\" data-id=\"7d90a20\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e196987 elementor-widget elementor-widget-text-editor\" data-id=\"e196987\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre><code><br \/>const { resolve } = require('path')\n\nmodule.exports = {\n    root: resolve(__dirname, '.\/src'),\n    build: {\n        rollupOptions: {\n            \/*\n                Opciones de configuraci\u00f3n de Rollup externas, ser\u00e1n mergeadas con la configuracion\n                interna de Rollup de Vite.\n            *\/\n            input: {\n                main: resolve(__dirname, 'src\/index.html'),\n                about: resolve(__dirname, 'src\/about\/index.html'),\n            },\n            output: {\n                dir: resolve(__dirname, 'build'), \/\/Donde se va a crear el build de nuestra aplicacion\n                format: 'es', \/\/Formato de ES modules\n            },\n        },\n        outDir: resolve(__dirname, 'build'),\n        \/\/minify: false, \/\/( Si no se quiere minificar el build) https:\/\/vitejs.dev\/config\/#build-minify (aplica solo a los JS no CSS)\n    },\n}<\/code><br \/><br \/><\/pre><p>\u00a0<\/p><pre><code><\/code><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ddce68a elementor-widget elementor-widget-spacer\" data-id=\"ddce68a\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd00543 elementor-widget elementor-widget-text-editor\" data-id=\"dd00543\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Tambien debemos cambiar la ruta del link al JS de nuestro <code>index.html<\/code> y cambiar el archivo de css que importamos en <code>main.js<\/code>.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-93ff620 elementor-widget elementor-widget-spacer\" data-id=\"93ff620\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e234f2b elementor-widget elementor-widget-heading\" data-id=\"e234f2b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">6. Instalacion de plugins POSTCSS que seran utiles.<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-84a5e8b elementor-widget elementor-widget-spacer\" data-id=\"84a5e8b\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a82229 elementor-widget elementor-widget-text-editor\" data-id=\"6a82229\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Instalaremos los siguientes plugins:<\/p><ul><li>autoprefixer: <code>npm i autoprefixer -D<\/code> Para parsear nuestro CSS y agregar prefixes basado en <a href=\"https:\/\/caniuse.com\/\">Can I Use<\/a> y basado en nuestro archivo de configuracion <code>.browserslistrc<\/code>. <a href=\"https:\/\/github.com\/browserslist\/browserslist#queries\">Browserlist options<\/a>Este estara en la raiz del proyecto y podemos configurarlo como queramos. A continuaci\u00f3n un ejemplo:<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b3b79e elementor-widget elementor-widget-spacer\" data-id=\"1b3b79e\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2b513f8 elementor-widget elementor-widget-text-editor\" data-id=\"2b513f8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre><code><br \/># - Minimo 0.2% de uso global.\n# - Que no esten sin mantener por 2 a\u00f1os.\n# - NO Internet explorer 11 para abajo.\n\n&gt;0.2%\nnot dead\nnot ie &lt;= 11<br \/><br \/><\/code><\/pre><pre><code><\/code><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9fd7b26 elementor-widget elementor-widget-spacer\" data-id=\"9fd7b26\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-28f02cd elementor-widget elementor-widget-text-editor\" data-id=\"28f02cd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li>cssnano: <code>npm i cssnano -D<\/code> Para reducir el tama\u00f1o de nuestro css.<\/li><li>postcss-advanced-variables: <code>npm i postcss-advanced-variables -D<\/code> Este es un plugin que nos va a permitir escribir variables, condicionales, iteradores y mixins al estilo Sass en nuestro CSS.<a href=\"https:\/\/github.com\/csstools\/postcss-advanced-variables\">Documentacion Advanced variables<\/a><\/li><li>Ejemplo Mixins:<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f95ccf1 elementor-widget elementor-widget-spacer\" data-id=\"f95ccf1\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d6c1d5 elementor-widget elementor-widget-text-editor\" data-id=\"5d6c1d5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre><code><br \/>@mixin font-size($size, $height, $letter) {\n    font-size: $size;\n    line-height: $height;\n    letter-spacing: $letter;\n}\np {\n    @include font-size(16px, 22px, normal);\n}<\/code><\/pre><p>\u00a0<\/p><pre><code><\/code><\/pre><pre><code><\/code><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee37b87 elementor-widget elementor-widget-spacer\" data-id=\"ee37b87\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4fd9c17 elementor-widget elementor-widget-text-editor\" data-id=\"4fd9c17\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li>postcss-color-function: <code>npm i postcss-color-function -D<\/code> Si bien en css podemos usar las custom properties que son muy buenas y pueden ser cambiadas desde JS y muchas cosas m\u00e1s, para los colores las funciones de sass son de mucha utilidad. Esta libreria va de la mano de las variables del plugin de advanced-varibales para poder crear algo asi:<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a95f3c0 elementor-widget elementor-widget-spacer\" data-id=\"a95f3c0\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-53b7d7e elementor-widget elementor-widget-text-editor\" data-id=\"53b7d7e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre><code><\/code><\/pre><pre><code>color: color($color-primario a(50%));<\/code><\/pre><pre><code><\/code><\/pre><pre><code><\/code><\/pre><pre><code><\/code><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-998b2d3 elementor-widget elementor-widget-spacer\" data-id=\"998b2d3\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1c3fac4 elementor-widget elementor-widget-text-editor\" data-id=\"1c3fac4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li><p>postcss-preset-env: <code>npm i postcss-preset-env -D<\/code> permite convertir CSS moderno en algo que la mayor\u00eda de los navegadores puedan entender, determinando los polyfills que necesita en funci\u00f3n de sus navegadores espec\u00edficos o entornos de tiempo de ejecuci\u00f3n, utilizando <a href=\"https:\/\/cssdb.org\/\">cssdb<\/a>.<br \/>En este proyecto configuramos el feature de nesting-rules para anidar propiedades css (proximo a salir en CSS4) y la image-set()function (proximo a salir en CSS4) que permite manejar background images segun la resolucion de pantalla del usuario.<\/p><\/li><li><p>Ejemplo nesting-rules:<\/p><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d01cac elementor-widget elementor-widget-spacer\" data-id=\"6d01cac\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9a293ef elementor-widget elementor-widget-text-editor\" data-id=\"9a293ef\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre><code><\/code><\/pre><pre><code><br \/>.box {\n    width: 80%;\n    border-radius: 5px;\n    padding: 0.5rem;\n    font-weight: 700;\n    border-radius: 15px;\n\n    &amp; ul {\n        list-style: none;\n\n        &amp; li {\n            color: $color-primario;\n\n            color: color($color-primario a(50%));\n            @include font-size(16px, 22px, normal);\n        }\n    }\n}<br \/><br \/><\/code><\/pre><pre><code><\/code><\/pre><pre><code><\/code><\/pre><pre><code><\/code><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b91b01d elementor-widget elementor-widget-spacer\" data-id=\"b91b01d\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-22c75f1 elementor-widget elementor-widget-text-editor\" data-id=\"22c75f1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Nota*: Al usar este plugin de nesting para css el editor nos marcara muchos errores de sintaxis. Para evitar eso podemos instalar una extension llamada PostCSS Language Support.<\/p><ul><li style=\"list-style-type: none;\"><ul><li>Ejemplo image-set()<\/li><\/ul><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4be6e43 elementor-widget elementor-widget-spacer\" data-id=\"4be6e43\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-37790f7 elementor-widget elementor-widget-text-editor\" data-id=\"37790f7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre><code><\/code><\/pre><pre><code><br \/>background-image: image-set(\n    url('..\/images\/DC-section-1.png') 1x,\n    url('..\/images\/DC-section-1@2x.png') 2x,\n    url('..\/images\/DC-section-1@3x.png') 3x\n);\n<\/code><\/pre><p>\u00a0<\/p><pre><code><\/code><\/pre><pre><code><\/code><\/pre><pre><code><\/code><\/pre><pre><code><\/code><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bc8dc8b elementor-widget elementor-widget-spacer\" data-id=\"bc8dc8b\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe6a20e elementor-widget elementor-widget-text-editor\" data-id=\"fe6a20e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li>container queries: <code>npm i cq-prolyfill<\/code> + archivo <code>container-queries-js<\/code> que se encuentra en la carpeta js. Este plugin nos permite estilar elementos con respecto al width de su parent. <a href=\"https:\/\/github.com\/ausi\/cq-prolyfill\/blob\/master\/docs\/usage.md\">Documentacion de uso<\/a><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3a2db72 elementor-widget elementor-widget-spacer\" data-id=\"3a2db72\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7856bc4 elementor-widget elementor-widget-text-editor\" data-id=\"7856bc4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre><code><\/code><\/pre><pre><code><\/code><\/pre><pre><code><br \/>.box:container(width &lt; 500px) {\n    border: solid 4px green;\n}\n.box:container(width &gt; 500px) {\n    border: solid 4px red;\n}\n.box:container(300px &lt; width &lt; 500px) {\n    color: green;\n}\n.box:container(width &gt; 700px) {\n    border: solid 4px violet;\n}<br \/><br \/><\/code><\/pre><pre><code><\/code><\/pre><pre><code><\/code><\/pre><pre><code><\/code><\/pre><pre><code><\/code><\/pre><pre><code><\/code><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c255fa8 elementor-widget elementor-widget-spacer\" data-id=\"c255fa8\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7df00fc elementor-widget elementor-widget-heading\" data-id=\"7df00fc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">7. Configuracion postcss para que todos los plugins anteriores funcionen.<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-270c0b7 elementor-widget elementor-widget-spacer\" data-id=\"270c0b7\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-358cd6b elementor-widget elementor-widget-text-editor\" data-id=\"358cd6b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Crearemos en la raiz del proyecto un archivo postcss.config.js con la siguiente informacion<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b755b52 elementor-widget elementor-widget-spacer\" data-id=\"b755b52\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ae12ee6 elementor-widget elementor-widget-text-editor\" data-id=\"ae12ee6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<pre><code><\/code><\/pre><pre><code><\/code><\/pre><pre><code>\u00a0<\/code><\/pre><pre><code>module.exports = {\n    plugins: {\n        autoprefixer: true,\n        'postcss-advanced-variables': true,\n        'postcss-color-function': true,\n        'postcss-preset-env': {\n            stage: false,\n            features: {\n                'nesting-rules': true,\n                'image-set-function': true,\n            },\n        },\n        cssnano: {\n            preset: [\n                'default',\n                {\n                    discardComments: {\n                        removeAll: true,\n                    },\n                },\n            ],\n        },\n        'cq-prolyfill\/postcss-plugin': true,\n    },\n}<\/code><br \/><br \/><\/pre><pre><code><\/code><\/pre><pre><code><\/code><\/pre><pre><code><\/code><\/pre><pre><code><\/code><\/pre><pre><code><\/code><\/pre><pre><code><\/code><\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-10f44fd elementor-widget elementor-widget-spacer\" data-id=\"10f44fd\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2347648 elementor-widget elementor-widget-text-editor\" data-id=\"2347648\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Esto es todo, hay muchas cosas m\u00e1s para agregarle y\/o mejorarle. Asi como tambien existen muchos mas plugins para utilizar, podemos buscar lo que precisamos en el buscador de <a href=\"https:\/\/www.postcss.parts\/\">PostCSS<\/a>.<\/p><p>Ac\u00e1 se encuentra el <a href=\"https:\/\/github.com\/GermanSaracca\/base_project_vite\">repositorio<\/a> con el codigo final.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Vite es una herramienta que mejora la experiencia de desarrollo front-end. Se puede utilizar para inicializar un proyecto de html, css y vanilla-js, o un proyecto de Vue,Svelte,React y\/o Preact. Automaticamente viene con un servidor de desarrollo y luego podemos construir el build de nuestro proyecto optimizado para producci\u00f3n.<\/p>","protected":false},"author":1,"featured_media":8468,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[43],"tags":[],"_links":{"self":[{"href":"https:\/\/temperies.com\/es\/wp-json\/wp\/v2\/posts\/6052"}],"collection":[{"href":"https:\/\/temperies.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/temperies.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/temperies.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/temperies.com\/es\/wp-json\/wp\/v2\/comments?post=6052"}],"version-history":[{"count":17,"href":"https:\/\/temperies.com\/es\/wp-json\/wp\/v2\/posts\/6052\/revisions"}],"predecessor-version":[{"id":9115,"href":"https:\/\/temperies.com\/es\/wp-json\/wp\/v2\/posts\/6052\/revisions\/9115"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/temperies.com\/es\/wp-json\/wp\/v2\/media\/8468"}],"wp:attachment":[{"href":"https:\/\/temperies.com\/es\/wp-json\/wp\/v2\/media?parent=6052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/temperies.com\/es\/wp-json\/wp\/v2\/categories?post=6052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/temperies.com\/es\/wp-json\/wp\/v2\/tags?post=6052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}