Intermediate Twig: Logic, Macros & More

Lea Alcantara: Today’s episode is sponsored by Visual Chefs, a versatile web development agency with expertise in content management system and custom web application development. In partnerships with designers, agencies and organizations, Visual Chefs propels the web forward. Visit visualchefs.com to learn more.

[Music ends]

Emily Lewis: Before we get to today’s episode, Lea and I wanted to take a quick moment to thank our listeners who have been so incredibly kind and generous to donate to the show. We added a donate option to ctrlclickcast.com earlier this year, but I didn’t really expect anyone would actually donate. [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: So it was an incredible surprise to get our first donations recently.

Lea Alcantara: Yehey!

Emily Lewis: So thank you wonderful listeners. We appreciate all of your support and your donations go directly to keeping the show going. Now, back to today’s episode, in which we’re going to talk about Twig logic, macros and more. Twig is, of course, the templating language for one of our favorite CMSs, Craft, and here to give us an intermediate level lesson is Andrew Welch. Andrew has been in the tech business since the ripe old age of 14 when he started designing typefaces for dot-matrix printers and later taught himself programming. He’s run a successful software company for the past 20 years and now does consulting work to help businesses use technology more effectively through apps, web design and social media. Welcome to the show, Andrew.

Andrew Welch: Thank you. It’s good to be here. I appreciate you guys having me.

Lea Alcantara: So Andrew, can you tell our listeners a bit more about yourself?

Andrew Welch: Sure, I live in Upstate New York. I went to college for photojournalism and I’ve done absolutely zero with that degree.

Emily Lewis: [Laughs]

Andrew Welch: And as you said in the intro, I’ve been in the tech business for quite some time. I have a wife, two kids, two dogs and one cat that feels very outnumbered.

Lea Alcantara: Oh.

Andrew Welch: [Laughs]

Lea Alcantara: Busy, busy household.

Andrew Welch: Yeah, I can’t believe that it’s actually quiet. It’s pretty amazing.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: So if you started messing around with tech when you were younger, why did you go towards photojournalism, just out of curiosity, when you were in college?

Andrew Welch: Oh, really two reasons. One, I was probably kind of arrogant back then. I thought they didn’t have anything they could teach me.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Andrew Welch: And another is that I kind of wanted to be a little bit more rounded as a person.

Lea Alcantara: [Agrees]

Andrew Welch: And I thought that doing something that interested me and was a little bit created might be good for me, and I really enjoyed doing it.

Emily Lewis: And you are consulting business now, like what kind of clients do you get a chance to work with?

Andrew Welch: We have all sorts of interesting clients. From local clients, I’ve got a friend of mine that runs a very successful high-end business that we have helped him make his business run a whole lot smoother by using technology to even a poker training website that what they do is they teach people how to play poker.

Emily Lewis: Oh.

Andrew Welch: My client is actually at the World Series [of Poker] right now. He’s in the middle of playing the world’s biggest tournament at the moment.

Emily Lewis: Oh wow.

Lea Alcantara: Oh, exciting.

Emily Lewis: So let’s take a turn and talk about Twig. When did you first learn it? Was it something you were just experimenting with or did you have a project that specifically required Twig?

Andrew Welch: So, it was probably mid-2014, and I had heard a lot of the buzz about Craft CMS and decided to take a look at it. It wasn’t really a matter of choosing Twit, but it was more a matter of just looking into Craft and seeing what that was all about, and I got a site configured an install. It’s a charity project that I was doing for a local Chinese school, and the programmer in me was incredibly happy. I have been suffering with ExpressionEngine that I used for some sites previously.

Lea Alcantara: [Agrees]

Andrew Welch: And as a programmer I found that incredibly frustrating. In fact, a lot of the time I just gave up and wrote stuff in PHP.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Andrew Welch: Because there were so many gotchas and parsing order issues and just things that randomly didn’t work.

Emily Lewis: [Agrees]

Andrew Welch: It was just very frustrating for me. So Craft using Twig was kind of a breath of fresh air for me because it actually kind of – the best way to describe it is that it gets out of my way and just lets me do what I want to do, you know? [Laughs]

Emily Lewis: Right.

Andrew Welch: Which one of the most frustrating things for me is working on a project when the tool I’m using is hampering me doing what I want to do. So that’s how I actually begun using it, and I kind of dove in head first on it.

Lea Alcantara: So Twig is kind of a pseudo language that translates stuff from PHP. Because you said you’re a programmer, what appeals to you about that versus just going straight into the main language it’s parsing?

Andrew Welch: Yeah. So what Twig does is it’s a totally different language, but it translates into PHP, right?

Lea Alcantara: Yes.

Andrew Welch: Yes, I could do the entire site in PHP, but it’s kind of like why you don’t go build your bicycle, you know?

Emily Lewis: Right. [Laughs]

Lea Alcantara: Right, right, right.

Andrew Welch: Because there are a lot of really good bikes out there, you can buy one and you can customize it yourself, and ultimately, any project is about doing something effective for your client.

Lea Alcantara: Right.

Andrew Welch: I can’t bill someone a ridiculous number of hours to build them a custom website when their budget just doesn’t allow for that. So that’s really why you would use something like this.

Lea Alcantara: And is your experience with Twig mostly or always tied with Craft?

Andrew Welch: Yeah, I have only really used it with Craft. Twig actually comes from the same developer that made Symfony and Symfony is a PHP framework.

Lea Alcantara: Right.

Andrew Welch: Twig is used in a number of other places. It’s used in a number of small CMSs that you may or may not have heard of like Bolt is one of them and there are a few others.

Emily Lewis: Yeah, I’ve heard of that a couple of times.

Andrew Welch: And it’s becoming pretty popular for exactly the reason that we just discussed is that it has a reasonable amount of power without being incredibly difficult to learn.

Lea Alcantara: [Agrees]

Andrew Welch: So it kind of hits a nice sweet spot.

Emily Lewis: How much have you had a chance to use the Craft CMS? You mentioned the charity project. How may project have you had a chance to work on since then?

Andrew Welch: I’ve probably done about five projects using Craft with varying degrees of complexity.

Emily Lewis: [Agrees]

Andrew Welch: A recent one that I just did, I got to stop doing these free projects, but it’s… [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Andrew Welch: It’s a free project, well, for now, it’s free, that I did for myself, and there was actually a pretty heavy amount of Twig code that went into that project.

Emily Lewis: How often do you find yourself having to, I guess, customize the underlying Twig when you’re working with Craft? Is it really just the complexity of the site that dictates that for you?

Andrew Welch: Yeah, so most of what I found is that, and there are a couple like I wrote a couple of Twig filters for a project that I was working on that I needed some very boring functionality for path manipulation for it, but for the most part, I think that Twig out of the box does pretty much what you needed to do for all the basic website functionality and it’s certainly much, much more functional than the “language” that ExpressionEngine uses.

There is a pretty healthy community of developers that have made a whole lot of free plugins as well. There is a whole boatload of free plugins for Twig as well as for Craft that really do a lot of really cool stuff. Just as an example, so one of the recent projects that I have relies pretty heavily on social media. People will post something to the website, and on our Facebook, Twitter, Google Plus and LinkedIn pages, we want that to also be posted there. So I wrote a plugin for that site that uses a service called Buffer.

Lea Alcantara: Right, right, yeah.

Andrew Welch: So whenever a new entry is posted, it automatically gets put in the queue and it goes right up on the social media accounts. So I mean, that’s kind of an example of functionality that you would want to extend in it.

Emily Lewis: [Agrees]

Andrew Welch: Obviously, it never going to be built into the language itself to do that, but it’s pretty easy to do plugins like that for Craft.

Emily Lewis: Forgive my ignorance, because Lea is the Craft developer on her team, so why would you not have that be part of the core of Craft? Is it because it would rely on APIs that are too variable? Like LinkedIn, I imagine it changes its API at least, what, once a year or something like that.

Andrew Welch: Yeah, and it requires specific services too, like it requires buffer, and really a good CMS is really good at what it does, which is being a content management system and with other things layered on top of that, so you’ve got Craft which has layered on top of it, it has Twig, and then they allow for plugins to do functionality that are going to be specific to every site, and if you end up including the kitchen sink in a project like that, first of all, it becomes unmanageable.

Emily Lewis: Right. [Laughs]

Andrew Welch: But second of all, it takes it away from being really good at what it should be really good at, which is being a content management system. So they’re doing it the right way in that they’re making it very extensible so that people who want to do the type of thing that I want to do, I can.

Lea Alcantara: So when you first started diving into Craft, what were the resources back then and what are the resources now that you look toward to get more familiar with Twig?

Andrew Welch: So for Twig itself, I went to the SensioLabs. They’re the people that make Twig, and they’ve got a nice reference there, and thankfully Twig is an easy enough language that it’s really not that hard to pick up. Now, I realize that I’m coming at it from a little bit different angle than a lot of people might be in that I’m more of a programmer.

If you’re coming at it and you’re a designer and maybe you’ve done a little bit of scripting here or there, I mean, they’ll take you a little bit to pick it up, but it really isn’t that bad, and the nice thing about it is that you can use it for very basic things, but it’s there waiting for you when you want to do something more complicated.

Timestamp: 00:10:10

Lea Alcantara: I have to say that when I first started picking up Craft and you sent this link to us too, Brandon Kelly’s little Gists on GitHub.

Andrew Welch: Right, right.

Lea Alcantara: That kind of translated just the ideas of ExpressionEngine.

Andrew Welch: Right.

Lea Alcantara: Which they’re just universal ideas, like what are comments, what are conditionals, what are loops, but sometimes you need to define these terms first and foremost because what one thing means in a CMS might mean something else in another and just trying to figure out like how does that translate a thought, that particular resource as a very, very beginner, non-programmer front-end developer person, that translation was I thought really, really useful.

Andrew Welch: Yeah, and if you’re coming from ExpressionEngine, then it’s really helpful, and if you’re coming from something else, then it probably doesn’t help you at all. [Laughs]

Lea Alcantara: It might not be. [Laughs]

Andrew Welch: It probably isn’t that useful at all.

Emily Lewis: Am I correct, isn’t there a really active [Craft] Slack? In fact, that’s where you and Lea first connected about Twig.

Andrew Welch: Yeah, Slack is pretty awesome.

Lea Alcantara: Yeah. [Laughs]

Andrew Welch: For you who hadn’t seen it, it’s basically an online chat. Slack is great as a resource, and that the awesome thing about it is that you can connect directly to the guys that wrote Craft, right?

Lea Alcantara: Yes.

Andrew Welch: I mean, Brandon Kelly is in there. A bunch of guys are in there.

Lea Alcantara: Brad, yeah.

Andrew Welch: Yeah, Brad, yeah, he’s always there, and not just the developer or not just the people who made Craft, but there are also a number of other developers that do various things. You may have very good designers and you may have people that are writing plugins that are all pretty helpful in terms of when you’ve got a question. So a lot of times if I have a question about something, I’ll dump it in there and if I’m idle, I’ll see if there are any questions for me to answer in there. I think, yeah, that’s how Lea and I met. She had that question and I said, “All right, let’s see if I can answer this.”

Lea Alcantara: Yeah, I would have to say double down on that Craft Slack channel. It’s pretty amazing because everyone is really enthusiastic to help and it doesn’t matter whether your question is basic, like even if you’ve got a simple question, people are willing to give you suggestion, and even if it doesn’t even have anything to do with Craft or Twig, like I had an .htaccess question and someone was like, “Here you go, this is the answer.” [Laughs]

Emily Lewis: Excellent, so let’s go ahead and get a little more focused about some Craft specifics, some intermediate Twig stuff. So Andrew, can you tell us what are some of the Craft-specific Twig functions that developers need to be aware of to take advantage, to make the most of what they’re building?

Andrew Welch: Twig itself is pretty deep in that you can use it just to do simple for loops, and it also has some pretty good array functionality and more complicated stuff. There about a dozen or so functions that’s specific to Craft. I think probably some of the most useful ones are the localization ones. Now, if you’re never working on a site that requires localization, obviously, it’s not really going to matter to you, but they have extended Twig to have currency, number and time functions that are all localized, and I’ve worked on a couple of sites that actually required that and they also have translation functions built into it. So if you ever find where you’re actually hard coating some texts into your Twig templating, you just put | t for translate and it will automatically look into a translation file to see what the translation is in whatever language the user happens to be using, which if you’re working on an international site, that is a pretty damn cool.

Lea Alcantara: Wow, just the | t there, it just automatically guesses…

Andrew Welch: No, no, you have to manually put the translations in, and it’s basically just the file that has a list of key value pairs.

Lea Alcantara: Oh okay.

Andrew Welch: Like hello is hola, you know?

Lea Alcantara: Yes.

Andrew Welch: Where hello is, for Chinese, ni hao or whatever.

Lea Alcantara: Right.

Andrew Welch: But that’s really useful if you’re doing localization stuff. Even if you’re not doing localization, they did extend. They’ve got a number of additional filters that have to do with arrays. For instance, you can group together things based on key which is really useful. There is an index of and there are a few other kind of pretty useful things that, to me, what it looks like is they were working on Craft and Craft is built on a PHP layer called Yii, okay?

Lea Alcantara: Yeah.

Andrew Welch: And then built on top of that is Twig, and I think they were working on Craft and as they were doing it, they’re like, “Wow, you know, it will be really useful if we have this.” So they added it. [Laughs]

Emily Lewis: Right, right.

Andrew Welch: And they ate their own dog food when they were building their own site with their own tools, so as they were building their site, they were like, “Oh, you know, we really could use the ability to do this.” So there is a smorgasbord of additional filters that they added probably during that exact development process.

Emily Lewis: So Andrew, can you talk a little bit more about these filters because you’re saying this is just a way to like group output. Is that correct?

Andrew Welch: For the translation?

Emily Lewis: Or for anything, I mean, I guess the filters, are they only relevant for localization or would it be relevant for any type of content?

Andrew Welch: They could potentially be relevant for any type of content. The way filters work in Craft is that think of them as a pipeline, so you’ll have a statement or an expression and then a pipe and then a filter, and the text that goes down through there goes through that filter. So if you put {% "Hello" | t %} for translate…

Emily Lewis: Oh, I see, okay.

Andrew Welch: The “Hello” text is piped. It goes down where you read it from left to right and it flows down through the translation, and you can chain together any number of filters that you want. So you could do some variable pipe replace, and then you could do a search and replace on it and then pipe that to the translation and you could do it for an infinite number of things. So filters in general can be used absolutely anywhere. The translation-specific ones, yeah, I mean, you probably would just use them when you’re localizing something, but it works pretty nicely.

Emily Lewis: And you were about to mention one of the filters you like is the kebab filter?

Andrew Welch: Right, right. I like the kebab filter just because I like the name. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Andrew Welch: That name is kind of cool, and I love kebabs too. But basically, all that does is it translates coded text into kind of like what you see in the URLs for pages where everything is lower case, but there are dashes where there are spaces.

Emily Lewis: Right.

Andrew Welch: Honestly, I like it because of the name and I love kebabs, but other than that… [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: Yeah, filters can be used for a various number of things of just applying something to texts, if you’re just going to like strip it down to its bare minimum. So Emily, like for example, if you want to strip HTML tags, that’s one of the most basic common filters when you have an excerpt and you just want to make sure that that excerpt doesn’t have like paragraph tags around it, then you would just do like pipe strip tags around content and then it’s going to just take out all the HTML, and that’s a sample of the filter.

Or if you’ve got multiple pieces of content that you’re stringing together into loop, you can actually like join these pieces of texts together if you wanted to, or you can merge certain things. So there are just like so many things you could do with filters. I think that’s one of the most powerful things about Craft for me.

Andrew Welch: Yeah, I would just say some example. I’m looking at some code that I did and it takes the name from a Matrix block and then I piped it to the raw filter, which says, “Give me just the raw data from this, no translation.” Then it pipes it to a Twig filter called Hacksaw, which is basically an excerpt filter, and then it pipes it to the escape filter which escape encodes it for JavaScript. So it’s kind of like this chain of things. You can think of it as a conveyor belt. It starts here and then as it moves to each filter, something is done to it and then at the end, it’s output.

Emily Lewis: Excellent. So aside from the filters that you mentioned and specifically that the localization filter and other localization features that come in it, are there any other Twig functionality that developers should definitely look deeper into?

Andrew Welch: There’s plenty of really, really cool Twig functionality. I think Macros can be really cool. Macros basically are shortcuts. So let’s say there are things that you find yourself typing repeatedly when you’re coding something or you notice in your code that there is something that is being repeated often, that’s a perfect case for writing a macro for it. So as an example, one of the sites that I wrote deals with currency, and it can be in any number of different denominations, so I wrote a little macro that it looks at the currency that the listing is in versus the currency that the user has said, “This is my currency,” and if they’re different, it uses the popover functionality of Bootstrap so that if you mouse over it, it does a real-time translation of that currency. So a €1,000 might be listed there and if you mouse over it and your currency is in US dollars, it will show the currency in US dollars.

Timestamp: 00:19:45

It uses a plugin called Currency that goes out and grabs the latest currency conversions and it does all that. The expression is probably three lines long that does it, and I don’t need to see that everywhere in my code, so what I do is I wrote a macro which is essentially a function called currency tooltip and I just pass it in the number and the person’s currency. It figures out whether the currency is different and if it is different, it spits out the HTML needed to create the popover, and then in my actual code, all I put in there is macro.currencytooltip and that’s it. I don’t have to see it. Otherwise, these three lines of code would be repeated anywhere and it will be really, really hard to edit, and that’s really when you use macros is when you see something that’s being used over and over again and you want to simplify the code that you’re looking at.

Emily Lewis: So you described it as sort of currency popover. Are there any other examples you could give sort of real world of where a macro might, I mean, obviously, when you’re streamlining your code so you don’t repeat yourself as much, but maybe some real-world examples?

Andrew Welch: Yeah, so another real-world example, for instance, might be a form field. In your form field, you might be having a number of specific classes in them and it will be really convenient if you could just say something like, “macro field = text input,” and maybe pass in a name.

Emily Lewis: Right.

Andrew Welch: And then it would spit out the HTML for generating that specific thing, and the other nice thing about it is, and I’m sure you’ve both done this and I’ve done this where you’ve got a huge entry form and then a designer or someone else comes back and says, “Oh no, I really would like it to look like this,” and you have to go back and you have to edit every single field to change the class or to change some specific thing about it. If you put the bottleneck in a macro, you change it in one place and it is updated everywhere.

So it kind of spares you from doing that manual or search and replacing on it, but really that’s another real-world example of it, but it’s anywhere that you find yourself doing something repetitively, and also I use it for code readability issues. So I want to be able to look at something and have it be nice and clean and I can understand what’s going on. If you’ve got a ridiculous number of classes or really convoluted logic in the HTML, it’s really kind of nice to separate that away into a macro so that it’s actually readable, because I think one of your recent guests said this and it’s definitely true, the person who is most likely to be going back and reading your code is you, right? [Laughs]

Emily Lewis: Right, exactly. [Laughs]

Lea Alcantara: Yeah, right.

Andrew Welch: So don’t make your life difficult for yourself, you know?

Emily Lewis: So Lea, to put you on the spot, sorry.

Lea Alcantara: [Laughs]

Emily Lewis: But have you had a chance to build and use a macro in Craft yet?

Lea Alcantara: Yeah, actually, and Andrew actually helped me out with one of them, but before I talk about what Andrew helped me with, the simplest macro is actually part of like the default templates, and it’s to choose whether a navigation element is active or not. So it’s just basically a macro basically checking the first conditional segment to see if it matches the navigation URL, and if I had to write the conditional on every single situation, that would be just a really, really long repetitive code for every single line, but with a macro, that just makes it really, really clean to just specify the URL and then specify, for example, something like macro.is_active and then you repeat what the URL is to match the definition, then it just makes it really, really clean whether that navigation is active or not. But that being said, that was the example given in the learning templates.

Emily Lewis: [Agrees]

Lea Alcantara: And I didn’t quite get it until I started trying to figure out what to do with this particular layout we designed for a client. This particular layout that we designed for our client kind of had a lot of conditionals based on how it will look.

Emily Lewis: [Agrees]

Lea Alcantara: So this particular client sells books, and they will have future books later on, but they’re not released yet. Now, we didn’t want to just have a row where a simple design solution woul just…

Emily Lewis: [Laughs]

Lea Alcantara: And it would have made our life easier if we just made like a row of like, “Okay, there’s a new book, it’s just going to have a new row and it’s going to look exactly as the same as the first row.”

Andrew Welch: No, that’s too boring. You can’t do that.

Emily Lewis: We…

Lea Alcantara: Yeah, yeah. [Laughs]

Andrew Welch: Come on.

Emily Lewis: [Laughs]

Lea Alcantara: Exactly, and that would have been the easiest thing, but no, we had to be like, “If there are two books, it will look like this, and it’s three books, we’re going to stack two columns, and then the first row is going to be a full column, but if there are four books, then we’re going to make them two columns over top two columns, but if it’s five books…” So in the end, we had to figure out like, “Okay, so it’s easy to write just raw HTML, the classes, for this to work.”

However, if we want this to be automatically outputted via CMS based on the number of books and what row it is, we had to really think about, “Well, what does this actually mean? When does this full class show up versus the two-column class to show up and then how does it know when to end the div?” So it’s not even just about, “Okay, let’s figure out how to put this opening class, but we also have to figure out how to close the div to end the row in the first place.” So this was a perfect opportunity for me to go to Craft Slack room and basically be like, “I have no clue on what I’m doing.” [Laughs]

Andrew Welch: [Laughs]

Lea Alcantara: “Here’s the design, and can someone help me figure this out?” What was interesting is that before we even dove into perhaps Craft’s solutions just talking through what the actual functionality needs to be, like how it’s supposed to look, we had to actually really figure that out because some people were like, “Okay, so do all, even rows, need to be two columns? Well, that’s simple. We could make a CSS or conditional that if it’s even rows, it’s going to be doing this,” and it’s like, “No, no, no.” Sometimes, there is a situation where even if it’s “even” count, it’s going to look different.

Andrew Welch: Yeah, I fully believe that if on a project you’re working on, you have not banged your head on the table, you’re not trying hard enough, okay?

Emily Lewis: Yeah. [Laughs]

Andrew Welch: I like that you’re doing it this way, and I also am very used to it. My wife has her Master’s in Computer Graphic Design, so we work on a team on some of this stuff.

Lea Alcantara: Yeah.

Andrew Welch: And she will hand me designs and yeah, I’ll just put my hand on my forehead going, “Oh God, you have no idea what you’re making me do.”

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Andrew Welch: So anyway, I appreciate that you went for this. Go ahead.

Lea Alcantara: Yeah, and so it was interesting when I was talking just the problem through in Craft Slack, and I’m sure most of our listeners will probably find this that just the act of talking it out really solidifies what’s happening because as a designer, I just design something because I think it works to solve the design problem and it just looks great or whatever.

Andrew Welch: Yeah, sure. Don’t think about the work you’re making for us. That’s fine.

Emily Lewis: [Laughs]

Lea Alcantara: Yeah, exactly.

Andrew Welch: Make whatever pretty little design you want. Go ahead.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Andrew Welch: [Laughs]

Lea Alcantara: Exactly, but since I’m also a Craft developer, I’m like, “Oh shit, now I have to…”

Andrew Welch: Now, I’ve got to do it. [Laughs]

Lea Alcantara: “I have to make this work.” [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: And it was interesting that some people were even providing CSS only solutions like, “Why don’t you use last child? Why don’t you use those kinds of things?” And there were some solutions that if my design that is what I wanted, it would have worked, but because of the logic that we had decided for ourselves and made it super difficult, [laughs] a CSS-only solution wouldn’t work. So Andrew came back and was like, “Okay, we really need to define each of these rows as specific layouts.”

So we would have a featured layout which would be the featured book that’s always at the top, and then we had to figure out what a single row layout looked like and then defined the beginning of the double layout, like the two columns, and then we had to figure out what the end of the double layout would be, and we decided in regular terms, that would be the right side of the double layout. So just even having that language of like, “Okay, this is a single layout, therefore, it’s a full row, and then this is the double layout, but this is the left side so we’re going to call it left double layout.”

Those kinds of things helps you really kind of figure out the logic of the particular layout. So that was kind of like the first thing, the next thing was, well, since this is going to be repeated based on the number of like entries and stuff, it made sense that we had to figure out macros to like actually apply the opening divs in classes and the closing divs. But after that, like I was a little bit lost. [Laughs]

Emily Lewis: So when you’re talking about layouts, you’re using it in the truest sense of the form, the way it’s laid out.

Lea Alcantara: Yes.

Emily Lewis: That’s not like a Twig term or something like that.

Lea Alcantara: No, no, it’s like literally we named the macro.

Emily Lewis: [Agrees]

Lea Alcantara: The macro itself is called Featured Layout. It could have been called Row. It could have been called just Featured, but in order for us to like actually understand what’s happening, it just made sense to like have those particular layouts.

Emily Lewis: So Andrew, how do you work through that logic? I mean, obviously, you’re a programmer so you have that foundational process, but what is your process? Is that something that someone else can develop over time?

Andrew Welch: That’s really kind of a tough question. I guess what I’d do, and I’ve been doing it so long that actually expressing what I do might be hard. [Laughs]

Timestamp: 00:29:53

Emily Lewis: Right, right.

Andrew Welch: But what I try to do is just break the project down. It’s kind of like what Lea was talking about and trying to figure out, “Okay, at its base level, what is going on here,” and break it down into kind of like a cooking recipe or simple steps of “Okay, this is what’s going on. Now that I have it broken down, how do I build it up into actually programming it?” I don’t really know how to explain it other than that. That’s just kind of mentally how I work, I dissect the problem. First, you have to understand the problem. You have to understand exactly what it is and then get it down to its base level and then figure out how to solve it, and it’s just kind of something that I’ve been doing it for a really long time.

Emily Lewis: So it’s practice really. [Laughs]

Lea Alcantara: Yeah, and I mean, that logic thing, what we ended up doing was we created the macros, but what Andrew also helped me was also consider the logic of when these macros showed up based on the loop. So originally, we were like, “Okay, this is an even row versus an odd row, so we’re figuring out those indexes and based on even-odd conditionals.

However, what actually ended up working was math, so we decided like, for example, in this particular case, we had an If conditional basically saying, “If the loop is divisible by 3, show this macro. If it’s divisible by 2, show this macro, and if it’s the last of the entire loop, show this macro, and if none of that works, here’s the main thing you better show.” So because the even and odd conditional, it just wasn’t working because based on how we actually wanted the layout to go, like again, like if it was…

Andrew Welch: You did it for yourself.

Emily Lewis: [Laughs]

Lea Alcantara: Yeah, exactly. Like if we really wanted to be like, “If it’s an even row, we’re going to put two columns. If it’s an odd row, we’ll put like a full column.” That wasn’t how our layout worked. We actually had different layouts based on different conditions because it didn’t look good otherwise.

Emily Lewis: [Agrees]

Lea Alcantara: And once we got past the fact that it was an even or odd row, like actually if we divide the actual number of entries, like where it is in the loop, that would actually show the specific layout that we really need.

Andrew Welch: I just did the coding for it on the fly. I didn’t test it either.

Lea Alcantara: Yeah. [Laughs]

Emily Lewis: [Laughs]

Andrew Welch: So I was surprised as anyone that it actually worked.

Lea Alcantara: Right, right.

Emily Lewis: [Laughs]

Andrew Welch: But yeah, from what I recalled from it, part of it was basically just having the flow correct in terms of if it’s this number of things, show this, and then where it would default down to the right thing, right?

Emily Lewis: [Agrees]

Andrew Welch: And that was kind of how the logic of it worked and it was just the simplest way to solve it from a programmatic point of view.

Emily Lewis: [Agrees]

Andrew Welch: There is another solution a guy put in the chat that was a CSS solution, and that worked as well from what I understand.

Lea Alcantara: Yeah, but in the end, like I had to do it the Craft way because we had more conditionals based on the classes.

Andrew Welch: Yes.

Lea Alcantara: And so like if it was just CSS…

Andrew Welch: You chose my solution. Yehey! Okay. [Laughs]

Lea Alcantara: Yeah, the CSS only wouldn’t have worked because there was some styling stuff and I needed to have certain classes in certain places. So that’s why we chose that solution in the end, and I just wanted to point out, Twig can do math.

Andrew Welch: Right.

Emily Lewis: [Agrees]

Lea Alcantara: And I think that’s really, really important that some CMS templating languages…

Andrew Welch: That shall remain nameless.

Lea Alcantara: They don’t do that as easily or at all, right?

Andrew Welch: Damn you, ExpressionEngine. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Andrew Welch: Wait a minute, are they the sponsor?

Emily Lewis: Not for this episode. [Laughs]

Andrew Welch: Okay, good. [Laughs]

Emily Lewis: Well, but here’s the thing, when you’re getting into this sort of custom stuff regardless of what CMS you’re working with, it becomes increasingly challenging. Out of the box, working with something in its core functionality, ExpressionEngine for me has been a fantastic system, and Craft has been as well. I mean, I think Lea, am I correct, this is the most extensive we’ve had to sort of tweak something for a Craft project so far?

Lea Alcantara: Yeah, yeah, and that was because we had designed a solution that was complex.

Andrew Welch: Yeah.

Emily Lewis: There is no we, you did that. [Laughs]

Andrew Welch: Yeah, yeah. [Laughs]

Lea Alcantara: [Laughs]

Andrew Welch: Don’t try and drag us down into your mess.

Emily Lewis: I voiced my concerns during the front-end development phase. [Laughs]

Lea Alcantara: [Laughs]

Andrew Welch: [Laughs]

Lea Alcantara: But it’s pretty.

Andrew Welch: And you said, “What the hell are you doing?” [Laughs]

Emily Lewis: No, my problem is I do it, I do all of it and spend way too much time, and then I tell her there was a problem. [Laughs]

Andrew Welch: Oh yeah. You make a really good point though that I love Craft because it gets out of my way and I’ve experienced as a programmer and I love it when I can just do what I want to do. But ultimately, CMS systems are just a tool to get the job done, right?

Emily Lewis: Right.

Lea Alcantara: Right.

Andrew Welch: So if you don’t need anything like that and you just want a turnkey solution, you can look at using some of the other CMS systems and it may be perfect for you. One of the things that I try to do with all the sites that I work on, and this kind of OCD behavior probably is what makes me good at this stuff, is that I try to make sure that the site does exactly what they want, which I need specific control to do that.

Emily Lewis: [Agrees]

Andrew Welch: And also that it does really, really well in like Google PHP and Insights and some of those other testing tools.

Lea Alcantara: Right.

Andrew Welch: It’s not the case with ExpressionEngine. You can do all this stuff in ExpressionEngine, but some other CMS systems that are almost too easy and too turnkey like WordPress, for instance, you’re just never going to be able to do well in some of those external testing tools just because it’s a black box and it just does what it’s going to do.

Emily Lewis: [Agrees]

Andrew Welch: And there are certain things you can do to try and change that, but that’s really why I enjoyed Craft is I try to work on projects that the customer wants something done incredibly well and they’re willing to pay for it, and I’d like doing stuff like that. I like trying to spend that extra five hours getting something just perfect, but I recognize this is not the case for every project. Not every project, it’s necessary or there’s a budget to do something like that.

Emily Lewis: Right. But just to acknowledge that your point is equally valid knowing that what you’re building has the capacity to support something later that might be more extensive is also good to know as well.

Andrew Welch: Yeah, that is a very good point.

Emily Lewis: So what would you advise someone who is a beginner with Twig, with Craft to sort of level up, to get to an intermediate or an advanced level?

Andrew Welch: The first thing I would say is to start using it, and I realize that that sounds incredibly obvious, but realistically, the way that you learn things is by doing, and the way that I learned Twig is just by looking at documentation and trying to figure stuff out. There are some really good explanations and tutorials on Twig on how to use it, and I would also say don’t be intimidated because you can just approach a project and look up the functionality that you need as you go. I mean, you don’t have to sit down and pretend that you’re taking a formal course in Twig, but I do think it does help to look it over and see what tools are available to you before you start something because you may have a particular problem to solve and not be aware that Twig has this great function that will do exactly what you want. So one of the first things I did is I just went to the SensioLabs.

If you google Twig, you’ll find their page. It’s the first page, and I just looked over the functions that they had, and I briefly clicked on them to see what they did, so that when I was working on a project and I had a problem to solve, I was like, “Oh, I remember reading about that it has a function for X, Y, and Z.” There’s some really, really cool functionality, and I think that a reasonable way to do is just give yourself a little bit of an overview of what it can do and then dive in and start doing something with it.

Lea Alcantara: Yeah, I was just wondering about like just the diving in part, like that’s really planning a site, and planning a Craft build. Do you have a documentation workflow? Do you do sketches or diagrams? Like how do you work through planning a site or a Twig problem?

Andrew Welch: So it’s a few different problems, at least for me. So for the user experience type of thing, I use wireframes because there is a reason I studied photography, I can’t draw or I can’t design.

Lea Alcantara: Right.

Andrew Welch: I know what looks good and I can take a picture of it, but I can’t create it, right? [Laughs]

Lea Alcantara: Right.

Andrew Welch: I know it’s pretty awful. My six-year-old son draws better than I do. I swear to God.

Lea Alcantara: [Laughs]

Andrew Welch: So for the user experience type of stuff, yes, I do layouts. For actually figuring out the underpinnings of the site and how I’m going to arrange and do all that kind of stuff, I tend to work really well that I kind of frame the problem in my mind, and I usually just kind of let it sit there, and somehow my brain kind of figures it out and so that in a day or two, I’ve got a really good idea of how to approach this. If it’s a really complicated thing, then I’ll do something with bullet-pointed list to figure out how to structure stuff.

Lea Alcantara: [Agrees]

Andrew Welch: And I think that’s a really good way. It’s kind of like Lea was talking about. Verbalizing the problem helps you really bring it into focus. Writing down the problem too in that outline form also can really help too, and I try to use tools that are lightweight. You don’t want to spend ten hours making a really fancy design document for something that just doesn’t justify it, so an outline view is fine. Now, obviously, if you have to present it to clients, then that’s a different story, but the client doesn’t usually care what the technical underpinnings are.

Lea Alcantara: Right.

Andrew Welch: They’re more interested in the user experience, “This is what it’s going to look like,” that type of thing. But really, for the most, I try and think the problem through and just let it sit, and occasionally also do an outline view of exactly what’s going to where.

Emily Lewis: Yeah, I think for us, we spend a lot of time not going any formal planning of our CMS builds, and we start to doing some planning, and for us, it was really just sort of documenting. I can’t speak to Craft, but I can speak to like ExpressionEngine, documenting the templates, the channels, the custom fields that we’re going to have, just sort of sketching it out literally on paper. When I say sketch, I don’t mean with like diagrams, I mean, with just words, and I think, Lea, you’re doing something similar with Craft, and I feel like for us, and probably because Lea is the Craft dev, we both do EE dev, we like having a document that both of us can refer to and sort of chime in our own thoughts on something rather than just marinating on it.

Timestamp: 00:40:13

Andrew Welch: Right.

Emily Lewis: That’s what we would do in the past, and I always found, at least for myself, as I was getting into the development, I’ve realized “Oh, what I’m doing right now is a lot more efficient than what I did yesterday, and I should redo that thing I did yesterday to be more reflective of what I’m doing right now” kind of thing.

Andrew Welch: Yeah, so I do. Actually, I should have mentioned this. One of the things that I do for every site or for every project, because it’s not always a website, but for every project that I work on is that I make a wiki for it.

Emily Lewis: [Agrees]

Lea Alcantara: Oh.

Andrew Welch: And the reason I do that is two-fold. One is I consider it kind of the user’s manual for the site, so that when I hand it over to the client, I can be like, “Look, here. Here is your site.” [Laughs]

Lea Alcantara: Oh, okay.

Andrew Welch: Because what I found is that most of the clients, they may not remember their login passwords, they don’t know how to get in here, so I create a wiki and my preference is DokuWiki. It’s really simple to install and there is a responsive Bootstrap theme that you can put in there and I use that because I’ve got a number of clients such as the guy who runs the poker training, that he lives off of his phone, so if it’s not a mobile responsive wiki, he’s not never going to look at it. But I document in there all of the plugins that a site uses, all the passwords. I also do design documents in there if we do like a white paper of features.

From a collaborative point of view, a wiki is really, really ideal because it’s really lightweight. You can just type. [Laughs] You don’t have to do anything real fancy, and it saves every revision of what you’re working on. So, if you want to rollback, you can, and multiple people can edit it and add their input to it at the same time. It’s also nice because it’s in a central place. Like if the website I’m doing is food.com, I do wiki.foo.com, and so every site that I have, there’s a wiki there, and they can also do fun things like only people that have an account can view it, but you can also set up access permissions so that only certain people can see the passwords page. I do that in the design phase.

I’m kind of doing what you guys are talking about in documenting stuff, and then I also do it, just documenting everything that I do, and I found that the clients love it, because I would say, “Hey, look, here’s your owner’s manual.” [Laughs] Because a lot of times to the clients, a website is a black box and they don’t know what the hell is going with it, and they like the idea that they’re getting this actual owner’s manual for their site that explains everything that’s going on and where it is. I also found that it’s really useful for me, because I’m the one who’s most likely going to go back and work on this thing, I can look at it and say, “Oh okay, that’s where that is and this is how that works.” I find it really, really helpful, and a wiki is just a great medium because you can’t hurt it. The client can get in there and make edits and if they screwed up, they’d just roll it back.

Emily Lewis: Nice. I like that. I think that’s the first time we’ve heard of that idea, especially as like an owner’s manual, it’s great.

Andrew Welch: Yeah, really, it’s very, very easy to set up. Once you know how to set it up once, it’s really not a big deal to replicate it everywhere, and I even do it for projects that I work on for myself. I document where all this stuff is because I come back in a year, you know?

Emily Lewis: Oh yeah.

Andrew Welch: I’m going to be like, “Oh, past me, thank you for putting that there.”

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Andrew Welch: I didn’t know. I forgot what that was.

Emily Lewis: So before we get to the end of the episode, can you talk about some of the most common Twig mistakes you’ve seen that people should avoid?

Andrew Welch: I think that the most common mistakes that people make are, first, really think through the problem before you put any code down and really understand what it is you’re doing because otherwise it’s kind of like trying a build a house without any kind of floor plans. The tagging is set together, and you’d be like, “Oh crap, we want to put a pool over there. We didn’t plan for any of that. Let’s tear it apart.”

Emily Lewis: [Laughs]

Andrew Welch: So really think through the problem, even if it’s pretty simple, and I would say probably one of the other mistakes I see people making is not commenting on their code.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Andrew Welch: Even if it looks pretty simple, I think it makes sense to comment it, and again, you’re doing yourself a favor because you’re the one who’s probably going to go back and look at it. I think another common mistake I guess you would call it is people tend to just write their code and then never go back to profile it and optimize it and make sure it’s actually doing something really efficiently.

Emily Lewis: [Agrees]

Andrew Welch: For a lot of people, they’re like, “Okay, I got it done. Whew! Thank God, it actually works. I’m never going to look at it again.” [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Andrew Welch: But they’re definitely are performance concerns that you should be taking a look at, and all it really takes is turning on the Dev Mode in Craft or every CMS has something analogous to that, and checking out what the performance profile of the code is like, and can this be done more efficiently, and if see a code that’s really, really inefficient, a lot of times they’ve thought about the problem wrong. So if they spend a little bit more time up front before they actually typed anything, they probably would have avoided that entirely. But I would say really that’s kind of the most common mistakes that I’ve seen. Probably another one would be just not knowing what tools are available to you and doing something in a really hard way just because you’re not aware of a certain Twig filter that will do X, Y or Z for you.

Emily Lewis: [Agrees]

Andrew Welch: Which kind of begs for the case of just spending a little bit of time, like I mentioned earlier, going over what’s in your toolbox and what kind of functionality there is there.

Lea Alcantara: I feel like that answers our last question, which is what your final best practice tips are, unless you have some final thoughts.

Andrew Welch: Yeah, I think, unfortunately, I just went over kind of what best practices are. It’s basically is think about the problem first, comment your code as you’re doing it, and turn Dev Mode on and attempt to optimize it afterwards. It’s really important to get it working first and then try to optimize it later, and also super, super important to really understand the problem before you just try to code for it because, otherwise, you can end up with something that’s really, really inefficient just by design, not because you coded anything wrong.

Emily Lewis: [Agrees]

Lea Alcantara: All right. So before we finish up, we’ve got our Rapid Fire Ten Questions so our listeners can get to know you a bit better.

Andrew Welch: Oh God, let me drink a little coffee, hold on.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Andrew Welch: All right, I’m ready.

Lea Alcantara: All right, question number one, Android or iOS?

Andrew Welch: It’s iOS.

Emily Lewis: If you were stranded on a desert island and can only bring three things, what would you bring?

Andrew Welch: My wife and my kids.

Emily Lewis: Perfect. [Laughs]

Andrew Welch: Wait a minute, that’s a terrible answer.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Andrew Welch: Because now I’m stranding them in the island too, right?

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: It’s a selfish answer, but that was the first. [Laughs]

Andrew Welch: Wow! That was a really selfish answer. That was horrible. Okay, sorry. Go ahead.

Lea Alcantara: What’s your favorite TV show?

Andrew Welch: Oh, I don’t really watch a whole lot of TV. That’s really going to be hard. I don’t know, probably some nature programs. Planet Earth maybe, but I don’t know.

Emily Lewis: All right, what’s your favorite dessert?

Andrew Welch: What is not my favorite dessert?

Emily Lewis: [Laughs]

Andrew Welch: That’s really the question. I like strawberry shortcake a lot.

Lea Alcantara: What profession other than your own would you like to attempt?

Andrew Welch: Well, I really wanted to be a photojournalist, and that’s why I went to school for it, but I was convinced, and this is I’m baiting myself, but this is back in the 90’s, I was lucky enough to know a guy named Rick Smolan who is a pretty famous photojournalist for National Geographic, and he actually came to my school to give a talk and we went out for a beer and talked for a little while, and he did like some of the A Day in the Life Series books, like he did From Alice to Ocean and a lot of the Day in the Life of Vietnam, that type of a thing. So he was basically rock star photojournalist and he told me, “Don’t think you’re going to be me.” And he didn’t mean that..

Lea Alcantara: [Laughs]

Andrew Welch: And he didn’t mean that from an arrogant point of view at all. He said, he’s like, “Look, I got incredibly lucky to be doing this, and it’s very unlikely that you’re going to do it.” And thank God he gave me that speech because that was around the time that smartphones really were coming into being later on, and the photojournalism profession just died. [Laughs]

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Andrew Welch: It is as dead as a doornail right now.

Emily Lewis: So does that mean you wouldn’t want to try it, because that’s my next question, what profession would you not like to try?

Andrew Welch: Now, I would love to try it if someone would actually pay me to do it, but I don’t think there’s anybody who’s going to pay me to do it. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Andrew Welch: That’s the problem.

Emily Lewis: All right, so what profession would you not like to try?

Andrew Welch: Oh, I don’t think I would like to clean sewers. I think I would really not like that all.

Emily Lewis: Oh.

Lea Alcantara: What’s the latest article or blog post you’ve read?

Andrew Welch: Oh God. It’s really boring. So it is optimizing your website using Varnish.

Lea Alcantara: [Laughs]

Andrew Welch: Yeah, Varnish, yeah. [Laughs]

Lea Alcantara: Right.

Andrew Welch: Yeah, I know, right, and Varnish, I think they’re called Edge (Side) includes. Yeah, that’s what is what they’re called.

Lea Alcantara: Right.

Andrew Welch: And yeah, it’s really boring.

Emily Lewis: Probably not for our listeners though. [Laughs]

Lea Alcantara: Yeah, they’ll be like, “Yes, bookmarked.”

Andrew Welch: Yeah.

Emily Lewis: [Laughs]

Andrew Welch: Sorry.

Emily Lewis: If you could have a super power, what would it be?

Andrew Welch: Well, that’s tough. I mean, there are a lot of things that I would like on a practical level, but just for fun, I’d like to be able to fly. I think that would be awesome.

Lea Alcantara: What music do you like to work to?

Andrew Welch: I listen to a lot of classic rock stuff. It depends on my mood. If I’m doing like for marathon training and stuff like that, I will do things like Jane’s Addiction and Nirvana and really kind of go kill them kind of music, and if I’m just coding or I’m working at home, some of that with Pink Floyd and some other more mellow music.

Emily Lewis: All right, last question, cats or dogs?

Andrew Welch: Yeah, I’m definitely a dog person.

Lea Alcantara: Well, that’s all the time we have for today. Thanks for joining us, Andrew.

Andrew Welch: All right. Thank you for having me.

Emily Lewis: In case our listeners want to follow up with you, where can they find you online?

Andrew Welch: Look for me in Slack chat, how about that, and craftcms.slack.com and my username is khalwat, which is a Malay word.

[Music starts]

Emily Lewis: All right, thanks again, Andrew.

Andrew Welch: Thank you.

Lea Alcantara: CTRL+CLICK is produced by Bright Umbrella, a web services agency obsessed with happy clients. Today’s podcast would not be possible without the support of this episode’s sponsor! Thank you, Visual Chefs!

Emily Lewis: We’d also like to thank our partners: Arcustech, Devot:ee and EE Insider.

Lea Alcantara: And thanks to our listeners for tuning in! If you want to know more about CTRL+CLICK, make sure you follow us on Twitter @ctrlclickcast or visit our website, ctrlclickcast.com. And if you liked this episode, please give us a review on iTunes, Stitcher or both!

Emily Lewis: Don’t forget to tune in to our next episode when where going to talk accessibility, the basics and essentials with Gregory Tarnoff. Be sure to check out our schedule on our site, ctrlclickcast.com/schedule for more upcoming topics.

Lea Alcantara: This is Lea Alcantara …

Emily Lewis: And Emily Lewis …

Lea Alcantara: Signing off for CTRL+CLICK CAST. See you next time!

Emily Lewis: Cheers!

[Music stops]

Timestamp: 00:51:06