It’s Q&A Day in the Drunken UX studio, and this week we’re taking a trip over to r/WebDev to see what people are needing help with. We picked a few of our favorite questions to answer issues ranging from work responsibilities, to two-way binding, CSS background techniques, and more.

Followup Resources

  1. “How common is it for developers to have multiple roles with different companies?”
  2. “What would be the best way to create a webpage like this (HTML/CSS), where there is a shape in the background?”
  3. “How to refresh text on a single page for a game script?”
  4. “Finding files that aren’t referenced anymore”
  5. “For a local service business, WordPress or my basic dev (HTML/CSS/JS) skills?”

Transcript

The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.

Hello, everybody. And welcome to the middle of March 2000 and 21. This is episode number 84 of the Drunken UX Podcast, and we’re gonna be answering Web development questions from the Web. Dev Subreddit. Ladies and gentlemen, I am your host, Michael Fienen.

I’m your other other host. Aaron, How’re you doing, Michael? And on this doing about March

spring has sprung. Spring spring has sprang. We had

We had 70 degree weather the other day and I almost cried. It was so nice.

It will do that to you. You feel that seasonal effective disorder kind of wash away for a minute and yeah, uh, folks, if you’re enjoying the drunken ex podcast, we should run by our sponsors over at New Cloud. You can check them out. New cloud dot com slash drunken ux. That’s in you cloud dot com slash drunken ux use. Use a little slash drunken ux on there, so they know we sent you.

They do interactive maps and illustrations and and campus tours and and things like that. A little more three D stuff of of recent and whatnot. So go check them out. And outside of that, you can always check us out. Hit us up on Twitter or Facebook. It’s like drinking you x instagram dot com slash drunken ux podcast. Or you can come chat with us any time on discord.

If you go to drunken ux dot com slash discord, you will get dropped right into our discord channel. Let’s see, early morning on a Saturday, the drunken component of drunken you X is going to get shelled pun intended for the morning. But like coffee and water,

I love to like mine say that I’m drinking something interesting. But like I had coffee earlier, I’ve got water right now.

Gonna go a little straight edge today. That’s, uh, that’s all right. I can’t. Can’t be drunk all the time. Um, I wanna talk to you real quick, Aaron, before we jump into these questions, we’ve mentioned sort of passing Lee, um, and certainly on on twitter and stuff. But I’m in the process of ripping our website down to its studs, and I’m rebuilding the theme in its entirety.

Uh, I want to start with page speed. What do you think? The and I don’t know. You maybe have have cheated and seeing this in the show notes already, but what’s the page speed of drunken ux dot com on on desktop right now.

Um, I would think that our, like main site would probably be, like 80.

Yeah. What do you think it would score on mobile?

I have no idea. I don’t usually access to the site on mobile. Um, if I had to guess, um, all I’m just going to arbitrarily pick 70 for Mobile.

Um, on desktop, we scored a 69. Nice

or wait? No, not nice. Not that

that’s bad.

Yeah,

but the answer was the right answer. On mobile, we score a 46. Holy crap, dude. What? So that’s that is today. Right? Now, if you go to drunken ux dot com as you’re listening to this in real time, it changes a little bit from test to test. But that’s a pretty pretty close approximation there. From an average standpoint, a lot of that we are running WordPress. Obviously, a lot of that comes from all the plug ins that get loaded.

We’re using a theme that is a canned theme that has a lot of extra stuff built into it. It uses J Query. So you’ve got that overhead factored into it. Um, you know, the way it processes images is sort of a one size fits all kind of situation. So there’s a lot of stuff here that’s factoring in sure. I’m not going to like a static site generator. I’ve considered it in the past. Um, just don’t have the time to dive in that far quite yet.

Um, so I haven’t I haven’t done that, But my idea here is I can get rid of a candy theme and all of its settings I can stick with Just are we use a plug in called Seriously simple podcasting that basically creates are, um, custom post type and some of the supporting fields, but it doesn’t add anything to the front end on its own, so I can pick and choose explicitly what I want out of that.

So I’m stripping this down, getting rid of all these extraneous plug ins. You know s e o stuff I’m going to build in, just scratch. So there’s no extra CEO plug in. I’m gonna build in some cashing and things. So I’m saying all of this because I want us to take a bet. I’m hoping probably by April I will have this thing in the can and probably released to the wild.

And we are going to do a whole episode actually, going into what we did, how we did it, why we did it. In some cases, we’re gonna do the episode. We’re going to talk about the redesign and what we did and all that. But before we do that, the reason I bring this up is I want us to take bets with each other. I have ran no preliminary tests so far on on the on the fame.

The only thing I’ve tested is accessibility, which, as of right now, we have zero automatically detectable accessibility problems in the theme. So just high five us boom. But I want to take a bet. So we are 69 on desktop 46 on mobile.

But what are we betting on, though?

Um, well, we’re betting on what the score will be after the redesign.

Okay.

We need to come up with what we are going to, uh, Beth. I mean, not much of a bet if we don’t have something on the line, Right?

Right. Um,

whoever Here we go. How about this? Whoever whoever loses, um, has to buy a copy of Don’t make me think that will give away on a future episode. Yeah, that’s good. I like it. You’ll you’ll, uh, For folks who don’t know, the podcast does not pay for itself. We you show out that money, So Okay. Yeah. So that’s what we’re gonna do. Whoever. Once we do this, we’ll give away a copy of Don’t make me think. Or maybe something else will find a book.

