336: How to Think Like a Front-End Developer with Ben Frain

Automatic TRANSCRIPT

They're shipping. Maniacs. Listening to another episode of the shop talk show all about front and web design development. I'm Dave Rupert. With me is Chris clear. Yeah. We still make mouth sounds to drum up excitement and this show. That's where we're at manpower amount mouth basis back at something. That's that's the that's the budget. We have around here. It's been very lucrative. This podcasting thing we are. We are we are dead in the middle of a of a series. We're doing called how to think like a front end developer and people have been really liking the series. So I appreciate that. There's been quite a few tweets said that they've enjoyed kind of what we're doing here. This is in in one sense. It's a big old research project for you know, let's see what this turns into. I think it's very likely that at the end of this that we do kind of a wrap up thing with David. I wear we where we kind of reflect upon what we've learned. Asking other developers. This kind of a similar set of questions about just where we are at in this world of and this I guess career of front end development are like are we at a crossroads and what other developers think so I'm David I always have our own opinions. But it's been so great to get the opinions of other wonderful front end developers. And we have one of those wonderful front end developers with us today. Mr Ben Frayne, how you doing Ben? I'm very good, gentlemen fact meets been about five and hoffy is lost on. So it's been a win. Yeah. We've we've talked to a lot of kind of repeat guests for this series, some new upcoming new ones too. But but it's been it's nice to catch up with with folks again. So what's what's been going on in your life? Then you've got. Well, thanks, less time. We spoke was mainly about SAS. So interestingly, no, Dona Bookham SAS. But then I probably haven't used sauce for about three is. So I sorta don't move. I don't move to. And so that's maybe something we could talk about lighter. So I'm still working bet. Three six five which the state of very different sort of issue to Gumbo, and the majority of states books, and that's very kind of complicated web op if you like so most this dividing dates as sort of very sort of finicky complex you. I I suppose it would say so you work on your your is your job title front end developer. What is do? Do. You have one the official title. Yeah. Is seedier from tend developer. So wow. You might be the first we've had on that actually had an official job title that involved the word front developer. That's good. Has joined they kind of didn't quite know what to cool it. So they said well you can and it was like well the proper tight list from ten developer. And so that's what they went with while tell you if you'd look around job boards, you will find this as a job title all over the place. I mean, we shop talk show has its own job board, and that is littered with them, of course. But anywhere, you look for tech jobs. There's lots of people looking for fairly clearly front end developers. And that's kind of part of this series is to is to dig into that a little bit. Because I think there's I think more people are. I wanna say upset, but like a little confused or flabbergasted or find that problematic in some way. Just because of how wide that spectrum is in a way. So we'll get to that in a minute. But your job title, literally is senior front end developer. And do you kind of self identify that way to do like think of if somebody's are you a front developer? You'd be like heck, yes. Yes. And could. Well, so what when you think about that word or that job title? Like what what is it? I think you're right. I think these days is sort of the brood special things that could encompass and a think I liked to sort of think of people. Do you have a things we'll talk Trump's over that Trump's colts. Do you know what I mean by the we have a President Trump? But I'm not familiar with a top Trump. Yeah. We'll base it. They're like it's a plane caused game. He you have a character, for example in the characters different attributes. So might be like if we would eat harder. Carey says it will be Dracula skiff out to one hundred speed. Okay. Pokemon. Think of people in SIMS of talk Trump's so you might say, well, I consider right? My cell phone five six attributes that have from ten developing my off and my school is going to be different than Dave set schools Christie says schools. Yeah. And so if you'll hiring somebody you need to think about basically walks out should be. I guess it's no wonder that you see that a lot on resumes in. It's funny that a lot of people do it, and then a lot of people's sneer at it too. So it's kind of funny that you know, they they'll put like HTML nine out of ten assess eight out of ten J query ten out of ten sketch seven out of ten that kind of thing. But you you're not you're not sneering at that. You think that's actually kind of useful way too? I'm not just thinking because we've arrived at. I know people who would call themselves from ten developers who be incredible programmatic job script. But then if I said to can you maybe not lay out with flex box grid. Just Bill it. No. So it know. This sort of the so the diametrically opposed these things not always. But I think generally we kind of. I always roll my eyes more when I see somebody who says the referral stuck develop because I've never once met somebody who is truly brilliant attempt seen. Everybody's got an achilles heel area where they've they've been quite open scrunch, and I don't think necessarily about things just realistically, nobody is incredible everything. So if you'll talk to people about what they wanna do what they do. I want to get an idea of what what do they actually like doing whether they want to go in the future, but also be realistic about whether skills and that you can do trust the bulls and say how good affirmed tend to go route you because he call them easily. So is the is this is there is there a common schism though? Is there a divide that we see more and more? It's it seems like we're starting to hone in on one in the series a little bit Brad frost called at the front of the front and the back of the front in a way. And that we've heard like Java script engineer versus like. You ex. Just sort of biproduct the fuck that a lot mole applications with clients Jove scripts. Oh, stiffly traditionally don't as technology, and then just pipe down rented as to CSS thus his on the client now. So we make you not we sort of compounding, the two things and saying we'll just because stuff happens on the client, not makes it from ten, but it really just use in technology that on the client to deliver buck and logic. If that makes any sense, it does make sense. And that's what's I think it's becoming more and more clear to us that that is the that is the thing in like, how do we start to talk about that as an industry better? Yeah. Yeah. I mean, I suppose it comes down to like for me with a lot of people who they were on wide and historically cooled back end logic. And because they're dealing with, you know, connecting API's getting stuff into the rightful pumping data through which is the stuff that I'm no strong with you know, and I don't get involved in. And then they would pass that to me to deal with the stuff you see on the screen, and and obviously there's overlap but by lodge, you get people who very very strong. He's brute generalization get people incredibly strong at the buck end in the logical programmatic side of things. And you get the the people who better that. The clarify long is line CSS, foaming HTML, well and dealing with Trump's very visuals into something actually looks like in the browser. So they're the kind of I don't think there's been mulch of shifting Tim's of and the different roles just. The languages, and where that programmatic logic rodents if you like so role Minnesota, he's just on the front-end. Now, what about that? Handoff though. Like when does that happen for you? You've been at a job for a while in which that I'm sure you've seen the ins and outs of lots of that stuff. If you if you know where you're cut off is in that cutoff is like you don't necessarily fetch the data yourself. But once the data is prepared for you. Then you can digest. I think that's what you're saying. There will like is it I think sometimes that handoff is like it's almost like too late. It's kind of like, well, here's the J SX, and it's like already kind of formed, and then the HDL people are like what the or something, you know. Yeah. I mean, I I'm a big advocate of prototypes. So I like to do things by a very very featured an accurate prototype that works on the, you know, from ten job script. I'll typically muck up the data. In terms of, you know, even if not just means making Jason objects, and that sort of thing to give you sort of a feel for how the dates will come in and let reactivates. For me. It's more important to at the end of the day. The us is going to see so fat needs to be absolutely right. And then he's a case if you speak to the bucket people about LA, and they shake the days to fit the Musso, which isn't ways entirely possible bus, the soda direction the island to to go with things if you think about prototyping a bunch I wonder if that's kind of an answer here to some degree like if somebody's going to do the back of the front stuff, and, you know, get get data together that maybe instead of just being them just trying to piece together into Joe sex, or whatever this final form be like. Okay. Well, you already have a prototype. So work from the prototype. Yeah. I mean, I've been thinking a lot. You know, let's say I'm on the front of the front. You know? What a wonderful kind of nomenclature, we're developing. But if I'm on the front of the friend. You know, how what? What what can I do to to bridge the gap between the back of the front and back end? Like what what can I do to extend that? And I think if I'm hearing what Ben is saying, you know, a lot of you know, I think a lot of that logic is now happening client side through frameworks, like react, or or view or angular. So I'm just wondering what superpowers can I some in into kind of make these prototypes kind of like even more full functioning production code. You know, I've done a lot of prototypes in. There's this thing. Prototypes. Don't need to be fully functioning. They should kind of exist outside of things. But how you know when it'd be cool if I could just sprinkle some salt, and all of a sudden, it becomes like real, you know, so I'm just I've been trying to breed found that is sort of if I'm making from this does elements. Oh, very transferable to end it gets made in production and those bits. Which I know right from the outset gonna get thrown away. And when I typically find is that with Buchan teams, they're always very very happy to take the HTML stroke cheer, and the CS as long as it said, a an architecture that that lends itself will props get onto that laser. What they less likely to take is the Josip side of things because that's where I'm sort of making things hot and Joseph visual pufus intends to be more logic. They can carry the bucket because they have the concerns the I'm no privy to. I don't understand all the context they're gonna happen. So I tend to find that it's the the Jove's things that get choked away and and rebuilt to fit the Clydeside. J hop in the real world almost always as long as I've done something terrible with the HMO and CSS. That's completely Trump's favorable so close names and things like not might change a little bit. But in terms of the structure, and how things work it's generally appropriate that the happy topsoil Fulham. I that's actually a problem. I have right now like developed a modal system and handed it off rolled it into production. All of a sudden all these needs start to happen. You know, you need this one mobile Detroit. Another modal in. Yeah. It just becomes like this like swamp sort of what the modal had to do in. So now, it's it's just all different. And I you know, it's almost the prototype or the pattern libraries sort of version of the modal is way as diverse from the production when quite significantly. So it's now like, okay, do I- upstream, this how much do I stream what do I stream 'cause there's all kinds of like, oh, but if it's on this page, then we kinda do this other weird thing, you know. So I it's all these kind of problems you hit as like things go to how to stunned with like, I have a kind of debate with people goals to coherence against consistency. Often a big push where people are obsessing over designs, looking consistent and pot and lobbies in particular, looking consistent and mice feel is. I'm more interested in design being coherent. And so what I mean by that is that sometimes, particularly, you know, the more complicates to an obligation. Whatever it is that you building becomes the more likely is that you won't sort of subtle language differences between things to express different things on when you try and be entirely consistent. All the time. It becomes very difficult to do. Whereas if you was if you for a coherent sort of design land, which then it gives you the cheese to do that. Does that? Well, so you're you're kind of saying that there's a pattern library I need to break it to be because on the choice of coherency. And I think that's a I would never argue against that. I wouldn't say like, Nope. I gotta use what's in the pattern library, even at the cost of user experience to the site. Like that would be a silly choice to make. But the fact that you're also making this choice like I'm going to break my porting. Are you breaking it or a you bending it? Or are you manipulating I think Ethan Marcotte recently wrote about design system needs not only a way for people to consume it for but for things to go back into it. In. So like, whoa, how badly are you breaking? Are you breaking a one off or you breaking it with something that could be a pattern that is useful again? Or what inside I think that's difficult. And I don't I don't know that I'm qualified to even go there day, Bradley is more. So I think my opinions are evolving here. But I probably am wearing the consistency camp. Just because what I've seen is. You know? Okay. We here's a designed system. Let's do it. It's in the progress of rolling out a new design flows across the desk. The next day that we all decide on the pattern library or the design system. The next day something rose across the desk. And it's what what is this. Oh, I saw this on gap dot com. It's I kinda just ripped. And you know, copied it and whatever. Now, it looks. I made a another one that's based on that. And you're just like. What on earth like could we not use like what we like decided on the other day? And then, you know, and that is just sort of a an anecdote, but it's it's more like over the course of year two years or whatever as designed system exists. Like that happens a lot, you know, you onboard new designers. They have different opinions and aesthetics and styles. You know, maybe they just didn't even look at the the guy the designed system like that happens a lot or it's like trends, or like, I'm just feeling like, you know, like square buttons today. And you're just like what I like, that's not the thing. Do you have anything like Tim's of like a pair of you for the design because I found it so useful to have so say that scenario you would have. So let's cool style guide Rover than a. Assistant that necessarily added at you go, this is always you stalling forever. Like, if you wanna make a mobile, this is what it needs to to look like, and if somebody digressing should not then they need to explain to a Pia why it's right to do. And so they can't through unless he's been be reproved. If you like, yeah. No. I think I we typically do. But I, you know, there's always kind of rogue agencies inside the company who, you know, are like, well, guess what we're different. We don't even need to do that. And what if what let's like we could roll play at a little bit be like, they're like, oh, Dave. I see here that this that you've made a square button here. But really our style guide has you know, we've used round buttons on like ninety percent of the the the rest of the site. Like, did you just not know that or what's with the square button here? Oh, it's better. I mean in they're like in its. It's. Better better. Okay. Yeah. Renders pastors better. Okay. Well, okay. So I mean, I understand what you're saying about that. But should do you think then that are pattern what direction should we go? Should we call this a one off button? Or should we try to like morph our whole style guide into using your your style of buttons? Are you willing to take on a project to replace all the buttons on the entire site with your style? Our bosses bought set like they wanted square button. So I think it's kind of the most important thing. Okay. In the company right now. Basically every day just scratch here. I think you know, replacing all the buttons on the entire site with square Baden's is going to be quite a quite a operating. But yeah, I, but that's I know we could have probably gone on with that skit for a minute. But it's like it is it's hard. Isn't it? Like, that's what you face though. It isn't just like, oh, I'm sorry. I should've just made a circular button like maybe that happens sometimes. But some people are just like actually just looks better. Yeah. I kind of like my square button. Like who cares? If it's not like every other fed though. I think that's a big difference though. Between have a good people on the team and not go people say so it almost comes down to the people that you've hired. I mean, most people that I hold in high esteem in that situation, if you can say, well, delight this for these reasons, they'll be the first people to say, okay. Let's do them as the people less experienced of Mauri. Go and yes, hold onto those things. All people the. Fall over either. You don't want to be like, oh my God. I'm so sorry. I'll meet, you know, you mean, you, you know, tell me why you did it at all, you know, there's kind of a probably a a baby bear answer to that. I again back to the volving thing. Like, I do like, I wonder like where there's room the square rounded. But knowing should ever debate that but no. But like, you know, is there room where you can kind of shift or alter things I'm starting to wonder if there's like if there's a room for that in if there's a process or system that could support that pretty easily. So it's tough. That's kind of why I ended up doing the ACS s thing is because at been through of. CSS all a lot this. He's from sued a lot two thousand twelve and it was a lot my obsession for a couple years and tried doing tried scaling things every which way but loose and a tried. And it was around the time that CSS was quite popular then tried doing the heavily abstract thing, which sort of it's s eventually made very popular and Larry antidote was that found. It was just it was more important to me to be able to make these things in isolation and be able to kill them off very easily them have things which I extended with little bits and pieces that always seemed to end me in was who has a hotter system where it could just go. Okay. His new thing. It's his own thing. It's free to mutate and be whatever it needs to be. And it was a a system of doing it where I could write it not weighing in prototype. Just in flow files and could still transport across to production and the no problems. So was kind of blown out these exact sort of issues if you like an think. Hof the ball as well as that. Sometimes we we hold onto consistency as well. Because we don't have a good way of dealing with not having consistency. Thought makes any sense. This episode of shop talk show is brought to you by sanity that sanity. I o and the URL you should go to a sanity dot IO slash shop talked to free supercharge developer plant. It's fascinating. It's like it's like a CMS. Let's see you need to build a site. And you'd like to build it on the front end with new FrontEx Ogies or old frontal, whatever you wanna do. Let's see you're going to host on Netflix. Fire. Something you you're like this is going to need some kind of back end. Like I'd like to use something that CMS like to power this. But it'd be kind of cool if that was just kind of posted for me in a way that I didn't have to worry about it. We'll sanity is a hosted back end for structured content, and it's it's not just their back end. It's an editor four all of your data and content. That did start insanity has an editor to it as well. So it's like, you can customize that it's a react base editor that you can customize as well. So it's like you need a back end. It's kind of cool to have a hosted back end. So that you're kind of letting. Them deal with the scaling and structure of all that kind of like, a hosted CMs, but you're still building out the site in the front, and however you would want to do it. So how do you get the data out of their back end? Will they have this powerful graph oriented query language called grog? So it's kind of like I need, you know, like, give me all the the items with type of movie where the release date is after two thousand twelve or something, and it, you know, boom, it'll send you back Jason of all the movies with it. You know, it's their own query language that makes that stuff really easy to get an even like combined stuff from different tables, and all that kind of stuff different documents. It's pretty cool. They have images built in as well. So, of course, great you have structured data. That's cool. But I need, you know, multimedia stuff for my say, they have an image pipeline has part of sanity that super powerful. And it's not just like host my images and make them fast. But there's all kinds of stuff you can do you can like mess with the colors, the data and get low quality image place holders and all that stuff. Very powerful image pipeline. That's with it. Which totally makes sense to have with a hosted back end, which is great in. You know, like, I mentioned that editor also comes with unique customization capabilities that you kind of Taylor how the content is organized without having to change the content model necessarily, and so there's you know, there's a an example of all this. They made a kind of a shop talk show studio example that you can spin it up, and you can spin it up on code sandbox style, which is kind of cool. So you can kind of see like, oh, I get it. I can spin up not only the site that I'm going to build, but the CMS part of it also on my just front end only, which is cool. You know, it's like this two sides. So that anyway, it's cool sanity DO slash shop talk. Thanks. So we knew we'd we'd have people problems in this process. We always kind of due to some degree. And that's, you know, they're not always problems people are the best part about our job as well. Aren't they? But you know, aside from people problems, let's get into that. Like what what's the hardest thing? What's the most part about the computer part of front end development this to sort of book if you like that that I used to be very passionate about getting into this? This whole thing about how to scale ceus, which I know on the won't to have a conversation with anybody about because a feel like it's basically if you wanna steal scale CSS Uvira, if you mentioned align and at one end isolation, and at the other end, obstruction you can scale CSS at either end of that line, the closer you all to salaciously obstruction. The most successful scaling will be really get problems as you. To mix much the two techniques. And and so I don't actually how people decide to do the CSS as long as they fundamentally onto stoned. The the choice of way to look at it. I hate to drag you into a conversation that you don't wanna have. But as an example, if we're trying to throw technology at this are, the they're certainly lots of people out there that love style components, or they love CSS modules, or they love a can't remember them all glamorous or the ones a little there in the spectrum of CSS j s which Lynn lend themselves toward reviews, scope, Scouser, whatever 'isolation, right? Yes. There's no leaking in our leaking out. If you're very consistent about that. You're going to be happy in the scaling of your style system because it's just that will scale nicely for you. Or if you never do that. And you only have you know, utilities styles, or, you know, just are very abstract in your naming that also will scale very well. And you're saying the problem is when you kind of try to do both a little bit definitely a behind solo species kind of been around the world seen lots of. CSS? Okay. Tetra broaches. There's nothing in the will that makes me believe that you can mix the two successful approach. I always comes to it's either isolation or it's obstruction and those by themselves are absolutely fine, and this preference. Do you find those two sides of people like to fight about it, even though they're both right? Well, I think yeah. I mean, I think the problem is that people have been able to down enough to realize that that's what it comes down to is that the you'll get some people who they've had a mix of styles, and then they try full on obstruction ago. Oh, my go-. This is the best thing of this scale CSS. And then you'll get people have tried to mix the two and try style components will have some Swingline Bamble. The thing I've go easy s and they'll go my God. This is the best thing of this scale. So yes, and the truth is either those fine, you only get problems when you try mix much too because the two let competing approaches. So okay. So so scaling is one of the biggest problems. But the biggest problem isn't choosing. How to do it? It's screwing. It up make think so. Yeah, I mean, I think we're gonna position now whether this mall good approaches than ever before and on this longest the one that you choose there's only stem the benefits and the negatives of the thing that you choose and you go into your eyes open. Then I think this, you know, this choices in the little achieve different goals. It's interesting roles us into this next one a little bit. It sounds like you've you've maybe like fought that war too too long, and you're sick of it or bored of it, or well, I mean, it's just a on this thing and was kind of a Frankenstein system of of the system. So you know, it took a lot of bam took a bit of they took the. Just the right on something. Now have been using it for like three or four years ruins of massive site, which doesn't have problems in that respect. So for me for my needs. It's a soul problem. And so I'll always take a look at, you know, see all tickles public news lies about scaling CSS. I'm always still interested. But I never it. Never changed his opinion. That is this this line with is elation wind shuck shit on the and whatever you choose is one of the some combination of the two the most successful ones, the ones that always ended Luke had long tube or either that line. And so you're you're active e CSS stands for enduring CSS. And that's what you're saying is running your sites successfully in two. Desktop side. We have the Wickham day today. There's a mobile sign this desktop site. The mobile size in the process of be moved over to. Big pulse of rodents ECS the desktop site. Or? But this sort of approach is what we use the, and it's been very successful. I mean at anything that you use scale EPA completely place Sailly, but in terms of the typical problems that you hear. From teams and develop is when the trying to scale CSS, you know, the the typical ever-growing. Append only style sheet, you know, in select selectors eight nine slept as long lot sorta stuff as go. And and so the I used to sort of look at the and. You know, hun ahead and kind of weak is largely Goan. So because it system can use to build the prototypes pick open pulp into a production environment, and and people can room with it just means that the the problems of Gombe's Lee. So it's kind of like, well, there's no need to solve problem. The only reason of sort of lost interest in a little bit your purchase fairly, Ben me. I'd say, but how does it differ from the main thing that we sort of we came to an audit was was a tool by nNcholas Gallagher a few years ago where he talked about and just file structure of components. And it was around the time. I was looking at the stove, and that sort of clip for me, so took the idea that everything needs its own file and say, we Namespace CSS. Well, so it's kind of tool consumer co but few much you'll component daisy image. And inside the CSS five days hero. And the every select two with Dave's hero image is. DA chains being as the Namespace. And so will you select that hung out names by s-? And what's great about is not provides installation that you can take that thing and somewhere else, and we run a little tiny Jason checks that the Namespace has already been used which to be honest belly happens anyway in you being too cute to like too short. Yeah. And so we basically try and keep the name Spacey's. It's like a two three full to Namespace. And then he cool the bits pretty much. What you like this the? This will the rules about how you camel case. Don't come case the bits after book. Oh boy without now. But like. I I've never I've never bought into any particular methodology. I'm just like come up with a name used the name. The name is largely like a chunk of stuff. And if you need to nest a little bit within it. That's cool. But try not to get crazy with the nesting. I feel like that approach to see us as served me on all kinds of sites. But occasionally at bites me, if we was going to buy a methodology kind of like the idea that do that same thing, basically, but just be a little bit more abstract with your name spacing just do that. But but have these unique Namespace modifiers in front of all your classes? Yeah. And it's like, I say, it's a simple thing. But it provides the same kind of insulation that you get with something. Stout components. But you do in a sort of mo- human friendly way fuel. I can obviously you don't need as much tooling around it, you can put to lean around which obviously got checks the this election that much, you know, the the select styles that we like, but it's not sensually you can crack open and start with on a. Pro-style straightaway name things in money. And then as the thing that's more more complex drop to tooling, and whatever else on the, but it to trickle will the CSS and make it you fool. So he saves a lot of time there as well. And so I think a lot of these things don't in and tooling from tastic. You know, I've got no complaints about Holly, they've managed it. But for me personally for the problems. I have I liked being able to buy hunting carry all the way through it looks like there's just a couple of rule. Look, it looks good. You know, it's like it's like all the methodologies are named things while and kind of agree on it throughout your app. That right. Look, it doesn't need to be an evil complicates. It. Just you know, you want to settle something. She knows going to sue if you well, I'm not why is USA Chris leaves settled on something, which was view. And so until you hit actual problem. Why why would you go looking for solution? And even that problem is a little is a little hard to define because it's not like, I've never had a con. Flicked? I remember just I dunno weeks months ago. Something I named picked name for something that I thought was fine. The turns out just because mom, just one brain. I had used that name before it was something like table header or or something like that or header had. Or who knows it wasn't. It turns out I used it. In one context. It was a table, Sal and another wasn't and it caused a bunch of weird weird padding issue on a page, and I was like that has been me in the. But I could see that moment if it wasn't me or somebody else in a different circumstance like shoot, I should've scoped that more heavily. I should have been meta- think. Yeah. Only becomes a real problem depending on the complexity of what you build if the most people something like he is probably overkill because they know they're not going to get those conflicts. Anyway, you said what you would do. It was only an extreme. I haven't had another problem like that and months so like having one problem like that is not that's a baby bathwater situation. Definitely. Well, okay. Well, this is fun. Let's see. What about the? Let's let's talk about process a little bit just because you've worked at the same job for for quite a while. I think that's kind of kind of fascinating that you're the process must be good enough there that that can wear on people. You know, like your process was terrible. Maybe you would have looked for other work at some point. But it it hasn't been so, but even outside of the work on what do you love? What is like an awesome project for you in this awesome project? You can have any role that you want? You can have any team that you want? It can be building anything that you want. But just like how how do you extract the most enjoyment are the most effective in a process? I think he's I've never been in a bun. But I imagine that if you can get team a small team together, it feels like a bummed when you making still. That's the best thing. So if you can get sort of slightly Veleppan, but mainly complementary skill sets. So you know, you have light you from on designer wherever you go. You got somebody who deals with the logic Sada things and get somebody who deals with transferring the designed into stuff inside the browser. That's the team. I like and importantly, you know, a thing you need to find people to don't have ego. You know, so you need obviously good people. But think he's pulling you can put suggestions to one another, and there's no kind of lot role in if the is a lot. So it's still so I like it to have probably designed it was very focused on the visuals. Somebody who's good at the application side of things the logic pumps. And then I'd probably say the middle trion and get onto the page. So a diverse skillset kind of thing is you're interested in and and you're. Complement their skills in such a way that that it literally feels like a band. I liked that Dave the lead singer. Oh, I think the basis. Keeps the rhythm ago. Wildcard. All everybody thinks the basis is the most important except for the basis. Always wants is solo this could ruin the room. I think that's the main thing that you kinda you won't people who have a small on that you can learn from a hate sort of situations where everybody's looking to you to make all the decisions that lots any sort of formed and by the same token don't think he's a lot of fun. If people just dictating everything down to you is that you want to kind of feel an equal with UPS. And so I feel we got the best of made. I think I was I was kind of asking about that that SIA scaling thing in your kind of weariness of that. And not that I keep putting that in your mouth. That's not exactly what you're saying. But, but maybe at one point that was a, you know, a hot topic for you, and perhaps a war that you'd like to wage we've asked other developers this like what's a war that you like to weigh like, it's so important to you that you're not willing to just be like, whatever they decide. I don't care, but one that you're like, no, I. Actually care about this. I will fight you on this one. I think this does less. I think they used to be think po- if I don't I can never so that the sides it myself, whether it's I'm just getting tired of it and give it more easily or just lint to let go of things that probably not important so things like and let frameworks ond. And approaches and tools and things like I used to be brushing about we we definitely need to us as we definitely need to to us. Whereas now, I think don't care if he ends up on the page, and it's right dust, really masses. So hiring must be have had some involvement with it at some point. Because you're you're a senior developers that senior role mien that you. Yeah. Yeah. I've been involved with hiring a few people, and I actually think of settled on a really good. Well for me. It was a very good way of hiring people. So I think that I did probably what most people do. So you put your outfit out there. Whatever you get people coming in. And you do the usually, you know, the office wherever you sit in tool to found is a lot of people and couldn't if you very, well, they said all the right things. Then once they were actually on the job realized that there just gold. And so you'd well don't work. Well fast. Yeah. Yeah. Yeah. And and so the approach the ice sort of came to was that instead of doing that we would. So Joe maybe five people get until the first thing they get is a little test and the test is literally somethin- as simple as a little sketch, federal PNG, whatever you wanna do if a little visual component, which is something that you build day today, and you say to the people, and you could pay them for this as well. If you if you wanna make time, but say, we estimate this is gonna take, you know, wants to time. This is the thing that we want you to Bill force and supply HTML file s fell in the job script file, this is what it needs to do these the browsers that we typically supposed. Think about you know, the be still which deliberately womam to use. It was supply the sets as well. And so like Buchan the would have said, and this will disappoint under a too. So he wouldn't tell them that the the need to switch out the PNG's and still not see you sort of setting up Trump's if you like to put a negative sentiment, but you just trying to make sure that all the things that you would hope somebody would know about and care about that they do actually over off. And and it was brilliant. Because what we found is that most people didn't make it through that stage. And so you wouldn't waste in both that time and you'll time having endless interviews with people because you cannot post funding came in the dual you knew that they could do the job, you know, they were in the bull. And and then he's just a matter of whether you cannot go with the mino- 'cause you could say traps or customer problems like known customer problems. Yeah. He's just sort of making sure that they have the same field and k things that you would have. So, you know, if if it's a pretty simple you, and you have to see us at will slapped his eighteen so long, you immediately know this isn't the boost gross. So he's little things a lot. You only really see when you look at somebody's code in your trying to are you trying to look at how they code or did they get the right answer both thing because it's important for me for the soda from tend develop roles. I was looking for a needed to make sure that somebody given visual would code something out that looked pretty damn close to the visual. And then to ask them to do this or so it's not like the went and looked at some old project of theirs and be like, ooh, that's an old selector. So they're getting judged by some like old ask thing. No. I'm still this is right now, they did they made an eighteen select eighteen exactly. Yeah. Yeah. Because you know. What we like typical example was that you look at somebody CSS, and you find out that they will use in SAS something, and they were doing that thing of putting the unbe summed symbol to to sort of mimic, the the structure of the mental. So it's things which people just do. They don't understand the consequence of thought. And so you. That's a little red flag that you like, well, if they don't understand the consequences thought that probably know flooring. We long for me to be thinking about in the. Right. Because you are in a tough position here where you know, maybe that person is could be educated. And there's there's it's not like, they're that's what makes hiring so hard is because it's so personal. But yet, it's not, you know, it's one of those things like, it's cool. Like, you're going to be fine. Like, I'm not saying that you're a garbage developer. It's just that. I have to make this choice to hire one or a very few developers. And like I have to pass on you right now because you're just not far along enough along on this journey Kennedy. It isn't surprised just how many terrible developing all though, quite honestly. And the other thing that I think was caught telling us that a lot of people just refuse to do that right off the bat. And that's also quite telling that's, that's that's interesting. And then if you when you when you found this candidate to begin with, I would hope that I mean, I, you know, it's more interesting to hear you talk about this that you didn't just put up a role. That's like, hey, we're looking for a front end developer at this job. Please apply. Because that's where this. Need to be a little bit more specific than that these days because if it's person who's only skill in this world is just very new school react development kind of stuff. And you've asked them to see us thing. Well, they failed at it. And that's unfortunate that maybe they shouldn't have applied at all. Because their skill set is so is so off base from that from wounded whether the people have really strong with Simone CSS hide in the freelancing world because in the sort of the coporate will desk gills valued highly. No, I never cease to be amazed just how few very good CSS develop is they're all. And and I wonder if it's because. This kind of stigma will feel really go to h CSS. You're not really program. You don't really develop do you notice name, but they would have killed it on your test. Oh, shoe, and they was people that we were trying to find trying to find people would really strong sort of thing. So the vote was explicitly want, you know, the refugee people over to say, you still see us little bit Jove scripts great book, that's not Lissette of the core of what we're off to here. Yeah. It's tricky. I just overheard a conversation of somebody who was interviewing for a job. And it was react heavy, and they are feeling very positive about it. And they liked the interview process and they were asked to react question. They thought they did pretty well on. And it's almost seemed like it was a sure shot, and then I'll right. The end. They're like, no, you're not good enough. In the in the end question was something very very specific about a fairly new reactive PI of which they knew about articulated wide exists in. What it can do? But then got a question wrong about the actual just straight up syntax of it. And they were passed on because of that. And it just blew my mind like what kind of job like you're right there. You right at the fingertip of them being amazing. I can see if somebody's like, oh, we need a reactive moment. I've never touched it ever. I could see passing on that person. Because you that's there's a long way up from that. But if you're right at the fingertip of it to make decision bitch blows my mind. I mean, honestly, I've written a book about CSS and all the rest of and it's basically my reference guide about I opened up at least once a week to look something because you just a little less than you had, you know, that's why the stucco flu. You know, I'm more concerned about with people conceptually, you know, have a good feel for things. I think that's more important than remembered syntax. All right. Well, we have a new batch shop Joe listeners a new batch of dribble shots. So we got a lot of good opinions. But our last batch we had we picked up five shots on dribble. And an asked our guest front end developers. What went through their mind, right? When they see it. And this is an interesting one because I know this, you know, sometimes doesn't make for good radio though. Our feedback has been positive on this sorry about that. Well, I'll do my best to describe a little bit of what these people are looking at. But of course, come to the show notes to look at the the links to dribble to begin with. Or check your catcher might show the image of rape this minute. Oh, yeah. We have that. Cool. Thanks, Mr Chris ns, our podcast at eter who does these kind of rotating like one of the time stamp passes. You can change the image in there. Maybe we should try that. So Ben this isn't too. You're not supposed to like like like diagnose this entire design necessarily, a more interested in those very first reactions of like what's gonna be fun? What's gonna be hard? What might be impossible ish? Nothing's maybe truly impossible. But what's like, why would you do that? You know, like, maybe a pushback moment kind of or of area for discussion, or or what technologies does it make you think of it could be HTML assessor, Java, scrip-, whatever kind of comes to mind. I like what what are those first few gear turns in your front end developer mind as you look at these designs. So the first one is called progress board interface for education platform. In. It's I don't know. I guess a little it's a Condon bore little trello Askar or like get hub, get lab Kanban board and away with columns of cards. I guess yeah. I mean, I suppose is what the scrolling is here because it looks as a sort of resembles growing, maybe as you move across the bulls and so thinking, well, if they will the scroll into go left to right, maybe Rovan top to Balsam. It's basically Holden Schiff essential medial jets, which you sort of conflict tax elements with an icon to the side. It probably looks like you could do those with a single component was probably different attributes and got left on boulders for those go talk to him. So probably old lists three shift those we'll maybe lists actually because you get and. Smoldering stuff, the the free full screen meters. And the like. I mean, this looks like it could be very quick to load into well because ever since the textile SVG, so would you definitions for lives SVG elements and? Yeah. I mean, it looks nice and clean this nothing that makes me overly concerned. And just to know when his luck it does create new the bomb ride to the interface. Just exactly what as a modal, and then be asking questions about suppose. What's the the support matrix for this you looking into browsers support? So could we be looking at something to be built with CSS grid? Does it need to be something of older and looks Latin props Hoffa states as well the left? So other any folded sees full logged devices so few great out simple on the left to those devices. Okay. That's that's good for this one. There's a lot of a lot of stuff there that I'm sure people could could relate to away. Let's we'll we'll keep it a little bit rapid fire. So he can, you know, keep your keep your mind turning a little bit. This next one is is named tracking dashboard for drivers management. So we're gonna this looks fairly light weights. I mean, this probably Google maps or something similar an unpaid and not a left end penalty sort of shows you the drive of that is going to be taking you. Does an graph section at the ball enough reach line? So I wonder on a mate s- does the role of with the mouse, or again, something took down that became to to know. And with things like this little dots. Sort of multiple it's not graph. And I wanna know is the took talk alone. If so what's the minimum size for? This probably low this looks so nice and clean. It off say looks probably quite interaction. He needs to happen. Menu by the search window pops out of that will whether models ope. Whether they're going to go with system pump zero f as. Face. That's going to come in. He uses to consider. Again, all the things like this box with miles and rates per miles to when page lose count OPEL do anything fancy thing. I'm noticing, and maybe you're immediately. Wondering about the next step like, I think all the guest prior like, you're very much if I clicked that if I like that what happens is that something you find yourself doing a lot I suppose because I'm just trying to like generally speaking, we're really privileged at the minute was HTML CSS in this layout wise that you comb immediate lookout and think about how you do not sort of trying to be boastful. It's just as tools now intensive layouts with things like grit of flex that. You can look at most things and know how you make them happen. So the stuff that tend to be more trying to on if the outset is interactions and how they need to react with what you could not see on the screen. And so yes, pose reconsidered that as opposed to do most. Now, I know I like that. I mean, I it's taking means still some Justin to be like layout is mostly solved in just fine. And even images, you know, like, you know, what types of images all of these aren't just by looking at it. You're like, oh, yeah. Okay. That's vector. Now, the SP Jay like. Those problems and issues are solved at this point. I think so because even things like, you know, down the right this when you go, and what looks like it'd be J peg or web peo- something not then you can think well, they'll probably the outset, but you could probably Lazlo to the ones because I mentioned as you through those lows more going to puff up and things like pitches as well, we've gotten which again soulful problems fully you're also thinking as well, what they do with the screen, very very wide very very narrow. And you know, what did they imagine? How is this thing on the left is not going to be hidden off on a menu? See just left with the main screen, so yeah, it's mutations oppose the most the things that I try and think about most wanna look stuff while the states this bien while the size could exist in speaking of some kind of interactivity here. Our next one is called full screen hover loop affect it. Looks like it's. Dribble shot by Mary, Lou from the famous co drops where it's like, you're you mouse up to some may navigation like the whole screen all the sudden takes over with like a full screen were just showing you huge images really quickly, and then that settles down and all those pictures kind of collapse into a grid like layout. So it's kind of a you know intentionally artifact for photo gallery. I mean, there have to say I love the that. She does it's Neil ways. Crazy. I don't know how it is would make so a little flock in it still is because it's it's usually still I'm not made before. And so this is a bit of well crock on Atef conversations about this. So I suppose the outset thinking go full-scale images there and how we're going to get those down from the from the outset. Whether they. Whether to use something like soul set that kind of thing to get them down for different sizes will whether you could just mind with one big highly compressed him his dream of his. Well, you can version of image which double the resolution and export very low image quality. Yeah, they like, oh, what was the two hundred zero percent quality hack. Yeah. That's the one. So like a weather to keep this fast. You could do something that because I always want to see a lot of big high resolution images that he's gonna cruel on a anything less than a really really good connection. So this considerations. That are about the thing intensive actually goes on. And how it goes on quite honestly, just to slow down and get a feel for what happens here, and let is go to the the more often you watch eat less. Scary becomes. So often I find with things like this. You tend to just have to break them down into individual bits. And usually things got movement going on a Lofton take a quick time movie of them. And then it lets me just scrape through really slow and get a feel for the older that things happen. So probably to do. And then thinks more about how to break. Let's see we'll move onto the fourth one here, which is named mobile home page for crowd rise by go fund me. So I don't know if this is turned into a real product or prelaunch, you're all ready launched or just a mockup or what? But it's a it's specifically mobile so as is common and a dribble shot. It's kind of like not just the design, but the designs placed into a looks like kind of a phone accents notch phone, but it's just kind of showing you. Just how this design would work on a small screen and the in the different screens are pro presumably scrawled two different position. Yeah. I mean, this kind of this sort of. Is feels a little bit like the promo pages. Apple does when they something you, and that could imagine that this thing is still at to scroll was going to have things, you know, maybe the texts comes in slide from the left of the right and loosely sort of illustrations wonder, whether that would be one illustration, maybe that will be made up of three full actually moved to provide. You know, we'll be seeing comes to life in the middle of the first one. And it looks like lying. Also does no real concerns about file size is just sorta taxed and an Fiji from what can. Pops speak to them. And if this is something that's going to be used. Importer pulse of the world. Whether they they won't buckets full SVG isn't available with just stunned and background Japex. Jesus. And. And how they see the instructions working way get still separate page is that thing Ajax already in the pace, you're gonna transition across and so be sort of questions about how shit this thing feel, you know, how people feel in the easiest thing because it looks like the thing that's designed to be very the slick inviting and so those interactions will be quiet pool. Cool. So you're thinking about what's not there. Which is so interesting. I think so. Yeah. I mean, if you look it's nearly will you if you took away the illustration side of this. This is just like h p tixx Boulton, it's all very semantic HTML does nothing really, you know, need to over think don't think. Right. And it's like the looks incredibly simple really HTML is what's what's being what's making the party here is all these super well-crafted images. Yeah. -solutely? So the last one here is called short stash two in. It's it's one of these. It's like, it's probably a website almost looks PO poster ask in a way, there's certainly some cropping that kind of is really interesting with the word, Oregon. But it's like, you know, like, how do you think about that? Is that I don't know what we're looking at those kind of pretty big. I don't know if you call a hero image because it's not necessarily top. But it's very big image. And then and then a whole row of smaller images to the right of it and our gritty. Yeah. I mean, I suppose again whenever ceased with law, Heidi tail MC's, my mind mmediately goes to think about how can best get those down on the page. And so thinking about progressive Japex about whether we'd use a soul set with these lazy load images. Is this a panel on the right? That's gained to stall scroll in a more images are going to come in you'd go. What looks like the right? So. I'm thinking is it just only a set number of glimpse the needs to be not funked? Could it be an outline SVG puff? So definitely the looks like it's quite important. I because you'd go and something they opened the left as well. Whether an S Fiji, and then thinking about things like this page needs to translate. Or if he's going to be translated of the different cliffs in phila- sort of thing. And and again, wanna know what what a different things as you said. Nice looking size. I have a lot of questions as to what this thing. Does. It doesn't see, you know. It's like is it a website? It looked it is. But it's like the most like minimal and maximal at the same time. It's like nothing here. What what by looking at? But look at it. You'll cut it in life. We'll is it going to be one of those the full ground of the image. He's gonna move maybe in the background is going to move like a paradox. Efecto something on. Possibilities rule. So. Yeah. Yeah. It just don't know. That's the whole point of this is to to hear what developers like you think of these designs as we're looking at them for the very first time. So stay tuned for future episodes folks, will will will will put those in front of other developers to see what they see if it's the same as Ben or they see different things. Spoiler alert. It'll be different. The Knicks tip Suda Shabtai thinking, Ben we'll wrap it up here. Thank you so much for coming on the show, but for people who aren't following you and giving you money. How can they do that? If you go to my side, I'm you can buy some of the books of written. There has been framed up comb of just put a little thing. You can subscribe to use less. You could be the second of this. I have us let only because I'm thinking do it begins with Joel grip. So if not something that might possibly interest you sign up. That's about it. Really? Don't really like social media get myself out. So. Gola valid eligible here and to k eighteen. All right. Well, thank you so much for coming on the show. And thank you, dear listener for downloading this when you're putt catcher Choi species star favorite up. That's how people find out about the show folks on Twitter at shop talk show pretend to tweets month, if you've been enjoying the series tweeted out here with your friends again, that's how people find out how think like a front end developer. We really appreciate you tuning in in giving your feedback. And if you hate your job ever to shop talk, show dot com slash jobs and get a brand new one because people wanna hire people like you. And Chris the anything else you'd like to say. Doc dot com.

Coming up next