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