LaGuardia TechHire -- Open Code

Assessment

System, Environment
1. What is Processing?
Processing is a program that accepts compiled code and runs it. Processing is geared towards artists and creative developing.

2. What does IDE stand for? Describe its components.
IDE stands for Integrated Development Environment.  An IDE contains a code editor, a compiler which interprets a specific language, and a debugger which helps indicate errors in code.

3. What is a mode in Processing? Which is the default mode?
A mode is the type of processing that Processing will work on. For example, Processing currently has four modes; Processing, p5.js, Processing.py, and Processing for Android. The default mode for Processing is Java.

4. How do you save a file in Processing? What convention might you use?
To save a file in processing, you go to the toolbar at the top then click: File > Save As > Save. A convention one might use is ‘camel casing’ where the start of each new word in the file name starts with a capital, “SaveThisFile”. Another convention is to enter an underscore in place of a space, “save_this_file”.

5. How do you export a Processing file?
To export a file, go to the menu bar then click: file > export application > export. You can choose the platform you want the file to be compatible with and if you want presentation mode (the code will be full screen when run)

6. What is a library? How do you access and use a library in Processing?
A library is where there is added code that wasn’t originally built into Processing. You can access libraries by going to the menu bar then clicking: sketch > libraries. This will then import that library into your sketch, so it can be used. After importing the library into your skets, you can then begin to use is properties and functions throughout your code.

7. Where is the color picker in the Processing IDE?
The color picker in Processing can be accessed by going to the menu bar then clicking: tools > color selector.

8. What do the circle, triangle and square shapes across the top of the Processing editor represent? The circle represents running your code that was compiled in the editor. The square represents stopping the code that is run so it doesn’t keep running in the background of your process. The circle with a butterfly symbol inside represents a debugger where it will help detect possible problems in the code.

9. How do you add and name an additional or new tab in the Processing editor?
To add a new tab, you can click the downward pointing triangle next to the sketch currently open. The downward pointing triangle will provide a menu where you can add and rename tabs.

Coding Basics
10. Describe the coordinate system in Processing.
The coordinate system in Processing is similar to the cartesian coordinate system in how it is noted; (x-coordinate, y-coordinate). The top left corner of the canvas is the point (0,0). Moving to the right and bottom of the canvas increase the value of the coordinate. For example, a point in the middle of a 100 x 100 pixel canvas will have the coordinates of (50,50)

11. What is the difference between an active and static sketch? Use code to demonstrate your response.
A static sketch is only drawn once. An active sketch contains a draw function where Processing will continuously draw what is written.

12. What is the general syntax and structure for a line of code? Use code to demonstrate your response.
The general syntax of a line of code has a function, values within the parameters of a function, and a semicolon.

line( 23,40,60,40);

A line is a function of what is  to be drawn. The numbers data in parentheses follow the parameters of the function so it knows how to perform the specific function. The line function knows to connect the coordinate (23,40) to the coordinate (50,40). A semi colon is necessary because it completes a specific line of code.  

13. What is the general syntax and structure for a block of code? Use code to demonstrate your
Response.
The general syntax of a block of code is a cluster of lines of code. There are still functions, data inside the parameters of a function, and a semicolon. Blocks of code differ in that they are contained within curly brackets ‘{ ‘. Blocks of code introduce using tabs for aesthetic reasons to show that something is “nested” or within a function.
The curly bracket after ‘voidsetup()’ shows that the following lines of code will be performed within the setup function. The closing curly bracket ‘} ‘ shows the end of the block of code. Lines of code written after a closing bracket are not being used as part of that specific function.

void setup() {
 size(300, 300);
 background(0);
}


14. Why are certain words in different colors in the Processing editor?
Processing understand that there are specific functions and keywords that are used often. They are in certain colors because they are already defined by Processing ‘behind the scenes’.

15. What is a system or reserved word in Processing? Give an example.
A reserved word are a series of characters that Processing recognizes as a defined word. They are reserved in the way, that they cannot be used again for purposes that aren’t already specifically defined. An example of this is the word ‘background’. Processing has already defined this as a function to describe the color of the canvas, which is why it appears in blue font.

16. How does order matter in Processing. Give an example demonstrated with code.
Order matters in Processing because code is read line by line. It will show the action of later which can give the appearance that a previous line of code was not completed. When the code below is run, the viewer cannot see the first circle written. Processing performed the lines in order, so the second and larger circle was drawn over the first one. When the order of the circles are switched, the viewer can then see both circles.

void draw() {
 background(48,88,155);
 stroke(30,104,229);
 fill(99,196,240);
 ellipse(50,10,20,30);
 fill(187,189,191);
 stroke(167,171,173);
 ellipse(0,0,150,150);
}


17. What is the difference between mousePressed and mousePressed()? Use code to demonstrate your response.
‘mousePressed’ is a variable and ‘mousePressed’ is function. mousePressed can be used in the parameters of another function. The example below puts the variable ‘mousePressed’  in the parameters of an if statement. When mousePressed is

