rewrite some code to make make safety more obvious

src/General/Main.coffee

@@ -186,9 +186,8 @@ Main =
     $.get 'previousversion', null, ({previousversion}) ->
       return if previousversion is g.VERSION
       if previousversion
-        changelog = '<%= meta.repo %>blob/<%= meta.mainBranch %>/CHANGELOG.md'
         el = $.el 'span',
-          innerHTML: "<%= meta.name %> has been updated to <a href='#{changelog}' target=_blank>version #{g.VERSION}</a>."
+          innerHTML: '<%= meta.name %> has been updated to <a href="<%= meta.repo %>blob/<%= meta.mainBranch %>/CHANGELOG.md" target=_blank>version <%= version %></a>.'
         new Notice 'info', el, 15
       else
         Settings.open()
@@ -243,7 +242,7 @@ Main =
       return
 
     div = $.el 'div',
-      innerHTML: "#{errors.length} errors occurred. [<a href=javascript:;>show</a>]"
+      innerHTML: "#{+errors.length} errors occurred. [<a href=javascript:;>show</a>]"
     $.on div.lastElementChild, 'click', ->
       [@textContent, logs.hidden] = if @textContent is 'show'
         ['hide', false]

src/General/Settings.coffee

@@ -28,15 +28,13 @@ Settings =
     return if Settings.dialog
     $.event 'CloseMenu'
 
-    html = <%= importHTML('Settings/Settings') %>
-
     Settings.overlay = overlay = $.el 'div',
       id: 'overlay'
 
     Settings.dialog = dialog = $.el 'div',
       id:        'fourchanx-settings'
       className: 'dialog'
-      innerHTML: html
+      innerHTML: <%= importHTML('Settings/Settings') %>
 
     $.on $('.export', Settings.dialog), 'click',  Settings.export
     $.on $('.import', Settings.dialog), 'click',  Settings.import
@@ -92,7 +90,8 @@ Settings =
     inputs = {}
     for key, obj of Config.main
       fs = $.el 'fieldset',
-        innerHTML: "<legend>#{key}</legend>"
+        innerHTML: '<legend></legend>'
+      fs.firstElementChild.textContent = key
       for key, arr of obj
         description = arr[1]
         div = $.el 'div'
@@ -113,7 +112,7 @@ Settings =
       return
 
     div = $.el 'div',
-      innerHTML: "<button></button><span class=description>: Clear manually-hidden threads and posts on all boards. Reload the page to apply."
+      innerHTML: '<button></button><span class=description>: Clear manually-hidden threads and posts on all boards. Reload the page to apply.'
     button = $ 'button', div
     $.get {hiddenThreads: {}, hiddenPosts: {}}, ({hiddenThreads, hiddenPosts}) ->
       hiddenNum = 0
@@ -422,16 +421,13 @@ Settings =
   favicon: ->
     Favicon.switch()
     Unread.update() if g.VIEW is 'thread' and Conf['Unread Favicon']
-    @nextElementSibling.innerHTML = """
+    img = @nextElementSibling.children
-      <img src=#{Favicon.default}>
+    img[0].src = Favicon.default
-      <img src=#{Favicon.unreadSFW}>
+    img[1].src = Favicon.unreadSFW
-      <img src=#{Favicon.unreadNSFW}>
+    img[2].src = Favicon.unreadNSFW
-      <img src=#{Favicon.unreadDead}>
+    img[3].src = Favicon.unreadDead
-      """
   sageEmoji: ->
-    @nextElementSibling.innerHTML = """
+    @nextElementSibling.firstElementChild.src = "data:image/png;base64,#{Emoji.sage[@value]}"
-      <img src=data:image/png;base64,#{Emoji.sage[@value]}>
-      """
   togglecss: ->
     if $('textarea[name=usercss]', $.x 'ancestor::fieldset[1]', @).disabled = !@checked
       CustomCSS.rmStyle()
@@ -450,7 +446,8 @@ Settings =
     inputs = {}
     for key, arr of Config.hotkeys
       tr = $.el 'tr',
