Hackeando un e-Reader para Mostrar Mi Menú de Té Con JSX

Rate this content
Bookmark
Slides

Quería tener un menú de té para mostrar a los invitados y para mi propia referencia. Resulta que los e-Readers usan tan poca energía y pueden renderizar HTML! Compartiré cómo generar un e-book con todas tus bebidas con React, JSX y Deno, así como renderizar una página de portada personalizada con SVG. Sorprende a tus amigos convirtiendo un viejo dispositivo en un menú de té para el hogar inteligente, y aprende cómo escribir tu próximo libro con React.

7 min
12 Dec, 2023

AI Generated Video Summary

React se puede utilizar para crear menús personalizados para e-readers, y el proceso implica crear una imagen y un e-book con React y cargarlos en el e-reader. Escribir un e-book EPUB para e-readers implica convertir un archivo SVG en una imagen PNG y escribir el e-book en formato EPUB usando HTML, CSS e imágenes. Los generadores de EPUB como Pandoc y Dino simplifican el proceso de generar EPUBs a partir de markdown y ejecutar JavaScript en el escritorio, respectivamente.

1. Uso de React para Crear Menús Personalizados para Lectores Electrónicos

Short description:

React para sitios web es genial, pero ¿qué tal si lo usamos para libros electrónicos? Estoy aquí para mostrarte cómo hackear un lector electrónico para que muestre lo que quieras, como un menú de té. Te mostraré cómo puedes hacer esto tú mismo. Creando una imagen y un libro electrónico con React, y luego cargándolos en el lector electrónico.

React para sitios web es genial, pero ¿qué tal si lo usamos para libros electrónicos? Estoy aquí para mostrarte cómo hackear un lector electrónico para que muestre lo que quieras, como un menú de té. Mi nombre es Tiger Oaks. Soy un ingeniero de software que trabaja en Microsoft. Anteriormente trabajé en tres navegadores web diferentes. Puedes encontrarme en Mountainwoods en todas las redes sociales, como no un cierto golfista. Además de mi nombre genial, si hay algo que debes notar sobre mí, es que me gusta mucho el té. He comprado té de diferentes tiendas alrededor del mundo, y he recibido muchos tés como regalos de amigos. Acabo de ir a un festival de té el mes pasado. Básicamente, ahora tengo alrededor de 30 sabores de té diferentes en mi apartamento. Pero cuando tengo invitados, simplemente tengo demasiados tés para listar. Para cuando llego a la mitad, sus ojos ya se han vuelto vidriosos. ¿La solución? Poner mi colección en un menú. Ahora, yo puedo simplemente dar a los invitados una lista que pueden ojear como quieran. En lugar de reimprimir un pedazo de papel cada vez que mi colección cambia, puedo simplemente actualizar un lector electrónico. Te mostraré cómo puedes hacer esto tú mismo. Creando una imagen y un libro electrónico con React, y luego cargándolos en el lector electrónico. Comencemos desglosando cómo hacer una imagen para mostrar más tarde. Primero, comenzamos con un fondo para hacer que el menú se vea un poco más agradable. Tomé inspiration de una tienda de té temática de Dungeons and Dragons y creé un fondo personalizado en un papel Luego pasé a crear el texto del primer plano usando SVG. Frecuentemente usamos SVG para crear arte vectorial en nuestros sitios web, y se parece a HTML y nos permite usar React y CSS. Para un solo sabor de té en el menú, creé elementos de texto para el nombre del té y la descripción, así como una línea para separarlos. Luego lo envolví en un grupo SVG, como un div. Escribí un pequeño programa en TypeScript para leer la database con mi té, y luego escribir archivos SVG usando React. Este fragmento de SVG se ha convertido en un componente React, por lo que puedes traducir un objeto data en una imagen renderizada usando elementos de texto y posicionamiento SVG. Luego puedo mover cada uno de estos grupos, usando transform translate, como una transformación CSS, o usando position absolute. Al establecer diferentes valores de X e Y, puedo reutilizar los mismos textos y elementos de línea pero moverlos alrededor de la imagen. Con una sección superior bien dispuesta, puedo luego envolver todos estos elementos en un grupo y repetir el mismo proceso, escribiendo el componente con una traducción diferente para la sección inferior. SVG es muy flexible, por lo que puedes hacer tus propias personalizaciones. Podrías cambiar la fuente para ver los conjuntos, o mostrar diferentes elementos y mostrar menús para otras cosas en tu casa. También es fácil cambiar el fondo

