Kalamuna's Senior Architect Derek "Hawkeye" DeRaps dives into cutting edge styleguide and prototyping frameworks and how to plug them into Drupal. Plus, dancing and Pagan rituals!
Mentioned in this episode:
Technology:
- DrupalCamp
- BADCamp
- Kalamuna
- KSS-node
- Pattern Lab
- Fractal
- Manakin
- Kalastatic
- Metalsmith
- twig.js
- Kalacomponents
- Vagrant
- Kalagraphs
- Kalaponents
People:
- Rob Loach
- Thiago de Mello Bueno
- Lee Walker
Events:
- Samhain (pronounced Sowan)
Episode Guests
Derek DeRaps
The Masters of the Internet hath decreed that a champion web weaver must lead the progression of technology and science, and Kalamuna has followed suit by offering two-wheeling Derek DeRaps to the fast-paced arena of ever-changing requirements and challenges.
Mentioned in this Episode
Transcript
Transcript
- Chris:
- Today we're going behind the screens with Derek DeRaps. Derek, we're here in Atlanta for DrupalCamp Atlanta. How's your camp going so far?
- Hawkeye:
- Oh, it's really great. Thank you so much for taking some time to chat.
- Chris:
- I don't believe we had met before this weekend, but I noticed on your name tag you were going by a different name, so introduce yourself a little bit to us.
- Hawkeye:
- Yeah, sure. So I go by ... I've been known as Derek DeRaps. You know, GitHub, Derek DeRaps, drupal.org, Derek DeRaps. So I mean, so now I'm going by Hawkeye, last name Tenderwolf. Outside of work, outside of Drupal, people have been calling me Hawkeye for years. And I accidentally introduced myself as Hawkeye at BADCamp two weeks ago, and all my coworkers looked at me like, "Who?" And so they demanded to know the story, and I told them, and so they're like, "Well, you need to go by Hawkeye." So I started introducing myself as that, and now everyone's just confused, and I am too, and so we'll see. It's all good. Yeah.
- Chris:
- Sounds like fun.
- Hawkeye:
- Yeah, it is. It's good. Yeah.
- Chris:
- Very cool. So who are your coworkers? Where are you working these days?
- Hawkeye:
- Oh, yeah. I work at Kalamuna, which is an agency in Oakland, and we have 12 full-time employees and some other folks that help out on various things like HR and accounting and things like that. It's a small, intimate band of very passionate people, and it's a lot of fun. Really great people. So glad that I get to work with them. Yeah.
- Chris:
- And what is it that you do there?
- Hawkeye:
- I chose for myself the title of Senior Architect.
- Chris:
- That's nice.
- Hawkeye:
- Which is a very, very outrageous sounding term, which basically just means I'm a back-end developer, and I try to get other developers to do my work for me. So I like to sort of set the stage for taking the hand off of the requirements and everything, and then, as my coworker will agree, I kind of try to push things off on them to actually implement. I do a fair bit of implementation myself.
- Chris:
- Yeah. So you came out to the camp here to give a presentation. In the presentation you were talking about, and this is what you've been working on at Kalamuna, developing these pipelines or making it easier to get the ... I guess I should say pipelines not in terms of revenue, but in terms of content flow through the website.
- Hawkeye:
- Yup.
- Chris:
- So tell me a little bit about how you've been working with that and some of the modules that have come up out of that.
- Hawkeye:
- Yeah, sure. So there's a whole large, wonderful ecosystem of things that are out there. How deep to go? Okay. So I'll throw a few terms out there for creating a style guide and/or prototype. Your options are KSS-node, Fractal, Pattern Lab, or Manakin. Manakin's the newest thing on the scene. It's made by Last Call Media, and it looks really hot and sharp. And we, my colleague and I at Kalamuna, are kind of checking it out and seeing if we will replace our KSS-node style guide portion of our pipeline or workflow with Manakin. We made a tool called Kalastatic that uses Metalsmith to generate a static prototype, and KSS-node to generate the style guide, and uses twig.js to render the Twig templates. Which is really cool, but we are thinking about switching to something that uses PHP Twig to just ease some of the discrepancies between what Drupal uses for Twig and the js version of it.
- So anyways, that all sounded really technical, but just to say that on the front-end side, there's a lot going on. On the more back-end side what I'd like to plug is UI Patterns module. It's something that's been on the scene for ... I don't know, I think I probably first heard about it a year ago. And it was just on my list, "Yeah, okay. It sounds relevant, but we've already got it. We've already solved that and we don't want to ..." Anyways, I didn't have a good reason for not looking into it. And then finally, about a month ago or a couple weeks ago, looked into it, and it's fantastic. I mean, we're totally gonna be pulling that into our workflow. So I don't know ... We haven't actually used it on a client project yet, but I'm evangelizing it anyways, 'cause I always do that with the stuff I'm excited about.
- So yeah, it's a great tool for helping you suck your components, if you're using component-based design, sucking your atomic structure and whatever, for sucking those into and making them available in Drupal.
- Chris:
- I'm a back-end developer, so I know a few things about the front-end world, so this is why I like doing these interviews. I'm learning about a lot of these new technologies and these buzzwords that are coming out. I'm trying to keep in the back of my head.
- Hawkeye:
- Yeah, right.
- Chris:
- So all of this put together would be a way to sort of create your layouts, create your designs, and plug all that into Drupal so that you get more of a ... I guess, the pieces that are gonna be put out to the front-end are individually style-able, but they're modular enough to be ... They're not all tied into one style sheet. Am I kind of thinking of that the right way, or?
- Hawkeye:
- Absolutely. So there's a whole bunch of benefits and reasons to do this. So starting early stages in the project, the most important reason to do it is for rapid prototyping and iterating on getting client feedback, getting user feedback, and being able to pivot quickly and iterate cheaply, rather than building something in Drupal, getting feedback, and then having to sort of delete a content type and make a different ... You know, it's a lot harder to change things once they've been Drupal-ified, or whatever you want to call it.
- Chris:
- Sure, yeah. I know exactly what you mean.
- Hawkeye:
- The other benefit is re-usability. So it's not something we've taken advantage of a whole bunch across sites, but we're starting to. We've created a repository ... I don't know, I forget what it's called. Kalacomponents, or something like that. It's basically a repository in both senses of emersion control, but also a repository as in a holding place for these reusable components. I mean, every site we build has a hero. Every site has a slider. No, I'm just kidding. We don't use carousels. Every site has a call to action, or we call them [touts 00:06:33]. You know, there's all these different names.
- Chris:
- Sure.
- Hawkeye:
- And so the idea is that we can have like a starting set of components, kind of like you get with Bootstrap, but ... 'Cause we use Bootstrap 4 now, but of course, then we build our own components on top of that, and so we want to be able to reuse those across sites. And yeah, and they each come with their own CSS or SASS, and they can come with their own JavaScripts attached to it, so there's all kinds of benefits.
- So here's the really cool thing. If you make a modification to one of those components, and it reflects instantly in your style guides and in your prototypes, and it also changes instantly in Drupal. That's the sort of ... Like the golden unicorn we've been chasing, because we like to be able to have our front-end developers work mostly, primarily in the style guide only. We've got a little node server that starts up and compiles everything, minifies everything, and boom, serves your site without involving any Drupal at all. So the front-end team can just work in that area, and work with confidence that when they push those changes up, it's gonna make the exact same changes in Drupal. And of course we need testing for that too, but it just eliminates a lot of the overhead, so our front-end team doesn't need to have ... Like back in the days when we were using Vagrant, virtual machines and stuff like that, it's a lot harder to get a Drupal site up and running than it is a little node server serving some static HTML. So, yeah.
- Chris:
- Wow. That sounds like, yeah, like the golden unicorn [crosstalk 00:08:11].
- Hawkeye:
- It is, it really is. Yeah.
- Chris:
- And that's ... I love the passion in that, like just getting on the edge and driving towards it, trying to figure it out and invent as you go. That's really what makes all this, and it's so ... It's kind of infectious when you get into a community like this or a camp where everyone's got that drive to make it happen. So for somebody who's listening to this and thinking like, "This sounds awesome. I want to be a part of it," could you provide some advice as to what would be a good place to start? Either just to read up on some of these terms, or to start getting into the code.
- Hawkeye:
- Watch my presentation from DrupalCamp Atlanta that was recorded.
- Chris:
- There you go.
- Hawkeye:
- Not a bad place to start. It's fairly broad, fairly high level. And I also, the last thing that we were talking about, may remember, that this is definitely stuff that when I came to Kalamuna almost two years ago now, they had ... So Rob Loach, Thiago de Mello Bueno ... Actually, sorry, Thiago. I don't know how to say your last name. De Mello Bueno ... And Josh Walker and some people I'm forgetting all worked really, really hard on building Kalastatic and the tool chains that they were like ... They had laid a really good groundwork for this good front-end workflow.
- So to get started, I would say start learning about component-based design. Read up on it, convince yourself that it's ... Look up atomic design structure and just pick something. You know, Manakin's really, really cool. I would say definitely check out Manakin, but Pattern Lab is also really easy to get started with. KSS-node, not so much, unless you're like a front-end developer and you really sort of already know about it. But it's a really great tool, it's what we use right now.
- But yeah, just pick something, try it out, build your components, build a style guide, and just see if that works for you. And then start playing with UI Patterns, so you can suck them into Drupal. I need a better word than suck them into Drupal. We need to ... Yeah, so start playing with building Paragraphs and getting these two areas to talk to each other so they're both working off the same templates, the same Twig templates and styles.
- And there's a lot of different ways to do it, and I'm working on some stuff that will lay on top of Paragraphs and UI Patterns. Something that I'm calling Kalagraphs, and the 7X version of it was called Kalaponents, and I accidentally changed the name. Didn't really mean to, but anyways, so yeah. It's called Kalagraphs and it has a 1X release right now. It's very opinionated in terms of how it uses Paragraphs and how it talks to the templates, so it's not super usable by just anyone in the community who isn't also using like, say, Kalastatic.
- And so it's very custom to our workflow on the sites that we've been building of it, but the goal is to sort of make that more community friendly and more generic with more sort of configurable settings so it's not so tightly coupled with Kalastatic and the ways that we specifically build websites. The idea is to just make it even simpler, to go ahead ... And some of this might actually get, hopefully one day contributed back into Paragraphs or UI Patterns or whatever it is, but for right now it's kind of experimental, looking at different ways to just improve ...
- I mean, the editorial experience is the big pain point with this. I mean, we've got the other parts working, right? We have a good workflow for our front-end team to create ... I mean, it's not perfect, but ... To create the templates and to work on and build them, to create the style guide, they suck into Drupal. It's cool. But the editorial experience on the other side of using Paragraphs to control layout and when you start having nested Paragraphs three and four layers deep, the editorial experience, we've got a lot of good feedback on how that's just not ideal. So we'll be putting some things in the Kalagraphs to help improve that and back forward that to some of our clients that are currently using it, and then also to make things better moving forward for new projects.
- Chris:
- That's really exciting. This whole layouts hurdle that we've been going through with Drupal 8, it's been a pain from a back-end standpoint, and also from a front-end standpoint trying to piece all that together. I really like the way this is going though.
- Hawkeye:
- Yeah. It's exciting.
- Chris:
- Yeah. So the code and the work aside, what do you like to do when you're not working on Drupal? What would you do tomorrow if you woke up and the internet was just gone?
- Hawkeye:
- Oh, my gosh. I would dance, first of all. I would just fucking ... Freaking, sorry. Can you edit that? I don't know what rating this podcast has.
- Chris:
- Well, it just went up.
- Hawkeye:
- Awesome. Yes, I would dance, 'cause I have been a Neo-Luddite before in the past life. I didn't have a cell phone for about two years, and I'm not talking like 10 years ago, I'm talking about like I just got a cellphone maybe like two years ago, a year ago.
- Chris:
- Oh, wow.
- Hawkeye:
- It's a fairly recent thing. And yeah, I totally rejected technology for everything except for work, except for building websites, and I worked outside the home. You know, I went to a coworking space. I had no internet at home. I read books and listened to my AM/FM radio.
- Chris:
- Oh, wow.
- Hawkeye:
- And maybe watched movie ... No, I didn't even really do that too much. And so yeah, so that was a phase. That was a thing. Made it through that. And you know, I've kind of reentered the world a little bit cautiously, and so I'm definitely very cautious with technology.
- Anyways, that wasn't what you asked me. What would I do tomorrow? Well, let's talk about what I am doing tomorrow. I'm going to a Pagan festival. I'm leaving this conferences early and I'm going to Samhain. It's a Pagan festival that celebrates the people in your life that have died over the past year. I don't know that much about Paganism, but my girlfriend has been part of the community for a while and so she's bringing me. And I've a picture of my grandma to bring with me. She passed away last year, and that was a really wonderful, beautiful, and powerful thing to be with her during that. And so yeah, I'm looking forward to being with a small gathering of good people, I think maybe around a fire or alter or something, and talking about loved ones and praying, incantations and things like that.
- Chris:
- Wow. That is definitely the most unique answer I've had to this question so far. I love that about, everyone has such a different ... And this is one thing you don't get unless you actually sit down and hang out with the people in the community, is everyone's got a personality outside of the code that you don't realize. And there are common bonds beyond just the code, it sounds like. That is really amazing. I would love to hear about how that goes and, obviously after you've been there, how that all came about. It sounds really interesting and powerful.
- Hawkeye:
- Thank you, Chris, for doing what you're doing. Because it's true, it's so great to get to know people on another level, and to make time for that is so important.
- Chris:
- Yeah.
- Hawkeye:
- Yeah.
- Chris:
- So that being said, I always end the interviews with a little bit of thanks of gratitude. So we've all done some amazing things in the community now, and we've had a little push every now and then to get us where we're going. Is there anybody you can think of that you'd want to say thank you to who, maybe when you needed it, gave you a little push? Or could be an interesting blog post or session that you saw that really inspired you. Anything like that?
- Hawkeye:
- Yeah. I guess somebody that is personally meaningful to me right now is ... So, Lee Walker is kind of like the sort of heart of the community in Chattanooga, and I just moved to Chattanooga two years ago ... I mean, two months ago. So yeah, I'm just real appreciative of the enthusiasm and energy that he brings to that community, and really keeps things going there. More than just keeps them going, like it's a really fun, vibrant community to be part of there. It's small. You know, Chattanooga's not a huge town. But I just, I really feel apart of that community. It feels like a good home, and it's fun. We have fun. So I'm real grateful for that. Yeah.
- Chris:
- Thank you very much.
- Hawkeye:
- Me too.
- Chris:
- I know Pattern Labs. That's the one I always go to. I don't know what you would call the entire ecosystem, though.
- Hawkeye:
- It's a good question. We need an initiative name for that.
- Chris:
- Yeah, really.
- Hawkeye:
- [crosstalk 00:17:04] initiative, yeah.
- Chris:
- So it's exciting to see where that's going, and thanks for taking a few minutes to sit down.
- Hawkeye:
- Great, thank you so much, Chris. It's been a real pleasure.