Hola, mi nombre es Crysfel Villa y el día de hoy comienzo con este proyecto donde quiero darle consejos a mi yo de hace 10 años para compartir mis aprendizajes a lo largo de mi carrera profesional, y de esa manera también, quizás ustedes puedan tomar algunos consejos qué les ayuden a superarse en su carrera profesional como individual contributor (IC) en la industria de tecnología.

Quiero ayudarte a encontrar un trabajo remoto en estados unidos para que puedas mejorar tu salario. Esto lo voy a hacer dándote consejos para que puedas hacer entrevistas técnicas en estados unidos de una manera efectiva. 

Compartiendo las preguntas que normalmente se suelen hacer en entrevistas técnicas también, en entrevistas de cultural fit y bueno, a través de todo el proceso de entrevistas que se requiere para que puedas conseguir ese trabajo que tanto quieres en Estados Unidos.

Durante los últimos cinco años, he trabajado en empresas de producto donde me ha tocado participar en los procesos de entrevista para diferentes candidatos en los roles que tenemos abiertos en estas empresas. Durante este tiempo, he podido realizar entrevistas a candidatos. Por lo tanto, me gustaría compartir esas experiencias, que es lo que suele funcionar, cuáles son las respuestas que generan una mejor impresión de estos candidatos y como tú las puedes utilizar para que puedas tener éxito en este proceso de entrevistas. 

También te voy a dar algunos consejos para mejorar tu carrera y contar algunas historias sobre mi experiencia e historias de éxito, pero también historias de terror que han pasado en algunos proyectos. 

Asimismo, voy a entrevistar otros ingenieros que actualmente están trabajando desde Latinoamérica para empresas en estados unidos de manera remota, para que también podamos aprender de parte de sus experiencias y coger también algunos consejos y tips que nos pueden servir.

Pero seguramente te estás preguntando ¿y quién eres tu? ¿Por qué debería escucharte? Bueno, actualmente soy Engineering Manager, pero he trabajado como Tech Lead y Senior Engineer. De hecho, inicié mi carrera allá por el 2007, esos son ya 16 años de experiencia que tengo. Si suena bastante, la verdad es que sí, son bastantes.

Y durante ese tiempo, principalmente me enfocado en el frontend. Dirigí proyectos específicamente en el frontend, pero también, de hecho inicié mi carrera como Backend Engineer, he hecho fullstack. Y bueno, me apasiona el desarrollo de productos no solamente a nivel técnico, pero también a nivel producto y e inclusive a nivel diseño. Entonces me ha tocado colaborar con Product Manages y Product Designers, si es algo que disfruto mucho hacer, es algo que, provee valor a los usuarios, no. 

Entonces también tengo varios, proyectos personales en los cuales me toca trabajar. Y ahí sí, me toca hacer de todo, product, design y bueno, también la parte técnica, porque, bueno, yo soy responsable de absolutamente de todo.

He trabajado de manera remota desde el que dejé mi trabajo y comencé a hacer freelance en el 2010, fue que comencé a tener clientes de Estados Unidos, Europa. Y bueno, esto me ha llevado a publicar contenido, he publicado dos libros técnicos, uno de JavaScript con un que se llama Ext JS allá por el 2013, y también tengo otro libro que escribí sobre React Native en el me parece.

Me gusta mucho compartir mis aprendizajes y mi experiencias. Por eso que estoy iniciando también este este nuevo proyecto.

Por último, me gustaría decir que me identifico como un mentor. De hecho, fundé una plataforma Open Source llamada coding coach que actualmente está allí. Sigue creciendo. Esta plataforma es interesante, como conocí gente en Twitter y iniciamos este proyecto y ahí hice muy buenas relaciones con con gente alrededor del mundo, gente en Europa, gente en Estados Unidos y bueno, en algún memento, voy a a hablar en un episodio al respecto.

Y bueno, compartir mis aprendizajes. Y no te olvides seguirme en Twitter para que podamos conversar. Ah, me puedes encontrar crysfel. Así es mi nombre y bueno, nos vemos entonces.

Código sin Fronteras: Introducción

Esta es una pregunta bastante común en entrevistas técnicas, su objetivo es identificar si tienes experiencia colaborando con Producto y Diseño, el día de hoy te ayudo a responderla de la mejora manera.

