monochromer

Сайт, посвящённый BFF-паттернам – https://bff-patterns.com/

Безопасность в BFF – https://medium.com/@hasanmahira/web-app-security-understanding-the-meaning-of-the-bff-pattern-e543662d9fe

Дискуссия про безопасность в BFF – https://stackoverflow.com/questions/73096336/why-is-bff-pattern-deemed-safer-for-spas

Soundcloud BFF — https://philcalcado.com/2015/09/18/the_back_end_for_front_end_pattern_bff.html

BFF inside — https://www.thoughtworks.com/insights/blog/bff-soundcloud

monochromer

FROM alpine:3.21.0

RUN apk add --no-cache --update \
  make \
  gcc \
  musl-dev

RUN apk add --no-cache --update \
  vips \
  vips-dev \

monochromer

https://localhost:8443 {
	tls internal

	vars {
		staticFolder "./public"
	}

	map {header.Accept} {avifSuffix} {
		~image/avif avif
		default ''

monochromer

########################################################################################################
# This config enables us to:
# - Resize
# - Rotate
# ...the resident images on an upstream server, with Nginx Server in our hand, On the fly!
# - Just by using arbitrary Query Parameters
# ...and
# - Cache the transformed image by address.
#
# Well, I got the Idea from https://stumbles.id.au/nginx-dynamic-image-resizing-with-caching.html

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

Reinstall gcc:

brew uninstall gcc
brew install gcc

or reinstal MacOS CommandLineTools:

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',