This repo is my trip through Wes Bos javascript30. I'm starting on 22Feb2018.

Video Speed Controller today. I love the concept of interactively changing the speed of video playback rate because I do change video speed a lot, and the interface to do that is limiting. Again, it did not work on my python http.server

Click and drag mouse events. I can see this being useful for user input, but not immediately.

We did some pretty for the nav bar today. It is kinda badass to have a fancy little menu. I think I may be able to use this in projects, unlike a lot of the neat audio and video and other interactive bits. Woot.

Dealing with events. We used click events to learn how to put middleware, essentially, into an event listener to choose how to respond to click(s).

Sticky navigation with javascript. Say you want the nav bar to always be at the top of what the viewer sees rather than the top of the page? You can use the offset value and move that as the user scrolls Y. Simple, but maybe hard to think of.

I forgot to push yesterday, so I am doing a double update today, I guess. Synthesizing different speech sounds today. It was neat.

Highlighting links based on user interaction.

Geolocation!! After spending a lot of time working with geolocation through the Google Maps API and with Swift, I thought this explanation and approach was so simple. I used a similar approach for my weather app for free code camp.

Wow. 2/3 finished! Another one that did not work on my server, but I thought speech detection was cool, and I am surprised at how little code it takes! FWIW - I also did the WesBos redux course today. That was a fun and useful diversion, but it is a little old, so I had to refactor on the fly. Check it out if you are doing redux work. It's quick.

Interact with user webcams. Interesting, and I'm not sure how to incorporate this. It would not work with my python http server.

Dealing with data that is not in the format that you like. The example is focused on string times, doing math, and getting an output. Array methods of reduce and map are used. Very useful for messy data.

Sorting an array by something besides the first thing. We used band names and sorted them without the initial article. Since I've spent most of my coding days dealing with ugly data, this was a trick I already knew, but it was fun to use band names.

Cool effects with movement of the mouse.

Super helpful explanation of event delegation and local storage. I use local storage for JWT on apps, and it was fun to use it for something else. However, the explanation of event delegation with responsible parents and negligent children was awesome 😄 Side note, the idea to change the checkbox to something besides a traditional checkbox, in this case tacos, with css, was neat.

A little bit of a reminder that you have to be careful with what is in your data. Do you have a copy of the data, or are you pointing to the data? One of the things that you remember when making action creators for flow or redux design is that you never, never, never change the state, just return a new state - preventing the issue that you might mess it up.

Today's effort was to move images into the page view as the user scrolls. I did not particularly like the effect, but I imagine that it could be useful for catching when users are moving through your page quickly or are going to a particular space. I made a simple typo that neither my linter nor my console caught. I had typed

const isNotScrolledPast = window.ScrollY < imageBottom;

in what was supposed to be this function.

function checkSlide(e) {
    theImages.forEach(theImage => {
        console.log(theImage.classList); // the image
        // calculate where we need to start the image slide in at and where the bottom is
        //const windowBottom = (window.scrollY + window.innerHeight)
        const slideInAt =
            window.scrollY + window.innerHeight - theImage.height / 2;
        const imageBottom = theImage.offsetTop + theImage.height;
        const isHalfShown = slideInAt > theImage.offsetTop;
        const isNotScrolledPast = window.scrollY < imageBottom;
        if (isHalfShown && isNotScrolledPast) {
            theImage.classList.add('active');
            console.log("show");
        } else {
            theImage.classList.remove('active');
            console.log("unshow")
        }
    });
}

Did you see it? Yep. I had capitalized the S in scrollY. Good reminder - You have to catch your own mistakes!

How fun. Today, we learned how to add an easter egg when users present a secret code. Wes had us use the cornify.js script with the cornify_add(); function to add random unicorns and rainbows as an example, but you could do anything.

Build a custom interface for HTML5 video player because the defaults are not the same in each browser, change over time, and may not look how we like. I was not able to get any of my javascript to have an impact with the player. I think this is because I am using python to host an http.server, and I think that may have also been my problem with the canvas day. However, I watched the video and pasted the code that I hadn't been able to test and guess. The first parts, I had spot on :) It's a bummer when I can't test and learn. The little open source video that Wes picked here is pretty cute. Check it out!

Focus on writing a little function to consider the current action and an array and take another action. I should have just googled for shift key because it was making me crazy. I finally watched the rest of the video only to realize that it was shiftKey. I'll know for next time.

The lesson was focused on some tips and tricks in the Javascript developer console. Most of these were new to me. Hooray for learning! Today I stopped splitting up the files. I just copied index_START.html into my index.html to do the work.

Learning about fundamentals of canvas. I followed along, but this never worked for me. I couldn't get any action even after copying the indexFINISHED js. I'm not sure why. 😖

A little bit of array methods review. And...some cleaner code with fewer temporary variables. I like it.

Search and highlight matches from data. This was a simple data fetching and then quick updates to a page. I learned more ways to use regex and how to match while things are still going (listen for keyup instead of just change). I should have realized the match before because we used keyup for the drumkit on day 1. I also liked the css for this day even though we did not touch it at all. The accordion effect is simpler than I thought.

Fancy page animations with css flexbox and a little bit of javascript to change css classes. I knew the basics of flexbox, but I followed along completely to update my css and js file. I am enjoying learning about the transitions and transforms.

Data wrangling with array functions. Yay. I already knew most of these. My use of other languages instead of javascript for most of these functions made me screw up a little bit at first, but I was able to figure it out mostly. Learned some pretty tricks for reduce, though.

Updates css variables based on user input and applies them to elements on the page. I copied the starter code into my index.html and style.css, created a new js file, and updated the css and wrote the js while watching the video. I had no idea about css variables, so the whole thing was new to me. The actual setup of this file is testy to the screen it is rendered on, so it did not work for me when I was looking at my javascript console, but I did not update it. I'm excited to learn about css variables.

Takes in the current time from js and updates the css clock image. I copied the starter code into my index.html and style.css, created a new js file, and updated the css and wrote the js while watching the video. I greatly prefer my files split up, but I understand why they are all on one page for these simple projects. After he walked us through the seconds, I paused the video and wrote the minutes and hours alone and changed my transition-timing-function to ease-in-out; instead of the curve bezier, which seemed too jumpy on my screen. I was happy that it worked.

A simple (but awesome) keyboard based drumkit. I copied the starter code into my index.html and wrote the main.js script while watching the video. I did not know how to handle changing classes with vanilla javascript before - always used jquery! I love that I can just navigate into the project directory and use python3 -m http.server to serve the files locally.