Skip to content

Instantly share code, notes, and snippets.

@jesstelford
Last active September 10, 2024 14:26
Show Gist options
  • Save jesstelford/39a0c5e42eb002025bec6bb070f94433 to your computer and use it in GitHub Desktop.
Save jesstelford/39a0c5e42eb002025bec6bb070f94433 to your computer and use it in GitHub Desktop.
Read SHAPE UP by basecamp on a Kindle / reMarkable / eReader

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()
  1. Hit enter & wait for it to say "done." (can take a couple minutes depending on your connection speed)
  2. 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

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();
@willian
Copy link

willian commented Jul 17, 2019

Nice!
A note: this approach doesn't work on Safari.

@defragged
Copy link

In Safari on macOS, you can:

  1. Enable the Develop menu (Safari → Preferences → Advanced → Show Develop Menu in Menu Bar)
  2. Go to the Javascript console (Develop → Show Javascript Console)
  3. Paste the code into the Javascript console (without the javascript: prefix)

@yelworc
Copy link

yelworc commented Aug 13, 2019

Thanks! ♥

@volkyeth
Copy link

TYSM ✌

@tomasbarrios
Copy link

Send To Kindle Extension seems to fail for me for big uploads.

After using tour javascript code, I downloaded the whole page and turned into .mobi using calibre

Thanks!

@rjonesy
Copy link

rjonesy commented Jan 14, 2020

Could you consider including why we must type "javascript" but must paste the rest? And a note that it only works in Chrome, before the user starts the steps.

@bitboxer
Copy link

bitboxer commented Feb 7, 2020

One little addition: if you want to have an epub generated out of this, do the following steps in Firefox:

  • Save the page as "Webpage, complete"
  • Install calibre
  • Drop the html file into it
  • Click on "convert book"
  • Click "Okay"
  • Enjoy your epub.

@sashagoebbels
Copy link

Didn't work for me on Firefox (74.0) but on Chrome. Thank you!

@loginov1
Copy link

loginov1 commented Jul 3, 2020

Nice one. Thanks!

@foca
Copy link

foca commented Jul 6, 2020

Why not just open the PDF and read within the browser? Or download it and email it to your kindle address?

@aholub
Copy link

aholub commented Aug 28, 2020

Thanks! Note that the script requires Chrome on the mac. Doesn't work with either Safari or Firefox.

@theoBLT
Copy link

theoBLT commented Oct 7, 2020

Thank you so much for this @jesstelford. For some reason The Chrome extension threw errors, so I copy-pasted the whole page into https://pastepad.fivefilters.org/ instead, and send to my kindle via the kindle email 👍

@lsinger
Copy link

lsinger commented Oct 26, 2020

Heads up: this works amazingly well if you want to send it to your Remarkable tablet. Just let the JavaScript do its thing, then use the official Read on Remarkable extension to send it to your tablet. It'll appear as a proper ebook, not a PDF. 👌

@JoeDuncko
Copy link

Thanks!

@btrav
Copy link

btrav commented Mar 4, 2022

This is super helpful, especially for anyone wanting to read it on their Kindle - thanks for sharing this 🙌

@jesstelford
Copy link
Author

I've updated with instructions for sending Shape Up to different devices. Thanks @tomasbarrios @bitboxer @theoBLT @lsinger for your tips!

@shem8
Copy link

shem8 commented Jun 1, 2022

Gmail blocks zip files, I used this website to convert the zip to epub: https://www.aconvert.com/ebook/html-to-epub/

@bilogic
Copy link

bilogic commented Mar 4, 2023

I was hoping there is a epub or mobi that can just copy to my e-reader and found a converter here https://github.com/j6s/shape-up-downloader

@xlab
Copy link

xlab commented Aug 9, 2024

Kindle converter stopped working

A document, sent at 05:12 PM on Fri, Aug 09, 2024 GMT, could not be delivered.

This is because the number of documents(before compression if zipped) in the email you sent exceeded the permissible limit of 25 documents.

Helpful tips for attachments:
The file size of each attached document should be less than 50MB (before compression in a ZIP file).
Each email should not contain more than 25 personal documents (before compression if zipped).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment