24.01.2025 07:30
kossyak 6 2100 Источник

Основное отличие этой песочницы от других — сжатие и кодирование пользовательского кода непосредственно в URL. Код не хранится на сервере или где-либо ещё. Если у вас есть ссылка, значит у вас есть код.

Может возникнуть вопрос, сколько символов можно записать в URL и как много кода таким образом можно закодировать? У разных браузеров максимальная длина URL-строки отличается. Но 2000 символов поддерживают все современные браузеры. В такую строку можно закодировать довольно много кода, причем степень сжатия увеличивается с объёмом кода.

Ссылка на проект

▎Интерфейс

Интерфейс состоит из двух секций: редактора JavaScript-кода и iframe, позволяющего взаимодействовать со страницей с помощью этого кода. Отсутствуют отдельные секции для HTML и CSS. Песочница предназначена преимущественно для JavaScript. Однако HTML и CSS-код можно легко добавить на страницу, используя свойство innerHTML и глобальный объект document. С помощью этого свойства можно добавить и стили, обернув их в тег <style>.

▎Пример кода

В этом примере подключается библиотека jQuery для добавления обработчика клика на кнопку. HTML-код добавлен с помощью нативного свойства innerHTML.

import "https://code.jquery.com/jquery-3.5.1.min.js"

document.body.innerHTML = '<button id="btn">Click Me!!!</button>'

$('#btn').click(() => alert('?'))

▎Заключение

Этот проект делался по фану и не на что не претендует. Тем не менее, он качественно сделан и хорошо работает. Его вполне можно использовать, если нужно с кем поделиться примером кода.

Комментарии (6)


  1. space2pacman
    24.01.2025 08:17
    #27826402

    Вы лучше напишите как разрабатывали и с какими трудностями сталкивались.


    1. kossyak Автор
      24.01.2025 08:17
      #27826438

      Спасибо за ваш вопрос! Для сжатия использовал библиотеку 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


  1. riky
    24.01.2025 08:17
    #27829368

    А у последних популярных браузеров какие ограничения реальные на длину. Также интересно какие лимиты в сервисах сокращения юрл. Vk cc например. Они получается будут использованны как бд для кода )


    1. kossyak Автор
      24.01.2025 08:17
      #27830768

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

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

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


  1. capfsb
    24.01.2025 08:17
    #27830346

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


    1. kossyak Автор
      24.01.2025 08:17
      #27830746

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

      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 КБ.