void draw() {
 if (mousePressed) {
   background(255);
 } else {
   background(255, 0, 0);
 }
}

In this block of code mousePressed() is superseded by ‘void’ to prevent a return value. noLoop(); and background() are put into the mousePressed function. That cannot be done with a variable.

void mousePressed() {
 noLoop();
 background(0);
}


18. What called function must always be first in setup()?
The function size() must always be called first in setup().

19. What is the difference between an inline comment and a block or multi-line comment? Use code to demonstrate your response.
An Inline comment is noted by two forward slashes ‘//’ at the beginning of the comment.  A block comment is noted by ‘/*’ at the beginning of the comment and ‘*/’ at the end of the comment.
Below is an example of both methods.

 void display(){
   noStroke();//there is no outline for the rain
   fill(99,196,240,85);//this shows the fill of the raindrops
   ellipse (xpos, ypos, diam1, diam2); /*This shows the format for the raindrops
   so I dont have to type it continuously*/
 }


20. Does whitespace matter in Processing? Capitalization? Use code to demonstrate your response.
Whitespace is necessary in web development for readability of the code. Capitalization is very important to keep track of in Processing. A function will not be recognized if the first letter is capitalized. Processing did not register or color the background when the draw function was capitalized.

void Draw (){
 background(48,88,155);
}


Variables, Operators, Logic
21. What is a variable? What is a data type? What is a value?
A variable holds the place of a value. And a data type kind of value. An example of data type is int for integers or whole numbers. Another example is float for numbers that contain decimals. A value is a character (numbers or letters) assigned to something else.  

22. What is the difference between a system variable and one that you define? Use code to demonstrate your response.
A system variable is already defined by Processing and it is a reserved word. An example of this is height. Processing knows that height is based of the canvas size.  ypos is a variable that I defined. Processing doesn’t know that ypos = 0 until I define it myself in the IDE.

void move(){
   ypos = ypos + yspeed;
   if (ypos > height){//this loop stays in effect as long as the raindrops are below the height
     ypos = 0;
   }
 }


23. What is scope and how does it impact code? Use code to demonstrate your response.
Scope tells Processing where it can find the definition of certain values and where those values can be used. A global variable can be used anywhere in the code, where a local variable can only be used within the function { } it was defined.

float x = .25 //global variable
void
 setup(){
size(600,600);
}
Void draw(){
y=60; //local variable
line(14. y, 97, y);
}

24. What does it mean to declare, initialize and use a variable? Use code to demonstrate your response.

Declare is calling the value. Initializing is assigning a value to the variable, Using a variable is putting it in a  function to be used as the value assigned to it.

float y; // declare
float y = 24 // initialize
point(60, y); // use

25. What happens when a variable is attempted to be accessed outside of its scope?
If it is a global variable, the program will run as intended (assuming there are no other conflicts). It is is a local value, Processing will say the variable cannot be found.

26. What happens when a variable is declared globally, but is not used?
If a global variable is declared but not used, nothing happens to the functionality of the program. You just added an unnecessary line of code.

27. What value does float nums; have?
float numbers can be integers or decimals.

28. What are operators in Processing? Use code to demonstrate your response using at least one operator.
Operators are math symbols used in Processing to to articulate something with minimal characters. The forward slash represents division. The if statement loops at half the width of the canvas

 void move() {
   xpos = xpos + xspeed;
   if (xpos > width/2) {
     xpos = 0;
   }
 }


29. What is a boolean data type?
A boolean data type can only be defined as true of false.

30. List three primitive data types.
Boolean, float, integer

31. Write a code example that increments a value by 5.
This line gets shorter by 5 pixels. The first coordinate moves to the right.

float x = 4;

void setup(){
Size(200,200);
}
void draw(){
line(x,20,150,20);
x+=5;
}


32. Describe the order of operations for: x = speed * 40;
Processing first searches the value of speed. Next Processing multiples that value of speed by 40. Finally, it inputs the product as the value x.

33. Write a code example that decreases a value by one using shorthand.

float y=4;

void setup(){
size(400,400);
}
void draw(){
line(0,y,300,300);
y-=1;
}


34. What does the logical operator ! do?
The exclamation point acts as an inverse operator

Control, Iteration, Structure
35. What is an if statement? When should it be used? Use code to describe its syntax.
An if statement represents a conditional statement. It tells Processing when to perform specific code.

void draw() {//void prohibits return value
fill(175);// the color of the circle is gray
ellipse(50,50,25,25);//circle in the center of canvas
  if (mousePressed) {//if the mouse is pressed
    background(0,0,255);//background is blue
  }//close if statement  
}


36. How many ifs can be used in an if statement?
An infinite amount of if statements can be used.

37. What is the difference between else and else if? Use code to demonstrate your response.
An else if statement continues to check if statements are true. An else statement represents the end and processing will skip other if statements.

