#ссылка дня

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

1. Расширение для Chrome, позволяющее быстро выбрать и вставить XSS-строку в нужное вам текстовое поле: https://chrome.google.com/webstore/detail/bug-magnet/efhedldbjahpgjcneebmbolkalbhckfi?hl=en

2. Постоянно обновляемый репозиторий на ту же тему: https://github.com/minimaxir/big-list-of-naughty-strings

Впрочем, там не только XSS. Помните, например, в чатах люди свои ники пишут с “грязью”? Красиво поломать интерфейс — это туда. Вставить эмодзи, смайлы, управляющие символы.

Ломайте свои интерфейсы сами и избегайте XSS, котаны.

#xss #naughty #injection

#фишка дня одной строкой

Хватит писать 60 секунд в JS setTimeout как 60 * 1000. Ведь 60e3 работает так же хорошо.

Чмоки.

#крутое дня

Итак, на мой клич с поиском дизайнера для пет-проекта на Flutter откликнулось несколько человек. За что я крайне признателен, котаны! 🥰

И так вышло, что подписчик @Vyrvyra прислала половину готовой работы уже через полтора часа, а готовую — ещё через час. Просто взяла и сделала сразу как надо 🤯 Я вообще спать лёг, не ожидал, что кто-то будет настолько быстр 😅

Так что я, думаю, не ошибусь, если могу её рекомендовать для ваших заказов. И, если она позволит, скину сюда и саму работу.

Но, скорее всего, я вам буду показывать по частям, в зависимости от того, как будет продвигаться процесс. Кнопка за кнопкой :)

Всем пет-проектов и мира, котаны!

#крутое дня

Не то чтоб я собирался всё же сходу показывать дизайн будущего пульта целиком, думал, буду сразу стили на Flutter набрасывать и выкладывать в песочницу, но пара подписчиков захотела это ещё и на HTML/CSS отверстать. Да, @mazya? :)

Не могу сказать, что я прям принимаю вызов, процесс у меня будет двигаться медленно. Но чо бы и нет, мне эти стили пригодятся 😊

В общем, смотрим, комментируем: https://www.figma.com/file/ZEOa8mgVHabB3pgiEuwCm4/mi-tv-remote-app-control-(Copy)

#flutter #figma #remote

#фишка дня

Давайте отвлечёмся немного.

Если поискать в Google Pac-Man, появится играбельный дудл :)

Вот так просто.

#game #google #doodle

#прогресс дня

Чутка заболел, но зато всё-таки начал писать приложение-пульт.

Итак, открытия за пару дней:

1. Возможность собирать нативное приложение, а не запускать симулятор мобилы, это очень удобно.
2. Я не знаю ООП 🙈
3. Рендер теней во Flutter отличается от такового в браузере. Придётся подгонять.
4. BoxShadow inset не поддерживается, зато в репозиториях пакетов Flutter присутствует реализация на базе кода из Chrome.
5. Классы, классы, классы… константы иконок тоже в класс пришлось положить.
6. Мой перфекционизм заставил даже найти пакет для CSD. Ну чтобы заголовок окна спрятать, получилась красота.
7. Флексбокс он и во Flutter флексбокс, ничего нового там нет.
8. Линтер в расширении для VS Code работает просто потрясающе, я это всё пишу почти не заглядывая в доку, по наитию и паре примеров.
9. Документация, впрочем, великолепная. И примеры виджетов классные.
10. Состояние :active надо реализовывать через tapUp и tapDown, потому что вот так.

Оставайтесь на связи :)

#flutter

#заметка дня

Хард-скиллы это, конечно, хорошо. SOLID там знать, в наследование уметь…

Но лучшие два качества программистов — это лень и любопытство.

Надо быть достаточно любопытным, чтобы добраться до корня проблемы, найти связанные с ней и правильно протестировать.

И надо быть достаточно ленивым, чтобы это решить и другим объяснить, а не участвовать в долгих дискуссиях, тратя силы.

