GA - Project 2 - Now We're Cookin'

For project 2 we had to create a fullstack CRUD app. Wait Lisa, didn't do you that all last week? Yea! That was to prepare us to do it on our own. So here it is...Now We're Cookin'.

I came up with the idea for the site because I don't happen to be a very good cook. One of the reasons I don't get into it much (besides the fact that all my time is spent learning to be an awesome developer) is because I never have any idea what to make! So I decided to make a recipe app where users could add recipes to my database so I could try them out and learn to cook. Besides, when I go to parties and barbecues this summer and that one aunt makes a delicious fried rice or corn soufflé, I can just text her the link to my app, get the recipe, and recreate it whenever I want. And since it's on the web, you could try it too!

Once you're on the home page, you can click the add button in the nav baer where you're prompted to enter an image url for your recipe (I haven't completely figured out saving images to my database), the title, author, category, dynamically add ingredients as needed by pressing the add ingredient button, and enter the directions in the text area on the bottom. 

And there you have it, Crepes a la Lois Griffin!

On the individual recipe page you can view all the info you added and choose to edit it if there's a mistake. The edit page looks just like the add page except all the inputs pre-populate with the information from the database. 

You can view all the recipes on the recipes index page and choose to view more info on a particular one. 

And if by chance my database doesn't have anything that tickles your fancy, you can go to the search page and enter any ingredient. There, thanks to the Edamam Api, you can get a list of recipes from third-party sites that use that ingredient.

This project was equal parts challenging and fun. 

Check it out here.

~ Lisa Lou

GA - Week 5

This week we began learning Node.js and Express.js. Node is a tool used to run asynchronous javascript applications on the server-side. It basically allows you to create a full-stack app (front-end and back-end) that uses one language. Pretty awesome because before that you'd have to know multiple languages to do that sort of thing and learn syntax and convention for them separately. So Node is a beginner's best friend. 

Express is a framework for Node that helps manage the server and routing. It's used for RESTful and general web development. I know....what did I just say? So remember in the last post, I explained that an API is just a bunch of useful information that you get from somewhere else. REST (representational state transfer) technology is a style and approach to communicating with APIs. It uses HTTP requests to GET, PUT, POST and DELETE data. And that's what most of the internet is. Think about Facebook, you're getting everyone else's posts, posting your own, deleting the stupid ones, and editing the ones you wrote when you were overly emotional. Facebook is a CRUD app. CRUD is another way of saying RESTful. It stands for Create, Read, Update, and Delete. 

So what Express does is it creates a server on the back-end (nothing the end-user is going to see) that has routes that tell it how to search for data, where to find the data, and what to do with the data once it's found. We're using the MVC design pattern to do that. The Model takes the request (get Facebook posts) to server, the Controller determines where and how to get the data and then renders the data in the View (your Facebook homepage with all the posts).

Node and Express don't just know how to do these things. They need some help from modules like psql, body-parser, pg-promise, and method override which I'll get into in a later post. So at the end of the week, we created two fully functional CRUD apps (which I can't link because the server only exists on my computer, but I can tell you about them!). The first is Ada's Pizza. It's an app where we can post our favorite type of pizza, where they originated, and a picture of it. (Post about Ada Lovelace to come as well..)

The second one I made myself, it's called Today's To-do and it's a to-do list app where you can add notes on things you have to get done, edit them, change the status to 'done' once you've done them or delete them altogether. 

~ Lisa Lou

GA - Week 4

This week we learned about responsiveness and this magical thing called flexbox. If you thought media queries were the way to go to get your site to look great on any canvas, flexbox will blow your mind.

Basically CSS3 introduced the flexible box aka flexbox. Once you set an element's display attribute to flex (along with a bunch of other attributes), the element and it's children behave predictably and change to accommodate different screen sizes. 

There's a lot to digest, especially if like me, you spent weeks and weeks learning css and media queries. A good resource we were given was a game called flexbox froggy which is super fun and it helps you learn a lot of the capabilities flexbox has. CSS tricks also has a good flexbox guide. 

We also learned about API's, how to fetch them, and cool things you can do with their information. Free code camp has a good explanation of what an API is to a developer. Basically "when a company offers an API to their customers, it just means that they’ve built a set of dedicated URLs that return pure data responses" - usually in json format. It's not in a format that people visiting your site would understand and find visually pleasing, but you can use it in your code to display the data that you need to extract from it. And then you can make it look super cool. 

Along with the API stuff, we also went over iteration functions. Yes, now you have all this valuable information from the API, but how are you going to parse through it to get what you need? Well looping comes to mind! And you don't just have to do the old school for(let i = 0; i < something.length; i++). There are  forEach loops, forOf loops, and .map, .filter, and .reduce methods.

So for homework, we put this to the test. First, we created a weather app that uses the openweathermap api to display the current temperature in any zip code in the country. You can give it a try here. 

 Next, we created an app that displays the latest 500 posts in HackerNews using their free API. And it updates in almost real-time. Let me just plug that Hackernews is an awesome resource to stay in the know about what's going on. Check out my app here. 

You might notice that both of those sites are responsive. Guess what I used to do that...(starts with an f and ends with a lexbox). 

It was an information loaded week. I didn't even mention the debugger command that freezes your site at the line of javascript it's on and  unit testing with JEST which helps you to test individual functions to make sure they do what they're supposed to in any use case. Whew! Until next week...

~ Lisa Lou 

GA - Project 1 - Sonny Says

For our first project, we had to create a game. The purpose of this project was to test everything we'd learned so far: html, css, javascript logic, and dom manipulation.

My game is called Sonny Says. As you might have guessed, it's Easter themed!

Once you click the start button, Sonny the Bunny highlights a body part. When it's your turn, you have to repeat the highlighted part. This back and forth continues each round until you either get the sequence wrong, or you make it to level 10 where you win 😃!   

I like to go into a project with a side goal of challenging myself at something. I decided to push my understanding of css animations. So, I figured 'hey, Simon Says is pretty easy, I'll do that.' Simon Says is not easy. The logic behind it is fairly complex. My other thought was 'there are a bunch of Simon Says games online, if I get stuck I can reference any one of those'. Wrong again Lisa. All of those games use jQuery and I had no idea what they were talking about. 

But at the end of a couple of frustrating days sprinkled with some tears, I made it! The game works! There are a few bugs I have to hammer out (when I eventually remember what free time feels like). Check it out here and tell me what you think!

My game even inspired Kurt to create his own version using Richard Simmons...

~ Lisa Lou

GA - Week 3

This week we learned about javascript classes and how inheritance works. Essentially it's a great way to recreate objects a bunch of times kind of like having a template and a printer. The class spits out a 'new' whatever the function creates when you initialize it with the 'new' keyword. I should also mention that classes are declared with a capital letter unlike regular functions. I understand what it does, but I'm still having trouble implementing it. 

We also were introduced to jQuery which is a javascript library that makes javascript easier to use because it's syntax is very similar to english. So when you're writing your code, you can replace the `document.` with the jquery symbol `$`. You can learn more about it at the W3Schools site.

In the development community, there's a bit of a yays vs. nays on whether to use jQuery. jQuery was created back when javascript was a lot more difficult to use, specifically before it had query selectors (which let you find anything in the dom) and classes (to recreate things). But I think I'm leaning on the side of our instructor...it's more beneficial to use vanilla javascript and understand how it works before getting into using shortcuts.

And so I created this tic-tac-toe game using vanilla javascript. Check it out here.

~ Lisa Lou

GA - Week 2

This week we delved deeper into dom manipulatin, functions, and some more css capabilities. We learned new keywords and ways to create functions and objects that basically overrides everything we learned before (picture just learning the alphabet and then being told everyone speaks french now). Pretty confusing, but the world of development is advancing so much that we could encounter code using the old syntax or the new so we have to know it all. 

For our CSS assignment, we had to create a fake press release. We weren't given any instructions on the style, so this is what I came up with. You can view it live here. I'm pretty proud of it, but I really want to get the responsiveness down.

My press release

We did many exercises using functions, classes and manipulating the dom. The one I'm most proud of is this car racing game. We had to create it in only 1.5 hours! 

Give the game a try

My racing game

Did I mention I learned about bitballoon? It's where I'm hosting these sites because you can just drag and drop your files! 
Happy weekend

~ Lisa Lou

GA - Week1

I've completed the first week of GA. You'd think that 5 weeks at LaGuardia would help prepare us for the program (it did) but GA is a totally different beast. I can best compare it to thinking that you're on a local train and realizing you're actually on an express as you stare in horror at your stop passing you by. Any New Yorker knows this metaphor all too well. 

In terms of the lessons, this week we covered git, github, html, css, css resets, clearfix, JavaScript datatypes, functions, loops, comparisons, the dom, inspector tools, and did all our work using a brand new text editor called Visual Studio Code. 

One really cool homework assignment was the CSS. We were given an html page and jpegs of what the site should look like... and that's it, we had to make it. I think this simulated a real life dev experience when working with a UX designer or a client who just sends you a photo and nothing else. Of course, having done some UX, I know there are programs like Sketch which would give the developer a lot more useful information, but it was a fun/challenging task.

My brain is definitely on information overload, excuse me while I pass out. 

~ Lisa Lou

TechIMPACT - Week 5

This week we focused on JavaScript and wrapping up the prework for General Assembly. I don't think I mentioned that this whole time we were assigned to create a card-matching game. It consisted of 11 modules and each one touched on a topic in html, css, and javascript.

Kurt got really into teaching javascript. He basically taught it from the ground up which I thought would be pretty boring, but sometimes you know something does something, but you don't know why it does it. So I'd say I have a stronger foundation in it.

So by applying everything we learned in the last three weeks into our pre-work, bam! 

you've got a card-matching game. 

~ Lisa Lou

TechIMPACT - Week 4

This week, besides reviewing all the HTML and CSS that we've learned so far (I can basically spit out a basic website with my eyes closed now), we also went into using the terminal and linking to GitHub from the terminal. Man o man is that hard! 

You may remember that we got introduced to GitHub and the terminal a couple weeks ago. We were creating repositories and uploading our work. So why was it hard for me this week you ask??? I have a confession... I was just dragging and dropping my work over. 😞 Queue the Game of Thrones Shame Lady.

This week we're creating our repositories and pushing our work directly from the terminal as well as our changes. There's all these git commands that I can't remember without referring to my notes, but Kurt says one day I'll be able to do it without blinking. 

We also learned how to host sites in GitHub, that part's incredibly easy. You just have to create another branch that does it for you. So now, you can see the music site I created last week live, just click here. 

~ Lisa Lou 

TechIMPACT - Week 3

Week three of the TechIMPACT program was all about HTML and CSS.

We have a new instructor, a front-end developer by the name of Kurt Petrek. He introduced us to a new text editor called brackets.io. You could immediately tell how enthusiastic he is about coding. He emphasized a looooove for project folder organization, google, and practice practice practice!

This week we learned how to set up a website project and an html index document. We also learned about parent-child relationships, classes and id's, inline elements vs. block elements, forms, absolute vs. relative measurements, types of containers, floats, and positioning. 

If it sounds like we did a lot, it's because we did A LOT. And it was really cool putting all the skills I already knew together, learning new things, and going more in depth with the topics I was unclear about (still don't have a strong footing with position though). 

So with all that we did this week, I created a couple of basic websites like this basketball themed blog.

Let me know what you think

~ Lisa Lou

TechIMPACT - Day 7 & Day 8

For the last two days of the vestibule we did a lot of fun things. 

First, we transferred all of the work we've done so far onto GitHub. 

Then, we started learning about using the terminal, command line, and uploading to GitHub from the terminal.

Lastly, we had some time to free-code and explore the more advanced abilities of p5. As you can see, our little flower has grown! And it even has a friend! The actual file has a lot of fun things happening...the sun rotates, the bee flies back and forth and jitters when you touch it, and the seeds move around and fall to the ground. I'm working on figuring out how to get my code on here, but enjoy the photo for now.

It's been a great vestibule

~ Lisa Lou

#RUCoding?

This evening I attended the Rutgers Coding Boot camp alumni project demo presentations. It was hosted at Postlight, a digital agency here in the city. The event was very cool and informational. I met some new and interesting people and was able to reunite with an old friend. Besides the project, the event also included lightning talks done by specialists and professionals in the community. 

The first speaker was Dave Chappel (not pronounced like the comedian lol), a recruitment specialist for software engineer companies. Dave gave us some tips on how to spot bad recruiters, what to expect from good ones, and how to make yourself a good client to work with. You should be looking for a recruiter who specializes in your industry so they know the market and have a relationship with some great companies, who can give you at least 3 testimonials to vouch for their work, and who's willing to connect with you in person and get to know you. Pro tip: Don't tell them where else you're interviewing if they ask. 

One alumni was very excited to speak about Python and Panda. Panda is a data analysis toolkit that helps manage and clean up data using Python. He also used Jupyter notebook to run his program. All software I've never heard of before.

Three of the alumni created a video paging app for doctors. One of the developers was a practicing MD and saw the need because a large percent of hospitals still use beepers even though doctors have to travel across huge campuses to get to their patients. They hacked Twilio's api and were a great example of seeing a need for technology in your everyday life, using other people's technology and keeping things simple. 

The last alumni I saw didn't have a project to present but he did give some really great advice to new developers on how to deal with being new at a company, being thrown into a a project or having to learn a new language quickly. My top takeaways were:

-Pause take, a step back and know that you're not expected to be a master overnight.

-Efficiency and quality are important

-And you should never be afraid to ask questions

His tips for starting on a project:

1. Get an overview of the project. 

2. Set up your system. Download the tools and be sure you have permissions and access needed. 

3. Pull the code. Request and review design documentation. 

4. Analyze the tasks and functional requirements. 

5. Take some time to review the code. 

6. Mock up design documentation. 

7. Google is your best friend. (EVERY developer tells you this lol)

8. Start coding based on your planning. 

And his tips for working well and writing good code: 

1. Comment your code well. 

2. Try to be less repetitive

3. Test, test, test some more. 

4. Request code reviews with your team. 

5. Your team is your greatest asset. 

6. Don't be afraid to ask questions. 

~ Lisa Lou

TechIMPACT - Day 6

Today we learned about Git and GitHub. Basically Github is a repository for content (code and basically anything else you want to store). It provides great way for a person or a team to work on projects, save different versions, and keep track of changes. Git is a desktop app that stores data and your files at the time you make changes as a form of version control. You use Git to commit your files and changes to GitHub.

After learning, it was time to put my new knowledge to the test! I was able to 

-create an open source repository

-started and manage a new branch

-change a file and commit those changes to GitHub

-open and merge a Pull Request

If you knew how long I wanted to know how to do this....you'd have tears of joy for me!!!

Feel free to visit my Github and see what I've been up to.

~ Lisa Lou

TechIMPACT - Day 5

Today started out in a lecture format. We covered a boatload of topics - and all before lunch! We briefly but thoroughly enough (since most of us were already familiar with these topics) touched on variables, if statements, else statements, else if statements, loops, nested loops, functions, objects, and constructor functions. 

Instead of going into all of these topics and restate what I already know, I thought I'd point out the things I didn't already know just in case you didn't as well (and so I can reference it if I forget). 

First thing being the difference between == and ===. When making an equality comparison == is the abstract equality and === is the strict equality. == will convert a value if it can and then run the comparison while === will not. 

The difference between a parameter and an argument in a function depends on if you're creating the function or not. If you're creating the function then you are assigning it's "parameters". But if you are calling the function and the parameters are already set, you are giving it "arguments". 

I don't quite understand constructor functions yet, so I'll watch a couple of videos and get back to that one. 

After lunch we did pair coding. My partner and I are trying to do a project that includes mostly all we covered today. So far, it's a flower that loses a petal while two other petals shake in the wind. Let's see how it progresses.

~ Lisa Lou

TechIMPACT - Day 4

Today we talked about how to be successful in a startup environment (or any work environment really). Here's my takeaways:

- Over-communicate

- Be a Team Player

- Be Organized

- Know When to Say No

- Take Leadership

- Play on Your Additional Outside Skills

Besides learning how to be successful at work, we had some free time to explore the code we'll be going over next week and to play around with them. I used that time to look more into some topics I'm particularly excited about and to watch some informative videos on what we've done so far. 

I realize I haven't gone too much into p5.js, it's a lot easier than anything else I've worked with. There's a p5 expert named Dan Shiffman who makes the best videos on them. If you'd like to check them out so that you too can mess around and create cool stuff in p5, go here.

~ Lisa Lou

TechIMPACT - Day 3

Today we started learning about variables. Variables are containers for information you want the computer to remember. They also make adjusting code and parameters a lot easier because everything you want to change ideally would be located in one place. 

The simple example we started with was making a circle move from one side of the screen to the other by incrementing it's X coordinate by one. We used that example to show how much easier it is to assign the circles coordinates using variables, and then we made it even simpler by listing all of the variables as keys belonging to one 'circle' object. 

From there, we were allowed to experiment in pairs. The first thing we wanted to figure out was how to make the circle bounce because in the original code, it would continue moving to the right indefinitely and it would no longer be visible on the screen. That certainly took a while to figure out, but I knew it needed a conditional statement to achieve the bounce. We figured out (with some help from GitHub) that the conditional statement needs to identify both the left and right boundaries of the canvas using an OR statement and then declare that the X value of the circle should change to its negative value...in plain English, once the circle hits the edge of the canvas, it reverses direction. From there the Y was easy and we got our circle to bounce around. We changed our circle to a square, added a random function to have it change color and played with the speed of movement to observe the types of patterns it made. Pretty cool even though this one little project took us 2 hours!

~ Lisa Lou

TechIMPACT - Day 2

Today we started getting into coding. We're using p5.js, which is a pretty cool JavaScript based library and it even has it's own (outdated) editor. The thing about P5 is that it was originally created to help artists and other non-developers draw things on the web quickly and easily.

So in today's class we covered the typical setup of a p5 file. It always includes a setup function and a draw function. The setup function is how you build the 'canvas' or environment and the draw function is where you place everything else that you want the program to render. Pretty simple.

We also got into creating basic shapes. Because p5 is a library, it has all these functions that it already recognizes and all you have to do is provide it with the parameters. So for an ellipse for example, you'd input ellipse( 50, 50, 100, 100); and that basically is telling it where to locate the center of your ellipse from the x and y coordinate as well as the width and height of the shape.

Did I mention that computer graphics doesn't use a typical coordinate system?! ya...that's a thing. The origin is at the top left and positive numbers go to the right and down.

Other shapes we covered were rectangles, triangles, and lines. We also added color to our backgrounds and shapes. P5 recognizes RGB, HSB, RGBA, Hexadecimal Codes as well as color names. 

We're learning through experimentation how order of operations affects our code. For one thing stroke and color can affect everything if it's the only one of its type and it needs to be above the shape it's referring too. 

I'm most proud of this little alien I created. Let's see what I can make tomorrow. 

~ Lisa Lou

TechIMPACT - Day 1

I never usually get around to posting life updates on this blog - probably because I'm so busy #livingmybestlife. But for the last year or so, I've been having a great deal (more) of interest in technology, the web, web design and web development. Of course I'd be interested in a plethora of things, hence the reason this blog started, but I really decided to pursue development more in depth and so I quit my corporate job in September and began on this journey. 

Today I started in NYC's TechIMPACT program. It's a pretty remarkable opportunity where they take young people and teach them the skills to become developers in six months. It's a partnership between LaGuardia Community College, General Assembly, Uncubed, and the Department of Labor all under the TechHire initiative. If you'd like to know more about the program and how it came about, you can read this article. 

I'm really excited about the program. If you haven't heard that the internet is basically taking over the world, and jobs in tech are growing and will continue to grow, you might be living under a rock. It would provide me with a great opportunity to be around more like-minded people, work on cool projects, and make a great living. Did I mention the program is completely free? So I won't have to break the bank to get into this amazing field.

I'll be posting daily updates on my progress in the program, as well as fun projects I'm doing so be on the look out for that. 

~ Lisa Lou