void draw() {//void to prohibit a return value
 background(345, 24, 112);//the original background color
 
 if (circleX > 400) {//if the circle x-coordinate is greater than 400pixels
   background(175);//then the background is grey
 } else if (circleX > 200) {//or if the circle x-coordinate is greater than 200pixels
   background(241, 141, 0);//then the background is orange
 } else {//otherwise
   background(0, 0, 255);//the background is blue
 }


38. What is the difference between code with several consecutive if statements and code with several else if statements?
Processing will check each If statement independently. Processing will stop checking else if statements, once it finds one that is true.

39. What is a while loop? When should it be used? Use code to describe its syntax.
A while loop says that as long as this is happening, do something else. It should be used when you have multiple variables.

void draw() {//void prohibits a return value
 background(242, 231, 5);//The color of background is yellow

 int y = 0;//give y the value of zero '0'
 int x = 0;//gives x value of zero '0'
 while (y <= height) {//says as long as the y is less than height
   stroke(0);//black ouline
   strokeWeight(3);
   fill(230, 158, 245);//purple inside the square
   rect(x, y, 50, 50);//begins at the point (0,0) and radius of 50
   y = y + 50;//draw another box 50 pixels beneath previous square
   x = x + 50;//draw another box to the right of previous box
 }//This closes the while loop
}//closes draw function


40. What is a for loop? When should it be used? Use code to describe its syntax.
A for loop says as long as one thing is true, perform something. A for loop should be used when you know how many times you want it to run.

void draw() {//void prohibits a return value
 background(242, 231, 5);//The color of background is yellow

for (x = 0; x < width; x +=50) {//give x value of 0, x is less than 0, assigns new value of 50 to x
    stroke(255);//outline is white
    fill(random(255), random(255), random(255));//gives the horizontal square random color
    rect(x, 300, 50, 50);//starts at coordinate (0,300) and has a radius of 50
    x = x + 50;//says to draw the next square 50 pixels to the right of previous square
  }//closes the for loop
}//this closes the draw function


41. Write code that uses a nested for loop to draw a grid of squares across the x and y axis of a canvas.

void draw() {
 background(random(255), random(255), random(255));
 strokeWeight(10);
 stroke(255);

 for (int i = 0; i <= width; i += 100) {
   for (int j = 0; j <= height; j += 100) {.
     fill(mouseX, random(180,255), mouseY);
     rect(i, j, 50, 50);
   }
 }
}


Functions
42. What is a function?
A function is a command that Processing completes.

43. What is the difference between a function or method built into Processing and one that you define?
A predefined function already has parameters or specific arguments it will accept. The user has to create definitions for the arguments a function will take if they create an undefined function.

44. What does the keyword void mean?
The keyword void prohibits a return value

45. What does the keyword return mean?
The return keyword gives back the value you indicate.

46. Write code that uses the keyword return.

Void setup(){
size(400,400);
}
void draw(){
If mousePressed== true){
background(255);
Return;
}
fill(255,0,0);
ellipse(200,200,100,100);
}


47. Write code that used a defined function (by the user) and call or use it.

48. What is the distinction between function and method?
A method is only defined in a class, a function can be called anywhere.

49. What is the distinction between argument and parameter?
A parameter is the data input. An argument is the variable defined for the function. 


50. What do the () in a function call or definition indicate?
This is where you input an argument. 


51. What will happen if you call an undefined function?
The debugger will say that a function is undefined and it will not run. 


52. What will happen if you define a function, but do not call or use it?
The debugger will give you an error.

53. What concept are functions useful for?
Functions help the code to run in a cohesive manner.

 Objects/Classes, Arrays
54. What is an object?
An object is one instance of a class you have created.

55. What data type is an object?
An Object is a class data type. The class data type is defined by variables you choose. Objects are essentially variables.

56. What concept are objects, classes and arrays useful for?
Objects, classes, and arrays are used to simplify and organize code, especially code that will require you to use something many times.

57. What is the difference between an object and a class? Use code to demonstrate your response.
A class describes an object.

This is a class:

class Droptop{
 color c;
 float xpos;
 float ypos;
 float diam1;
 float diam2;
 float yspeed;
 
 Droptop(float tempX, float tempYs){ /*float tempX and float tempYs are placed here
 so I can alter the x position and speed easily in the parameters of my object. */
   c = color(99,196,240,85);
   xpos = tempX; //Here I assigned xpos as tempX so the value I plave in () will come from here.
   ypos = 0; //I want all the rain to start from 0
   diam1 = 20; //I want both of my diameters to stay the same, so they are not 'temp'
   diam2 = 30;
   yspeed = tempYs; //Here I assigned yspeed as tempYs so the value i put in () will be taken from here
 }
 