Как вы поняли из этого излияния, я сегодня крайне устал запрашивать изменения на одном PR…

#фишка дня

Зачем верстать, когда можно не верстать, правда?

Если вам дали задание: “Срочно сверстай нам кнопку Apple Pay для мобил!”, не надо кидаться искать SVG логотипа и шрифт.

Надо просто…

button {
    -webkit-appearance: -apple-pay-button;
}

…и всё.

Естественно, это работает только в Safari. Но на iOS всё — Safari.

Для встроенных WebView лучше и не придумаешь.

#ios #button #applepay

#фишка дня

Как узнать, откуда была вызвана интересующая нас функция?

Правильный ответ — воспользоваться дебаггером.

Или console.trace().

Но это не всегда приемлемо. Мне вот нужно было иметь в логах название источника либо часть трассировки.

Если не используется ‘use strict’ (почему, кстати?) можно воспользоваться нестандартным свойством Function.caller:

function hello() {
console.log(“caller is " + hello.caller);
}

…или устаревшим arguments.callee.caller

function hello() {
console.log(“caller is " + arguments.callee.caller.toString());
}

Но это не выведет весь стек и вообще в нормальном коде не сработает. Поэтому, можно красиво схитрить сымытировав ошибку:

function Hello() {
console.log(“caller stack”, new Error().stack);
}

Тоже нестандартно, зато как красиво. Оттуда уже можно и имя первого родителя вытащить регуляркой.

#js #caller #error #stack

#фишка дня

Давайте что-нибудь наболевшее.

Вот, например, если установить атрибут translate="no" на тег, содержащий название компании, то он не подвергнется автоматическому переводу (типа Google Translate): https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate

Удобно, если ваша компания называется "Clean Beam" или ещё какая-то подобная глупость.

И вообще, не забывайте на html ставить атрибут lang с верным кодом языка. Вы не представляете, как бесит, когда финские и шведские сайты это игнорируют, и переводчик иногда отказывается работать.

#html #attribute #translate

​​#инструмент дня

Среди моих подписчиков и в дружественных чатах постоянно всплывают вопросы о том, что же такое SVG вообще и кривые в частности. Как с ними работать и какого чёрта они работают не так, как ожидается.

Я уже выкладывал интересный инструмент для понимания процесса создания SVG и его элементов: path, polygon, polyline и т. д. “для самых маленьких”: https://t.iss.one/htmlshit/392

Пришло время для ещё одного. Этот инструмент позволяет понять создание сегментов кривой по шагам, включая перемещение пера (M), кривые безье (C), дуги (арки, A) и линии (L). Всё раскидано по координатам и уложено в сетку. Можно менять конкретные числа, а можно — подёргать реперные точки мышкой и увидеть изменение кривой.

https://yqnn.github.io/svg-path-editor/

#svg #path

#заметка дня

Щас будет линкдамп. Потому что ну надо мне структурировать информацию в голове.

Собственно, как вы в курсе, я пытаюсь писать приложение на Flutter для управления своим телевизором Samsung. Довольно старая модель, года 2018, но на TIzen OS, Smart TV.

Почему я это делаю? Дочь грызёт пульт и рано или поздно она его сгрызёт. У меня уже запасной есть, но так неинтересно.

Вторая причина — это просто интересная задача, которую можно решить несколькими способами, а само приложение легко расширять в сторону поддержки DLNA (шарить экран или медиа с телефона, короче).

Итак, как же можно управлять современным Smart TV?

1. ИК-пульт. Не вариант в моём случае, потому что не у всех телефонов он есть. У моего второго — есть, впрочем. стандартное приложение отлично работает.

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

3. TCP/IP, по сети. А конкретно — вебсокеты. Устанавливаешь соединение, получаешь токен — отправляешь жисончик. Протокол в доках я не нашёл, но есть множество реализаций:
https://github.com/Toxblh/samsung-tv-control
https://github.com/ollo69/ha-samsungtv-smart
https://github.com/dahuby/iobroker.samsung_tizen
https://github.com/stephensli/samsung-tv-api

Понятное дело, что тут проблема в том, что если телевизор ушёл в глубокий спящий режим, сетевые функции будут отключены. И это ещё предстоит решать. Ходят слухи, что у Samsung есть специальный API для этого, т. е. в сон уходит не до конца. Ну или можно отключить энергосбережение.

Можете поставить себе одну из реализаций и побаловаться с компа, если у вас Samsung.

4. Ну и специальный API с названием Samsung SmartThings. Требуют получения токена через сервера Samsung, используя их же учётку. Официальное приложение его и использует. Ужасно медленно работает, впрочем :( И всё так же неясно с состоянием спящего режима.

Реализация тоже имеется:
https://github.com/pegatron89/smartthingstv

Я пока буду делать на вебсокетах, а дальше посмотрим, куда меня это всё заведёт. Возможно, следующий шаг будет попытка в DLNA и шаринг экрана, а возможно, пойду изучать, как работает Bluetooth.

#flutter #samsung #remote

#фишка дня

Так всё же, как навесить на элемент событие, которое сработает один раз?

Да очень просто: используйте именованные функции для обратного вызова (коллбэка) и передавайте ссылку на них в добавление и удаление слушателей:

const d = document;

function a(event) {
d.removeEventListener(‘click’, a);
}

d.addEventListener(‘click’, a);

Но фишка в том, что именовать коллбэк можно прямо в месте его вызова, а не только объявления! См. иллюстрацию. Особенно удобно при переборе элементов.

P. S. мне тут подсказали, мол: «Так-то можно передать {once: true}». Да, можно. Я то ли забыл, то ли вообще не знал.

Но что если вам нужно снять слушателя по некому условию?

Вот-вот 😊

Ну и естественно, именованные коллбэки вообще штука мощная.

#js #dom #events

#статья дня

До сих пор не умеешь пользоваться терминалом? Или не знаешь, зачем это вообще фронтендеру?

Джош Камю с большой статьей о том, зачем фронтенд-разработчику уметь пользоваться консолью: https://www.joshwcomeau.com/javascript/terminal-for-js-devs/

Отличное руководство для начинающего, надо сказать. Даже . и .. объяснены :)

#cmd #terminal

#статья дня

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

Это я об этом: https://www.biphelps.com/blog/The-Fastest-GIF-Does-Not-Exist

Правда, буду честен, я читал в переводе на хабре: https://habr.com/ru/post/676480/

Потому что циановый фон блога, где размещён оригинал, это какой-то ад… но сути дела не меняет.

Итак, в чём же история? История в том, что все браузеры и все программы просмотра GIF на свете совершенно неверно обрабатывают задержку между кадрами. Да так, что даже лишают нас многих возможностей формата.

Точнее, на всё есть свои причины. Исторические в основном. Chrome кивает на Firefox, тот на IE, тот на Netscape… беда.

И всё это снабжено, собственно, примерами кода. Прям как в двигателе покопался.

#gif #img #web

#фишка дня

Иногда возникает задача поставить перенос строки после строчного (inline) элемента. Без <br/>, без преобразования элемента в блочный.

На помощь приходят псевдоэлементы.

Значение свойства content — «\A» — это Unicode-символ 0x00000A, который, внезапно, являет собой перевод строки.

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

Что это даёт? Ну, например, на десктопе можно показать перевод строки, а на адаптиве – убрать его, очистив content. Конечно, это можно сделать и скрытием <br/>, но мы уже решили, что он лишний.

#css #tricks #unicode #after #newline

#статья дня

Введение в SVG-анимации для верстальщиков

На моей памяти Хабрахабр умирал уже раза три.

Естественно, он умер, когда меня запихали в ридонли. Но речь не об этом.

На нём всё ещё выходят шикарные статьи, например, вроде этой: https://habr.com/ru/post/667116/

Очень хорошо написано, с небольшим, но достаточным, экскурсом в историю. Разобраны критичные отличия от CSS-анимаций. Уделено время правильному экспорту из редакторов.

В общем, мне такой в своё время очень не хватало, я бы возился меньше с, казалось бы, простыми анимациями вроде этой: https://codepen.io/alinaki/pen/qoPRRE или этой https://codepen.io/alinaki/pen/oNXjEzz (впрочем, спиннер не разбирал только ленивый).

#svg #css #animate

#codepen дня

Я вообще хотел очередной дедовской разгон на тему вёрстки и общения с заказчиком, но мне чота в лом. Может открытую дискуссию устроим под этим постом…

А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.

Помните, я когда-то показывал газету на CSS-grid? Ну вот же: https://t.iss.one/htmlshit/508

А представьте, клиент захотел, чтобы ваша газета реально была стилизована под едва сохранившийся архивный экземпляр… ну или ксерокопию, в цифровом мире же живём. Как это сделать? Не картинкой же, чесслово.

И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV

Можно побаловаться настройками внизу, можно изменять контент как душе угодно. Абсолютно прекрасный по своей сути пример.

#svg #effect #filter

#инструмент дня

Я довольно часто выкладываю посты, где КДПВ является кусок кода. Вся рубрика #фишка дня этим питается.

Тут я соберу ссылки на различные сервисы для создания подобных скриншотов. А вы дополните. Поехали:

https://ray.so/
https://carbon.now.sh/
https://codezen.rishimohan.me/
https://codeimg.io/
Что меня забавляет в этой группе — все по-умолчанию делают скриншот в стиле macOS. Зачем? Пёс его знает. Красивое.

https://codeimg.io/
Прелесть этой утилиты — предопределённые размеры изображения под разные соцсети.

https://codekeep.io/
Это, скорее, хранилище сниппетов, нежели инструмент создания скриншотов.

Ну и немного расширений для VS Code:
https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap
https://marketplace.visualstudio.com/items?itemName=robertz.code-snapshot
https://marketplace.visualstudio.com/items?itemName=pnp.polacode

Пост был бы неполон без https://codephoto.ru/

С этим сервисом вас ни в один чат не пустят :)

Миру нужна красота.

#til дня

Волшебные 9999px для border-radius работают не только в CSS, но и во Flutter тоже.

Всё, не могу говорить, побежал. Подробности последуют.

#flutter

#заметка дня

Итак, что же меня восхищает в волшебном значении border-radius равному 9999px?

Всё очень просто и забавно одновременно: border-radius: 9999px построит вам прямоугольник со скруглёнными углами. В случае квадрата это будет, очевидно, круг.

Вот issue из обсуждений спецификации CSS WG: https://www.w3.org/Style/CSS/Tracker/issues/29

Сам автор issue говорит, что без пол-литра картинок там не разобраться. Cut the crap, они пошли по третьему варианту: https://www.w3.org/TR/css-backgrounds-3/#corner-overlap

Там в целом геометрия эллипсов, потому описание формулы такое странное и учитываются все углы, но давайте просто посчитаем, что же получится для значения в 10000px (проще считать) и прямоугольника размером 320x240px, углы начинаем с верхнего левого (Top Left):

TL: 320/20000 vs 240/20000
TR: 320/20000 vs 240/20000
BR: 320/20000 vs 240/20000
BL: 320/20000 vs 240/20000

0.016 vs 0.012 в каждом случае

Итого, 0.012 — минимальное значение коэффициента приведения радиуса.

10000 * 0.012 = 120.

Половина высоты, выходит. Проверяем себя: https://codepen.io/alinaki/pen/jOxRwJJ

Вариант, когда значения радиуса индивидуальны, рассмотрен там же в спецификации.

Во Flutter используется геометрия кривых и понять это пусть всё ещё проще, чем структуру исходного кода Chromium, но всё равно сложно. Тем не менее, имеются упоминания, что радиусы приводятся к минимальному значению размерности.

И да, 9999px это совсем не то же, что 50%, опять же — смотрите спецификацию, там эллипсы. Но в случае квадрата — и там и там будет круг.

#geometry #borderradius #css #flutter