TIL-20220801

회고

• d3.js 부분도 보고 있는데, 제대로 머리에 들어간게 없어서 TIL에는 기재 안함

  • d3.js가 단순 visualization libarary는 아니다. 지롤같은 JS생태계를 10년동안 버틴 산전수전 다겪은 library이기 때문에 많은 변화와 철학?(mental model)이 녹아있다. 그리고 탄탄한 JavaScript 기본지식도 필수 적이다.
    • asynchornous programming
    • promise / async & await
    • generator / iterator
    • yield 등등....
  • Bostock 형님은 정말 대단...

• 내일은 Crafting Interpreters 꼭 하자.

CSS

• Using CSS transitions
  • (Overview) CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
  • (continued) Animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser.
  • (continued) CSS transitions let you decide which properties to animate (by listing them explicitly), when the animation will start (by setting a duration), and how the transition will run (by defining a timing function, e.g. linearly or quick at the beginning, slow at the end).
  • Table of Contnets
    • Which CSS properties can be transitioned?
    • Defining transitions
    • Examples
      • Simple example
      • Multiple animated properties example
      • When property value lists are of different lengths
      • Using transitions when highlighting menus
    • JavaScript examples
      • Using transitions to make JavaScript functionality smooth
      • Detecting the start and end completion of a transition
    • Specifications

JavaScript

• funcion*
  • 그렇게 낯선 개념은 아닌데, 사용을 잘 안하다보니 빡세게 느껴진다...
  • (Overview) The function* declaration (function keyword followed by an asterisk) defines a generator function, which returns a Generator object.
  • (Description)
    • Generators are functions that can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances.
    • Generators in JavaScript — especially when combined with Promises — are a very powerful tool for asynchronous programming as they mitigate — if not entirely eliminate -- the problems with callbacks, such as Callback Hell and Inversion of Control. However, an even simpler solution to these problems can be achieved with async functions.
    • Calling a generator function does not execute its body immediately; an iterator object for the function is returned instead. When the iterator's next() method is called, the generator function's body is executed until the first yield expression, which specifies the value to be returned from the iterator or, with yield*, delegates to another generator function. The next() method returns an object with a value property containing the yielded value and a done property which indicates whether the generator has yielded its last value, as a boolean. Calling the next() method with an argument will resume the generator function execution, replacing the yield expression where an execution was paused with the argument from next().
    • A return statement in a generator, when executed, will make the generator finish (i.e. the done property of the object returned by it will be set to true). If a value is returned, it will be set as the value property of the object returned by the generator. Much like a return statement, an error thrown inside the generator will make the generator finished — unless caught within the generator's body. When a generator is finished, subsequent next() calls will not execute any of that generator's code, they will just return an object of this form: {value: undefined, done: true}.