В JavaSript коммьюнити Мартин Клеппе считается одним из самых известных исследователей в области обфускации JS-кода. Несколько лет назад он представил проект JSFuck — подмножество JavaScript, использующее шесть символов []()!+, с помощью которых можно представить и выполнить любой JavaScript-код. В 2016-ом году была совершена атака на пользователей eBay, в ней был использован этот метод обфускации.

Недавно Мартин представил свой новый проект — Five. Five — это развитие идей JSFuck, использующее пять символов для представления кода — $+=[]. Это подмножество работает только в браузерах и на тех страницах, где есть jQuery UI.

Довольно сложно в нескольких словах объяснить как работает Five, но его суть заключается в следующем. С помощью символов $+=[] можно получить доступ к исходному коду функции $.find(). Полученный исходный код работает как алфавит, из которого по кусочкам можно сформировать любой JavaScript-код. Для выполнения кода используется ссылка на document.body, которая достаётся из $.datepicker.dpDiv[0].ownerDocument.body. То есть если сайт использует jQuery UI (таких сайтов много) и если он не экранирует $+=[] в пользовательских данных, это может открыть возможность для XSS-атак.

#js #fun #security #obfuscation

http://aem1k.com/five/

Юан Чуан написал статью о том, как сделать треугольник Серпинского с помощью CSS и одного div — "Single div Sierpinski triangle".

Треугольник Серпинского — это фрактальная структура, состоящая из большого количества треугольников, образующих паттерн. Идея его отрисовки с помощью CSS заключается в наложении друг на друга нескольких слоёв повторяющихся и уменьшающихся прямоугольных треугольников, создающихся с помощью линейного градиента. Первая половина треугольников на всех слоях закрашивается цветом, а вторая остаётся полностью прозрачной. После отрисовки всех слоёв с треугольниками применяется transform: skew() для трансформации прямоугольного треугольника в равнобедренный.

Красивое решение задачи. Рекомендую посмотрерть.

#css #fun

https://yuanchuan.dev/single-div-sierpinski-triangle

Омар Алшакер написал статью про свои эксперименты со временем в web'е — "4 Creative Ways to JavaScript Timing in Browsers".

Самое интересное в статье — идея реализации подобия таймера с микросекундным разрешением. Его можно создать с помощью веб-воркера и вызовом метода performance.now() в бесконечном цикле. Другие советы по сути бесполезные, но интересные с точки зрения изобретательности. Например, можно сделать подобие setInterval запустив бесконечную анимацию на DOM-элементе и подписавшись на событие animationiteration. Что-то похожее можно сделать с SVG-элементом, используя SMIL-анимацию, но подписываться надо на событие repeat. Для реализации своей версии setTimeout можно использовать KeyframeEffect из Web Animation API (экспериментальное api).

Статья небольшая и не очень серьёзная. Стоит почитать, если интересна тема нестандартной эксплуатации возможностей web-платформы.

#js #experimental #fun

https://blog.omaralshaker.com/creative-ways-to-javascript-timing/

Гал Шлёзингер написал статью про решение задачи FizzBuzz с помощью системы типов TypeScript без использования рантайм-кода — "Typing the Technical Interview in TypeScript".

Всё решение сводится к изобретательной эксплуатации системы типов. Для представления каждого числа используется свой тип: type _0 = 0;, type _1 = Increment<_0>; и т.п. Для сравнения типов между собой используется тип type Eq<A, B extends A> = "passes";. Для логического оператора "и" — type And<A, B> = A extends true ? (B extends true ? true : false) : false; и т.д. После добавления всех необходимых типов результат получается с помощью типа type FIZZBUZZ = FizzBuzzUpTo<_16>;. Результат можно увидеть в подсказке редактора в виде выведенного типа.

Статья очень техническая, но с юмором. Рекомендую почитать и поразбираться с примерами, если хотите углубить знания в TypeScript.

#typescript #fun

https://gal.hagever.com/posts/typing-the-technical-interview-in-typescript/

Недавно Джейми Коултер запостил на codepen свою работу — полноценный квест с сюжетом, вся логика которого описывается в CSS. Илья Стрельцин разобрал внутреннее устройство квеста и написал статью "Безумие на чистом HTML + CSS".

Основная часть логики игры построена с помощью использования невидимых чекбоксов и радиокнопок, с помощью которых задаются стили других элементов. Такими элементами могут быть другие чекбоксы, образуя дерево состояний. Вся карта игры — большая картинка, поделенная на 64 сегмента-локации. Переход от локации к локации сделан с помощью чекбоксов, при их активации картинка "прокручивается" к нужной позиции. Для решения одной из загадок нужно открыть отсек с батарейками, Джейми придумал использовать <input type="range"> для эмуляции drag-n-drop.

Илья пишет, что такие штуки традиционно попадают в разделы типа «ненормальное программирование», но не становятся от этого менее интересными.

#css #fun

https://css-live.ru/tricks/bezumie-na-chistom-html-css.html

Рендеринг DOOM с помощью чекбоксов

Эндрю Хэли из Vercel рассказал про свой эксперимент с DOOM — "DOOM Rendered via Checkboxes".

В статье рассказывается про интеграцию библиотеки Checkboxland и WebAssembly-порта DOOM. Checkboxland — это библиотека для рисования с помощью чекбоксов на HTML-странице. С её помощью можно рендерить текст, фигуры, изображения и видео.

Для рендеринга картинки DOOM используется видео. Изображение из <canvas> захватывается с помощью метода captureStream(), преобразуется в MediaStream и передаётся методу renderVideo из Checkboxland. Таким образом получается картинка. Автор пишет про то, что на высоких разрешениях всё тормозило, поэтому он остановился на разрешении 160x100. Вполне возможно, что в будущем мы увидим какой-нибудь бенчмарк на базе этого проекта.

Статья несерьёзная, но интересная. Рекомендую заглянуть.

#webassembly #fun

https://healeycodes.com/doom-rendered-via-checkboxes
https://habr.com/ru/post/590337/ (мой перевод на русский язык)