Day ?????

Last you heard from me, I was in progress to complete that JavaScript 30 course.

I haven’t.

Initially, I was a bit ashamed to write a post admitting that I didn’t stick with my plan. I remembered, though, that this blog is about my learning experiences and this is one.

I completed 13 days of the course. But there were also other events in my life.

  • I flew home for the holidays and, despite my intention to code at least once a day, I spent far less time at my computer and a lot more time with family and friends  hadn’t seen in over a year.
  • I was recently promoted to a Business Analyst role at my current company.
    *Insert happy dance gif*
    I will be doing more process improvement and project management – both of which I see as extremely useful skills for a developer. Not to mention, I’ll be working with some SQL and have more involvement with web processes.
  • As much as I was being introduced to things with JS 30 (and the other resources I’ve been dabbling with), I still just felt *stuck* and couldn’t see a light at the end of the tunnel.

I believe that the reason that I have been stuck is because I haven’t truly gone back and studied fundamentals of Computer Science. I didn’t exactly need to when my goal was to just build websites. But now that my focus has shifted toward web and software development, those gaps in knowledge are important to fill. Otherwise, I’ll continue to be perpetually frustrated and that doesn’t sound like a pleasant reality to live in.

I have started the CS5o course offered by Harvard/edX. It is designed as a 12 week course and serves as an introduction to CS topics like algorithms and data structures. It also introduces you to SQL, JavaScript, Python, and C languages.

I figured that if I am searching to fill in gaps, starting from the very beginning isn’t a bad idea. It is impossible to walk away without learning anything- I’ve never worked with C or Python before. At the very, very least, I will have those in my toolbox in the end. The ultimate goal is to walk away from this course feeling more confident in my abilities as a developer, and being ready to kick ass.

Keep rocking with me and stay tuned for CS50 updates.

Advertisements

#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.