How Does the raywenderlich.com Tech Stack Work for Books?
Want a sneak peek at part of the tech stack behind raywenderlich.com? Come learn how our online book reader works — it’s more complicated than you think! By Chris Belanger.
Extra UX Features
Q. The highlighting and notetaking in the online reader is pretty neat. What library or framework do you use to make that happen?
We weren’t able to find a nice drop-in highlighting framework that worked well enough to support the user experience we wanted, so we had to custom-build the highlighting and notebook features.
We use vue.js as our framework of choice across the site, so naturally highlighting is comprised of a few components under that framework. We also lean on a couple of small utility methods to help serialize the selected text, and to balance injected HTML tags, but the rest uses APIs that are available across all modern browsers.
Where to Go From Here?
If you’re interested to see how our online reader works, you can check out all of our books right now, including these best-sellers:
This takes you straight into the book, where you can start reading right away. Some chapters are available in full, for free, so you can check them out in detail even if you don’t own the book.
Other non-free chapters will have some of their text obfuscated, but you can page through the book to check out the headings, code, and diagrams inside the book.
Want to browse all of the books available on our site? You can check them out here:
We hope you’ve enjoyed this little diversion to take a look behind the scenes at how some of our web infrastructure works. Comments? Questions? Leave them below and we’d be happy to answer any more questions you had about how our online reading experience works. Cheers!