Durante la entrevista técnica es muy probable que te pregunten algo como lo siguiente, la pregunta puede variar un poco pero el concepto es el mismo:

Can you give an example where you had to balance technical, design, and business constraints? What decisions did you make and why?

Si cuentas con la suficiente experiencia, seguro que en alguna ocasión has estado en esta situación. Ya sabes, proyectos con tiempo limitado, requerimientos no muy claros o diseños complicados que tomarán más tiempo de lo que se tiene planeado.

Por lo tanto, al responder esta pregunta estás demostrando que cuentas con esa experiencia, así que prepara un ejemplo antes de la entrevista para que no te tomen desprevenido.

En mi caso, en una ocasión me toco trabajar en un proyecto donde habíamos estimado liberar a producción en X cantidad de semanas, pero cuando comencé a trabajar en ese proyecto, me encontré con dependencias de otros equipos, una API no regresaba la información que necesitaba.

La colaboración es super importante al desarrollar software, asegúrate que en tu respuesta menciones un ejemplo de que estás en constante comunicación con tu Product Manager así como otros stake holders.

Lo importante al responder esta pregunta es comentar cómo comunicaste estos problemas, que fue lo que se decidió y porque. ¿Se extendió el tiempo de entrega? ¿Se quitaron algunos requerimientos? No importa cuál fue el resultado, lo importante aquí es demostrar el nivel de colaboración que has tenido, especialmente si estás aplicando para un puesto Senior, ya que en estos puestos se requiere más colaboración y liderazgo.

Siguiendo con mi ejemplo, lo primero que hice en esa ocasión fue contactar al equipo responsable de la API para preguntar si era posible que ellos agregaran la información que necesitaba, como es de esperarse no era su principal prioridad y me comentaron que podrían hacerlo, pero un par de semanas después.

Inmediatamente se lo comuniqué a mi Product Manager así como al Engineering Manager, para discutir posibles alternativas.

Es muy importante que tanto Producto, Diseño e Ingeniería estén alineados en los objetivos, así que es muy común que alguien tenga que ceder en algo. Esto lleva a que naturalmente, existan conflictos en tu equipo.

Cuando respondas esta pregunta, asegúrate de demostrar como navegaste estas situaciones, ¿quién tuvo que ceder? y ¿cuáles fueron los argumentos?.

Otra cosa a considerar, es que en la cultura de Estados Unidos, (por lo menos en empresas donde vale la pena trabajar) se valora que las ideas se contradigan, que se busquen mejores alternativas, que haya desacuerdos saludables donde se pueda discutir diferentes puntos de vista. De hecho, en algunos casos se asigna el rol de 

 a una persona, su único objetivo es buscar fallas a la idea o solución, buscarle peros y tratar de encontrar problemas.

Siguiendo con mi ejemplo, propuse que yo podría hacer el cambio en la API del otro equipo, dejando claro que ese repositorio era nuevo para mi y que muy posiblemente agregaría algunos días más de lo planeado. También mencioné que podría impactar nuestra estimación inicial, pero la verdad no estaba del todo seguro ya que es difícil estimar sobre algo desconocido.

Otro aspecto a evaluar es tu habilidad para tomar decisiones, entre más Senior, más ejemplos vas a tener de alguna decisión tomada. Asegúrate de comentar las decisiones que se tomaron para resolver el conflicto.

Siguiendo con mi ejemplo, en esa ocasión se decidió que yo actualizaría la API del otro equipo, además se consideró que la fecha de entrega podría ser movida una semana extra.

Finalmente menciona cuales fueron los resultados de las decisiones tomadas, no tienen que ser buenos o malos resultados, lo importante aquí es demostrar que te has tomado el tiempo para analizar y reflexionar en tus decisiones tomadas.

También asegúrate de responder porque crees que esa fue una buena o mala decisión y tus aprendizajes de esa experiencia.

En mi ejemplo diría que lo importante aquí fue comunicar inmediatamente el problema encontrado para poder discutir una solución donde todos estuvimos de acuerdo. A final del día el proyecto salió a producción satisfactoriamente.

¿Puedes darme un ejemplo donde tuviste que lidiar con limitantes técnicas, de diseño o negocio?