We’ll find some good Web development, tomar or content strategy. Um, writ that we will give away and the loser has to pay for it. Um, okay, So here’s I’m gonna I’m gonna take first swing at this. I’m going to say, and here’s Here’s how we’ll gauge this. Let’s set some ground rules. So there’s two scores, right? There’s mobile and there’s desktop.

So Well, well, guess on both of them, and then we will add them together, and it will be like total differential in score. So that’s going to be 100 and 15 is the baseline. So 69 plus 4600 and 15. So whoever has the smallest differential between their total and the actual outcome then So if we

like a composite,

right, so, like, it’s just to put it simply like if we scored 100 on both that total is 200. And if I said we’re gonna score 95 on both then I said 190 it was actually 200. So the differential is 10 God, if you said we got worse and we would only get 10 on each, obviously you lose that. I’m going through all these rules like we’re, like, doing what? If legally, with everybody else. But what?

What should, uh, tiebreakers be for, like, let’s say that both of us were off by 10. You overshot, I undershot.

Oh, um, I think I think in general, under should be over.

Okay,

Think of it like price is right. You know, the closest without going over is, I think, probably a fair assumption there Because let’s not be overly optimistic and think too highly of ourselves. And let’s let’s add a tiebreaker, which is page load time. Okay, so we’ll take a stab at what we think. So here, let me, uh, let me pull up drunken you x right now. And I’ll give you what The baseline load speed is.

Okay, according to the Dev Tools. And I’m using chrome here. Our finish time is 6.51 seconds. Okay,

so that’s we’re looking for First content. Full paint, or is that finished? Finished?

That’s finish finish. Would you rather go with load speed or dom? Content loaded?

We can do. Finish finish. That’s fine.

Finish finish is 6.51 seconds. So we’ll be looking for an improvement on that. Okay. Sounds good. Okay, So my my guess is mobile. I think we’re gonna improve to an 81. I think our desktop is going to improve to a 92. Wow. Yeah, I’m writing most of the code, so I’m thinking incredibly highly of myself in this, but arguably and I I will admit this straight out.

I do have some control here because I could test this in the meantime and be like, oh, 91. I need to push it a little harder. And I can I can find some optimization. So this does favor me. I think a little bit more than you, probably. But I will. I promise not to cheat too hard on it. I’m gonna I’ll be

I’ll be the bad cop here, and I’ll go with what? My what? I thought they would be initially and I’ll say 80 for desktop and 70 for mobile. Yeah, it’s about 10 lower on each. So

songs. I don’t go wildly over. I think I’m okay. So I’m gonna say for my tie breaker if we need it for page load speed, I think we can get down to 3.42 seconds. That’s a finish time.

What about 6.5 right now?

Six. Yeah. Was it 651?

Uh,

yeah. 651

Think I’ll go with I like the number of 4.8. Okay. He was like a base. It has lots of even numbers in

it. Yeah, and just for everybody. We’ve talked about this before, but if you’re wondering what the difference is between dom content loaded versus load versus finish. The finish time is the time, as it’s calculated from when, like all of your HTML is loaded. But also all blocking and non blocking resources are downloaded as well as like any promises, any asynchronous stuff that’s happening in the background like basically, it’s everything has resolved.

That’s something. It’s interesting. If you ever go to, like especially like a news site or something like that, you’ll actually, if you open up your Dev tools and just watch the network panel that finished time will keep going up and up and up and up and up and up and up and up and up and up and up and up and up. I broke my brain, uh, keep going up because they have, like, beacons and stuff that are running in the background for tracking and things like that.

So it means the pages never truly finished in the eyes of the Dev Tools. So that’s where he said, we don’t have anything like that. So that’s why we can rely on that finish. Time is like, that’s That’s the true like. This page is absolutely done, so we don’t load any media in the background or anything like that.

We We originally did this an episode 68 right? That was the one with people. I don’t know. Performance is page performance. Yeah,

Um, just as for for a, I don’t know, bonus round. This doesn’t mean anything, but what about page size? So we’re right now, the transfer. I’m gonna go off transfer size because this means, like, you know, this is like compressed. Right? Okay,

hold on. Is this including? Because we have the player on the homepage? It is including the

no, blah, blah.

So not the player data

Not. Yeah, we we do not pre load the audio content behind the scenes like this is just the page weight itself right now for what it’s worth, actually, not bad. 1.6 megs. That’s Oh, wow. Honestly, pretty good. I’m going to say, uh I think I can get us down to 1.2 megs. That that might be a little big.

I’m gonna go. Or where are we scrapping J query? Yes, I’m gonna go with I’ll go with 690 k. Okay,

So it’s on me to, uh, make sure Well know to make sure that optimizing image as well. Yeah, because that’s really you know, at that point with the background graphics and stuff like that, you know, that’s going to be a big chunk of that. But, you know, theoretically, yeah. I mean, I I think that maybe actually doable. So there you go. That’s, uh, we We’ve set this up. This is your place. Your bets around,

Um, if you want to shoot us a message on Twitter or Facebook and let us know what you think, you’re what your guests would be. Uh, maybe that’s, uh Well, we’ll hash this out in between episodes. But maybe that’s what we’ll do to give away a book. Because to see, maybe who can Yeah. Uh, who gets closest? Yeah. The

person who gets those closest gets a book bought by the person of you or I that didn’t guess. Closest that

