First “Client” Project

Published on:
April 12, 2017

After I got this website up and running, I had a big “Now What?” moment. I looked to the internet for inspiration. Nearly every development blogger or tutorial-maker agreed that when you don’t know what to do, make something you think you or someone else might need. That’s how ChamberlinSax.com was born.

Inspiration Strikes


I’m in the army, and one bad thing about this job is that I have to say goodbye to friends every time the army moves one of us away. A good friend of mine, Mike Chamberlin, recently moved to Washington DC in search of freelance musician work. He didn’t have an up-to-date website. I decided he needed one (without telling him, of course).

I owe a big debt of gratitude to his wife, Victoria, for giving me permission to use photos from her flickr for this project. She’s a PR pro in DC, and the professional quality images made making a worthwhile website possible.

I thought this would be a great time to see if I could use Django to make someone a custom content management system, and the template to display the content. I tried from the beginning to follow Django best practices (according to Two Scoops of Django, the Django style guide). Following this guide meant I was going to have to do a few things differently than I’d done for my website.

Getting Started


The first new step for me turned out to be the very first step. I set up a virtual environment. For the non-coders out there, a virtual environment is just a folder that acts like a tiny simulated computer. This lets you install things without breaking things that are already on your computer. A new version of Django had come out since I made my website and I wanted to use it without installing anything that would break code I’d already written for myself. A virtual environment was just the tool for the job.

Another new step was managing dependencies (other people’s code) via automation. Thanks to Two Scoops I learned that that the Python Package Index (pip) installer came with a built-in feature to manage dependencies. By simply typing “pip freeze > requirements.txt” the package installer will scan your current environment and write every python package you have installed to “requirements.txt.” Once your code is on your webserver you can install your dependencies in one go with  “pip install -r requirements.txt.”

This may be old news to pros, but for me it was a huge timesaver.

Development


After setting up a work environment I could actually start building things. This website was similar in concept to mine so I ended up being able to use the same project skeleton, but instead of a blog I wanted Mike to have a way to share MP3s of his playing so clients could hear what they were getting.

Uploading MP3s meant I had to venture into the world of file validation. A little bit of research led to the understanding that this could end up being a huge headache. How I landed on what I did could be a post in itself, but I settled on checking only the file header for its filetype declaration. Because it’s Mike’s website and he’s the only user who will have access to the admin page it’s unlikely he’ll falsify a file header to attack himself.

I also had to account for Mike needing to be able to edit all of his content through an admin page rather than hand-writing any HTML. Not knowing what the content was going to be during the development phase meant coming up with layouts that would react and adjust to content of different sizes. Because most web traffic is mobile, every page also needed to look good on pocket-sized screens.

To solve this issue I used a couple resources. Bootstrap’s navbar and grid system were perfect for the Home, About, and Contact pages. Bootstrap is a CSS framework that comes with pre-built classes to add to HTML elements to give them a consistent layout that changes based on screen size.

For the MP3 listening page, I used a spec that’s new to CSS3: the flexbox. The scope of what all a flexbox can hold/arrange is kind of amazing, and it was perfect for how I wanted Mike’s MP3s to display. The elements resize dynamically as screen size changes, and they rearrange to stack if the screen gets small enough that the title or publication date of each song won’t fit. I took a similar approach when I redesigned my blog.

 Design


During this project I realized I really need to improve my design chops. I’d spent a lot of time working on development and logic—not so much on design and aesthetics. This is still a weak area for me, but it’s something I’m working on.

My thought process for this design was only as deep as “Mike likes polaroids... Can I make a polaroid out of CSS?” Turns out, I can. As it also turns out, it doesn’t look bad. I recognize now that I’ve put myself through this process a few more times that this was mostly luck.

Designing ChamberlinSax.com also opened my eyes to a whole world of graphics and aesthetics that I’d taken for granted my whole life. I’ve spent an embarassing amount of time in the last couple months reading about typography and watching videos about graphic design. I have a whole new level of respect for every poster and brochure I see, and I find myself squinting at signs trying to identify the fonts they used and why.

“Client” Revision


When I thought I was done, I showed Mike what I’d been working on. He liked the website and was surprised. Mission accomplished. He also had a feature request.

In addition to being Mike, he’s also Dr. Chamberlin. Dr. Chamberlin is an international lecturer on bebop and the saxophone. He wanted a platform to self-publish portions of a book he’s working on along with embedded youtube clips.

Publishing a book clip is similar enough to publishing a blog that I was able to re-use most of the same data models. I just had to add a new field for Mike to upload youtube embed urls and the back-end I was good to go.

The front end needed some work. I started with preview “cards” that showed the youtube video along with the title and publication date of the entry. A colleague pointed out that when the user was taken to the page with the entry details, the youtube video was interrupted. Uh-oh.

Javascript and JQuery were already on my short list of things to learn about, and they were the perfect tools for this job. After some googling and a youtube tutorial I came up with this little function:

$('.blog .button').click(function(){
    $( '.blog' ).toggleClass( "expanded" );
    $( this ).text(function(i, text){
        return text === "Read More" ? "Read Less" : "Read More";
    })
});

 

That just adds a CSS class to the blog entry that expands it in place. Easy peasy.

Lessons Learned


The number one lesson I learned in this project is to involve the “client” more and earlier. As good as it felt to make something for someone else, I feel like I could have done better work if I’d involved Mike sooner. It would have been worth spoiling a farewell surprise to make something we were both happier with.

Lesson number two has to be that if I want to get into web development I need to learn more about design. I’ve really taken this one to heart. I’m a third of the way through a book on typography, and I’m looking for any excuse to do visual work. If you have a small project you think I can handle, let me know! I’d love to spend my hobby time making something that will be seen and used by other people.

Until next time, thanks for reading!