#фишка дня

TIL что в CodePen можно просто бросать файлы и он их подхватит. Подумалось, а нет ли возможности извлекать разметку, стили и скрипты из локальных файлов и забрасывать их в CodePen максимально автоматизированно?

Так вот, есть! Утилита буквально называется codepen-prefill и создана именно для этой цели: https://github.com/yuanchuan/codepen-prefill

npx codepen-prefill index.html

Извлечёт все встроенные стили и скрипты из файла и закинет их в окно редактора. Останется лишь сохранить.

#codepen #npm #npx #utility

11-12 октября пройдёт конференция ViteConf. Как несложно догадаться, от создателей сверхбыстрого бандлера (сборщика) Vite.

Я его использую в паре проектов и планирую перетащить на рабочие.

Вот, собственно, и на конфу зарегистрировался :)

Онлайн-регистрация бесплатная, к слову.

И, наконец, стал известен список спикеров!

Evan You — создатель Vue
Rich Harris — создатель Svelte
Daniel Roe — участник основной команды Nuxt

…и ещё с дюжину

Да там вообще все звёзды, рекомендую не пропускать!

#vite

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

Но есть ли у вас на это время?

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

⚡️Каждый день новости, объяснение законодательных изменений, аналитические заметки о состоянии рынка недвижимости, инструкции по релокации и получению ВНЖ, подборки перспективной недвижимости за рубежом для переезда и инвестиций в Турции, в ОЭА и на Северном Кипре.

⚡️Подписывайтесь, включайте оповещения и получайте еще больше новостей: https://t.iss.one/lookoutsochi

#фишка дня

https://www.google.com/search?q=nasa+dart

Брюс Уиллис больше не нужон, посоны!

#запрос дня

Воспользуюсь административным ресурсом, пожалуй.

Дизайнеры тут? Внимание!

Мне для пет-проекта на Flutter надо отрисовать дизайн пульта с иллюстрации. В Figma.

Можно с авторским взглядом, но суть должна остаться — реалистичный пульт смарт-телевизора.

Естественно, все состояния кнопок должны быть отрисованы. Особенно меня волнует O-pad 🙄

Автор оригинальной работы не отвечает, но он, в целом, и так срисовывал пульт Mi.

Я даже оплачу, так-то!

Ну и если вам будет интересно, могу транслировать, как оно там, во Flutter.

#ссылка дня

Мы тут немного повеселились с 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