Add gui editor article

Author: cb341

src/assets/blog/hackts_debug.webp

@@ -0,0 +1,44 @@
+---
+title: "Implementing Custom Figma Designs in Rails"
+publishedAt: 2024-08-03
+description: "A technical overview of the challenges faced when translating highly customized Figma designs into a Rails application. This article discusses layout issues, the limitations of CSS frameworks like Bootstrap and Tailwind, and suggests a GUI editor design for more efficient component positioning."
+tags: ["rails", "css", "figma", "gui-editor"]
+---
+
+# Challenges in Implementing the hackts.ch Design
+
+While building the hackts.ch site, I encountered layout issues that I did not anticipate. The design came from a highly customised Figma file with precise alignments, irregular shapes and spacing patterns.
+
+I chose Rails with custom Sass stylesheets because of the abundance of unique styling across the page. [Bootstrap](https://getbootstrap.com/) felt difficult to adapt to the design, and [Tailwind’s utility classes](https://tailwindcss.com/docs/utility-first) were not flexible enough for the level of customisation required.
+
+## The Design Gap
+
+The Figma design did not translate neatly into flexbox or grid layouts with simple gaps, margins and paddings. Inspecting the box model in the browser confirmed that replicating the layout required careful, element-by-element positioning.
+
+![hackts.ch homepage with debug rendering](../../assets/blog/hackts_debug.webp)  
+
+*Implementation of hackts.ch with box model inspection, showing the irregular spacing and alignment requirements.*
+
+I also tried using Figma-to-code tools such as [Builder.io’s Figma plugin](https://www.builder.io/c/docs/figma-to-builder), but the generated output fell far short of expectations. The markup was verbose, difficult to maintain, and unsuitable for production.
+
+## Retrospective Approaches
+
+Looking back, several methods might have eased the process:
+
+- Rendering sections as images with defined clickable areas  
+- Using background images with text overlays  
+- Exporting directly from Figma as SVGs to keep both vector shapes and text  
+- Adding overlays for pixel-accurate alignment adjustments  
+
+While each could have been useful, all still required manual editing of pixel values.
+
+## A Possible Solution
+
+A more efficient approach would be to build a GUI editor in Rails for placing visual components.  
+Such an editor could allow drag-and-drop placement of images, text, and overlays directly in the browser. Elements would be placed inside `position: relative` containers, with their coordinates stored in the database. The page rendering could then use these stored values, eliminating the need for repeated CSS edits and manual refreshing.
+
+An implementation could follow ideas from [Herb LSP](https://marcoroth.dev/blog/herb-lsp/), which proposes a language server for HTML and embedded Ruby, but adapted to support real-time visual adjustments to component positions.
+
+## Conclusion
+
+Highly customised designs often make standard frameworks and layout approaches less effective. Even with Sass for flexibility, aligning to the Figma design became a slow, manual process. A Rails-based GUI editor for component positioning could make implementation faster, more accurate, and easier to maintain.