UI/UX


<html>

          <head>

                    <style type="text/css">

                               div{

                                           background: rgba(200, 50, 0, 0.2);

                                           opacity: 0;

                                           margin: 2em;

                                           padding: 2em;

                               } div:hover{

                                           opacity: 1;

                               }

                   </style>

                   <meta charset = “utf-8”>


<title>UI/UX</title>

    </head>

    <body>

               <p>

                        My client washed ashore the other day. Didn’t believe it

                        ‘till I saw that article in the local news and I knew


                        there must have been a reason she ignored my texts all day.

                        Didn’t even bother to leave me on read and I thought maybe


                        she just wasn’t interested anymore but really it’s ‘cause

                        she was dead. I wondered for a moment whether it was my fault


                        ‘cause I hadn’t finished her request: she asked me to code her

                        a body—a new body!—yes, that’s what she’d said; I only laughed.


                        <br><br> “I don’t program bodies,” I said, “I program Web

                        pages.” And she laughed too. <br><br> “I have webbed fingers.”


                        She held up her hand like she was showing off an engagement ring.

                        “See? Ain’t that close enough?” <br><br> And I think it’s because


                        of the sound of her voice but I said okay. And she dissected herself,

                        opened her skin in front of my eyes to show me what she could find.

                </p>


                <div id = “cavity” class = “capsule” onhover = “expand()” onclick = “excavate()”>

                           <p> <b>i.</b> <br><br>

                                    “Start with my chest first,” she told me. “It just feels <i>so-o-o</i> empty.”


                                    <br><br> “How do you expect me to fix that?” I asked.


                                    <br><br>She sighed. “I don’t know. Just fill it up with something.

                                     Algae, anemones, anything will do.”


                                    <br><br>“Anything?” <br><br> “Anything.” <br><br>


                                    That’s when I began to wonder whether it was possible to

                                    code a girl out of gigabytes, a monster out of markup and memory.


                                    “I can only do text boxes,” I warned her. “Headings and text boxes and

                                     buttons and the rest. But I don’t know if I can program love.”

                                    <br><br>

                       </p>

                       <div id = “ribcage” class = “shield” onhover = “brace()” onclick = “shatter()”>

                                  <p> <b>ii.</b> <br><br>

                                                “That’s okay,” she said quickly. “I don’t think I really

                                                 need love anyway.”<br><br>

                                </p>

                                <div id = “heart” class = “hopeful” onhover = “pulse()” onclick = “pound()”>

                                            <p> <b>iii.</b> <br><br>

                                                        “Oh,” I said. I paused. “Bad breakup?”


                                                        <br><br>“I suppose you could say that.”


                                                        <br><br>“I’m sorry.”


                                                        <br><br>I only half meant it. I wasn’t here to play therapist

                                                        but thankfully, she didn’t dive in. “Don’t be,” she said.

                                                        “There’s nothing you can do about it. Unless..."


                                                        <br><br>“Unless?”


                                                        <br><br> “Yes, unless. Unless you program me

                                                        a new heart.” <br><br> “I can’t do that.” I said. <br><br>


                                                        She shook her head. “Sure you can. You’re a clever creature.

                                                        And I have no specifications, as long as it doesn’t break.”

                                                        <br><br>

                                            </p>

                                </div>

                                <div id = “lungs” class = “listener” onhover = “hold()” onclick = “rasp()”>

                                           <p> <b>iv.</b> <br><br>

                                                        “And while you’re at it,” she said, “why don’t you program

                                                        me a new set of lungs?”


                                                        <br><br> “What for?” I asked.


                                                        <br><br> “I have asthma,” she said.


                                                         I sat there thinking, <i>that was the most normal thing she’s s

                                                        aid to me all day</i> when she added, “I think I sing too much and

                                                        I sing too loud and I want you to help me to tone it down.”


                                                        <br><br>“I don’t think that has anything to do with your asthma,” I                                                          said.


                                                        <br><br> “Whatever. As long as I quit wheezing

                                                        when you’re done.” <br><br>

                                                </p>

                                    </div>

                                    <div id = “spine” class = “staircase” onhover = “curl()” onclick = “snap()”>

                                              <p> <b>v.</b> <br><br>

                                                            “Last thing,” she said.


                                                            <br><br> “Last?”


                                                            <br><br> “Yes, last. I pinky promise.” She held up one webbed

                                                            pinkie as if expecting me to latch on. I stared at it until she

                                                            withdrew. “Can you program me a new spine?”


                                                            <br><br>“New spine! What’s wrong with your old one?

                                                            You’re sitting pretty straight to me.”


                                                            <br><br>“My old one was for swimming,” she said.

                                                            “My old one was attached to a tail.”


                                                            <br><br>“You don’t have a tail, ” I said.


                                                            <br><br>“My old tail is gone.” She lifted an eyebrow.

                                                            “I got rid of it myself, and be glad I didn’t make you code me

                                                            a new set of legs.”<br><br>

                                                    </p>

                                        </div>

                                        <p>

                                                    She thanked me and she stood up to leave. I watched her walk

                                                    all the way to the door, searching for scales but her

                                                    billowing skirt hid any fishiness she may have possessed.

                                                    <br><br>

                                        </p>

                            </div>

                            <p>

                                        In all honesty, though she invaded my texts, I didn’t plan to

                                        work on her project until I picked up the newspaper today. I

                                        recognized her portrait, sprightly and smiling in spite of


                                        the sickly spine and the shortness of breath,

                                        the symptoms wracking her asynchronous organs as we spoke.


                                        <i>Drowned</i>, said the headline. <i>Suicide,</i>

                                        speculated the source. I wondered if our meeting was some


                                        twisted sort of foreshadowing. I could feel her lungs

                                        flooding with my guilt, the lungs that sang

                                        too much and too loud. Did she drown in song?


                                        <br><br>I turned the page. It was a story about a siren

                                        who had fallen in love with a boy she’d sucked into the sea.

                              </p>

                              <!--I thought about what she looked like when she visited my office.

                            Pale, as if she’d spent her nights staring into the phone or maybe

                            struggling to swim or maybe on the shore, trying to revive a regret.

                            The article announced that an autopsy was under way. I wondered what

                            they’d find. Dead girl bloated with bay, or perhaps fish bones.-->


                            <!--I wondered if I could code her back to life.--->


                            <!--Maybe she was a siren. Or maybe she was delusional. Was there a

                            difference, either way?-->

                </div>

        </body>

</html>





(In case you're curious, this is what the piece looks like when used as source code for a web page!)


Caroline Dinh is a high school student from Rockville, Maryland. She thrives in the grey area between technology and art—when she’s not writing stories, she’s writing oddly-structured poems or computer programs, sometimes both at the same time. You can find her online at https://cyborg48.github.io/.

Comments