Esta es una pregunta muy común en entrevistas técnicas, es una pregunta abierta de la cual se pretende conocer mejor al candidato. A partir de aquí surgirán más preguntas y la idea es tener una conversación interesante al respecto.

La primera vez que entrevisté para una empresa en Silicon Valley, no me prepare nada, entonces al hacerme esta pregunta rápidamente recordé un proyecto, pero ya que había pasado tiempo de haber trabajado en este problema, realmente no recordaba todos los detalles y eso me puso mucho más nervioso.

What's the most difficult technical problem you've had to solve?

Por demás está decir que fallé la entrevista y no pasé al siguiente paso en el proceso de entrevistas, fue una lástima porque de verdad me hubiera gustado trabajar en esa compañía.

Es por eso que uno de los consejos que siempre doy es prepararse con tiempo, parte de la preparación es escribir en un documento el problema más complicado que te ha tocado resolver, puede ser un componente que falló en producción, alguna iniciativa que te tocó trabajar, diseñar una solución a un problema de negocio, etc. realmente esto dependerá mucho de tu nivel de seniority.

Es importante elegir un problema que sea relevante para el trabajo al que estás aplicando y que puedas explicar claramente cómo lo solucionaste.

Si aplicas a un puesto de Backend y hablas sobre un problema de Frontend, puede ser interesante, pero no muy relevante para lo que estás aplicando.

También es importante considerar a tu audiencia, con esto me refiero al background del entrevistador, si esta pregunta te la hace un Product Manager la respuesta debería es diferente si te la hace un Ingeniero. Siempre recomiendo tratar conocer lo más que puedas al entrevistador, para eso puedes ir a LinkedIn o alguna otra red social donde sea activo.

Al describir el problema, asegúrate de proporcionar suficiente contexto para que el entrevistador comprenda la situación. Explica cómo afectó el problema al proyecto o a la empresa, y qué obstáculos enfrentaste al tratar de solucionarlo.

Luego, describe los pasos que tomaste para resolver el problema. ¿Investigaste alternativas? ¿Buscaste ayuda de otros departamentos o colegas? ¿Tomaste medidas inmediatas para mitigar el impacto del problema? La colaboración es algo muy importante que se toma en cuenta, así que no te olvides mencionar si colaboraste con alguien más.

Finalmente, describe los resultados de tus acciones. ¿Cómo se resolvió el problema? ¿Cómo afectó positivamente el proyecto o la empresa? ¿Qué aprendiste de la experiencia? Esto demuestra que te tomas el tiempo para reflexionar y analizar tus resultados, algo que definitivamente hará que sobre salgas sobre el resto de los candidatos.

Recuerda que la clave para responder a esta pregunta es demostrar tus habilidades de resolución de problemas y tu capacidad para manejar situaciones difíciles de manera efectiva. 

Prepara ejemplos relevantes y asegúrate de practicar tu respuesta antes de la entrevista, ya sea escribiendo en un documento todos los detalles, hablando en voz alta frente a un espejo o bien pidiendo ayuda a un amigo que te escuche.

¿Cuál ha sido el problema más difícil que has tenido que solucionar?

Trabajar en tech no significa desarrollar software solamente, quizás programar no es lo tuyo pero aún así puedes trabajar en otros roles que también son muy bien pagados, en este artículo voy a describir algunos de los roles así como sus salarios, quizás alguno te interese. Importante mencionar que estos roles son muy comunes en empresas en Estados Unidos y aunque se parecen, tienen algunas variaciones entre empresas.

El rol del PM es más estratégico, ellos están en constante comunicación con el resto de la organización y su principal objetivo es generar y documentar estrategias para cumplir con los OKR del equipo. Un buen PM trabaja muy de cerca con Ingeniería, Diseño y QA. Tienen muy buen conocimiento del negocio y del producto, ya que se dedican a documentar flujos y lógica de los procesos del negocio.

Los PM generan los Product Briefs, son documentos donde detallan un problema y la solución, cómo se va a medir el éxito de la solución, así como el fracaso. Este documento es tomado por ingeniería y diseño para traducirlo a una solución de software, claro está que ingeniería y diseño también colaboran al hacer este documento, ya que siempre hay cosas a considerar tanto del lado técnico como de diseño.

El salario promedio en Estados Unidos anualmente es de 

, claro está que depende mucho de la compañía, por ejemplo en Meta el promedio es de 

