Wednesday, September 30, 2015

Random Quote Generator Notes, Part 2: First time working with an API!

I messed with this a long time. There were breaks in between, but still a long, annoying time.

This time I used the forismatic API to generate random quotes. At first, I didn't know what jQuery method to use, .ajax or .getJSON. If I had not seen the notes in the chat room, I wouldn't have gotten done tonight, I don't think. I ended up using .getJSON for this.

Then I couldn't get a good response back. I typed in what I thought was supposed to go in the url and it wasn't working. Then I saw I was copy and pasting too much and it caused typos in the url. I corrected it and it still didn't work. After retyping it a few times it finally worked and I could get a console message with the quote data.

Then I had to get it on the screen. That wasn't working. Then I got close with my div showing the word 'undefined'. I rearranged my code and it finally showed up. Trying to get the JSON in a separate function wasn't the way to go. Even if I ran the function in the click event I couldn't access the data, hence the 'undefined' happening. 

Once I actually started seeing quotes on my page I had to figure out the best HTML element to create for the author attribution and change the CSS a bit to make things presentable. I took away the giant quote marks and reformatted the text.

I still haven't turned it in because I want to try to implement the Tweet button, but I'm mentally exhausted right now. 

It was my first time working with an API and it didn't spoon feed me a damn thing. It will just make me stronger.



Tuesday, September 29, 2015

Notes taken while working on Free Code Camp's Randome Quote Generator Project

So far, so good. I have the quote generator working with just an array. I still have to find out how to use the API example given. Not much code, besides the long array of quotes. Currently working on finding a nice way to style the blockquote.

Update: The array version is done. I've just been messing with colors and little things that nag me that I don't have much control over, like the button outline color. It puts a thin blue outline around the button when it's clicked, and I looked up how to take that away, but that would also mean messing with accessibility and/or keyboard navigation. Tried to change the color but couldn't get it to work. No biggie.Not sure if that's a Bootstrap thing or a browser thing. I saw both while searching for answers. It's there to help people, so meh.

Link: http://codepen.io/amyruth/full/ojYpJa/

I chose the argyle background the color of old mustard to make it look as stodgy as possible. It's working. I tried brighter colors but it was just too much. 

Update after the fact: I got some hints and ideas on learning how to use the API from the chat room, so the game is still afoot. But later when I get a little rest.

Saturday, September 26, 2015

A Slight Twist of the Melon: Javascript FunctionCeption

In my codenewbiehood, I haven't had many opportunities to do any functionception, that is, running the same function inside of itself. Like the Inception movie, a dream within a dream. You've seen it, I'm sure.

Until now.

I hopped on CodeWars earlier tonight and clicked to get the next kata. You know how you do. I get the List to Array exercise. I work on it for a bit, and get the bulk of the thing correct.

Except when there's an object inside of the object. Fail. Boo.

I grind on this. Do I make another function? Do I do an "if the value is another object, do this?" Yes I do, but how? It was going to be a long night. I went and got something to eat and let things marinate. As you do. This was supposed to be a fitting in some coding before dinner type of thing, dangit!

Then I said "This isn't a contest. Let's look at the other answers." 

First I see all the clever one liners. I'm skipping those and looking for something written in longhand that I can understand a bit better. Found one.

What it boiled down to was this bit of pseudocode: If the value is an object, call the function again, right here. Pull out the values and continue iterating the rest of the properties."

Got it.

This is what I retyped, roughly:

function getprops1(obj){
    //set up array to store values
    var arr = [];
    //iterate the object and pull out the values
    for(key in obj){
        var value = obj[key];

        if(typeof value !== 'object'){
            arr.push(value);
        }else if(value){ 
//if the value is an object, run the function inside itself on that object value
            arr = arr.concat(getprops1(value));
        }
    }
    return  arr;

}

This little test was where my abstract thinking skills failed me. I can understand calling a different function inside another function, but my brain stopped at calling another copy of the current function inside itself.  I don't know how to explain it. I was being too real life and concrete for some reason. I'm pretty comfortable with reassigning variables to themselves (string = string.split(" ") or something like that) but moving that up to variables was hard tonight. I had difficulty following the path of the thread in the knot that is code.

And I'm good at unpicking knots. I work with yarn and thread fun fun so it happens all the time.

If I'd kept going and tried to reinvent the wheel, I probably would have put an anonymous function that was the exact some code in an if condition, then refactored days later and whittled it down to what the existing solution is. It would have been more painful, but I think I could have gotten there.

