DEV Community: VirtualSobriety

JavaScript30 - 10 Hold Shift to Check Multiple Checkboxes!

VirtualSobriety — Mon, 22 Jul 2024 22:05:24 +0000

So I am back after another tough challenge from Wes Bos's JavaScript30! Today's challenge was much more work than I first assumed. Holding shift to check multiple boxes is such a common practice I was surprised to see that it isn't built in to websites automatically and that you had to manually code it yourself. Obviously if that was the case then this lesson wouldn't exist but you know what I mean.

With full transparency I gave up and followed along with Wes for this lesson. The video even started with him encouraging us to take the reigns and figure it out ourselves. After over an hour and a half of googling and attempting any kind of real progress I gave up and followed along with this lesson. I'm not proud of giving up on this one but I was definitely falling down a rabbit-hole of irrelevant information and I doubt I would have came up with an actual solution anytime this week! So yeah...with my head low I followed along with Wes.

This lesson is very self explanatory. You are given a basic checklist and then are asked to make it possible to check multiple boxes by holding down shift while checking a box. Cool. This turned out to be much more complicated than I thought. Before we dive into the actual lesson and what was necessary on our part there is one thing I do want to call out.

    input:checked + p {
      background: #F9F9F9;
      text-decoration: line-through;
    }

This very simple line of CSS was cool to me. I knew it was possible to make a checkbox with HTML with <input type="checkbox"> but I was not aware that you can change the properties of the checkbox/the div the checkbox is in with CSS just by checking the box. I also want to note here that Wes also mentioned how often he said the word "check" because it was a lot in the video...fair warning it will be just as much in this post.

  let log = document.querySelector('#log');
  document.addEventListener("click", logKey)
  function logKey(e) {
    console.log(`The shift key is pressed: ${e.shiftKey}`);}

function validate() {
  if (document.getElementsByClassName('item').checked) {
    alert('checked');
  } else { alert('you didnt check it!')} }
validate()  
  let checkBoxes = document.querySelectorAll('checkbox');
  let selected = [];
  for (let i=0; i < checkBoxes.length; i++) {
    if (checkBoxesp[i].checked) {
      selected.push(checkBoxes[i].value)} }

Everything in the code block above this line was a failure. These were just a few of my attempts at trying to figure out the solution myself. I did feel as if I was on the right track a few times. For example the first part with function logKey(e) I was so proud for finding how to call when the shift key was pressed during a click and when it was not. After that...I couldn't even guess how to proceed. Again I was stuck.

const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]')
let lastChecked

function handleCheck(e) {
  let inBetween = false
if (e.shiftKey && this.checked){
  checkboxes.forEach (checkbox => {
    console.log(checkbox)
    if (checkbox === this || checkbox === lastChecked) {
      inBetween =!inBetween;
    }
    if(inBetween) {
      checkbox.checked = true
    }
  })
}
  lastChecked = this;
}
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));

Wes was here to save the day with this. He did state it would be possible to check multiple boxes by calling the parent/child in the HTML, but this could be easily broken by changes made to the HTML. Instead he had us use a for loop, or at least a forEach. This did make a lot of sense to me. It is a fairly simple way to go through each part of the HTML while checking if a box was checked along the way. That was just half the battle though.
After using forEach we had to make a new variable to determine which element was between the first element checked and the last element checked. This would be how we would check the remaining boxes and change their properties to reflect that of the elements that were initially checked. There were so many lines here that had me a little lost...again using the || and using an ! before a variable are strange concepts to me. I have to look into them more before my next project.
Before I knew what was happening somehow we already finished the challenge. It just worked. It was in that moment that I saw that this challenge was much more simple than I thought. It wasn't that much code when all is said and done. Being able to use all the parts together was the complicated part. I might have been able to solve this myself, but even in saying that, I doubt I could have come up with a viable solution by the end of this week.
Well, that about wraps up this post! Today's lesson wasn't the best for me, but it was a good reminder that I still have a long long way to go. I hope you come back to check out my next post with the next part of Wes Bos's JavaScript 30 with - 11 Custom HTML5 Video player!

JavaScript30 - 9 14 Must Know Dev Tools Tricks

VirtualSobriety — Mon, 15 Jul 2024 20:01:01 +0000

Howdy y'all and welcome back to another day working on Wes Bos's JavaScript30! Today's challenge was anything but a challenge. Today was just a look at several (probably...14) different dev tool tricks. Unlike his array cardio, this didn't have us really do anything but just watch along as he showed us different ways of interacting with the console. I was actually kind of excited to see this as I almost lost my mind a few weeks ago when I saw him use console.table() in a previous video. I don't know why it wasn't obvious to me that there are many different ways to interact with the console but I was absolutely stunned at the time.