-        innerHTML: "<td>#{arr[1]}</td><td><input class=field></td>"
+        innerHTML: '<td></td><td><input class=field></td>'
+      tr.firstElementChild.textContent = arr[1]
       input = $ 'input', tr
       input.name = key
       input.spellcheck = false

src/General/html/Settings/Advanced.html

@@ -91,7 +91,12 @@
     <option value=Original>Original</option>
     <option value=Metro>Metro</option>
   </select>
-  <span class=favicon-preview></span>
+  <span class=favicon-preview>
+    <img src="data:image/gif;base64,R0lGODlhEAAQAPAAAAAAAAAAACH5BAEAAAAALAAAAAAQABAAAAIOhI%2Bpy%2B0Po5y02ouzPgUAOw%3D%3D">
+    <img src="data:image/gif;base64,R0lGODlhEAAQAPAAAAAAAAAAACH5BAEAAAAALAAAAAAQABAAAAIOhI%2Bpy%2B0Po5y02ouzPgUAOw%3D%3D">
+    <img src="data:image/gif;base64,R0lGODlhEAAQAPAAAAAAAAAAACH5BAEAAAAALAAAAAAQABAAAAIOhI%2Bpy%2B0Po5y02ouzPgUAOw%3D%3D">
+    <img src="data:image/gif;base64,R0lGODlhEAAQAPAAAAAAAAAAACH5BAEAAAAALAAAAAAQABAAAAIOhI%2Bpy%2B0Po5y02ouzPgUAOw%3D%3D">
+  </span>
 </fieldset>
 
 <fieldset>
@@ -101,7 +106,9 @@
       <option value="4chan SS">4chan SS</option>
       <option value="appchan">appchan</option>
     </select>
-    <span class=sage-icon-preview></span>
+    <span class=sage-icon-preview>
+      <img src="data:image/gif;base64,R0lGODlhEAAQAPAAAAAAAAAAACH5BAEAAAAALAAAAAAQABAAAAIOhI%2Bpy%2B0Po5y02ouzPgUAOw%3D%3D">
+    </span>
   </div>
   <div>
     Position: <select name=emojiPos>

src/Images/ImageExpand.coffee

@@ -256,13 +256,11 @@ ImageExpand =
         subEntries: subEntries
 
     createSubEntry: (name, desc) ->
-      label = $.el 'label',
+      label = UI.checkbox name, " #{name}"
-        innerHTML: "<input type=checkbox name='#{name}'> #{name}"
+      label.title = desc
-        title: desc
       input = label.firstElementChild
       if name in ['Fit width', 'Fit height']
         $.on input, 'change', ImageExpand.cb.setFitness
-      input.checked = Conf[name]
       $.event 'change', null, input
       $.on input, 'change', $.cb.checked
       el: label

src/Posting/QR.coffee

@@ -749,18 +749,11 @@ QR =
 
     resDoc  = req.response
     if ban  = $ '.banType', resDoc # banned/warning
-      board = $('.board', resDoc).innerHTML
+      err   = $.el 'span',
-      err   = $.el 'span', innerHTML:
         if ban.textContent.toLowerCase() is 'banned'
-          """
+          innerHTML: "You are banned on #{$('.board', resDoc).innerHTML}! ;_;<br>Click <a href=//www.4chan.org/banned target=_blank>here</a> to see the reason."
-          You are banned on #{board}! ;_;<br>
-          Click <a href=//www.4chan.org/banned target=_blank>here</a> to see the reason.
-          """
         else
-          """
+          innerHTML: "You were issued a warning on #{$('.board', resDoc).innerHTML} as #{$('.nameBlock', resDoc).innerHTML}.<br>Reason: #{$('.reason', resDoc).innerHTML}"
-          You were issued a warning on #{board} as #{$('.nameBlock', resDoc).innerHTML}.<br>
-          Reason: #{$('.reason', resDoc).innerHTML}
-          """
     else if err = resDoc.getElementById 'errmsg' # error!
       $('a', err)?.target = '_blank' # duplicate image link
     else if resDoc.title isnt 'Post successful!'