learning how to hack @vveleva-hack - Tumblr Blog

App Academy - WEEK 8 DAY 1

It's fun working on Trello but I can't wait to start working on my final project. I wish we had the final assessment last Friday so that I could spend all of this week polishing my proposal and finally working on something I'm really excited about. Starting on final projects tomorrow!

App Academy - WEEK 7 DAY 5

We're now officially done pair programming. From now on it's all work your butt off and pray to the TA gods to help you :).

We started Trello clone on Friday. It's supposed to be a 2-day project, but we also get the weekend to work on it, so it's really more of a 4-day project in case you need the extra time. I feel a little less hostile towards Backbone and JS now that I got to make draggable lists with draggable cards inside them. Making interactive elements always brings a higher level of satisfaction to my work.

I need to spend this weekend making a proposal for my final project. I'm a bit worried my project might be a bit too complicated, but hopefully I can organize my thought well enough to be able to just plough through the whole thing.

App Academy - WEEK 7 DAY 4

Yet another day of hardcore Backbone practice. Today's project was a bit shorter thatn usual because we had a second lecture in the afternoon about final projects. I still don't feel confident in my Backbone skills, but I'm really hoping that by Monday I'll have logged in enough hours of doing models, collections, and views, that I'll know if off the top of my head. That's the hope. Time to do some more readings.

App Academy - WEEK 7 DAY 3

Backbone makes so much sense when you get to write it all yourself from scratch. I was done at 3pm and then spent an hour messing with CSS. The rest of the day shall be dedicated to side-projects. Yay free time!

App Academy - WEEK 7 DAY 2

Pokedex continued. Today we played with views and routes. None of is has quite sunk in yet, even though I finished all the work by 5. Hopefully by next week it'll all make more sense.

App Academy - WEEK 7 DAY 1

Backbone

After working with backbone today, it's beginning to make a little more sense. Backbone's documentation and source code are so easy to read, so makes it extremely useful. Today's project was about pokemon, and the most frustrating part was trying to figure out whether a use of pokemon is meant to be plural or singular. It should be called pokemons (or pokemen)!

Models

all the essential data for a Backbone model is stored in an internal object called attributes

use get and set to access attributes. Don't ever access attributes directly!

use escape instead of get to safely html escape data

id maps to the id attribute in the attributes object. It can be accessed directly by calling, say example.id

id attribute is used to determine if a model isNew (backbone will figure out whether to send PUT or POST based on isNew)

cid is used to uniquely identify models on the client side.

model methods - the following are $.ajax request to the rails controller using the model url:

save on a model without id => POST request => controller#create

save on a model with an id => PUT request => controller#update

save on model with id { patch: true } => PATCH request => controller#update

fetch on a model with an id => GET request => controller#show

destroy on a model with an id => DELETE request => controller#destroy

save makes an $.ajax request to the rails controller using the model url

Collections

collection methods:

fetch => GET => controller#index

create passing in a hash of new model attributes => POST => controller#create

comparator - keeps models in sorted order

App Academy - WEEK 6 DAY 5

AJAX is some really powerful stuff. It seemed really confusing at first, but I realized it wasn't as bad as I thought once I started writing it. It was kind of fun since you get rewarded for your hard with cool animations and quick page renders.

App Academy - WEEK 6 DAY 4

We spent all day today making jQuery plugins. I think 90% of our time was spent debugging rather than actually making cool things. We got through 2 of the projects: Tabs and Cat Carousel. Tabs is a list of links, and when you click on a link, it toggles some text below. Cat Carousel is just like what it sounds like: a jQuery image library for cycling through pictures of cats (implementing the slide motion was where the majority of my time was spent today).

App Academy - WEEK 6 DAY 3

Finally getting our hands dirty with jQuery. So much fun. We implemented Tic Tac Toe, Towers of Hanoi, and Snake. I get a huge amount of satisfaction from being able to see my hard work do it's thing the browser. I love being able to interact with it. I'm still not a fan of JS, but jQuery makes it much more pleasant. Yay jQuery!

App Academy - WEEK 6 DAY 2

CSS Day!! I fucking love CSS. Today I killed it and then I murdered it. I managed to finish today's ridiculously long project by the end of the day. I also learned some new things about CSS, which I didn't already know. For example, I used :last-of-type and :first-of-type, and transform: translateY(<number>%) which I hadn't seen before.

During lecture, I also managed to pushed my side project to heroku and then even had time to implement a toggle button, and then push that to the live site as well. Today was a really productive day.

CSS

* - select everything

#X - id

.X - class

X Y - select children that match Y

X > Y - select only direct children that match Y

X + Y - selects the first Y element that is immediately preceded by X

X ~ Y - like X + Y but less strict. It will select any Y elements as long as they follow Y

X[title] - attributes selector only selects X elements that have a title attribute

X[href="foo"] - will style only anchor tags which link to "http://foo/"