. Importante aclarar que este es el promedio, habrá quien gane mucho más y otros mucho menos. Pero con esto te puedes dar 

Los Product Designers son responsables de generar interfaces de usuario, toman el product brief y crean un diseño para dárselo a ingeniería. Entre sus responsabilidades está crear/mantener el Design System de la empresa, asegurarse que el diseño cumpla con el estilo y valores de la organización y trabajar muy de cerca con Product e Ingeniería.

Un buen PD se toma el tiempo para hacer user research y tiene buenos conocimientos de experiencia de usuario. Un excelente PD conoce como funciona la web y tiene un conocimiento básico/intermedio de HTML y CSS. En mi experiencia estos son los mejores diseñadores con los que me ha tocado trabajar.

El salario promedio a nivel nacional es de 

dólares anuales. En Pinteres el promedio es 

El EM se encarga de asegurarse que el equipo tenga la herramientas necesarias para cumplir con los objetivos, un buen EM conoce como funciona el sistema en general. También se encargan de darle seguimiento a la carrera profesional de los Individual Contributors (IC), así como entrevistar y contratar talento.

Un excelente EM es un mentor, uno de sus objetivos principales es retener talento y velar por el bienestar del equipo.

A nivel nacional el salario de un EM es de 

, pero baría mucho entre compañías, por ejemplo en AirBnB el promedio es de 

El rol del QA es indispensable para garantizar la calidad del producto, las personas en este rol conocen las reglas de negocio al derecho y al reves, tienen documentados todos los flujos del sistema y son excelentes encontrando errores y documentando los pasos para reproducirlos.

Un excelente QA también sabe cómo automatizar las pruebas con Cypress o alguna otra herramienta parecida. Pocas veces me ha tocado trabajar con un excelente QA.

A nivel nacional pareciera ser bajo el salario, solamente 

 anuales. Pero también depende mucho la experiencia, para alguien con 5 años el promedio llega a 

La gente en este puesto se encarga de generar reportes que ayuden a tomar decisiones estratégicas basados en información recolectada en el sistema. Dentro de esta área hay varios puestos realmente, y algunos si requieren de programación para modelar la información. En empresas medianas y grandes encontrarás este puesto, ya que es indispensable poder analizar lo que sucede en el producto.

Normalmente siempre hay una o dos personas en este puesto, su objetivo principal es colaborar con producto, diseño e ingeniería, para definir los textos y etiquetas en el producto. Siempre es importante comunicar de manera efectiva, tener a una persona especialista en comunicación escrita es indispensable.

La verdad es que este rol comparado con ingeniería, diseño o producto, es bastante más competido, porque hay menos plazas, como dije, suele haber uno o dos puestos así en toda la organización. Además organizaciones pequeñas seguramente no lo tendrán.

Además de los roles mencionados, existen muchos otros como en cualquier otro negocio, como marketing, recursos humanos, soporte al cliente, ventas, etc. básicamente todos los necesarios para la operación. Pero en este post me quise enfocar principalmente en los que trabajan directamente desarrollando el producto.

Así que ya lo sabes, si gustas trabajar en una empresa tech desarrollando un producto, no necesariamente necesitas saber programar, hay varios otros roles que puedes considerar. Los salarios promedio fueron tomados de Indeed.

Trabajos que no requieren programación en la industria Tech (con salarios en 2023)

Esta es una de las preguntas que suelo realizar en una entrevista técnica, es una pregunta abierta y cada candidato suele decir diferentes cosas. Lo que se busca aquí es conocer su forma de colaborar con diferentes equipos en la organización, especialmente si el candidato está aplicando a un puesto de Senior, Staff o Principal.

A continuación voy a mostrar algunas respuestas que se espera dependiendo el nivel del candidato, entre más Senior se espera más colaboración y autonomía.

Un programador que recién está iniciando necesita más ayuda que alguien más experimentado, entre las respuestas que se esperan son cosas como:

Solicitar 1:1s para dar un overview del sistema

Alguien con un poco más de experiencia debería poder aventurarse al proyecto más fácil, entre las respuestas esperadas sería algo como:

Un programador Senior debería ser más autónomo, no digo que no deba preguntar nunca, por el contrario, debe apoyarse en su equipo haciendo preguntas interesantes sobre la arquitectura o modelo de negocio. Entre las respuestas esperadas sería algo como:

