DrumSensei

betwixt code and music

Image Gallery coming

Building a gallery for images posted from users

We have spent the week learning how to simplify JavaScript down into jQuery (although, that is an oversimplification itself, in some ways). Then we learned how to connect to a server using AJAX, pushing information to the server and then learning how to retrieve it. When you put that information alongside the small projects we did all week like creating a login page and making a todo list, then creating an instagram clone (albeit a smaller scale) is a logical outgrowth of that.

So, that is my goal for today and this weekend. If you need me, then I will be under the hood of Sublime Text reading some Input Mono and muttering to myself incomprehensibly.

Now time to leave

And head back home to

Meetup Notes - Designing a web app

Design Meetup @ The Iron Yard-Austin

I learned some
Photoshop tonight! I have embarked on a quest multiple times over the years to learn Illustrator and Photoshop, but it always ended with me not figuring out how to select or delete or modify what I just created. These are such complicated programs!



Our guide on this journey to learn basic Photoshop was Abby Larner, from The Iron Yard-Austin design staff. She was extremely comfortable with the program, having used it for over a decade, and it was a cool project to create. We were going to make a Facebook-like page for dogs called "Bark." This page included such things as "wags" instead of "likes" and dogs named Fuzz Aldrin and Bill Furray.

We started with a
wireframe and needed to learn the use of some basic tools in Photoshop to create items and manipulate them. Honest truth, I was a slow learner here. Some of the tools' layouts seem counter-intuitive to me, even as a longtime Mac user (or maybe in spite of that). I definitely made plenty of notes in my fancy Baron Fig notebook (with a dot grid) about keyboard shortcuts and the order of a needed workflow. This will prove valuable later when I have gotten hungry or distracted by some other aspect of life, and necessarily forgotten how to get anything done in PS.

On a practical note, using Photoshop will likely prove to be extremely useful to me as a developer. Designers will make a mock-up of a website and provide a .psd file (the proprietary format used by Adobe for a Photoshop file). This file will have the exact dimensions and colors needed to build a website from that design idea, which will allow me to create a pixel perfect recreation for the client (and designer!).

So, here's to many more encounters with this behemoth program. I have a feeling that, like with most deeper computer technology things, it will prove to be a long road to get the most out of it. Perhaps I will even get a high-quality camera and learn to
really use the program for it's original intent!


TIY - Day 15

This is it...don't get scared now...

We have driven deeper into this world of JavaScript and jQuery. Today we talked about review from last night's login page homework. I did not have time to get it fully implemented because I went to a meetup and watched some blazing React.js happening. I mostly understood it, but today Aaron showed us some things that made a lot more sense.



We learned how to interact with a server using AJAX. Not the cleaner bleachy stuff, heavens no! Of course I mean Asynchronous Javascript And Xml. Everyone knows that!



This allows us to give information to the server, remove information, or update information. (A slew of other things are also available, but this is plenty for now.) Now, you might be saying, "Hold on, Tex. What is a server? You talking about my waiter at Chili's?"

Great question! Most people have heard about things that are stored in the "cloud" and maybe they don't fully understand what that means. A google search of the phrase "the cloud" returned "About 47,500,000 results." SOMEONE is talking about it on the interwebs! The cloud is a great little marketing phrase for what used to be called servers. These are computers whose job consists of connecting other computers together and storing data. When you backup your iPhone to "the cloud," it is really connecting to a remote computer somewhere that is holding a copy of your iPhone backup. To be fair, these days we are using a lot of wireless technology, so it does seem as if things are magically happening through thin air. Perhaps that is why the phrase has caught on.

Anyhow, as we learned AJAX a bit today, it becomes plain to see how useful it is. I can finally get a better picture of how our job as front-end developers is to build out a website
and understand the ways in which it will interact with a server a.k.a. "the cloud." Today we built a little chat utility in the browser using jQuery and AJAX that could store information in an object on the server and then retrieve that information in order to provide a running list of messages in a chat room.

We have some fairly complex projects coming up, so things are about to pick up quite a bit, I feel. Time to buckle down and continue the onslaught, come what may.

What is 'this'?

Week 4 - Day 14

JS 'this'

Ok, things are about to get confusing. If you are not thinking clearly then go skip this and go read the facebooks or something. Maybe go take a walk.

Still here?
Well, let's talk about 'this'...



Just kidding. This is awesome. The easiest way to put this...erm, what I am trying to say is...the best way to get this down on paper...blurgggg... Using this word seems nearly impossible!

In JavaScript we are often dealing with a small snippet of code that does a task. It is called a function. Inside that function we might be targeting a specific item that triggered an event. A shorthand way of talking about some information that is passed in to the function is to use the
this keyword. It enables the programmer to talk about a generic piece of information without knowing exactly what it is ahead of time.

Specifically,
this refers to the current DOM element, at least in the way that we have been using it in class. It is also useful when creating new objects with a constructor. I have not used it a ton just yet (only a couple of times), so I have yet to build up a lexicon of knowledge to disseminate to the masses about this.

Also, here is a .gif. Enjoy!



If you want to learn more about
this, then go to MDN or just !google search it on DuckDuckGo.

The Iron Yard - Day 13

Week 4 - Day 13

JS + HTML = :]

Our homework over the weekend was to construct a to-do list using vanilla JavaScript i.e. just plain ol' JavaScript with no bonus features or extra doodly-whatsits. My implementation of this works pretty well. I wanted to add a few more features to it, but I had to learn some deeper concepts first.

On Friday
our instructor told us it was his favorite day of the entire span of twelve weeks. We officially learned to connect JavaScript to our HTML to produce a page like we are used to seeing in the wild. Remember, constant reader, the JavaScript is what enables actions to happen on the page inside of your browser. For instance, if you look at my very plain to-do list, you will notice that clicking the button next to the text input area will make that text appear below in a list format. While this may seem like an easy task, it does involve many steps.

First, we target the specific areas on the webpage that need action. On my list, those specific areas are the input text field, the clickable button and the "list" section below that.

Second, we create functions that tell us what action we wish to happen. For instance, when I click the button, the text from the input text area should become visible in the list section. At this point we should have thought about what areas are needed and what we need to happen with those areas.

Lastly, we add what JavaScript calls "event listeners" to be the messenger between our targeted areas and the desired functions. In my example of the list, I have JavaScript "listening" for a 'click' from the user on the button next to the input text area. When that button is clicked, the text is added to an array behind the scenes, the list section at the bottom is erased and redrawn with the updated list. All of this happens so fast that we cannot see it, but for every item added to the list, the entire list is erased and started over with all values. I am told that this will be useful later!

My reset button on the list example works in a similar fashion. It is "listening" for a 'click' to happen and then it interacts with the list values by resetting them all back to empty or zero and then redrawing the list section to reflect that.

In honor of our teacher
Aaron, enjoy some nutella...