Alex Ozerov

function counter(ms, className){
    let counter = 0;
    let interval = setInterval(() => {
        document.querySelector(className).innerHTML = ++counter;
        counter === 100 ? clearInterval(interval) : false;
    }, ms)
}
counter(100, '.res')

... будет обрабатываться в call stack что собственно затормозит сайт

- затормозит сайт если код выполняется до события DOMContentLoaded,если я вас правильно понял, а таймер закончиться, дальше задача попадет в callback queue и когда дойдет очередь уже в call stack. WebApi - это некий доп.инструмент для js, образно говоря. Так как setTimeout и setinterval в спецификации не описан, js попросту не умеет считать таймер, поэтому этим делом занимается браузер, тоесть WebApi.

Так где же здесь асинхронность?

Все выполнятся в один поток, по очереди, это и есть асинхронность.

Или же что бы достичь асинхронности мне нужно разбивать этот setTimeout на еще мелкие setTime-аути чтобы те выполнялись быстрее в call stack?

- А есть вам нужно отложить или задержать какое-то действие, то да, вам лучше разбить на таймауты все, а еще лучше использовать async await, либо промисы.

https://codepen.io/alexandr-ozerow/pen/bGwNwQv - flex
https://codepen.io/alexandr-ozerow/pen/QWKwGpP - table
https://codepen.io/alexandr-ozerow/pen/poEvNXg - grid

ошибка возникает из за файла формата .gif который видимо криво конвертирован либо еще что то с ним не так. После удаления гифки все заработало

Проблема решилась, не оставляйте тег img пустым и не будет у вас таких ошибок.

Документация:

'.source.gfm':
  'Hello World':
    'prefix': 'hewo'
    'body': 'Hello World!'

  'Github Hello':
    'prefix': 'gihe'
    'body': 'Octocat says Hi!'

  'Octocat Image Link':
    'prefix': 'octopic'
    'body': '![GitHub Octocat](https://assets-cdn.github.com/images/modules/logos_page/Octocat.png)'

и собственно пример как я сделал:

'.source.css':

  'media':
    'prefix': '@'
    'body': "@media (max-width: 968px){}"

  'margin':
    'prefix': 'mm'
    'body': 'margin: 0px 0px 0px 0px;'

  'padding':
    'prefix': 'pp'
    'body': 'padding: 0px 0px 0px 0px;'

Почему работает? Потому что нужно выравнивать код одинаково в колонку, как и в примере.