miayam.github.io

Day 30: JavaScript Challenge

Thu, 28 Sep 2017 00:00:00 +0000

After 4 months trying to get into the DOM and Web API (without libraries, frameworks, or tooling), I finally finish 30 day JavaScript challenge! It sounds easy, but you have to try it yourself. It takes a lot of hard work!

What am I going to do now? I am going to learn React, I mean React’s source code. I want to know how it works, not just how to use it smartly like those smart people out there. It must be hard.

Why I choose React? Because Reddit use it in production and I am a big fan of Reddit. If Reddit, Mozilla, or Wikipedia happened to use Angular in production, I will learn and use Angular instead. Just as simple as that. I am not fascinated by benchmark, comparison, speed, and whatnot. I am not Software Engineer and I don’t make any decisions. If the team decided to use whatever technologies available, I won’t mind it as long as the features delivered and the customers happy. The only thing that makes human happy is usefulness, so I intend to be useful, always! By the way, here’s the last demo.

Here’s how I finish the challenge. I will comment on it if it is somewhat necessary.

Markup

  <h1>Whack-a-mole! <span class="score">0</span></h1>

  <div class="game">
    <div class="hole hole1">
      <div class="mole"></div>
    </div>
    <div class="hole hole2">
      <div class="mole"></div>
    </div>
    <div class="hole hole3">
      <div class="mole"></div>
    </div>
    <div class="hole hole4">
      <div class="mole"></div>
    </div>
    <div class="hole hole5">
      <div class="mole"></div>
    </div>
    <div class="hole hole6">
      <div class="mole"></div>
    </div>
  </div>
  <div>
    <button class="playAgain" style="display: none; margin: 20px auto; height: 50px; font-size: medium">
      Play again!
    </button>
  </div>

JavaScript

I summarise 30 day JavaScript challenge on a single page. Here it is.

Day 29: JavaScript Challenge

Wed, 27 Sep 2017 00:00:00 +0000

Making a custom timer for procrastinator like me is quite fun and useful. What an interesting challenge! Here’s the demo.

I can only show the markup and JavaScript code here. Nothing to explain.

Markup

  <body>
    <div class="timer">
      <div class="timer__controls">
        <button data-time="20" class="timer__button">20 Secs</button>
        <button data-time="300" class="timer__button">Work 5</button>
        <button data-time="900" class="timer__button">Quick 15</button>
        <button data-time="1200" class="timer__button">Snack 20</button>
        <button data-time="3600" class="timer__button">Lunch Break</button>
        <form name="customForm" id="custom">
          <input type="text" name="minutes" placeholder="Enter Minutes">
        </form>
      </div>
      <div class="display">
        <h1 class="display__time-left"></h1>
        <p class="display__end-time"></p>
      </div>
    </div>

    <script src="scripts.js"></script>
  </body>

JavaScript

Day 28: JavaScript Challenge

Tue, 26 Sep 2017 00:00:00 +0000

Speeding up and down the video by moving up and down that fancy slider back and forth… That sounds boring.

I think day 11 JavaScript challenge is more challenging than this, but who am I to complain? Just finish the challenge and move on the next challenge. I am not in the mood of explaining. Here’s the demo.

I don’t think we can understand how it works by simply reading the snippet below…

I really miss ちえさせれな.

Day 27: JavaScript Challenge

Tue, 26 Sep 2017 00:00:00 +0000

Scrolling that fancy carousel by grabbing and moving it back and forth… That sounds boring.

At first, I really wanted to skip ahead and move on to the next challenge–I was terrified by CSS. After hearing ちえさせれな said ‘yes’ to my invitation, I got up and read that CSS snippet with hustle to fully understand how it works. Sometime affection really affects people. And then I found a great resource about CSS 3D transforms! Kudos to David DeSandro for his clear explanation!

I am not willing to bother myself repeating what the author says. Let him explain himself. Here’s the demo.

By the way, I am not concerned about how I finish the challenge, I am just concerned about ちえさせれな’s cute ponytail…

Day 26: JavaScript Challenge

Mon, 18 Sep 2017 00:00:00 +0000

This is improvement for day 22 JavaScript challenge (copying Stripe feature). It’s not so bad.

I’ll say that again, it’s superfluous for a web page to have this kind of feature. Craig Newmark will look away and insult us in his mind! Well, if it was for fun, I wouldn’t attach too much importance to his thinking. Here we are completely copying Stripe new web page! Here’s the demo!