2. Escribir un libro electrónico EPUB para lectores electrónicos

Short description:

Para el lector electrónico, convierte el archivo SVG en una imagen PNG. Escribe tu propio libro electrónico utilizando la imagen del menú como portada. Los libros electrónicos se escriben en formato EPUB, un formato estandarizado utilizado por todos los lectores electrónicos excepto los Kindles. Los EPUB son archivos zip con una extensión renombrada. Escribir un libro electrónico es similar a escribir un sitio web, utilizando HTML, CSS e imágenes para cada capítulo. EPUB utiliza XHTML, con etiquetas de cierre automático y nombres en minúsculas. Incluye CSS y utiliza etiquetas como H1, P e imagen. Los EPUB necesitan un archivo content.OPF que actúa como un mapa del sitio, incluyendo metadatos, manifiesto, espionaje y guía.

la imagen a lo que quieras. Para el lector electrónico, convierto el archivo SVG en una imagen PNG, lo que puedes hacer utilizando herramientas gratuitas como Inkscape y Squoosh. Algunos lectores electrónicos te permiten subir una imagen de pantalla de bloqueo personalizada, puedo conectarlo a mi computadora, luego arrastrar esta imagen a su disco duro en una carpeta de protector de pantalla. Otros lectores electrónicos no tienen esta característica. Sin embargo, la mayoría de ellos mostrarán la portada del libro que estás leyendo cuando esté bloqueado. Podemos aprovechar esto escribiendo nuestro propio libro electrónico utilizando la imagen del menú como portada del libro.

Ahora, cuando digo libro electrónico, probablemente pienses en una versión digital de un libro grande como este con muchos capítulos. Pero nuestro libro electrónico va a ser más como un folleto. Si tienes al menos una página, puedes escribir un libro electrónico. Los libros electrónicos se escriben en un formato llamado EPUB. Este es un formato estandarizado utilizado por todos los lectores electrónicos excepto los Kindles, pero Amazon te permite convertir fácilmente de EPUB al formato personalizado de Kindle. Los EPUB son en realidad solo archivos zip que tienen su extensión renombrada. Al igual que los sitios web, los libros electrónicos necesitan ser responsivos ya que puedes tener diferentes tamaños de pantalla de lectores electrónicos. Como resultado, escribir un libro electrónico es muy similar a escribir un sitio web. Utilizas familiar HTML, CSS, e imágenes para crear cada capítulo del libro. En un sitio web, cada archivo HTML es una página en tu sitio, pero en un libro electrónico, cada archivo HTML es un capítulo de tu libro. EPUB utiliza una versión más estricta de HTML llamada XHTML. Necesitas asegurarte de que tus etiquetas de cierre automático tengan una barra y que los nombres de tus etiquetas estén todos en minúsculas. Esto puede sonar familiar porque estas son exactamente las mismas restricciones que tiene JSX, pero aparte de eso, todo es igual. Puedes incluir CSS y usar las mismas etiquetas como H1 y P e imagen. Los EPUB también necesitan un archivo llamado content.OPF, que actúa como un mapa del sitio. Este archivo incluye data, como el título del libro, cada archivo en la carpeta zip, los capítulos del libro en orden, y marcadores para algunas páginas importantes. Aquí tienes un ejemplo. El archivo de contenido está escrito en XML. Vamos a ocultar las partes no importantes. Puedes verlo desglosado en algunas etiquetas, similar a cómo un archivo HTML se desglosa en etiquetas de encabezado y cuerpo. Los metadatos incluyen el título del libro y la imagen de portada. El manifiesto incluye todos los archivos en el libro. Algunos archivos han sido asignados un id que puede ser referenciado en secciones superiores. El espionaje indica el orden de los capítulos. Y la guía apunta a

3. Generando EPUB con Pandoc y Dino

Short description:

No tienes que lidiar con el mantenimiento del archivo manualmente. Los generadores de EPUB simplifican la escritura de libros electrónicos. Pandoc convierte el markdown a EPUB, utilizando la materia frontal para los metadatos y los encabezados como capítulos. Dino es una herramienta poderosa para ejecutar JavaScript en tu escritorio, con soporte para TypeScript y JSX, un formateador lineal incorporado y una gran biblioteca estándar. Proporciona todos los bloques de construcción necesarios para crear un menú como este. El código está disponible en GitHub. Este proceso es más divertido y ayuda a entender los lectores electrónicos. La actualización del menú es más rápida al volver a ejecutar el script.

