This is a Livecoding Recap – an almost-weekly post about interesting things discovered while livecoding. Usually shorter than 500 words. Often with pictures. Livecoding happens almost every Sunday at 2pm PDT on multiple channels. You should follow My Youtube channel to catch me live.
Ah, it's good to be back. It's been what, a month? Long time no see as the first person to say hi in the chatroom said.
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.
Also, this killer feature looks cool and I want it.
plus then you can slowly learn to become hopelessly dependent on this feature: pic.twitter.com/U0kUwijD6j
— Jason Miller 🦊⚛ (@_developit) November 3, 2017
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 multirepo. 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 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.
Continue reading about Livecoding Recap 50: How newbie mistakes kill the flow
Semantically similar articles hand-picked by GPT-4
- Livecoding Recap 48- Why contributing to big opensource projects is still hard
- Livecoding 51: I did it! My first PR to a big OSS project \o/
- Using YouTube as a data source in Gatsbyjs
- Upgrading to Gatsby v2 with the help of the hivemind 👌
- Livecoding #27: New React Indie Bundle page almost done
Learned something new?
Read more Software Engineering Lessons from Production
I write articles with real insight into the career and skills of a modern software engineer. "Raw and honest from the heart!" as one reader described them. Fueled by lessons learned over 20 years of building production code for side-projects, small businesses, and hyper growth startups. Both successful and not.
Subscribe below 👇
Software Engineering Lessons from Production
Join Swizec's Newsletter and get insightful emails 💌 on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.
"Man, love your simple writing! Yours is the only newsletter I open and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. 👌"
Have a burning question that you think I can answer? Hit me up on twitter and I'll do my best.
Who am I and who do I help? I'm Swizec Teller and I turn coders into engineers with "Raw and honest from the heart!" writing. No bullshit. Real insights into the career and skills of a modern software engineer.
Want to become a true senior engineer? Take ownership, have autonomy, and be a force multiplier on your team. The Senior Engineer Mindset ebook can help 👉 swizec.com/senior-mindset. These are the shifts in mindset that unlocked my career.
Curious about Serverless and the modern backend? Check out Serverless Handbook, for frontend engineers 👉 ServerlessHandbook.dev
Want to Stop copy pasting D3 examples and create data visualizations of your own? Learn how to build scalable dataviz React components your whole team can understand with React for Data Visualization
Want to get my best emails on JavaScript, React, Serverless, Fullstack Web, or Indie Hacking? Check out swizec.com/collections
Did someone amazing share this letter with you? Wonderful! You can sign up for my weekly letters for software engineers on their path to greatness, here: swizec.com/blog
Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com
By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️