Clay Larson, front-end web developer and writer

So you're looking for a front-end dev, huh? Or maybe you were hooked by the siren song of my alluring alliteration. Whatever the case, let's cut to it.

Here’s me pretending not to be terrified of that fence giving out.

Me in a nutshell

I’m a front-end web developer. A good one. I’m well-versed in the usual HTML, CSS, and JavaScript, and I’ve built a number of websites in both React and AngularJS. But I’m not your usual developer.

For starters, I’m also a professional writer and editor. My degree is in English, not comp sci. For every website out in the wild right now sporting my code, I can point you to another filled with my words.

I’m one of those mystical hybrid creatures who can translate between your nerdiest nerd’s tech jargon and your most tech-illiterate project manager; who can look at your designer’s half-completed mockup and fill in the blanks in a way that actually looks polished the first time; who never loses site of the user’s perspective, even while I’m up to my eyeballs in Node modules; who pushes the boundary between run-on sentence and paragraph.

A brief backstory

How did I get this way? A healthy combination of hard work, serendipity, and blind faith.

After failing to settle on a major in college, I fell back on English practically by default, assuming with my trademark brand of whimsical optimism that things would work themselves out one way or another.

And sure enough, after graduating, I:

gained experience proofreading that turned out to be highly transferrable to QA
impressed a writing manager I proofread for enough to get hired as a freelance writer
used the combo of traditional editorial and tech experience to get hired as a web editor
learned enough HTML and CSS to take my web content out of Drupal’s WYSIWYG and into an IDE

In short, my job description slowly changed until one day I was spending more of my time doing something one might term development than anything else.

A deeper dive

Having since added JavaScript to my arsenal of skills and taken a fair few laps around the framework pool, I’ve emerged out the other side, if not a beautiful swan, then certainly a terrifying hydra, capable of wearing multiple hats on my multiple heads. I can throw together a contact form, sure. But I can also wordsmith ambiguity out of the form fields while I’m at it.

While I wouldn’t call myself a designer, I know my way around Sketch and can put together an intelligent mobile layout from a desktop mockup. Or I can design the page that contact form goes on based on the look-and-feel of the rest of the site. I designed this site you’re reading right now.

And while I wouldn’t call myself a back-end guy, I can do some basic SQL, and I do just fine in Node. I have thus far managed to Google enough Linux, Mongo, Express, and Nginx to get this website, the headless CMS behind it, and a separate project—aintnojavascript.com—all working on the same Digital Ocean droplet. If you are working in the MEAN or MERN stack, I might just pass as full stack.

Here be links

If any of these skills sound useful to you, give me a shout so we can work together.

Or if you’re still not sold, no worries. You can trawl through the full list of my skills if you want, or peruse some examples of my work to see my skills in action.

You can also hit me up on LinkedIn, follow me on CodePen, or stalk my latest activity on StackOverflow.

Check these skills

sort by

HTML

CSS

JavaScript

React

AngularJS (1.x)

Svelte

Accessibility (WCAG)

Writing

Copy Editing

Proofreading

Jest

Node

Express

MongoDB

Nginx

Storybook

Puppeteer

Lodash, Underscore

Handlebars

KeystoneJS

Gulp

Webpack

Parcel

Rollup

Git

jQuery

Drupal 7

JSX

Pug

LESS

SCSS, Sass

JSS

Sketch

Fox & Roach Realtors

With over $300 million in real estate up for sale at last check, Fox and Roach Realtors’ site is easily the largest I’ve built in terms of the sheer dollar value of its listings, but that’s not the only thing that makes the site stand out in my mind.

Unlike every other real estate site I’ve built, I never received a true mockup for the Fox & Roach site. Built in React, the site was supposed to be a port of another built in AngularJS that the client liked the design of. Keep the design, swap out the data, and wham, bam, you’ve got yourself a new website. But of course, reality is never quite so simple.

Starting with an old mockup of a different website for a different client and a list of notes from a design meeting I didn’t attend, I began the process of translating ng-repeats into JSX maps and global LESS files into componentized CSS-in-JS. Along the way, I created the requisite data models in a headless CMS. It didn’t take long to realize we were looking at significant differences between our two supposedly matching websites.

A few gaps could be filled in by talking things through with a designer familiar with the project—use the design of section X from page A for section Y of page B; use the blog design from site C. When that failed, I was given latitude to just make something up.

One such example is the site’s extensive agents page. The site serving as the design basis for Fox & Roach’s site was made for a homebuilder, but Fox & Roach is more of a collective of realtors; F&R doesn’t itself build any homes. So the client asked us to replace a floor plans page from the source site with a page to showcase its many affiliate agents, as well as individual pages for each of them where buyers could see listings associated with that agent. I came up with the design for these pages, taking inspiration from other pages on the site and from similar pages on other sites I’d worked on.

Some of my contributions to the project are harder to spot.

On the homepage, for example, the keyboard-accessible slideshow you see on desktop is also swipeable on mobile. That touch support is added via a generic component I created to wrap other components; it allows you to pass arbitrary functions as props, which will be called when swiping up, down, left, or right.

Hidden inside the application modal on the careers page is another gem: a file upload button I helped develop. I took a simple component a coworker had made to base-64 encode an upload and store it in state and tricked it out with:

