LaGuardia TechHire -- Open Code

Day 21: The Choice is Yours.

After a weekend of coding, I found that my insatiable appetite for food had translated to an insatiable appetite for web development. Monday’s are dreaded for most, but I came to class eager. Last week’s orientation an familiarization of the program allowed Kurt to jump right into the lesson. I was ready!

07f7cb47-d2d1-4f4f-a61b-6c257e459611

When starting a CSS stylesheet, we used to go element by element, customizing each one individually. There were a lot details that were standard unless you altered them. This inconvenience led us to the star selector * (No, I’m not talking about myself.). The star selector allows the user to target the whole stylesheet, this applies to CSS and HTML. That being said, watch out because it can lead to problems if you aren’t careful.  From previous exercises, I found two elements, in particular, that threw me off with there standard measurements: margin and padding. In star selector I can set both of these elements to 0%. Doing this removes the standard measurements and allows me to set set new values.


*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

It was day three and time to learn more advanced web making. Before moving into modern web development, we had to learn about the past. Float is a method of website making that is based on putting text around an image. This layout is often used for basic web pages that consist of a banner, aside (menu bar), main content and a footer; nothing too complicated. After this, I was ready for more, ready to step into 2017 of HTML and CSS. Tell me about flex!! (It’s true I need to go back to the gym, but can flex my website in the meantime!) Flex is used with a lot of current websites, especially those which feature columns and boxed content. With flex, order is extremely important. All items automatically have an order of zero,”0″. which brings things to the top of the page. When assigning a different number order, larger numbers go lower on the page.

Most websites want to give their viewers a method of providing feedback. This is usually done through forms, or an area to get in contact with the web page provider. These areas usually contain a space to enter your name, age, email, and other demographics. In fact, I provide a contact page for my viewers to Get in Touch!  When making a form, there are a few types of inputs you can provide. The three we worked with in class are text input, radio input, and checkbox input.

As the name suggests, text input is place where the user can type a message. An example of this could be writing a yelp review.

Screen Shot 2017-11-10 at 11.41.04 AM.png

Radio input is where the user can choose only one of the options provided. An example could be entering age range, a person cannot satisfy more that one of these options.

Checkbox input differs from radio input in the fact that the user can choose more than one option. An example of this can be used when ordering ordering pizza online. Here you can choose more than one option, go on, your tastebuds deserve it.

Screen Shot 2017-11-10 at 11.42.27 AM.png

Wed development is much like life, you have an endless amount of options and opportunities. I began this blog with a post asking “Who Will You Be?” and the choice is always yours. Life will present situations much like a form on a website. Sometimes you can answer with all the thoughts you hold. Sometimes you have to pick and choose one option over others. My favorite, sometimes you can choose as many options as you want. (All, nothing and everything in between.) I am glad I can see so many parallels between the craft I am learning and the life that I am living.

 

 

LaGuardia TechHire -- Open Code

Day Ten: The Finale!

Since the beginning of the TechHire—Open Code vestibule, I have been learning the basics of Java applied in the Processing IDE. For our second coding assignment, with the help of Zein, I decided to create a screen that shows rain pouring. As I’ve documented in previous blog posts, creating this image was no simple feat. I spent days trying to get objects to move on the screen and improve my coding. Just in the context of this one sketch, I learned something new each hour. Even when I was away from the processing IDE, I had my pen and paper to trying to figure out improvements.

For our final project we were given a ‘prompt’ that really just gave us free range to create what we wanted. I was lucky for fluidity of this assignment, because I knew I wanted to continue working on this ‘RainPouring’ project. I mapped out my ideas on paper and tried to bring them to life.

