Skip Navigation
home

TIL #1: Figma Boolean Operations, Knitting Duplicate Stitch, & Next.js Absolute Imports

Published Friday, August 4, 2023 ā€” 5 minute read

šŸ’” This post is part of my Today I Learned (TIL) series. Each section below describes a thing I learned today and the resources I used to learn it.

Figma Boolean Operations

  • Why I learned this: I'm currently working on migrating my website to use the Next.js App Router. In this process, I'm cleaning up old code and dependencies that I don't really need. One of those dependencies is FontAwesome. I only used a few of the icons, and I wanted to give creating my own icons a try. I started with basic arrows.
  • How I used this: I made my arrow Icons out of 3 rectangles, each with the same border-radius on every corner. After I placed them in an arrow shape, I selected each rectangle, clicked the boolean operation menu in the top center toolbar, and selected the "Union selection" option. It was a lot easier to do than I thought it would be! Then I coped the new union as SVG, and pasted it into an .svg file in my code. Tada! Icon created.
  • Resource I referenced: Boolean operations - Figma Help Center

Knitting Duplicate Stitch

  • Why I learned this: My friend is having a baby soon, and I'm making a few knit items to gift at the baby shower. She loves all things spooky and fall so I chose the pieces based on that. One of the pieces uses the stranded colorwork technique for its pattern, and the other uses the duplicate stitch. I'd never done duplicate stitch before, but I didn't let that stop me! I'm an experienced knitter so I was ready for the challenge.
  • How I used this: The piece that I needed the duplicate stitch for is a small black hat with a pumpkin. The pumpkin and its stem are the contrasting colors, so that's where the duplicate stitch was required. IT TURNED OUT SO CUTE. I'll post it under the projects section of my site after it's been gifted.
  • Resources I referenced:

Next.js Absolute Imports

  • Why I learned this: As I mentioned above, I'm migrating my website to use the Next.js App Router. Since I have cleanup tasks that affect most of the codebase, I decided to create a new project from scratch. I took the opportunity to remind myself how to configure absolute imports.
  • How I used this: When I added the arrow icon to my fresh project, I wanted to add it to the main components folder. It was my first main component, so I had to create the folder. When it came time to import the icon the import statement wasn't very pretty! I knew changes needed to be made in my tsconfig.json file, but I couldn't remember it exactly. I did a quick Google and it turns out all I needed to do was set the compilerOptions.baseUrl option to ".". Easy peasy!
  • Resource I referenced: Configuring Absolute Imports and Module Path Aliases - Next.js
Back to Top