Before even working with different console commands the first thing Wes showed was how to break down a JavaScript function on different actions (subtree modifications, attribute modifications or node removal) and then show the line of code that will be affecting the change in the page. This seems like a pretty cool way to break down different aspects of websites to see exactly how they use JavaScript for interactivity. You can see how they coded specific changes and pause the change before it happens. Well...at least that was my takeaway from that.


    // Regular
    console.log('hello')

    // Interpolated
    console.log('hello I am a %s string', 'poopy')

    // Styled
    console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

    // warning!
    console.warn('OH NOOOOOO')

    // Error :|
    console.error('Shit!')

    // Info
    console.info('Crocodiles eat 3-4 people per year')

The next part covered different actions and commands you can use in the console. I'm not entirely sure when you would need to use any of these...but it doesn't mean it isn't interesting. For example: I didn't know you could style the text within the console itself...it's a bit unnecessary but I do think it looks cool. Same thing with the calling of the warning/error/info messages. Yeah it's pretty interesting to do it. But why you would want to do that I can't see why (apart from possibly making a text based game in the console).

Then we went over how to test if the a part of the document contained a specific class with console.assert(). This can also be used to test if something is true of false within the document. If it is wrong it can/will display your own error message. Then we quickly covered how to clear the console with console.clear() which helps clean things up. It could also be useful if you have several different console commands throughout your document and want to clean it up at the very end. This could stop you from having to go through the entire thing and take out, or comment out, each and every console command up to that point.

    // Testing
    const p = document.querySelector('p');

    console.assert (p.classList.contains('ouch'), 'That is Wrong!')

    // clearing
    // console.clear()

    // Viewing DOM Elements
    console.log(p)
    console.dir(p)

    // Grouping together
    dogs.forEach(dog => {
      console.groupCollapsed(`${dog.name}`)
      console.log(`This is ${dog.name}`);
      console.log(`${dog.name} is ${dog.age} years old`)
      console.log(`${dog.name} is ${dog.age *7} dog years old`)
      console.groupEnd(`${dog.name}`)
    })

    // counting
    console.count('Craig')
    console.count('Craig')
    console.count('Billy')
    console.count('Craig')
    console.count('Craig')
    console.count('Craig')
    console.count('Billy')
    console.count('Billy')
    console.count('Craig')

    // timing
    console.time('fetching data');
    fetch('https://api.github.com')
      .then(data => data.json())
      .then(data => {
        console.timeEnd('fetching data');
        console.log(data)
      })

Moving on we also covered console.dir() which can allow you to view the dom elements of a specific thing. There are so many parts of this that I do not recognize or understand, but I imagine that will come in time. The console.group() command I do think has more uses for me at this time. Just the fact that you can take information have have it stored by object or array and their information seems very helpful. Sometimes the raw code for arrays or objects within arrays can be overwhelming but this will automatically organize the information. It's pretty cool actually.

The final two parts of the lesson were with console.count() and console.time() which also seem like specific use cases that I don't think I will need. The counting function is kind of cool being that you can see how many times a specific word/phrase is referenced. It wasn't entirely clear if that was solely being referenced within the console or for the entire document but it seems like it is just within the console. console.time() seems outdated. I say this because there are many different ways to see how quickly you are getting data from another source. Be it from loading a different element from a specific website or going to a website itself. There are many ways to see how quickly things load in but I guess it makes sense to be able to do that in the console as well.

I guess that basically covers today's lesson. It wasn't very exciting but it was informative. I might use some of these commands moving forward but at the moment I am just happy to see other ways of using the console because I have been curious since I first saw him use console.table() so nonchalantly that I still think about it now. Well...that's it for today! Please come back again soon to see: JavaScript 30 - 10 Hold Shift to Check Multiple Checkboxes!

JavaScript30 - 8 Fun With HTML5 Canvas

VirtualSobriety — Fri, 12 Jul 2024 21:37:57 +0000

Hello and welcome back to another exciting installment of my experience with Wes Bos's JavaScript30! This was probably the most fun I've had with the course so far! After starting this challenge I quickly decided to code along with Wes instead of trying to figure it out myself as I was very much out of my depth. I have never worked with Canvas before and there was plenty of syntax I did not understand. Could I possibly make my own version of an Etch-a-Sketch in a browser? Yeah sure, I could figure that out, but after seeing what he wanted as a finished product I took a step back.

So what was it that we did? Basically we did make an Etch-a-Sketch in HTML5 Canvas. The biggest difference was when you would draw the colors and size of the line would constantly change. I won't lie...how we managed to do this I still do not fully understand. But I do have a pretty decent idea.

