Salt and Tar page refactor, part 1

Implement Rails convention and best practices for HTML layout

Do you have a YouTube channel you just love? I am a Navy veteran and miss the sea. I ran across this adventurous couple many years ago and loved them. They have been quiet for awhile now and it is funny how that feels. Much like wondering where Firefly went I guess. Like many fans, I wanted to support them beyond YouTube’s noisy platform. As a budding developer I wondered: what if their content lived in a calm, focused space that matched their handmade vibe?

When I started playing with web development, this was one of the things I wanted to tackle. I love YouTube, but it is so noisy and distracting. I felt they would benefit from a different outlet. I certainly wanted a better way to interact and enjoy them.

As with many content creators, I could see the struggle. For them specifically they could benefit from more centered features and services. Yes they have a Go Fund Me and a Patreon. They sell merchandise. I think there is a better way, but that is just me.

Salt and Tar is the journey of a wooden boat. Ruth and Garret started in Washington state, on a small plot of land a friend had. They had a small camper and a used generator. They both loved the sea, surf, and sand. Ruth worked during the day while Garret built a dream.

They set up a temporary shed from 2x4 and plastic. Tarp’d the top and laid out the boat plans on the working floor built from plywood. They lived and breathed Rediviva. The build came along as neither were new to working on boats, but they had little resources or tools and did it all in a overgrown lot in Washington state.

I sat down with Figma and designed a concept that I just love. This is great, because it is for me. I have had many say the font is wrong or the colors aren’t right or the flow is crap. Some of that may be true, but it is just what I want.

I built the html structure and played with the css. I have to say that in the beginning this was a challenge. Well, the real challenge was making it mobile responsive. The layout was clean, the colors were bright, and I loved how layered it was.

Last year when I found Rails and finally found a solution to my portfolio pains, I knew this would be one of the first sub projects. So I worked at integrating it into MILK-00. That did not take long really. I pretty much just lifted the html from the NextJs page.

It works and looks great, but it is not Rails worthy. Not React worthy either. It certainly did not present the level of developer I believe I have become. It was over 200 lines of html and tailwind css. Not dry at all, there are components like various cards that were just repeated code blocks with different content. I was using cloud storage and making silly and unnecessary cloud calls for tiny SVG assets to serve up kB of image data. Not to mention how painful it would be to debug if something went wrong or the nightmare of tangled data and UI code I created. If you are interested in seeing the original page code, I have put it in a Gist where you can see it with syntax highlighting here.

So it is time to upgrade. This will be done in stages. Both the upgrade and this article. By the time this is done, it will probably be a novel. Hopefully i can do it justice but I want to show those that may be interested, what such a refactor could look like. For the upgrade, my plan is to work through the page, removing each section and building it’s own partial. Like the header, hero, promotion, you get it. I will first pull out all the cards data into a YML file and write helpers. I will eventually create a model for this data and create a dashboard so I can manage it. I will need to deal with style, creating all the pieces from the tangled base and put it all together so that the end result, looks exactly like the current result. Here is my plan.

### Refactor Roadmap  
- **Part 1**: Introduce and layout the problem.
- **Part 2**: Extract hardcoded data → YML  
- **Part 3**: Break monolithic template into partials  
- **Part 4**: Build helpers for dynamic UI (cards, responsive widths)
- **Part 5**: Create model and seed data
- **Part 6**: Dashboard for content management

I will try to explain the what and why every step of the way and when I am done, the developer will look at it and grin, the designer will love nothing changed, the user will never be the wiser, and the student may have learned something new.

As you follow this series, I'm curious how you might approach things differently, this is Rails, and there's always another “Ruby way” to solve a problem. Full disclosure: I vibe-coded my way through this refactor, emerging with not just a cleaner codebase, but hard-won lessons. I had to dive deep and seek clarity on the asset pipeline in production versus development, with a eye for Heroku. My mentor's guidance proved invaluable, helping me reinforce concepts I knew and discover new depths to Rails I hadn't explored. Here's to the journey of continuous improvement. May your refactors be ever in your favor!