Waypoints

After some browsing today I came across a JavaScript library called Waypoints. It allows you to use a function once you’ve gotten to that point of the page while scrolling. For a while now I’ve wondered the best way to do this, as I haven’t seen it in any schooling videos yet, but it’s really popular on most websites now to have a fade effect when you get to a certain point of the page. I will definitely be incorporating this into my portfolio! Working on it now. The biggest challenge I’m facing is keeping a balance of animation at breakpoints without overdoing it. If I could animate everything I would! Trying to show restraint.

Adobe Friday – Ninjas in Illustrator

To keep my Illustrator skills fresh, I looked at a tutorial to make these sneaky ninjas. Aren’t they cute? The tutorial I used is here. Even though it’s an old post, most tools still applied and were in the same location. I am thinking I will try to do something like this every Friday, so that I can grow as a designer as well as a developer, and not lose the Adobe skills I learned in college.

Sneaky Ninjas

Women Who Code

I attended my first Women Who Code Meetup tonight. I went to a Front End Lab where you can bring whatever you are working on and ask whatever questions you may have. In the beginning we went around the room and talked about ourselves a bit. I felt in good company. I will say that it was a very quiet room for the remainder of the Meetup; everyone was very focused on what they were working on. I brought my portfolio and spent most of the time working on the contact page. I was using a lot of flexbox and icons from fontawesome.io to show links for all of my online profiles. It wasn’t as social as I thought it would be but I definitely was able to get a lot done and also heard about what everyone else is doing. I’ll be signing up for the next one!

 

(oh also they had Dominos pizza, always a treat!)

Quote Generator and Weather App

Hi! It’s been a few days since I’ve posted anything. That’s because I’ve been working hard on my first big projects for Free Code Camp – a Quote Generator and a Weather App!

Here is a link to my Quote Generator. I went with a Harry Potter theme because I love some of the funny quotes from the books. I found that this one wasn’t too difficult, and I got to really practice putting together a large array and using a function to make them random. As for the design I felt like the font choice was really important , as its a very text heavy project. So I went with a fun script to use on the character names and kept the actual quote a sans-serif so it was clear to read. I also had fun playing with a gradient background – I used this website for the css and color inspiration.

Here is my Weather App. This one was much harder. I had to learn how to pull my geolocation using latitude and longitude. I used a JSON API for that. Then I used Open Weather Map API to pull weather data based on your location. Some of the requirements were to be able to toggle the temperature between fahrenheit and celsius, and have an image or background change based on the weather.   I decided to go with a minimalist theme and just have a few lines of text and have the background image change. I might go back and tweak it a bit, play around with the sizing and fonts, and maybe see if I want to add a small icon that also displays the current weather. OR maybe I’ll change out the background image to be a looping video. I think that might be cool.

It feels good to be making progress; I feel like I learn best by creating. I guess it’s that way for most people though. Onto the next project…

 

Falsy

Something so easy took me so long to figure out. Today I was looking at the Free Code Camp lesson Falsy Bouncer and I had to remove all falsy values. I thought I had to create a way to filter out the specific values like false, null, undefined, etc. This is what it ended up being:

function bouncer (arr) {

return arr.filter(Boolean);

The values are already set up in that Boolean function so all this did was filter them out with that one line! Awesome.

up your case!!

For free code camps Title Case a Sentence :

I need to make every word in a string have a capital letter , and the remaining letters in the word lowercase.

So first I should make all of the string lowercase:

str = str.toLowerCase();

Then turn it into an array with a space between each word:

str = str.split( );

Then I need to make a FOR loop . which I have realized I am terrible at. so I try to break it down into my own words so I can understand it. (which I’m not sure that I totally do yet, so my explanation may not actually be correct)

for (var i = 0; i < str.length; i++) {

str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1);

So start i at 0 (var i =0) , check the entire length of the string (i < str.length) , continue doing that until you reach the end.(i++)

Then i need it to find the first letter of the string which is str.[i].charAt(0) and make it uppercase .toUpperCase() and then take the remaining letters of the string and keeps them the same? I guess, by using + str[i].slice(1);

Finally I need to make the array a string again with a space in between and thats what my return will be return str.join(‘ ‘);

I am determined to get these for loops figured out!!!

 

Reversed dat String

Hi friends ,

I am making an effort today to get through some pages of freeCodeCamp in the Object Oriented Section. Today I completed the lessons:

  1. Condense arrays with .reduce
  2. Filter arrays with .filter
  3. Sort Arrays with .sort
  4. Reverse Arrays with .reverse
  5. Concatenate Arrays with .concat
  6. Split Strings with .split
  7. Join Strings with .join

Felt good to finish that section! I was having a hard time with it, so I took some time away from it and pursued other resources.

So I think because of the above, I was able to complete the next lesson which was to Reverse a string. There were a few steps I had to take.

  1. Turn the string into an array (so i used str.split(“”))
  2. Then reverse it (.reverse())
  3. then put the array together back into a word (.join(”)) (when i didn’t have this added, “hello” was showing as [“o”,”l”,”l”,”e”,”h”] . ugh)

function reverseString(str) {
var str = str.split(“”).reverse().join(”);
return str;
}reverseString(“hello”);

BOOM

1st Post

Welcome to my blog! I am still figuring out the format, but while I do that I want to share with you what I learned today.

  1. I watched Lesson 4 of the Advanced JS online course taught by Kyle Simpson on Front End Masters. He covered IIFE Pattens and when to use the Let keyword.
  2. I bought my domain name and host package! The domain name I bought through NameCheap, they had great reviews, and I’m being hosted by Dreamhost, also received great reviews. I had no troubles setting up and everything seems to be running smoothly.
  3. (Not coding related) I updated my iOS today to the most recent iOS 10 and my sister and I had a fun day of sending GIFs back and forth to each other.

Until tomorrow!