add fps counter

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
       'fetch',
       'Object.assign',
       'requestAnimationFrame',
+      'performance.now',
     ],
   },
 };

README.md

@@ -497,7 +497,7 @@ Implementing FLIP animations without a large refactoring was the biggest
 challenge of this case study, especially in combination with drag & drop.
 After days of work I was able to implement the algorithm in isolation and
 coordinate it with other concerns at the application's root level.
-The `useCapture` mode of `addEventListener` was proven to be useful
+The `useCapture` mode of `addEventListener` proved to be very useful
 in this case.
 
 Reference:

public/index.html

@@ -23,11 +23,12 @@
 
     <script
       nomodule
-      src="https://polyfill.io/v3/polyfill.min.js?features=Set%2CMap%2CObject.assign%2Cfetch%2CrequestAnimationFrame%2CNodeList.prototype.forEach"
+      src="https://polyfill.io/v3/polyfill.min.js?features=Set%2CMap%2CObject.assign%2Cfetch%2CrequestAnimationFrame%2CNodeList.prototype.forEach%2Cperformance.now"
     ></script>
     <script src="scripts/AppCollapsible.js"></script>
     <script src="scripts/AppDraggable.js"></script>
     <script src="scripts/AppFlip.js"></script>
+    <script src="scripts/AppFps.js"></script>
     <script src="scripts/AppIcon.js"></script>
     <script src="scripts/AppLateBlur.js"></script>
     <script src="scripts/AppSortable.js"></script>

public/scripts/AppFps.js

@@ -0,0 +1,39 @@
+/* global VT */
+window.VT = window.VT || {};
+
+VT.AppFps = function (el) {
+  var times = [];
+
+  tick();
+
+  function tick() {
+    requestAnimationFrame(tick);
+
+    times.push(performance.now());
+
+    if (times.length < 60) return;
+
+    var min = Infinity;
+    var max = 0;
+    var sum = 0;
+
+    for (var i = 1; i < 60; ++i) {
+      var delta = times[i] - times[i - 1];
+      min = Math.min(min, delta);
+      max = Math.max(max, delta);
+      sum += delta;
+    }
+
+    var fps = (60 / sum) * 1000;
+
+    el.innerText =
+      fps.toFixed(0) +
+      ' fps (' +
+      min.toFixed(0) +
+      ' ms - ' +
+      max.toFixed(0) +
+      ' ms)';
+
+    times = [];
+  }
+};

public/scripts/TodoApp.js

@@ -12,6 +12,7 @@ VT.TodoApp = function (el) {
   el.innerHTML = [
     '<header class="app-header">',
     '  <h1 class="title">VANILLA TODO</h1>',
+    '  <p class="app-fps"></p>',
     '</header>',
     '<div class="todo-frame -days"></div>',
     '<div class="app-collapsible">',
@@ -39,6 +40,7 @@ VT.TodoApp = function (el) {
 
   el.querySelectorAll('.app-collapsible').forEach(VT.AppCollapsible);
   el.querySelectorAll('.app-icon').forEach(VT.AppIcon);
+  el.querySelectorAll('.app-fps').forEach(VT.AppFps);
 
   VT.TodoFrameDays(el.querySelector('.todo-frame.-days'));
   VT.TodoFrameCustom(el.querySelector('.todo-frame.-custom'));

public/scripts/TodoStore.js

@@ -168,6 +168,7 @@ VT.TodoStore = function (el) {
 
   function load() {
     if (!localStorage || !localStorage.todo) {
+      dispatch(state);
       return;
     }
 

public/styles/app-header.css

@@ -1,9 +1,20 @@
 .app-header {
   background: #249;
-  padding: 0.5em 1em;
+  padding: 10px 20px;
 }
 
 .app-header > .title {
   color: #fff;
   font-size: 1em;
+  margin: 0;
+}
+
+.app-header > .app-fps {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  margin: 0;
+  font-size: 0.8em;
+  line-height: 1.5em;
+  color: #fff;
 }