Familiarizarse con la arquitectura del sistema a un alto nivel

Entender como fluye la información en el sistema

Comunicarse con los owners del repositorio para aclarar dudas

Ver los tests existentes para entender funcionamiento esperado

Si te das cuenta, entre más Senior, se espera que el candidato sea más autónomo y también que se enfoque más en el modelo del negocio y el problema que soluciona determinadas partes del sistema. 

A final del día es importante recordar que nuestro principal objetivo es resolver mediante tecnología los problemas de negocio, aportando valor a nuestros usuarios, creo que entre más Senior esto se debe de tener claro.

Algo que me ha funcionado mucho a nivel personal, es participar en incidentes como espectador, ver como se solucionan los problemas y lo que está fallando te ayudará a comprender el sistema mejor, además de que conocerás a gente de otros equipos y te darás a conocer también. Si haces preguntas que ayuden a identificar el problema, mucho mejor.

¿Cuál es tu estrategia para ser productivo en un repositorio nuevo?

Comencé a usar Notion hace casi un año (en el 2021) para manejar mi contenido de Youtube, me ha gustado mucho el producto y la manera tan sencilla de organizar mis ideas, scripts, diario personal, etc. Así que decidí usarlo también para mi blog personal.

Uno de los retos fue lograr mostrar la información de Notion a mi página web, pero afortunadamente Notion cuenta con una API Rest que te da acceso a todo el contenido que tengas. En este tutorial voy a mostrar los pasos necesarios para que tú también puedas hacerlo si gustas.

Durante años mi blog ha sido un Wordpress sencillo, así que ya tenía varios posts publicados y era necesario traerlos a Notion, lo cual no fue del todo sencillo porque lo intenté de varias maneras sin tener éxito. 

Afortunadamente encontré un plugin para Wordpress que se llama 

. Este plugin nos permite exportar todos nuestros posts en formato CSV dando click a un botón. 

Una vez que descargué mi contenido a mi local, importarlo en Notion es bastante sencillo. Solo basta ir a la colección donde lo quieres importar y dar click sobre la opción 

 que se encuentra en el menu superior derecho, se abre una ventana modal donde vienen varias opciones, entre ellas la opción de CSV.

Algunos posts que importé tenían imágenes o porciones de código, el plugin exportador solamente me generó el CVS con HTML en el campo de contenido, por lo tanto algunos posts no se veían del todo bien. Una de las características de Notion es que permite usar markdown, así que usé una herramienta para convertir 

Sólo tenía unos pocos posts, de tener cientos habría automatizado el proceso, muy probablemente haciendo un script y usando el API de Notion para insertar cada registro.

Una vez listo el contenido ¡es hora de comenzar a programar! Para este proyecto decidí usar 

En primer lugar porque quería aprender a usar este framework. 

Está basado en React, así que no tenía que aprender esa parte.

Permite generar sitios estáticos que se pueden deployar a Github Pages, esto es importante para el SEO, además de que no quería mantener un servidor web.

Es bastante popular y con buena documentación, importante para cuando es necesario buscar ayuda.

. Ya he usado Gatsby, pero la verdad es que no tenía claro como integrar el API de Notion con GraphQL, además de que mis ganas por aprender Nextjs fueron más. 

AstroJS se ve bastante interesante, pero adicionalmente a aprender el framework, no usa React, así que tenía que aprender su propia manera de hacer componentes, y la verdad es que tampoco le quería dedicar mucho tiempo a este proyecto.

Iniciarte con NextJS es bastante sencillo, yo decidí usar Typescript y solamente tuve que 

Siempre que es mi decisión, decido usar Tailwind CSS para la parte de los estilos. 

 es bastante sencillo, solo me bastó con seguir la documentación y en cuestión de minutos tenía Tailwind funcionando correctamente.

Lo siguiente es sacar la información de Notion usando el API disponible, para esto es necesario 

 en tu cuenta de Notion. Yo le di acceso de solo lectura porque no voy a escribir nada, esta integración es para mi blog. Una vez que creaste la integración te van a dar un Secret Key, este lo vas a usar en todos tus requests para autenticarte y acceder a tu información.

Una vez que tienes tu integración es necesario asignarla a una 