 Droptop() { /*Here I made a second version of the same function,
 so it isnt necessary to fill (). This is called 'overloading'*/
   c = color(99,196,240,85);
   xpos = random(width);
   ypos = 0;
   diam1 = 20;
   diam2 = 30;
   yspeed = random(1,3);/*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;
   }
 }
}

This is an object:

Droptop[] rDrop = new Droptop[200]; /*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.*/

void setup() {
 size (800, 600);
 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();
 }
}


58. What is dot syntax? Use code to demonstrate your response.
Dot syntax is how someone can access a function that is in a class.

void draw (){
 background(48,88,155);  
for (int i = 0; i < rDrop.length; i++){
 rDrop[i].display();
 rDrop[i].move();
 }
}


59. What is the keyword new used for?
The keyword ‘new’ is used to create a new object.

60. What is a constructor? Where and when is it used? Use code to demonstrate your response.
A constructor is an instance of a class. It is the template from which an object is defined and made.

61. Organize original code to include the main program in one tab and a class in another. Use in-line comments to walkthrough code.

62. What is an array?
An array is a list of data.

63. What notation is used to denote an array?
Brackets ‘[ ]’ are used to identify an array.

64. How do data types impact arrays?
Data types say the kind of data that is inside an array.

65. What is an index?
An index is one place in the list of data within an array. The index starts at the position of zero ‘0’.

66. Write code the declares, initializes and accesses elements in an array. Use comments to
walkthrough code.

Droptop[] rDrop = new Droptop[200]; /*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.*/

void setup() {
 size (800, 600);
 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();
 }
}
 /* this shows how to call object in setup
 rDrop[0] = new Droptop(40,4);
 rDrop[1] = new Droptop();*/

void draw (){
 background(48,88,155);
 
 //l initialize the array within a loop
 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*/
}


67. List two or three functions that can be called on an array. Describe how they manipulate the array
sort(); this will order an array in a specific way.
expand(); this will increase the size of an array.

LaGuardia TechHire -- Open Code

Day Eight: I need ‘Array’ to get through this!

Humor is everywhere in that there’s irony in just about anything a human does. -Bill Nye

giphy (3).gif

After spending my weekend in a constant flux between sleeping and feeling guilty for sleeping, it was very difficult to keep from laughing during today’s career training portion of TechHire–Open Code. We focused on the imposter syndrome, productivity and being able to work on your own, as a portion of the program will be remote. I spent the whole weekend in a personal crash course on accountability and productivity. How’s that for irony!

The imposter syndrome is prevalent within the web development community.  The feeling of fraudulence often comes from a person believing that they do not deserve praise or title. People who experience this often attribute their success to circumstances distant from themselves. By doing this, ‘imposters’ do not have to internalize compliments. High achievers are a main demographic of imposter syndrome sufferers. Web development is a difficult field that only has room for high achieving individuals. In the past couple decades technology has progressed at an exponential rate. New technologies are being invented and implemented everyday while web developers are required to have a firm grasp on this ever changing technology. Entering the web development profession by means of a bootcamp might intensify the imposter syndrome because it is not a ‘traditional’ education. Feelings of doubt can easily seep into the psyche when a person feels amateur despite their actual work and knowledge. A video by Meg Duffy, dean of students at Grace Hopper Program, provides tips to combat the imposter syndrome for bootcamp students and aspiring web developers.

One cliche phrase that describes me well is ‘Jack of all Trades’. When I am faced with a concept that I cannot easily grasp my the world seems to tilt one degree about its axis. This shift is usually due to frustration and only takes a moment to recalibrate. Never the less, the shift is there and I sometimes feel like an ‘imposter’ myself. When beginning this program I was shocked at how difficult it was for me to grasp certain concepts. There are times where I have gone home without fully understanding of topic. Today was one of those days. During the web immersive portion of the day, I ‘learned’ about objects, classes, and arrays. As my luck would have it, our class was given an assignment to include these new topics in our code. My day stuck to the theme of irony, as we reviewed arrays at the tech event I went to after class. (Read about that experience here) By the time I got home (10:30 PM) my mental tank was approaching E for empty. The main point of objects, classes, and arrays is to condense and better organize your code. Naturally (high achieving as I am), I decided to work with my most cumbersome code. My newly titled, ‘RainPouring’ project needed a serious renovation. After reviewing my notes and staring at my code for a solid hour, I was still at a lost for how to transform my code. Once again, the internet proved to be a saving grace with my coding pot holes. I won’t discuss my serious religious beliefs, but Daniel Shiffman may be a deity in the web development world, or at least my web development world. As one of the lead contributors to Processing, I didn’t doubt his knowledge. When I saw The Coding Train on YouTube, I quickly bought my ticket and hopped aboard. I found tutorials that answered my questions, gave effective guidance, and kept me engaged.

While watching Daniel’s videos I took notes and drew pictures to make sure I understood the information I was absorbing.

img_4247.jpg
Notes

 

