All Blog Posts
How to Add Typescript to an Existing Next.Js Project
To migrate your project from JavaScript to Typescript, follow the steps below: Install Typescript In your project terminal run: npm i -D typescript @types/react Create a tsconfig.json file Create a tsconfig.json tile in the root of your project. If you already had a jsconfig.json file, copy the paths compiler option from the old jsconfig.json file into the new tsconfig.json file and delete the old jsconfig.json file. Add Typescript to your project Finally, add typescript to your proje
Build Log: Cutting Down My Blog Post Publishing Process
Friendcatchers are a good idea so let's make it easy to publish mine on the internet. How? By setting up a blogging system that makes it easy for me to hit publish. I have been self-hosting a ghost instance on Railway for a few months now and it's quite cheap at about $3 a month. So I'm thinking I'll just hook it up to a Next.js frontend and call it a day. The deadline for v1 of this project is 5 days from now. Let's see how well or badly I do. 20/02/2024 eod update I've been able to set up
Asynchronous JavaScript Headaches
Whenever I'm building something and I come across a scenario where I need to get something from my database I typically use the async await pattern but I've never really understood it. I typically use the async await thing and log my response, then I see some promise thing logged onto my response, then I introduce a try catch block. Sometimes that solves my problems, but today that didn't solve my problem. Typically I wrangle a mix of async functions to get it to work somehow but lord knows tha
Next.js Cache Gotcha
This one is a sneaky one, and caching is becoming synonymous with annoying. But that aside, here's the scenario. I'm working on the gift giving application. The use case is someone purchases a gift and that action triggers: * the generation of a voucher code. * the creation of a transaction object that stores the transaction information in the databases and associates the generated gift code with the transaction before sending the user an email with their gift code. Locally it works just fi
Where to Even Start with Logging in My Next.Js Stack
Yeah, so I think now that I run user facing applications, I should put more thought into the logging for my apps. I want to find a solution that allows me to see the various things that happen in my apps and to also catch errors as they happen and not much later or not at all This series of articles by better stack seem like a good place to start Logging | Better Stack CommunityLearn everything you want to know about logging. Go from basics to best practices in no time.Better Stack
How to Create Unique Voucher Codes That Don't Collide
My first problem was how to generate the coupon codes. Initially, I wanted a way to put that functionality in the database. But because I want this working superfast and I don't have the luxury of figuring out all the quirks of getting it to work in the database, I opted for a server function. To generate the codes I'll be using the voucher-code-generator-js library from Voucherify. It's a cool little npm package and it works. I found it on the "How to generate unique coupon codes?" blog post.
How to Use the Supabase Service Role Secret Key in Next.js Routes
On my website, giftthemanexperience.com, I want users to be able to make purchases without them having a user account. The problem I ran into is that without user accounts, the server needs to be the one writing to the transactions table for the users on Supabase in order to bypass the Row Level Security. My issue was similar to this GitHub issue: Using service role secret key with supabase-js on the server #1284 Because I am using Next.js Route Handlers for my server-side functions, I needed
Building an Internal Dashboard for 47 Places
We're growing over at 47 places. When I launched the site back in February 2023 All the data was stored in a json file. To add a place I needed to jump into the file on vscode and edit it. The push the changes up to GitHub to trigger a redeploy of the site. It wasn't elegant but it worked. Since then the dashboard has evolved and this article covers what it took to get to the current V0.1 of the dashboard that we're using now. When Ly joined me, I taught her how to add places into the json fil
Updating My Site to Use Nextjs
We're running Next.js on this blog now! Yey! But why? Lol, I just want an easy time, I'm building 47places using Next.js and so having both on them using Next.js means if I figure out how to do something on one site, the knowlegde is mappable 1:1 to the other site. That aside, here's how I did it: 1. Followed the official Next.js tutorial which walks you through building a blog. 2. Followed this CSS tricks blogpost to add styled code blocks 3. Deployed on Netlify as per usual 4. Once the
Using fzf to Find, Preview, Then Open Files on the cli
fzf --preview "less {}" | xargs code The above line does the following: 1. launches fzf in the current directory with a preview on the right that uses the less editor 2. Once you select a file it outputs the path of the file 3. We pipe this output and use it as an argument to the code command which then opens the file in vscode I'm not quite sure how I'll place this within the cli tool. My main questions are: 1. FZF is installed using a sudo apt-get command. How do I ensure that everyone
Collections in Gatsby
This stackoverflow question pretty much describes my current problem. I'm creating two types of posts on my blog. 1. blogposts 2. til notes The blocker is that {mdx.slug}.js template creates pages for all mdx files in the same way but I need to define different templates for differnt types of posts which are all .mdx files. So that I can have a {blogPost.slug}.js file that houses my blogpost template and {til.slug}.js that houses my til template. I think this blogpost offers a promising s
GitHub Field Day Nairobi 2022
The tagline for the event was: "An unconference for leaders of technical student communities". I applied because I thought it would be a really cool oportunity to meet other community leaders and get to hear their stories. A while ago, I would describe my efforts as trying to become a community leader or trying to understand the value of communities. But, a good friend of mine challenged my use of the word "trying". What she said went something like, "there's no trying, just doing or not doing.
Building Something with PHP, MYSQL, and JavaScript
Day 0 - 10/04/2022 The challenge here is simple. Build out a Junior Developer test project in 20ish days. The caveats: * Use PHP. Having never used PHP to build anything before, I'll be figuring out a language and using it to build something in 20ish days. No pressure. The Upperhands: * I can figure out anything you throw at me. All I need is the internet and a little time. * I have the internet and the book "Learning PHP, MySQL, & JavaScript WITH JQUERY, CSS & HTML5" by OREILLY. The br
Giving up on CSS
CSS is a nightmare. One that I summoned willingly. In February 2021, I decided to teach myself Frontend development. This is a narrative of how that is going. I settled on two learning resources: Freecodecamp and Frontend Masters (Github Student Developer Pack) and started out on my journey. The plan was: 1. Learn CSS 2. Learn some JavaScript 3. Learn React to build out little projects It was great. Up until I started trying out challenges on frontend mentor. My confidence immediately too
Codewars | Directions Reduction | JavaScript Solution
This kata got you struggling too huh? Don't stress I got you. For good measure, if you're just passing by and have no idea what this is, you can find the kata instructions on Codewars. My solution. I broke it down into these steps: 1. loop through the values of the array 2. identify invalid directions {North next to South} and {East next to west West} 3. remove invalid directions from the array 4. if there still exists invalid directions after completing the loop restart the loop. Else
Event Bubbling in JavaScript: Filtering for the Element That Triggered an Event
The task I am attempting Hello! Today I'm tackling the JavaScript logic for the Frontend Masters JavaScript, HTML, and CSS Calculator Project. Thinking through it The instructor introduced us to Event Bubbling and how it might be useful for such a scenario. How I understand event bubbling is: For a scenario like mine where I'm listening for clicks. The browser checks the element that was clicked for a click event handler executes it then moves up to the immediate ancestor(the parent of the