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 [email protected]


  FROM: [email protected]

  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' />

In HTML5, only "foreign" elements i.e. SVG act as self-closing tags when finished with '/>'. It has no effects on standard HTML tags and thus, when used with a 'div' tag, would still need a closing ''.

Sources:

========================================================== 2. write an http GET request for the url

  'http://domain.com:4242/foo/bar/baz.html'

Been a while... Not sure about the port.

GET /foo/bar/baz.html HTTP/1.1\r\n
Host: domain.com:4242\r\n
\r\n

Send that over the pipes and smoke it.

Source: http://en.wikipedia.org/wiki/Http

========================================================== 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 )

Wut.

========================================================== 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 )

Wut.

========================================================== 5. is this broken in html5?, why?

  <label for='user.email'>
  <input name='user.email'>

Doesn't "for" reference the "id" of an element?

========================================================== 6. what is value of 'status'

  if @not_modified
    render :status => status
  end

Hopefully, 304

========================================================== 7. is this javascript broken? if so, why?

  var submit = document.getElementById("submit");

  submit.click();

Is the intention to submit a form? HTML forms have a 'submit' event that can be triggered on them natively. If the script is supposed to account for previously bound click events on a submit button, it could be appropriate.

========================================================== 8. which is better? why?

<!-- 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>

Doctrine states that HTML classes should be semantic. In that case, the width33 class is fairly useless. A better classname for that might be "skinny" or "small".

========================================================== 9. which is better? why?

# A

  if var == 42
    "..."
  end

# B

  if 42 == var
    "..."
  end

The == operator can be overridden in Ruby. Since this might be much more common on your own objects constructed for your app, you might be expecting to use the overloaded == on whatever class the var instance is. If the intention is to really check that var is most certainly the Fixnum 42, place 42 first and hope that == wasn't overriden there.

========================================================== 10. describe steps to debug this problem

  @response =
    http_request(url, :method => method, :params => params, :headers => headers)

  if @response.ok?
    ship_it!
  else
    debugger!
  end

Don't depend on functioning external services. Build retries or graceful failures into the code. Expect 4XX & 5XX responses.

========================================================== 11. which is better? why?

# A

  if foo.bar.baz
    '...'
  end

# B

  if foo
    if foo.bar
      if foo.bar.baz
        '...'
      end
    end
  end

Depends how the code works. B is uglier, but provides nil safe checks by using the nested if statements. A is cleaner given that you can guarantee that your code won't blow up if intermediary calls raise exceptions.

========================================================== 12. is this javascript broken? if so, why?

  ajax(url)({

    'method'  : 'POST',

    'params'  : params,

    'headers' : headers

  });

It could be...

Assuming the ajax function, when passed a URL, returns another function ready to be executed given an options object, it might work.

It may or may not provide functionality for callbacks. XMLHttpRequest objects act asynchronously natively in JS.

========================================================== 13. what color is this?

  '#FFE'

Guess: Gray Actual: Light Yellow (Manilla Folder)

========================================================== 14. what number is this?

0b101010

Binary encoded: From right to left...

( 2**0 * 0 ) + ( 2**1 * 1 ) + ( 2**2 * 0 ) + ( 2**3 * 1 ) + ( 2**4 * 0 ) + ( 2**5 * 1 )
0 + 2 + 0 + 8 + 0 + 32
42

Should have known...

========================================================== 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

Start in the upper left corner. Loop through each cell per row, traversing from left to right, until an edge is found. Mark each edge cell that is encountered. Once the first edge is encountered, attempt to move in each direction to detect the next edge in the order of right, down, left, up. If an edge is detected, move the loop cursor to that cell and mark it. Ignore edges already detected. Once all edges have been detected for a group, continue looping from the last encountered edge.

========================================================== 15. what does @X represent?

  $color = [@X, @R, @G, @B].as_hex

Opacity?

========================================================== 16. what are the advantages of static linking?

  export HINT=$LD_RUN_PATH

From my understanding, static linking of dependencies provides a way to ensure that builds have fewer external requirements. In practice, this leads to a more seamless development experience as required packages/binaries/includes are always present. The trade offs might be around build complexity and size.

In the dynamic Ruby environment, I believe one can get closer to 'static linking' by vendoring gem sources in a project.

See @wycats' Tokkaido project for struggles with static vs. dynamic linking when building/compiling distributable Ruby binaries.

========================================================== 17. wtf is this javascript doing?

     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);
     };

Ensuring:

that the image_ids variable is reset when the _uploadFileList function is called on the uploader
that the _uploadFileList function from the basic uploader is used

========================================================== 18. what does this code do?

  jQuery('.help').find('a').attr('tabindex', '-1');

Guess: Places browser focus on the first link within the element that has the .help class.

Actual: When a user hits the TAB key, links (<a>) within the .help element are the first selected.

Source: http://stackoverflow.com/questions/4115953/where-do-tabindex-0-html-elements-end-up-in-the-tabbing-order#4115989

========================================================== 19. how would you solve this problem?

  ~ > run_api_tests_locally


    "FAIL: you must access teh API from a box on EC2 with IP 1.2.3.4!"

A few options:

Don't run the tests locally
Run the tests locally against a locally hosted version of the API
Separate all API logic from the network layer and run the tests against that assuming that the network layer simply provides an authenticated/authorized gateway into the API.

========================================================== 20. which is better? why?

// 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];
  };

Subjective.

The first feels right for the 'object purists' in the house. Assume all Users need a name and that their first name can be derived from that.

The second feels better from a responsibility standpoint. An individual User instance does not need to know how to derive its own first name. But, the User 'class' knows that first names are typically derived by finding the first word of a person's name. This is a more functional approach that removes some state necessities.

cookrn/quiz-1.md