ctrlclickcast.com Mobile Refresh, Part 2

Lea Alcantara: From Bright Umbrella, this is CTRL+CLICK CAST! We inspect the web for you! Today we are diving into Part 2 of our ctrlclickcast.com responsive refresh, focusing more on the technical execution. I’m your host, Lea Alcantara, and I’m joined by my fab co-host:

Emily Lewis: Emily Lewis!

Lea Alcantara: Today’s episode is sponsored by EEHarbor, the largest third-party add-on developer for ExpressionEngine. Whether you’re upgrading an old site or building a new one, EEHarbor’s add-ons make your life easier and your development faster. Need help upgrading your site? EEHarbor offers upgrade services for individuals and agencies! Visit EEHarbor.com to learn more.

Emily Lewis: Before we get into today’s episode, we have a really big announcement to make.

Lea Alcantara: After eight years and over 200 episodes with amazing guests and sponsors, we are wrapping up the show.

Emily Lewis: Yeah. Today this episode that you’re listening to is going to be our last episode. It’s been a crazy and fun ride, but after a lot of reflections, we think we’ve taken the show and its concept as far as it can go. We are so proud of what we built and all the things we learned from our guests over the years, but the reality is our sponsorships, downloads and engagements have been slowly declining.

Lea Alcantara: And a few things like some of our newer social experiments in Patreon didn’t attract the type of interest we had hoped. We had to accept that. Our show is probably past its prime, and that’s okay.

Emily Lewis: [Agrees]

Lea Alcantara: This is definitely bittersweet.

Emily Lewis: [Agrees]

Lea Alcantara: But as we thought of what show the best to end our run, what better way to go than back to our roots.

Emily Lewis: Right. So for our older listeners who have been with us since the beginning, you know we started the show as the ExpressionEngine Podcast, so we thought it was fitting to end the show with a focus on our website’s EE upgrade.

Lea Alcantara: So without further ado, here is Part 2 of ctrlclickcast.com’s mobile-friendly refresh.

Emily Lewis: So we talked about all the planning, i.e., content and visual design in Part 1 of ctrlclickcast.com refresh, but today we are going to get into the development side and other process of getting it launched.

Lea Alcantara: [Agrees]

Emily Lewis: So let’s start with front end. As I mentioned in Part 1, one of the reasons why this wasn’t sort of a simpler retrofit is that we just couldn’t use an 8-year-old code base. [Laughs]

Lea Alcantara: Yeah.

Emily Lewis: There was no way to “just” throw some media queries in and have this scale for different device with. So starting with the front end and continuing through the rest of the project. Everything else was like 100% rebuilt.

Lea Alcantara: [Agrees]

Emily Lewis: Part 1 was the areas where we sort of kept it simplified pared down process, but yeah, front end was from scratch, and just to offer a few perspectives, because I had to kind of think about this myself, so the original design was about eight years old from our EE Podcast days. We did not touch that code base when we rebranded to CTRL+CLICK.

Lea Alcantara: [Agrees]

Emily Lewis: We changed type, the @font-face calls and we changed the logo, but that was kind of it.

Lea Alcantara: Yeah.

Emily Lewis: And eight years ago, I hadn’t even created our internal starter files framework. I don’t even think I envisioned of ever having our own internal framework.

Lea Alcantara: Yeah.

Emily Lewis: It was before I incorporated a lot of accessibility features into that framework. It was well before I understood speed and performance concerns, the impact of having images, the impact of having third party HTTP request, even before I knew how to use a CSS preprocessor like Sass.

Lea Alcantara: [Agrees]

Emily Lewis: And definitely, even before I knew what a responsive site was. We were not talking about mobile or responsive at this point in time.

Lea Alcantara: No.

Emily Lewis: So front end had to just be a 100% from scratch. It would have been silly to try and make the desktop system work.

Lea Alcantara: Right.

Emily Lewis: When Lea was discussing the visual redesign in Part 1, Lea, you talked about going with a single-column layout.

Lea Alcantara: Yeah. And part of the motivation for that beyond just proper information architecture with priority in branding, a single-column layout simplifies the front end.

Emily Lewis: Exactly, there’s just less media queries, less little tweaks I need to make at different “break points,” and so that make the front end a lot easier for me. It was also helpful to actually have a framework from which to work our internal starter files that we sort of have been iterating on with every single project.

Lea Alcantara: Right.

Emily Lewis: Whenever I use it for a new project, it’s at the best it’s ever been because it’s got all the stuff from previous projects in it.

Lea Alcantara: Right.

Emily Lewis: So give me a really good starting point. Essentially, one of the reasons you do want to use a framework to help you get started and up and running faster, so starter files also help that. But aside from only having a single column and having starter files to start with, I do feel like the process of building the front end for this refresh was a more robust effort than my original legacy desktop site build. And what I mean by that is that it’s been eight years, I have a lot more knowledge and I know more little details so I wanted to make sure that the site reflected the best of what I’ve learned, not just the basics of what I’ve learned. With HTML, one thing that stands out to me, like I’ve always had really mean semantic code that’s never been something I’ve had to like build back and fix, but I did use ARIA a little more than I should have previously.

Lea Alcantara: [Agrees]

