CSS filter generator to convert from black to target hex color

Jesse — Fri, 01 Nov 2019 04:44:31 +0000

Event Propagation in Three Parts!

Jesse — Thu, 31 Oct 2019 01:07:01 +0000

Part 1: Event Bubbling:

So when it comes to understanding how the EventListener object works in conjunction with event propagation, there are three basics that need to be considered:

Event Bubbling
Event Capture
Once … 🤯

Event propagation can be a little tricky, especially if you haven’t solidified the terminology, or if you’re still struggling with understanding the DOM, or maybe just because event propagation sounds scary and is a little tricky in general. Either way, we got this! Fears aside, I’m going to break event propagation down very simplistically, just like I learned 💯.

So,

1.Let’s say you have this html:

  <div class="one">
    <div class="two">
      <div class="three">
      </div>
    </div>
  </div>

2.Then you add this javascript:

  <script>
    const divs = document.querySelectorAll("div");
    function logText(e) {
      console.log(this.classList.value, this);
    }
    divs.forEach(div => div.addEventListener('click', logText));
  </script>

3.And you decide to click the innermost div element (the one that’s most nested).

Query:

What class lists do you think will be logged to the console?
(Inserts Jeopardy music .. and slowly brings up the volume 🎶)

Solution:

Wait.. three, two, one? ... Nope, hold up… 🛑 ✋🏼! What sorcery is this?

No sorcery I promise (still waiting on my Hogwarts letter🙏), this is simply an example of event bubbling.

Event Bubbling In a Nutshell:

1.The target element is located on the DOM.
2.The DOM has elements that are ‘listening’ for a trigger - something to shout "HEY I DID SOMETHING!".
3.Your trigger is ‘heard’ by an eventListener / eventHandler - ‘WHAT CHU SAY????”
4.Your listener/handler will perform the logic that’s either prescript or coded by you :D!

… But wait… what if your trigger is never heard… Oh no!

Now ask yourself:

“If an event fires in the middle of the DOM and no listener is around to handle it, does it actually execute at all?”

Answer: YUS!

I couldn’t end the above question as eloquently as preferred, however, the answer is still yes; the trigger still fires and will propagate up - bubble upwards just like an actual bubble - until it is either handled or reaches the topmost layer of the DOM (your window)!

So, in the above example, you clicked the innermost div element, it was located within the DOM, the click event was fired and the logText() function was executed. However, because of event bubbling the click event continued to propagate upwards until it reaches the upper most parent element.

Want to see it yourself?

1.Add this line to your javascript: document.body.addEventListener(‘click’, logText);
2.Refresh your page
3.Click a <div> element
4.Check out your browser’s javascript console 👀👀👀👀, which should look something like this:

P.S: To Open Your Browser’s JS Console:

- **Chrome**: Go to **View > Developer > JavaScript Console**
- **Safari**: Go to **Develop > Show JavaScript Console**
    - NOTE:You must have developer tools enabled via **Safari > Preferences > Advanced > Select the last checkbox at the bottom).**
- **Firefox**: Don’t use it much… not a hater, just like chrome dev tools. Although Firefox’s css grid tool is pretty schweet 😍. But for now, just do a quick google search.

Quick Visual to Help (hopefully) Picture the Process:

Note that the capture phase is mentioned here, which is very, very, verrrrry similar to the bubble phase, but with one major difference:

Yep, you probably guessed it already (look at you go O_O!!, I’m so proud <3).

The direction is now REVERSED, so instead of bottom-to-top event bubbling (propagation), you now have top-to-bottom event capture.

p.s
If your guess wasn’t that the direction is reversed, then no worries! This stuff can get a bit confusing and I probably could have described it a little (or a lot) better. Stop sweating the small stuff, because you still made me proud for making it this far :)!

- More on this later :).. However, take some time to digest what you’ve learned so far.  But, before you go, I challenge you Try to think of some examples of both event propagation and event capture. 
- Again, don’t sweat the small stuff,~ if you can’t think of any examples right now, then take some time and come back, perhaps do a little searching, or try imagining something that, although might not be code related, could still fit the schematic/process described above :)!
- **HAVE FUN WITH IT!**

TIL a bit of KONAMI

Jesse — Thu, 07 Dec 2017 06:25:00 +0000

What I Learned

Today I learned that there is a term called 'konami' and what it means in terms of web development. In simplistic terms, remember when you use to type a secret code on your gaming console or keypad (up, down, up, down, left, right, left)? Well, picture the same concept, except while on a webpage! Simplistically, that's kind of what konami is! However, in our case, it's us that get to decide what these little easter eggs can do.

Want to know a popular website that has a konami code implemented in its source code? Take a guess ..... BUZZFEED! Don't believe me, well give it a try.

Go to Buzzfeed
Let the page load and then type the following code on your keyboard: up, up, down, down, left, right, left, right, b, a, enter
Be amazed!

Since first learning the concept, Buzzfeed’s konami has changed. At one point, their konami would run a function that replaced all words on the page with "Wilkie!" (no clue as to who Wilkie is or why Wilkie was given the honor), but today a sparkle/confetti effect was looped in the background.

Anyways, that's what I learned today and I'm interested to hear what effects you guys can find and/or what functions your konami codes produce. Let me know what you think or if you find some that you would like to share :).

And why exactly is this interesting?

It's something I would not have guessed developers would still implement.
It's clever and playful, which is always nice.
The code was a little bit more challenging than you'd initially think.

My Example

DEV Community: Jesse