Funkhaus

What is Funkhaus?

We are an agency of 20 people doing everything from website design/development to branding,  content marketing, newsletter marketing and social media management.

We view ourselves as demystifying the creative process, what we want to do is have a process driven approach to a design problem and try to work through it hand in hand with the client.

Being based in Los Angeles, we naturally did a lot of work around filmmakers, directors and visual effects artists. However, we’ve also grown from there, working with anyone who is trying to compete on high level design with a specific business case is a great client for Funkhaus .

We've also participated in direct-to-consumer brand projects for companies like Reebok and Adidas. We recently also won a Webby Award for a project we did for Adidas.

Which project did you want to talk about today?

We build 3 to 4 Nuxt websites a month, so we have hundreds to choose from, but Political Playlist is a really interesting one because it contains a lot of advanced features.

Political Playlist is an initiative of political activists that aims to draw attention to younger members of the US government.

They came to us with a question: “Can you build a website to generate a political playlist of candidates that people should care about, but that they might not necessarily be aware of?”

We worked through the whole business concept with them and really helped them on how to do that, what’s working and doesn’t work in that space and came up with the website that we designed and built for them.

The website asks you to select the political topics that you care about and your opinion about political subjects, in order to be able to create a playlist of candidates that speak to your interests.

It then creates a user account that syncs into our headless CMS, which then generates a monthly email that includes related news articles based on your selections.

The news articles are curated by the political playlist team. It then generates a list of five political candidates that match your interests and then a wild card, one that might be the opposite of your interests, just to give a different point of view.

Where it gets really interesting is the user doesn’t have to create a user account. They are never asked for a password. Our goal was to make the process fluid.

You sign up with your email address and we generate a token with it that essentially acts as your password. Then, you have the ability to edit your playlist from the email, which uses that token to authenticate your identity.

What was your scope for the project?

We took the whole thing from just an idea to refining it and coming up with a strategy on the product roadmap. Like, what is version one going to be? What is version two likely to be?

Then we went into a whole design process and that is really where the magic happens most of the time. The challenge in this political space was to define what should be the design language, especially when you’re asking people about their opinions and interests, you want to have an air of credibility and sophistication. It's important to balance that line between a tech “platform” and an editorial trustworthy thing.

After Design is approved, it’s time to build it. The way we build websites at Funkhaus is very interesting because we try to take a decentralized approach like a jigsaw puzzle. We break down the entire website into little components, specs each one out, and then we use Storybook to build those components in isolation. Once ready, we assemble them into a website like you would a jigsaw.

Finally we built all the CMS integrations, and used SendGrid for the email part, and that's how we tackled it technically.

How did you discover Nuxt?

At the time our customers really wanted to be able to animate page transitions and that required us to pick a JavaScript framework.

We chose Vue because I'm a big believer in the open source world and also I had used Ember and felt it was confusing. Angular was going through a massive rewrite and I always had some real philosophical problems with Facebook. So we chose Vue.

We then built a Vue layer on top of WordPress that wasn’t optimal but worked. We continued building websites that way, but it didn't scale very well, and wasn’t great for SEO.

Learning from those projects led us to Nuxt. We had to figure out how to do server side rendering, but we wanted to be able to have the front-end experience with the benefits of high quality animation. So, we looked at what the Vue ecosystem had, and found Nuxt was exactly what we were looking for.

What did you think about Nuxt?

The first thing that really stands out is the opinionated file-based routing, which we quickly got used to, it was awesome.

It is an integral piece of a Vue building app. Dealing with the router and everything else is always really difficult on single page Vue apps. The way Nuxt abstracts itself into a directory structure, I mean, when you see that you think to yourself “that's magic”.

That was awesome. It was a big stand out coming across it. Then the way you don't have to manually connect a bunch of things. For example, you don’t have to connect up VueX. You just create a file and it works.

Are you mostly using dynamic or static rendering?

I’d say that 90% of websites we build now are static site generated.

The Political Playlists website we created a few years ago is server side rendered but that was before Nuxt had the crawler. This static generation crawling feature changed the game for us.

At that point, we went all static generated as much as we could. The only exception is for very big websites with thousands of dynamic routes. The build time becomes a problem.

What is your favorite Nuxt feature?

The thing that I love most about Nuxt 2 is definitely the convention over configuration approach. A more specific answer would be the file-based routing feature, which is more or less an extension of an opinionated solution. However, the directory routing makes it so easy to build out websites.

I'm most excited about Nuxt 3 Incremental Static Generation. Having the advantage of a static generated website and not worrying about giant build times. I'm really excited about that.

My second favorite thing about Nuxt 3 is Vue 3 support. More specifically, the teleport feature. It solves one of the biggest problems we deal with: Having to fetch some data on a page, but make it appear in another part of the site, like breadcrumbs in the header, for example.

This feature is really going to be a game changer for us as an agency in terms of design and being able to animate components across page routes. The work Anthony Fu has been doing with Starport is very exciting for us. Teleport and Starport are going to allow us to have a component on the home page and then animate it through to a detail page, creating a native-like experience on the web.

I was so hyped to see Daniel Roe ’s work on getting Nuxt 3 working with Ionic. That’s going to be really useful for us.

Would you recommend Nuxt?

Yes, of course! I think it's great. We wouldn’t be as successful as we have been without it.

For me, Vue is a great component framework but Nuxt is the website framework. If you're trying to build a website, Nuxt is the best way to do it.