Frontend Goodies

Well folks, here it is. My first post ever on my new website. Pretty exciting stuff!

As an intro post, I thought it would make sense to talk a little bit about the architecture of this site.

Before selecting any platform or framework for a project, it’s important to think about what you’re building and what kind of control you’ll want and need. For a personal website, I wanted something with a beautiful design. Next, I knew I wanted a python backend to give me a chance to practice some python in my spare time. I wanted to use a reliable templating language. Next, I didn’t want to worry too much about scale, storage, or uptime. Lastly, I didn’t want to be too concerned with managing the environment and keeping dependencies up-to-date.

Fortunately, there are plenty of python-based templating languages out there from Django to Jinja2. At Google, I develop a lot with Django and have become well-versed in its limitations. Django is popular, no doubt, but after using it for a while I started questioning why it ever became so popular in the first place. I find myself often banging my head against the wall when trying to do some tasks that would otherwise be simple in pure Python (or any other programming language for that matter).

Jinja2 provides a lot of powerful and useful stuff for template designers — from classes and macros to expressions that veteran Python developers would be more familiar with. So, in the end, the template decision was easy and I went with Jinja2.

As far as my server and dev environment: Jinja2 is fairly easy to get up and running in a number of environments, so that didn’t really help me narrow down my options. I wanted control over my environment, but also didn't want to worry about things a frontend web developer shouldn't worry too much over for a personal website: maintaining and keeping dependencies up-to-date, scaling, db storage, etc. With plenty of cloud options out there, I ended up going with Google AppEngine (GAE) which I think strikes the right balance of features for what I needed.

GAE also allowed me to really hit the ground running and focus less on initial setup. For example, installing Jinja2 was as easy as one entry in an app.yaml file. Nice!

With the environment selected, I had knocked out a lot of concerns: GAE provides API’s for mostly everything: server storage, datastore, build and deploy, and scaling.

From there, I turned my attention to my website’s frontend. I knew I wanted to place an emphasis on design for my website. After all, it’s my digital public face to the world. That being said, I didn’t want to spend hours writing and rewriting boilerplate frontend code. I also didn’t necessarily care to write my own UI widgets from scratch; I just knew I needed them! Grids, alerts, buttons, form inputs, etc — that represents a ton of coding just for a simple website!

In some ways I felt like I should use it as an opportunity to write my own, but thinking about my goal for this website, it just didn’t make sense for me to focus my time and energy on buttons and form input styling, etc. I would much rather spend the time writing posts, sharing information, or building something really challenging and cool.

So, I started exploring frontend grids and went down a massive rabbit hole where I learned about a bunch of new things I had been missing out on! Frontend dependency management command line tools!? Lightweight frontend frameworks that give the developer control!? CSS preprocessors!?

I have to say, all of this new information was overwhelming, so for those of you just building a website, either for yourself or a client, and you want control but don’t want to reinvent the wheel over simple things, here are some tools that might be worth taking a look at:

SASS

Ok, I’m super late to this party. But it really is awesome. Mixins, variables, nesting, you got it. SASS allows you to write CSS like you want to write it. On its own, it won’t help with the common annoyances of writing CSS because it ultimately compiles to pure CSS. However, please read on, because there’s more!

Compass

Compass is SASS-based. From the compass website: “The compass core framework is a design-agnostic framework that provides common code that would otherwise be duplicated across other frameworks and extensions.”

This one is truly awesome. Why worry about CSS browser resets, cross-browser weirdness, and common styling patterns. You’ll be copy-pasting a lot anyway. So, just use Compass!

Bower

”Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json”

I’m already introducing you to a lot of tools. This is a tool to manage the tools for you (we must go deeper!). But seriously, it might be a bit overwhelming at first, but this one is really worth it because it allows you to be lazier (developers love that, don’t we?).

Gumby Framework and Claymate

Gumby is built on top of SASS and has some awesome stuff like a responsive grid, UI kit, and seemingly endless helpers for common frontend tasks (like toggles and switches on DOM elements). It is powerful yet flexible.

If you do end up using Gumby, they have a helper script, Claymate, that wraps all the other tools I’ve mentioned above into one.

Getting Started with Gumby

Skeptical still? I don’t blame you. But if you have a few seconds, you can start a Gumby project in just that amount of time and see it in action.

Once you have Claymate installed, it’s as easy as running: claymate install and voila! That generates a Gumby site for you with a ton of boilerplate frontend code auto-generated for you.

Claymate is pretty damn smart about dependency management too. You can define build rules in a gumby.json manifest file. It will handle minifying and compiling your JS into a single file.

Conclusion

It was pretty fun to learn about some of the awesome tools available to make frontend development less copy-paste and more about building cool stuff. Of course, just like any framework, Gumby isn’t right for every project, but I can imagine it being incredibly helpful for freelance developers who want flexibility and don’t want to reinvent the wheel. So far, Gumby has been fun to build with.

Now that I’ve made these discoveries, I can only imagine there’s so much more I’m missing out on. What are your favorite frontend frameworks and tools? I’d love to hear what people are using. Send me a tweet!

Hi there!

I'm a Frontend web developer on YouTube's Webmaster Team. I like building awesome and beautiful websites, like this one and this one.

I graduated from UCLA (Go Bruins!) with a degree in Political Science.

In my free time, I'm a Group fitness instructor at 24 Hour Fitness in the bay area.

You can find me @djreed or +dannyreed.

Danny Reed