Read SHAPE UP by basecamp on a Kindle / reMarkable / eReader

01-shape-up-to-kindle.md

Read Shape Up by basecamp on a kindle / reMarkable / eReader

Basecamp's new book Shape Up is now available online (https://basecamp.com/shapeup) to read page-by-page.

There is a .pdf version, but that's not the best format for Kindle / other eReaders. Instead, we can convert the page-by-page into an eReader friendly format.

Part 1: Convert to a single page

NOTE: This has only been tested on Chrome

1. Go to the first chapter: https://basecamp.com/shapeup/0.1-foreword
2. In the URL bar, type javascript:
3. Paste in this single line of JavaScript* (so the URL bar looks like javascript:document.title='Shape Up';...)

document.title='Shape Up';var style=document.createElement('style');document.head.appendChild(style);style.sheet.insertRule('main {grid-template-areas: "header" "sidebar" "content" "footer" !important; grid-template-columns: auto !important;}');document.querySelector('main').setAttribute('data-new',!0);function loadNext(){const nextPageLink=document.querySelector('main[data-new] .intro__next a');const nextPage=nextPageLink&&nextPageLink.href;['main[data-new] .intro__book-title.button','main[data-new] .pagination','main[data-new] footer','main[data-new] .warning','main[data-new] template','main[data-new] nav','a.pop','main[data-new] .intro__sections','main[data-new] .intro__next'].forEach(selector=>{const els=document.querySelectorAll(selector);els.forEach(el=>el.parentElement.removeChild(el))});document.querySelector('main[data-new]').removeAttribute('data-new');if(nextPageLink){console.log('loading '+nextPage);fetch(nextPage.replace(/\/$/,'')).then(res=>res.text()).then(res=>document.body.insertAdjacentHTML('beforeend',res.replace(/^[\s\S]+<main/m,'<main data-new').replace(/<\/main>[\s\S]+/m,'</main>'))).then(loadNext)}else{alert('done.')}};loadNext()

4. Hit enter & wait for it to say "done." (can take a couple minutes depending on your connection speed)
5. You now have the entire contents of the book ready to read.

Part 2: Send to device

Depending on your device, there are different steps to take:

Kindle

^{(click to expand)}

Involves sending a copy of the website to your kindle via email. (NOTE: Unfortunately the official "Send To Kindle" browser extension cannot be used due to unknown failures with this book).

1. In the browser, click File > Save As
2. Create a new folder called "shape up"
3. Select "Web Page, Complete" from the drop-down
4. Click "Save"
5. Open the folder "shape up" created in step 2
   • It should contain Shape Up.html and Shape Up_files
6. Select both items and create a .zip file from them:
   • Windows: Right Click -> "Send To" -> "Compressed (Zipped) Folder"
   • MacOS: Right Click -> "Compress"
   • Ubuntu: Right Click -> "Compress..."
7. Visit the Personal Document Settings page (Scroll to "Personal Document Settings" and click to expand if not already open)
8. Under the second table "Approved Personal Document E-mail List", ensure your email address is listed.
   • If not, add it by clicking "Add a new approved e-mail address" below the table
9. Under the first table "Send-to-Kindle E-Mail Settings", copy the email address listed next to your Kindle device (usually ends with @kindle)
10. Using your email client, compose a new email
    • To: <email address you just copied>
    • Subject: convert
    • Body: <blank>
    • Attachment: Attach the .zip file created in step 6
11. Send your email
12. Wait for it to appear on your Kindle

NOTE: Once sent, Amazon can take up to an hour to process the book. If, for some reason it fails, you can try the "Other eReader" steps below, but convert to .mobi format instead of .epub.

reMarkable

^{(click to expand)}

1. Install the offical Read on reMarkable Chrome Extension.
   • Be sure to follow the setup guide for connecting your reMarkable device
   • You can skip the "Different reading options" & "Read on reMarkable PDF settings" sections
2. Go back to your Shape Up book page (where you ran the javascript: command)
3. Click the "rM" (Read On reMarkable) extension next to your URL bar to send to your reMarkable device
4. Wait for the book to appear on your reMarkable device

Other eReader

^{(click to expand)}

Uses the Calibre eBook Manager to convert the web page into a .epub file for your device.

1. In the browser, click File > Save As
2. Create a new folder called "shape up"
3. Select "Web Page, Complete" from the drop-down
4. Click "Save"
5. Download & run Calibre eBook Manager
6. Click "Add Books"
7. Open the folder "shape up" created in step 2
8. Select Shape Up.html
9. Click "Open"
10. Click "Convert Books"
11. Change "Output Format" to EPUB
12. Click "OK"
13. In the bottom-right, wait for it to say "Jobs: 0"
14. Click "Save to disc"
15. Open the folder "shape up" created in step 2
16. Click "Open"

There is now a `Shape Up - Unknown.epub file in the "shape up" folder. Transfer this to your eReader and enjoy!

---

* ^{The unminified source is below}

02-shape-up-single-page.js

document.title='Shape Up';
var style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('main {grid-template-areas: "header" "sidebar" "content" "footer" !important; grid-template-columns: auto !important;}');
document.querySelector('main').setAttribute('data-new', true);

function loadNext() {
    const nextPageLink = document.querySelector('main[data-new] .intro__next a');
    const nextPage = nextPageLink && nextPageLink.href;
    ['main[data-new] .intro__book-title.button', 'main[data-new] .pagination', 'main[data-new] footer', 'main[data-new] .warning', 'main[data-new] template', 'main[data-new] nav', 'a.pop', 'main[data-new] .intro__sections', 'main[data-new] .intro__next'].forEach(selector => { const els = document.querySelectorAll(selector); els.forEach(el => el.parentElement.removeChild(el))});
    document.querySelector('main[data-new]').removeAttribute('data-new');

    if (nextPageLink) {
      console.log('loading ' + nextPage);
      fetch(nextPage.replace(/\/$/, '')).then(res => res.text()).then(res => document.body.insertAdjacentHTML('beforeend', res.replace(/^[\s\S]+<main/m, '<main data-new').replace(/<\/main>[\s\S]+/m, '</main>'))).then(loadNext);
    } else {
      alert('done.');
    }
}
loadNext();