Hey everyone and welcome to Developer Tea. My name is Jonathan Cutrell. Today I'm going to be answering a few front-end developer interview questions. If you're not familiar with the front-end developer interview questions repository on GitHub, I would recommend that you take a look at it especially if you are either hiring or looking for a job as a front-end developer. It is a very well put together set of questions that a ton of people have contributed to. In fact there's 135 contributors. I've talked about it on the show before. It is under the HTML5 boilerplate user on GitHub or the organization rather on GitHub. It's at github.com, front-slash h5bp. You'll find it there. It has a ton of stars. It is quite popular. There's a ton of really good questions on here including general questions as well as pretty specific questions. Today we're actually going to cover one general question and one specific question. I want to start by saying that most of these questions have multiple answers. There's no one right answer. That's also even more true because what may be right today may not be right next year or even as soon as tomorrow. The questions on this repository are more to get an understanding of how you think rather than to quiz you or to get you to answer really specific information. Of course there are specific questions. Like I said previously that test your knowledge about a given subject but again those questions quite often have more than one simple answer. There are some questions that have essential content responses that you should know if you are looking for a job in this field. Most of these have quite a few different answers. This is mostly an opinion as what I'm saying. What I'm going to tell you is mostly an opinion. However this first question does have a pretty specific answer. You can walk away with some actionable knowledge from today's episode of Developer Tea. If you didn't already know the answer to this question. The question is a JavaScript related question and it's very simply what is the difference between call and apply. Specifically on the repository it's the dot call and dot apply. It gives you a little bit of an idea of what these are. These are actually methods that you can run on a function object. So you could say set a variable food equal to a function and then run food dot apply or food dot call. Why would you want to do this why would you want to call a function this way rather than actually just calling the function like you normally would by saying food with parentheses well it turns out that JavaScript has a very strange way of dealing with a keyword called this the keyword this in JavaScript refers to the owning object it may be similar to in other languages the keyword self. However, if there's not a particular function that owns the object that you've created. Then this refers to the global context or the parent context and it gets a little bit confusing if you aren't controlling this more explicitly and that's exactly what the dot call and dot apply methods allow you to do to pass in the first argument to both of those which is the context on which to execute that function. So if you had var food equals function and then you do something inside of there with the keyword this you can control what that particular keyword refers to by using dot call so food dot call and the first function parameter would be the object that this refers to. So getting to the question at hand what is the difference between dot call and dot apply let's imagine that your function takes two or three arguments if you wanted to pass in arguments when you are using the dot call function you would pass them in as you normally would so for example let's say var food equals function and there's maybe argument one and argument to well then when you do food dot call you would say food dot call and then you pass in whatever the object. The object that you want this to refer to is and then you would pass in argument one argument to dot apply works very similarly except instead of passing in your arguments as regular arguments you pass them in as an array of values you pass them in as an array which is a single argument technically speaking so syntactically you would simply wrap those arguments in square brackets. Now when would you might use these differently it totally depends on your context and there's no specific right or wrong way to handle these things but if you are building up a dynamic set of arguments you would probably want to use dot apply if you are using a set number of arguments you would probably want to use dot call. Simple nomenic device to remember which one is which just remember that dot apply starts with an a and that's the one that you pass in an array so dot apply and in fact array ends with a why and so does apply so the one that begins with an a and ends with a why is the one that you pass an array into dot apply. Takes an array and then dot call takes a arguments list of regular arguments list like you would pass into a regular function call and that's it that's the simple difference between dot call and dot apply in JavaScript so we'll move on to the second question right after a very quick sponsor break. What if you could learn to build anything in one month well with one month dot com you can just ask anyone of the 20,000 students who have learned to code on one month dot com by building real websites and applications complete with payment systems security solutions and full stack deployment. You can start without any prior experience in just 15 minutes a day for 30 days all online that's because one month hyper focuses on applied techniques that you use immediately in the apps you are building as part of the courses one month's courses are the easiest way to learn new text skills including Ruby on rails Python content marketing growth hacking and more. And if you get stuck there's always someone there to help you out while you learn yes that's a real person not an automated computer so enroll now at one month dot com front slash Developer Tea and get 25% off your first month normally access to all courses cost $99 and access to one course usually costs $49 but with the special URL you get full access for just $74 or one course for $37. That's less than $3 a day or if you do a single course is just over $1 a day enroll now for 25% off your first month at one month dot com front slash Developer Tea. So the second question that I want to cover today is a little bit more ambiguous that has multiple answers and that's why I think it's interesting I think it's a good question to ask a potential hiring candidate I'm going to approach it the way that I would answer the question. So the question is this if you have five different style sheets how would you best integrate them into a site so the question is referring to having five separate style sheets that you have to integrate into a single site now I would start by asking a few questions in order to clarify the intentions of that particular style sheet or those particular style sheets for example do all five style sheets apply to the entire site or is there a style sheet for the home page and maybe a secondary style sheet for the admin pages and another style sheet that applies to you know the secondary pages that are public facing what are the reasons for having those separate if there aren't any good reasons to keep those separate then I would most likely approach this problem by finding a way to merge all of those style sheets into a single style sheet using something like gulp or grunt or even a front and tool like coke kid. And the reason I would choose to do that is because it's much faster to load a single resource then to load five separate resources on a given page now if there is a good reason to keep them separate then the real question is is there a way to dynamically load the ones that we need to load when we need to load them for example very few people are going to see the admin interface so there's not a good reason for me as a public facing user that will never see the admin interface to actually load that style sheet it's just extra weight that I don't need to see some frameworks already have this built in of course you could solve this using a front in tool like the one that Rebecca Murphy and I discussed called scout file what scout file does is it actually pulls in style sheets and other JavaScript files using JavaScript and it loads them in asynchronously from your website loading so does it really fast and it allows you to set really long caching times on these front and files if you had this kind of tool you can use JavaScript to determine which ones need to be loaded for a given page so for example you could have a scout file for only your admin pages that loads in your admin CSS and keep that in the header of your of your site or however you want to handle that but find a way of loading in these things dynamically of loading in only the things that you need to load in now there are a few caveats to this approach first of all if you are merging five style sheets it's possible that that would end up in a very large CSS file and unfortunately there is a limit to the number of selectors or rules rather that Internet Explorer will load and that's Internet Explorer version six all the way up through nine in fact it has a hard limit at 4,095 rules per sheet now you can solve this simply by separating your sheets into two sheets and there are tools to do this specifically there's one called CSS CSS and that one has a gulp and a grant module that you can use to automatically make sure that your CSS follow these follows these rules and loads properly in Internet Explorer now the question that I might ask is if all of that CSS was still necessary is it possible that some of that CSS is left over from a previous design or perhaps it was brought in as part of a framework or a plugin and it could be stripped out is very possible that some of the CSS is no longer being used and therefore can be removed entirely which would speed up the load time of those CSS files and perhaps more importantly would make development in the future much easier to accomplish because it becomes much easier to reason about the code when there is less code to reason about I hope this has been a helpful exploration of these two questions and I hope that you can see the subjective nature of some questions when you sit down for an interview and the objective nature of other questions ultimately if you are being interviewed it's important that you can form an opinion and be able to back up your reasoning for that opinion there's no shortage of opinions in web development and it is a skill to be able to form an informed opinion about a given subject in the CSS loading example you have to take into account all different kinds of trade offs and move forward it's important to be able to make a decision based on your formed opinion and explain why your opinion is what it is to be able to back up whatever you choose to do given a set of circumstances if you are able to form an opinion and act on that opinion that is a skill that makes you hireable as a web developer I hope you've enjoyed this episode of Developer TeaI hope it has provided some value to you if it has please consider giving us a review and iTunes this is the best way to help Developer Teaout of course I appreciate every moment that you listen to this show this show is here for you and I am so happy that I have so many awesome people listening you can always reach out to me on Twitter at at Developer Teaor email me a developertea@gmail.com and until next time enjoy your tea