Front-end Web Developer

About a week ago, 26 of us graduated from HackerYou's front-end bootcamp. Since then, we've been ironing out our next steps. To freelance? To join a startup or an agency? Even once you pick a direction, there is still a lot to figure out. For me, I want to make sure that I end up in an environment that allows for me to keep learning, as I've spoken with some developers who have seen their skills become irrelevant after a couple years at a job that doesn't embrace emerging technologies.

For now, I've been working on a freelance project while doing some interviews. I like the style of interviews in this industry - the first usually feels very informal with more of a back and forth than I'm used to having. And then the second involves some actual programming with one of their developers, which lets me see where I'm at and what areas I can work on. It also makes me appreciate what I've learned in the last few months - we've had incredible mentors and the course material seems to have covered entirely current material.

This past week, I decided to make a wheel that pulls the top restaurants from the area using yelp's API, and selects one at random (inspired by this version). Here's a link to the github repo: https://github.com/alisonkinross/wheelOfLunch!

It was a lot of fun to make - I put all other priorities aside and focused on it for a couple days, and I probably had the most fun making it out of anything I've made at HackerYou so far! Here are a few things I learned in the process:

1. Creating modular code (with many functions that call each other in a chain) makes it much easier to debug later. At one point I had almost 100 lines of jquery between my document ready tags, and it was a mess. By taking the half hour or so to separate the tasks I saved myself a lot of trouble later on.

2. Making a CSS3 pie chart (or wheel) is not as difficult as I had assumed - I read about it here, and ended up with the following base code:

HTML:

<div class="wheel"> <div class="option option1"><div class="slice"></div></div> <div class="option option2"><div class="slice"></div></div> <div class="option option3"><div class="slice"></div></div> <div class="option option4"><div class="slice"></div></div> <div class="option option5"><div class="slice"></div></div> <div class="option option6"><div class="slice"></div></div> <div class="option option7"><div class="slice"></div></div> <div class="option option8"><div class="slice"></div></div> <div class="option option9"><div class="slice"></div></div> <div class="option option10"><div class="slice"></div></div> <div class="option option11"><div class="slice"></div></div> <div class="option option12"><div class="slice"></div></div> <div class="option option13"><div class="slice"></div></div> <div class="option option14"><div class="slice"></div></div> <div class="option option15"><div class="slice"></div></div> <div class="option option16"><div class="slice"></div></div> <div class="option option17"><div class="slice"></div></div> <div class="option option18"><div class="slice"></div></div> <div class="option option19"><div class="slice"></div></div> <div class="option option20"><div class="slice"></div></div> </div>

CSS:

