#JavaScript30 – Day 05

I’m pleasantly surprised at how many videos are tagged as “Friends with CSS” in this challenge.

Day 5 involved FlexBox which I was pretty excited about. The project itself was an interactive panel of images that change as you click them.

The JavaScript in this challenge was pretty minimal, mostly repeating things from previous lessons like querySelectorAll. This time, though, I was able to grasp why and how to use it a little bit easier which is the type of progress I was hoping to make with this challenge.

#JavaScript30 – Day 04

Day 4 consisted of what Wes called JavaScript cardio – exercises in JS.

The focus on this video was arrays and 4 array functions:

.filter()

filter() will create a new array with all of the elements from another array that pass a test from a function.

.map()

The map() method takes in an array, performs a functions for each element in the array, then returns a new array of the same length.

.sort()

Using sort() will sort the elements of an array inside of the array. It will take 2 items at a time, determines if one is a higher value, then will place them at a higher or lower index respectively.

.reduce()

reduce() performs a function against each value in the array and an”accumulator” (like a running total), then reduces it to a single value.

 

They’re all functions that I have seen in solutions for JS exercises in places like Free Code Camp  and HackerRank, but never really understood how or why they are used. And, even though I can tell you what they do, I could still use some work getting more comfortable actually working with these methods. Now that I’ve done this exercise once while just following along, I plan on going back to exercises like these to attempt to solve them on my own. I also have ideas on how to solve at least one of the FreeCodeCamp algorithm scripting challenges I’ve been stuck on.

#JavaScript30 – Day 03

On day 3, we played with some CSS and JavaScript to create a set of sliders that control the frame of the photo on the page, the blur of the photo, and the color of the border (and the JS in the title).

CSS

  • :root – the document’s root element. That would be HTML.Working with HTML documents, there’s not much difference between using root or html. But, from what I can tell, there are other document types where using root would be a good option.
  • –base – I had no idea that ‘vanilla’ CSS had variables. We declared these variables inside of the :root styling to make them available to the entire document.
    I haven’t found any info that suggests it’s new to CSS3, which is even more surprising. Using variables is one of the many reasons I’ve enjoyed using Sass. Now, I have more basic CSS I can get better at using.

querySelectorAll

querySelectorAll returns a nodeList of all elements that match the query. nodeLists don’t have very many properties, and a limited number of functions you can perform on them. We don’t really talk about it until day 4, but you can convert a nodeList into an array if needed.

this.dataset.*

This targets the data attributes referencing a data-* element.

 

#JavaScript30 – Day 02

Day 2 of this challenge involved building a clock with moving hands using CSS and JavaScript. I don’t know how it never occurred to me to build a normal analog clock using CSS or JavaScript before, but I’m glad I got to.

I liked that this time, the instructor paused to say “try this last bit by yourself.”

The thing that I do love about tutorial courses is that even if you are just typing what the instructor is typing on screen, you can still learn something. For example, if I had done this project on my own, I probably would have made each hand a different function which is ridiculous – each hand is doing the same function at different time intervals. The entire point of creating functions is to cut down on repeating the same code after all. But it’s hard to see where your skills are becoming diluted when you never seek help, even in the form of a simple tutorial.

Here’s something else I learned from this project:

querySelector

Based on only the video, my best guess about querySelector is that it’s a newer and better way to select elements. I was close, but not quite there.

While you can use querySelector in the same manner as getElementByID and getElementsByClassName, it is capable of much more. Using querySelector will let you find elements with rules that can’t be expressed with getElementById and getElementsByClassName.

*

js-css-clock

 

 

#JavaScript30 – Day 01

Earlier last week, I saw a tweet that linked to a course called #JavaScript30, a 30 day JavaScript coding challenge. You build 30 things in 30 days with 30 tutorials using Vanilla JavaScript.*

When I registered, I fully expected the first project to be full of JavaScript 101 things like defining what a variable is. This isn’t a JavaScript 101 course though. It’s targeted at people who are already familiar with JavaScript and want to become more comfortable with Vanilla JS and working with the DOM. Has my name written all over it.

I immediately loved that I was hearing new terms and seeing them in action.

javascript30

 

backticks

As far as I had always known, you use either single quotes or double quotes for strings. So I was a little bit confused when Wes switched out his single quotes for backticks. And I’ve used a backtick so little in life that I couldn’t remember where it was on my keyboard right away (if you don’t know/remember either, it’s the same button as the tilde up on the top left).

Using backticks is a new ES6 thing to make working with strings easier. When you wrap your text in backticks instead of quotes:

    1. They can be multi-line!
    2. You can interpolate variables in them.
      console.log("I'm " + age + " years old!"); can be written instead as console.log(`I'm ${age} years old!`);

data attributes

The data-* attribute is used to add custom, private data to your HTML. The asterik(*) can be replaced by any term and the value will be a string. Like this: <element data-*="somevalue">. 

