My First Project!

I finished my first project with the online program and it sure was daunting at first. I recently took almost 3 months off the course and once I came back – BAM! – summarize everything I’ve learned so far in a project. Taking a break during the final stretch of the Object Oriented Ruby section was probably not the best timing, but that last code-free week in Costa Rica was totally worth it.

The goal of this project was to create a very basic CLI interface that pulls (scrapes) information from a website. I used the DC Improv website for my application, and you could interact with it to find out the shows for the upcoming month and find out more information about a particular show. Click here to watch a quick demo of my CLI app. The link to my standup performance at the DC Improv is available upon request. *modest plug*

Here are some things I learned when it comes to tackling larger labs like this:

1. I definitely did not need to spend 2 weeks on this.

2. Stop procrastinating and stop being a perfectionist. I’m still a total n00b, so why does my CLI app need to be perfect?

3. Do some test scrapes first! Make sure what you want to do will actually work. I basically ended up almost having 2 different projects because I had to start again from scratch. This was because I didn’t test my first website, Opentable.com, to see if individual restaurant pages could be scraped. They couldn’t be, at least without using complicated code that wasn’t necessary and too time consuming for this project.

4. Review and really understand the code you are trying to write, especially if you have examples to work off of. A lot of time was wasted going back and forth and making mistakes because I didn’t take a second to comprehend what exactly certain lines of code were meant to do. Ask what does this method achieve and what other classes does it interact with?

[Now for some more positive learning experiences…]

5. Scraping is fun! And so is creating your own project. I really ended up having fun with this once I got going. It was so satisfying to have your code work, and even seeing errors weren’t terrible because I usually knew what was wrong and how to fix them. So they weren’t a big, glaring red bummer, more like an encouraging “You’re almost there!”

6. I actually kind of know how to code. I just, like, created something that, like… works.

Until the next project! Hopefully I’ve learned my lessons.

Advertisements

To Respond or Not to Respond

Old school isn’t cool anymore

Back when I was 12 and making killer webpages (by killer I mean mediocre), it was so simple. The bar was set pretty low. Scrolling marquees were cool. So were sparkly homemade gifs. Should we unnecessarily put an iframe on this page? Definitely. If you were good with photoshop, your website was probably going to look “super kewl.”

I have been out of the web design game for a while now but always knew that responsive web design (RWD) was becoming crucial, especially since almost everyone now has a smartphone or an iPad. Plus about 5 years ago I was at this party in Cologne and was bored from stuffing my face with Mettwurst – literally raw meat – sandwiches because I didn’t feel like being social, and I ended up sitting in a corner reading a book about the importance of design responsiveness. I found the little book to be quite fascinating. I also learned that eating over five raw meat sandwiches is an impressive and disgusting feat.

Fast forward to today: responsive websites everywhere. And those who haven’t upgraded (let’s pick up the slack government agencies…) can stick out like a sore thumb. An outdated, awkward thumb that I’ve opened in Google Chrome on my phone and I have to zoom in to properly read the content. Our big awkward thumbs aren’t meant to click around on website links made for a laptop cursor! They have better and bigger things to do, like double-tapping on friend’s wedding photos on Instagram.

What exactly is RWD and why should we care?

RWD is a way of approaching web design so that all code and images can respond to screen devices of any size. That way your website can look fantastic on a 20-inch display or smartphone. This is achievable using CSS grid layouts and styling, flexbox, bootstrap, and media queries to name a few tricks.

It’s important because technology and design are constantly changing, and having a responsive website lets you change along with it, but with minimal effort. Plus, can you imagine have several different versions of your website for different devices? Instead of having one website to maintain, you now have at least three. That’s not only time-consuming but also extremely difficult to maintain. And let’s not even get into all the quirks between different web browsers and how you need your website to look good on all of them. It might seem totally overwhelming (I’m hyperventilating as I type), but I am learning it is possible and there are resources out there to help.

Teach me your ways

I don’t plan on summarizing everything here, but I want to compile a list of great resources that even I can come back to once I start creating my own website. Resources for the technical and design side of things. Get excited, arianaberger.com is coming soon!

CSS Grid examples
https://gridbyexample.com/examples/

Test a website on different device sizes across breakpoints
https://material.io/resizer/

Beautiful blog designs for inspiration
https://www.awwwards.com/websites/blogging/

Play around with bootstrap by growing a carrot garden
http://cssgridgarden.com/

Tips for approaching RWD
https://99designs.com/blog/tips/responsive-web-design-key-tips-and-approaches/