Forem: kelsey-d

It's Nightmare on ElmStreet and Guess who's playing Freddie

kelsey-d — Sun, 09 Nov 2025 17:59:42 +0000

This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing

What I Built

Earlier this year I went through the harrowing experience of purchasing a home for the first time. I'd browse Zillow for hours at a time any time searching for homes that would fit my criteria. I still find myself opening up the site out of habit, even after the fact.

That chokehold inspired me to make a real estate landing page. I think the housing market is scary enough but to really sell the Halloween theme it's specifically for haunted estates.

Demo

⚡ ElmStreet Live Demo ⚡

Journey

My process began in FigJam where I quickly doodled the UI. Since there was a deadline and I tried to go for some of the first ideas I came up with.

Then I moved into a Figma Design file to create the high fidelity mock-up in both desktop and mobile screens.

Next I dropped the design into Figma Make to generate some code. I find that Make is not to good with overlapping elements but it was a huge help in discovering improvements in positioning.

Lastly I moved the coding to Nextjs. I ended up using only the dot navigation directly from the Make code which was a bummer because my intention was to to have the components 99% of the way done with Make. Next time I'll spend more time in Figma to create a component library.

Additional use of AI was generating the house images with Google Gemini and debugging/polishing with Copilot. Two of the images were houses from a YouTube video entitled Mansions No One Wants to Buy at any Price.

What I learned

I had no clue prior to working on this that there was an HTML <dialog> tag. Using semantic HTML solves a good number of accessibility issues so I always strive to use proper tags but for dialogs I'd been writing additional code to manage focus. The dialog tag handles that out of the box, saving lines of code.

What's next?

A quick improvement would be enhancing the quality of the images, and the auto navigating through the featured houses. In terms of functionality I would implement proper search features and a database of haunted houses to pull from.

Thank you!

Feel free to check out the code on Github.

Let i =

kelsey-d — Sun, 02 Feb 2025 08:11:19 +0000

This is a submission for the 2025 New Year Writing challenge: Retro’ing and Debugging 2024.

Towards the end of 2023, my department underwent a sudden change in management. I expected a journey in professional growth. Instead, what ensued throughout 2024 were relentless battles with identity, isolation, and indetermination.

Indetermination - being uncertain or undecided

Management changes are common in many careers. Sometimes you can see them on the horizon and sometimes they come as a complete surprise.

I had barely reached my first year. A year in gives you a pretty good lay of the land even if there are still many unknowns. I was certain of our operations and how my job function fit within them...and then I wasn't. I asked numerous questions, scrambling to find the path forward.

No matter how many questions I asked, I would never get the answer I was searching for.

There is no such thing as a predeterminate path. Paths are created when I decide to build them.

I started with what I knew, refined my questions and grew my knowledge. With each new discovery, I found myself building a path forward.

Isolation - being or feeling alone or apart from others

Amidst the management change, the department gained new members but also lost long-term ones. Not only had the nature of the work changed but also the team dynamic.

Isolation isn't always about being physically alone. I enjoy time alone and can work independently for long durations. Isolation also happens when there is a disconnect from those around you.

Challenges at work are plentiful. A supportive environment can help overcome them with minimal stress. Yet, I struggled to find support within my changing department.

There is no shame in tapping into other networks of support. I joined online communities with people in similar professions and attended networking events where I met others with similar challenges and goals.

Outside support helped me ease the isolation and discover ways to connect back with my environment and the people in it.

Identity - being who you are

Along with a solid support system, a strong sense of identity can help overcome a myriad of challenges. At the same time challenges can drastically shape who we are.

Naturally, there were adjustments made to adapt to my evolving work environment. It was the expected professional development like brushing up on technical skills.

Then there were the unexpected developments, such as the aforementioned indetermination and isolation, followed by the subtle loss of identity.

In hindsight, I see how blind I was to and by my hyper fixation on workplace performance. I thought I needed to be a certain type of person to succeed and became the type of person who believed success is contingent on perfection.

My challenge was never the change in management. It was the internal changes within me. I never struggled with perfectionism before, so why now? I never cared for salaries and titles so why do I feel awful about my own? I thought I loved design and coding. Why can't I seem to enjoy them now?

Sometimes you can see these things on the horizon. Change is the only constant after all. How else would I grow and achieve my goals?

Sometimes, though, they come as a complete surprise, and you miss parts of who you used to be.

Instead of coming face to face with those sentiments, I focused on my workplace changes and career growth. I assumed adaptability at work would resolve those sentiments, but it didn't.

Imperfection -

Due to the management change, I learned a substantial amount in web development, collaboration and leadership. I'm better adjusted to my workplace and approaching greater understanding of the wider field I'm in.

Going into the new year, I am still struggling with change in sentiments I cannot yet define. I don't plan on strategizing my way out of them though. I will let them be.

I will allow myself to be unsure, unfit, and whatever other uncomfortable feeling out there.

I will just be.

Can you find the error in this Nextjs code?

kelsey-d — Sat, 21 Dec 2024 01:12:23 +0000

Project Repo: https://github.com/kelsey-d/savings-calculator

I'm looking to enhance my understanding of React and Next.js through infamous beginner projects.

This one is a simple calculator that when given a savings goal as a target date it returns the balance at that date or if given as a target balance it will return the date the balance is reached.

It is a work in progress so please excuse its appearance. I will style it last. Right now I'm working on the logic. I am experiencing a bug.

Since the calculator has two modes "date" and "balance", I want only the relevant inputs, "Target Month" and "Target Balance" respectively, to show based on the mode chosen.

By default the "Target Month" is shown but the user can use the DATE and BALANCE buttons above the input to toggle between the two. However, when BALANCE is clicked the inputs are switched only momentarily before resetting back to "Target Month."

Can you find the error?

I can gather from the way I abused the useState hook it was a matter of time before something broke. It might be a re-render is resetting the state but I don't know which one.

Any feedback is appreciated but I am looking for any explanation of the bug and tips on better organization of state, functions and components.

Thank you!