I see where this could be used in the real world. Maybe a user account is stored as on object and one of the keys is another object that holds a bunch of information that needs to stay together. A customer bank account maybe (it's the best thing I can think of right now so bear with me). 

user = {
    name: "Joe Schmoe",
    address: "1234 Main St",
    checking: {
        acctNumber: 2342342342,
        balance: 2000.20,
        pendingTransactions: {
            date:...etc.
        }
    }
    savings: {...}
}

When you get the feeling that what you're stuck isn't something new or revolutionary, just look it up. No one will fault you for it.




Thursday, September 24, 2015

Argh

How or why I did this, I'll never know.

Some of the sections on my reverse engineering project were rows that didn't have containers. Container classes is how Bootstrap does it's thing a lot of the time. I added the container divs. Now the stuff looks like I wanted it to. Three days ago.

Yay...? I wasn't even going on it that hard, because I'd just done a bunch of surveys for pay and my mind was numb.

The video I watched to get the knowledge in me faster had the guy adding Bootstrap classes directly to the rows, so I might have gotten that bright idea from that. This wasn't the situation for it, I don't think.

It must be this working when I'm tired/distracted/whatever that's doing this.

Bootstrap used to be easy, now it's making me question myself.

There's a couple of things left to do. I have to make sure the user stories are followed, tidy up my CSS and make sure I'm using everything in the stylesheet and I'll see if someone can go over it with me.

Geez.


Tuesday, September 22, 2015

FCC First Zipline: Build a Portfolio Page Part 2

Just out of my second session with this project. I think it was fairly productive.

I rearranged some of the HTML to give the footer section a similar look and feel to the example. I had to put it outside the main container, just like I did with the top nav so it used the full width of the screen. I added padding between the sections to space them out. I tried to group some styles together to keep things concise, but I'm sure more can be done. Tried to make sure if a CSS experiment didn't work or was redundant that I deleted it right away. Lots of typing and backspacing. Between that and trying to look stuff up that sucked up most of the time. 

The biggest event of the night was adding Font Awesome to the pen and adding little social icons to the buttons.

The centering of the About section still needs to be worked out, but the columns aren't stacking until the display shrinks significantly, so I'm happy with that for now.

Next time, I plan on adding placeholder images to the portfolio section, hopefully getting things to center. The contact section layout needs more tweaking, and I need to figure out how to make it so I have enough material to scroll. Right now it's one mouse wheel turn and that's it. I might just add more text or something and see if the text and the image align. In the Twitch stream I watched the guy had problems with that. I have to look up what he did so I can try it.

That's it for now. I need to put this away and attempt to pursue other interests. All work and no play, blah blah. I worked right through a live stream I wanted to watch so I'm a little pissed. It's probably for the best. 

Monday, September 21, 2015

FCC First Zipline: Build a Portfolio Page Part 1

I hit my first FreeCodeCamp zipline project this weekend. It involves reverse engineering a sample portfolio page. No peeking, if you're honest.

I started on it Saturday and kinda got lost. I was having a hard time going through the Bootstrap documentation to find what I needed. I mean, it's all there, but at this point the examples aren't answering my questions. I was going back and forth between that and typing in CodePen and just making a mess. 

So I cleared it out and started from scratch. I structured the HTML with the elements  thought I would need. Then I got the fixed navigation at the top looking presentable. From here on I'm just working downward, one section at a time. It shouldn't be that hard, but that's what I thought a day or two ago and I mucked it up. All the divs you use when implementing Bootstrap start to run together.

Right now I'm struggling with making sure things center the way I want them to. Because the CodePen windows are sort of small, even when you make them wider, I might just type in a text editor and paste. I can keep things lined up easier and be more gentle with myself, not having to wonder if I deleted the wrong closing tag or not.

Once the layout is done I'll worry about the background and the cosmetic stuff. This is good practice for coding a page the way someone else wants it. Whether I like it or not.

I also looked up some video tutorials to watch while I was still feeling lethargic from the monthly deluge. Seeing someone do it and taking notes is quicker than reading, and right now I just want to get stuff done. From this I discovered that you can put the <nav> element outside of your main container div to make it stretch across the page, which is how the example is laid out. 

I was messing with way too long tonight and had to force myself to put it away. I like getting in the flow of things but most of the time I was trying to skim text to find the solution to my problems and it was just making me impatient, so I might have skipped something useful. I found a lot of almost but not quite material that didn't work out. CSS is not my strong point. I just need to be functional.

It's just another dip in the road to jump over.

Thursday, September 10, 2015

FreeCodeCamp Title Case Challenge

I just finished the Title Case Challenge from FreeCodeCamp. I opened up an old title case code exercise I did before to see what I did.

I used some new string methods and kept looking for ways to shorten the code while still making sense. Mostly by chaining stuff together that I would normally do line by line to keep it clear to myself, logging the whole way to make sure the results of those chains were what I expected. I know some folks hate console.log but I love it to pieces right now. 

I looked for ways to get the operation done without adding another variable to the mix. I even saved an element to a variable that I knew was going to be used over and over so I didn't have to type it out again further down. Instinctively! I was DRY like a comedian (with a dry sense of humor).

The old code was 33 lines minus the comments at the top. The code I just wrote was 12, 11 if I didn't have a space in there to keep it neat.

Things are improving.

Monday, September 7, 2015

It can't be THAT hard, can it? Part infinity

Oh my god this weekend in coding.

I was working on the FCC palindrome challenge and thought I could get through it with all my old basic skills.

Nope.

First, I recycled an old remove the punctuation code snippet that I wrote a long time ago. It worked until I had to add one more condition to it. It should have, but something in my computer does not not like it.

I went to the FCC help room and they thought it ought to work too. I started messing around again and got some more tests to pass, finally getting down to trying to remove a question mark.

THE PAIN.

I tried to add that to my old for loop find it/splice it code, and I wouldn't not go there. Tried making a brand new if statement for it, no dice.  Someone says try some regex if you're comfortable with it. Regex, the stuff that's been hyped as over complicated and used to scare people for ages.

I'd learned a few choice elements of it through the site, I just needed to expand it. They got me to regex101.com, and I started typing. It didn't like the damn question mark either, except for once. I tried a different expression, It wouldn't let me escape ? with \\ for whatever reason, but I tried it in the browser anyway since all things pointed to me doing it correctly and I got the last test to pass.

Rewrote the exercise code and finally got the damn Submit button. Saved a bunch of lines of code in the process. I feel better. And no one was evil to me.

That's only the fourth challenge in that section. Oh man.

Thursday, September 3, 2015

Tonight was learning about .match() and regular expressions. Maybe it was because the lessons only went over a few basic but useful ones, but it was easy to absorb. It might not be that way when I have to make one up but for now I feel like I got some good experience points there. It's a mini language that needs to be learned.

I was also thinking about how to refactor some of the code I wrote last week. For now it's getting some sleep. I'm beat.