As you can see from the picture above we ended up with an extremely colorful design, even if it isn't practical in the slightest. Basically, it seems Canvas is more or less "paint" but with more uses. I don't really see when I would be using it for any projects going forward but it was still a fun exercise as a whole.

Oh and learning about HSL was cool too! He took us to mother effing HSL so we could learn more about hues and colors. I would definitely recommend going to this site to see how you can mess with the color pallet. We used this by directly calling it in our code and incrementing it as we drew on the page.

      let isDrawing = false;
      let lastX = 0;
      let lastY = 0;
      let hue = 0;
      let direction = true;

      function draw(e) {
        if (!isDrawing) return;
        console.log(e);
        ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
        [lastX, lastY] = [e.offsetX, e.offsetY];
        hue++;
        if (hue >= 360) {
          hue = 0;
        }
        if (ctx.lineWidth >= 175 || ctx.lineWidth <= 1) {
          direction = !direction;
        }
        if (direction) {
          ctx.lineWidth++;
        } else {
          ctx.lineWidth--;
        }
      }

You can also see how we changed the size of the line itself by switching the direction of how it either increments or decrements based on the movement of the mouse. One line of the code still confuses me just based on how much is actually going on. That being if (ctx.lineWidth >= 175 || ctx.lineWidth <= 1) { direction = !direction;. This entire line is crazy to me. Mostly how its designed to flip on itself after getting to a certain amount. || still confuses me too and I'm not sold on how or why you would use a ! in JavaScript. I will be looking into this more after I write this post, but if anyone could explain either of these concepts to me a bit more I would greatly appreciate it.

There was one other pretty big revelation I had during this challenge. That would be the use of semicolons while writing JavaScript. I really haven't done this before, even though it was suggested to me. I figured that just ending a line and continuing on a new line would be enough. I know that you have to use semicolons in CSS and that if you don't not anything will work the way you want it to. This was the first time I ever had an issue with JavaScript by not using them. By not having a semicolon after ctx.stroke() my code basically broke. Okay, it still worked, but definitely not as intended. For some reason it ran into the following line of code but the semicolon fixed that completely. Lesson learned.

All in all this was a fun challenge. I greatly enjoyed messing around with HTML5 Canvas even if I barely scratched the surface in regards to all that you can do with it. I drew on my browser for longer than I should have and also went back and messed with some of the values (i.e how the hue would increment, the max width of the lines, etc..) just to see what would happen. I probably couldn't recreate this on my own if I tried but I am still so fascinated as to what can be done with a few lines of JavaScript!

That's all for todays challenge. If you have the time I would highly suggest trying this one for yourself as it was far and away the most fun I have had so far! Be on the lookout for my next installment of the JavaScript30 with: 14 Must Know Dev Tools Tricks!

JavaScript 30 - 7 Array Cardio Day 2

VirtualSobriety — Wed, 10 Jul 2024 19:01:19 +0000

Hey all and welcome back to another day of Wes Bos's JavaScript30! Alright...it's been over 2 weeks since my last post and that’s pretty sad. That being said, I did put in my notice at my current job and they have been running me into the ground so I haven't had as much time to work on my coding recently...but now that I am officially part time you can bet your asses that these posts are going to start coming more regularly and possibly more diverse as I will have time to work on other projects apart from just this one. However, you didn't come here for updates on my life you are here to see more about this course! So let's begin!

Array Cardio day 2 was NOTHING compared to day one. I won't lie. I was absolutely dreading going into this challenge based on how the first one went. The first course had me googling constantly and jumping through hoops. It truly felt like a workout, whereas this was more of a stretch or maybe a yoga session. The first part of Array Cardio day 2 involved using Array.prototype.some() and Array.protoype.every(). We were given an object within an array that held a list of people and the years they were born. With this information we were asked to figure out if at least one person was over 19 and then if every person was over 19.

const people = [
      { name: 'Wes', year: 1988 },
      { name: 'Kait', year: 1986 },
      { name: 'Irv', year: 1970 },
      { name: 'Lux', year: 2015 }
    ];
    // Some and Every Checks
    // Array.prototype.some() // is at least one person 19 or older?
    const isAdult = people.some(person => ((new Date())
  .getFullYear()) - person.year >= 19 )

  console.log({isAdult})
    // Array.prototype.every() // is everyone 19 or older?
    const areAdult = people.every(person => {
      const currentYear = (new Date()).getFullYear();
      return currentYear - person.year >= 19
    }
  )
  console.log(areAdult)

This part of the challenge made me feel pretty damn good about myself, I won't lie about that. After a quick google search I had my answer on how to use Array.prototype.some() and that also directly applied to .every(). I absolutely blew that out of the water and felt like I would be able to finish this challenge in record time. It turns out I was both right and wrong...

The second and, somehow, the final part of this challenge involved Array.prototype.find() and Array.prototype.findIndex(). We were given another object within an array but this time it had a list of comments for some kind of restaurant reviews that all had their own id numbers to help differentiate them. Just like before doing a quick google search showed me how to use .find() and how to use it well, but it appears it wasn't exactly what Wes was looking for. I only used .find() while using console.log when referencing a function I made that called the id based on the number given. I guess I could argue that it was similar to what he did...kind of...you know, considering we both came up with the same result. But I don't know, I think I like my code better than his in this case.

    const comments = [
      { text: 'Love this!', id: 523423 },
      { text: 'Super good', id: 823423 },
      { text: 'You are the best', id: 2039842 },
      { text: 'Ramen is my fav food ever', id: 123523 },
      { text: 'Nice Nice Nice!', id: 542328 }
    ];
    // Find is like filter, but instead returns just the one you are looking for
    // find the comment with the ID of 823423

    function hasId(idNumber) {
      return idNumber.id === 823423
    }
    console.log (comments.find(hasId))

    // Array.prototype.findIndex()
    // Find the comment with this ID
    // delete the comment with the ID of 823423
    function thisId(idNumber) {
      return idNumber.id === 823423
    }
    console.log (comments.findIndex(thisId))

    const index = comments.findIndex(comment => comment.id === 823423)

    const newComments = [
      ...comments.slice(0, index),
      ...comments.slice(index + 1)
    ]
    console.table(newComments)

It also turns out that I was unclear about what he wanted us to do for the final part of the challenge. While having us use findIndex() he also wanted us to delete the comment with the same id that we just found before. I just went through VScode and deleted the comment manually. To be fair, I figured he just wanted to show us what it would return if the comment was no longer there. It turns out he wanted us to use either .splice or .slice to delete the comment via new code (which makes more sense for this exercise) and then have us access the new array without that specific comment in it. So...yeah...I didn't get to that point because I just deleted it manually. But I did go back and coded along with him to see how that would be possible with new lines of code.

So there it is. Array Cardio Day 2. I'm relieved to know that there isn't a Day 3 of this. That isn't me saying that I couldn't use more practice with arrays and how you can interact with them. It's just as far as this course has gone these were probably the least fun so far. Well be on the lookout for the next lesson I will be covering, hopefully it will be out either this week or early next week since I will have more time! Regardless I hope you're ready for JavaScript30: Fun With HTML5 Canvas!

JavaScript30 - 6 Ajax Type Ahead

VirtualSobriety — Fri, 21 Jun 2024 16:59:12 +0000

Hello and welcome back to another awe-inspiring addition to my experiences with Wes Bos's JavaScript30! This time I attacked the Ajax Type Ahead challenge and let's just say, even after completing the challenge, I still have close to ZERO idea what "Ajax Type Ahead" means. I mean...type ahead makes sense but...anyway I digress.

I have all but decided that moving forward I will be coding along with Wes during these challenges and then rewatch the video as many times as it takes for me to understand what we actually did. There were more than a few parts of this challenge where I had basically no idea what we were even typing out or why. There was even one part where Wes made a joke and I wasn't sure if he was being serious or not because, as it turns out, my base knowledge is no where near where I thought it was.

The Challenge

So the challenge itself was for us to take data in the form of an array from one specific location (in this case it was a .json file) and then make a way to search through the data while showing a complete list of any item in the array based on the letters typed while highlighting said letters in the list in real time. wow. Oh did I mention the list consisted of cities, the states they are located in and their population? Because that's pretty important.

As you can see the list works. You cannot see it working in real time but of course, it does. Wes being Wes he did already set up the CSS and basic HTML elements so the focus of the challenge was just the JavaScript. I do long for the days where I could flaunt my HTML and CSS skills just to give myself that little confidence boost before a lesson. Also, I still find myself struggling with reading someone else's code as opposed to writing my own from scratch.

const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

const cities = [];
fetch(endpoint)
  .then(blob => blob.json())
  .then(data => cities.push(...data));

There were quite a few pieces of JavaScript that I have never encountered before. Such as fetch which grabs data from an outside source with a promise. Which makes sense when you think about how promise's work and how it can relate to .then(). Now what I just said I can barely explain at the moment. But I am starting to understand how and why they work and work together...or at least I think I am. As it turns out getting the information was the easy part and it was about time to get thrown into the deep end.

function findMatches(wordToMatch, cities) {
  return cities.filter(place => {
    // here we need to figure out if the city or state matches what was searched
    const regex = new RegExp(wordToMatch, 'gi');
    return place.city.match(regex) || place.state.match(regex)
  });
}

This introduced other concepts I haven't encountered before, such as: RegExp, word matching with .match and 'gi' (global insensitive). The 'gi' was where he made his joke about things being insensitive...which I DID NOT KNOW was a joke at first and also didn't realize it was referring to case sensitivity and looking back at it makes me feel pretty silly. Much like everything else introduced here I can almost explain each of these concepts but I am starting to grasp what they do and why.

function displayMatches() {
  const matchArray = findMatches(this.value, cities);
  const html = matchArray.map(place => {
    const regex = new RegExp(this.value, 'gi');
    const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
    const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
    return `
      <li>
        <span class="name">${cityName}, ${stateName}</span>
        <span class="population">${numberWithCommas(place.population)}</span>
      </li>
    `;
  }).join('');
  suggestions.innerHTML = html;
}

Now that we could search through the data it was time to display that on the html. Although it seemed like a lot at first, looking over it now I do see the purpose for each line of code and what they did. One thing that I thought was crazy was the concept of replacing each character in the data with a highlighted version of the same character based on what was typed in the search bar. To me highlighting a word or character is exactly that. Basically taking a hypothetical highlighter and then in turn highlighting words in real time on the screen...OF COURSE this is not how it works but that's just how I have processed it for my last 35 years of life. That being said I did find an issue with the finished product of this challenge based on the concept of ignoring case sensitivity and replacing characters based on the search bar, see the image below.

As it turns out replacing a character with the same exact character but "highlighted" while ignoring case sensitivity while searching itself can case some issues. You can make some pretty hysterical results while messing with upper and lowercase letters in the search bar and then changing the results as it updates in real time. Yeah, okay, so the search function doesn't break and still works exactly how we programmed it to work but I feel like it is worth mentioning/revisiting this "bug".

One More thing

I feel the need to mention one last part of this challenge. There was a blink and you miss it part that I had to rewatch about 5 times before even knowing what happened and I still do not really understand of the syntax used here.

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

This is nuts. All this did was add a comma to the population numbers while searching. But when he added this to the code just by being so nonchalant and saying "yeah, you can just find this and copy it". Yeah I get it...I have done that many times before...but at least then I broke down the code piece by piece to ensure I also understand what I am doing and calling...but that...that thing scares me.

Conclusion

Well...I did it...or more so Wes did it and I followed along. But this is another challenge for the history books. Of course there are other parts of this that I left out but if you want to know more why not give it a try yourself! Much like the last few challenges I have done in this course I do not feel as accomplished as before, but I do know I am getting practice. Given the free time I have at the moment I know this is exactly what I should be doing. I just can't wait for when I can actually take more time and focus on coding the way I would like to.

Tune in next time for another jaw-dropping addition to my journey into Wes Bos's JavaScript30! where I will be tackling: Array Cardio Day 2!

JavaScript30 - 5 Flex Panels Image Gallery

VirtualSobriety — Fri, 14 Jun 2024 15:27:13 +0000

Well here we are! Back with another update on my progress through Wes Bos's JavaScript 30. In this challenge I had to take 5 pre-selected images with some "motivational" words and update them with flexbox and CSS to make them grow and shrink as well as reveal other words when clicked. Being that it involved CSS and flexbox I figured this challenge would be right up my alley!

Let me start by saying this was another challenge where I chose to just follow along with Wes's instruction instead of stopping early and solving it myself. Unlike before I made this decision after seeing how much of the CSS was already completed. There were a few instances that I would have liked to figure out myself that Wes already had done for me. This was in the transition timing. I am still not comfortable with this concept in CSS, also, what the hell is a cubic-bezier??? That in itself was a letdown...but that doesn't mean that there wasn't anything to gain from this challenge.

    .panel {
      background: #6B0F9C;
      box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
      color: white;
      text-align: center;
      align-items: center;
      /* Safari transitionend event.propertyName === flex */
      /* Chrome + FF transitionend event.propertyName === flex-grow */
      transition:
        font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        background 0.2s;
      font-size: 20px;
      background-size: cover;
      background-position: center;

Don't get me wrong. I completely understand why all of the HTML and most of the CSS work was already done before starting the challenge as the challenge itself is to have you focus on adding your own JavaScript and tweaking the CSS to make it functional. However I do still find myself struggling to work on someone else's code. I would rather make something completely from scratch and know the entire code inside and out. One positive about how each of these challenges is set up is that all of the code is in one HTML file. It is kind of nice not having to look through HTML, CSS and JavaScript files separately and have to piece together what everything does.

There was one thing that I found extremely cool in this lesson. I was unaware that it was possible to "grab" different elements through their CSS properties. This happened in a JavaScript function with e.propertyName.includes('flex'). I didn't even realize what was happening at the time, but looking back over the code now I see how this was done.

    const panels = document.querySelectorAll(".panel")

    function toggleOpen() {
      this.classList.toggle('open')
    }

    function toggleActive(e) {
      console.log(e.propertyName)
      if(e.propertyName.includes('flex')) {
         this.classList.toggle('open-active')
      }
      }

    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

I don't have too much more to say about this one as I did just follow along so I didn't learn too much on my own. I am almost excited to move on to the next challenge but being that I feel like each one of these posts is further removed from the last. On the bright side I should have some more free time coming up soon as I have officially put in my notice at work so I will be able to focus on coding full time! Cross your fingers that this works out for me and I will see you next time for: Ajax Type Ahead!...(what the hell does that even mean?)

JavaScript30 - 4 Array Cardio Day 1

VirtualSobriety — Tue, 04 Jun 2024 15:36:31 +0000

Let me just start by saying my initial thoughts about this challenge were completely wrong. I figured this would be the easiest challenge BY FAR and was expecting to complete it and write this post in the same day. Here I am, almost two weeks later having just finished watching Wes Bos's video with his solutions.

He was absolutely right calling this Array Cardio because it was a workout for sure. Plus it reminded me, not so gently, how little I know about arrays, how they work and what you can do with their sweet sweet information.

    const oldPeople = inventors.filter(function (person){
      if (person.year < 1600) {
        return person.year > 1500;
      }
    } )
    console.log(oldPeople)

I guess we should basically start at the top and take it from there...This challenge obviously had us working with arrays from start to finish in many ways I never knew possible. It covered different tasks that started with filtering names from a given list to sorting different street names from a Wikipedia page in real time.

  const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));

    console.table(fifteen);

