Hackeando un e-Reader con React

Rate this content
Bookmark

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 usando 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 a escribir tu próximo libro con React.

7 min
23 Oct, 2023

AI Generated Video Summary

¿React para eBooks? Aprende a hackear un eReader para mostrar un menú de té. Crea imágenes y escribe e-books usando React. Usa el formato EPUB para crear capítulos e incluir CSS. Usa Pandoc y Dino para simplificar el proceso y hacer actualizaciones rápidas.

1. Introducción a React para eBooks

Short description:

¿React para eBooks? Aprende a hackear un eReader para mostrar un menú de té. Mi nombre es Tiger Oaks, ingeniero de software en Microsoft. Te mostraré cómo crear una imagen y un e-book con React, y cargarlos en el e-reader.

React para sitios web es genial y todo, pero ¿qué tal si lo usamos para eBooks? Estoy aquí para mostrarte cómo hackear un eReader para hacer 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, es decir, no un cierto golfista.

Además de mi nombre genial, si hay algo que debes saber 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, e incluso fui 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 enumerar. Cuando llego a la mitad, sus ojos ya se han vuelto vidriosos. ¿La solución? Poner mi colección en un menú. Ahora, puedo simplemente entregar a los invitados una lista que pueden examinar a su gusto. En lugar de volver a imprimir un pedazo de papel cada vez que mi colección cambia, puedo simplemente actualizar un e-reader. Ahora, te mostraré cómo puedes hacer esto tú mismo, creando una imagen y un e-book con React, y luego cargándolos en el e-reader.

2. Creando Imágenes y Escribiendo E-books

Short description:

Comencemos creando una imagen para el menú usando un fondo personalizado y SVG para el texto en primer plano. Podemos mover los elementos de texto alrededor de la imagen estableciendo diferentes valores de x e y. El archivo SVG se puede convertir a una imagen png para un e-reader. Al escribir nuestro propio e-book en formato EPUB, podemos usar la imagen del menú como la portada del libro. Los e-books son similares a los sitios web, con cada archivo HTML representando una página.

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 la textura del papel.

Luego, pasé a crear el texto en primer plano usando SVG. Frecuentemente usamos SVG para crear arte vectorial en nuestros sitios web, y se asemeja 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 y la descripción del té, 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 elementos de texto y línea, pero moverlos alrededor de la imagen.

Con la sección superior bien dispuesta, puedo envolver todos estos elementos en un grupo y repetir el mismo proceso, ejecutando 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 a CSS o mostrar diferentes número de elementos y mostrar un menú para otras cosas en tu casa. También es fácil cambiar la imagen de fondo a lo que quieras. Para un e-reader, convierto el archivo SVG en una imagen png, lo que puedes hacer usando herramientas gratuitas como Inkscape y Squoosh. Algunos e-readers te permiten simplemente 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. Pero otros e-readers no tienen esta característica. Sin embargo, la mayoría de ellos mostrarán la portada de cualquier libro que estés leyendo cuando esté bloqueado. Podemos abusar de esto escribiendo nuestro propio e-book, usando la imagen del menú como la portada del libro.

Ahora, cuando digo e-book, probablemente pienses en una versión digital de un gran libro como este con muchos personajes. Pero nuestro e-book va a ser más como un folleto. Si tienes al menos una página, puedes escribir un e-book. Los e-books se escriben en un formato llamado EPUB. Este es un formato estandarizado utilizado por todos los e-readers excepto Kindles, pero Amazon permite convertir fácilmente de EPUB al formato personalizado de Kindle. Los EPUBs son en realidad solo archivos zip que han cambiado su extensión. Al igual que los sitios web, los e-books necesitan ser responsivos ya que puedes tener diferentes tamaños de pantalla de e-reader. Como resultado, escribir un e-book 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.

3. Creando Archivos EPUB y Usando Dino

Short description:

En un e-book, cada archivo HTML es un capítulo, y EPUB utiliza una versión más estricta de HTML llamada XHTML. Puedes incluir CSS y usar las mismas etiquetas. Los EPUBs necesitan un archivo content.opf que actúa como un mapa del sitio, y existen generadores de EPUB para simplificar la escritura de ebooks. Utilicé Pandoc para convertir un archivo de rebajas en un archivo EPUB, y Dino para ejecutar JavaScript con características incorporadas y una gran biblioteca estándar. Crear un menú como este es un proceso de aprendizaje divertido y permite actualizaciones rápidas.

Pero en un e-book, 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 EPUBs 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 una carpeta zip, los capítulos del libro en orden, y marcadores a 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 cabeza y cuerpo. Los metadatos incluyen el título del libro y la imagen de portada. El manifiesto incluye todos los archivos del 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 páginas importantes como la tabla de contenidos.

Probablemente no quieras lidiar con mantener 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 ebooks. Utilicé Pandoc, un programa que puede convertir un archivo de rebajas en un archivo EPUB. La materia frontal, en la parte superior del archivo de rebajas, se utiliza para poblar los metadatos de EPUB. Cada encabezado de nivel superior en un archivo de rebajas también se convierte en un capítulo de EPUB. Así que esto facilita la inclusión de imágenes y descripciones de cada t-flare como capítulos de EPUB. Luego lo ejecuté todo con Dino, que es una herramienta realmente útil para ejecutar JavaScript en tu escritorio, como nodo, pero con muchas más características incorporadas. Tiene soporte incorporado para TypeScript y JSX, así que no necesité un paso de construcción. También incluyó el formateador de lente 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 npm. Cambié a usar Dino cuando escribía scripts de monast, porque es mucho más fácil construir rápidamente algo con él.

Con eso, tenemos todos los bloques de construcción que necesitas para crear un menú como este tú mismo. También puedes encontrar todo el código que escribí en GitHub. Puedes preguntar, ¿por qué pasar por todo este problema cuando podrías decir, usar un bolígrafo y papel? Bueno, es más divertido. Este es también un gran proceso de aprendizaje para mí para entender mejor cómo funcionan los e-readers, y cada vez que cambiamos nuestros tés, 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. www.microsoft.com www.microsoft.com www.microsoft.com

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

TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️
React Summit 2023React Summit 2023
24 min
Video Editing in the Browser
Video editing is a booming market with influencers being all the rage with Reels, TikTok, Youtube. Did you know that browsers now have all the APIs to do video editing in the browser? In this talk I'm going to give you a primer on how video encoding works and how to make it work within the browser. Spoiler, it's not trivial!

Workshops on related topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
JSNation 2023JSNation 2023
87 min
Build a Collaborative Notion-Like Product in 2H
WorkshopFree
You have been tasked with creating a collaborative text editing feature within your company’s product. Something along the lines of Notion or Google Docs.
CK 5 is a feature-rich framework and ecosystem of ready-to-use features targeting a wide range of use cases. It offers a cloud infrastructure to support the real-time collaboration system needs. During this workshop, you will learn how to set up and integrate CK 5. We will go over the very basics of embedding the editor on a page, through configuration, to enabling real-time collaboration features. Key learnings: How to embed, set up, and configure CK 5 to best fit a document editing system supporting real-time collaboration.
Table of contents:- Introduction to the CK 5 ecosystem.- Introduction to a “Notion-like” project template.- Embedding CK 5 on a page.- Basic CK 5 configuration.- Tuning up CK 5 for a specific use case.- Enabling real-time editing features.