The first task I wanted to accomplish was finding a way to have an umbrella on the screen without having to write so many shapes, which took up many lines of code. Again I find myself giving credit to Daniel Shiffman, because he taught me how to add images to my canvas. The first image I placed on the canvas was of an umbrella against a white background. This royally messed up my vision because it was an ugly box in the center of my background. I soon learned that there is more than one version of an image file. I needed to ditch jPEGs and find myself a PNG. PNGs preserve the transparency behind an image; I didn’t have to worry about a background. Lines 7 through 16 show where I declared and initialized the images I wanted for my project. Now that I had the image on the screen, I wanted to be able to do something with the umbrella. I learned that images work a lot like the familiar primitive rectangle. Lines 35 and 36 show where I call and use the image() function. By setting the image coordinated to the x coordinate to the mouse’s location (mouseX) I could make the umbrella move side to side. I didn’t want the umbrella to move up and down so I kept the y-coordinate at a constant.

</pre>
Droptop[] rDrop = new Droptop[400]; /*instead of two sepearate objects,
i can use on line of coding with an array. An array is a list. '[2]' represents the
number of spaces in the index. in coding, counting starts from the number zero to account for the index.*/

Star[] twink = new Star[300];

int screen = 0; //creates global variable for screen
PImage umpic; //here is where I declared the umbrella image
PImage tweetpic; //here is where I declared a bird image

&nbsp;

void setup() {
size (800, 600);
umpic = loadImage("yellow0.png"); //I loaded the image in setup as oppesed to draw
//used a png. file to preserve transparency
tweetpic = loadImage("tweet.png");

for (int i = 0; i < rDrop.length; i++) { //i can use rDrop.length because it will represent the length of the strong (or how many spots are listed in the array"
rDrop[i] = new Droptop();
}

for (int i = 0; i < twink.length; i++) { //i can use rDrop.length because it will represent the length of the strong (or how many spots are listed in the array"
twink[i] = new Star();
}
}

void draw () {

//=======gloomy sunday=====

if(screen == 0){ //The following code is for a the starting rain screen
//lines 19-21 are where we initialize the array within a loop
background(48, 88, 155);
imageMode(CENTER);
image(umpic, mouseX, 400, 291/2, 300/2 ); //picture of umbrella; follows the mouse along the x-axis, width and heighe/2

for (int i = 0; i < rDrop.length; i++) {
rDrop[i].display();
rDrop[i].move();
}
//clouds
fill(187, 189, 191);
noStroke();
ellipse(25, 0, 150, 150);
ellipse(75, 50, 100, 100);
ellipse(150, 0, 125, 125);
ellipse(775, 0, 150, 150);
ellipse(725, 50, 100, 100);
ellipse(675, 0, 125, 125);
/*order is still very crucial in the function of my code*/
}//close screen 0

&nbsp;

//=======sunny side no eggs =========

if(screen==1){ //this opens the second screen
background(139,223,255);
fill(250,243,28);
ellipse(400,75,300,300);
imageMode(CENTER);
image(tweetpic, mouseX, mouseY, 400/2, 400/2); //picture of bird; follows the mouse along the x-axis, width and heighe/2
}

&nbsp;

if(screen==2){ //this opens the second screen
background(71,61,95);
fill(209,207,204);

for (int i = 0; i < twink.length; i++) {
twink[i].display();
}
ellipse(400,75,300,300);
}
}//close draw

&nbsp;

void mouseClicked(){
background(255); //background flashes white to represent thunder
if ((mouseX >= 0 && mouseX<= 225 && mouseY>= 0 && mouseY<= 150))
screen= 1; //if the clouds are pressed it goes to sun screen
else if((mouseX>=600 && mouseX<=800 && mouseY>= 0 && mouseY<=150))
screen= 2;//if clouds are pressed it goes to sun screen
}
<pre>