The exercises covered four different ways to manipulate data within an array, those being: filter, sort, map and reduce. There were 8 exercises in total and I mostly struggled with number 6 which had you go to this link right here and work solely in the console to take the information off the page, turn it from a node into an array and then list out the necessary information. I missed the fact that the data in the array was pretty obviously an object and eventually moved on without finding a perfect solution on my own/with the help of google.

Despite being stumped on one question I did manage to solve the other 7 exercises on my own. Very few of my solutions matched Wes's but that's part of the fun! I would probably have been a bit letdown if I saw that I came up with the exact same answer, as by the time I completed this challenge I now had two different ways to complete each task.

I do have to give a HUGE shoutout to one part of this challenge in particular. This was when Wes introduced the console.table() command. I knew console.log() was a huge tool in coding but never knew there were more variations to the console commands. Looking back at it now it's pretty obvious that there would be different ways to show information in the console but it never occurred to me that they could be so different and helpful. I definitely want to do a quick dive into different console commands just to see what else I can do, as this simple change from .log to .table completely blew my mind!

This challenge was a toughie and I am exhausted. I spent days upon days working on this. I should start leaving my expectations at the door when I think about coding and how the rest of this course will be because I couldn't have been more wrong by assuming this would be quick and painless. I am excited to work on something a bit more tangible with the next challenge: Flex Panels Image Gallery! I'll see you then!

