By Jimmy Sawczuk
By Jimmy Sawczuk
Published · 10 min. read

As the summer of 2016 began, I started work on a project I ambitiously codenamed The Manhattan Project. A tongue-in-cheek nod to the real Manhattan Project of World War II, I felt like my project was similarly ambitious, despite the stakes for mine being far lower. After a few months, my Manhattan Project got its real name: Section 411. Pronounced “section four eleven” – as opposed to “section four one one”, for a reason I’ll explain below – what the The Manhattan Project turned into is a completely redesigned and redesigned version of my website.

I unofficially launched Section 411 last month with a post about my first marathon, but because so much has changed, I wanted to take a separate post to show off what’s new. Feel free to take a look around on your own if you’d like; the behind-the-scenes tour starts below.


Perhaps the biggest change is the name.

At Progressive Field, there’s nothing especially remarkable about section 411. It’s one of the lower sections in the third deck, hanging high above the mezzanine level (formerly known as “Pronkville”) and the lower deck. The entire section is maybe 30 seats, and each of those seats lies in fair territory. So if you’re sitting in section 411 and you catch a batted ball, not only have you caught a home run ball, but you’ve probably caught the longest home run in Progressive Field’s history. Like most of Progressive Field, section 411 offers an excellent view of the entire field, but you do have to lean out of your seat a bit to see into the right field corner. And if you want a good view of the strike zone, you’re best served to bring binoculars.

Jimmy, as a kid in the top row at Jacobs Field

Section 411 turns out to be so unremarkable that my family didn’t bother to take any pictures at the dozens of games we watched from there. But I was pretty happy to be at Jacobs Field, even if we were in the top row – I’m the grinning kid near the middle of the top row. My friend Doug is next to me and is as happy to be there as I was, I swear.

I like to think people who sit in section 411 are die-hard baseball fans – or, in my sister’s case, related to die-hard baseball fans. They’re people who appreciate the game and value being at the game over just watching it on TV, even if it’s a longer view. These aren’t the people who get so drunk they forget innings four through eight. These aren’t the people who leave if it gets a little chilly or a little wet. These are people who, like typical fans, enjoy ballpark food and drink, but – in my mind anyway – would be at Progressive Field even if the only offerings were a seat and a baseball game.

Over the years I’ve been to more than 50 baseball games at Progressive Field. Back in the late 90s, when the Indians contended every year and the stadium was selling out every night, my Dad got in on a partial season ticket plan at work that got us four tickets to a half dozen games per year. Those tickets were for section 411, row C, seats 1 through 4. Since my first visit to section 411 in 1996, I’ve seen at least thirty games from one of those four seats. Some were wins, some were losses. Some were blowouts, some were pitchers duels. Some were playoff games with all the accompanying intensity, some were…well, not.

In many ways, I’ve grown up in section 411. The seats in row C haven’t gotten any closer to the field, nor have they gotten any less drafty, and they only narrowly avoided being removed in last year’s renovations. But for some reason I still like it up there. It’s not a perfect angle, but it’s a unique perspective that I’ve come to appreciate, even if it’s at a distance. I like that it’s a little chilly up there on spring and fall nights: only real fans brave the elements to support their team. I like that people who sit up there are simply there to enjoy the game and the companionship of people like them.

I’ve been writing at Cleveland, Curveballs and Common Sense for almost 10 years now. My first blog after the McJournal years was called From My Brain To Your Computer. That name, apart from being somewhat obvious and childish, was used by another blog. So in early 2008 I changed the name to Cleveland, Curveballs and Common Sense. The new name had three parts, all of which described what my writing would be about and why it should be taken seriously, and it was delightfully alliterative. But over the years, I’ve outgrown that name too: I don’t write from Cleveland primarily anymore, and while a lot of my writing is about baseball, I’ve felt like the name has sort of boxed me in so I can only write about baseball. On top of that, a name with five words is hard to brand or put into a logo.

One night in September I was out for a run and trying to think of a new name I could use for my blog. I wanted a name that was both memorable to my readers and meaningful to me. I tried to think of places I’d been, or things I had seen, and suddenly I thought of all those games in section 411. It was perfect: if Progressive Field is my home away from home, section 411 was like my favorite armchair in the living room. I tried not to get my hopes up in case the domain wasn’t available. But I was relieved to see that it was, so I quickly grabbed it and didn’t look back.

With the shorter name and a real-life inspiration, I was able to design a logo. It probably won’t win any awards, but I’m proud of it anyway. Section 411’s logo isn’t only simple, it’s adaptable; that is, it carries the same identity whether I use the full “Section 411” version or just the condensed “411” version.