didn’t get closest. Yeah, well, we’ll we’ll work that out in the background at all. Post some actual rules to that down the road. Cool. So we went over to read it and just kind of cruised around, uh, r slash Web Dev and I saw some questions there, and I’m like I’m gonna grab these questions. We’re just gonna answer them. Um, so this will be kind of a fun little, uh, mishmash of of topics. Um, nothing real, like, super heavy.

Some of this is pretty introductory, some of its technical. Some of it’s not, um, this first question, for instance, this comes from, um, Low Sandy’s. They asked, how common is it for developers to have multiple roles with different companies? They say, I’ve heard that some developers take on multiple roles and in turn, have several six figure salary incomes. How practical is this?

Is this really that common? I feel like it would be easy to become burnt out, and I’m having trouble understanding how some people balance at all. So this is very much burnout. Question a responsibilities question.

My first thought of that is like, that’s some bullshit right there. Like, why are you going to take multiple six figure roles and multiple companies like That’s shitty, like there are a bunch of people who would love to take that kind of role and have one of those, and you’re holding several

Well, it might. It might be a case of the wording. There I don’t know that they’re saying like they’ve heard of people that the one person is taking up multiple roles, but like they’ve just heard of people like collectively covering multiple roles and as because this is something similar happened to me, actually, one of my first jobs, where they cut us down from two people to just me. But in turn they gave me half the other person’s salary.

Um, so it’s like they, you know, they sort of smushed things up. And that’s kind of how I think you get to some of that thinking. Um, I will say this. Let me let me start with this because they started with it. Money can only make up for getting spread so thin. Yeah, that that job that gave me a higher salary after they got rid of the other person, They were very smart to do that because they were doubling my workload.

Uh, and they knew that if they doubled my workload and made me work for the same amount of money I was gonna walk like that was that was not even a question. And so they got out ahead of it. They still save money overall, but they also paid me enough. I was not making six figures. I was not making anywhere near six figures at that point. Um, but there is certainly a point where those workloads you can only throw so much money at a person.

And this goes straight to what we just talked about in burnout, right? Like, yeah, I will put up with a lot of stuff for money, but there will be there will come a threshold where your time outweighs any dollar value. They’re gonna throw it. Yeah, and you have to value yourself enough at that point. Now, where you are in your career affects where that line is where you are, you know, professionally where you know you are in terms of how much you make.

Now, versus you know. Are you moonlighting? Are you doing other things already? Um, my, my other thing, I would say I think it’s very common, really. The notion there’s there’s a couple questions here, right? One is how many developers take on multiple roles. I think that’s well, that’s a given everywhere. Yeah, but but

this. But what I’m getting for this question, though, is that they’re saying you’re not only taking, you’re not wearing multiple hats, you’re holding multiple roles and getting paid for all those roles. Multiple incomes. I I like. I can’t imagine I can understand a company doing like something What they did with you, where they emerged to positions and then paid, give you a pay bump.

Um,

I Every employer that I’ve ever worked for has always had a like clause in the hiring hiring agreement that I’m not allowed to hold full time work for anyone else, especially a competitor or especially in the same industry.

Non compete.

Yeah, yeah, So it’s

well, let’s let’s separate these two parts out and keep it easy. First and foremost, I’ve heard that some developers take on multiple roles. Yes, yeah, yes, Everywhere I mean roles overlap, you know, even as a developer or whatever it’s like, it’s natural for you to do things

how often you say you buy you X month together, right?

Yeah. Ui and UX are two different rolls, arguably two different specialties. But

what is what is full stack, if not work? Persevering,

right? Like but

full full stack implies, Like usually when people say full spot, it’s like devops back End database. Bright end. And then whatever else, incidentally, comes up with those

which yeah, each one of those in turn, can be its own discipline, as it were. So And and the smaller company is, the more likely it is that they you will do that. Larger companies, I think, obviously are better at diversifying. But even then, like, you will never get away from that. It’s a it’s, I think, a rare, rare beast that’s like you get hired into a design role, and that’s literally the only thing you do.

And I would argue that that’s bad, like you need to have an understanding of the adjacent disciplines and be able to flow in and out of those a little bit to be good at what you do, you need to speak. The vernacular is you need to understand why those disciplines exist and what makes them valuable, because we have to do them full time.

It’s kind of like when I and this is gonna be something I’m gonna be talking about soon On on the show is analytics, right? Even if you’re a developer, I would argue it’s immensely important to understand how Google Analytics works so that you can build things that are trackable. And then you can make informed, intelligent decisions about changing that based on user data.

Um, so the role thing, I think it’s definitely that’s That’s an easy one. You take on multiple roles. You just do, Um, and how far that goes depends on the organization and the needs and what you’re willing to put up with. Quite frankly,

I think if we just omit the having several 66 figure salary incomes, that seems weird. I’ve never heard of someone doing that

before. Let’s simplify it. Let’s keep that simple. Let’s just say

everything else that I’m in agreement with you.

Let’s just say somebody who does multiple things, Let’s let’s say like a full stack developer. Mhm. But let’s say, a full stack developer who got hired as the Web developer like that’s just the title they were given their Web developer. But when they walked into this company, they learned well, what What they really need is a full stack.

They have a server in a closet, you know that they want to move to AWS or something like that, and they need somebody to do that and to put the database up there and to set up a lightsail. Instance. And all of this and that person is you. So you got hired to be a Web development. Reality is your full stack developer with all of these roles, Um, you got

hired into an orchard of low hanging fruit