JavaScript30 - 3 Playing with CSS Variables and JS

VirtualSobriety — Tue, 21 May 2024 15:29:19 +0000

Part 3 of the JavaScript30 was a different pace for me. The first two challenges felt like actual challenges whereas with this lesson I strictly followed along with Wes. I didn't do this lesson alone either as I had @billyjacoby following along via discord. Billy helped me with some syntax and together we discovered something that was a bit alarming. These videos/this course is about 7 years old.

Upon starting the JavaScript30 I had no idea when it was first released but I was excited to work on more JavaScript to continue my own personal journey into coding. After learning this course is a bit outdated I had a hard choice to make...Do I continue through despite this not being as relevant anymore or do I quit now and find another course that is more up to date?

After a debate with Billy and myself I figured I would stick with these lessons and see them through to the end. I need more practice with JavaScript and that's exactly what this is intended for. Also, it has become even more clear to me that Wes is extremely talented as his videos and website surrounding the JavaScript30 seem pretty modern and ahead of the curve for being so "old" by coding standards. This is someone I want to learn more from and that is more obvious to me now than ever before.

Oh right...the actual lesson...

So the lesson itself was pretty cool. Again, I approached this differently and did not stop the video short so I could try and come up with my own answers. There was no googling involved, no chat CPT, nothing else but just watching and coding along. Yeah it took significantly less time for me than the previous lessons but I don't feel as accomplished as I did after the last two and I'm not sure how much knowledge I actually retained this time.