, Notion así les llama a las colecciones/folders que tienes para organizar tu información. Lo que tienes que hacer aquí es ir a la colección y en el menú superior derecho, hay una opción que se llama 

, en esta sección hay una opción que dice 

, te aparece un submenu con varias opciones, entre una de ellas estará la integración que creaste, selecciona esa y listo.

Por último necesitar el ID de la base de datos. Este lo vas a usar en cada request que hagas al API. La documentación no dice nada al respecto de cómo obtener este ID, yo estuve un buen rato buscándolo y jalándome los pelos. Pero lo puedes sacar de la URL de la colección, por ejemplo, la URL de la colección de mi blog es la siguiente:

https://www.notion.so/crysfel/4b751e1cdfe1471b97912bceee115156?v=38bb03c48f0a42c79b8c84ea4a7c2800

. Ese es el ID que vamos a necesitar más adelante para sacar todos los artículos publicados.

Ya que tenemos el Secret Key y el Database ID, estamos listos para comenzar a llamar el API. Te recomiendo usar Postman para probar que tus peticiones funcionen bien.

En cada post, he creado una propiedad llamada 

, esta propiedad tiene varios valores, por ejemplo: Idea, Draft, Review y Publish. Tengo un lindo board donde voy moviendo las tarjetas en entre estas columnas.

Ahora bien, quiero leer solamente aquellos posts que estén con 

. Además los quiere ordenados por lo últimos que he publicado.

Aquí tuve un problema porque la documentación de Notion no es muy clara, tiene varios endpoints pero no vi por ningún lado como sacar justo la información que necesitaba, así que me puse a probar todos. Resulta que se debe usar 

, y tiene sentido una vez que sabes que Notion le llama database a las colección, pero en ese momento no lo sabía y si me tardé un buen rato.

Bueno, la petición para este ejemplo sería la siguiente.

POST https://api.notion.com/v1/databases/[DATABASE_ID]/query

Body Payload:
  {
    "page_size": 20,
    "filter": {
        "and": [
            {
                "property": "Status",
                "select": {
                    "equals": "publish"
                }
            },
            {
                "property": "Type",
                "select": {
                    "equals": "post"
                }
            }
        ]
    },
    "sorts": [
        {
            "property": "Date",
            "direction": "descending"
        }
    ]
}

Como se puede observar, se puede definir el número de posts que quieres traer por cada consulta, así como filtros. En mi caso tengo varios tipos de posts, proyectos, books, etc. Así que para el blog solamente quiere traer los de tipo 

No olvidar mandar el Secret Key en la cabecera 

 del request, también es necesario mandar el 

 como parte de los headers, de lo contrario vas a recibir un error. En la 

Esa petición trae todos los post con la mayoría de información, pero falta lo más importante, el contenido principal. Para traer el contenido tienes que hacer otra petición por cada post al siguiente endpoint.

GET https://api.notion.com/v1/blocks/[POST_ID]/children

. La respuesta de este endpoint será un JSON con todo el contenido, cada párrafo es un bloque que a su vez puede tener otros bloques, dependiendo como has formateado el contenido.

El siguiente problema que me encontré fue como hacer para guardar la información en local, ya que la voy a usar en varios lugares y además solo la voy a usar al momento de generar todos los HTML estáticos, ya que no voy a usar un servidor web con Node, todo será HTML y CSS para que mi sitio vuele.

Decidí hacer un script que consultara la API de notion, sacara toda la información y me guardara un archivo JSON en mi local, de esta manera al desarrollar solamente leería el archivo JSON desde Nextjs y listo, todo mi contenido estaría disponible y listo para ser usado.

El script es bastante sencillo, solo hace una petición inicial a Notion para traer todos los posts publicados, luego itero esa lista para hacer una petición individual por cada post y traer el contenido principal. 

Para hacer las peticiones a Notion se puede usar cualquier cliente HTTP, pero yo decidí usar el SDK de notion, así que instale el paquete 

. La petición petición inicial queda así:

const Notion = require('@notionhq/client')

const notion = new Notion.Client({ auth: process.env.NOTION_PK })

