Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript.
Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser

How I wrote and published my 5th technical book

Blog/JavaScript · · how-to book 50tipsonjs
How I wrote and published my 5th technical book "50 Tips on JavaScript" book

I like to write. It's not happening often, but I do. A couple of weeks ago, I finally finished my 5th book, "50 Tips on JavaScript". I decided to use Amazon as a distributing mechanism. In this article, I'm sharing my journey. From the idea, through the writing and the publishing.

The idea

The idea for the book came from a challenge that I started in May this year.

I finished the challenge successfully but decided to move on and continue posting tips on social networks. Soon after that, I reached number 50. A couple of people asked me if I planned to collect all the snippets in one place. I first thought to create a small website but then changed my mind and figured I'd put them in a book. And because I also like to draw, I set an ambitious plan to create an illustration for each chapter. So, 50 stories with 50 illustrations. The code snippets existed. I just had to explain them. And to be honest, I was in a similar situation when I was doing "React in patterns" book and "10 Lessons in Front-end". I did have a significant part of the content upfront. This helped me with the planning. So, I created a new repository on GitHub and started doing it.

The programmer approach

The first thing that I did was to copy all the snippets in a new repo and categorize them. I used a simple JSON file called content.json:

{
  "sections": [
    { "key": "basics", "name": "Basics" },
    { "key": "api", "name": "Browser APIs" },
    { "key": "implementations", "name": "Implementations" },
    { "key": "concepts", "name": "Popular concepts" },
    { "key": "patterns", "name": "Design patterns" }
  ],
  "chapters": [
    {
      "path": "code/39 - == vs ===",
      "section": "basics",
      "title": "Strict equality",
      "proofread": true
    },
    {
      "path": "code/14 - comma operator",
      "section": "basics",
      "title": "Comma operator",
      "proofread": true
    },
    {
      "path": "code/15 - spread operator",
      "section": "basics",
      "title": "Spread operator",
      "proofread": true
    },
    ...
  ]
}

This file was quite important. First, it gave me the big picture of the project. It structured my work. Second, I used it to track my progress and produce epub and pdf files. Later I published those to Amazon.

Tracking my progress

If you ever start writing a book, please do track your progress. Some people will say that looking at the counter and seeing how much you have to do is stressful. For me, it was quite the opposite. I was even more inspired to finish the book.

I put a script that reads the JSON file and shows in percents where I am.

...
const book = require('./book');
const chapters = book.getChapters();
const total = chapters.length;
const withContent = chapters.filter(isChapterReady).length;
const noContent = total - withContent;

book.getSections().map(section => {
  console.log(section.name);
  const chaptersInSection = book.getChapters().filter(chapter => chapter.section === section.key)
  chaptersInSection.forEach(chapter => {
    chapterNum += 1;
    const isReady = isChapterReady(chapter);
    console.log(
      isReady ?
        chalk.green(`  ✔ ${chapter.path}`) :
        chalk.grey(`  ✖ ${chapter.path}`)
    );
  })
});

console.log(chalk.green(`Progress: ${(withContent/total*100).toFixed(1)}%
All content: ${withContent}
No content: ${noContent}
`));

Here's the beautiful log that I got at the end:

Progress: 100.0%
All content: 50
No content: 0

isChapterReady function changed over time. First, it was checking if there is a file called content.md holding the chapter's text. Once all the content was in place, I added a check for art.jpg file which was the illustration.

50 tips of js file structures

And one happy day, I was ready with all the stuff. The next step was to produce the epub and pdf files.

Writing process

I put a deadline and tried keeping it. Roughly I had to write two chapters per week. It was doable because some of the snippets are simple. There is not much to explain. When I finished the chapter, I read it, but I didn't focus on editing. My first goal was to sketch all the 50 chapters.

The editing process consisted of carefully re-reading the content and changing the phrasing where it sounded odd. That was my second pass. The third and final check I did with Grammarly. For sure, if I had a budget, I would use a real editor, but I figured that the premium account of that service is good enough for my technical writing.