I’ve got nothing to say, but it’s really fun. Here’s my solution.

That’s it for today.

Day 25: JavaScript Challenge

Sat, 16 Sep 2017 00:00:00 +0000

It’s very important for the one who build user-facing features on top of DOM and Web API to understand event propagation, bubbling, and capturing. What the heck are those terms about? Here’s the demo to help explain how it works.

Event propagation

Event propagation is a process of handling multiple event listeners triggered by a single event because of both event listeners on nesting and nested elements listen to the same event type (‘click’ for example). Let’s say we attach event listener to both parent and child elements:

  <nav onclick="alert('I like you ちえさ せれな')" >
    <button class="clickable">Click me~</button>
  </nav>

  <script>
    function askHerOut() {
      console.log("I would love to ask ちえさ せれな out on a date");
    }

    var button = document.querySelector('.clickable');
    button.addEventListener('click', askHerOut);
  </script>

1. Event Bubbling

If we click on inner element (button), the engine will run a function that handles event on current target element (askHerOut) and soon after it was invoked, the built-in alert function that handles event on its parent element will run eventually even if we don’t actually click on it. It starts from within and then bubbles up until it reaches heaven (kidding).

2. Event Capturing

What if we reverse that process? What will happen? Instead of bubbling, the engine is capturing listeners for nesting elements and then sink down to elements at lower levels. In other words, the handler that listens to event on outermost target element—alert('I like you ちえさせれな')—will run first and then sink down to inner nested elements—askHerOut(), on and on, until it reaches the inner core of the earth (kidding).

  <nav onclick="alert('I like you ちえさ せれな')" >
    <button class="clickable">Click me~</button>
  </nav>

  <script>
    function askHerOut() {
      console.log("I would love to ask ちえさ せれな out on a date");
    }

    var button = document.querySelector('.clickable');
    button.addEventListener('click', askHerOut, { capture: true });
  </script>

3. One Time Event Listener

Sometime we want to click a button, see it functions correctly, and then disable it. How can we do that?

  <nav onclick="alert('I like you ちえさ せれな')" >
    <button class="clickable">Click me~</button>
  </nav>

  <script>
    function askHerOut() {
      console.log("I would love to ask ちえさ せれな out on a date");
    }

    var button = document.querySelector('.clickable');
    button.addEventListener('click', askHerOut, { once: true });
  </script>

It’s only a distillation that barely covers the whole nitty-gritty of event propagation. I recommend you to read these articles:

Well, both event capturing and bubbling are expensive, what if we attach event listener to a thousand elements nesting to each other? If we click on one of them, it will bubble up or sink down to upper or lower levels. Don’t we only intend to click on a single element and see it works correctly? Event delegation is the solution! I blogged about that months ago.

That’s it for today. I wonder how is it like to be in relationship? I always think having a girlfriend is a tremendous waste of time, but I want to taste it for a bit. Just for a week and see what happens.

Day 24: JavaScript Challenge

Sat, 16 Sep 2017 00:00:00 +0000

It’s about sticky navigation bar most modern web pages bother to have. Here’s the demo.

First thing first, we have to determine the distance of navigation bar relative to its parent (html tag). After that, stick the navigation bar at the point where the top edge of the current viewport (an area to display the web content in the browser) touches or passes through the top of navigation bar. In other words, the gap between the top edge of the page and navigation bar has been passed through (hidden because we scroll down the scroll bar).

  var nav = document.getElementById('main');
  var gapHeightBettweenParentAndNav = nav.offsetTop;

  function fixNav() {
    if (window.scrollY >= gapHeightBettweenParentAndNav) {
      // Stick the damn navigation.
      nav.classList.add('nav--fixed');

      // And so on...
    }
  }

  window.addEventListener('scroll', fixNav);

The only thing left is adding approriate CSS to style the sticky bar. Here’s how I do that.

  .nav--fixed {
    position: fixed;
    box-shadow: 0 5px rgba(0, 0, 0, 0.1);
  }

Here’s the markup.

  <nav id="main">
    <ul>
      <li class="logo"><a href="#">LOST.</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Images</a></li>
      <li><a href="#">Locations</a></li>
      <li><a href="#">Maps</a></li>
    </ul>
  </nav>