The original code I was working with can be seen on my previous post; Day Three: Magic in the Number Three! The edits and comments to the my code today can be seen below. A new concept of a constructor tab was introduced to me today. Objects can be written in the original sketch page of a program, but it becomes a lot of work when you want to use more than one object. If you want to use 50 objects, a constructor tab is the way. Lines 12-13 show the code I would need to write if I did not have a constructor tab for only two rain drops. Two drops doesn’t count a rain. The constructor tab is necessary for what I am trying to accomplish.


Droptop[] rDrop = new Droptop[200]; /*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.*/

void setup() {
size (800, 600);
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();
}
}
/* this shows how to call object in setup
rDrop[0] = new Droptop(40,4);
rDrop[1] = new Droptop();*/

void draw (){
background(48,88,155);

//umbrella
fill(234,242,12);
ellipse(400,300,300,200);

/*shapes to create umbrella and hide yellow, this code has to be
placed below the umbrella ellipse, so it is place 'over' the yellow*/
fill(48,88,155);
noStroke();
ellipse(290,325,75,75);
ellipse(515,325,75,75);
ellipse(440,325,75,75);
ellipse(365,325,75,75);
rect(252.5,325,300,75);

//umbrella holder
strokeWeight(4);
stroke(0);
line(402,315,400,400);

//lines 19-21 are where we initialize the array within a loop
for (int i = 0; i < rDrop.length; i++){
rDrop[i].display();
rDrop[i].move();
}

//lines 49-56 show just a fraction of the cumbersome coding from my original sketch

//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*/
}

Below is the code for the Constructor tab.


class Droptop{ //Here I am creating a class and making float values
color c;
float xpos;
float ypos;
float diam1;
float diam2;
float yspeed;

Droptop(float tempX, float tempYs){ /*float tempX and float tempYs are placed here
so I can alter the x position and speed easily in the parameters of my object. */
c = color(99,196,240,85);
xpos = tempX; //Here I assigned xpos as tempX so the value I plave in () will come from here.
ypos = 0; //I want all the rain to start from 0
diam1 = 20; //I want both of my diameters to stay the same, so they are not 'temp'
diam2 = 30;
yspeed = tempYs; //Here I assigned yspeed as tempYs so the value i put in () will be taken from here
}

Droptop() { /*Here I made a second version of the same function,
so it isnt necessary to fill (). This is called 'overloading'*/
c = color(99,196,240,85);
xpos = random(width);
ypos = 0;
diam1 = 20;
diam2 = 30;
yspeed = random(1,3);/*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 raindrops
so I dont have to type it continuously*/
}

void move(){
ypos = ypos + yspeed;
if (ypos > height){//this loop stays in effect as long as the raindrops are below the height
ypos = 0;
}
}
}

Below shows how my code runs.

Oct-26-2017 05-02-19.gif

LaGuardia TechHire -- Open Code

Day Eight: Intro to Java… Script?

TechHire has a requirement of attending one technology related event. I contemplated going to a hackathon but I was not confident with my skill level in coding. I am a person who enjoys going to events and mingling, so I wasn’t nervous about finding an event that wasn’t too focused on a person’s coding skill. Besides the world wide web, I had a few other resources to find an event that satisfied TechHire’s requirement. When it comes to events New York City is in abundance. After scrolling through just my Eventbrite, I had over 6 events I could attend in the allotted time frame provided by my instructor.

I chose to attend ‘Learn to Code NYC: Into to JavaScript’. Though we are learning Java on Processing, I thought the two languages couldn’t be so different because of their name. Seriously speaking, I have played with JavaScript very lightly and know the general syntax of the language. That being said it was an Introductory course, no pressure right? Well, half right… After spending hours discussing how to evade the imposter syndrome, I still found myself in well within it’s reach. One phrase that sticks in my head from my elders when I’m feeling ill prepared is “don’t embarrass me”. I care for embarrassment even less than green eggs and ham, Sam I am! I managed to concoct reasons of why I wasn’t qualified enough to attend an introductory course! For some, these thoughts would make a person feel stuck, unable to decide one way or the other, but not I. I told myself that I would learn as much Java script as I could in two hours. My binge learning began with me downloading an iOS application called ‘Learn JS’. The application made my 2 hour commute feel like 30 minutes. I didn’t fully notice the delays that seemed to strongly affect that the commuter next to me.

Screen Shot 2017-10-26 at 11.06.47 AM.png

Galvanize is the company that sponsored and ran the class. Their building space had an open floor plan that made everyone inside feel like family. The open floor layout encouraged me to talk to other attendees even though i wasn’t confident in my knowledge of JavaScript. As the class began, I took a seat next to my TechHire classmate, Danny. The JavaScript class wrote code on an online IDE on repl.it. I was relieved that TechHire had us make a Github account, because I was able to easily login and save the code I wrote in the class. In the class we learned about how to make functions and I learned about arrays. The syntax of for statements is similar to Java. Learning about arrays and functions here was very helpful to the assignment I had to tackle after the event.


