It’s been about 6 months since I last touched anything web related in terms of coding. It was in Oct of 2010 that I started studying various books and web resources about more advanced CSS, Javascript, jQuery, Ruby, the Rails framework, web usability, and a little bit about programming basics with C. I’ve watched tutorials from NetTuts+ and Lynda. From all that I’ve built a couple sites, a few Terminal programs in Ruby and some working examples of css3 and jQuery.
Lately I’ve been interested in really getting putting this knowledge to use as a junior web developer. I figure it would be best for me to first brush up on what I know and work from there. After brushing up on what I know, or during the brushing up process I plan on looking into SQL and finding a way to implement both it and JavaScripts AJAX.
Earlier today I was looking at my cousins GitHub account and I found an open source web development interview questionnaire. I figured I’d start this “Learning on my own” blog out with this questionnaire and the answers I can give. I’ll show you what I learn while trying to answer the questions I couldn’t answer with ease, confidence, and only my memory. I plan to be able to answer all these questions by memory.
Here is the questionnaire:
General Questions:
- Are you on Twitter? Yes, http://twitter.com/dannysperry
- If so, who do you follow on Twitter?
- Are you on GitHub? Yes, http://github.com/dannysperry
- If so, what are some examples of repos you follow?
- What blogs do you follow?
- What version control systems have you used? I have only used Git, and haven’t used or heard of any others
- What is your preferred development environment? (OS, Editor, Browsers, Tools etc.) I have developed in both Windows and OS X, but I prefere OS X with TextMate. I use Chrome and Safari the most lately, but when I’m developing I do like to use Firefox’s Firebug and web developer toolkit.
- Can you describe your workflow when you create a web page? Generally I will start with a design of the site on paper and work from there. I usually code the html, then design, then add jquery,ect. If it’s a responsive site, which at this point I think all sites should be, then I design each screen from smallest to largest, then work on functionality through jQuery. I’ve been studying Rails and this approach is more fluid. You kind of do functionality and structure at the same time and add styling shortly after.
- Can you describe the difference between progressive enhancement and graceful degradation? Both styles adhere to older and newer browsers. Graceful degradation could have a wider array of browser support with sub par quality for older browser users, Progressive enhancement starts with a base browsers features and sets the quality of the experience there. Any newer browser will only have a better experience.
- Bonus points for the answer “no one can”
- Extra bonus points for describing feature detection I recently learned about feature detection in a jQuery book I was reading. Describing checking if a feature is available and allowing that user to utilize it if so, otherwise coding so that if the feature isn’t available, the site still works. It’s a smarter, more agile form of browser sniffing.
- Explain what “Semantic HTML” means. I’ve read about it along time ago and I could take a guess from the wording used that it is using specific tags for the appropriate task
- What does “minification” do? “Minification” is the process of compiling your script into its smallest file size by taking like variable names and reducing them to a single character. It also removed line breaks and just shortens everything it possibly can.
- Why is it better to serve site assets from multiple domains?
- How many resources will a browser download from a given domain at a time?
- If you have 8 different stylesheets for a given design, how would you integrate them into the site?
- Looking for file concatenation.
- Points off for @import, unless it works in conjunction with a build system.
- If you jumped on a project and they used tabs and you used spaces, what would you do?
- Write a simple slideshow page
- Bonus points if it does not use JS.
- What tools do you use to test your code’s performance? I use w3c’s html and css validator and haven’t settled on a good cross browser viewing program.
- If you could master one technology this year, what would it be? In terms of technology I’d like to master wiring and programing electronic devices, in web development I’d like to master ruby on rails.
- Name 3 ways to decrease page load. (perceived or actual load time)Place external JS files at the end of the body. Eliminate image resizing through js or css. Don’t repeat yourself.
- Explain the importance of standards. Without the movement towards a standardized web we would still be using multiple variations of what is now javascript and users wouldn’t have the same experience with difference browsers like the can have today(at least it wouldn’t be as easy for us to give them that experience)
HTML-Specific Questions:
- What’s a doctype do, and how many can you name?
- What’s the difference between standards mode and quirks mode?
- What are the limitations when serving XHTML pages?
- Are there any problems with serving pages as application/xhtml+xml?
- How do you serve a page with content in multiple languages?
- Can you use XHTML syntax in HTML5? How do you use XML in HTML5?
- What are data- attributes good for?
- What are the content models in HTML4 and are they different in HTML5?
- Consider HTML5 as an open web platform. What are the building blocks of HTML5?
- Describe the difference between cookies, sessionStorage and localStorage.
JS-Specific Questions
- Which JavaScript libraries have you used? jQuery
- How is JavaScript different from Java? JavasScript is a scripting language written to interact with the client. Java is a programming language with server side capabilities.
- What are undefined and undeclared variables?
- What is a closure, and how/why would you use one?
- Your favorite pattern used to create them? argyle (Only applicable to IIFEs)
- What’s a typical use case for anonymous functions?
- Explain the “JavaScript module pattern” and when you’d use it.
- Bonus points for mentioning clean namespacing.
- What if your modules are namespace-less?
- how do you organize your code? (module pattern, classical inheritance?)
- What’s the difference between host objects and native objects?
- Difference between: javascript function Person(){} var person = Person() var person = new Person()
- What’s the difference between .call and .apply?
- explain Function.prototype.bind?
- When do you optimize your code?
- Can you explain how inheritance works in JavaScript?
- Bonus points for the funny answer: “no one can”
- Extra bonus points if they take a stab at explaining it
- When would you use document.write()?
- Correct answer: 1999 – time to weed out the junior devs
- What’s the difference between feature detection, feature inference, and using the UA string
- Explain AJAX in as much detail as possible AJAX serves portions of the server to the client through XML without making the entire page load.
- Explain how JSONP works (and how it’s not really AJAX)
- Have you ever used JavaScript templating, and if so, what/how?
- Explain “hoisting”.
- What is FOUC? How do you avoid FOUC?
- Describe event bubbling.
- What’s the difference between an “attribute” and a “property”?
- Why is extending built in JavaScript objects not a good idea?
- Why is extending built ins a good idea?
- Difference between document load event and document ready event? Document load fires the event at the start of the page load. Document ready occurs only once the page is fully loaded.
- What is the difference between == and ===? “==” means is equal to, “===” mean is the same as. a=5, b=5, a==b, a !===b
- Explain how you would get a query string parameter from the browser window’s URL.
- Explain the same-origin policy with regards to JavaScript.
- Explain event delegation.
- Describe inheritance patterns in JavaScript.
- Make this work: javascript [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
- Describe a strategy for memoization (avoiding calculation repetition) in JavaScript.
- Why is it called a Ternary statement, what does the word “Ternary” indicate?
- What is the arity of a function?
JS-Code Examples:
>~~3.14
Question: What value is returned from the above statement? Answer: 3
“i’m a lasagna hog”.split(“”).reverse().join(“”);
Question: What value is returned from the above statement? Answer: “goh angasal a m’i”
( window.foo || ( window.foo = “bar” ) );
Question: What is the value of window.foo? Answer: “bar” if intially window.foo was false, undefined or zero else it will retain its value.
var foo = “Hello”; (function() { var bar = ” World”; alert(foo + bar); })(); alert(foo + bar);
Question: What is the outcome of the two alerts above? Answer: “Hello World” & ReferenceError: bar is not defined
jQuery-Specific Questions:
- Explain “chaining”. chaining in jQuery is when you apply multiple method events one after the other. $().split().join()
- What does .end() do? .end() stops an event that is in queue so the next even can occur
- How, and why, would you namespace a bound event handler?
- What is the effects (or fx) queue? the effects queue as a build up of multiple events that are triggered on the same object
- What is the difference between .get(), [], and .eq()?
- What is the difference between .bind(), .live(), and .delegate()?
- What is the difference between $ and $.fn? Or just what is $.fn. $ is just the short hand of $.fn
- Optimize this selector: javascript $(“.foo div#bar:eq(0)”) guessing, $(“.foo div#bar”).eq(0);
CSS-Specific Questions:
- Describe what a “reset” CSS file does and how it’s useful. resets eliminate minor browser indifferences like margins, padding, alignment, and font weights.
- Describe Floats and how they work. Floats allow you to keep divs or text in alignment to each other on the left or right of their applied container.
- What are the various clearing techniques and which is appropriate for what context?
- Explain CSS sprites, and how you would implement them on a page or site.
- What are the differences between the IE box model and the W3C box model?
- What are your favourite image replacement techniques and which do you use when?
- CSS property hacks, conditionally included .css files, or… something else?
- How do you serve your pages for feature-constrained browsers?
- What techniques/processes do you use?
- What are the different ways to visually hide content (and make it available only for screen readers)? You can indent -5000px so that the text is still there but not visible on the viewport.
- Have you ever used a grid system, and if so, what do you prefer? I’ve used the 960 grid framework before, and I’ve written my own. It definitely makes things easier once the grid code is set up. I generally don’t set up the grid and just align it, but I do believe the grid system has more advantages than disadvantages.
- Have you used or implement media queries or mobile specific layouts/CSS? I’ve used my own media queries layouts and I’ve used the 320+ boilerplate as well.
- Any familiarity with styling SVG?
- How do you optimize your webpages for print?
- What are some of the “gotchas” for writing efficient CSS?
- Do you use CSS preprocessors? I’ve used SASS, SCSS, and LESS
- If so, describe what you like and dislike about the CSS preprocessors you have used. I like how much quicker you can write your code and the additional functionality in writing code quickly with functions of a sort. I don’t like the lengthy code that is produces from them with certain functions.
- How would you implement a web design comp that uses non-standard fonts? @webfonts
- Explain how a browser determines what elements match a CSS selector?
Optional fun Questions:
- What’s the coolest thing you’ve ever coded, what are you most proud of? Programming in Ruby with the ending chapter challenges from the Prag Prog “Learn to Program” have been the most fun for me.
- Do you know the HTML5 gang sign?
- Are you now, or have you ever been, on a boat. :D, not a big one.
- Tell me your favorite parts about Firebug / Webkit Inspector. In general it saves a lot of time from having to edit, save, reload.
- Do you have any pet projects? What kind? My current hobby is electronics. circuit boards and arduino’s.
- Explain the significance of “cornify”.
- On a piece of paper, write down the letters A B C D E vertically. Now put these in descending order without writing one line of code.
- Wait and see if they turn the paper upside down
- This should make the laugh and is a fine way to relieve some tension at the end of the interview.
- Pirate or Ninja?
- Bonus if it’s a combo and a good reason was given (+2 for zombie monkey pirate ninjas)
- If not Web Development what would you be doing? anything with electronics and the ability to continually learn
- Where in the world is Carmen Sandiego? (hint: their answer is always wrong) I never got into that, but I’m assuming she’s dead or in space in not one person on this planet can find her, or she’s hanging out with big foot.
- What’s your favorite feature of Internet Explorer?
- Complete this sentence: Brendan Eich and Doug Crockford are the __gurus__ of javascript.
- jQuery: a great library or the greatest library? Discuss. It’s the only library I ever learned. It seemed to stand the test of time. I never really got into web design competitively so I slowly learned, I hated IE6 and IE7, and I seem to finally want in the field after those two browsers have less than 1% of the internets users. I like to learn the languages that are for the coder and the user. Ruby, rails, git, jquery(i don’t even know very much about javascript, i know more about one of its library)
As you can tell I don’t feel confident answering all these questions. So I will find the answers and explain them in detail and then start learning AJAX and SQL, and JavaScript itself better.
Learning on my own 