Some of the code Wes was using was nothing I have ever encountered before (which I know is pretty normal and the exact reason I am doing his course). I have never worked with sliders nor did I know how to make them myself. So what this challenge was was to make 2 sliders and one color pallet interactive on the page. The middle of the page had a picture and each input was intended to modify this picture in some way (adding padding, a blur effect and changing the color of the padding). To do this you had to make CSS variables (that were extremely new at the time of recording) which was a concept I had no previous knowledge of but upon reflection make perfect sense to me.

  <div class="controls">
    <label for="spacing">Spacing:</label>
    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

    <label for="blur">Blur:</label>
    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

    <label for="base">Base Color</label>
    <input id="base" type="color" name="base" value="#ffc600">
  </div>

Once realizing what the variables were and how they were to be used the actual challenge was calling them via the sliders with JavaScript. I did learn that some of what Wes did is now somewhat outdated but is just as functional as it was years ago. For example the "this" syntax in JavaScript.

  <script>
    const inputs = document.querySelectorAll('.controls input');

    function handleUpdate() {
      const suffix = this.dataset.sizing || '';
      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
    }

    inputs.forEach(input => input.addEventListener('change', handleUpdate));
    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
  </script>

So the biggest lessons I learned from this lesson are probably any practice is good practice and try to come up with your own solutions to problems if you want to keep growing and improving. Oh and how to put code into these posts without having to use screenshots! Well...thats basically all I've got for this one. Stay tuned for next time where we dive into: Array Cardio Day 1!

