Dan Abramov SLAYS Frontend Interview w/ Ex-Twitch Engineer

turns out filming an intro is hard anyways howdy y'all theo here super excited for the show i have today somehow managed to score dan abramoff from the react core team for a mock interview this is going to be a deep dive on my interview process and how i think senior candidates should be like interviewed i'm going to have a link to my usual interview guide as well as everything else i think is necessary to give a candidate ahead of time all in the description of this video also have a link to my twitter at t3.gg i'll put that right here too probably the best place to keep up to date when i have new things going on and if you're not already subscribed please do if you want to get all the cool updates on myself my company and the awesome tech stuff that we'll be creating throughout so yeah without further ado enjoy the show howdy howdy y'all good to have you guys here today i have an awesome special guest if you can't see to my right right now we have dan abramoff would you like to quickly introduce yourself then hi i'm dan i am a youtuber now apparently uh youtuber that works on react on the side yeah working on react on the side when i when i have vacation for my vacation i work in react not too unusual to use your vacation time to do interviews but it's a little more unusual to use it for interviews in this way [Laughter] yeah it is fun i haven't actually had many like interviews in my life so i'm i guess i'm exploring this side of things that is interesting i'm curious about that like how many companies have you interviewed for yeah i only worked at uh three companies in general and i i just like the first one i was like 18 and there was a kind of five-minute interview desk and they just hired me it was an outsourcing company in russia and i worked for a product company like a startup and they actually had an interesting like big home exercise but there wasn't like any traditional well maybe there was but i don't remember it uh there was one interview to a big company in russia that actually failed uh but that was like the take a home exercise that i failed and then there was like facebook which is not meta which is i didn't prepare for it because i i wasn't planning to have an interview and it just kind of happened that they like spontaneously so i i didn't really have the experience of like oh i'm going to prepare for a tech interview so i don't really know what those are like but i did do a lot of interviews as an interviewer interesting so you'd say that like without question you have more experience as an interviewer than an interviewee definitely yes that is really interesting yeah i remember like the moment where not necessarily where i hit the point where i had done more interviews than i had been like than i had been in but i remember realizing that like oh i've now seen this more on the other side i don't know if like this is like a point like a inflection of my career or what but that feeling was very real and it made me like take a step back and think through how i do interviews and what my relationship with them was because i realized i've been thinking way too much in terms of as an interviewee what do i how do i expect an interview to go rather than as an interviewer how do i make this more valuable for both people and the the core thing i realized is the majority of interviews i had been part of on both sides at that point had been about finding certain metrics within a given process not getting the candidate to showcase their strengths to the best of their ability and that realization has kind of haunted me since and i've been rethinking and working through my process since to try and come up with a way to interview that really highlights the strengths of the person i'm interviewing rather than grilling them based on a perceived set of skills i think i'm hiring for so with all that said i've taken the structure of a more traditional interview and put in a lot more options and fun parts i sent dan notes ahead of time asking if he or which of the paths we wanted to take the options are usually elite code path a more traditional technical question that's more like real life problem based or you also have the option to bring in work from home so if you have like a side project an open source thing you're working on an old website you want to update or some like open source library you want to contribute to i actually let you bring that and pair with me on it as your interview process because there's no better way to see how you work than seeing how you work and i try my best to find these opportunities so with all that said dan picked the technical questions so let's get into the more fancy interview stuff i always like to start with a more traditional like technical experience question you have one of the crazier experiences of anyone i know and also we had that space last week where i got a lot of inside info as an interviewer it almost feels unfair getting that plus both of the interviews you did over the last two weeks so i have way too much on my side but one thing i didn't hear as much about as i would have liked to is like the experience of failure you touched on an experience you had uh somewhat recently but i would love to dig in more or even another similar experience just would love to hear about an example of a time you were confident in a technical solution and we're sure this was like the path to go it ended up being incorrect and like what that process looked like yeah um yeah that's an interesting question because i think like due to the nature of my work i'm not that often confident in solutions in general because i usually assume that they're probably wrong um but i i think and also i work under like really good technical direction so i i kind of place a lot of trust in that and uh i think it's not so much that i come up with like solutions it's more like i'm either like implementing something that we discussed as a team and we kind of uh you know feel good about something like this um but i think what to describe in this uh maybe like that uh like one thing i can think of well i guess i'm just not confident in my solutions in general i think like there were more it's more that like i think usually for me like i'm not confident that it's good and then i end up being right and it's actually not good or like sometimes actually no like this one is okay that's fine but i think that's a good i'd love to hear about a time where you thought something wasn't the right solution and ended up being the right solution that's even more interesting um so i think maybe at this uh um maybe it kind of falls into somewhere in between but uh i've well i think i think like one interesting example was with uh like the project that actually uh was like my first popular project which was called reaccord loader which is like a webpack plugin that lets you edit code in real time and see the changes without the refresh in the browser and that's like it's uh if you're using like creator act app and xjs so like code sandbox or a bunch of other things you don't even think about this because that's just how things work now but that's not how things worked like seven years ago and i i made this plug-in and i just like i didn't have it wasn't my idea because i thought like i saw these like demos from like brett victor that inspired the whole generation to do a bunch of stuff but he probably hates all of it because he gave up on computers uh but and then like i just connected pieces together like backpack react a bunch of other things but then the way i did it was kind of it didn't really make sense because there was no kind of first class support for it and so with time it deteriorated and it it kind of started like uh you know it didn't work with arrow functions it didn't work with like some newer syntax and so on and so that was kind of sad and i tried to kind of reinvent it a few times and like i would think oh this time i got it this time i have an approach that's gonna work and actually like that approach was like even worse and had even more pitfalls and like i i had like three versions maybe after which i kind of gave up on it because i just didn't know like how do we do it and then eventually sebastian came out came up with hooks which is completely unrelated but like two weeks later i realized oh that actually solves my problem and so i came up with like another way to do it that actually uh like takes advantage of the hooks model and that's yeah sebastian was like yeah like he still had like his own ideas about how it should work which were different from mine but his his ideas were a bit unrealistic at that time and i just pushed through like i said no like we we need to ship this i'm gonna work on this and it actually ended up like it it worked out like we shipped it as fast refresh and we shipped this to like uh facebook first they're gonna figure out you know all the parts that are broken fix it up ship the react native and then in open source like create react app next gs and it's kind of expected unexpected part of react now which i think is really that is really interesting so to be clear you had uh picked a strategy that seemed like it wasn't going to work as react like grew and things like arrow functions and stuff were introduced it was breaking the hot loader process and you had a solution but it wasn't didn't seem like it was going to work and then hooks happened and you revisited that old solution and were able to apply like the new paradigms to it to make it work or did something new click entirely when hooks appeared later yeah i think it's something new yeah i think it's something new because the like the second solution that i tried it tried like it tried to fix the flaws of the first solution but it introduced a whole different set of flaws and like both of them were kind of bad in different ways and then the the solution with hooks it kind of uh like i was able to completely work around the problem because i like the constraints that existed with classes they just don't exist with hooks and if i made the decision well this thing isn't going to work for hooks which is not going to make like try to preserve state in classes then that actually like completely changes how i can approach it and then that that actually solves like the issues in both of these directions so it ended up working yeah really interesting and my inner functional programming nerd obviously loves this too i am curious if there was any like learnings from this that you could apply to future times where you're unsure of a solution i know that you've said even before that you are often more skeptical and tend to lean towards into the skepticism until it works did you get anything out of this experience that might make you better at making those judgment calls in the future yeah i think so i it's it's funny because i actually do have um so my blog i have a blog called overreacted and i have a post that um so i have a post called my wish list for hot reloading which is kind of a reflection on this whole thing like how it kind of didn't didn't the things that didn't work there and the things that i want to see in the solution and then i ended up writing that solution like later but it really helped for me to actually write down what it is uh that i that i want um but it's um so i think uh there's a bunch of things there about um correctness that i think are important um how do i explain this shortly if i like answering your direct question like what are the things i learned i think the biggest thing is just like the model needs to make sense like it's uh you need to have like if you if you're doing something like in the library uh write like some kind of api you need to make sure that uh it kind of scientifically makes sense so that it's not just it seems to work but you can actually kind of prove that it works like you have answers to all of the cases like but what if this what is what if this like you really need to exhaust these questions and you really need to make sure that you have a good answer to each of those questions and that like you have a strategy that actually you know composes and like that it that it doesn't fall apart whereas previously what i would try to do is like i would like write a few test cases and i would make those test cases work and be like oh i guess it works now and then somebody would say oh but here's another example i'd be like oh i think i have to like somehow make this work and so i didn't have a strategy that would you know like i didn't i didn't understand what all the different cases are and like in in this last approach i i knew all the different cases and i made sure that the that i include all the edge cases in the design from the beginning and that i make conscious decisions about what i support what i don't support and why and that i could kind of write it down all on paper before any implementation and know that yeah it's gonna work there are gonna be some like edge cases that i'm not going to handle intentionally but i had like entire plan before i even started writing any code and if i if i knew that you know if i knew that it wouldn't work like i wouldn't do it really interesting uh there's an idea you touched on in there that i've always that i uh really like and tend to look for in particular as i'm looking for like more senior people the idea of like collecting information and how you use that to adjust your design it like the i don't want to say the more junior approach but the more naive approach is often to treat every edge case and bug as a problem to be solved rather than a piece of information to use in your design it's very easy to get caught in the loop of oh this is another bug to fix oh this is another bug to fix oh this is another bug yes and like have that additive approach where you're just patching layers upon layers of crap on top of a solution that didn't truly solve the problem and i find that often these piles of edge cases are indicated are indicative of bad design at the core that give you the opportunity to readjust and put yourself in a position where you solve more of the problems in that first like core piece yeah i think that is one of the biggest things i learned on the react team is um and it's not always uh like it's not a it's not just you know kind of a junior trap like i think like it's easy for people who are experienced to fall into the same pattern where like there is a new piece of information and they're just well i guess like i need to fix this thing but actually like the thing that i learned is like uh you need to reintegrate the thing you learned into your understanding of the problem and often that means take a few steps back to when this thing was designed and see if this is the information like was it available to the person who designed it and what if would it have changed their approach if they knew it at the time and if it would then like you need to undo those layers rethink the design and then figure out like what is the next design and then they should like consider okay how do we get from here to here and maybe the steps are yeah we're gonna patch things up but then later we're gonna change it but like you need to be intentional about what you're doing there yeah absolutely i one other piece of language used there the idea of taking a step back i find most people treat edge cases and bugs as a reason to take a step in rather than a step back and that's a huge thing and when i say that like this is a senior or junior quality what i mean isn't necessarily like this is a thing that you just get better at by spending way more time in the industry it's more so what i look for when i call somebody senior versus when i call somebody junior is their ability to demonstrate and like work these particular skills and i think it's one of the best indicators of somebody's seniority is their ability to recognize which bug should be stepped into and which ones should be stepped back from that makes sense oh i love this frame and like step in and step out this is really nice i'm gonna spill this please do that's the whole point of this anyways if you're down i would love to dive into some code cool i am switching the screen uh on my end to be the uh live session that we had going so hopefully nobody was able to steal the url there even if they do i don't think they can do anything i think it's just us so yeah this is a quick empty code sandbox i set up yesterday i am using typescript just because it is nice to have red squiggly lines when dumb things happen i'm not expecting you to write a fully type safe solution here or anything it's more just a quick way to get errors and such the goal of this problem is to get a better is to get a feel of both your familiarity with like react and react patterns as well as your ability to communicate with a team when expectations are set but aren't particularly clear so i'm gonna be almost like comically vague with some of the instructions here with the expectation that you like dig in and ask questions we're also assuming that the api that we're connecting to is poorly to undocumented and a lot of our work will be figuring out how this api works and building a user interface around it so okay that all makes sense okay sure right should be pretty fun so the tl dr on this one is we're building a twitch chat like chat experience we have a server up that is on the chat server url i would prefer if we don't open up the file that i'm importing this from live on stream you can but i need to make sure i don't accidentally do that so that people don't spam the server it is a websocket socket io server just sending messages you're also able to send chat messages to it so the first task that i have set for us is to join or when we open the app have a join button that we click when we click that button we connect to the server and start storing the messages that we get in state does that make sense so far okay yeah i think so so you're saying that this is already like there's actual chat messages there yes this is a socket server that's running on a railway.app deployment that is spamming messages at the moment and yeah okay so if you uh sorry yeah i i just i just want to ask some questions because i i never actually implemented a chat and i also almost never touched any socket apis so i don't actually know them so one question is so you want you want the new messages to arrive but there's no way to get the past messages or is there or like is that something you want to do no we just want the messages as we get them past messages is not an option for this okay so we want to connect to this server uh i suppose there's also some kind of uh so i'm not familiar with socket io api can i ask you questions about it or should i guess it ask questions and we can also google search things about it if i don't have good answers too okay yeah i'm just curious like i well the thing that i was planning to do is like maybe i could like add the use effect and like do the connection there and then like unsubscribe on that mount uh i don't know if that actually makes sense because if the whole app is like always a chat app maybe there are multiple screens i would just subscribe at the top level so it's it's not even necessarily something i care about doing um so i guess like either approach would work but the thing i wanted to ask is does it have like some kind of tear down method or something not like that uh api yes you're able to socket dot disconnect i believe is the teardown okay yeah so i think just to kind of be idiomatic i which is i think like when you write react code like this it is expected that it like the connections and stuff lasts for as long as the component is on the screen so i'm going to assume that that is uh is that what you want or is it or do you okay so i am going to like use a fact uh okay you have okay you do the start starting from this fine do you care if i use starting part or i do not care and slightest i do prefer name paper okay um yeah so i'm gonna write this use effect thing um so what i want to do is i'll let this so that it doesn't spam so let me see what they have here so this thing creates a socket so maybe let's uh uh yeah let's let's do that you care if i use like constantly for concert i think i don't care in the slightest i i should have opened with this we don't care about anything that a linter or prettier could do for us this is purely testing your ability to think about and talk about react and other front-end coding solutions okay so what i was thinking is uh oh i had this problem yesterday i think the use effect typing is silly where it expects an undefined return so if you just wrap this yeah it will stop okay okay that's cool um so i'm i'm probably going to keep this console lock here just because but i'll also add the so the thing that you want me to actually do is to like handle some of these things right and i guess uh the um let me actually refresh this so i'll also add some state to keep the messages so i'm gonna use cost here just for the sake of it um i actually like to use const with hooks so that people don't think that they should reassign them okay so um i guess i'll call that messages set messages state i'll be an array and let's uh let's maybe have like like i'll be randomly jumping in just to keep typescript happy for us okay i don't mind uh uh yeah so uh i'm gonna use well i i don't actually know the format yet for now i'm gonna well now i'll just print them as assume that these are strings but i suppose i'll want to have some user info as well i'm gonna use index as a key because there is no id yet but we'll see maybe there will be something and we'll put the message here i should have thought of that okay well we'll we'll think about it will think whether it's okay or not okay so the thing we want to do is well let's let's see again so we have type chat message uh body we have a user do you want to display the users in the chat yes ideally we would show the user and a user has both a name and a color ideally we'd be showing their name in the color that they've chosen okay oh i see so the color is for the name or for them for the name but they are messages just for the name yes okay that's cool uh so yeah so it's not gonna have it's gonna have objects um i think the well i guess the whole thing that you well no i don't want to have well they want to see like uh things like user band or raid or journal not somebody just chat messages but is it something that you will want later or question uh if so i think we would want to handle those differently because we wouldn't want them in the list so much as like a current state at the top or maybe like have actions that occur based on them but we wouldn't need to persist the state of those now okay but the thing that i'm specifically curious about this like even if we do that like would you want them to appear because like usually when the use of the chats i think it does this like somebody joined like right in the middle of the messages but that's you're saying you don't really want that experience right we do yeah cool so uh if the type is a chat message where uh we're going to put that in the messages so i'm gonna use the updater form because i don't want this to be a dependency um i could also use like a reducer in dispatch but this this seems simply for now so um and i'm gonna have like my own format for this because i do want to grab the i think you're calling message uh let me see what is that chat message okay so that's an object already um but it also has a type and like i don't want that type there so i think i'll just be explicit so i grab the message.body and i grab user message.user and [Music] is that is that all right well the chat message yeah i think that's all i wanted so it's going to have body and message.user um and then here i want to have like i guess i'll what does the user have just the name and a color for the name yeah so i'll just i'll just use a spam i guess uh and i'm gonna give span the color so message dot user dot color and yeah and they have a name so message name and then we're gonna have message that what is it called buddy yay nice looks like we we have something uh it's complaining about this yes it's the extra clothes yeah now we have so i think this is yeah i think this is this is working right so this is actually part one and two because we got all the state stuff managed as well as beginning the rendering process i'm sure that our live chat's going to enjoy watching this mocked chat anyways uh fun next one this idea actually was inspired largely by the uh react uh forget demo let's add the option for a user to toggle colorblind mode let's say i am really bad at reading this light gray so colorblind mode will just change us from using the colors that the user set to black and bolding the text so that the name is just in bold instead okay um so we want the uh yeah uh i'll just extract this to component um so username and it's gonna take user and remote and [Music] this thing is going there okay and then then this thing is going here and this is yeah this is this and we're going to make this condition so if not i'll just return a little bit username otherwise we're going to return the piece pan uh and we also need the um we also need the the button a village checkbox i guess we can just put that at the top where like in the magic chat of the title or just position in the corner whatever you think's easiest yeah here's a checkbox and well i guess i think okay so we're gonna do extract if this is true and then when we change it we want the subject well set a node based on whether based on what's in the dom and we want that to have a label remove colors i think it's e dot current target.checked to make typescript happy wait yes this well this should be at least target because e that checked is not a thing um but i also want to give it just like tailwind yep that win because i if i recall you've been playing with it more and it is pretty simple nice yeah let's see yay it works awesome all right checking out my end cool it works might be worth keeping the bold in both states just because it will look better in general for the colored uh usernames and will keep the change from being as drastic when you switch modes sure then i would do it slightly differently oh i guess i'll just do oh my is awesome b is a very underutilized tag wait but the the white doesn't work yeah i forgot the uh so this was supposed to be well i guess it's just going to be empty works for me cool so something i'm beginning to notice now as we have lots of messages going is i have to manually scroll to the end any ideas on how we could possibly auto scroll when a new message comes in yeah sure um so kind of annoying uh there's a few ways we could approach this uh i think like i wouldn't want to do this and i know a lot of people would want to do this in an effect i would not want to do this in an effect because your effects can like rerun in different cases you're you're not really supposed to do things that are disruptive there and it's really associated with this with a particular like it's specifically when the message comes in that you want to do it so i think really like i kind of want to do it here but then here the uh the state has not yet flushed so i can't actually do it so if i if i try to do it it will scroll to the the message before the last rather than the last message but i can actually tell react uh the uh to force it to flash this dumb update so i can do this and i can do this and then that ensures that by the time i'm here i i like the dom has been updated and so i'm going to like uh do some like scroll plus message and yeah the thing is uh uh i think i'll just implement it here kind of a mess i could break it apart a little bit but uh the way i would do it i could i could put the ref of on each of these things and like get the the last one but it's unnecessarily complicated but i think i would do instead is i would just give this thing a ref and i would scroll this last child so i'll give i'll have a list ref which oh i use ref that's the thing i want so the it's going to be our rest of the list and then here i'm going to do something like that last child equals restricted current um well it's supposed to be like by here it is always supposed to be initialized like if it's not i would actually want it to throw so like i'm not going to check against null here uh ideally i would actually write like a an actual you know a better error but i'm going to just assume that this thing exists so um in typescript i think you can do an exclamation point to assert that this thing exists but what would it like throw at runtime or would it not uh it will throw out runtime yes yeah okay yeah i guess that's yeah what what this point does is it tells typescript hey i am telling you typescript this thing exists whether or not you think it does but then if typescript or things that exist and it doesn't it will throw the same as if you try to access any undefined thing on an undefined thing okay uh i don't remember is can i like google his last child in actual api yeah of course but i think it it should be uh yeah that is i'm guessing that current is uh not typed uh html yeah elements maybe will give us silly uh yeah i'm just gonna force this as the yeah typescript nerd i am that should help there we go yeah so let's see last child will give us like an old uh really a kind of one plus element child even though these are like we only have elements there but uh the method i'm planning to use i don't think it exists on like text notes if somebody has a text note there so the thing that i want to do is scroll into view but it's actually kind of um so first do you want it to animate or not when it's animating would be nice yeah i think there is some way to do it can i like click look up if that's yeah of course let's scroll into the i think the boolean argument may be doing this i think it's optional yeah it's it's kind of like this whole thing is kind of annoying because um scroll into view is actually something like if the thing is already in view it can still jump the screen to like this like to bring it closer or whatever and there is also curl interview if needed which is a different api but it's chrome only i think and there are polyfills but they're like really convoluted and then i think there's also spec and like a new option to the spec that does something like if needed but i don't think it's actually landed in the browsers yet so overall like if we wanted to do it well we would need to like actually research we don't want to do it well we want to do it for our chrome users that make up 99.5 of our audience yeah i think i think we can do um like i'm copy-pasting this from mgm so i think we can do this and we can do this and maybe this is what we want but yeah that looks good to me yeah yeah i am watching it come through on ours and that is scrolling nice and smooth good stuff yeah i would say that it's shitty user experience though because if i scrolled up because i want to look up something above it would still scroll me down every time so i think what i would want to check is like only do this if the the last the previous element like if we are currently aligned to the previous thing we scroll to or like if there hasn't been a new scroll the scroll event since the last time then we do it otherwise we don't do it that's that's kind of how i would improve this yeah uh the pause scroll or pause auto scroll behavior is one of the harder things i helped build at twitch when you scroll up chat to detect oh this person isn't allowing auto scroll to occur and almost like tracking auto scroll as a breakable state with different break and reset conditions was a very interesting problem and it's cool how you've even without necessarily building this before could identify the both the ux problems and like the the deeper engineering issues that can exist within a problem like this so yeah you have definitely hit this problem out of the park as far as i'm concerned the last feature i normally do this one in the middle because it's a bit easier but i wanted to challenge you with the auto scroll thing because it's a bit more like css and browser standards type thing but the last thing is adding an input box for us to send messages of our own okay um yeah let's let's do it yeah there are a couple design changes we're gonna have to make around what values we're persisting and how we're persisting them because the first thing we're the easiest thing to start with i would say would be a message send function and uh a button that will send that message somebody in twitter just said something that's uh just a button that will send a message and we can have a function that just generically like sends a pre-written message so that we know we're able to correctly send to the server sure sure that sounds fine um send message um and oh i guess uh yeah so uh let me let me add some styling because i well i'm i'm really bad at stalin but how do you give a background uh bg red dash a number but like 100 200 300 something like that yeah okay so let's say iphone 400 okay kind of old school but works for me don't worry too much about the styling of this this is much more yeah let's get the message sent we're under the assumption we have a professional designer helping us out with those parts when we need it okay um so well how do i send it what is the what is the api-ish so it's on socket uh i'm pretty sure it's socket.send okay but we're not currently keeping the socket yeah that's true um i guess we're gonna have to um yeah well at this point i would already start thinking like why are we doing this in use effect like shouldn't we uh have like a persistent connection throughout the app and stuff like this and just pull it out to the top level and like never uh well well i guess like if we did that like like i would i would kind of prefer like i could keep it in a ref but i kind of uh i would kind of prefer to hoist it up because it is a persistent thing our app well like do you agree here like what is like do you envision this what kind of app is this is this like one page where there is a page this is just a single chat page somebody will open in like a window and then close when they're done okay um yeah i guess in case we do want to like show multiple charts side by side or something like this i i shouldn't assume that there's only like one of those so i i am going to just add a like a ref for this thing and i'm gonna stick it into a ref so i'm gonna do this and when i'm when i disconnect it i'm going to clear this thing and now if i'll go fix the type if yeah like i know something i owes pretty well um so yeah so we get the socket and we do socket socket.send and apparently well is the is there like a format for yeah i actually i just like i have this i think you just have to uh pass an object in the shape that you are uh hoping to send i think that we just have to yeah just an object with body which is a string uh oh do i need to type uh you don't have to it looks like uh it shouldn't matter either way okay okay and uh do you need the user nope the user is going to be self it's uh the api is authenticated and can identify when you send a message you send it okay so i'm trying but it doesn't look doesn't look like it's doing anything uh i'm curious if the socket itself is coming through uh console.log socket connect yeah interesting that should be working uh according to everything i built uh [Music] oh it might have to be i might have broken this last night yeah i broke this last night uh give me five seconds to fix the server deployment uh okay cool yeah i will redeploy the server while we're doing that do you want to start adding the uh what's it called uh state management for input so that we can type a message and send it sure uh yeah let's let's go very realistic you get everything working on the front end just to discover the back end's broken and then go do another front end task while the back end people figure out their stuff yep so that it would be realistic i know this is what i meant right so we're gonna have this thing then it changes the value pen and yeah yeah i guess um i don't remember how to do where there is just the word border right there okay that is better wait yeah so and we want to use this in in here well i guess we don't uh if uh well maybe let's uh let's trim it and also if um well that body goes that's the trim if the body is an empty string i don't think we want to do anything then we want to send it we want to if we do send it we want to clear the field and um is there anything else there i think maybe we need something else well if i press enter i want to send right so i i should probably have a we can handle enter to send after if you want okay so making sure i fixed the back end uh i did not fix the back end cool uh i actually broke it comically worse death on io dot wait no dot omits 100 supposed to do that what cool so uh since i chose to make message into type chat message instead of just type message uh it breaks a bunch of other things now uh i think if i kill that maybe yeah uh i'm trying one more thing get at p okay i'll i'll let the i'll try to add the uh this submit thing i think i can maybe do this by wrapping this thing in the form i don't know that's actually the best way to do it but um this form this button would be a submit button and then in the in the form i would cancel the default which we could actually handle if you know if if we wanted to but also like who does chats with full page refreshes anyway um so yeah i think this is actually sending an enter and it's sending on click um oh interesting what is the what is this chat dash yeah i broke the chat message sentence i am working on it we are so this is one of those cases where we can assume that you did everything right and the back end is just broken because of oh i saw it don't send a chat oh i see what we did now cool we can delete that bit and it should figure things out now no god damn it cool so we now have tickets to cut for the back end team it seems like their chat server isn't working quite as expected but everything i can see on the front end here looks totally good to me uh yeah sorry about that thank you for in this process debugging our back end and finding issues with our chat server no problem happy to help cool so that blows through all of the questions that i had written up to ask around this but i am seeing some fun potential discussion uh in particular i'm seeing a couple places where we could do some performance optimization any thoughts as to and i want to be clear we don't have to code these things out this is at this point now like things we can discuss and maybe cut tickets on for another person to take a look at in the future what are some things we could do here to improve performance uh yeah well what kind of performance so do you want me to click save what i'm seeing yeah i did do you have because like are you talking about rendering performance or some of our users are complaining that our chat app makes their phone hotter than it should like yeah uh i think like one thing that would help is like uh we don't want to re-render the messages that have already been um been received when we get a new message so we could extract this like list component into like a chat message component and memorize it i think that that is the first thing that i would do uh i guess overall like well it's a chat it's going to keep growing forever right so i think no matter how much you you optimize like i would clip the like i would say like like i would show maybe the last 50 messages by default and then the rest like maybe there's like a button that says like view earlier messages but like by default that would kind of keep it rolling so that it shows at most 50 at the time uh and i think that is yeah i think those are the most present things i can think of like what else i would do at this point at all without knowing more about what what is just people are experiencing i think that would handle most of it specifically the uh use of either a smaller a limited data set for the number of messages or a virtualized list of some form in order to make the message like scrolling experience yeah would definitely be helpful but like 50 messages would be way too low for a reasonable chat experience most people would expect like a few hundred but a few thousand is not necessary and that's where things tend to crumble and yeah good call-outs on that yeah one other thing that i was or sorry oh i just wanted to say like uh we could do a virtual list but i'm not sure like what the kind of what the requirements are in terms of like how much do people expect to be able to you know scroll fast to the beginning or like uh uh like chat messages are probably different heights right so we'd have to kind of measure it just in time which is i guess fine like virtual solutions do that nowadays but there are some questions there like virtualization is not super easy another one that people overlook is how important command f workflows are to users the ability to schedule command f and search through a page that way if you're virtualizing your lists you've just killed that and you have to replace it with something meaningful especially if you're making like a power user app when i was building internal like safety panels at twitch for like admins to look through stuff one of the biggest issues we had when we experimented with virtualized lists was their inability to use like the super fancy like 12 field search and then just stupid like dirty command f over that to get specific information like it was weird how easy it was to break their workflow something like a virtualized list yeah all right the other question i just thought of i forgot i had this as like a bonus i definitely want you to feel like you have to code this one but just talk out uh solution could be fun you'll notice a lot of the messages have lull in them just all caps lull let's say we have a picture like an emote and we want to transform every instance of wall with out characters on each side into an emoji like an emoticon what do you want to try that or if you want to i'm absolutely down but we could just talk it through otherwise if you don't want to put it to code but if you want to i can go grab the emoji we can try and make it work well i mean uh it seems like i don't maybe i'm underestimating this but seems like it should be fairly simple so uh let's send this format message function and and i think uh like can we just like use a rig x i think there's actually a string replace all proposal in the works but i don't think it has shipped uh so uh can we just i was i was forget the rig x well can you can you put an emoji is it oh actually i have a question is this like okay it's an image it's not an emotion it's an actual image yeah so then like here what they could do is like and break it apart into like i guess that's the that's the string and um so if the so let me see if i if i split uh let me just look at the in the console like what is the behaviors if i split something that doesn't contain the string i would ex would expect it to give me just uh sadly we can't see what you're doing in the console so if he's like describe what you're doing i'm assuming you're just like writing the body split out in there to see what happens yeah yeah i guess i can just do the same in like in here and uh i was just doing this basically so yeah that that gives us like one element and then if i if i like do something here it gives us two elements i feel like something like this yeah so basically like uh i don't like i'm trying to figure out how how to like if i split it like this like where do i actually insert the image and i think like if i like it is before any non zero yeah so i think what i do is uh so i'll have a result of ray and i'll just walk over but i'll start with um well no i i'm gonna walk over all the fragments but if if it's not the first fragment so if it's the first fragment then it's not interesting and we're just going to push it into the result it's not the first fragment i think we that is the place where we uh insert the image so we have an image url for me anything i could use yep uh oh yeah i just uh slash dot png capital l u l i added it i think it's l u l capital okay that should work again key uh index is a key uh well it's i actually i do want to justify it because i think people will get upset at this uh in both cases that we have index as a key is fine because these things never reorder and um even if they do this thing isn't stateful well i don't expect the message to ever be full but if we are unhappy about this which i think maybe yeah i think just for my own comfort i will add an id here and i will i'll just generate it at the time we get it from the server so well i don't have like an id generator but i will just do this and then i'm gonna use this as a key and now i'm not for it and and like here it is definitely fine because things inside a single message are not going to reorder even if they do this thing is not stateful so it looks like stuff's not rendering oh there we go yeah i haven't actually finished yes so i think uh yeah i think i can just uh well okay i'll uh i don't know i just do one rem because it's like text height uh what okay no wait this like how do i do style equals like width or height one rim okay i don't think this is is it correct though like no uh no it's not but there's so many messages it's kind of hard to to test it because i don't see which let me just scroll up to see one second i'll restart the app and i'll just look at the well i'm gonna look i'm gonna lock the sometimes when i'm testing complex stuff like this my behavior will be to actually comment out the code that connects to the socket and just fill up state with like fake values that are the ones i want to be testing against hmm that is pretty smart um so yeah maybe maybe i could i could do that i can do that super super quick where does it say okay yeah thanks test body for some reason the page is freezing for me yeah the page is frozen entirely for me too yeah it hadn't before and all of a sudden just did let me reload the page yeah i am as well i'm not sure like i don't think we have an infinite loop anywhere like this [Music] i'm going to kill this use effect for now just comment it out to get us that sweet perf as we test these things yeah but it's definitely unresponsive let me see what what is it doing uh it's kind of hard to debug things in code sandbox yeah it really is oh i i'm excited for stack blitz that is its own sandbox didn't complete its last run cool thanks for that info uh i'm trying to open it in like a separate tab but it's not it just died i don't know what we did but it just died yeah i'm getting like the chrome warnings and stuff now what did we do [Music] well i mean i can comment out the loop just in case but i wouldn't expect like this i really don't think it could be that even uh can we just instead of counting this out just return body for now see if that makes things work again okay yeah that seems uh it seems like it works uh it's still being super super slow for me i yeah i overloaded the tab and i think it works now for me um so let me just i'll keep returning the body to see like what happens and uh okay and it does get stuck do they today's did they mess up the loop somehow uh i don't think so i at this point i'm willing to say this is just code sandbox dying this is highly suspicious uh so let me comment out the loops contents and reload tab there has to be some explanation right like it's not it's not magic yeah if i comment out the lip content it's fine so let's comment out the first line uh okay now it's loading for me again finally yeah the first one is fine and that also seems fine uh is it possible sometimes the generated ids somebody commented i don't think so i commented that all out well yeah that's this thing is like we don't have that use effect anymore so why would that be relevant and then if i try to do this resolve that push then it will freeze again is that right yeah then it will freeze again so something is wrong with this line and i don't understand why because like i don't see anything wrong with it let me comment this out again that is interesting uh let fragment equal fragments i result push the new fragment let's just push something else so let's uh let's do result that push wait ah sorry my cursor is jumping around let's do result that push so i'm reloading and that is that is fine for me do you have the issue i'm trying to get it to reload right now i'll just open it and then you tap and close the other one third tabs the charm okay so for now i'll just debug with the i don't know what the issue with the image was but i just want to debug the kind of the algorithm itself so uh oh i did see one interesting issue that we have due to the split when we have these examples like lull space lull i would definitely expect this to work and right now since we're splitting bottles spaces on both sides yeah for now i'll kill the requirement of making sure there aren't characters on the other side just because that's like obnoxious to deal with in its own like parsing problem yeah yeah okay uh but let me let me see why the so we have hi haha omg so the problem was that you had the space on both sides of the split here right but if you remove that there they're still not right are they so if we if we remove this requirement and i remove this from the split uh so i get high haha omg that is the oh no okay yes you're you're yeah so the yeah okay i got it uh so this this should have been before so we should have done this before the the actual portion any reason to not use dot join uh i mean well where here or where would i use that join but how does this help me like i want to iterate yeah that's that's it's not going to work because it's not no it's not going to work because it will convert it to a string right and it's not actually a string uh dot join won't uh or yeah dot join will make that a string wonder or there isn't an equivalent to that that's just an array yeah that is annoying no yeah yeah that kind of sucks but uh so i think we got the logic down but what the hell is going on with that with that image like why why would that freeze the browser let me just uh this actually isn't uh oh yes this is fixed now yeah uh never mind i am going to ah yeah no this works i i thought i could add a cheap trick to it you know i can't this should work now yeah so uh i want to add this and see what happens so like okay this already broke it i think it's some kind of code sandbox thing with how it implements the jsx because like yeah well i yeah like that's never the only thing i could put that console log in i heard my cpu fan turn on yeah that is that is really really silly i don't know why that is happening i am willing to call this solved as such uh my actually why if i is greater than zero do we push i can't even never mind i was gonna go edit the text but this is fully frozen uh yeah this is good enough for me i wish that code sandbox could handle jsx a little better but uh this was this was more than informative enough for me uh yeah i am down to kill the vs code or the code sandbox and go back to chatting if you are sure sure just gonna kill that for now then well yeah that's the end of the technical portion sorry for the hiccups at the end there i did not think that the use of an image tag would be enough to crumble the editor in front of us but it's very good information to have any other thoughts on that anything that was easier or harder than expected uh i mean aside from like jsx literally not working uh like i'm really nerd sniped right now like i i feel like i'm i'm going to chat the evis about this excited yeah i don't know like why would it why would it hang like what the hell is it doing and i even checked that it's uh like even if you don't supply any props it still does it so like it's not even related to whatever we pass it's just something is is breaking it yeah but i like parsing then right like just whatever they're using on the client to display the jsx parsed well no because it's uh it's already parsed by now so like by the time the function is executed it's it's been compiled by bubble so whatever the compiler is spitting out is broken so i'm taking a step back i think it's actually the editor is the problem i think the editor's attempt to like highlight and color code the jsx is what's causing the problem when you're doing that outside of a return i'm guessing that their actual like linter or whatever is doing the highlighting there for the syntax oh you think so oh wow okay that that is interesting if that's if that's the case okay yeah maybe it maybe that is that is part of this that would be my like i would put into this well that is all i have to be clear if this was a real interview you would have absolutely passed with flying colors the like your ability to solve the problems as soon as i threw them at you with like good questions and insight is the big thing that we look for in interviews and you absolutely killed it with that and for like or just to be frank i watched the other interviews i don't know if i if i had given the interview that ben did i don't know if i would have passed you on that with some of the like stumbling of some of the algorithm questions whereas this made it very clear if you are given problems and a scope that you're comfortable working around and asking questions in even if it's something unfamiliar like both typescript and socket io which are things you haven't used before if the general domain is something you're familiar with in this case like building a user interface with react you're able to ask the right questions and drive the like solution forward so that we're constantly making progress like there wasn't any point in this talk or during this call where i felt like we were truly just going in circles every time we had a problem we were working towards a solution make sense any other thoughts otherwise we can wrap it up uh no i think i mean it was fun i liked it uh actually i i do feel now that in a way i achieved it because i did implement i remembered that i did implement this somewhat similar interface in in react docs as an example because i needed an example for managing multiple refs and for flash sync and the example i used was if a new item is added to the list scroll to that item so it's actually in the docs uh like and i was also researching okay how did you like scroll into view and stuff like this um so it is something that i dealt with recently but i think it's okay because i i wrote that so that that's fine i was about to say i feel like i cheated because i wrote the react docs on a similar topic is not quite cheating that's a good signal for a hiring manager not a bad one once again i i think you made this a very easy decision for anybody on the other side and again like the the message i have to the audience here is take a look at this interview process what we did the questions we asked and what we learned from it and take a look at your own interview process and think about a candidate like dan is somebody like dan abramoff somebody who you would want to hire if they ended up in your like pipe my guess is yes you would and sadly enough my other guess is you probably would fail him or not like give him the right opportunity to shine depending on how you're doing interviews right now so i really want everyone watching to take the opportunity now to rethink your interview process rethink the candidates you're looking for and make sure those things are aligned because more often than not i find they're living in very far-off worlds all right thank you again so much for your time man i yeah i think i should i should definitely do like a lead code style interview just to see how badly i feel so maybe that is that is the thing to do next i've been doing a bunch of advent of code so if you want me to whip together a leap code thing i can i just don't want to give my like audience the false impression that that's how interviews should be done this was very much like the goal of how i believe interviews should be done to best let your candidates shine and i if you want to get pwned an elite code i can do that yeah i think i'm gonna try to do it with like different people every time that there's some variety but i really enjoy it i like this one i think it was really good and i thought that you kind of steered the interview very well with like throwing different things at me but also like it kind of like each piece felt like really manageable and i think like each piece also like had some you know like kind of unique like signal you could extract out of it like so yeah i i thought it was a good question and i really liked it i appreciate that a lot thank you man oh yeah that's all i got thank you again so much for coming on the show i super appreciate it i may be biased because i just had to spend a bunch of time editing this but wow you've made it through the whole video i super super appreciate that i'm still kind of new to this whole youtube thing so it means a lot that you made it this far if you got here please leave a comment let me know that you got to the end of the video thank you again so much for coming if you're not already subscribed please fix that hope to see in the next video thanks again

Channel: Theo Browne

Views: 5,411

Keywords:

Id: uqII0AOW1NM

Length: 80min 14sec (4814 seconds)

Published: Mon Dec 13 2021