Tuesday, November 26, 2013

I want my green dots on GitHub

This may be a bit silly, but I want those green dots on my github account.

I was getting them, and then they stopped showing up even though I was furiously making all sorts of contributions. What could have been the problem?

I DID notice that they were coming back when I was working on my home computer instead of my laptop. That should have alerted me to the fact that something went awry on my laptop... but I was too busy to take notice.

NEXT after reading every so often online one thing that kept on coming up was something about my email account being the some as the one registered on GitHub.

Now, earlier this week I realized what my problem was after upgrading my shell to zsh (a blog coming up on that at some point)... my .gitconfig file was pointing to the wrong email address!!

In the terminal I typed: subl ~/.gitconfig (opened that file in sublime)

First lines were:
[user]
name = tmehta2442
email = tj@tejas-mehta.com

wait what? I had the following address in GitHub: tmehta@post.harvard.edu

Simply fixing that line to:
[user]
name = tmehta2442
email = tmehta@post.harvard.edu

Ahhh... manymany green dots now :)

jQuery & Ajax (for my calculator)

Check

I've spent a lot of time learning jQuery and Ajax. I'm close to the point where if I were presented with some code I can understand what is going on... a win by any measure!
Take this snippet:

$(".numbers").on("click", "button", function(event){
         .....
});

It took awhile to grasp what is (and what ISNT going on). There are so many concepts going on here: DOM traversal, mouse events, a function and all the jQuery goodness to go with it. 

Further, here are some variables presented in my calculator app's jQuery function:

var inputs = [];
var currentInput = "";
var action = "";


Aside from the basic knowledge of saying that inputs is an empty array and currentInput & action are empty strings, what are they meant to do?

From my understanding, currentInput and action will be populated with the clicks of the numbers and operation and then sent to an array for "storage". 


Next up are the delegates... wait, what does that mean? 
"Event delegation is an event handling technique where, instead of attaching event handlers directly to every element you want to listen to events on, you attach a single event handler to a parent element of those elements to listen for events occurring on it’s descendant elements."

...
...
...

At first brush I would say that this means something at some point has to do less work to get something done. Like, lets say we had 50 elements ... using event delegation we would "listen" for a particular event, rather than having then all ready to go. 

$(".numbers").on("click", "button", function(event){
var val1 = $currentInput.val();

//$currentInput.val(val1 + $(this).data("num"))
currentInput += $(this).data("num");

$displayField.val(currentInput);
});

Again, looks like we are going up the DOM to wait and hear... 

Allright, getting a bit late... some more work to do!

Monday, November 25, 2013

Who will console(.log) me?

I have to remember how powerful console.log is. 

Right now I have some of the following code in my rails app


-->new.html.erb
<div class="col-sm-9 qwerty">
        <div class="row">
          <button class="col-xs-3 btn btn-default" data-num="1">1</button>
.
.
.

<div class="operations">
          <div class="row">
            <button class="col-xs-6 col-xs-offset-6 btn btn-default" data-operation="+">+</button>
          </div>
.
.
.
How would I test to see if I am traversing the DOM correctly? In the past (as in earlier today) I would have just written my code and hoped for the best. 

There is a better way- at least until my coding skillz are up to snuff:

-->calculators.js
###

$(function() {
console.log($(".qwerty"))
// or console.log($(".qwerty").children())
});
###
Snap, it worked. Now, what will we get back with "this"? 

$(".qwerty").on("click", "button", function(event){
      console.log(this);

Looks like the html element as we wanted when we click on the "1" button (on the console we get: <button class="col-xs-3 btn btn-default" data-num="1">1</button>)

###

Know what would be SICK? If we could get that data-num. Afterall, after pushing one of those buttons we want to "retain" a value. 

adding: console.log(this.getAttribute("data-num")); 
done, shows we can indeed get that data-num value

###

what about these?

console.log(event);  ~>
console.log(event.currentTarget); ~>
console.log(this); ~>
console.log(this.getAttribute("data-num")); ~> 0
console.log(this.getAttribute("class")); ~>

console.log($(this).data("num")); ~>0


Calculated Risk

Calculated Risk

After trying to think of what to code for a quick review, I landed on a calculator. It'll be simple, but it will help me bring together several things I've been having trouble with. 

Idea:
A Rails calculator app with Ajax, JS, JSON, etc. For fun I'll use bootstrap to make it look nicer.

This isn't going to make much sense, but it's kinda my notes. Maybe at some point I'll clear this up at some point ...

<div class="container">
  <button data-num: 2> </button>
</div>


$(".container").on("click", "button", function() {
  $(this).data("num");
});

Is this going to get what I want it to?


Thought process for making this:

1. A user "clicks" a button
    for num1

2. A user "clicks" a button
    for operation
        a. num1 stored in an array
        b. operation stored
        c. clear input

3. A user "clicks" a button
    for num2

4. "clicks" "="
    a. num2 stored in array
    b. $submit => AJAX

5. wait for "done" event
    a. display answer

Wow, a lot for what seems to be a simple calculator!

EDIT:
2. a. add the selected operation to the input[operation] input field
    b. I have to switch currentInput to input[num2]