day 114 — code 365

Warmup

For the Atbash cipher, I was reminded that Ruby provides more versatility for working with arrays and strings.

For the string ‘abcdefghijklmnopqrstuvwxyz’, I found a quicker way of converting it into an array that I could use was to use the DevTools console:

'abcdefghijklmnopqrstuvwxyz'.split('');
>> ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]

And then copy that into my code to use.

curl

Fetching things from the command line!

curl https://code.jquery.com/jquery-1.12.2.js > js/jquery.js

cURL is a computer software project, providing a library and command line tool for transferring data using various protocols.

The cURL produces 2 products:

libcurl is a free client-side URL transfer library, supporting FTP, FTPS, Gopher, HTTP, HTTPS, SCP, SFTP, TFTP, Telnet, DICT, the file URI scheme, LDAP, LDAPS, IMAP, POP3, SMTP andRTSP.

curl is a command line tool for getting or sending files using URL syntax.

Atom

Added a key binding for ‘go to end of line’

'atom-text-editor':
  'ctrl-/': 'editor:move-to-end-of-line'

AJAX

We were introduced to AJAX today, and how to write a request using vanilla JS.

All data requests using AJAX operate through a XMLHttpRequest object — a XHR object.

This object has 5 states, and this can be retrieved by the property XMLHttpRequest.readyState

0: UNSENT — Client has been created. open() not called yet.

1: OPENED — open() has been called.

2: HEADERS_RECEIVED — send() has been called, and headers and status are available.

3: LOADING — Downloading; responseText holds partial data.

4: DONE — The operation is complete.

Closures

For the homework, which involved creating a simple Single Page Application that queried the Open Movie Database using AJAX, I ran into the problem of needing to store the value of my counter i:

for (var i = 0; i < data.length; i++) {
  a.addEventListener('click', function(event) {
    img = document.createElement('img');
    img.src = data[i].Poster;
  });
}

However, the problem with this is that the links would only store the src of the last element in the data array!

After much frustration / learning, I fixed this problem using closures to capture the value of i. I’ve read about closures before, but — again — I felt like I’d forgotten all about it. However, it was encouraging to notice that it made more sense reading through the various code examples in the explanations I came across.

for (var i = 0; i < data.length; i++) {
  a.addEventListener('click', (function(event, iCopy) {
    return function(event) {
      img = document.createElement('img');
      img.src = data[iCopy].Poster;
  })(event, i));
}

By immediately executing my (anonymous) function, I was able to capture the value of i at each iteration of the for loop.

It was a bit tricky, because of the event object that is automatically passed with event handlers, but it was useful working through that as well.

After the immediately invocation (to use the nomenclature of IIFEs), the function becomes another function (as delivered by the return) — and (now), iCopy is an actual value, and not a reference to a value.