That So when we think about this idea of the six figure salary income this person is taking the multiple roles, could they make six figures doing that? Yes. The answer is yes. Yeah, here’s where I think the commonality starts to break, though. Is it common for somebody who walks into one of those roles? Is it common for them to make a six figure salary income? I would say no, I think it depends.

I think it depends on where you are first and foremost what your experience is. But yeah, that’s going to be the thing, right? Six figure salaries are really reserved for senior level developers, designers, researchers. Uh huh. You know, you can go to salary dot com. You can go to check my salary dot careers. You can go to these places and punch in what you make and see how it compares to other people in your region or across the US.

What you’re going to find is to make six figures, you need 3 to 5 years experience or you need to be operating in a highly specialized area. Like if you’re doing like hardcore machine learning, you know, computer science level stuff. Yeah, you can come out of college and make 120 grand. Um, that is a possible thing, but very specialized. And ironically, you’re not probably going to be taking on multiple roles.

You’re going somewhere to be an ML specialist, or you’re going somewhere to be like one of those, like, you know, cloud architect. I’m the arguably. You could say that’s multiple roles. But if you’re like an AWS engineer, you’ve gone and gotten a W certification. Yeah, you can make 120 grand a year doing that. And your job is aws all the aspects of AWS, but still a W s.

Uh so, uh, ironically, I think that higher income is more likely to come from specialization and experience not from especially experienced, Yeah, not from accumulating responsibilities. Let’s say in fact, accumulating responsibilities is a surefire way to not get more money, you know, getting asked to do something and then learning. Oh, he knows a little bit about databases.

Would you just keep doing that If you don’t sit there and say, Well, yeah, but, you know, if you want me to do instead of hiring a database engineer, you should give me $10,000 more a year. But you can do and should do, like any time I’m a huge advocate or a huge proponent of advocating for yourself. Um, so I don’t know. That’s that’s my thought on it.

Yeah, well, I think I think it’s going to depend a lot on market. Um, if you are getting a job in a bigger

like East Coast West Coast,

the six figure incomes that I’ve seen have been in like metropolitan areas. New York City, D. C, um, Bay area.

The cost of living a little heavier?

Exactly. Yeah, And in remote remote work climate, it’s been really favorable for that. It’s the stuff like the stuff you read about salary from like the big Silicon Valley companies like, unless you want to work for one of them and I don’t I? I’m not interested in working for a fan company. It seems like for all of the salary extra you get, like, the stress level would be, like, not even worth

it.

Okay, I I think I’m too old to I don’t think they’d hire me.

That’s ageist.

Well, I it’s true, though. I don’t think they would. I think they want people, like, right out of college.

Yeah, maybe. Yeah. So moving on to question two. This comes from, uh, avocado avocado with some emoji stuff happening in front of their name that

it’s minus minus underscore minus avocado.

They’re asking what would be the best way to create a Web page like this html CSS where there is a shape in the background. And so there’s a screenshot in this one. I’ll describe it here. Um, he says, ideally, he or she says, Ideally, this background shape will expand according to how long the text is in the section. But just having a background shape is there.

Uh, I could do this with absolute positioning, but is there an easier way? So here’s what they’re showing there is. It’s kind of a date listing of things and there is a header. And so think about this. It’s like a section, right. It’s an HTML section, but on the top and bottom, it curves. So if this were a square box, it would kind of have a circle background to it. Give or take, it looks.

It looks like what would happen if you put a balloon into a narrow chamber and inflated it

right? So as it gets longer, you’re gonna have you’re gonna have a space of flat. Yeah, in the middle, but with a curvy top and a curvy bottom. Now this is a screenshot, and there’s no u R l So I can’t tell what it does when you stretch it horizontally. What? The way that curve behaves, Um,

like

does, does the curve become more pronounced or does it just scale? You know, that kind of thing? Because there are a lot of ways to go about this. Um, all right,

I have an idea for how it approaches, but I would hear yours.

Okay, um, mine is one of 21 of one of two ways I would go about this. I would either simply use an SVG background that’s set to cover, uh, so that it would, you know, it’s able to always fill that space now that will, in turn stretch. Um, you know, I the height probably wouldn’t change. You can do it if you set your height to Vieux Port with units. You know, you could say I need this to be 15 Vieux Port with units high.

Then as you collapse it, it will actually scale a little, you know, in in turn with the width. Um, if you just needed it to stretch, you know, horizontally. You can just set the height the you know, 15 rams and just leave it and have it be good. The other way is you can have a you know, just a background color or whatever with a clip path and define a clip path, which boxes out your background.

Now this has a foreground and background color along with it. So where the curves happened, there’s white. It’s a it’s a black background, but where the curves cut off the black background, it’s white on top, and it’s purple down below. So so using that clip path could reveal the background color. At that point, that’s how I would that’s that’s how I would go about it. Some of this depends on the art direction.

If you have any, you know, if it’s just you making the decision and do it the way you want. You know you may have art direction coming from, you know, your lead designer or something, and they may say, Yeah, here is how I want this to scale, which would impact whether or not you use to clip path or what have you. So

so what I would do. And this is kind of like an old maybe like an old CSS approach is. I would have a fixed with container that contains the whole rounded shape and its contents, so that if you expand horizontally, that container remains sustainable, so it never gets wider building. It’s longer the contents I would probably use, like a background or the top and bottom, uh, curves, although that’s kind of an old solution. And maybe clipping path is the better way to do it nowadays.

