3 ms·

I love these questions. I'm a self-taught front-end developer and always want to test my skills. I will answer what I can without searching, just for the fun of

by rudasn 15y ago

I love these questions. I'm a self-taught front-end developer and always want to test my skills. I will answer what I can without searching, just for the fun of it. Also, I just woke up. Feedback would be greatly appreciated. 1) Iframe over XHR. Not quite sure. I have used iframes to load a print version of a page and print it without redirecting the user. Other than that, perhaps I would also use frames to get a fully rendered response from the server and just append the html to the existing dom (so as to keep XHR for data only responses). Or load a bunch of templates. Or just use iframes for what they really are, embedding other webpages into the existing one. 2) One method that looks bullet-proof is what olark has done: https://github.com/olark/lightningjs https://github.com/olark/lightningjs Takes care of xhtml vs html, bad code, bad browsers and lots of other stuff (performance). 3) Yes I can. Years ago I used while() and was excited to find out that it's actually a good solution. I wouldn't load a library when it would make the experience less better. 4) I would guess dom manipulation, append, insert and the like. I always remove the parent element and then put it back in when I'm done with it. innerHTML is also fast and appropriate sometimes. 5) I can't understand the problem/question. Can you elaborate? 6) Off the top of my head: input, br, hr, meta, link, img. Omitted entirely? Not sure but I would say body and html. I would search and choose one of the top results. If its stackoverflow, w3c specs, htmldog I wouldn't worry. 7) Use location.hash. I wouldn't know how to implement it my self (IE needs an iframe from what I understand, Safari has/ad its own issues) but there are a bunch of libraries out there to do it for me. HTML5 has pushState, yay! 8) Good question. Considering only HTML and CSS I would use CSS colours (but not background-image, that was fixed). As for HTML5 I can't think of something. 9) I know and read about those but never used them, except for persistent storage. 10) With the data- attribute.. Or you can write your own doctype. Ha!

nostrademons 15y ago
1.) Think in terms of user-perceived latency and progressive rendering. 4.) That's one of the big ones. Also, adding new CSS rules to the page is really slow because it forces a reflow. Basically anything that forces a reflow and makes the browser repaint the whole page will be slow. 5.) IE6-8 has a limit of 4095 CSS selectors in a single stylesheet (it's good to know that limit, because additional CSS rules are simply dropped silently). It's not terribly hard for a relatively complex webapp to hit that limit. The solution is simply to break the CSS up into multiple <style> tags (or stylesheets, if you're using external CSS). The hard part in this question is understanding what the problem is, not how to fix it - many frontend devs aren't familiar with arbitrary browser limitations. (This question came out of an actual problem that Google+ faced about a week after launch.) 6) Also li, dl, dt, tr, td, th, etc. The specific ones don't matter so much as understanding that you go to the spec to figure it out, not to w3schools. Also, the official spec is at WhatWG.com, not at the W3C site. 8) Oh, I was talking about tracking it yourself on the server (for logging/algorithmic purposes), not about displaying it to the user. Anyway, for user display there's the :visited pseudo-class. For logging, there're a bunch of alternatives like going through a redirector or adding some JS that makes an XHR or image request, but the HTML5 solution is <a ping="...">, which unfortunately is still buggy in most browsers.
- rudasn 15y ago
  thanks for the feedback, really appreciate it!

by rudasn 15y ago

nostrademons 15y ago

1.) Think in terms of user-perceived latency and progressive rendering. 4.) That's one of the big ones. Also, adding new CSS rules to the page is really slow because it forces a reflow. Basically anything that forces a reflow and makes the browser repaint the whole page will be slow. 5.) IE6-8 has a limit of 4095 CSS selectors in a single stylesheet (it's good to know that limit, because additional CSS rules are simply dropped silently). It's not terribly hard for a relatively complex webapp to hit that limit. The solution is simply to break the CSS up into multiple <style> tags (or stylesheets, if you're using external CSS). The hard part in this question is understanding what the problem is, not how to fix it - many frontend devs aren't familiar with arbitrary browser limitations. (This question came out of an actual problem that Google+ faced about a week after launch.) 6) Also li, dl, dt, tr, td, th, etc. The specific ones don't matter so much as understanding that you go to the spec to figure it out, not to w3schools. Also, the official spec is at WhatWG.com, not at the W3C site. 8) Oh, I was talking about tracking it yourself on the server (for logging/algorithmic purposes), not about displaying it to the user. Anyway, for user display there's the :visited pseudo-class. For logging, there're a bunch of alternatives like going through a redirector or adding some JS that makes an XHR or image request, but the HTML5 solution is <a ping="...">, which unfortunately is still buggy in most browsers.

rudasn 15y ago
thanks for the feedback, really appreciate it!