//how to create a function
function pigLatin (str){
var firstChar = str[0];
var restOf = str.substr(1);
return restOf + firstChar +'ay';
}

function makePigLatin(sentence){
var words = sentence.split(' ');
var translated = [];
for(var index = 0; index < words.length; index = index +1){
var val = words[index];
var pig = pigLatin(val);
translated[index] = pig;
}
return translated.join(' ');
}

After the class I talked to the instructor, Donnie D’Amato. He calmed my worries about being a newbie and encouraged me to pursue my dreams, especially if they are difficult. Donnie gave me a great confidence boost when he took the time to show me his Codepen.io page. He showed me his current projects as if he was trying to network with me! Though he was teaching JavaScript, only a couple of his projects had any JavaScript in it. About 90% of his projects were solely CSS and HTML. This comforted me because, as an amateur, I didn’t feel like I had to learn a million languages at once. I can  possible create anything with any language. Dawn’s most frequently used phrase in class is “There is more than one way to skin a cat”. Don’t I believe that now!

LaGuardia TechHire -- Open Code

Day Five: Repetition is Key to Learning!

Our class was provided with 14 coding examples to help us learn new material as well as reinforce material we already knew. The assignment was to add comments to original code exercises, then alter that code and add comments to our edits. The idea of 14 folders filled with code was daunting to say the least. After a few deep breathes , I tackled my first example, basicActiveSketch: Screen Shot 2017-10-21 at 6.32.27 PM

When I opened the pde. file into the Processing IDE, I was shocked to see such simple code. The once daunting task started to look like a walk in the park. Below, one can see my comments and code edited by me.  I made very modest changes to this code to make sure I had a firm grasp on the basics. Line 13 contains my first edit, where I changed the strokeWeight (thickness of the line) to 4. I changed the y-axis position of the square and circle to have the same value. Even though they possessed the same  y- coordinate, the shapes are drawn differently in Processing. For ellipses, the coordinates represent the center point of the shape. For rectangles, the coordinates represent the first point (the top left point) to be drawn. Processing then draws the remaining three points based on the diameter specified. If you want to have Processing draw a rectangle based on the coordinate representing the center point, a function must be called before hand. The names of the functions that can be used are ‘rectMode(CENTER)’ and ‘rectMode(RADIUS). I used this exercise to better understand the landscape of the canvas for future projects. The following examples went by similarly and I started to find the assignment tedious.

Basic Sketch Edit
Basic Sketch Edit

/*
Demonstrates a basic active sketch.
 By Dawn C. Hayes October, 2017
 Edited by Asher October 2017
 */

void setup() {//this is a void do the function will no return a value
  size(300, 300); //the canvas size is shown here
}//a curly bracket is needed to contain size within the setup function

void draw() { //This must have a curly bracket to include the following statements
  background(255); //the background is white
  strokeWeight(4);//the thickness of the outlines is 4 pixels
  line(75, 75, 225, 75); //Here is a line that slants downwards
  point(150, 150); //the point is in the center of the canvas
  ellipse(22, 45, 20, 20); //here is a circle because the height and width are even
  stroke(255,0,12);//the outline is a red color
  rect(75, 36, 15, 15); //here a square
}//a curly brac<span 				data-mce-type="bookmark" 				id="mce_SELREST_start" 				data-mce-style="overflow:hidden;line-height:0" 				style="overflow:hidden;line-height:0" 			></span>ket is needed to contain the statements in the draw function

My initial apprehension soon turned into frustration. By the fourth example, I about had it will the assignment altogether. I was tired of saying why ‘void’ was used, and why curly brackets were necessary. The point of the assignment hit me like a ton of bricks (Like most lessons in my life) by the fifth example: If Conditionals. The notion of adding conditions to code seemed tangible in english, but looked to me like ‘wingdings’ ( Screen Shot 2017-10-25 at 7.22.29 PM.png) text font in my IDE. After a solid 10 minutes of staring at the Processing IDE, I pulled up my imaginary bootstraps and tried to understand the code. The edits and comments I made for this example can be seen below. My first edit began with changing the size of the canvas and the color of the background within the setup function. The code within the draw function is where my uneasiness resided. Line 12 and 13 shows that made a grey circle in the center of the canvas. The if statement was contained in lines 14- 15. After some trial and error I was able to read the code in a way that made sense in my head; “if the mouse is pressed, then the background will turn blue”. When I held the mouse down, the whole canvas was blue. I did not see the gray circle while the mouse was pressed, because Processing was acting on constantly performing the if condition. After I released the mouse, the grey circle reappeared with a blue background behind it. I was so blown away by the discovery of the if conditional, I almost forgot there was originally a pink background. Where did that pink background go?! admittedly it took me longer than it should have to find this answer. Since the background was declared in the setup, I would no longer see it after the background changed in the draw function. Processing repeats the code in the draw function continuously, but only once in the setup function. As it turns out, the code was written using the English alphabet the whole time.