So you’re talking, like throw up like a PNG back there and yeah,

or even we probably like Jennifer. That’s pretty smooth, though.

Yeah, like in my head. I’m thinking like, how do I do it without any, Like Raster artifacts, for instance.

Yeah, yeah, we’ll do better,

Um, and

then and then the middle section where it’s flat. Um, that would be a portion that could expand, like infinitely, because it’s basically a rectangle you have like like an arc, like a kind of a button convex shape sitting on top of a basically, it’s like a hamburger. The buns are the images, and then the burger part is a rectangle,

Um, to me, the whole divorce section or whatever just has a black background, like like if you turned off the thing that’s controlling the curvature on the top and the bottom, you would just be left with a rectangle that’s black. And so I’m thinking, like, Okay, how would I just get rid of the black where I don’t want it as opposed to painting over it?

So if we if you did like the raster effects, you would you would be more like covering the black, which I mean is a fine approach. But that’s sort of the difference between those two. Those two strategies,

I think, to get it to size right vertically. Probably my first instinct is to do like a clear fixed kind of thing, like having the having the black portion the shape contained the content and then having clear at the bottom of the content so that the black portion has to expand to accommodate it. But I think there’s probably a better way to do it nowadays with Flex Box.

Yeah, flex box.

Yeah, I I think that might be the better way

to do it via the thing that jumps out at me, too. From a technique standpoint that I think is useful for people to try. You’ll see this in other contexts as well. And like one thing I’m seeing here, Um, there’s a an asterisk that is like separating sections. So the one in question is awards and certifications. And then, at the bottom of the screen shot oh, started a skill section, and there’s this asterisk there.

You’ll also see this when people use like line separators. Um, we talked to the start of the show about the redesign of the drunken you excite. I’m using a similar approach for the mobile menu drop down, so there’s a little horizontal rule in between menu items and the way you go about that is by using before and after pseudo selectors in CSS. And so you can say I want a before element that is this pseudo element.

It’s not a real thing. It’s something that’s there for the design position, absolutely within your div at the top and do it after one at the bottom. And then you can style those elements explicitly and have them positioned within your DivX exactly where you need them and have everything else flow on top of them because everything else will be relative. That’s that’s abstract and hard to maybe convey over, you know, over the podcast.

But, um, if you look those up before after pseudo selectors, um and you know, with separator or something like that as your keyword in your search, you’ll you’ll see some examples of that kind of approach that I think will start to make sense, I think. Okay, Number three Number three is fun. This one’s a little longer. How to refresh text on a single page for a game script. This is from Blink 64 he says. Hello all.

I am very new to Web development and JavaScript, so I apologize for what is likely a question with an obvious answer. I am basically wanting to know if my idea is possible and maybe get some advice on the best way to implement it. I have been learning Python and wrote a script that is basically a wheel of fortune game. The game is completely played within the terminal.

I am slowly trying to build a personal portfolio page and would love to have a Web based JavaScript version of this game. Some of the things I do not like about the current Python version is that the terminal just scrolls down and new lines are created as you play the game, including it always printing the players current score after each round, as well as the menu of play options.

I’d like to implement this on a Web page and have the page dynamically refresh the important game messages, game board and games current score, but also have some static items like buttons to control whether the player wants to buy a vowel or guess a consonant etcetera. Is this possible? The law Does that make sense? Did I read that one?

Yeah. Yeah, well, I guess like the 11 problem is with anything with terminal. Is it? Scrolling is easier and rewriting onto the page where you like statically, is a lot harder

to do. I’m gonna go with the assumption, they said, that rewriting it in JavaScript is apparently an option. So let’s just start there and say Yes, rewrite it in JavaScript.

Oh,

yeah, first and foremost,

I. I love questions like this, by the way, I frequent the rails and Ruby Star credits, and I love newbie questions because it’s like a great opportunity to, like, kind of reverse gate, keep and help welcome people into the community and help them out with problems and help build their confidence. And like it’s like the first interaction someone has with any kind of community will greatly influence their likelihood of sticking around. And so I I love those opportunities.

So this

is great. Like I love questions like,

I think, depending on how bold Blink 60 forest feeling, one of the things you could do is write this as an angular app that’s on the page. Angular already has to a binding built into it. So when it comes to something like updating fields, you know he talks about the score field, um, and game messages in the game board.

Those things could just be, um, you know, uh, like Pogo’s or something like that in in the angular app that are bound to those elements. So when the variable changes, the value on the screen just changes instantly, like angular just solves that problem straight out.

I’m not disagreeing with angular as a possible solution, but I think in this context, because this person is clearly very new, having them move into a framework before they have a good handle on the languages, you probably know.

Yeah, like that’s but that’s definitely a big divide into no doubt, but I I say it more just to emphasize what he’s talking about is a theory called Two Way Binding. He’s got variable data that needs to be reflected on the page when it changes, and angular just happens to be really good at that.

I think so. My my classic classic Web approach to this is, um, you know, you have you have you buy dangers that you want to do, so it’s going to be javascript, and I’m going to discuss, since it’s well fortune. I’m going to guess that he wants or they want each, um, letter to be like its own thing. That it can change and not just have, like, the current word reprints on the screen and text box.

Um, so I think what I probably do is like a sign like if we’re, like, discussing solutions here, like a sign of, like, a unique ID to each of the like letter boxes and then a like an Ajax call requesting a letter. And then the Ajax called responding with which ideas to update and then updating those with JavaScript to be Aquarius electors.