JavaScript30 - 2 JS + CSS Clock

VirtualSobriety — Mon, 20 May 2024 15:43:11 +0000

It's been about a week but I have finished the 2nd challenge of Wes Bos's JavaScript30. Realistically I finished this challenge in about 5 hours spread across 3 days. I thoroughly enjoyed this challenge more than the drumkit which is extremely surprising considering how different the levels of interactivity of the finished products are.

Starting the challenge was a bit different than before since it was obvious this challenge included doing a bit of CSS work. Mostly obvious because it was in the title...but also because Wes stated it in the beginning of the video. Unlike the Drumkit, this video began and, after about a minute, it seemed as if there would never be a pause or a safe spot to pause so I could start coding myself. I decided to just stop watching and start the challenge (it wasn't until I was finished and watched the video to completion that I realized he did give a spot to do some coding on your own, but I didn't want to take the risk).

My CSS (top) Wes's CSS (bottom)

After figuring out the CSS of angling the hands relatively quickly, I started on the JS code. I immediately grabbed each clock hand with document.getElementsByClassName and googled how to get the current time/date with Date(). Then I remembered how to set an interval from a previous lesson and had set the console log to log out hours, minutes and seconds respectively. And then I hit a wall.

I realized I had ZERO idea how to actually make the hands move but I knew I had to get them to move X amount of degrees and decided I would work out the math later and focus on just getting them to do anything every second. I spend hours thinking about how I could do this while I was away from my laptop. I googled, I talked to ChatGPT, I phoned a friend...and eventually came up with a function that rotated the second hand (pretty wildly at first).

After getting the first hand to move it was easy to get the others to move as well. I eventually named and colored the hands differently so I could tell them apart (kind of like how you would apply a border to every container while figuring out how to use flexbox). I also realized I was a complete fool by thinking the math would be the easy part of this challenge. I wrote out my own equations, came up with my own answers and basically had to throw out everything I came up with. I looked at ChatGPT's idea for a clock and tried that and it almost worked. I did eventually realize that I was overlooking the fact that the hands initially started at 9 o'clock and I had to factor that into the equation...yeah...

Alright...alright...this is getting wordy...but I DID figure this out my own way. No I didn't make a smooth transition like Wes did in his solution...but GUESS WHAT WES MY CLOCK DOESNT BUG OUT AT THE END OF EVERY MINUTE LIKE YOURS!!! okay...this isn't a competition but I still consider this to be a win for me!

Well...it's time for me to start the next JavaScript30 challenge so I'll see you again for the 3rd iteration of this...journal(?)...blog(?)...whatever this is with: Playing With CSS Variables and JS!

JavaScript30 - 1 JS Drumkit

VirtualSobriety — Tue, 14 May 2024 17:38:43 +0000

About a week ago I finished the Scrimba learn JavaScript course and had a great time doing so. Looking back on it, it did seem a bit hand-holdy but that's probably a good thing for those just starting out. I then had the issue of figuring out what to do next. Instead of going back to the Odin Project or continuing through another scrim I figured I'd switch it up again and dive into Wes Bos's JavaScript30 that was recommended to me.

30 challenges in 30 days, it seems like a lot but the way Wes Bos breaks it down makes it much more manageable. The HTML and CSS seem for the first challenge was already completed and I just had to tackle the JavaScript itself. That was both helpful and intimidating as I was excited to make the website before adding functionality to it but I do understand that is not the point of this course.