/*
Demonstrates control, iteration, logic.
 By Dawn C. Hayes October, 2017
 Edited by Asher October 2017
 */

 void setup() {//void prohibits a return value
 size(100, 100);//size of canvas
 background(255,120,220);//background color is pink
 }//curly bracket to close above statement

 void draw() {//void prohibits return value
 fill(175);// the color of the circle is gray
 ellipse(50,50,25,25);//circle in the center of canvas
 if (mousePressed) {//if the mouse is pressed
 background(0,0,255);//background is blue
 }//close if statement

 }//curly to close above statement

All in all, the assignment taught me beyond Conditionals, Loops, Boolean, and other code material. I learned a lot about about myself. My patience was tested and with that I learned how to turn my frustration into motivation. I scoured the internet for answers and was surprised at my level of resourcefulness. This journey of becoming a web developer is not easy, but for some reason my excitement to keep trekking cannot be contained!


		
LaGuardia TechHire -- Open Code

Day Four: Work Work Work Work Work Work

The goal of TechHire is synonymous with my goal for attending the vestibule: learn web development skills and get a job in the field!

On the first day of the TechHire career planning, we focused on our strengths and weaknesses. These were the advantages and obstacles, we thought we had before truly starting the program. We also wrote what we wanted to learn from this class. This was all so we could map out our ‘Day One’ selves to then compare to our graduation day. This was so we had our expectations written on paper and hold ourselves accountable to the progress we make. 

On the second day of the TechHire career planning our class was given a 6 question assessment of our traits to determine what jobs are best suited for us. My results were enterprising, artistic, and social. The traits I was assigned did not fit the mold of a web developer, nor did a job in web development appear in my detailed results. 

On the third day of the TechHire career planning our class was shown videos about literacy in technology, Hackathons, the difference between back-end and front-end development, and the 13 types of programmers. A continued source of information for this section of the program comes from UNCUBED. A video, An Intro to Tech Literacy, was shown so the class could get a better idea of three main fields in web development: front-end, back-end, and data engineering. A supplemental YouTube clip from Expert Market was shown to emphasize the difference between front-end and back-end developers. The third video, from Devpost, provided the class with expectations on Hackathons. The video taught the class how to approach Hackathons, it is required to attend at least one tech event. The fourth video, 13 Types of Software Developers, gave the class more information on specific fields in web development. Based off these specialties, I am interested in front-end development, application, and QA testing.

The ideal job is one that usually just stays in someones thoughts unless they are intentional about making the ‘ideal’ a reality. I put my imagination of the perfect job in web development to the test. There are endless websites to find jobs, but there are a few which specialize in tech careers. The websites that helped me most during my search were from UNCUBED, GitHub, HackerRank, and Dice.com. Most companies hire developers under the title of ‘Software Engineer’ and this is where I am likely to begin my job search. When searching for work in the past, I have always entered the title I wish to hold in a search engine. From there I am given a slew of results I must narrow down based on the skills and experience required for the position and the type of company. I would like to work at a company that is established, meaning, its well on its way to attaining their mission statement. This does not mean I am opposed to start-ups, companies such as Facebook are considered start ups. I am concerned with the security and the direction of a company as a whole. Each day I strive to live in alignment with my core values and I want this to continue in my work place. It is key that I support the beliefs and goals of the company I will work for. 

Though I want a career in web development, it is important that I find a company which satisfies my other interests. It is a goal of mine to obtain an MBA and use my business knowledge in conjunction with that of web development. I was relieved to see that developers are in great demand at business companies. Well established companies have a place for developers without 5+ years of experience. IBM was one such company where I would meet their requirements upon completion of TechHire. Two other companies that I met the requirements for were Trivago and Lyft. The requirements I would meet in these jobs were; a bachelors degree, experience with Java and SQL, have strong problem solving skills, and willingness to learn other languages or frameworks. There were also some requirements I didn’t meet such as, knowledge of Python, Ruby, and an assortment of other languages. Based on my pervious work positions I realized that few people who are hired actually have every single requirement. Most skills are learned on the job.

Image result for baby on computer gif

Based off the requirements for the positions I qualify for, the title held would be ‘Junior Web Developer’. I am only just starting out and that I okay. It is important for me to remember that like a ‘baby’ my brain is a sponge for information.

 

An entry level position is only a starting position. It is an opportunity to learn skills for your next step. I am meant to be in a senior position, but to do that I have so much more to learn. TechHire will only be a platform from which I learn basics. After this program I intend to learn more languages such as Python and Ruby. I also intend on getting my MBA so I can be well versed in all of my interests and passions. I must prepare myself not only so I can get the job, but that I positively impact the company once they hire me!

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

 

LaGuardia TechHire -- Open Code

Day 2: The Return to Kindergarden with uncertainty and SHAPES!