That’s that’s like a very, um, it’s like it’s a very classic approach, but but I think I don’t I don’t know that this person’s needs necessitates something more complicated than that at this point, especially if they’re looking to just build their portfolio.

Yeah, you know, there’s a lot to say for you wanted to just do the thing you wanted to do, or you want to try to write it like in the most efficient manner. I would usually argue that if you’re if it’s something I want to show off, I wanted to also show off efficiency and whatnot.

If it’s just something I’m making that I need to use for my own website or like I’m gonna throw a couple words out here if anybody wants to go Google it, um, as part of the solution, I would do something like a You don’t need to I d anything. I don’t think that’s necessary except for like your spaces. So score the score. I can very much see just having an idea on it for simplicity thing. But like, let’s say the words.

So you know the game board that has the solution on it. All you need to know is how big it is. That’s it. If you stored the solution in a string and used what’s called a spread operator, which is just putting brackets and then three dots around your brackets, three dots and then your variable name.

What it will do is you can then pass that to a map function, which on a string means it’s going to literally spread that string out character by character and then do a for each on them. So when somebody picks a letter, what you can do is trigger that spread operator, have it run the map and say, Did whatever was just clicked match any index in our solution. And if it did, then every index of a letter box bill with that letter.

So it’s like you’re you’re mapping from your solution to your game board is completely and totally agnostic of any solution you ever pass to it. It is 100% reusable. The that’s that’s one thing that’s again, that’s that’s a hard concept to convey in X words I’ll see about. I’ll throw something in the show notes for the spread operator, um, to kind of show some examples of that. It’s super cool, super useful.

The other thing, though, that goes to the heart of what he’s asking about. How do I change something on the page? So let’s say it’s the scoreboard, right? I need to show, you know, this person just made $1000 the you need to obviously no the score element that you would probably have a player, one score player to score player three score and the specific JavaScript method that you want to tie into for those objects is either inner text or enter HTML, depending on what you want to put in there.

Probably just inter text, but that lets you select a node. So you would you would do something, like, you know, document dot Get element by I d player score one and say players score one dot inter text equals. You know, in this case, if you had it with, like, an integer or something, you could just do like a plus equals, um plus equals 1000 or whatever. Um, yeah.

Or, you know, however your formatting that it’s just a string, you could just you literally just take that number out, parse it to an integer at it, format it, stick it back in. Um, but that’s the simple way like it’s literally that easy. Just chain target the inter text of an element and pass it. Whatever value you needed to have number four comes from techie Dad. Techy. Dad wants to know about finding files that aren’t referenced anymore.

This is also a long one. Um, I have an old classic SP application portal that I created for my company almost a decade ago. It contains many different web applications, all running under the same base look and feel using commonly included SP, CSS and JavaScript files. Obviously, this isn’t very up to date technology wise, but it works for the small applications that it runs.

The problem is that while I don’t have the time to redevelop all of the applications using more current Web technology, the folders have accumulated a lot of the Detrol Detrol tests. That’s always a hard work for me to say.

I said treatises that wrong

Try this. I don’t know. Maybe that is right. Uh, for me, it’s It’s Latin and I got to go back to high school and I’m thinking, Well, it’s a short I am back. It doesn’t have a macron over it. You might

be correct.

I always want to put it a second are in there. I want to see, like directories or something like that is what my brain wants to say. Um, there are a S P files that were once used and are no longer in use their job script files that were replaced with other scripts. Their CSS files aren’t used anymore. My issues locating these files. There are 5200 files to go through. If I want to check to see if some file dot SP is still in use.

I can run a text search to quickly find any references to it. If there are none, I can remove it. Uh, this is tedious to do on a large scale, though, obviously, um, I don’t really want to search through almost 1500 javascript files one by one to see which ones are in our reference. Basically has a has a website. This website runs on a server. The server has files on it. He’s trying to figure out how do I locate the files I can get rid of to reduce the footprint.

I actually wrote a ruby script that did this years ago when I worked at Cornell to solve this very problem, but with images. So they wanted to know what images we could get rid of that weren’t being referenced anymore. And, um, I solved it. Uh, I basically used Red X on the files, and I looked on all the source html um and I would look through and find any reference to an image that matched a like a final named pattern ending in an image extension that we used.

And then I would like every file that would be looked at. It would just build out this big West of you know, which which file was referencing it. What file was being referenced? And then from that asset list, it would take the asset list, and then it would scan our asset folders, and then it would compare the two and then basically give a differential. Like what? Files aren’t being referenced all.

Were you using Grab under the hood for that? Is that, um or was there like some ruby function that specifically did it?

I think I was. I think I was iterating directly using Rubies File I o.

But

But nowadays, though, what I’d probably do is I probably do like rip rap or something. Um, do use rip crap.

I don’t know.

I’m assuming they have it on windows. Also on Mac, you can get it with, like home brew, brew, install, drip, drip and then the next. It’s just like sudo apt install on a plan to adapt installed the draft. It’s, uh it’s grip, but rewritten in rust and interesting. It does fancy stuff with things that rust is able to do that are faster and more optimized, um, than old

Grey. Basically, it’s great, though, is basically a Lennox command line application that lets you do things like search inside of files so you can run it on a directory like a Web services directory and and do kind of what he was, what the techie Dad was describing. You can search through the files. The problem is, it’s, you know, one at a time kind of thing. So obviously the you know, well, you can