.wheel { height: 700px; width: 700px; border-radius: 50%; background: red; box-shadow: 0 0 10px rgba(0,0,0,0.3); float: left; transition: -webkit-transform 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.option .slice { clip: rect(0px, 700px, 700px, 350px); height: 700px; width: 700px; border-radius: 50%; position: absolute; } .option { position: absolute; clip: rect(0px 700px 700px 350px); height: 700px; width: 700px; border-radius: 50%; } .option1 .slice { background: #1abc9c; /*turquoise*/ } .option2 .slice { -webkit-transform: rotate(18deg); background: #27ae60; /*nephritis*/ } .option3 .slice { -webkit-transform: rotate(36deg); background: #d35400; /*pumpkin*/ } .option4 .slice { -webkit-transform: rotate(54deg); background: #f1c40f; /*sun flower*/ } .option5 .slice { -webkit-transform: rotate(72deg); background: #1abc9c; /*turquoise*/ } .option6 .slice { -webkit-transform: rotate(90deg); background: #d35400; /*pumpkin*/ } .option7 .slice { -webkit-transform: rotate(108deg); background: #f1c40f; /*sun flower*/ } .option8 .slice { -webkit-transform: rotate(126deg); background: #27ae60; /*nephritis*/ } .option9 .slice { -webkit-transform: rotate(144deg); background: #1abc9c; /*turquoise*/ } .option10 .slice { -webkit-transform: rotate(162deg); background: #d35400; /*pumpkin*/ } .option11 { -webkit-transform: rotate(180deg); } .option11 .slice { background: #27ae60; /*nephritis*/ } .option12 { -webkit-transform: rotate(180deg); } .option12 .slice { -webkit-transform: rotate(18deg); background: #d35400; /*pumpkin*/ } .option13 { -webkit-transform: rotate(180deg); } .option13 .slice { -webkit-transform: rotate(36deg); background: #f1c40f; /*sun flower*/ } .option14 { -webkit-transform: rotate(180deg); } .option14 .slice { -webkit-transform: rotate(54deg); background: #1abc9c; /*turquoise*/ } .option15 { -webkit-transform: rotate(180deg); } .option15 .slice { -webkit-transform: rotate(72deg); background: #f1c40f; /*sun flower*/ } .option16 { -webkit-transform: rotate(180deg); } .option16 .slice { -webkit-transform: rotate(90deg); background: #27ae60; /*nephritis*/ } .option17 { -webkit-transform: rotate(180deg); } .option17 .slice { -webkit-transform: rotate(108deg); background: #d35400; /*pumpkin*/ } .option18 { -webkit-transform: rotate(180deg); } .option18 .slice { -webkit-transform: rotate(126deg); background: #27ae60; /*nephritis*/ } .option19 { -webkit-transform: rotate(180deg); } .option19 .slice { -webkit-transform: rotate(144deg); background: #1abc9c; /*turquoise*/ } .option20 { -webkit-transform: rotate(180deg); } .option20 .slice { -webkit-transform: rotate(162deg); background: #f1c40f; /*sun flower*/ }

The CSS may look long, but it's really repetitive. You have to set the angle of each slice individually, and the colour as well. 

3. transform: rotate(0deg) works absolutely rather than relatively, so this can be used to reset the angular position of the wheel between spins. 

This week at HackerYou, we are learning javascript!! I am super excited for it. I have a somewhat reasonable background in programming from my undergrad (mostly in Fortran90 and Matlab), but it's a little rusty. Our first day was nice because it was mostly a review of conditional logic, booleans, and loops. 

I decided to program a rock paper scissors game, which I've included in case anyone wants to walk through it. But I've noticed the most confusing part tends to be the 'random' method on the 'Math' object. So I've decided to focus on explaining that. 

First, I set player1 and player2 to a random number (either 1, 2, or 3) using the code below: 

Math.ceil(Math.random()*3)

Basically, Math.random will give you a random number between 0 and 1. But, we'd like to expand that range so that it goes from 0 to 3. In order to do that, we multiply the random number by 3. Next, since we want to deal with whole numbers, we use Math.ceil on our random number between 0 and 3. Math.ceil works to round every number up to the next whole number - this will give use random numbers that are either 1, 2, or 3. If ever you wanted random whole numbers from 13 to 40 (including 40 but not 13), for example, you would say:

Math.ceil(Math.random()*(40 - 13) + 13)

The best way to test your code is to see what number would be generated if Math.random() is 0, and then test what would happen if it's 1. In the above case, if Math.random() is equal to 0:

Math.ceil(0*(40-13) + 13) = Math.ceil(0 + 13) = Math.ceil(13) = 13 

This would represent the very lowest possible generated number. However, 0 will not likely be generated by Math.random(), so the lowest number will effectively be 14. Now, let's try Math.random() = 1.

Math.ceil(1*(40-13) + 13) = Math.ceil(40 - 13 + 13) = Math.ceil(40) = 40

Up until now I've been forking and playing around with other people's code on codepen, but yesterday I decided to make my own! My goal was to take this logo for JourneyMade and use CSS transitions to turn it into a dynamic logo in which the two L shapes switch places when you hover on them. 

Unfortunately, I didn't quite get there, but I'm still proud of the result! You can take a look at it here. In order to make it work, I had to use 8 diamond shapes. Four for the basic 'm' shape, another two to get the legs, and yet another two to cover the legs on hover. I learned how to make the diamonds on css tricks,

Last week, the most rewarding aspect of my website was to create a series of divs with fixed background images. It turns out it's pretty simple! Here is my base code:

HTML5:

<div class="photo1 photo"> </div> <div class="photo2 photo"> </div> <div class="photo3 photo"> </div> <div class="photo4 photo"> </div>

CSS3:

div.photo {     background-attachment: fixed;     background-size: cover;     height: 800px; }

In the HTML, I've created four divs with the class of photo. I also gave them individual classes in case I needed to style them differently, but it turns out it wasn't necessary. In the CSS, I've fixed the background images so that they don't move at all as you scroll. I've used background-size: cover to make sure that I don't have to deal with sizing the image or removing image repeats. And finally, I've given each div a height of 800px - otherwise they would have no height as they don't contain any content. 

For a long time, my goals for the future centred around academia. I wasn't set specifically on being a prof, but I was sure that I would do my PhD and go from there. I had a very idealistic view of academia - believing that it was the best place to learn to be innovative and creative. As I worked more and more within academic settings, this view changed, and I am now aware of many of the barriers that prevent academia from realizing this ideal. 

This brings me both to web development and to HackerYou. Although I know neither is perfect, I think there are many reasons to be optimistic about their potential! One of the main reasons I was drawn towards web development is that the code-sharing, especially in front-end web development, really helps to ensure that each developer can build on the work of the rest without having to get stuck on problems that have already been solved. Sites like stack overflow and css tricks are really helpful, but the key differentiator is that every website's front-end code is available! 

HackerYou interested me for several reasons. First, they offer a very non-traditional classroom, where instead of competing amongst ourselves, we are encouraged to work together to become better developers. There are no grades, and the feeling is that since we're not getting a degree, the course will only be beneficial if we decide to put in the time and the effort to learn something. I'm finding that this change in how I am motivated is really helping me to focus and to learn! 

I also appreciate the diversity of the students in the HackerYou course. People are coming from a pretty wide variety of backgrounds in terms of their previous careers, their ages, where they are from, etc. and it helps us move forward as we can teach each other from our own background. For example, some of the students have design backgrounds, and I'm so happy to be able to learn from them! Having worked on a few websites over the last few weeks, I now know how much of a difference a well-thought-out design can make!

This weekend, I finished up my first website since starting my course with HackerYou, and I'd like to share some of the things I learned in the process. Nothing too complicated, but if you're a beginner (like I am), you might find what I picked up this week to be useful! You can check it out at alisonkinross.com/Week1Project!

First, I discovered just how easy it is to make things semi-transparent on a web page. I went for a semi-transparent white background on the div that holds my content (80% width), with an image set behind it (100% width). All I did was to give my div a class of transparent, and then add the following css to my stylesheet:

.transparent {      background: rgba(255,255,255,0.3); }

The above specifies a transparency of 30%, in white. The first three numbers specify the red/green/blue code for white, and the last number specifies the degree of transparency from 0 (invisible) to 1 (fully visible). Any other colour would be possible with the appropriate rgb code!

I also learned the value of compressing photos. My website has 12 photos, which isn't uncommon. However, I was initially using photos that were several MBs large, and so my website was taking almost a minute to load. Thankfully, I happen to have a great uncle who is a back-end web developer. I shared my website with him since I knew he would be interested in seeing it, and he took the initiative to clone my website with new compressed photos (using photoshop). The new website looks exactly the same, but according to chrome's dev tools it loads 37 times faster!

I'm most of the way through week one of HackerYou's course in front-end web development, and so far I am loving it! We've learned the basics of HTML5 and CSS3, as well as lessons in personal branding. I enjoy the fact that each of us in the course is coming from a very different perspective, and so we've really been able to help each other out! 

The instructors and mentors are great as well - Wes Bos is our lead instructor, and he's always willing to restructure his teaching depending on our questions and the things we show interest in. He shows us that more often than not, all that's needed to figure something out is a quick google search. I've also picked up a ridiculous number of keyboard shortcuts already, which has led me to at least double my coding speed! 

I made a few websites in preparation for this course, and I have just started another one (a personal site) for our first week's project. So far, I'm finding that small changes in the design become really difficult to code in HTML, especially when I eagerly started coding without a final product in mind. Once I restarted with a clear layout, everything seems to fall into place a lot easier.