HACKING AN E-READER TO SHOW MY TEA MENU Tiger Oakes 

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

I LIKE TEA 

Too many teas! PROBLEM 

CALL TODAY! 1-800-CODE-ME GITHUB.COM/NOTWOODS/TEA-BOOK 4 EASY PAYMENTS OF HARD WORK YOU DON’T PAY BECAUSE YOU BUILD IT YOURSELF! THIS HAS NEVER BEEN ON 

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

BACKGROUND 

MANYWORLDSTAVERN.COM/PRODUCTS/HAZY-HILLS 

BACKGROUND DESIGN 2010 

FOREGROUND 

.SVG FILE 

TRANSFORM: TRANSLATE Daphne’s Cyotea Blend… Cookie… Imperial Jasmine… 913 King’s Oolong… Lapsang Souchong… Hazy Hills… 

TRANSFORM: TRANSLATE Daphne’s Cyotea Blend… Cookie… Imperial Jasmine… 913 King’s Oolong… Lapsang Souchong… Hazy Hills… 

TRANSFORM: TRANSLATE Daphne’s Cyotea Blend… Cookie… Imperial Jasmine… 913 King’s Oolong… Lapsang Souchong… Hazy Hills… 

TRANSFORM: TRANSLATE Daphne’s Cyotea Blend… … … … … … Herbal Supplement… … … … … … 

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 

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[]; } 

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! 

DAPHNE LIU @[email protected] Ex-Lyft Frontend Developer with accessibility & design systems experience THANKS TO 

CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, infographics & images by Freepik. SHAMELESS PLUG www.jetcityimprov.org Check out Joy Market in West of Lenin @ Fremont this Thursday, Friday, or Saturday! Check out DnDprov in University Heights @ UW on June 3rd 

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