you can do you can do it so you can do grip. If you grip, grip, grip, you can pass a regular expression to that is the file name. And then you can tell it, um, the output will include the file name that has looked at as well as what was what was matched, what was found within each file. Um, so it’ll give you a full report and there’s man flags.

You can do that. Will, like, kind of either show you just the file names or just the output or whatever. However you want it to be.

Yeah, the challenge there is you have to be comfortable with, like Lennox scripting, you know, bash scripting. Um there are a little bit. There are two ways you could go about this, that our tool based that I know of, and I’ll throw these out there. One is a script, and you can just go grab it off. Get Hub will have a link to it in the show notes called Web orphans. And what it does is it takes a domain name and it takes a local directory.

It crawls the Web site, making a list of all the files that it has, and then it crawls the local directory and makes note of all of the files that it didn’t ping off of as it was going through all that. So that’s one option. Now, obviously, that is a command line tool that runs on Lennox. Um, so you have to have some kind of server access regardless, And that’s true. No matter what you want to do here, you’re gonna have some kind of access.

Uh, the other is a graphical tool. Um Z New Link Sleuth. Have you used this? Erin Xena goes back a year like I don’t think it’s even been updated in probably a decade. Um, but it’s like one of those super basic, um, user friendly crawl my site and tell me errors type tools. Um, really great for finding four fours on your website and things like that, cause it’s just a basic crawler. It’s a spider, um, but it has some extra things that can do.

One of the things it can do is if you give it ftp access to your server. It can use that while it’s crawling to give you an orphan file report so it crawls. Your site does exactly what the Web orphans does. But instead of running on the server and taking a local directory, ZANU uses FTP to get into your directory and compare that against what it calls on your website. Z New works on Windows, though, which is may be beneficial to a lot of folks.

Um, and you say you just have to have FTP access. You don’t have to have FTP access to use it for fro for checking or anything like that. But for the orphan file check, you do. So those are my 22 suggestions there. Besides manual, I

call everything I would say if you if you are in Web development, um, and you’re looking for a fun and easy and useful way to level up. Learning how to use grap effectively is awesome because you you can look at not just like files going through files, but you can look through any stream of text. So if you’re tailing a log,

you can

tell it you can pipe it through grap. It’s the only show. Me Always show me log entries that begin with four or four. Or, um, if you’re looking through a massive textile like, uh, you know, show me this text file, but only show me lines that have, like, the word fox in them or whatever. The great tool.

Okay, our last question for the day is from mhm. Big bump up, drop top, B, B, B,

B B, and Bobby

Drop top that they are asking for a local services business. WordPress or my basic dev html CSS JavaScript skills. Uh, so I have a decent understanding of HTML JavaScript. CSS node. The most complex project I have built is probably just a to do list that is, that uses local storage. I am just barely starting to learn S c o. A friend wants me to build a website for his local business.

It would likely just be a landing page with information about his services reviews brought in from his socials and his contact information. In the future, we might add more complex features, like booking an appointment through the site. This is more of an emergency service. Cosco is very important. Also, I have never deployed a site that will have actual traffic. I don’t know much about security or improving load speeds.

For these reasons, I’ve been looking at WordPress as it seems that that will cover much of my shortcomings. But I would prefer to not have to learn a whole platform if I don’t have to. Am I overthinking? This is handing? Are handling security and load speeds in the CEO that much harder when building from scratch? Or this WordPress actually provide major advantages for these types of sites.

There’s a lot of other questions that I have the know before I made a recommendation, but based on the fact that this person has a bear understanding of HTML and CSS and that the needs of the business are effectively just basic basic information, static information, I would recommend like a status that generator deploying, like network fire or something, or could have pages or whatever.

Uh, I wouldn’t even go that far. Um, I mean, they sound very much like a junior Dev. Um, clearly, I mean, when they say I’ve never had a site that gets actual traffic, I mean, so the thing is, while yes, a static site generator I think could do this. I think that’s a It’s kind of like this overcome. It’s kind of that that earlier question it’s like, Yeah, that’s a bit much, I think, to get into for that. No, you’re

right. You’re right. Static site is I think, what I meant

what I was thinking static HTML.

Yeah. Yeah, not like I mean, WordPress would be easy to set up, and I guess, like, design wise, it would be simpler because there’s a lot of perfect themes. But,

I mean, I would say, Stay away from the board, Karen feeding involved. I would stay away from WordPress. I don’t think it’s needed. I think extra, um, one thing you could do and that I’ve done in the past for people who have needed this exact kind of thing, like they just They need the brochure ware type site. Right? Get a grip. Oh, get up Pages. You now have a server and a place to put your code and keep it managed.

Um, it will host all your images. It will host all your javascript CSS like it works. And you can point to custom domain at it if they need one. Um, the answer to the question of CEO is kind of interesting. Like they’ve included. This is kind of a need, but learning s C O is certainly a different skill set from learning html necessarily. Um, now, we did do our episode here a few weeks back about head, right, Everything that should go into ahead.

Um, So all those meta elements, all those meta tags all learning good S e O is mostly from a developer standpoint, is knowing which tags to include. Obviously, I say that and somebody’s already saying, Michael, that’s a dumb thing to say. S e O is much more than that. I know, but not to a developer. Content strategy affects s CEO.

All of this, You know, I get that, but it sounds like they this is gonna be a brochure Where Website The biggest S E o value is going to come from making sure it’s marked up correctly. I would say Go listen to that episode was at 70 69. Something like that. Um, go listen to the episode on on head tags and just go look up head tags for SC. Oh, it’s gonna be your open graph stuff. It’s going to be your description.