The custom data attribute can then be used in the page’s JavaScript to create a more dynamic user experience without using something like AJAX. Data attributes should only be used when no suitable HTML5 element or attribute exists.

const versus var

If you’ve ever even touched JavaScript, you probably know that you use var to crate a new variable. Well, ES6 introduced 2 more ways of of creating variables in JavaScript: let and const.

Short for constant, const variables cannot be reassigned. If you declare const x = 100 , you can’t reassign x to anything else anywhere else in the DOM. It should be used if you absolutely don’t need to reassign it anywhere else in your code. Otherwise, you’ll want to use let.

Letting go of using var will take some time(or maybe none at all for some people), but it’s cool to know that there are other options now.

classList.add

If you’re like me and like to use jQuery, you probably utilize the addClass() method when you want to assign a new class to an element. With vanilla JS, you can use classList.add() instead. Both functions append a new class name to the list of classes the element already has.

setTimeout versus ‘transitionend’ event

Wes predicted that the solution I probably came up with as a viewer was to use setTimeout. Then he showed us a better way to do it. With setTimeout, the duration has to be set in both the CSS and the JS files. This makes both of them less maintainable and prone to errors. Imagine: you’re working on a project with other people and someone decides to change the animation duration in the CSS but doens’t change it in the JS code. Chaos.

There’s an event called transitionend which, as you can probably tell, is fired at the end of a CSS transition. Not only does it keep errors down, but it’s less complicated code. Win.

 

javascript_drumkit

By the end of the video, not only did I learn a few new things, but I got to build a pretty cool JavaScript Drum Kit. I also built a landing pagefor my project, where you’ll be able to see links to all 30 projects as I add them.

*Vanilla JS - Plain old JavaScript without the use of frameworks or libraries like jQuery.

Quick Update

I have been committed to other interests and needs for a while, not dedicating as much time to coding as I had in the past. I’m sure anyone reading this can relate to having responsibilities and interests and trying to make time for them all. And, if you’re like me and sometimes go into all-or-nothing territory, you go hard for as long as you can before you burnout just as hard. Yikes.

I’ve talked about this before on this blog- how my perfectionism is sometimes a curse more than a blessing. I like to do well and I like to do everything right the first time. But, sometimes, I have to remind myself that a little bit is better than nothing and that done is better than not starting. In addition to the fact that I don’t have to do everything all at once. That being said, while I have not blogged very frequently, I have been at work.

I recently completed my Wikipedia Viewer. I attended the 2nd Diversity Hackathon hosted by Women Who Code Austin. I’ve been visiting online courses and tutorials here and there. I’ve even been working on updating my GitHub hosted portfolio (and the url: ceritakelly.com).

Project-based AngularJS and NodeJS courses are next on my list, in addition to completing more Free Code Camp projects and scripting challenges.

Regarding my current day job, I have been spending time reintroducing myself to databases. I am a quarter of the way through a course on Microsoft Access training, just about to start on queries and SQL. It was one of my least favorite subjects in undergrad if I’m being completely honest, but having had the foundation to begin with is helping me pick it back up probably quicker than I would have otherwise.

 

 

Free Code Camp – Local Weather App (FINISHED!)

I guess doing something new really was the way to kick myself into gear. A few days later and I have successfully fufilled all user stories for this project on Free Code Camp.

  1. User Story: I can see the weather in my current location.
    When you load the app, it will request that you share your location. If you hit “Allow,” it will display your current city/town and the weather there. If you deny, it should throw an error at you.
    I do this by using

    navigator.geolocation.getCurrentPosition

    to send a notification to the user that requests the location. Then, there’s an AJAX function that takes in the coordinates from the navigator, returns the weather for those coordinates (in Fahrenheit), the weather conditions. It also converts those coordinates to a city and state, and displays those on the page.

  • User Story: I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather. 
    I used this icon set by Erik Flowers and Lukas Bischoff. to display icons that match the current weather conditions. When I first started coding, the weather here in Austin was consistently ‘clear’ so I had no idea if it actually worked well. Then, when I took the screenshot, I noticed it had changed to “Partly Cloudy.” Yay!
    They have nice functionality that works with the Weather Underground API, and some other popular APIs as well.
  • User Story: I can push a button to toggle between Fahrenheit and Celsius.
    When you hover over the temperature, the cursor will change to indicate that it is clickable. When you click it, it toggle between Celcius and Fahrenheit.

And, now, I have a functioning weather app! And I never would have gotten it done if I hadn’t been willing to shift my focus elsewhere for some time.

I noticed when I went for my screenshot that it displays the weather in decimals, which I don’t typically see (or look for) in weather apps. I am considering adding some code to round that number to the nearest whole number.

Screenshot 2016-02-29 23.14.10 (2)