At the start of the video introducing the challenge you are given a choice: either code along with the video or pause it and come up with your own solution. I chose the latter in this case as I think it's important to get the answer yourself and then see another way to do it, as its become pretty obvious to me that there's rarely one "correct" answer in these situations.

For a beginner like me this was tough. Almost immediately I realized that I did not have the tools necessary to solve the challenge and that I was going to need some help. After several google searches and some talks with ChatGPT I managed to find some answers but ultimately had to phone a friend to give me some hints along the way.

I know it's "about the journey not the destination" but this journey was exhausting. Which is entirely the point. The lesson I am trying to teach myself is how to find answers in these situations and, in my own sort of way, that's exactly what I did.

It took me about 3 days (roughly 3-5hours of actual work) to finish this challenge and make a functional Drum Kit and I am very proud of this accomplishment. (I currently work 50-60 hours a week and practice coding in my spare time)

After finishing the Drum Kit challenge I did watch the remainder of Wes's video and saw how he solved the enigma of the drum kit and I am happy to say that, although we did it differently, that I was very much so on the right track.

I am excited to jump into the second challenge of the CSS + JS Clock and hope I stick to my guns and try to come up with my own solutions instead of watching along and mindlessly coding. I will also try to keep up with my blog posts to monitor my progress through this course and see how much/if I grow.

Until next time!

SCRIMBA - LEARN JAVASCRIPT - from a beginners perspective

VirtualSobriety — Sun, 05 May 2024 15:44:31 +0000

Just yesterday I completed the learn Javascript course offered on Scrimba. The end of the course encouraged me to write a blogpost to be able to get some of my thoughts out there regarding the course and my progress so far. When I finally reached the last scrim I felt a rush of accomplishment but after a day I feel a bit lost. I figured I would use this blogpost to recap my journey up to this point, and who knows? Maybe I will keep posting about the specifics that brought me here.

For the last 6 months I have slowly been teaching myself the fundamentals of coding and web development. Following a recommendation I started on The Odin Project's - Foundations course. After the extremely encouraging introduction (it seems most free courses start off being insanely motivational) I jumped in head first. Then I set up Ubuntu via a virtual box (!!!) and was introduced to Git / GitHub. Finally, I started learning about HTML, CSS and FlexBox.

I was shocked at how much I was learning at first and how this course was run. I was constantly being directed to different YouTube videos, web-based tutorials/articles and eventually SCRIMBA. The entire concept of SCRIMBA blew my freakin mind. A video that you could pause and literally rewrite and interact with code in real time? Even now I have almost no idea how they pulled this off but I was instantly hooked.

I felt like I was cheating myself by not continuing through The Odin Project's - JavaScript Basics part of their foundations course but after working with SCRIMBA, The Odin Project just felt so dry. I was overwhelmed with constant information from The Odin Project where-as with SCRIMBA I was learning by doing which is my forte.

Everything about the SCRIMBA course was a win for me, plus the "teachers" were helpful, constantly encouraging and entertaining. Big shout out to Per Harold Borgen! I don't even have to look up his name at this point based on how many time's I saw it through examples in the course. But anyway lets move on to the projects and lessons themselves.

It started with a simple "passenger counter", which was legit just a button that would increment by 1 when pressed, to a VERY basic Blackjack game, which honestly did leave a lot to be desired, and eventually lead to a "Shopping List" - mobile app. Throughout this course I was more focused on the creation of the apps themselves that I didn't realize how much I was actually learning! I can now actually pretty accurately tell you what a For Loop is and what it can be used for. I understand functions and objects and the difference between Let and Const variables. I can make the basic skeleton to a working calculator from scratch just for shits and giggles and I have!

That being said, there are still an embarrassing number of things I just learned in the final part of this course that I don't have a good grasp on yet. How importing and exporting works, how to tell what are the actual functions in any file you are importing from, how to actually work with a database, etc... And although I don't have a great idea of what these things are or how they work, I am pretty darn confident that I will have a better understanding soon. If this whole process has taught me anything it's that it just takes practice.

I do realize that I haven't really touched on the SCRIMBA course itself as much as would be implied by the title of this post...but hey, its my first post and I'm excited to get some thoughts out there for the first time. I really do hope I stick with posting on here so I can see my progress from this point on, plus I am a bit lacking on the social aspect of learning coding as well as being part of the larger community.

If someone was to suggest a year ago that I would be running Ubuntu via a virtual box on my outdated laptop so I can properly start coding I wouldn't have believed them. Now I have my first "app" on my phones home screen and I am still in disbelief that I made it to this point. Now I am looking forward to making something silly for myself and then tackling TypeScript and REACT after that. Please feel free to reach out with any questions about my time spent with The Odin Project, SCRIMBA or coding in general!