It’s very common to see a logo slide in after the top edge of the current viewport touched or passed through the navigation bar. How about adding more useless feature to our existing code?

  (function (window, undefined) {
    var nav = document.getElementById('main');
    var gapHeightBettweenParentAndNav = nav.offsetTop;
    var logo = document.querySelector('.logo');
    var siteWrap = document.querySelector('.site-wrap');

    function fixNav() {
      if (window.scrollY >= gapHeightBettweenParentAndNav) {
        nav.classList.add('nav--fixed');
        logo.classList.add('logo--shown');
        siteWrap.classList.add('site-wrap--bigger');

        // Fill the area the navigation bar left after its potition
        // being fixed relative to the `viewport`.
        document.body.style.paddingTop = `${nav.offsetHeight}px`;
      } else {
        nav.classList.remove('nav--fixed');
        logo.classList.remove('logo--shown');
        siteWrap.classList.remove('site-wrap--bigger');
        document.body.style.paddingTop = 0;
      }
    }

    window.addEventListener('scroll', fixNav);
  })(window)

Be careful! Once you decide to fix the block-level element’s position relative to the viewport, the area that element previously took up before being fixed will vanish. We have to add padding to its parent element, so the place where the navigation bar left would be filled appropriately.

That’s it for today. I think I kind of miss メリーメディオーアティ.

Day 23: JavaScript Challenge

Sun, 03 Sep 2017 00:00:00 +0000

I’ve done the similar challenge in day 20 before (Hawking’s voice synthesizer), but it’s more challenging (not really).

I am too tired to explain the challange. Perhaps, the only thing that’s worth-explaining is this part:

  var DMZ = Object.create(null)

  // Adding arguments to callback... Sounds magical!
  whateverDOM.addEventListener('click', callback.bind(DMZ, arg1, arg2, arg3));

I’ve read this binding mechanism from This & Prototype of YDKJS (You Don’t Know JavaScript) book series and put it into action here.

Passing empty object (DMZ) to the first parameter of Function.prototype.bind and then passing any values to the rest of parameters is to set default arguments passed to callback and have it ignore the this binding. Consequently, after it was applied, the callback would be bound to empty object that has no link to [[Prototype]] chain and arguments are set without having to invoke the callback, something like callback(arg1, arg2);.

Here’s the demo and my half-assed solution below.

Day 22: JavaScript Challenge

Sun, 27 Aug 2017 00:00:00 +0000

I don’t think following along and highlighting the link while hovering over it is important.

I would say it’s superfluous for a web page to have this kind of feature. Craig Newmark will look away and insult us in his mind! Well, if it was for fun, I wouldn’t attach too much importance to his thinking. Here we are copying Stripe new web page!

If we hover over link on Stripe, we can see “mega menu” follow along the link without concealing or popping.

It’s a nice thing to have, right? However, without this challenge, I mightn’t have known the way we get element’s size and its position relative to the viewport via DOM element methods. By the way, viewport is just an area to display the web content in the browser. No wonder that we got smaller viewport if we open the web console.

Each DOM element has access to those properties. Here’s how we do that:

  var myHeart = document.querySelector('[data-heart]');
  var myDomRect = myHeart.getBoundingClientRect();

  console.log(myDomRect);

  // For more about it, visit http://mzl.la/2ggxdcl

To get the next challenge right, we only make it resembles small portion of Stripe’s feature and take that cute “mega menu” aside. Cuteness will find its way.

Alright then, here’s the demo and my solution below.

That’s it for today.

I was a bit nervous when ちえさせれな gets closer to me. That was probably the last time I felt her cuteness. Well, I have to understand that we just move in different circle. I’ve already given up since I confessed my feeling via Telegram. What a coward! Well, I’ve said that and I am proud of that.

Day 21: JavaScript Challenge

Fri, 25 Aug 2017 00:00:00 +0000

I don’t have Mac, so doing the actual challenge might be frustrating. However, playing (copy-pasting) with Google Map API doesn’t leave bad taste in my mouth.

The challenge requires us to install simulator that only runs on Mac computer. I refuse to buy expensive Mac computer to engage in this challenge. The challenge itself is quite simple, it’s about employing geolocation API to manipulate compass-like image, so it will rotate in accord to device’s changing position, speed, and heading. I replace the challenge with manipulating Google Map using that same geolocation API.

Here’s the demo and my stupid code below.