🔧 From English Major to Developer: Why Clean Code Is About Telling a Clear Story
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
Before I was a developer, I was an English major. I cared about how sentences flowed, how meaning was layered and could sometimes be buried and lost.
Turns out, writing clean code taps right into those same instincts.
🧼 What Clean Code Means to Me
My brain can easily be thrown into a state of chaos, and poorly written code can be very chaotic. For me, clean means:
- Semantic at very least
- Modularized if possible - chunks of code broken in into reusable pieces
- Coherent -
const itemsmeans very little butconst blogPostshas clear meaning.
🍜 Eating Div Soup: Semantic HTML
Have you ever opened a page file only to find hundreds and hundreds of lines of divs — a styled banner, a row of buttons, some images, a form —
<div> after <div> after div-estating <div>?
Worse still, there are no comments, so it's just an abyss of HTML with no real visual landmarks. My brain looks for structure to latch onto.
When I was learning to code at Turing, they called this Div Soup — IYKYK — and they were right.
<template>
<div>
<div>
<div>
<h1
:style="{
fontSize: '32px',
fontWeight: 'bold'
}"
>
Welcome
</h1>
</div>
</div>
<div>
<div>
<div>
<button
:style="{
backgroundColor: 'blue',
color: 'white',
padding: '10px'
}"
>
Click Me
</button>
<button
:style="{
backgroundColor: 'green',
color: 'white',
padding: '10px'
}"
>
Or Me
</button>
</div>
</div>
</div>
<div>
<div>
<div>
<form>
<div>
<input
type="text"
placeholder="Your Name"
:style="{
border: '1px solid gray',
padding: '8px'
}"
/>
</div>
<div>
<input
type="email"
placeholder="Your Email"
:style="{
border: '1px solid gray',
padding: '8px'
}"
/>
</div>
<div>
<button
type="submit"
:style="{
backgroundColor: 'purple',
color: 'white'
}"
>
Submit
</button>
</div>
</form>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<img
src="banner1.jpg"
alt="Banner Image 1"
:style="{
width: '100%',
height: 'auto'
}"
/>
<img
src="banner2.jpg"
alt="Banner Image 2"
:style="{
width: '100%',
height: 'auto'
}"
/>
<img
src="banner3.jpg"
alt="Banner Image 3"
:style="{
width: '100%',
height: 'auto'
}"
/>
</div>
</div>
</div>
</div>
</div>
<!-- Repeat 300 more lines... -->
</div>
</template>
🌟 Clean, Neat, Semantic Version:
Let's strip out some of that <div> soup and replace it with some semantic HTML elements!
<template>
<section class="page-container">
<header class="page-header">
<h1>Welcome</h1>
</header>
<section class="button-group">
<button class="primary-button">Click Me</button>
<button class="secondary-button">Or Me</button>
</section>
<section class="form-section">
<form>
<div class="form-group">
<label for="name">Name</label>
<input id="name" type="text" placeholder="Your Name" />
</div>
<div class="form-group">
<label for="email">Email</label>
<input id="email" type="email" placeholder="Your Email" />
</div>
<button type="submit" class="submit-button">Submit</button>
</form>
</section>
<section class="banner-gallery">
<img src="banner1.jpg" alt="Banner Image 1" />
<img src="banner2.jpg" alt="Banner Image 2" />
<img src="banner3.jpg" alt="Banner Image 3" />
</section>
</section>
</template>
Ahh, that's nice isn't it? It's much easier to tell what elements are making up this page. It utilizes <section> elements showing how the page is organized. The <input> elements now have a <label>.
We can go further though.
🧹 Modularized, Neatly Organized Version
What if we put the page header code into it's own component file? We could use it on any page!
📄 PageHeader.vue
<template>
<header class="page-header">
<h1>Welcome</h1>
</header>
</template>
Oh, and the buttons, well, heck let's just refactor each piece into a component.
📄 ButtonGroup.vue
<template>
<section class="button-group">
<button class="primary-button">Click Me</button>
<button class="secondary-button">Or Me</button>
</section>
</template>
📄 FormSection.vue
<template>
<section class="form-section">
<form>
<div class="form-group">
<label for="name">Name</label>
<input id="name" type="text" placeholder="Your Name" />
</div>
<div class="form-group">
<label for="email">Email</label>
<input id="email" type="email" placeholder="Your Email" />
</div>
<button type="submit" class="submit-button">Submit</button>
</form>
</section>
</template>
📄 BannerGallery.vue
<template>
<section class="banner-gallery">
<img src="banner1.jpg" alt="Banner Image 1" />
<img src="banner2.jpg" alt="Banner Image 2" />
<img src="banner3.jpg" alt="Banner Image 3" />
</section>
</template>
Now, let's see how the page template would look.
<script setup>
// Import your modular components
import PageHeader from "@/components/PageHeader.vue";
import ButtonGroup from "@/components/ButtonGroup.vue";
import FormSection from "@/components/FormSection.vue";
import BannerGallery from "@/components/BannerGallery.vue";
</script>
<template>
<section class="page-container">
<PageHeader />
<ButtonGroup />
<FormSection />
<BannerGallery />
</section>
</template>
Is it easier or more difficult to tell what the page is made of? Pretty darn clear, right? We look at the template and tell a quick tale of what makes up the page, at a glance:
- First there's a page header
- Next there's a button group
- Then comes the big bad form section
- And then the banner gallery rallied at the end
- And the page lived happily ever after...
🏗️ Where Most Pages Land
Of course, it doesn't always make sense to create a new component file for every tiny section, especially if it's only used once on a single page.
In reality, most page templates land somewhere between Example 2 (neatly organized semantic HTML) and Example 3 (full modularization).
And that's okay.
🛠️ In the Real World
As a developer, you’re guaranteed to encounter a little (or a lot of) Div Soup chaos at some point.
And most of the time, you won’t be asked to refactor a mess into a clean, modular masterpiece — you’ll be tasked with patching, fixing, and building on top of what's already there.
But — whenever you have the chance to make things a little clearer, a little more structured, or a little more readable for the next person (even if that person is future-you) — it’s worth doing.
Clean code isn't about being perfect.
It's about being thoughtful.
And thoughtful code tells a clearer story — one that's easier to read, easier to build on, and a whole lot nicer to live inside. 🧹📚✨
...
🔧 Story Telling AI
📈 25.98 Punkte
🔧 Programmierung
🔧 SAS: Telling a Story With Data
📈 25.98 Punkte
🔧 Programmierung
🔧 Clean code , Clear Mind
📈 24.52 Punkte
🔧 Programmierung
🔧 Clear Conversations, Clear Results
📈 22.92 Punkte
🔧 Programmierung
🔧 Clear Conversations, Clear Results
📈 22.92 Punkte
🔧 Programmierung