error-checking and informative error messages
a user-friendly button for removing an upload
the ability to pass accepted file types for supported browsers and a maximum allowable file size as props, or stick with intelligent defaults
and a way to easily apply custom styles to the natively unstyleable <input type="file"> element in a way that’s still 100% accessible

Total development time on that button easily surpassed the combined time spent on that agents page and the associated agent detail pages I mentioned earlier. The end result was a <FileUpload /> component that my team could easily drop into any contact form without a second thought.

Poke around livenewnow.foxroach.com to see what other hidden or not-so-hidden treasures you can find.

Korndoerfer Homes

Korndoerfer Homes holds the unique distinction of being both perhaps the most memorable website I’ve chosen to showcase here and the only one I didn’t technically build. I built three or four pages, sure. But if we’re being real honest, I technically only modified all the others. While most projects here started with a blank canvas, Korndoerfer is a good case study in the value I can bring to an existing project.

The Korndoerfer site features a truly unique design in its Find Your Home section, reflective of the company’s unique way of categorizing its inventory. Our design team, in creative meetings with the client, had put together an almost app-within-the-app experience for the Find Your Home section. And at the time I took over the project, a coworker of mine was struggling to serve up the FYH section’s many views on a plate with minimal spaghetti.

the Find Your Home page on desktop — Get your first glimpse into the eyes of the beast.

Built in AngularJS, the section’s code when I first set eyes on consisted of a complex mix of numerous templates that displayed the same information in a variety of ways, all dumped into the same master template that featured liberal use of ng-if. Shenanigans like $scope.$parent.$parent.$parent.myMethod() abounded, and squashing one bug seemed to inevitably lead to another. Plus, all those ng-ifs were making things slow.

I began simplifying logic as best I could, cleaning up controller functions and merging pairs of similar templates. Still, to fix the speed issue and ensure the app could be easily maintained going forward, I needed to tackle those ng-ifs. The biggest culprit were the cards. We needed to display at least four different data types—model homes, ready homes, neighborhoods, and open houses—in several views across desktop, tablet, and mobile.

two different layouts of the same card on the Korndoerfer site — Besides accommodating both vertical and horizontal layouts, I also needed to come up with a tweener card layout for those old 720p laptops. It’s the bottom one here.

I went to work condensing the card templates into a single master template that worked for all data types, then I set out to simplify the view-toggling logic. While the 2000 or so lines of LESS that came out of it might not be considered simple, the resulting logic in the end was undeniably easier to wrangle. Now, when you click a link to toggle one of the three views—split, grid, and map—a single class is toggled on the parent container around the whole section. Media queries took care of the rest. Our resulting LESS structure was something like this:

.fyh-section {
  &.map-view {
    /* some styles */
  }
  &.grid-view {
    /* more styles */
  }
  &.split-view {
    /* yet more styles */
  }
}

Almost all ng-ifs were eliminated entirely, and the one or two that remained were focused around truly route-specific data rather than presentation. Suddenly our laggy map widget was nice and snappy. And best of all? When we wanted to make a change, that’s what we did—made a change, instead of repeating the change across several different card templates. Among four routes each with desktop, tablet, and mobile versions of three different views—that’s 36 different presentations—there’s only one single paragraph of redundant HTML that my CSS wizard wand wasn’t quite capable of waving away.

I polished the section off with a number of scroll-hijacking functions to ensure scroll position is maintained within the list when changing routes within the section but reset when coming to any route within the section from elsewhere on the site.

Before Korndoerfer went live, I had modified every single page on the site in one way or another, but none so dramatically as those in the Find Your Home section. Check out other pages I didn’t actually build on the Korndoerfer Homes website.

Max Cape Customizer

A week into April of 2020, coronavirus was locking the world down, the Dow Jones was 10 sessions into a comeback that most fund managers seemed to think should have ended about nine sessions ago, and tens of thousands of computer nerds around the world were too busy digging up virtual artifacts to notice. I was one of them.

You see, RuneScape, the massively multiplayer online roleplaying game that everyone seems to vaguely remember but most don’t realize still exists, had just released its latest skill, Archaeology. As the sweatiest heroes of Gelinor raced to max the game’s newest skill, they could do nothing but dream of the glorious fashionscape that would be had when they were finally able to don the revered Max Cape once more.

Finding myself among this sweaty mob with dozens of hours to go until re-maxing and needing something to help pass the time uncovering artifacts, I created a little app to help players test out new possible looks for their max capes, the appearance of which players may customize in-game to suit their whimsy.

Since the cape customization interface in-game uses a completely unique and bizarre variation on the HSL color scheme, I created my app to let players input a color they would like to use and convert it into the closest valid in-game color.

Colors are converted between HSL, RGB, and hex formats using the tinycolor2 library, and they are then converted into in-game color values using functions I wrote myself with help from information available on the RuneScape wiki. I even threw in native color pickers using <input type="color">, which has pretty decent browser support these days. As colors are converted, an accompanying SVG of the cape is updated so you can see the result. I created the SVG myself in Sketch, by tracing over a PNG I got off the RS wiki.

Originally created as a CodePen project featuring completely client-side React rendering, I eventually recreated the app in Next.js and deployed it on Vercel. See it live.

I’m Clay.

Check these skills

Explore my work

Fox & Roach Realtors

Korndoerfer Homes

Max Cape Customizer