Two days ago I made major strides in my journey as a web developer. I was selected to join a vestibule at TechHire .My first day of the program was similar to most ‘first days’. The day was an orientation where I sat bright eyed and bushy tailed. (I haven’t woken up at 6am in some time!) All of my senses were on overload as I tried to take everything in; names of classmates, the framework of the syllabus, and the expectations of the program. After day one I jetted home to do some serious self reflection… Which I completed in my sleep!

*  *  *

When I got on the bus from Jamaica on my way to Long Island City, I didn’t know what to expect out of my second day at TechHire. Twenty minutes into my commute, I realized I forgot my book-bag at home! I should’ve realized with my pace being more sprightly than usual. I quickly checked my Google Maps to see what this mix-up would cost me in terms of commute time. I was relieved that I’d still arrive to class 15 minutes early without having to spend $30 dollars on a LYFT.

During career training I was curious when looking at the 6-question assessment put in front of us, wondering how this would tie into the next two weeks of this vestibule. After completing the quiz, it determined my primary characteristics are enterprising, artistic and social – not the first words society would use to describe a web developer. To be honest, I was very concerned to learn of my results. There are so many challenges that I’m going to face in pursuit of this career, and I wasn’t looking forward to more. Then I shifted my perspective, realizing these characteristics weren’t challenges. They made me more marketable – as an employee, as a thinker, even as a coder. Web development isn’t all binary with no creation, at it’s very core it’s about innovation and communication, both of which I enjoy very much.

After career training, I went to lunch to bond with my fellow classmates. We exchanged words about which characteristics we settled on, and even talked about ideas outside of class. We’re all coming from very different backgrounds, so it’s exciting to watch us all grow together.

We headed back to class afterward, this time to get focused on Java. I went up to the board to be a scribe for my teammates – we were getting an introduction on how to draw shapes on a canvas. And applause to us, because we drew the most complicated out of all three teams in the class! Drawing on a white board is one thing, but coding in an IDE is another. Learning how to draw shapes with code wasn’t easy for me in class, and the challenge continued when we were assigned homework. During my journey with ‘basic’ shapes, I wanted to push the bill and include color, and even a picture! My picture is probably an accurate indication of my ‘artistic’ abilities, yet it is also accurate of my creativity and determination to learn.

It’s exciting to learn about web development in a team setting. I think it can be very easy to isolate yourself with these kinds of projects, but the learning and even projects will be better the more we interact for sure. The more perspectives, the better the outcome.

The first two days of TechHire have been full of learning, about the program and myself. I’m beyond excited to see what the next few months will bring.

Screen Shot 2017-10-18 at 12.21.32 AM
Kindergarden Casa -Asher DeMadet
LaGuardia TechHire -- Open Code

Who Will You Be?

When I was little, people always asked me the question “Who do you want to be when you grow up?” That phrase has always seemed like a multiple-choice question where I was only allowed to pick one answer. That one option cycled between doctor, lawyer, and engineer throughout much of my Haitian, daughter of immigrants, upbringing. If I was ever passionate about something besides my one designated answer, it got a big ‘H’ mark, for Hobby.

I’ve learned during my quarter-century lifespan, however, that the question “Who do you want to be when you grow up?” isn’t multiple choice. There is an infinite blank space that I can fill up for how I live my life. I thought my family, friends, and society were providing the only possible answers for how to build a passion and a career. I recognize these sources have helped me construct core values, but it is my unique perspective and experience that ultimately drive my actions. I may sound like I know what I am talking about, but I only recently made this discovery. I’m learning how to build my life the same way I build a website – one meaningful step at a time.

I was always the person who brought others together. With my family, I made sure to highlight the qualities in each member that made us stronger as a unit. With my friends, I mediated conflicts between us. In school, I brought classmates together so we could succeed as a whole. I was, and still am, a bridge that connected the people around me in a healthy way.

Growing up in the 90s, my connections relied on face to face contact. In the early 2000s, my life changed completely with the introduction of household computers. No longer did I have to wait, because the Internet allowed me to connect to people I knew in real life and make new connections instantly. Throughout my high school and college years, the world became increasingly small to me – a series of infinite links and relationships, but many seemed superficial. Though the Internet provided an instant tie to others and their ideas, I’m excited to use computer science to bridge these experiences in the healthiest way I can. It is crucial that people connect in a way that encourages a positive community.

I recognize I’m innately good at helping others feel supported and heard. My passion for fostering connections is not without structure, for I back up my natural skills with academic theory. I recently graduated with a Bachelor’s degree in psychology from Hunter College in New York City, and I know for certain that my background in the humanities is making me a better computer scientist.

I’m excited to learn more about how to build a better Internet, an Internet that sees the world as human-focused as I do. Not only this, but it’s empowering that I can build an entire system of links, actions, and community with my own fingertips. Even in my brief experience self-teaching computer science, I believe it’s the missing component to fulfill what I am meant to do and help answer the question “Who do you want to be when you grow up?”

Guanacaste, Costa Rica