Mailing it in

I’ve wanted to put out tons more ideas and content than I’ve managed to produce. The problem is rarely lack of ideas or even lack of time. What’s held me back so often has been over-design of my former portfolio site.

It’s hardly a secret most designers will do almost anything to avoid learning how to code. For my part, I can definitely own up to stuffing in way too many plugins, auto-generating some smelly freaking code to try and save time. Case in point:

<!-- .et_pb_section -->

<!-- Wow much Div! Such classes! -->
<div class="et_pb_section  et_pb_section_1 et_section_regular">
<div class=" et_pb_row et_pb_row_0">
<div class="et_pb_column et_pb_column_4_4  et_pb_column_0 et-last-child">
<div class="et_pb_text et_pb_module et_pb_bg_layout_light et_pb_text_align_center  et_pb_text_0">
<div class="et_pb_text_inner">

<h1>This is my flow state</h1>

<!-- .et_pb_text -->

The old portfolio site is an example of something that outwardly looks great (IMHO) but fails beneath the hood. I built it using Divi- a modular builder (now with the option of a full visual builder). Divi is simple enough for designers who want to avoid coding, and robust enough to let someone with medium-level CSS skills bang out something gorgeous pretty quickly.

Easy design led to over-design for me though, and ultimately stagnation. I’d find myself painstakingly tweaking margins and padding on Every. Single. Div. This meant every post had to be a masterpiece to justify the time I spent laying it out. I could never “just write”.

So now for the redemption story:

At the Flatiron School I’ve completed upwards of 200 labs, and each has simple, appealing formatting applied to a readme written in markdown. I had heard of markdown but never explored it until I saw the “back-end” of these files in Atom.

Flatiron School requires students to blog on various tech/coding-related topics, so the issue of over-designed blog posts came to a head soon after I started coding bootcamp. I already knew my old Divi code smelled to High Heaven, so the idea of redesigning from the ground up was already on my roadmap.

I built this new site on a base theme called Underscores, which is little more than bare-bones scaffolding for a WordPress install. Being pressed for time I wanted to write as much pure, repeatable CSS as I could, with the least amount of vendor functionality/design conflicts.

and the coup-de-grace:

Markdown integration, with email-to-post functionality. This is the inaugural post. I wrote it entirely on the Notes app on my iPhone and fired it off to WordPress!

I do my best thinking and writing on the train, so prepare for a whole lot more from me 🤗

(Not gonna lie- I went back in on the computer to add code and images I couldn’t easily drop in from my phone. Writing the content like this and emailing in saved me a boatload of time on putting this together though…)

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    Markdown is turned off in code blocks:
     [This is not a link](

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see

Mark Bello

Mark Bello