Emily Lewis: And that was because at the time, it was still really new. It was as new as some of the HTML 5 semantics that we had in place.

Lea Alcantara: Yeah.

Emily Lewis: So I was using them without the full knowledge of their impact, and so now that I know about them, there are ARIA roles that are redundant to native HTML 5 semantics, and that wasn’t clear to me years ago.

Lea Alcantara: Right.

Emily Lewis: But it is now, so I’m not dropping roles in everywhere, which I pretty much did before. [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: I also used the section and a side I think not the way they should have been at the time, and so I feel like today, how I’m using them, is much more semantically accurate.

Lea Alcantara: Right.

Emily Lewis: And that’s really only something another front-end dev can appreciate, [laughs] but it’s one of those things that I think that’s important. I feel like our podcast should reflect the best of what we have in our arsenals today.

Lea Alcantara: Well, and I mean, better HTML is the fundamental of all websites, and Google and other machine readers will appreciate you.

Emily Lewis: Yeah. [Laughs] I also feel like my CSS was just generally better. Obviously, our starter files have some better standards than I was working with before that includes class naming. I’ve gotten really consistent on my class naming within projects, and so I’m essentially using a lot of the same classes from one project to the other. This makes my coding faster. It lets me inherit, essentially class selectors from starter files a lot more efficiently without having to change the names, and it’s how my mind is thinking today.

So again, it just was another reason to not update the existing code base because I don’t even know what I was thinking with those class names. They’re so far removed from how I’m thinking now, which was much more modularly, much more semantic. I also feel like my CSS is set up for better maintenance, and that’s because of Sass variables and mixins. There’s just less repetition in line with CSS selectors. So that these are like just things that have come to our industry in the past couple of years that I’m now able to take advantage of.

Lea Alcantara: Right.

Emily Lewis: And then because we just have that one column layout, there weren’t a whole lot of alignment issues where I needed two things side by side where I might have traditionally used a float method. There were a few, and for those, I chose Flexbox. I should say I tried grid and I tested it on a couple of browsers, and it just didn’t have the support that I wanted it to have so I decided on Flexbox, and the best thing about Flexbox is it’s like two little lines, and then boom, it’s done.

Lea Alcantara: Nice.

Emily Lewis: And I have in it a mixin with fallbacks for older versions of IE and so it was really simple compared to some of the challenges that building the old legacy desktop sites with positioning and floats. I love Flexbox, and I’m not knocking grid, I’m just saying when I use it where I wanted to, it did not do what I wanted in some of the older browsers I wanted to support.

Lea Alcantara: So that’s all about CSS, what did you do when you were thinking about performance?

Emily Lewis: Right. Well, something that, as we mentioned in Part 1, we really weren’t even thinking about – I mean, not even slightly thinking about during the original site launch.

Lea Alcantara: No.

Timestamp: 00:10:00

Emily Lewis: And honestly, when we were having those initial IA content strategy discussions back in 2016, I don’t think speed was on our radar either.

Lea Alcantara: Nope.

Emily Lewis: But in the three years since those initial discussions, we’ve done a lot of performance work, so this was a great chance to put all of that into our own site. So I made sure that the HTML was super lean, like more lean, as lean I could get it so I sent a little extra time on that. As I just mentioned, Sass giving me a little bit more efficiency in terms of none of those redundant selectors, but using a mixin, but also Sass comes with the really simple option to compress your CSS. I didn’t do that in the original site.

Lea Alcantara: Right.

Emily Lewis: It wasn’t even a thing I thought of. I just had big ass files. [Laughs]

Lea Alcantara: Right, exactly.

Emily Lewis: So just using automation tools to compress my final CSS for me also is going to impact the page size, the size of the assets that are being downloaded.

Lea Alcantara: [Agrees]

Emily Lewis: The original site where we had any icons, we were using Sprites, which if you’re listening and you don’t know what that is, that just makes me feel old, but it’s where we had a single image with multiple visuals in it that you would call with background positioning in your CSS.

Lea Alcantara: I think people sometimes do that with SVGs these days.

Emily Lewis: Yeah, you can still use Sprites. I think it’s a matter of I haven’t had to in a long time because you and I have really embraced Font Awesome for icons.

Lea Alcantara: Right.

Emily Lewis: And so pretty much where you’re using those, we’re using Font Awesome.

Lea Alcantara: Yeah.

Emily Lewis: And because we’re using them so much across the design, it’s a justifiable call to a third-party resource because we’re using it in a lot of places, and we’re only calling it once.

Lea Alcantara: Right.

Emily Lewis: Also limiting HTTP request is a minor thing. I moved Font Awesome in line with HTML instead of just calling it as an external resource, and I did the same with the JavaScript. Rather than just calling like a script.js file from the server, I just have it in line at the bottom above the closing tag. I’ve been doing that for the past couple of years with projects and it’s just a minor improvement to speed issues, and I don’t find it any more complicated to maintain. Sometimes getting two modular, like having too many things separated out gives you its own drawbacks.

Lea Alcantara: Yeah, its own headache, yeah.

Emily Lewis: Yeah. And we had no optimization in .htaccess originally.

Lea Alcantara: Right, right.

Emily Lewis: Like at all.

Lea Alcantara: Yeah.

Emily Lewis: I think the only thing we used .htaccess for was ExpressionEngine rewrites, URL rewrites.

Lea Alcantara: Yeah, removing index PHP, yeah.

Emily Lewis: So we added some gzip compression and expires headers, which are going to help with performance and caching, and so those were just some minor things, and again, because of us using starter files as our framework to get up and running, a lot of the stuff was already in place, and so I didn’t have to spend a lot of time adding it. It was more like just customizing what’s there.

Lea Alcantara: Cool.

Emily Lewis: Let’s see, so continuing from there, a couple of things changed for me, and I can’t say it’s because of the CTRL+CLICK CAST refresh, but rather just the three years it took us to get from the original conversation to my dev, I just made a lot of changes to how I was coding.

Lea Alcantara: Right.

Emily Lewis: For example, I used to use pixel-based media queries. So I’d say, “If the viewport is 1024 pixels wide, that would be my media query.”

Lea Alcantara: It’s 1024, yeah.

Emily Lewis: And in the three years that it’s taken, by the time I got to front end, I’m now using em-based media queries.

Lea Alcantara: Oh.

Emily Lewis: I also am now using rem units for fonts and sizing. Previously, I pretty much always used em as well as the occasional pixel-based value. All right, so rem from my googling stands for root em, and what it essentially means is that the value that you assign to a selector attribute is referring back to the root element, the root value, and so if you’ve seen situations where maybe a child element of something, the font resizes based on the parent element, maybe you increase the width of the parent element and then the font size of the child element bumps up, which isn’t what you want, then that’s due to using em-based font sizing.

Lea Alcantara: [Agrees]

Emily Lewis: But if you’re using rem-based font sizing, no matter what I do to the parent element, it’s going to stay to that size relative to the root. Also, I’ve read it makes it super easy if you want to just make a global change to the root value, then it cascades through everything. I’ve never done that, ever. So I don’t know if maybe I just approached things differently or it’s just meaning it’s not a feature, a benefit that applies to me that’s still useful to other people, but I’ve never had to do that so that wasn’t my reasoning for going this direction. There were two articles that kind of helped me get to this kind of logic in terms of using rem units that I’ll make sure to include in the show notes. I’m using it not just for font sizes like I just described with the child and parent relationship, but I’m using it for everything, my padding, my margins, widths and height, top and bottom, and this has been through potentially three years of testing.

So for example, I started using rem for just font sizes. I was like, “I don’t know what it’s going to do to my padding. [Laughs] I don’t’ know what it’s going to do to my margin. I just want to see what’s going to happen.” I tend to be conservative in my approach to using new tricks or new techniques. I want to really understand what they’re doing before I make it part of starter files, but by now, I’m really using it for everything, and a little asterisk next to that is I’ve only recently with the CTRL+CLICK CAST website used it for top bottom positioning, and so far it seems okay so I feel pretty good about it, and there might be people listening to me like, “Why are you worried?” Well, that’s just me. [Laughs] I really like to really understand what I’m doing and see it in action multiple times before I’m like, “Okay, this is what I’m doing.”

And then one other thing that I think is worth mentioning that I spend a little bit of time on that I didn’t obviously in the desktop side are tap targets. So you give me a design, Lea, but then I need to figure out on the front end how to put padding or margin around links to make them effective tap targets for the touch or mobile touch experience, and it was really important with this design because if you take a look at it, we have lots of group text links, and I wanted to make sure that you aren’t going to accidentally hit the wrong thing.

Lea Alcantara: Right. I believe the term is the Fitts’s law, right?

Emily Lewis: Fitts’s law.

Lea Alcantara: Like Fitts’s law, that’s in terms of like making sure that there is enough room for people to actually – Fitts’s law is a predictive model of human movement primarily using human-computer interaction, so that’s the formal way to say like how do we remove the amount of friction from people navigating through the site.

Emily Lewis: And I think one thing that is super simple but worth mentioning because it might be something that’s easy to overlook, like you can increase your target with padding really easily, but if you have a group of text links like we do, you also need some margin to like clearly separate the two links that are next to each other.

Lea Alcantara: Very cool.

Emily Lewis: And then also another area of the front end that I feel was much more robust this time around compared to the desktop system is accessibility, and I’ve doing accessibility work since some of my first jobs working in front end, but it’s one of those things that unless you get to work a 100% in it, there’s always something to tweak or to improve or some new finding that someone has done testing in a screen reader and how finds that something is no longer effective. I mentioned earlier better use of ARIA, limiting those redundancies with HTML 5 sectioning elements.

Another thing that I wasn’t so great at that I did try to put a lot of attention towards with the CTRL+CLICK CAST’s site was proper use of aria-hidden=true. Sometimes, you want to also support that with CSS display selectors or values rather, and sometimes you don’t, and so taking a little bit of extra time reviewing where I’m using them and why was a little extra step I did for our site that I hadn’t done in the past, and then another thing that I have started doing that I hadn’t done back in the day was – I’m not sure how to like elegantly say this, but here’s a good example, every

Lea Alcantara: Right. So we actually went live with HTTPS over a year ago, so prior to this refresh.

Emily Lewis: [Agrees]

Lea Alcantara: But we still consider the entire HTTPS move part of this overall refresh, you know.

Emily Lewis: [Agrees]

Lea Alcantara: And again, at the time, especially when we first started the podcast, HTTPS was still an emergent standard for non-ecommerce sites. I feel like unless you’re an ecommerce site, nobody had HTTPS.

Emily Lewis: Right.

Lea Alcantara: And when we first started taking it seriously, Google had just started giving out warnings about how security will affect page rank, so to help with planning, I contacted our host, Arcustech for some direction and Nevin Lyne outlined a few different ways that we could implement HTTPS. We’ll link to our episode with Rachel Andrew on some of those details.

Emily Lewis: [Agrees]

Lea Alcantara: But in the end, because of the simple needs of the site and for some speed benefits, we went with a private certificate combo and have it attached to Cloudflare.

Emily Lewis: [Agrees]

Lea Alcantara: And really, once you have that bought and configured manually or with the help from your host like Arcustech did with us, the next step really is a simple security audit. So we have a spreadsheet where we outlined all the places we need to check and it’s mainly third-party services.

Emily Lewis: [Agrees]

Lea Alcantara: Again, at the time we were implementing HTTPS, it was still a bit of a novelty, so we had to double check if some crucial services we were using serve HTTPS because it might not have, and that could have given you mixed content warnings. So then after that, the next major thing is making sure that all the ExpressionEngine configuration files as well as the templates have URLs that reference HTTPS or depending on the service or whatever it was, what that link was, a relative reference like the double slash (//), so often like, for example, the Google Analytics script has the double slash, which means it will pull whatever protocol you’re already serving to avoid that mixed content error.

Emily Lewis: What would you say is average time you spend on these audits and getting this spreadsheet up to date just as a reference for calling?

Lea Alcantara: You know that it really depends on how complicated the site was.

Emily Lewis: [Agrees]

Lea Alcantara: So like when we did this for like our college site, that was like about an hour, which isn’t that long, but the larger the site, the more dependencies it has, so that takes a little bit longer. For a lot of sites, it actually takes less than an hour.

Emily Lewis: It’s totally worth the time to kind of go through the double checking.

Lea Alcantara: Yeah, absolutely, especially because if you did identify a service that doesn’t work with that, then you’re proactive in either finding another service or in one case with one project, I contacted the service and asked if they had timeline for when they were going to serve it, and that actually affects if it’s in the next month or the next couple of week, and then you just tell your client, “Let’s delay this move for another month, and then we still use the same service that you’re comfortable with.” Right?

Emily Lewis: [Agrees]

Lea Alcantara: So doing this kind of audit makes sure that you’ve crossed your Ts and dotted your Is essentially and be proactive about these types of changes that you have to do.

Emily Lewis: Yeah. All right, so back to your .htaccess changes.

Lea Alcantara: Right. So once you identified everything in your audit and everything is good and you know where to change things, you edit the .htaccess file to redirect all instances of HTTP to HTTPS and make sure there’s also a 301 redirect.

Emily Lewis: Oh, right.

Lea Alcantara: Yeah. In our relaunch just a few weeks ago, we realized that the directive that we had originally that we’ve added didn’t have that nuance.

Emily Lewis: [Agrees]

Lea Alcantara: Even though it redirected just fine, I just didn’t specify it was a 301 redirect, and that could affect your Google rankings, and where we’re still trying to troubleshoot this, we’re thinking this might have affected the way our social media graphics showed because it wasn’t a full 301, this is the real URL to review.

Emily Lewis: Let me ask you this because when we launched, we also added back the www to our URLs.

Lea Alcantara: Right.

Emily Lewis: We had – what – stripped that out previously.

Lea Alcantara: Right. So our original URL like eight years ago didn’t have the www, and then when we moved to Cloudflare, and I think this was just a misunderstanding either on how HTTPS works or how Cloudflare worked or I misunderstood what our own site was telling me, but it basically mentioned if we were going to be using Cloudflare, that we need to specify the www as our primary domain instead of removing it.

Emily Lewis: [Agrees]

Lea Alcantara: So I switched a bunch of those things around with the redirect so now that our main URL has the www, and so we are making all these redirects, like just make sure you actually know what you’re doing for it. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: Like in why it’s happening because that has led to a few problems with our social previews and URLs a little bit in regards to that, especially because we also use podcast tracking, download tracking service, and www.domain.com and domain.com are actually considered two different sites.

Emily Lewis: [Agrees]

Lea Alcantara: So if you don’t do your redirects properly or you don’t specify them properly or you don’t specify it’s a 301 redirect, like one is the real permanent URL, then you can have a lot of weird issues with your site rendering, with Google ranking and social previews as well, and speaking of those particular redirects, and this was something that bit me as well, make sure your redirect, your HTTPS redirect is one that your host endorses.

Emily Lewis: Oh, right. [Laughs]

Lea Alcantara: You know like I’m not an .htaccess expert, so you know half the time I’m like, “HTTPS redirect, Google, you know?”

Emily Lewis: [Laughs]

Lea Alcantara: And then you choose what you see and then just copy paste and when it looks like it works, it’s great, but then when it doesn’t work, you’re like, “Well, what’s going on here?”

Emily Lewis: Right.

Lea Alcantara: So for example, Arcustech has slightly different syntax than a generic HTTPS redirect because just like with the web, like anything in the web, there’s more than one way to do the same thing.

Emily Lewis: [Agrees]

Lea Alcantara: There’s more than one way to do a 301 redirect. There’s more than one way to do an HTTPS redirect, so make sure you do the one that actually your host endorses in their knowledgebase, so just use that one.

Emily Lewis: [Agrees]

Lea Alcantara: But in our case too, there was an extra step. Make sure that the HTTPS redirect is one that works with Cloudflare.

Emily Lewis: Right.

Lea Alcantara: So it’s a slightly different syntax, because, again, our site is being served through Cloudflare now, even though all the main stuff is hosted in Arcustech when Cloudflare takes it and it’s our CDN, and so that was something we actually had to troubleshoot since the site went through there.

Timestamp: 00:30:05

Emily Lewis: And we have an episode in our archive, an .htaccess primer that we’ll link to as well in the show notes because there might be some useful information in there if RegEx and .htaccess isn’t really like your specialty. [Laughs]

Lea Alcantara: It’s my thing, yeah, and that means since it was my thing, it took a lot of trial and error before I was like, “Okay, this is why it’s not working.”

Emily Lewis: I think one benefit of this project taking as long as it did is that when we launched and things weren’t perfect, we were like, “Oh, well, like we’ll fix them.”

Lea Alcantara: [Laughs]

Emily Lewis: Do you know what I mean?

Lea Alcantara: Right, right, right. [Laughs]

Emily Lewis: Like, “We will fix it. It’s not the biggest deal.” You know? [Laughs]

Lea Alcantara: Yeah, right.

Emily Lewis: At least the site is mobile. [Laughs]

Lea Alcantara: Right, right, right. It’s working. It’s working.

Emily Lewis: Yeah, exactly. All right, so let’s talk about the final phase of development, the ExpressionEngine upgrade.

Lea Alcantara: Right. And so like Emily mentioned, the silver lining of all these delays is that software and technology catches up.

Emily Lewis: [Agrees]

Lea Alcantara: And since we delayed for three years, ExpressionEngine went up three versions.

Emily Lewis: And went open source. [Laughs]

Lea Alcantara: Yes, exactly, so a ton, a ton of changes. We went from EE Version 2 to EE Version 5.

Emily Lewis: [Agrees]

Lea Alcantara: But honestly, for specific details on the upgrade, listen to our 2-part series on our show, CMS Upgrades & Migrations.

Emily Lewis: Yeah.

Lea Alcantara: Essentially, we followed all the things we mentioned there to a T, including the CMS audit and the test related to that, but I will note that this upgrade wasn’t as much as a straightforward upgrade as in like “press the upgrade button” kind of thing as it was a minor rebuilt and an import.

Emily Lewis: [Agrees]

Lea Alcantara: And the import was to a newer version of ExpressionEngine 4 and then a traditional upgrade to EE 5.

Emily Lewis: And can you explain why that that was the path?

Lea Alcantara: Well, part of it is when I was actually a hard core developing to all of this with all the years I have passed sort of add-ons didn’t exist, another thing too.

Emily Lewis: [Agrees]

Lea Alcantara: But that might be a good thing because a lot of things were natively added, which I’ll go into a bit more detail, but in terms of like the import to EE 4, that was because of like the newer stuff that we wanted to use and newer techniques, as well as I mentioned, ways to move on from old add-ons. It was EE 4 first because that was what it was in the middle of 2018.

Emily Lewis: Yeah.

Lea Alcantara: And then EE 5 got released. Fortunately, the EE 4 to EE 5 upgrade process was once I had finished EE 4 upgrade path and then a lot of the major add-on developers had a path to EE 5.

Emily Lewis: [Agrees]

Lea Alcantara: So then it was literally a traditional upgrade, like replace the folders, the plugin folders with the newer plugin.

Emily Lewis: [Agrees]

Lea Alcantara: And then EE 4 had a one-click update so then after I did the replace the EE 4 plugins with the new EE 5 plugins, which was, again, I replaced the folder with the new version, I just pressed the one-click update to EE 5.

Emily Lewis: Nice. I’m putting you on the spot here, do you think it’s possible to do an upgrade from EE 2.5 to 5 and skip 4?

Lea Alcantara: It depends on how simple your build is.

Emily Lewis: So the more add-ons you have, the more likelihood you need to go to 4 before 5?

Lea Alcantara: Right, right, I think so, I think so, but 5 is so close to 4, I mean, it really was, that I think that if you were going to do an upgrade path versus an import or minor rebuild, I don’t think it was going to be that difficult, but if you are really already as far back as EE 2, you’re probably already looking at a minor rebuild anyway.

Emily Lewis: So let’s talk a little bit about that minor rebuild because it included changes to how we build templates.

Lea Alcantara: Right. So part of the excitement of moving to the newest version of ExpressionEngine was because of that new native functionality, and the native functionality specifically related to layouts and template routes, and part of the reason why this is exciting is that it allowed for more DRY kind of approach to layouts and making sure you’re not repeating yourself in your templates.

Emily Lewis: [Agrees]

Lea Alcantara: It’s like if I could just have one static page template and specific variables that can be reused in one place, that you add it in one place and it applies everywhere.

Emily Lewis: [Agrees]

Lea Alcantara: That was one of the major things that I wanted to focus on in the new version that just a pure upgrade path would not allow you to do.

Emily Lewis: Right.

Lea Alcantara: Like you wouldn’t, especially with our priority for like ease of use for ourselves as well as speed for the actual site to render, using a minor rebuild just made the most sense.

Emily Lewis: And I feel like the perk of having such a big jump in versions between the original and our current is like you mentioned the native functionality, but we never had too many add-ons to start with, but we ended up with even less this time around because ExpressionEngine has incorporated some of those control panel/UX features. Like back in the day, we were using WYGWAM and Matrix.

Lea Alcantara: Right.

Emily Lewis: And ExpressionEngine now has that sort of native functionality now that we don’t need an add-on to create that.

Lea Alcantara: Right. And with all this in mind, I want to bring up a question our loyal listener, Sean Smith. Hi Sean. He asked, “With all this, how long did the upgrade from EE 2 to EE 5 take?”

Emily Lewis: [Agrees]

Lea Alcantara: And as you mentioned, we built this site. So the speed it took to update wasn’t short, but it wasn’t as long as like older sites that we had to do deeper tech discovery for.

Emily Lewis: Oh, right. We knew what we were dealing with.

Lea Alcantara: Yeah, exactly.

Emily Lewis: Yeah.

Lea Alcantara: If you want actual time, I actually looked in our logs under CMS dev.

Emily Lewis: [Agrees]

Lea Alcantara: It’s 35 hours.

Emily Lewis: [Agrees]

Lea Alcantara: So that was 35 hours, but in application, if you take that 35 hours between projects and other internal priorities, those 35 hours was spread through five months, between July to December.

Emily Lewis: [Agrees]

Lea Alcantara: To dive deeper on what I touched on with the add-ons, Sean also asked, “What add-ons did you have no upgrade path, and how did you resolve that?”

Emily Lewis: [Agrees]

Lea Alcantara: I kind of already answered that. Really, if there was no upgrade path, the main thing was choosing something native.

Emily Lewis: Yeah.

Lea Alcantara: You know, maybe there didn’t need to be an upgrade path because there was a native solution, first and foremost.

Emily Lewis: [Agrees]

Lea Alcantara: And then if that didn’t exist, then we’d have to look for a new plugin that does the same thing that is compatible. So specifically, just a few old things that we moved on from, so we used to use Carl Crawley’s AdMan plugin to track ads, but our sponsors didn’t really care for that.

Emily Lewis: Yeah. No one ever asked for the information.

Lea Alcantara: Yeah, yeah, exactly, and then in the end, we replaced it with the free service called Podtrac that gives us more accurate and better analysis of our downloads, and we gave sponsors the option to add like UTM tags for Google Analytics to the URLs for their own tracking.

Emily Lewis: [Agrees]

Lea Alcantara: And as I mentioned before, like a lot of add-ons we used ended up being baked into EE, so some examples of that. There was no need for Low’s IfElse (editor’s note: This was actually Mark Croxton’s IfElse plugin) when the parse order improved after three major versions of ExpressionEngine.

Emily Lewis: [Agrees]

Lea Alcantara: We just used Erik Reagan’s IfContains plugin and now EE has native containers, Contain Operators actually that work exactly the same.

Emily Lewis: [Agrees]

Lea Alcantara: We used to use Low Variables, and now we use native template partials.

Emily Lewis: [Agrees]

Lea Alcantara: We used to use Mo Variables, but again, native functionality checks now.

Emily Lewis: [Agrees]

Lea Alcantara: I do think, “You know, take a look at the new documentations and see what those operators are.” And something Emily touched on earlier that affected this decision too, we used to use Minimee in the past to compress our HTML, CSS and JavaScript into like one concatenated file or so.

Emily Lewis: [Agrees]

Lea Alcantara: But because we now have new build processes that compress our CSS and JS before we deploy anyway, there was really no need for it.

Emily Lewis: Right.

Lea Alcantara: And then plus, Cloudflare, our CDN, has an option that compresses HTML so there’s no need.

Emily Lewis: You know, it’s been a while I feel like since we’ve talked about it, so let’s just underscore like the fewer add-ons you have, the better. That’s not to say add-ons don’t provide great extra functionality that you may need, but the fewer moving parts you have, the easier the system is going t be to maintain.

Lea Alcantara: Yeah, absolutely. Cheaper to maintain, time and cost-wise.

Emily Lewis: Yeah.

Lea Alcantara: So those are like some of the oldies that we moved forward. Let’s talk about the new things we used in this install.

Emily Lewis: Right, the stuff that you get with the new system, the new EE 5.

Lea Alcantara: Right, right. Well, actually, this is an old but new. So Andrew Weaver’s DataGrab has always been my go-to from importing into EE and this was no exception. He even worked with EEHarbor to help troubleshoot the next must-have add-on we installed, which is EEHarbor’s Assets.

Emily Lewis: [Agrees]

Lea Alcantara: We could have used the native EE File Manager and that was how we used to do it for the past eight years, but Assets just makes it easier to organize files and recognize subfolders without having to create a new file upload path, like every year, we had to create a new file upload path.

Emily Lewis: Yeah. It was like our to-do for the end of the year in December. [Laughs]

Lea Alcantara: Yeah. And then also we were less organized and we have decided we need to become more organized about our file management with CTRL+CLICK. We used to have this one giant folder for all social media and now it’s organized by date.

Timestamp: 00:40:04

Emily Lewis: [Agrees]

Lea Alcantara: And part of the reason why is because we didn’t want to create a new file upload path for social media as well as the MP3s as well as the transcripts.

Emily Lewis: Well, and also I think the social media was something we added randomly like four years ago when we realized we needed social media. It wasn’t even in the original legacy system.

Lea Alcantara: Right. There weren’t social cards a few years ago.

Emily Lewis: [Agrees]

Lea Alcantara: So that was a bit of a pain, and Assets fixed that. Tagger was a plugin that we’ve always had to tag our posts, and that still existed and it’s straightforward, and it’s pretty easy to import into Tagger as well since it’s just plain text separated by commas.

Emily Lewis: [Agrees]

Lea Alcantara: So that was pretty good, but a really big change for us, and which supports a new design for our transcripts was BoldMinded Bloqs fieldtype.

Emily Lewis: [Agrees]

Lea Alcantara: So that fieldtype allows a more flexible way to showcase our transcripts as well as embed our sponsor ads in the middle of those transcripts as well as other links and callouts that we want to add and mix into.

Emily Lewis: [Agrees]

Lea Alcantara: It used to be just one giant text field.

Emily Lewis: Yeah, and so this reduces the amount. Well, I don’t know. I think it makes the transcript look great, which was a huge priority. We talked about that I think during Part 1 with discussion about the typography changes that you made to the design.

Lea Alcantara: Yeah.

Emily Lewis: But I do think it adds a little bit of time to our content administration because what we used to have in one big block that we just dropped into our WYSIWYG or I don’t even know if it was a WYSIWYG. It was just a text field with HTML.

Lea Alcantara: Yeah, yeah.

Emily Lewis: We now do have to split that up a little bit, but I think the end result is worth that extra time.

Lea Alcantara: Yeah. It’s a lot more friendly in terms of the layout options for us and the type of way that we wanted to render transcripts on a website.

Emily Lewis: [Agrees]

Lea Alcantara: So for those in the Craft world, it is similar functionality with the Matrix fields with the ability to have multiple fieldtypes in one area or content types, so that’s BoldMinded Bloqs, and then finally, especially with our focus on performance, Stash by Mark Croxton still remains awesome and static caching is employed on almost all the pages essentially, like the only thing it doesn’t really cache are search engine results, I think.

Emily Lewis: [Agrees]

Lea Alcantara: Or search results of page, search results page.

Emily Lewis: Yeah. And hopefully, everyone in the EE community knows about Stash, but we do have an old episode from our archive where Mark talked about Stash and what his process was for developing it and what it does, so we will make sure to link that in the show notes as well.

Lea Alcantara: All right, so we have talked from top to bottom the entire process of refreshing ctrlclickcast.com, but we’re not done yet.

Emily Lewis: Right. Or done-ish.

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: But you know, that’s something that we strive to tell our clients, but it’s also true for your internal projects.

Emily Lewis: [Agrees]

Lea Alcantara: So website is a living thing.

Emily Lewis: Yeah, I think we’re definitely embracing that mindset now more than we have in the past, and perhaps had we been a little bit more “It doesn’t need to be a 100% to go live,” that maybe this might have been faster. But yeah, it’s worth it to embrace like launch with what’s there and just adjusting. Heck, it gives us fodder for episodes, which was cool. [Laughs]

Lea Alcantara: Yeah, exactly. [Laughs]

Emily Lewis: There were a few things we did not go live with, but are on the radar. The Prince CSS, it’s in place. It is bareboned as it can get, and I’d like to make it awesome, especially for transcript pages. Sitemap XML that’s there is basic, but I think it could be better. I’ve mentioned this on a couple of episodes before, but I only have a local service worker in process. I’d like to get it completed and on the live site. And one of the things that this was something Lea had thought about while she was designing and I said, “Let’s make it Phase 2 just so front end can be a little faster,” just some subtle CSS animations.

Lea Alcantara: Yeah. And I’m also kind of like waiting until we have Rachel Nabors on the show, too, to like get the best kind of advice for that, too.

Emily Lewis: Right. And then once all of those things are in place, I cleaned up my CSS.

Lea Alcantara: Yeah.

Emily Lewis: I don’t think it’s bad, but it’s not awesome. [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: And that’s not a thing that I would like to do, and it’s one of those things I almost never get to fully do and it would be nice to achieve that.

Lea Alcantara: Right. And of course, just random fixes here and there. As you kind of mentioned, we have some weirdness with our social media previews.

Emily Lewis: [Agrees]

Lea Alcantara: So we might need to adjust a few things. It could have been possibly related to that 301 redirect, but well, we just kind of have to wait and see a little bit.

Emily Lewis: Yeah. It could also be our meta tags. One thing I did to our starter files framework within the past year was – so there are some OpenGraph tags that Twitter will read for its Twitter cards rather than Twitter’s tags, so I wanted to get rid of some of the redundancies and it’s maybe possible I overlooked something or something like that.

Lea Alcantara: Right.

Emily Lewis: I want to go back and look at that.

Lea Alcantara: And you know, at the end of the day, we want to learn our lesson about neglecting the site and make updates with.

Emily Lewis: Yeah.

Lea Alcantara: Like again, not making everything perfect.

Emily Lewis: Right.

Lea Alcantara: But make updates that make sense on a regular basis so that keeps it relevant and useful, but for example, with one of the ones that I want to play with, like CSS animation, that lets us experiment with our own skills.

Emily Lewis: Right, right, exactly.

Lea Alcantara: So that’s all the time we have for today, but before we finish up, we’ve got our rapid fire ten questions, and it’s Em’s turn. Are you ready?

Emily Lewis: Yes.

Lea Alcantara: Okay, first question, would you rather travel to the future or the past?

Emily Lewis: The answer is based on like assuming I get to come back to the present time, so I would like to go to the future and then come back to present time because then maybe I can make changes to improve my future. Jason and I had a long talk about this before.

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: So future, okay. What’s the scariest thing you’ve ever done?

Emily Lewis: Psychologically, moving across the country. Physically, jumping out of an airplane.

Lea Alcantara: Oh, wow, wow. Who was your childhood celebrity crush?

Emily Lewis: I’ve actually been thinking about this a lot lately. [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: I think it’s a tossup between Rick Springfield, which for those of you who don’t know, he was just so amazing in the 80’s. [Laughs]

Lea Alcantara: Oh, my goodness.

Emily Lewis: But also Andy Gibb. He was pop artist, the youngest brother of the Bee Gees.

Lea Alcantara: [Agrees]

Emily Lewis: And he was a host of Solid Gold, which was like my favorite show.

Lea Alcantara: Right.

Emily Lewis: [Laughs]

Lea Alcantara: Oh, my goodness. What’s one of your pet peeves?

Emily Lewis: People who don’t leash their dogs when in areas where dogs should be leashed.

Lea Alcantara: Oh, yeah.

Emily Lewis: I take a lot of walks and I am allergic to dogs. I don’t want just dogs touching me and coming up to me. So yeah, leash your dog! [Laughs]

Lea Alcantara: What was your first website?

Emily Lewis: Yeah. I actually didn’t get into building websites until my 20s, so it was a portfolio for myself and just basic emilylewis.com. I think it was emilyplewis.com.

Lea Alcantara: Cool. What is your favorite time of the day?

Emily Lewis: Probably midmorning. I think that was your answer, too.

Lea Alcantara: Yeah. Late morning, it can’t be – early morning I hate. [Laughs]

Emily Lewis: No, I’m not even friendly that time of day.

Lea Alcantara: I know. What is your favorite place?

Emily Lewis: Home.

Lea Alcantara: Oh.

Emily Lewis: [Laughs]

Lea Alcantara: What’s your favorite emoji?

Emily Lewis: You know, I use the thumbs up or the blowing kiss one a lot.

Lea Alcantara: [Laughs]

Emily Lewis: The blowing kiss one, too, like family or loved ones. [Laughs]

Lea Alcantara: Right. What’s your favorite charity?

Emily Lewis: I have two that I want to mention too because we’re going to have links to them in the show notes; Special Olympics, I’ve been a big supporter of since high school and I’ve done volunteer work with them for a long time, but since I moved to New Mexico the Animal Humane New Mexico I think is just one of the best animal nonprofits and organizations here in town. They’re just amazing.

[Music starts]

Lea Alcantara: Very cool. Finally, sweet or savory?

Emily Lewis: Savory.

Lea Alcantara: Very cool. And that’s all the time we have for today. Hope you learn something to help your own side projects. CTRL+CLICK is produced by Bright Umbrella, a web services agency obsessed with happy clients!

Today’s episode would not be possible without the support of this episode’s sponsor! Many thanks to EEHarbor as well as our hosting partner Arcustech, and an extra shout out to Goren, our sound editor, and Joseph, our transcriber. They’ve both been the best podcast partners to work with. We’ll be sure to leave their contact info in our show notes.

Emily Lewis: And even though this is our last episode of CTRL+CLICK, we’re not completely disappearing. We’re archiving the website so all of our valuable content is still searchable and ready for reference on ctrlclickcast.com.

Lea Alcantara: And while the podcast is going away, Emily and I are still around. [Laughs]

Emily Lewis: Right. [Laughs]

Lea Alcantara: So make sure you follow us on Twitter @lealea and @emilylewis.

Emily Lewis: Again, before we go, another giant thank you to our listeners. You’re the reason why our show lasted so long, plus many thanks to our CTRL+CLICK Patreon fans for advocating and promoting our show.

Lea Alcantara: Thank you so much.

Emily Lewis: [Agrees]

Lea Alcantara: We love you all. This is Lea Alcantara …

Emily Lewis: And Emily Lewis …

Lea Alcantara: Signing off for the last time on CTRL+CLICK CAST.

Emily Lewis: That’s a wrap. Cheers!

[Music stops]

Timestamp: 00:49:49