I don’t have any press credentials or know any famous people, so I won’t have the first scoop on any stories I write about that aren’t my own. But that’s sort of like the real life section 411 at Progressive Field: it’s not the closest section to the field, but it’s a unique perspective that is nonetheless accessible to everyone. At its best, those are two adjectives that I hope describe my writing: unique and accessible.


Before I came up with the new name, I’d been feeling like Cleveland, Curveballs and Common Sense was long overdue for a new design. My last major redesign launched in 2011, and since then there’s been a tectonic shift in how people use the Internet. Back then, most people used the Internet from their computers; today, they mostly use it from their phones. I iterated a lot on that initial redesign in 2011; I added mobile styles, a ballpark resume page, a nicer projects page, and more. But while I didn’t think the design had aged poorly, it still felt due for an overhaul.

Cleveland, Curveballs and Common Sense, circa 2016

Cleveland, Curveballs and Common Sense, circa 2016.

Beginning a redesign gave me a good excuse to look at other blogging platforms besides WordPress. WordPress is a great platform, and it’s served me well for nearly a decade, but lately I’ve been tempted by the current trend in tech-savvy blogging: static site generators.

WordPress – and most other traditional blogging engines – are dynamic, meaning that when your browser requests a post or a page to view, WordPress processes that request, going into the database if necessary, before creating HTML to send to your browser for it to render. Static site generators, on the other hand, do this processing up front, so that when a browser requests a post or page, all the web server has to do is spit back the pre-generated HTML for the browser to render.

There are pros and cons to each approach, but because my needs were fairly simple, it was a pretty easy choice to go with a static site generator, and I chose Hugo. Hugo’s most popular predecessor is Jekyll, which got its popularity because of its easy integration with Github pages. Unlike Jekyll, however, Hugo is written in Go, so not only does it run faster than Jekyll, I’m also much more familiar with Go and have already added a couple features to Hugo myself.

When it came time to start designing Section 411, I started with the single post pages and looked to Medium and The New York Times for inspiration. It took me a while to come up with a design I liked for the homepage, but I eventually landed on one inspired by 1912 Pike, a blog by Starbucks. From there I moved on to the ballparks page, then the category page. Then I added a few unique features: sidebars for the single ballpark post pages (like this one about Progressive Field) and lightboxes (to show larger versions of smaller post images; you can try these out on the smaller images in this post). Finally, I added some polish to the responsive and mobile-friendly features.

There’s one other big feature of Section 411 that I spent a ton of time on, but you probably haven’t noticed it at all. When I started working on the new design, I knew I wanted the articles I would write to feature a lot of images. I wanted the freedom to show big, high-resolution images to readers on desktops and tablets, but I didn’t want to subject readers on phones to long load times or blown data limits. After a little research, I found the srcset attribute which appeared to solve that problem by automatically telling the browser to download the correct image based on the size of the window. But I definitely didn’t want the headache of managing four or five different versions of each image that I wanted to use.

So I came up with Louvre, which is an image manager I wrote that sits behind a CDN and is capable of resizing and altering images on the fly. This way, I only have to upload each image to Louvre once, in its biggest version. Then I insert a custom shortcode in my post where I want the image to appear (the following sample code uses the unicode symbol to prevent Hugo from trying to process it as a real shortcode):

{{% lv id="wm7dhHBL" size="medium" align="left" alt="CC&CS, circa 2016" %}}
*Cleveland, Curveballs and Common Sense*, circa 2016.
{{% /lv %}}

This shortcode is parsed by Hugo and becomes HTML which automatically references several image URLs pointing to different sizes of the same image:

<figure class="figure lv medium left">
	<div class="wrap">
		<img
			src="https://cdn.section411.com/wm7dhHBL?mh=768&mw=1024"
			srcset="https://cdn.section411.com/wm7dhHBL?mh=768&mw=1024 1024w,
				https://cdn.section411.com/wm7dhHBL?mh=384&mw=512 512w"
			alt="Cleveland, Curveballs and Common Sense, circa 2016" />
		<figcaption>
			<p><em>Cleveland, Curveballs and Common Sense</em>, circa 2016.</p>
		</figcaption>
	</div>
</figure>

From there, the srcset attribute in the <img> tag does the rest of the work: the browser simply picks the best image available based on the size of the browser window. (This HTML also still includes a src attribute to support legacy browsers, but srcset is pretty widely supported.)

I plan on open-sourcing Louvre once I add a few more features and clean up the code a bit. But for now, in tandem with a CDN from Amazon Cloudfront, it works pretty well.


There are some features missing for now that I plan to add later, including a search box, better social and sharing buttons, and support for related posts that will appear at the end of each post. But for now, I’m super excited to say: welcome aboard! If you have any suggestions or feedback about Section 411, you can leave a comment here or write me at feedback@section411.com. Thanks, as always, for reading!