monochromer

• Articles:

  • https://calendar.perfplanet.com/2017/3-tips-for-faster-font-loading
  • https://markoskon.com/creating-font-subsets
  • https://www.zachleat.com/web/css-tricks-web-fonts
  • https://cloudfour.com/thinks/font-subsetting-strategies-content-based-vs-alphabetical

• Tools:

  • glyphhanger. Article

• font tools - WebAssembly version of Python Font Tools

monochromer

https://copyprogramming.com/howto/fatal-error-stdio-h-not-found

Если возникают ошибки типа:

• clang: error: linker command failed with exit code 1 (use -v to see invocation)
• <stdio.h> not found

export CPATH=/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/usr/include
export SDKROOT=$(xcrun --sdk macosx --show-sdk-path)

monochromer

const http = require('node:http')
const https = require('node:https')
const events = require('node:events')
const stream = require('node:stream/promises')

const { env } = process

http
  .createServer(async (clientRequest, clientResponse) => {
    try {

monochromer

http://localhost:8080 {
	root * ./public

	@notStatic {
		not {
			file {
				try_files {path} {path}/
			}
		}
	}

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

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

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

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

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

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

monochromer

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

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

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

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

monochromer

Youtube Thumbnails CDN

URLS:

• https://i.ytimg.com/vi/<video-id>/<size>.jpg
• https://i.ytimg.com/vi_webp/<video-id>/<size>.webp

Sizes (video, channel):

• default - 120x90, 88x88
• mqdefault - 320x180, 240x240
• hqdefault - 480x360, 800x800