Claire Muller

Posted on Apr 24, 2019

4 Things I Learned From Building My First Site Solo

#beginners #javascript #css #webdev

Last week me and my fellow cohort mates at Flatiron School Seattle finished our module 3 projects; the assignment was to build a single-page application using vanilla Javascript and a Ruby on Rails backend. The rest was pretty much up to us, and I decided to make Jeoparody! This was the first website I built all by myself, and I learned a lot from it. So for my blog post I thought it would be helpful to write about the top things I learned.

CSS is weird

Going into this project, I felt fairly confident in my CSS skills. I’d worked on the Codecademy CSS Course and tinkered around in the console, so I thought it was pretty straightforward. When you don’t know what you don’t know…

My biggest struggle was figuring out how to vertically center text inside a div. ‘Why is this so hard?’ I asked myself after spending at least an hour adjusting the padding, margin, height and width. I finally discovered that simply wrapping the text in a p tag will do the trick! Unless...the text is longer and wraps to become multi-line. Still haven’t figured this one out.

Seed smart

While we’re on the topic of things I thought I had down pat: seeding my database. I found this awesome API, jService, that has every clue and category from every season of Jeopardy. That’s roughly 185,000 clues! I was pumped! I set up my Clue and Category models, figured out the best way to iterate through each page of the API, and the seeding began.

Fifteen minutes in, seeding failed! I quickly learned that one shouldn’t assume an API with 100,000+ entries is perfect. Tons of clues were duplicated, there were empty strings, missing values, you name it. After a lot of trial and error, the solution was to create two if statements that check each clue before it’s added to the database. The first one makes sure that the clue actually has the keys I want: question, answer, and category. The second if statement ensures that the values aren’t just empty strings.

clues.each do |clue|
  if clue.key?("question") && clue.key?("answer") && clue.key?("category")
    if !clue["question"].empty? && !clue["answer"].empty? && !clue["category"]["title"].empty?
      create_clue(clue)
    end
  end
end

Event listeners are picky

I haven’t had a lot of experience using event listeners, but they’re obviously an important thing to master. The first one that I implemented on my website was pretty straightforward. When a user first comes to the page, they put in their username and click the submit button. The event listener hears the ‘click’ and does its thing:

document.getElementById('submit').addEventListener("click", function(e){
  e.preventDefault();
  username = document.getElementById('username').value.toLowerCase();
  findUser(username);
})

There was no need to ‘remove’ this event listener because the div that it’s inside is hidden once the user logs in. Easy! The next event listener I used was for each of the clue divs. I had figured out how to remove the dollar amount from the div once a user had clicked it, but the event listener remained. I tried a few things and eventually asked for some help. My instructor gave me the very simple solution of simply adding a class of ‘clicked’ to a clue div that had been clicked. This allowed me to write the following inside the event listener:

if (clueDiv.classList.contains('clicked')) {
  return;
}

So once again, the event listener still exists on each clue div, but if a user clicks on one that they’ve already clicked on, it will simply return. Easy! My final event listener is the one that gave me the most trouble. Once a user has clicked on a clue, a div appears that asks if they got the question right or wrong.

I added an event listener that listens for a keydown of ‘Y’ or ‘N’ and went on my merry way. I soon realized that a user could continue to press ‘Y’ long after they’d finished the clue, and their score could increase forever! Thus, I finally had to tackle removing an event listener. After much trial and error, I discovered that removeEventListener is picky. Until now, I had been writing the whole function inside of the event listener, instead of referencing a separate function. This doesn’t fly when you try to remove the listener! In short, this was the only solution:

document.body.addEventListener("keydown", yesOrNo);
document.body.removeEventListener("keydown", yesOrNo);

Comments are necessary

I’ve always been pretty good about writing comments in my code, but it wasn’t until I started this project that I realized just how necessary they are. After I had my backend all set up, I wrote that first fetch request and it began...I was in the zone.

When I’m in the zone, coding my little heart away, it’s easy to forget to write a quick comment to help out my future self. But it’s so important! Because even if I think I know exactly what all my code is doing, I’ll eventually be going to sleep. And the next day, when I’m reading my code, I have no idea what’s going on. So don’t forget to leave yourself some notes to save future you from future headaches.

Conclusion

To conclude, I learned a lot from building my first website. If you’re new to coding, I would highly recommend building a single-page application. It’s great practice and helped solidify my knowledge of HTML, CSS and Javascript. Happy coding!

Top comments (27)

Krisztina Závecz • Apr 24 '19

As for vertical alignment, if you do not need to support old browsers, flexbox will be your savior. :) Also there is a really useful post on css-tricks.com about centering (either vertically or horizontally) which will show you handy alternatives in case you can't use flex. Google "css-tricks.com centering", it should be among the first few results.

Claire Muller • Apr 24 '19

Thanks so much, I'll check that out!

Florian Rand • Apr 24 '19

Also, about css-tricks, this is gold: css-tricks.com/snippets/css/a-guid...