X[href*="nettuts"] - like the above, but * designates that the proceeding value must appear somewhere in the attribute's value

X[href^="http"] - will style anchor tags that begin with "http"

X[href$=".jpg"] - will style anchor tags that end with ".jpg"

X[data-*="foo"] - can be used to select all data of certain type

a[data-filetype="image"] { color: red; }

a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; } // would select something with href="path/to/image.jpg", or data-info="external image"

X:checked, X:after, X:checked, X:hover, X:not - trivial

X::pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em; } p::first-line { font-weight: bold; font-size: 1.2em; }

X:nth-child(n) - note that this is not zero-based

X:nth-last-child(n)

X:nth-of-type(n) - rather than selecting a child, you select according to the type of element

X:nth-last-of-type(n)

X:first-child

X:last-child

X:first-of-type

App Academy - WEEK 6 DAY 1

This is the first JavaScript day that has actually been fun. We got to implement Asteroids. I just wanted to stay and work on it all evening. Can't wait to have more time to prettify my game. It'd going to be badass and nothing less :)

=== compares type and value

"4" === 4 // false

== compares value

"4" == 4 // true

Arguments

JS would happily take extra or fewer arguments than specified

fewer - it returns undefined. It can be annoying to debug because it doesn't throw any errors.

more - just like this, a function also has a keyword arguments, which returns an array-like object of all passed arguments.

function logArguments () { console.log(arguments); }; logArguments("boop", "candle", 31, 200); // { '0': 'boop', '1': 'candle', '2': 31, '3': 200 }

functional programming := an alternative to object-oriented programming. It focuses on passing functions around, rather than objects.

currying := the process of decomposing a function that takes multiple arguments into one that takes single arguments successively until it has the sufficient number of arguments to run.

function sumThree(num1, num2, num3) { return num1 + num2 + num3; } sumThree(4, 20, 6); // == 30 sumThree.curry(3)(4)(20)(6); // == 30

Immediately Invoked Function Expression (IIFE, pronounced "iffy")

each source file consists of all the code written in an anonymous function, which is immediately evaluated

this allows for private variables within a source file

Asynchronous Client-side Code

window.setInterval is used instead of while loops so that the browser tab doesn't get entirely locked up

Don't use prompt. This prompts the user to type in text and because it waits for user input, it blocks the entire page.

input in JS is typically handled asynchronously: a function, called a handler, is called by the browser when an event occurs.

JS lets us ask the browser to notify us of events

Canvas

See in notes.

Effective JavaScript

JS has only one type of numeric data: float.

App Academy - WEEK 5 DAY 5

JS Callbacks: currently the bane of my existence. Hopefully after this weekend's reading I'll feel better about callbacks because asynchrony is really cool.

an asynchronous function does not wait for work to be completed. It schedules work to be done in the background.

you can't have nested this in JS. There are two options to get around this:

use closure to avoid this problem. The closure doesn't care, because inside it explicitly calls the method style on the nested function. (Oh, JS, you so tricky!)

call bind on the nested function

App Academy - WEEK 5 DAY 4

Javascript is confusing. Switching from ruby to javascript will take me some time getting used to. I like how JS takes functions instead of blocks as arguments; it's feels more consistent. Of course it has to be much less readable than ruby. I would've preferred to learn JS first and then ruby; that way I would've had a lot more appreciation for ruby's simplicity.

TIL: A callback is a function that is passed to another function and intended to be called at a later time.

App Academy - WEEK 5 DAY 3

Today was the second day working on Rails Lite. I was able to finish the first two bonus problems. Then I put together ActiveRecord Lite and Rails Lite and started a server. Almost got everything working well. I just have one bug in my routes that I need to get rid of. Overall, I'm pretty pleased with getting pretty far on meta-programming days. :)

App Academy - WEEK 5 DAY 2

We're finally done with authentication. Today and tomorrow we're implementing a lite version of Rails. I managed to get to the bonus today, which is surprisingly complicated because there are no spec files with it and all the instructions say is "write Flash for rails". I'll be working on that tomorrow, which I'm looking forward to :) Frankly, I'm glad that the bonus problems just tell you what you should build next, instead of allowing you to follow specs blindly.

Also, the whole concept of meta-programming is fascinating.

App Academy - WEEK 5 DAY 1

Today was another rspec day, except this time we used it to write model and controller tests. I really don't like having to write tests first and then make them pass. I prefer writing part of a model, then writing a test for it - seems much more natural that way. Completing today's project took much longer than it should've because of that. At least we managed to finish it just before class, so I'm happy about that.

App Academy - WEEK 4 DAY 5

Woking on Reddit Clone app was a ton of fun. My partner and I were on the same page and I thought we worked really well together. I added bootstrap to our project at lunch, which made it much more pleasant to look at. Now it's time to go study for the next prep assessment!

Trending Blogs

Recently Viewed Blogs

learning how to hack