The second change I wanted to give my project was to be able to change the weather from rainy to sunny. To do this I added a mousePressed() function. I wanted to be able to press a place on the screen and have the weather change. I chose to say that if I clicked the clouds something would happen. Lines 81-87 show the additions I had to make. In order to do this, I had to find the area that clouds covered on my canvas. I set parameters in the clouds that said if the mouse were pressed there something would happen. I knew I wanted it to be sunny, but the almighty question was ‘how’! After watching coding tutorials by professional coders on how to make complicated games, I began to get a grasp of the basics. It to me well over three hours to grasp these basics, but it did! I had to set up another screen. I created an int named ‘screen’ and assigned it the value 0. This can be seen in line 7. I had to then add this scene change to my if conditional statements. After each parameter of the where the mouse has to be pressed, I put ‘scene==1’ or ‘scene==2’. After learning how to do this, I got excited and decided to make two scenes! (Mind you, it’s now 9am)

Now that I had a new scene, I needed to decorate it. This wasn’t particularly difficult because I know how to create backgrounds and shapes. When it came down to actually writing the code, I had A LOT of difficulty. How to say this information is for one scene and this information is for another scene? If statements to the rescue! Lines 30-54 show my answer to this problem. I could place the information of a particular statement inside of an if statement that was specific to a certain scene. ‘If in scene 0, perform this. If in scene 2, perform that’. My first scene had the rain pouring and a moving umbrella. With the second scene I was able to make it turn into night where I had a moon and stars.

Screen Shot 2017-10-27 at 1.00.31 PM.pngScreen Shot 2017-10-27 at 1.01.03 PM.png

Below you can see the two classes I made, each has its own tab on Processing.

RainDrops:


class Droptop{
color c;
float xpos;
float ypos;
float diam1;
float diam2;
float yspeed;

Droptop() {
c = color(99,196,240,85);
xpos = random(width);
ypos = 0;
diam1 = 20;
diam2 = 30;
yspeed = random(1,4);/*i did not want to make this speed uniform
depending on the amount of blank() used*/
}

void display(){
noStroke();
fill(99,196,240,85);
ellipse (xpos, ypos, diam1, diam2); /*This shows the format for the circles
so I dont have to type it continuously*/
}

void move(){
ypos = ypos + yspeed;
if (ypos > height){
ypos = 0;
}
}
}

Stars:


class Star{
float xpos;
float ypos;
float diam1;
float diam2;

Star() {
xpos = random(width);
ypos = random(height);
diam1 = 10;
diam2 = 10;
}

void display(){
noStroke();
fill(255);
ellipse (xpos, ypos, diam1, diam2); /*This shows the format for the circles
so I dont have to type it continuously*/
}
}

Today’s presentation of our final projects marked the end of the TechHire—OpenCode vestibule. Each Participant was allotted seven minutes to present there project. These seven minutes included setting our laptops to the projector, talking through our code, running our code, and lastly a Q&A session. I am generally a great public speaker, but Friday had my nerves rattled. I felt the pressure. My presentation could make or break a possible invitation to the full TechHire—OpenCode program. I felt the pressure. After setting up my laptop, my anxiety steadily receded. I was able to talk through my code in a manner that showed my understanding and dedication to the project. I was surprised to hear subtle gasps when I showed the interactivity portion of my sketch. There was less than a minute left for Q&A and I was able to still answer two questions without gabbling. My supportive classmates gave me a round of applause, which erased all doubt about the quality of my project.

These past two weeks have taught me so much in the world of web development. I learned about job placement and techniques in coding. The most important lesson I learned during my time with TechHire—Open Code is that there is no limit to what I can accomplish if I put my mind to it.

LaGuardia TechHire -- Open Code

Day Three: Magic in the Number Three!

I am not a fan of odd numbers, but today I find myself chanting the popular phrase “The Third Time is a Charm!” Today I woke up without envy for those who were able to sleep longer than I. My morning was accompanied with a full breakfast and I even managed to remember my book-bag today. Check. Check. Check.

