Wednesday, December 25, 2013

Listen to Battlestar Galactica Soundtrack Whilst Coding

The title says it all.

F'd up my migration, forgot to git commit for awhile, all hell broke loose. Then came "The Shape of Things to Come"... JUST as I migrated, rollbacked, db:test:prepare, db:populate and what not and got ALL 102 of my tests which were failing to pass.

Anyway, I know I haven't written in awhile... will do tomorrow!

-TJ

Monday, December 9, 2013

See your Rails App on your phone!

So lets say you recently made a rails app and you want to see it on your phone. How to do that?

1. (fyi- for mac users) in terminal type in "ifconfig"
2. Find the "netmask" address ... for example it may look like this:


inet 10.6.7.216 netmask 0xfffffe00 broadcast 10.6.7.255


That xxx.255 = your wireless network's IP address
xxx.216, MY computer's ipaddress within the wireless networks address. 

3. So now startup your rails app AND make sure your phone is on the same wireless network as your computer. 

4. Then point your browser to 10.6.7.216:3000 and you should be good to go!!


Sunday, December 8, 2013

The Hacker Corral

Another FUN project:

www.HackerCorral.com

Make a Rails app where other coders can find or create places to learn from one another...

Here is my homepage mockup:
Looks pretty sweet, huh?

Ready for a wireframe? I'll past it below.... check it out. But I HIGHLY recommend making an outline (wireframe) before starting any project of significance. This will get you thinking about what needs to be done, relationships, the general flow, etc.

One major unintended consequence is that I noticed an abnormal number of "features" that led to the same spot on several different spaces on the same page. WHY DO THAT? I got rid of them and now the app looks nice and minimalistic... and thats great since I do want this to be mobile first!

There are some things that I need to learn, which are daunting:

1. Google Maps
2. Calendar creation

Other than that there's going to be a mess of model relationships (events, users, attendees{another type of user}).

Wish me luck!

Home_PAGE:
not logged in/ logged in

Features:
Events_LINK, Login_BUTTON, Search_FIELD, Create_BUTTON, Map_FEATURE, Calendar_1week_FEATURE
  • Clickable: Events_LINK
    • clicking on Events_LINK goes to calendar/map page (calender_map_PAGE)
  • Button: Create_BUTTON, Login_ BUTTON
    • clicking on Create_ BUTTON goes to a create page (create_PAGE)
    • clicking on Login_ BUTTON brings drop down to twitter/FB/custom (custom_login_PAGE)
      • if logged in see selected events (selected_events_PAGE)
  • Search_ FIELD
    • enter zip code or description, ruby, JS, etc. (calender_map_PAGE: searched w/ list)
  • Features: map_FEATURE, calendar_1week_FEATURE
    • map_FEATURE shows events based on IP address
      • clicking leads to event_PAGE
      • READ BUBBLE
    • calendar_1week_FEATURE
      • clicking leads to event_PAGE(?)
      • READ BUBBLE
What do I need to know?
  1. Form Fields
  2. Searching (how to search by zip code? Type of event?)
  3. Map (Get map to work? how to show saved events? Clicking on map?)

calender_map_PAGE
comes from:

(not searched)
home_PAGE => clicked on “events_FIELD”

(searched)
home_PAGE => searched in search_ FIELD

Features: Events_LINK, Login_BUTTON, Event_LIST, calendar_4week_FEATURE, MAP_feature
  • clickable: events_LINK
    • refreshes (goes to calendar_map_PAGE)
  • Event_LIST
    • can click on any event, pop for event name & quick accept OR addtnl details goes to event_PAGE
  • calendar_4week_FEATURE
    • BUBBLE
      • Not already selected
        • Event name
        • See who else is going
        • addtnl details to events_PAGE
        • Quick Accept refresh, email, update calendar
      • Already Selected
        • Event name
        • See who else is going
        • addtnl details to events_PAGE
        • deselect refresh, email, update calendar
  • Map_FEATURE
    • BUBBLE
      • Not already selected
        • Event name
        • See who else is going
        • addtnl details to events_PAGE
        • Quick Accept refresh, email, update calendar
      • Already Selected
        • Event name
        • See who else is going
        • addtnl details to events_PAGE
        • deselect refresh, email, update calendar

What do I need to know?
  1. Pop up thingy
  2. how to refresh options without refreshing page
  3. update calendar
event_PAGE
  (details soon)
create_PAGE
      • Purpose
        • here you enter what this is for: “Rails, JS, etc”
      • Details
        • Basic details : “2-day hackathon, JS”
      • Additional details
        • Click “+” for optional details
      • Create
        • Click to create event


custom_login_PAGE
selected_events_PAGE

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]