A screenshot of my web app Dharma Gem.
Dharma Gem
Make static text come to life without coupling your code.
2023-05-19T13:52-07:00
I loved designing pages for each week's newspaper in journalism school. Every layout was a visual exercise that let me express myself beyond the written word, but there were still rules. A good publication doesn't bury the big story on the back page and everything has to fit perfectly within the margins – there can be no excessive whitespace and no text overflow.
Web design doesn't have these physical restrictions. There is no limited real estate for 5,000-word stories and many readers no longer flip pages, they scroll them. Maybe the most exciting feature of the web is our ability to navigate content in a virtual 3-dimensional space thanks to advanced CSS features. Text can now come to life in ways that engage users beyond the content of the words.
For instance, rather than scrolling straight down a long website with many articles you could instead flip some 3D object to reveal new content on each side. I used this design not for news articles, but for Buddhism's Eightfold Path by building a virtual 8-sided die where each face contains one part of the Path. To create this object I used CSS's clip-path property to cut the eight square divs into triangles, CSS transform and transition to angle and flip them, and React's useState hook to keep track of which side was showing.
Building the base object was like sculpting clay in a digital 3D environment. I grew more excited as the page acquired greater depth and dimension. Formatting the text of each side, however, was a little less enjoyable. I just couldn't find a uniform layout for my diverse set of data. After playing around with different text templates and not finding the right one, I learned the importance of decoupling.
My computer science professors drilled into me maxims that apply across all programming languages. One of these was DRY – an acronym that stands for "Don't Repeat Yourself." An example of the DRY principle is declaring a single function and calling it in multiple places rather than writing that function's declaration over and over again throughout the code. It's a practical approach that has reduced file sizes in all my projects, yet when programmers decide to be DRY they risk coupling their code too tightly.
Coupling is when two or more components share functions and data. We want our code to be DRY yet not too tightly coupled. The codebase becomes difficult to manage when this happens, as I discovered with my SideText component in React.
This component formatted text in a highly coupled way, which would have worked if the data for each side were more symmetrical. Some parts of the Eightfold Path had arrays that others didn't and even extra images. Pretty soon this single component I built was full of conditional renders. Sections of text were displaying in different places depending on if there were images or not, and using the same component for every side no longer made sense.
When I eventually decoupled the SideText component into separate layouts, I still kept my code as DRY as possible. I extracted shared features into sub-components and then imported them as needed to give each face its own format and personality. By using these modular imports I was obeying all those professors' voices that echoed inside my head, commanding me: "Don't Repeat Yourself!" I did, however, end up with multiple component files instead of just one SideText.js, but this was necessary to achieve the look I wanted.
Decoupling finally allowed me to create a fun digital 3D resource for anyone studying the Eightfold Path. If you're struggling to balance how a site looks and behaves across many different elements, ask yourself if the code is too tightly coupled. Fixing this just might provide the extra flexibility you need to finish that amazing app.