Yesterday’s career training segment created some uneasiness, but I was hopeful that those feelings wouldn’t resurface with today’s session. With ‘web development’ being such a vague term I needed more information on how I could fit my ‘uncommon’ traits (i.e. Enterprising, Social, and Artistic) into this field effectively. In this ambiguous field, there are 13 types of developers that are widely agreed upon. Of the 13, three kinds of developers struck a harmonious code with me. (The number three again… odd.) Front-end developers are focused on how a website looks and how user friendly it is. Application developers are similar to front-end developers because they work closely with designers and have common concerns. In the tech world, these two developers put some value on keeping their work ‘sexy’; attractive, hip, and in demand. (Not unlike myself) QA development is extremely interesting to me and very far from ‘sexy’. These developers seem to be completely off the radar, yet they are the ones who test other code. Coding 101: Test Your Code!

Attending a Hackathon or another tech event is a requirement of the TechHire Vestibule. A Hackathon is where people who are interested in the field of technology get together for focused learning and production. With the collaboration of others, Hackathons provide an environment to hone skills in a short amount of time. Before today I thought I had no place even thinking about the goings on at a Hackathon. I assumed only coders and highly accomplished figures in others fields were allowed. Knowing what happens when one assumes should’ve told me just how mistaken I was. With the help of Devpost, we formed a three-pronged approach to tech events: Before, During, After. Before attending, you want to have a goal in mind. Why are you going to this specific Hackathon? Are you looking for a job? Are you looking to network? Are you trying to learn new technology? During the event, it is crucial to attempt completion of your goals with action. Though there are many talented people in their own rights, the beginner coder also has a place at a Hackathon. A person can watch groups if not contributing first hand. It is important to take advantage of sponsors. They can be used to learn about the job market, practice pitches for ideas you have, and even practice the interview process, or ‘pitch yourself’. The third prong of the plan is most important me, The After. Hackathons can go for days straight, but it is important to hold on to the connections made during them. Networking doesn’t work if you do not continue the lines of communication. It is important to send a follow up email, connect on social media, and check into upcoming events.

The web immersive portion of today’s class was tied together seamlessly. Today we learned about the almighty lighting talk. I have been to film festivals where people are given 30 minutes to showcase why their films should be produced, but today I experienced a completely different monster. Each TechHire applicant was allotted three minutes to present his or her assignment from the previous day. (I know you all remember my ‘Picasso’ portrait of a house.) Naturally social, public speaking was never a great feat until today. I had three minutes to describe a kindergarten quality painting that took me well over an hour to construct. Not only that, the whole class was looking at my code for points they had missed and points I had missed. The whole class was looking at my code with questions and comments budding. The whole class was looking with their eyes wide, their ears clear, and their noses sensitive to malarkey! I had a moral obligation to expose my code, expose my thought process, and frankly, expose my ego.

The lighting talks taught me of the great importance of comments and the readability of one’s code. This lesson continued when we were assigned to add animations to a coding example we were provided. Comments are extremely important because they help log thought process and organize code. In my experience, my code is more readable because of my comments. Others are able to distinguish which lines of code belong to what they see when the code is run. This assignment was particularly difficult when figuring out how the add float() and assign variables. One of my struggles from yesterday followed me into today, mapping out my canvas! It’s easy to have an idea in my head, but executing it with my limited coding knowledge is still a high hurdle. I was able to lower that hurdle with the help of loose-leaf paper, a yogurt container, air freshener, and some markers.

During the past few days I heave learned my biggest benefactor was and continues to be time. I spent hours coding with new tools I was given today and I anticipate trying again after this entry is posted. The material is difficult and I am attacking it with a smile. Today has boosted my confidence of the path I am walking. I may have feelings of apprehension towards odd numbers, but it may be true what people say: “There is Magic in the Number Three!”

You can see how I translated my ideas and the final result.

IMG_4223IMG_4224Screen Shot 2017-10-18 at 11.35.48 PMScreen Shot 2017-10-18 at 11.36.18 PMScreen Shot 2017-10-18 at 11.36.34 PMScreen Shot 2017-10-18 at 11.36.48 PMAsher_Zein_Float181017