monochromer

Сергей Куликов. Веб-компоненты

Оригинал в twitter-канале jsunderhood: https://twitter.com/jsunderhood/status/1328042944985706512

Кастомные элементы: знакомство.

О том, почему не взлетели веб-компоненты.

О применении кастомных элементов в 2020.

monochromer

https://t.me/super_oleg_dev/102

Ленивая гидрация позволяет не выполнять реакту код компонента на клиенте сразу при гидрации всего приложения, и отлично комбинируется с IntersectionObserver - можно выполнять код только при попадании компонента в область видимости.

Также, можно вообще не выполнять код на клиенте пометив блок как статичный, и каким-либо образом убирать его из клиентского бандла.

Механизм достаточно простой, это по сути легализованный хак в React, детали есть в этом issue - facebook/react#10923 (comment)

Код для lazy обертки может базово выглядеть так:

monochromer

function createPagination(paginationOptions) {
  return {
    data: typeof paginationOptions.data === 'string'
      ? paginationOptions.data
      : 'collections.all',

    size: 1,

    alias: paginationOptions.alias ?? 'paginationChunk',

monochromer

Оригинал: https://t.me/gorshochekvarit/175

Dual Package - ESM и CJS

Примерно год назад стал очевиден тренд на переход всего и вся на ESM. Было несколько заявлений от опенсорс мейнтейнеров, самое известное, возможно, пост от Sindre Sorhus. Стало понятно, что нужно смотреть в эту сторону и думать как перевести свои проекты на ESM, в том числе CSSTree (и должно быть частью 2.0). Но в отличие от Sindre, я планировал перевод не на Pure ESM (поддержка только ESM), а на Dual, когда поддерживается и ESM и CommonJS.

Кажется, что до сих пор нет единого мнения о том как правильно – есть ярые сторонники как Pure ESM, так и Dual. У каждого подхода свои плюсы и минусы. Я склоняюсь к Dual, потому что попробовав использовать ESM на нескольких Node.js проектах (библиотеки и скрипты), пришел к мнению, что CommonJS во многих случаях и проще, и уместнее ESM. А вот если говорить про код испо

monochromer

# https://www.innoq.com/en/blog/rails-frontend-components/
#  app/helpers
module ComponentHelper
  def component(name, data: {}, &block)
    render_component("#{name}/#{name}", { data: data }, &block)
  end

  private

  def render_component(name, locals, &block)

monochromer

function isGenerator(target) {
  return target[Symbol.toStringTag] === 'GeneratorFunction';
}

function isIterable(obj) {
  if (obj === null || obj === void 0) {
    return false;
  }

  if (typeof obj === 'string') {

monochromer

Расчёт итогового размера с flex-grow

1 шаг. Рассчитываем свободное место во флекс-контейнере:

Свободное место = Ширина контейнера - Сумма базовых размеров элементов

2 шаг. Считаем размер минимальной доли свободного места:

Доля свободного места = Свободное место / Сумма flex-grow всех элементов

3 шаг. Базовый размер каждого флекс-элемента увеличиваем на размер минимальной доли свободного места умноженной на значение flex-grow этого элемента:

Итоговый размер = Базовый размер + (Доля свободного места * flex-grow)

Для верхнего блока с енотами хочется задать коэффициенты 1 и 2. Но нужные размеры блоков получаются с коэффициентами 1 и 3. Давайте посчитаем:

Свободное место = 300px - (50px * 2) = 200px

monochromer

1. Верстка: отображаем пользовательский контент
2. Где всё сложно с переносами строк. Вот все CSS- и HTML-хитрости для этого
3. Передряги при переносах
4. Florian Rivoal. line-breaking
5. A new terminal-style line breaking with CSS Text
6. wrapping-long-words-css-html
7. Неизведанные глубины CSS: метрики шрифта, line-height и vertical-align
8. Deep Dive into Text Wrapping and Word Breaking

overflow-wrap (старый `wo

monochromer

• express.js
• koajs
• fastify
• hapi
• sailsjs
• derbyjs
• totaljs
• restify
• adonisjs
• loopback

monochromer

Порядок обработки директив location

• https://nginx.org/ru/docs/http/ngx_http_core_module.html#location
• https://www.youtube.com/watch?v=7XJoCZ4wsoc

1. Точное совпадение

Не может иметь вложенные location’ы