Over a million developers have joined DZone.

Livecoding: How Newbie Mistakes Kill the Flow [Video]

DZone's Guide to

Livecoding: How Newbie Mistakes Kill the Flow [Video]

A web developer shares his frustrations as he grapples with learning a new library, GatsbyJS, to make a progressive web application.

· Web Dev Zone ·
Free Resource

A true open source, API-first CMS — giving you the power to think outside the webpage. Try it for free.

We continued to work on GatsbyJS. That one feature I want to add: make links in markdown tables of contents absolute.

Instead of #some-title the link should be /page-slug#some-title. That way users can put tables of contents on their index pages and link into documents directly.

The first difficulty was using VSCode. I wanted to give it a fairer shot at impressing me after all the configuration advice people gave me on Friday.

I'll talk more about VSCode after I use it some more.

The other difficulty was that I have no idea what I'm doing. At first, I was editing the wrong file. My code kept vanishing every time compilation did its thing.

Turns out there's a big difference between gatsby-transform-remark/extend-node-type.js and gatsby-transform-remark/src/extend-node-type.js.

Confusing for a newbie that those two files are so close together, but it makes sense. Gatsby uses something called Lerna to create a multi-repo. Every folder inside the repository is its own package.

When I figured that out, I had the bright idea to update my local clone to the latest master.

It did not go so well.

It went so not well, in fact, that we never got to the real work. I don't know how many times I installed and reinstalled node_modules, but nothing worked.

This ate all the time I had, and we got nothing done.

I mean, sure, we explored how the markdown AST stuff works, where we need to add the slug (it's deep inside children of children), and made a reasonable hypothesis that we can get the slug using markdownNode.fields.slug.

The hypothesis stems from this: we know that each Gatsby node has a fields.slug. Don't know where it comes from, but docs assure us it's there. Not sure markdownNode is that node, but what else could it be?

markdownNode is the node that we are extending, therefore it must be the same thing as a normal Gatsby node. It's just called markdownNode here because we're operating on markdown.

This is the function we're tweaking by the way: 

 async function getTableOfContents(markdownNode) {
      const cachedToc = await cache.get(tableOfContentsCacheKey(markdownNode))
      if (cachedToc) {
        return cachedToc
      } else {
        const ast = await getAST(markdownNode)
        const tocAst = mdastToToc(ast)
        let toc
        if (tocAst.map) {
          toc = hastToHTML(toHAST(tocAst.map))
        } else {
          toc = ``
        cache.set(tableOfContentsCacheKey(markdownNode), toc)
        return toc

That tocAst is where we inject our tweak. I think...

Oh right! The newbie mistake fix - Matthew of Gatsby fame informed me that my yarn.lock was probably out of date. It was.

The New Standard for a Hybrid CMS: GraphQL Support, Scripting as a Service, SPA Support. Watch on-demand now.

web dev ,web application development ,javascript

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}