diff --git a/decaffinate.md b/decaffinate.md
new file mode 100644
index 000000000..23938e281
--- /dev/null
+++ b/decaffinate.md
@@ -0,0 +1,6 @@
+# migration from coffeescript to modern js/ts
+
+## TODO
+
+- look for TODO comments
+- find alternative for `<% if (`
diff --git a/src/General/Header.coffee b/src/General/Header.coffee
index 7da629693..5aab703b7 100644
--- a/src/General/Header.coffee
+++ b/src/General/Header.coffee
@@ -385,7 +385,8 @@ Header =
     Header.previousOffset = offsetY
 
   setBarPosition: (bottom) ->
-    Header.barPositionToggler?.checked = bottom
+    # TODO check if barPositionToggler exists
+    Header.barPositionToggler.checked = bottom
     $.event 'CloseMenu'
     args = if bottom then [
       'bottom-header'
diff --git a/src/General/Test.coffee b/src/General/Test.coffee
index 1d9ef4cfa..93e0a86a7 100644
--- a/src/General/Test.coffee
+++ b/src/General/Test.coffee
@@ -1,4 +1,4 @@
-<% if (readJSON('/.tests_enabled')) { %>
+# <% if (readJSON('/.tests_enabled')) { %>
 Test =
   init: ->
     return unless g.SITE.software is 'yotsuba' and g.VIEW in ['index', 'thread']
@@ -169,4 +169,4 @@ Test =
       Test.testAll()
       e.preventDefault()
       e.stopPropagation()
-<% } %>
+# <% } %>
diff --git a/src/Linkification/Linkify.coffee b/src/Linkification/Linkify.coffee
index 8c2ffa4d1..1a07ba4b7 100644
--- a/src/Linkification/Linkify.coffee
+++ b/src/Linkification/Linkify.coffee
@@ -71,10 +71,10 @@ Linkify =
 
         if Linkify.regString.test word
           links.push Linkify.makeRange node, endNode, index, length
-          <% if (readJSON('/.tests_enabled')) { %>
-          Test.assert ->
-            word is links[links.length-1].toString()
-          <% } %>
+          # <% if (readJSON('/.tests_enabled')) { %>
+          # Test.assert ->
+          #   word is links[links.length-1].toString()
+          # <% } %>
 
         break unless test.lastIndex and node is endNode
 
diff --git a/src/Monitoring/Favicon.coffee b/src/Monitoring/Favicon.coffee
index 2b5e97605..d2ec34f91 100644
--- a/src/Monitoring/Favicon.coffee
+++ b/src/Monitoring/Favicon.coffee
@@ -16,12 +16,12 @@ import Mayhem_unreadSFW from './Favicon/Mayhem.unreadSFW.png';
 import Mayhem_unreadSFWY from './Favicon/Mayhem.unreadSFWY.png';
 import Mayhem_unreadNSFW from './Favicon/Mayhem.unreadNSFW.png';
 import Mayhem_unreadNSFWY from './Favicon/Mayhem.unreadNSFWY.png';
-import 4chanJS_unreadDead from './Favicon/4chanJS.unreadDead.png';
-import 4chanJS_unreadDeadY from './Favicon/4chanJS.unreadDeadY.png';
-import 4chanJS_unreadSFW from './Favicon/4chanJS.unreadSFW.png';
-import 4chanJS_unreadSFWY from './Favicon/4chanJS.unreadSFWY.png';
-import 4chanJS_unreadNSFW from './Favicon/4chanJS.unreadNSFW.png';
-import 4chanJS_unreadNSFWY from './Favicon/4chanJS.unreadNSFWY.png';
+import fourChanJS_unreadDead from './Favicon/4chanJS.unreadDead.png';
+import fourChanJS_unreadDeadY from './Favicon/4chanJS.unreadDeadY.png';
+import fourChanJS_unreadSFW from './Favicon/4chanJS.unreadSFW.png';
+import fourChanJS_unreadSFWY from './Favicon/4chanJS.unreadSFWY.png';
+import fourChanJS_unreadNSFW from './Favicon/4chanJS.unreadNSFW.png';
+import fourChanJS_unreadNSFWY from './Favicon/4chanJS.unreadNSFWY.png';
 import Original_unreadDead from './Favicon/Original.unreadDead.png';
 import Original_unreadDeadY from './Favicon/Original.unreadDeadY.png';
 import Original_unreadSFW from './Favicon/Original.unreadSFW.png';
@@ -85,12 +85,12 @@ Favicon =
         Mayhem_unreadNSFWY,
       ]
       '4chanJS': [
-        4chanJS_unreadDead,
-        4chanJS_unreadDeadY,
-        4chanJS_unreadSFW,
-        4chanJS_unreadSFWY,
-        4chanJS_unreadNSFW,
-        4chanJS_unreadNSFWY,
+        fourChanJS_unreadDead,
+        fourChanJS_unreadDeadY,
+        fourChanJS_unreadSFW,
+        fourChanJS_unreadSFWY,
+        fourChanJS_unreadNSFW,
+        fourChanJS_unreadNSFWY,
       ]
       Original: [
         Original_unreadDead,
diff --git a/src/classes/Post.coffee b/src/classes/Post.coffee
index 8551aa718..0cc2bd07f 100644
--- a/src/classes/Post.coffee
+++ b/src/classes/Post.coffee
@@ -2,9 +2,9 @@ class Post
   toString: -> @ID
 
   constructor: (root, @thread, @board, flags={}) ->
-    <% if (readJSON('/.tests_enabled')) { %>
-    @normalizedOriginal = Test.normalize root
-    <% } %>
+    # <% if (readJSON('/.tests_enabled')) { %>
+    # @normalizedOriginal = Test.normalize root
+    # <% } %>
 
     $.extend @, flags
     @ID       = +root.id.match(/\d*$/)[0]
@@ -57,9 +57,9 @@ class Post
     @isHidden = false
 
     @clones = []
-    <% if (readJSON('/.tests_enabled')) { %>
-    return if @forBuildTest
-    <% } %>
+    # <% if (readJSON('/.tests_enabled')) { %>
+    # return if @forBuildTest
+    # <% } %>
     if g.posts.get(@fullID)
       @isRebuilt = true
       @clones = g.posts.get(@fullID).clones
diff --git a/src/main/Main.coffee b/src/main/Main.coffee
index 9065d0984..d9f232e43 100644
--- a/src/main/Main.coffee
+++ b/src/main/Main.coffee
@@ -130,8 +130,9 @@ Main =
     items.previousversion = changes.previousversion = g.VERSION
     $.set changes, ->
       if items['Show Updated Notifications'] ? true
+        # TODO meta
         el = $.el 'span',
-          `<%= html(meta.name + ' has been updated to <a href="' + meta.changelog + '" target="_blank">version ${g.VERSION}</a>.') %>`
+          `{ innerHTML: 'meta.name has been updated to <a href="' + meta.changelog + '" target="_blank">version ${g.VERSION}</a>.'}`
         new Notice 'info', el, 15
 
   parseURL: (site=g.SITE, url=location) ->
@@ -535,7 +536,7 @@ Main =
         $.addClass doc, 'tainted'
         if Conf['Disable Native Extension'] and !Main.isFirstRun
           msg = $.el 'div',
-            `<%= html('Failed to disable the native extension. You may need to <a href="' + meta.faq + '#blocking-native-extension" target="_blank">block it</a>.') %>`
+            `{innerHTML: 'Failed to disable the native extension. You may need to <a href="' + meta.faq + '#blocking-native-extension" target="_blank">block it</a>.'}`
           new Notice 'error', msg
 
     unless errors instanceof Array
@@ -579,7 +580,8 @@ Main =
     title += " (+#{errors.length - 1} other errors)" if errors.length > 1
     details = ''
     addDetails = (text) ->
-      unless encodeURIComponent(title + details + text + '\n').length > `<%= meta.newIssueMaxLength - meta.newIssue.replace(/%(title|details)/, '').length %>`
+      # TODO meta
+      unless encodeURIComponent(title + details + text + '\n').length > `"meta.newIssueMaxLength - meta.newIssue.replace(/%(title|details)/, '')".length`
         details += text + '\n'
     addDetails """
       [Please describe the steps needed to reproduce this error.]
@@ -704,6 +706,6 @@ Main =
     ['Mod Contact Links',         ModContact]
   ]
 
-<% if (readJSON('/.tests_enabled')) { %>
-Main.features.push ['Build Test', Test]
-<% } %>
+# <% if (readJSON('/.tests_enabled')) { %>
+# Main.features.push ['Build Test', Test]
+# <% } %>
diff --git a/src/platform/$.coffee b/src/platform/$.coffee
index 7c2c4646e..b8ddeb38f 100644
--- a/src/platform/$.coffee
+++ b/src/platform/$.coffee
@@ -77,11 +77,11 @@ $.ajax = do ->
     options.type or= options.form and 'post' or 'get'
     # XXX https://forums.lanik.us/viewtopic.php?f=64&t=24173&p=78310
     url = url.replace /^((?:https?:)?\/\/(?:\w+\.)?(?:4chan|4channel|4cdn)\.org)\/adv\//, '$1//adv/'
-    <% if (type === 'crx') { %>
-    # XXX https://bugs.chromium.org/p/chromium/issues/detail?id=920638
-    if Conf['Work around CORB Bug'] and g.SITE.software is 'yotsuba' and !options.testCORB and FormData.prototype.entries
-      return $.ajaxPage url, options
-    <% } %>
+    # <% if (type === 'crx') { %>
+    # # XXX https://bugs.chromium.org/p/chromium/issues/detail?id=920638
+    # if Conf['Work around CORB Bug'] and g.SITE.software is 'yotsuba' and !options.testCORB and FormData.prototype.entries
+    #   return $.ajaxPage url, options
+    # <% } %>
     {onloadend, timeout, responseType, withCredentials, type, onprogress, form, headers} = options
     r = new pageXHR()
     try
@@ -92,12 +92,12 @@ $.ajax = do ->
       $.extend r.upload, {onprogress}
       # connection error or content blocker
       $.on r, 'error', -> (c.warn "4chan X failed to load: #{url}" unless r.status)
-      <% if (type === 'crx') { %>
-      # XXX https://bugs.chromium.org/p/chromium/issues/detail?id=920638
-      $.on r, 'load', ->
-        if !Conf['Work around CORB Bug'] and r.readyState is 4 and r.status is 200 and r.statusText is '' and r.response is null
-          $.set 'Work around CORB Bug', (Conf['Work around CORB Bug'] = Date.now())
-      <% } %>
+      # <% if (type === 'crx') { %>
+      # # XXX https://bugs.chromium.org/p/chromium/issues/detail?id=920638
+      # $.on r, 'load', ->
+      #   if !Conf['Work around CORB Bug'] and r.readyState is 4 and r.status is 200 and r.statusText is '' and r.response is null
+      #     $.set 'Work around CORB Bug', (Conf['Work around CORB Bug'] = Date.now())
+      # <% } %>
       r.send form
     catch err
       # XXX Some content blockers in Firefox (e.g. Adblock Plus and NoScript) throw an exception instead of simulating a connection error.
@@ -107,9 +107,9 @@ $.ajax = do ->
       $.queueTask $.event, 'loadend', null, r
     r
 
-<% if (type === 'crx') { %>
-# XXX https://bugs.chromium.org/p/chromium/issues/detail?id=920638
-do ->
+# <% if (type === 'crx') { %>
+# # XXX https://bugs.chromium.org/p/chromium/issues/detail?id=920638
+# do ->
   requestID = 0
   requests = $.dict()
 
@@ -179,7 +179,7 @@ do ->
     form = Array.from(form.entries()) if form
     $.event '4chanXAjax', {url, timeout, responseType, withCredentials, type, onprogress: !!onprogress, form, headers, id}
     req
-<% } %>
+# <% } %>
 
 # Status Code 304: Not modified
 # With the `If-Modified-Since` header we only receive the HTTP headers and no body for 304 responses.
@@ -357,13 +357,13 @@ $.one = (el, events, handler) ->
   $.on el, events, cb
 
 $.event = (event, detail, root=d) ->
-  <% if (type === 'userscript') { %>
+  # <% if (type === 'userscript') { %>
   if detail? and typeof cloneInto is 'function'
     detail = cloneInto detail, d.defaultView
-  <% } %>
+  # <% } %>
   root.dispatchEvent new CustomEvent event, {bubbles: true, cancelable: true, detail}
 
-<% if (type === 'userscript') { %>
+# <% if (type === 'userscript') { %>
 # XXX Make $.event work in Pale Moon with GM 3.x (no cloneInto function).
 do ->
   return unless /PaleMoon\//.test(navigator.userAgent) and +GM_info?.version?.split('.')[0] >= 2 and typeof cloneInto is 'undefined'
@@ -383,12 +383,12 @@ do ->
         obj
     $.event = (event, detail, root=d) ->
       root.dispatchEvent new CustomEvent event, {bubbles: true, cancelable: true, detail: clone detail}
-<% } %>
+# <% } %>
 
 $.modifiedClick = (e) ->
   e.shiftKey or e.altKey or e.ctrlKey or e.metaKey or e.button isnt 0
 
-<% if (type === 'userscript') { %>
+# <% if (type === 'userscript') { %>
 $.open =
   if GM?.openInTab?
     GM.openInTab
@@ -396,10 +396,10 @@ $.open =
     GM_openInTab
   else
     (url) -> window.open url, '_blank'
-<% } else { %>
+# <% } else { %>
 $.open =
   (url) -> window.open url, '_blank'
-<% } %>
+# <% } %>
 
 $.debounce = (wait, fn) ->
   lastCall = 0
@@ -527,7 +527,7 @@ $.securityCheck = (data) ->
   if location.protocol isnt 'https:'
     delete data['Redirect to HTTPS']
 
-<% if (type === 'crx') { %>
+# <% if (type === 'crx') { %>
 # https://developer.chrome.com/extensions/storage.html
 $.oldValue =
   local: $.dict()
@@ -646,7 +646,7 @@ do ->
       cb? err unless --count
     chrome.storage.local.clear done
     chrome.storage.sync.clear  done
-<% } else { %>
+# <% } else { %>
 
 # http://wiki.greasespot.net/Main_Page
 # https://tampermonkey.net/documentation.php
@@ -809,4 +809,4 @@ else
       $.delete $.listValues().map (key) -> key.replace g.NAMESPACE, ''
     cb?()
 
-<% } %>
+# <% } %>
diff --git a/src/platform/CrossOrigin.coffee b/src/platform/CrossOrigin.coffee
index 2063d5f1f..73a16b972 100644
--- a/src/platform/CrossOrigin.coffee
+++ b/src/platform/CrossOrigin.coffee
@@ -1,4 +1,4 @@
-<% if (type === 'crx') { %>
+# <% if (type === 'crx') { %>
 eventPageRequest = do ->
   callbacks = []
   chrome.runtime.onMessage.addListener (response) ->
@@ -8,17 +8,17 @@ eventPageRequest = do ->
     chrome.runtime.sendMessage params, (id) ->
       callbacks[id] = cb
 
-<% } %>
+# <% } %>
 CrossOrigin =
   binary: (url, cb, headers=$.dict()) ->
     # XXX https://forums.lanik.us/viewtopic.php?f=64&t=24173&p=78310
     url = url.replace /^((?:https?:)?\/\/(?:\w+\.)?(?:4chan|4channel|4cdn)\.org)\/adv\//, '$1//adv/'
-    <% if (type === 'crx') { %>
+    # <% if (type === 'crx') { %>
     eventPageRequest {type: 'ajax', url, headers, responseType: 'arraybuffer'}, ({response, responseHeaderString}) ->
       response = new Uint8Array(response) if response
       cb response, responseHeaderString
-    <% } %>
-    <% if (type === 'userscript') { %>
+    # <% } %>
+    # <% if (type === 'userscript') { %>
     fallback = ->
       $.ajax url, {
         headers
@@ -57,7 +57,7 @@ CrossOrigin =
       (GM?.xmlHttpRequest or GM_xmlhttpRequest) gmOptions
     catch
       fallback()
-    <% } %>
+    # <% } %>
 
   file: (url, cb) ->
     CrossOrigin.binary url, (data, headers) ->
@@ -112,15 +112,15 @@ CrossOrigin =
     {onloadend, timeout, responseType, headers} = options
     responseType ?= 'json'
 
-    <% if (type === 'userscript') { %>
+    # <% if (type === 'userscript') { %>
     unless GM?.xmlHttpRequest? or GM_xmlhttpRequest?
       return $.ajax url, options
-    <% } %>
+    # <% } %>
 
     req = new CrossOrigin.Request()
     req.onloadend = onloadend
 
-    <% if (type === 'userscript') { %>
+    # <% if (type === 'userscript') { %>
     gmOptions = {
       method: 'GET'
       url
@@ -153,14 +153,14 @@ CrossOrigin =
       req.abort = ->
         try
           gmReq.abort()
-    <% } %>
+    # <% } %>
 
-    <% if (type === 'crx') { %>
+    # <% if (type === 'crx') { %>
     eventPageRequest {type: 'ajax', url, responseType, headers, timeout}, (result) ->
       if result.status
         $.extend req, result
       req.onloadend()
-    <% } %>
+    # <% } %>
 
     req
 
@@ -168,15 +168,15 @@ CrossOrigin =
     $.cache url, cb,
       ajax: CrossOrigin.ajax
 
-  <% if (type === 'crx') { %>
+  # <% if (type === 'crx') { %>
   permission: (cb, cbFail, origins) ->
     eventPageRequest {type: 'permission', origins}, (result) ->
       if result
         cb()
       else
         cbFail()
-  <% } %>
-  <% if (type === 'userscript') { %>
+  # <% } %>
+  # <% if (type === 'userscript') { %>
   permission: (cb) ->
     cb()
-  <% } %>
+  # <% } %>