So you think you wanna be a web developer...
Fork this, update your copy with answers.
They don't need to be precise - pseudo-code is fine in most cases.
Some questions don't have correct answers.
Submit your answers to ara@dojo4.com
FROM: you@yeraaddy.com
SUBJECT: [dojo4-quiz] quiz-1
BODY:
https://gist.github.com/to-your-submission
==========================================================
- is this broken in html5? if so why? ==========================================================
<div id='teh_javascripts' />teh answerz...
Yes, it's broken. Unlike XHTML, in HTML 5, the forward-slash at the end of this div tag doesn't add special meaning. Instead, HTML5 has elements called void elements that don't need to be closed. The div element isn't one of these elements, and therefore needs to be closed. The self-closing syntax from XHTML won't work. A separate close tag needs to be used.
It can be empty. This would correct it:
<div id="teh_javascripts"></div> 'http://domain.com:4242/foo/bar/baz.html'
teh answerz...
This is the bare minimum:
telnet domain.com 4242
GET /foo/bar/baz.html
^D
If the domain uses virtual hosts, HTTP 1.1 and the Host header will be needed.
telnet domain.com 4242
GET /foo/bar/baz.html HTTP/1.1
Host: domain.com
^C
Sometimes site owners require a User-Agent header, which can be set to anything, but is just required to be there.
telnet domain.com 4242
GET /foo/bar/baz.html HTTP/1.1
Host: domain.com
User-Agent: telnet
^C
A more practical way to make an HTTP request is to use curl, or use a library in a programming language. For JavaScript, I like superagent.
========================================================== 3. in any language you choose, write this to run in parallel
numbers = 20, 1
results = []
numbers.each do |number|
results.push( parallelize{ number * 2 } )
end
sum = reduce( results )
teh answerz...
var numbers = [20, 1]
, results = []
, complete = 0;
for (var i=0; i < numbers.length; i++) {
process.nextTick(calc(i));
}
function calc(i) {
return function() {
results[i] = numbers[i] * 2;
completedOne();
}
}
function completedOne() {
complete += 1;
if (complete == numbers.length) completedAll();
}
function completedAll() {
sum = reduce(results);
// code
}These will all happen in sequence, but if an I/O operation were made in calc() and completedOne() was called in the callback, they could happen out of sequence due to variation in the amount of time to do I/O.
var request = require('request');
function calc() {
return function() {
request('http://www.google.com/', function(err, resp, body) {
results[i] = numbers[i] * 2;
completedOne();
});
}
}========================================================== 4. in any language you choose, write this to run in parallel on multiple cores
numbers = 20, 1
results = []
numbers.each do |number|
results.push( parallelize{ number * 2 } )
end
sum = reduce( results )
teh answerz...
(def numbers [20 1])
(defn double [n] (* n 2))
(def results (pmap double numbers))
(def sum (reduce results)) <label for='user.email'>
<input name='user.email'>teh answerz...
Yes. The <input> tag is fine, because it's a void element, but the
<label> tag requires a closing tag.
if @not_modified
render :status => status
endteh answerz...
It should be the number 304 (Not Modified).
========================================================== 7. is this javascript broken? if so, why?
var submit = document.getElementById("submit");
submit.click();teh answerz...
I haven't noticed anything that would cause an error.
Some might find it confusing to use the id submit, which can also be used as an input type.
I would also consider whether calling the submit() event on the form made more sense than calling click() on the element (which isn't necessarily an input with the type set to submit).
<!-- A -->
<table>
<tr>
<td class='key' style='width:33%'>
{{ dynamic_content_for(:key) }}
</td>
<td class='val'>
{{ dynamic_content_for(:val) }}
</td>
</tr>
</table>
<!-- B -->
<div class='fluid grid'>
<div class='row'>
<span class='key width33'>
{{ dynamic_content_for(:key) }}
</span>
<span class='val'>
{{ dynamic_content_for(:val) }}
</span>
</div>
</div>teh answerz...
It depends. If alignment is important and more rows are going to be added, A is better, because if the content inside the key cells expands beyond 33%, the integrity of the grid is maintained. Otherwise, B is better because it uses a stylesheet instead of a style tag, which makes it easier to maintain.
A could be improved by moving the width to a stylesheet, and B could be improved by using classes that describe the data rather than the presentation.
# A
if var == 42
"..."
end
# B
if 42 == var
"..."
endteh answerz...
A is better because it's easier to read.
@response =
http_request(url, :method => method, :params => params, :headers => headers)
if @response.ok?
ship_it!
else
debugger!
endteh answerz...
First I'd look at the response, using the debugger! action. Then I'd
look at the API docs and compare them to my API call, and see if I
made a mistake in the parameters or headers.
If that didn't work, I'd try:
- finding a test case in an API client somewhere
- finding code that uses it
- searching the net for someone who has the same problem
- contacting the owner of the API
# A
if foo.bar.baz
'...'
end
# B
if foo
if foo.bar
if foo.bar.baz
'...'
end
end
endteh answerz...
A reads better than B, but these are not equivalent. If foo is nil,
the code in A will raise a NoMethodError, while the code in B will
finish running without executing the code inside the deepest if
statement. So B is better because it's more robust.
Rails' ActiveSupport provides a try method which can make it look
like A but work like B. It could be rewritten to:
if foo.try(:bar).try(:baz)
'...'
end========================================================== 12. is this javascript broken? if so, why?
ajax(url)({
'method' : 'POST',
'params' : params,
'headers' : headers
});
teh answerz...
It's valid if ajax() returns a function. If I saw this I'd question that it was what the author intended, partly because of what gets sent to the function maker and what gets sent to the function, and partly because of how it's written. One explanation for code winding up like this is an editor adding a closing parens as part of its intelligent coding features.
This would be closer to what I'd expect:
ajax(url, {
'method' : 'POST',
'params' : params,
'headers' : headers
});
'#FFE'teh answerz...
It's very close to white. It has a small hint of yellow because yellow is the opposite of blue, and it's lacking in blue as compared to the other two primary colors (red and green).
0b101010teh answerz...
It's a binary number. With decimal the places are 10^n where n is the number of places to the left of the rightmost place. With binary the places are 2^n. Here's my calculation of it, starting with the rightmost place:
- 0 * 2^0 + 1 * 2^1 + 0 * 2^2 + 1 * 2^3 + 0 * 2^4 + 1 * 2^5
- 1 * 2 + 1 * 8 + 1 * 32
- 2 + 8 + 32
- 42
========================================================== 15. describe an algorithm to detect the 'edges' in these pixels
0 0 0 0 0 0 0 0 1 1 1 0 0 1 1 1 1 0 0 1 1 1 0 0 0 0 0 0 0 0
teh answerz...
I'd iterate over each of the 1's, and check up, down, left, right for a 0, and if there was one or more 0's I'd mark it an edge pixel.
$color = [@X, @R, @G, @B].as_hex
teh answerz...
The alpha channel. This is the level of transparency* of the color, used when overlaying it. If it's the max (usually 255) it will be completely transparent, and if it's drawn on top of an image it won't change it.
* not sure, it could be opacity, in which case 255 would be completely opaque.
========================================================== 16. what are the advantages of static linking?
export HINT=$LD_RUN_PATH
teh answerz...
If a program is statically linked, it's self-contained, and can be moved to a different system, with the same architecture, without copying any additional files. There's also no worrying about a library getting deleted or the library's path not showing up in an environment variable. It can also load faster in cases, since the loader may be able to load fewer bytes because the compiler can omit unused parts of the library, and from fewer parts of the disk because it's consolidated into a single file.
var uploader = new qq.FileUploader(options);
var image_ids = [];
uploader._uploadFileList = function(){
image_ids = [];
var args = Array.prototype.slice.call(arguments);
var result = qq.FileUploaderBasic.prototype._uploadFileList.apply(uploader, args);
return(result);
};
teh answerz...
It's doing something similar to inheritance, but doing it without
creating a new constructor, and going to a different class from the
constructor (FileUploaderBasic rather than FileUploader).
The arguments are being passed straight from
uploader._uploadFileList to qq.FileUploaderBasic._uploadFileList
without any assumption on the number of arguments, by using the
arguments object and
Function.prototype.apply(). Array.prototype.slice.call() is being used
to convert the arguments object into a proper array.
jQuery('.help').find('a').attr('tabindex', '-1');
teh answerz...
It selects a link and sets the tabindex to -1, which either puts it at the front of the tabbing order or makes it so it can't be tabbed to (I can't remember).
~ > run_api_tests_locally
"FAIL: you must access teh API from a box on EC2 with IP 1.2.3.4!"
teh answerz...
I'd create a small web server in my test directory. Depending on the particulars of the API, I'd generate the HTTP responses, use stored ones, or a combination of the two. If I found it to be complex I might use a response-recording tool like VCR.
// A
User.prototype.first_name = function(){
return this.name.split(/\s+/)[0];
};
// B
User.prototype.first_name = function(){
return User.first_name_for(this.name);
};
User.first_name_for = function(name){
return name.split(/\s+/)[0];
};teh answerz...
A is better because there's less code to maintain. It's still easy to test, because since JavaScript is a dynamic language, a full user object wouldn't be needed for a test object (though I would probably use one).
One circumstance in which it could be useful would be showing a list of partial user records from the database. For this case it would be better to adapt the User class to be able to be instantiated with partial user records.