Claire Muller • Apr 24 '19

This looks like a great resource, thanks!

simonhaisz • Apr 24 '19

I've used that guide so much at work that when I type 'fl' into my browser that's the first suggestion in the list.

Stephen Chiang • Apr 24 '19

Checkout flexbox zombies... A fun way to learn flexbox.

Krisztina Závecz • Apr 25 '19

LOL, same here with the CSS-tricks flexbox guide 😁😁

Jamie Ferrugiaro • Apr 25 '19

You had me at zombies...

Krisztina Závecz • Apr 25 '19

also, when you have the basics in place, you can check out flexbox froggy to have some fun & put your understanding to the test :)

Florian Rand • Apr 24 '19

I agree 100%. It's important push yourself out the comfort zone and build something. It doesn't need to be perfect, bad code can be refactored, and bad design redesigned. The important thing is when we build something by ourselves the first time (unless some kind of genius which it's clearly not my case), we face problems and made mistakes, and those problems and mistakes help a lot in the learning process.

This is not related, but you have an unbelievable trust in humans not cheating (where you correct (y/n)) 😈

Claire Muller • Apr 25 '19

I was so excited when I started that I didn't think about how hard it would be to have the user type in the answer. Fuzzy matching is a little too complex for me at this point! That's why there's no high score, it's more for practice :)

Florian Rand • Apr 25 '19 • Edited

Another way to practice is adding those to a roadmap of future features / things to fix. Anyway, keep the good work!

Steve Huckle • Apr 25 '19

I've been a professional coder for twenty-five years, and in that time, I've barely written a single comment. Instead, name functions and variables descriptively, since that'll help comment your code for you (IMHO). Furthermore, keep functions super simple, so when you (or someone else) comes back to them, a year or two later, it ain't that hard to work out WTF they're doing. I reckon that is best supported by the declarative/functional style, espoused these days by es6 and react, as opposed to the imperative style to which your post leans...

Mirko Lorusso • Apr 25 '19 • Edited

+1 (even though I think that comments are important too)
I'm nearly a noob (PHP) dev and I'm reading Clean Code by R.C. Martin, and this is one of his tips too.
Some of the things he wrote might sound almost "weird", but it's a mother lode to me, especially as a not-so-experienced developer.
(Sorry for my English, I hope it's understandable).

Marko Bjelac • Apr 29 '19

100% agree on the descriptive names.

Also, tests are a HUGE help. They serve as in-depth documentation for your code, which is continuously up to date.

There are a lot of testing frameworks for JS, currently I use Jest.

I strongly recommend trying out test-driven development (TDD) ... check out a clear & concise video of why it matters. As frontends are not only putting backend model props into templates anymore but have their own behaviour, I think its really important that they are treated the same as backend code (i.e. that they have tests, and preferably that they are test-driven).

Yaser Al-Najjar • Apr 25 '19 • Edited

Hi Calire,

I'm pretty sure it's been a lot of fun (I still remember my first days in programming... wooh it was very exciting 😃)

I always love to hear people first experiences cuz I'm mentoring new comers in (our programming academy)coretabs.net, so yeah bring us more of those posts!

I've been doing backend for long (about 8 years so far) that I didn't care to up my CSS and styling game.

Recently, I had to finish some work in CSS... I thought CSS was very weird, but I realized that I had to go through the basics to get things right.

Key notes:

Know whether the element is a block element or inline element (put two of them in the document and if they're on the same line, they're inline elements), like this:

<a href="#">my link</a>
<a href="#">other link</a>

<p>my paragraph</p>
<p>my other paragraph</p>

Use bg color as an indicator (instead of imagining how the element looks like).

<style>
    a {
        background-color: #ccc;
    }

    p {
        background-color: red;
    }
</style>

<a href="#">my link</a>

<p>whatever</p>

Know how to manage that element, by knowing the (text styling techniques)[w3schools.com/css/css_text.asp] and by knowing about the (box model)[w3schools.com/css/css_boxmodel.asp]

As for aligning vertically to the center, just ensure that it's a block element (if not use display: block;), and use height and line-height of the same size... and there you have it right in the middle 😉

<style>
    a {
        background-color: #ccc;
        height: 50px;
        line-height: 50px;
        display: inline-block;
    }

    p {
        background-color: red;
        height: 50px;
        line-height: 50px;
    }
</style>

<a href="#">my link</a>

<p>whatever</p>

Now feel free to remove that ugly background color!

Claire Muller • Apr 25 '19

I was originally setting the line-height equal to height, but if the text is too long and wraps to the next line, it creates a huge space between the two lines. :(

Yaser Al-Najjar • Apr 25 '19

Ah, line-height is for one line text... here the multi-line way:

It's like converting this paragraph into a table (using display), so that we can use vertical-align

<style>
    p {
        background-color: red;
        width: 150px;
        height: 150px;
        display: table-cell;
        vertical-align: middle;
    }
</style>

<p>whatever stuff right here to go to the next line</p>