páginas importantes, como la tabla de contenidos. Probablemente no quieras lidiar con el mantenimiento de un archivo como este, pero no te preocupes. Al igual que HTML tiene generadores de sitios estáticos para simplificar la escritura de un sitio web, existen generadores de EPUB para simplificar la escritura de libros electrónicos.

Utilicé Pandoc, un programa que puede convertir un archivo markdown en un archivo EPUB. La materia frontal en la parte superior del archivo markdown se utiliza para llenar los metadatos de EPUB. Cada encabezado de nivel superior en un markdown se convierte en un capítulo de EPUB, por lo que es fácil incluir imágenes y descripciones de cada sabor de T como capítulos de EPUB.

Luego lo ejecuté todo con Dino, que es una herramienta realmente útil para ejecutar JavaScript en tu escritorio, como Node, pero con muchas más funciones incorporadas. Tiene soporte incorporado para TypeScript y JSX, por lo que no necesité un paso de construcción. También incluye un formateador lineal incorporado, por lo que no necesité ESLint o Prettier, y tiene una gran biblioteca estándar, por lo que ni siquiera necesitas tantos módulos MPM modules. Cambié a usar Dino cuando escribía scripts monad, porque es más fácil construir algo con él. Con eso, tienes todos los bloques de construcción que necesitas para crear un menú como este por ti mismo. También puedes encontrar todo el código que escribí en GitHub.

Podrías preguntar, ¿por qué pasar por todo este problema cuando podrías decir, usar un bolígrafo y papel? Bueno, es más divertido. Este también es un gran proceso de aprendizaje para mí para entender mejor cómo funcionan los lectores electrónicos. Y cada vez que cambiamos nuestras camisetas, es mucho más rápido simplemente volver a ejecutar el script. Gracias a todos por escuchar, y no dudes en ponerte en contacto conmigo si tienes alguna pregunta.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

GraphQL Galaxy 2022GraphQL Galaxy 2022
31 min
Your GraphQL Groove
Building with GraphQL for the first time can be anywhere between daunting and easy-peasy. Understanding which features to look for in your client-side and server-side tooling and getting into the right habits (and ridding yourself of old habits) is the key to succeed with a team of any size in GraphQL.

This talk gives an overview of common struggles I've seen numerous teams have when building with GraphQL, how they got around common sources of frustration, and the mindset they eventually adopted, and lessons learned, so you can confidently stick with and adopt GraphQL!
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Atomic Deployment for JS Hipsters
Deploying an app is all but an easy process. You will encounter a lot of glitches and pain points to solve to have it working properly. The worst is: that now that you can deploy your app in production, how can't you also deploy all branches in the project to get access to live previews? And be able to do a fast-revert on-demand?Fortunately, the classic DevOps toolkit has all you need to achieve it without compromising your mental health. By expertly mixing Git, Unix tools, and API calls, and orchestrating all of them with JavaScript, you'll master the secret of safe atomic deployments.No more need to rely on commercial services: become the perfect tool master and netlifize your app right at home!
React Advanced Conference 2021React Advanced Conference 2021
6 min
Full-stack & typesafe React (+Native) apps with tRPC.io
Why are we devs so obsessed with decoupling things that are coupled nature? tRPC is a library that replaces the need for GraphQL or REST for internal APIs. When using it, you simply write backend functions whose input and output shapes are instantly inferred in your frontend without any code generation; making writing API schemas a thing of the past. It's lightweight, not tied to React, HTTP-cacheable, and can be incrementally adopted. In this talk, I'll give a glimpse of the DX you can get from tRPC and how (and why) to get started.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
168 min
How to create editor experiences your team will love
Workshop
Content is a crucial part of what you build on the web. Modern web technologies brings a lot to the developer experience in terms of building content-driven sites, but how can we improve things for editors and content creators? In this workshop you’ll learn how use Sanity.io to approach structured content modeling, and how to build, iterate, and configure your own CMS to unify data models with efficient and delightful editor experiences. It’s intended for web developers who want to deliver better content experiences for their content teams and clients.