HACKING AN E-READER WITH REACT FOR TEA Tiger Oakes 

▪ Building Microsoft Loop. ▪ Worked on Edge, Chrome, and Firefox. ABOUT ME tigeroakes.com @[email protected] @[email protected] @not_woods TIGER OAKES 

I LIKE TEA 

Too many teas! PROBLEM 

No content

MENU IMAGE Rendering a custom image to display on the e-reader screen 1 

BACKGROUND 

MANYWORLDSTAVERN.COM/PRODUCTS/HAZY-HILLS 

FOREGROUND 

.SVG FILE Hazy Hills Black tea, moderate caffeine 9 g/12 oz, steep 4 mins, 93°C 

interface FormattedTeaDatabasePage { /** Name of the tea. */ name: string; /** Caffeine level. */ caffeine: string; /** Temperature to steep the tea at. */ temperature: string; /** How long to steep the tea for. */ steepTime: string; /** How many tea leaves to use per amount of water. */ serving: string; /** Type of tea, such as "Black tea" or "Herbal tea". */ type: string; /** Where in the house the tea is located at. */ location: readonly string[]; } 

RENDERING NAME CAFFEINE TEMP STEEP TIME SERVING SIZE TYPE Hazy Hills ★★☆ 93°C 4 mins 9 g / 12 oz Black tea function TeaInfo({ tea, position }) { return ( {tea.name} {tea.type}, {CAFFEINE_LEVELS[tea.caffeine]} {tea.serving}, steep {tea.steepTime}, {tea.temperature} ); } 

TRANSFORM: TRANSLATE function TeaDisplayGroup({ teaList, position }) { const positions = [ "30 85", "30 180", "30 275", "322 85", "322 180", "322 275", ]; return ( {teaList.map((tea, index) => ( ))} ); } 

TRANSFORM: TRANSLATE function TeaDisplayGroup({ teaList, position }) { const positions = [ "30 85", "30 180", "30 275", "322 85", "322 180", "322 275", ]; return ( {teaList.map((tea, index) => ( ))} ); } 

TRANSFORM: TRANSLATE function TeaMenu({ teaLists }) { const positions = [ "8 8", "8 360", ]; return ( {teaLists.map((teaList, index) => ( ))} ); } 

OTHER DESIGNS DIFFERENT CONTENT Use a different number of groups and reposition them. DIFFERENT FONTS Swap font-family with CSS. DIFFERENT BACKGROUND Change out the background shown under the text. 

LOADING IMAGE ONTO E-READER Set as custom screensaver image NOOK & IPAD Use the image as a book cover KINDLE & KOBO 

E-BOOK MENU Creating ePub files to load onto the eReader 2 

EPUB FORMAT BOOK.EPUB RENAMED ZIP FILE Simply renaming book.zip to book.epub creates an e-Book. Standard format used by almost all e-Readers. 

Directory with XML sitemap pointing to HTML files, CSS, and images ZIP folder with XML table of contents pointing to XHTML files, CSS, and images E-BOOKS ARE LIKE WEBSITES WEBSITE E-BOOK ▪ sitemap.xml ▪ index.html ▪ image.png ▪ css/ ▪ style.css ▪ myfont.ttf ▪ content.opf ▪ chapter1.xhtml ▪ image.png ▪ css/ ▪ style.css ▪ myfont.ttf 

XHTML VS HTML vs

---

vs

---

Heading

Paragraph

IDENTICAL ELEMENTS IDENTICAL CSS ONLY LOWERCASE TAGS STRICT CLOSING TAGS S C E O 

CONTENT.OPF METADATA Book title, author, cover 1 SPINE The chapters, in order 3 MANIFEST List of every file in the ZIP folder GUIDE Important pages 2 4 

CONTENT.OPF uuid Tea Book Tiger Oakes 

CONTENT.OPF uuid Tea Book Tiger Oakes 

SCRIPTING Write these files with automated tooling 3 

PANDOC Statically generate an ePub file using markdown as input. pandoc.org 

MARKDOWN TEMPLATE Each top-level heading is turned into a chapter in the eBook. --- title: Tea Book creator: Tiger Oakes cover-image: image.png css: css/style.css ... # Chapter 1 Hello world … # Chapter 2 

DENO Write JavaScript to run on your desktop (like Node) but with much more built-in functionality 

github.com/NotWoods/tea-book SOLUTION More fun than pen and paper! 

CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, infographics & images by Freepik. THANK YOU! github.com/NotWoods/tea-book tigeroakes.com @[email protected] @not_woods