The illustrations I did in photoshop with my Wacom tablet. It was a lot of fun.

Generating the files

The main tool for the job was Pandoc. Honestly, I did not find a better instrument for converting files. The task was to bundle all of my markdown and generate two files. One for the book's ebook version (epub) and another for print (pdf). In addition to Pandoc, I had to install MacTeX. I had some issues with the fonts and formatting, and MacTeX solved everything. I also had to learn a bit LaTeX since Pandoc is using it. After a couple of days of fine-tuning, I nailed the desired result.

To produce the epub, I used:

pandoc --listings -o <pages> --css=./epub.css

Where <pages> is all my markdown files separated by a space. The content of epub.css could be found here.

To generate the PDF I used:

pandoc --listings --pdf-engine=/Library/TeX/texbin/pdflatex -H ./settings.sty -V papersize:a5 -o $./book.pdf <pages>

The content of settings.sty is visible here. After the installation of MacTeX pdflatex was available at /Library/TeX/texbin/pdflatex. The command ends with a list of all the markdown files separated by a space.

The website

I decided that I'd create a website for the book. The pages in Amazon are not bad, but I wanted to personalize the work. I bought 50tips.dev, and I did a simple vanilla HTML/CSS/JS page. I'm working with React all day long, so writing raw code was quite enjoyable. I did a couple of new illustrations, put some chapter previews, and it was done. Together with the book, the site sells the illustrations as a standalone bundle. The guys from Gumroad offered an easy to use iframe which I simply added.

Publishing

I used GitBook for my fourth book "React in patterns" and it worked well, but there was one big problem. Lots of people wanted the book on paper. So, this time I decided to find a decent print-on-demand service.

Of course, there are many options, but my choice at the end was Amazon's Kindle Direct Publishing (KDP). I picked this variant because Amazon's network is big, and they have some instruments for promoting. Also, the process of uploading a book there is a no-brainer. Everything happens through their UI in the browser. They even have a previewer that I installed locally. It saved me a lot of time while I was formatting the content.

The royalties model of KDP is not bad too. For sure, if I set up a Gumroad account (which I did for the illustrations) I would make a bigger profit, but the visibility of the book for me was more important. I don't have a massive audience that awaits my writings. Platforms with a smaller user base will provide lower to no exposure, and Amazon seems like a good starting point. Here are a few articles that I bookmarked while I was wondering what to do:

(I would also suggest exploring the selfpublish subreddit.)

Of course, nothing stops me from publishing the book in different places. I'll probably do that too. I decided to participate in the Kindle Select program. It is potentially going to bring more readers. After that, I'm free to distribute the book on other channels.

Launching

The data of the big announcement was the 9th of December. I posted on Twitter, Facebook, and LinkedIn, sent an email to my newsletter subscribers, and created a page in page in ProductHunt.

This news generated good traffic to the site for a couple of days. I also started getting my first sales.

Marketing is not among my best skills, so maybe I could've done it better. But I'm just starting. I figured that promoting a book is a marathon, not a sprint. It's something that takes time. You can actually help me in that direction. Just share this article or the website.

Final words

If you had an idea for a book, I'd suggest giving it a go. It's not that difficult. It is undoubtedly a lot of work, but when it's finally done and you hold the paperback in your hands, it is an incomparable feeling.

I tried covering all the major points of my journey, but maybe I missed something. I'll be more than happy to answer your questions if any. Ping me.

Sales pitch

Sorry, I tricked you into reading this article, and now you stumbled on a sales pitch. I can't write a blog post about the book without trying to sell it 😎.

So, go and buy the book from 50tips.dev because it's incredible.

On the site, you can see what's inside and even preview some of the chapters. You will learn about destructing, iterables, generators, helpful browser APIs. "50 Tips on JavaScript" covers concepts like higher-order functions, memoization, currying, and state machines. You will find the fundamentals of Flux and Redux and see how patterns like singleton and publisher/subscriber work.

keywords: how-to book 50tipsonjs
If you enjoy this post, share it on Twitter, Facebook or LinkedIn.