Минималистичная JavaScript песочница

Internet Explorer - 2083 символа
Chrome и Firefox - 32 767 символа
Safari и Opera - 8000 символов
Спецификация HTTP не определяет максимальную длину URL-адреса, она определяется ограничениями реализации браузеров.

По поводу сервисов сокращения ссылок, я думаю это число очень большое(условно можно сказать, что без ограничений).

Но если нужно хранить код по ссылки, то лучше подойдут сервисы CDN)

Минималистичная JavaScript песочница

Такие статьи уже есть. Вот актуальная информация одной из таких:

Internet Explorer - 2083 символа
Chrome и Firefox - 32 767 символа
Safari и Opera - 8000 символов
Спецификация HTTP не определяет максимальную длину URL-адреса, она определяется ограничениями реализации браузеров.

Хэшем url зовется всё, что идет после символа #, поэтому немного не понял про повышения количества кода (зачем добавлять лишний символ).

По поводу альтернативных источников хранения. Задача состоит не в хранение, а обмене кодом, с помощью ссылки.

А так, если нужно хранить данные на стороне клиента, то можно использовать localStorage:

Google Chrome, Mozilla Firefox, Opera: Примерно 10 МБ.
Internet Explorer: Порядка 10 МБ на хранилище.
Firefox (значение по умолчанию для домена): Ограничен до 5120 КБ.

Минималистичная JavaScript песочница

Спасибо за ваш вопрос! Для сжатия использовал библиотеку pako. Код очень простой:

import pako from 'pako'

function compress(str) {
  const compressed = pako.deflate(str, { to: 'string' })
  return btoa(compressed.reduce((data, byte) => data + String.fromCharCode(byte), ''))
}
function decompress(compressedStr) {
  return pako.inflate(atob(compressedStr).split('').map(char => char.charCodeAt(0)), { to: 'string' })
}
export { compress, decompress }

Строка с кодом сжимается и кодируется в base-64 и обратно. Проблем особых не было.

Ссылка на проект https://github.com/kossyak/papakha

Гибкие макеты: Решаем проблему на корню

Зачем нужна линейность? Главное, что размер меняется в заданном промежутке 28-40, где 28 для ширины макета 320, 40 при 1440.

Гибкие макеты: Решаем проблему на корню

Соглашусь, что с rem могут быть сайд эффекты, ну формула гибкости работает безупречно. В примере: padding: calc((60 - 15) * var(--kw) + 15px); На мобильных версиях (320px) гарантированно будет 15px, на десктопе (1440px) будет 60px. Строго между этими значениями резина. Хотя бы такое использование, я смело могу рекомендовать для продакшена.

Гибкие макеты: Решаем проблему на корню

Проблема в том, что нет единого способа сделать резиновую верстку, все придумывают свой велосипед. Этот же способ претендует на единый подход. Чтобы вы не думаю, что только я пытался решить эту проблему, вот еще ссылка https://www.youtube.com/watch?v=6l6IJLlSoLo

Гибкие макеты: Решаем проблему на корню

Похоже, вы просто еще не сталкивались с подобной проблемой.

Гибкие макеты: Решаем проблему на корню

Лучше всего на этот вопрос может ответь демонстрация на CodePen, можно увидеть, как с помощью несложного кода реализуется резиновая верстка. Дизайнеры хорошо к этому относятся, потому как для мобильной и десктопной версии возможен PerfectPixel. А то, что при этом подходе, PerfectPixel не возможен для планшетной версии - небольшая цена.

CSS Grid Layout: Асимметричная резиновая сетка

Можно определить вариации размерности блоков, вряд ли их будет больше 5. И для каждого из вариантов задать свои значение занимаемых строк. Например grid-row-end: span 5; grid-row-end: span 10; grid-row-end: span 15; И со стороны бэкенда для каждой карточки передавать вариант размера блока, можно его рассчитывать от количества символов в тексте, если это картинки, то от высоты изображения. В любом случает нужно писать дополнительный код. Сетка подразумевает, что между размерами блоков есть связь (пропорции), если ее нет, то только js в помощь.

CSS Grid Layout: Асимметричная резиновая сетка

На мой взгляд, то что содержимое может немного растянуть блоки это не критично. Но это можно решить, изначально сделав в дизайне макета высоту блоков чуть больше. Я видел такой пример, где на десктопной версии под тестом остается пространство. На крайний случай, можно использовать медиа запросы, немного увеличивая высоту строки grid-auto-rows: 2px; Таким образом мы увеличиваем высоту всех блоков, но сохраняем их пропорции относительно друг-друга.

Элегантная реализация Long Press обработчика с помощью CSS анимации

Возможно мне не удалось передать в статье, в чем заключается элегантность данной реализации, попробую это сделать в комментариях. Простыми словами, в этой реализации, CSS выполняет сложную логику, которую обычно выполняет JavaScript. И с какой-то точки зрения, здесь CSS даже лучше подходит.