const response = await notion.databases.query({
    database_id: process.env.NOTION_DB_ID,
    page_size: PAGE_SIZE,
    filter: {
      and: [
        {
          property: 'Status',
          select: {
            equals: 'publish'
          }
        },
        {
          property: 'Type',
          select: {
            equals: 'post'
          }
        }
      ]
    },
    sorts: [
      {
        property: 'Date',
        direction: 'descending'
      }
    ]
  })

Una vez que responde y tengo todos los post disponibles, itero la lista y hago la siguiente petición por cada item, con esto me traigo el contenido principal de cada post.

const postResponse = await notion.blocks.children.list({
  block_id: node.id,
})

const post = {
  id: node.id,
  title: node.properties.Content.title[0].plain_text,
  content: postResponse.results,
  createdAt: node.created_time,
  publishedAt: node.properties.Date.date.start,
  slug: node.properties.Slug?.rich_text[0].plain_text || node.id,
  permalink: node.properties.Permalink.url,
  tags: node.properties.Tags.multi_select.map(tag => tag.name.toLowerCase()),
  image, // <--- TODO: Download this image!!
}

Y listo, ya tengo todo la información. Simplemente creo un nuevo arreglo de posts con los fields que necesito y guardo el JSON en un archivo de texto para poder usarlo después.

Otro de los problemas es que tengo definidas imágenes para cada post, esta imagen la selecciono directamente en Notion, ya sea subiendo una que yo tenga en mi disco duro o bien usando el widget de UnSplash.

Estas imágenes son privadas, y el API de Notion te regresa la URL donde están almacenadas en Amazon S3. Pero, al ser privadas expiran en 30 minutos, así que es necesario descargarlas para que las puedas mostrar desde el servidor donde vas a deployar este sitio, en mi caso Github Pages.

Descargar imágenes o archivos en Node, no es complicado, yo lo hice de la siguiente manera:

Como se puede observer descargo las imágenes en el folder público del proyecto, cuando se hace el build, todos los archivos en este folder serán parte del resultado final, así que es importante poner las imágenes aquí para que pueda ser servidas cuando se deploye este sitio a producción.

Otro problema que me encontré es que las imágenes que vienen de UnSplash estás muy grandes, esto hace que el sitio se ponga lento en la carga inicial. Para optimizar esto es necesario redimensionar las imágenes para crear versiones más pequeñas.

Para redimensionar las imágenes, decidí usar una librería llamada 

, es bastante rápido y las imágenes quedan con buena calidad.

Una vez las imágenes ya estaban descargadas y redimensionadas, simplemente guardé la URL correcta en el JSON que tengo en mi local.

const remoteImage = node.cover?.type === 'external'
	? node.cover?.external?.url 
	: node.cover?.file?.url

if (remoteImage) {
  const sizes = [
    { name: 'tiny', width: 10 },
    { name: 'tns', width: 500 },
    { name: 'large', width: 1200 },
  ];
  const imageName = `${node.id}.${getImageFormat(node)}`

  await downloadImage(remoteImage, imageName)
  await resizeImageToMultipleSizes(imageName, sizes)

  image = {
    original: `/images/original/${imageName}`,
    large: `/images/large/${imageName}`,
    tns: `/images/tns/${imageName}`,
    tiny: `/images/tiny/${imageName}`,
  }
}

const post = {
  id: node.id,
  title: node.properties.Content.title[0].plain_text,
  content: postResponse.results,
  createdAt: node.created_time,
  publishedAt: node.properties.Date.date.start,
  slug: node.properties.Slug?.rich_text[0].plain_text || node.id,
  permalink: node.properties.Permalink.url,
  tags: node.properties.Tags.multi_select.map(tag => tag.name.toLowerCase()),
  image,
}

¡Listo! Eso es toda la integración con Notion, ya tenemos en nuestro local los posts, así como las imágenes de cada uno.

El Blog

Últimas publicaciones

Código sin Fronteras: Introducción

¿Puedes darme un ejemplo donde tuviste que lidiar con limitantes técnicas, de diseño o negocio?

¿Cuál ha sido el problema más difícil que has tenido que solucionar?

Trabajos que no requieren programación en la industria Tech (con salarios en 2023)

¿Cuál es tu estrategia para ser productivo en un repositorio nuevo?

Como migrar de Wordpress a Notion

Conecta conmigo!

Tags

Te ayudo a mejorar al entrevistar, únete a mi lista de correo.

También estoy en Youtube