It’s going to be your title. And the other thing you can layer in. Then, to add some more values, go to schema dot org, but he doesn’t say what this person’s business is, but there are business markup, uh, schema markups, you know, RDF setup that you can add in there. So it’s a restaurant. You can add menu data into it.

You could add hours into it and mark those up so that services like Google can interpret them, um, phone number, contact information where it’s located, so that if somebody is searching for, you know, uh, car mechanics in Columbus, Ohio, that site comes up like it knows that businesses in Columbus, Ohio, because you’ve included that metadata appropriately in your Marco.

Uh huh. I was going to say this goes back to the restaurant. Episode number four

Um, it’s Pam Pam over that.

Keep it simple. Stupid phone address menu.

Keep your stuff limited to what you need. Go. There’s a site will have linked in the show. It’s called html five up. Um, it’s the sky named AJ who’s gone out and made like a dozen maybe 14 website templates that are completely static. HTML and CSS. There. Brief for use. I think they’re just Creative Commons licensed. If my memory is right, they’re pretty good looking. They will solve most of the problems you have.

There are examples of them in use in different situations with different businesses, So that’s a good place to go to. Just get a quick theme. Find one that looks good for what they need. You throw that and get home pages. Add a little extra schema markup that you need to help S C O out and boom. You have a website that’s a perfect brochure Ware website. The hosting is free. Have them pay for the domain name.

You are good to go. Security is not, he mentioned security. There’s no security to worry about because you’re not collecting information. If you’re going to add a appointment booking thing, just go get a platform for that and just link into it at that point. Mhm. That would be my recommendation for it. I don’t know. Is that Does that mesh with what you’d be thinking?

Yeah, I think so. The stuff about the schema dot org stuff is really cool. Um, it’s

easy to add. It’s just mark up like it’s It’s just a method of doing mark up either with Jason objects or with classes and and elements on Uh huh. You know, in your html nothing hard about it. It’s just finding one that’s appropriate.

I think the big thing is like, Don’t sweat s e o so much. Um, I mean, if this is a local business

and if S C O is gonna make or break that business that businesses in more trouble than they think they are,

you know, I was going to say I don’t mean this in a mean way, But if it’s a local business and they are a size to where it is appropriate to hire or ask someone who is as as much of a novice as this person clearly is, but probably not having a huge Internet footprint. And so S e O isn’t gonna really matter either,

You know, either whatever the company is tire place or restaurant or whatever, If you search for the name of that restaurant in your area, it will probably come up. Google has probably. It will probably index it automatically. I would say you want to definitely cover the basics like make sure that you listed with Google correctly.

Make sure that you keep it up to date, you know, cover, cover the basic things just to make sure that it’s getting listed correctly. That’s enough search and optimization.

It’s a case of right, you know, most good S e o can happen in that, you know, 1st 80%. That’s all really easy to do, which just comes largely from good markup and good metadata. That last 20% is like what differentiates Amazon from Walmart and, you know, places like that. But each percentage beyond that 80 is like, harder to get and even harder to measure, you know, like is this thing is this change we’re doing making a bigger difference and it gets into stuff like Now we have to talk content strategy.

Now we have to talk about, you know, keyword density. Now we have to talk about all these other things that start factoring in inbound links. And, um, that gets hard like and the return on those starts to outweigh or rather not, outweigh the investment it takes to get unless you’re in one of those high high competition industries.

We hope everybody found that useful. I had fun with that. I’d like to do this more often. We may bounce around in some other places. Maybe we’ll pull from Quarrel. Maybe we’ll we’ll from Twitter, Um or something like that. If you have a question, you’d like a stance or feel free to send it over to us. Um, we’ve been bouncing around some other ideas about how we may integrate this with the business strategy for the podcast down the road. So, um, I can I

say what I said earlier before Probably

the idea.

Um, I was thinking to be pretty cool and maybe get some feedback about this from you all.

If

we did something sort of like this or patreon subscribers, you can punt us your questions.

And

if not, we’ll find questions that we like from around the Internet. And then, uh, kind of do like an unfiltered take or maybe half an hour or something.

Which is to say when we launch our patreon, it is not launched as of yet, but it is. It is in progress. And I’m waiting on a nice day to go outside of my camera to record a little video intro for it. And I think we’re good to go. Yeah, let us know what you think about that, because I I enjoy this.

I think this is a fun way to kind of tackle some of these intro kind of level questions for junior folks or mid tier folks that are trying to learn how to think about some of these problems. So if you like it, let us know

connect with us. Let us know what you think about that on Facebook or twitter dot com. So I struck a new X, and it’s the giggles dot com. So I struck a new X podcast and also come see us the describe, which is index dot com slash discourse.

The bad part is, I went over to read it, and I just kind of pulled these questions at random, um, and tried to find, you know, people that had things that I thought other folks would benefit from hearing about. Um, I’m gonna start kind of keeping maybe a backlog of these questions and, you know, for future type episodes and whatnot.

And the bad part about it is I’m going through all this work ticket to log all these questions and and keep track of the users who are writing them in all of this. And I feel like I’m actually doing more work. Two. Keep them close to me so that I don’t forget about them rather than keeping my personas close. But my users closer, Rabbi. Bye.

This episode of The Drunken UX Podcast brought to you by nuCloud.