#заметка дня
Щас будет линкдамп. Потому что ну надо мне структурировать информацию в голове.
Собственно, как вы в курсе, я пытаюсь писать приложение на 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
Щас будет линкдамп. Потому что ну надо мне структурировать информацию в голове.
Собственно, как вы в курсе, я пытаюсь писать приложение на 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
❤8👍7
#фишка дня
Так всё же, как навесить на элемент событие, которое сработает один раз?
Да очень просто: используйте именованные функции для обратного вызова (коллбэка) и передавайте ссылку на них в добавление и удаление слушателей:
Но фишка в том, что именовать коллбэк можно прямо в месте его вызова, а не только объявления! См. иллюстрацию. Особенно удобно при переборе элементов.
P. S. мне тут подсказали, мол: «Так-то можно передать {once: true}». Да, можно. Я то ли забыл, то ли вообще не знал.
Но что если вам нужно снять слушателя по некому условию?
Вот-вот 😊
Ну и естественно, именованные коллбэки вообще штука мощная.
#js #dom #events
Так всё же, как навесить на элемент событие, которое сработает один раз?
Да очень просто: используйте именованные функции для обратного вызова (коллбэка) и передавайте ссылку на них в добавление и удаление слушателей:
const d = document;
function a(event) {
d.removeEventListener(‘click’, a);
}
d.addEventListener(‘click’, a);Но фишка в том, что именовать коллбэк можно прямо в месте его вызова, а не только объявления! См. иллюстрацию. Особенно удобно при переборе элементов.
P. S. мне тут подсказали, мол: «Так-то можно передать {once: true}». Да, можно. Я то ли забыл, то ли вообще не знал.
Но что если вам нужно снять слушателя по некому условию?
Вот-вот 😊
Ну и естественно, именованные коллбэки вообще штука мощная.
#js #dom #events
👍20🔥2👎1🤯1🍓1
#статья дня
До сих пор не умеешь пользоваться терминалом? Или не знаешь, зачем это вообще фронтендеру?
Джош Камю с большой статьей о том, зачем фронтенд-разработчику уметь пользоваться консолью: https://www.joshwcomeau.com/javascript/terminal-for-js-devs/
Отличное руководство для начинающего, надо сказать. Даже . и .. объяснены :)
#cmd #terminal
До сих пор не умеешь пользоваться терминалом? Или не знаешь, зачем это вообще фронтендеру?
Джош Камю с большой статьей о том, зачем фронтенд-разработчику уметь пользоваться консолью: https://www.joshwcomeau.com/javascript/terminal-for-js-devs/
Отличное руководство для начинающего, надо сказать. Даже . и .. объяснены :)
#cmd #terminal
👍9
#статья дня
Я давно такого удовольствия не получал. Технических знаний много не требуется, но при этом погружение в кишки браузеров и формат 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
Я давно такого удовольствия не получал. Технических знаний много не требуется, но при этом погружение в кишки браузеров и формат 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
👍8❤1🔥1
#фишка дня
Иногда возникает задача поставить перенос строки после строчного (inline) элемента. Без
На помощь приходят псевдоэлементы.
Значение свойства
Ну и чтобы он сработал, нам стоит прямо указать браузеру на необходимость сохранения переводов строк.
Что это даёт? Ну, например, на десктопе можно показать перевод строки, а на адаптиве – убрать его, очистив content. Конечно, это можно сделать и скрытием
#css #tricks #unicode #after #newline
Иногда возникает задача поставить перенос строки после строчного (inline) элемента. Без
<br/>, без преобразования элемента в блочный.На помощь приходят псевдоэлементы.
Значение свойства
content — «\A» — это Unicode-символ 0x00000A, который, внезапно, являет собой перевод строки.Ну и чтобы он сработал, нам стоит прямо указать браузеру на необходимость сохранения переводов строк.
Что это даёт? Ну, например, на десктопе можно показать перевод строки, а на адаптиве – убрать его, очистив content. Конечно, это можно сделать и скрытием
<br/>, но мы уже решили, что он лишний.#css #tricks #unicode #after #newline
🔥26👍1
#статья дня
Введение в SVG-анимации для верстальщиков
На моей памяти Хабрахабр умирал уже раза три.
Естественно, он умер, когда меня запихали в ридонли. Но речь не об этом.
На нём всё ещё выходят шикарные статьи, например, вроде этой: https://habr.com/ru/post/667116/
Очень хорошо написано, с небольшим, но достаточным, экскурсом в историю. Разобраны критичные отличия от CSS-анимаций. Уделено время правильному экспорту из редакторов.
В общем, мне такой в своё время очень не хватало, я бы возился меньше с, казалось бы, простыми анимациями вроде этой: https://codepen.io/alinaki/pen/qoPRRE или этой https://codepen.io/alinaki/pen/oNXjEzz (впрочем, спиннер не разбирал только ленивый).
#svg #css #animate
Введение в SVG-анимации для верстальщиков
На моей памяти Хабрахабр умирал уже раза три.
Естественно, он умер, когда меня запихали в ридонли. Но речь не об этом.
На нём всё ещё выходят шикарные статьи, например, вроде этой: https://habr.com/ru/post/667116/
Очень хорошо написано, с небольшим, но достаточным, экскурсом в историю. Разобраны критичные отличия от CSS-анимаций. Уделено время правильному экспорту из редакторов.
В общем, мне такой в своё время очень не хватало, я бы возился меньше с, казалось бы, простыми анимациями вроде этой: https://codepen.io/alinaki/pen/qoPRRE или этой https://codepen.io/alinaki/pen/oNXjEzz (впрочем, спиннер не разбирал только ленивый).
#svg #css #animate
👍16
#codepen дня
Я вообще хотел очередной дедовской разгон на тему вёрстки и общения с заказчиком, но мне чота в лом. Может открытую дискуссию устроим под этим постом…
А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.
Помните, я когда-то показывал газету на CSS-grid? Ну вот же: https://t.iss.one/htmlshit/508
А представьте, клиент захотел, чтобы ваша газета реально была стилизована под едва сохранившийся архивный экземпляр… ну или ксерокопию, в цифровом мире же живём. Как это сделать? Не картинкой же, чесслово.
И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV
Можно побаловаться настройками внизу, можно изменять контент как душе угодно. Абсолютно прекрасный по своей сути пример.
#svg #effect #filter
Я вообще хотел очередной дедовской разгон на тему вёрстки и общения с заказчиком, но мне чота в лом. Может открытую дискуссию устроим под этим постом…
А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.
Помните, я когда-то показывал газету на CSS-grid? Ну вот же: https://t.iss.one/htmlshit/508
А представьте, клиент захотел, чтобы ваша газета реально была стилизована под едва сохранившийся архивный экземпляр… ну или ксерокопию, в цифровом мире же живём. Как это сделать? Не картинкой же, чесслово.
И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV
Можно побаловаться настройками внизу, можно изменять контент как душе угодно. Абсолютно прекрасный по своей сути пример.
#svg #effect #filter
👍20
#инструмент дня
Я довольно часто выкладываю посты, где КДПВ является кусок кода. Вся рубрика #фишка дня этим питается.
Тут я соберу ссылки на различные сервисы для создания подобных скриншотов. А вы дополните. Поехали:
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/
С этим сервисом вас ни в один чат не пустят :)
Миру нужна красота.
Я довольно часто выкладываю посты, где КДПВ является кусок кода. Вся рубрика #фишка дня этим питается.
Тут я соберу ссылки на различные сервисы для создания подобных скриншотов. А вы дополните. Поехали:
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/
С этим сервисом вас ни в один чат не пустят :)
Миру нужна красота.
👍9🔥4💩3❤1
#заметка дня
Итак, что же меня восхищает в волшебном значении 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
Итак, что же меня восхищает в волшебном значении border-radius равному 9999px?
Всё очень просто и забавно одновременно: border-radius: 9999px построит вам прямоугольник со скруглёнными углами. В случае квадрата это будет, очевидно, круг.
Вот issue из обсуждений спецификации CSS WG: https://www.w3.org/Style/CSS/Tracker/issues/29
Сам автор issue говорит, что без
Там в целом геометрия эллипсов, потому описание формулы такое странное и учитываются все углы, но давайте просто посчитаем, что же получится для значения в 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
👍5🤯3
#фишка дня
Есть псевдокласс :disabled, который выберет отключенные поля. Есть псевдокласс :read-only, который выберет недоступные для ввода поля (только для чтения).
Вот только есть нюанс.
Отключенные поля они так-то тоже для ввода недоступны. Как же тогда быть?
Использовать селектор атрибута: [readonly].
Пример: https://codepen.io/elad2412/pen/wvpmjGR
Отличие disabled-полей от readonly: первые не отправятся с формой вообще, а значение вторых просто нельзя изменить.
Скелетон вернётся с новыми подробностями о фронтенде завтра.
#css #html #input
Есть псевдокласс :disabled, который выберет отключенные поля. Есть псевдокласс :read-only, который выберет недоступные для ввода поля (только для чтения).
Вот только есть нюанс.
Отключенные поля они так-то тоже для ввода недоступны. Как же тогда быть?
Использовать селектор атрибута: [readonly].
Пример: https://codepen.io/elad2412/pen/wvpmjGR
Отличие disabled-полей от readonly: первые не отправятся с формой вообще, а значение вторых просто нельзя изменить.
Скелетон вернётся с новыми подробностями о фронтенде завтра.
#css #html #input
❤26👍4🤨1
#заметка дня
Что-то вчерашняя заметка про border-radius: 9999px внесла сумятицу в молодые умы. Я решил, что нужна ещё одна.
На сей раз с иллюстрацией
Итак. 9999px — это просто моё любимое число.
Взамен 9999px можно использовать 100vmax, infinity, calc(1px / 0). Все же помнят соглашение, что деление на ноль даёт бесконечность?
Результат будет один: мы получим скруглённый прямоугольник.
Если же вы выставите 50% — получится эллипс с радиусами в 50% ширины и 50% высоты, на иллюстрации справа.
Разница очевидна, и нам редко нужны эллипсы в жизни. А так хотелось квадруг… (squircle). Ну да ладно.
Обновил кодпен: https://codepen.io/alinaki/pen/jOxRwJJ
Ну и конечно, вынесу сюда ссылку на обсуждение (спасибо Илье Стрельцыну) внедрения в CSS значения border-radius равного round, чтобы убрать этот кажущийся «хак»: https://github.com/w3c/csswg-drafts/issues/6467
Вот только подвижек никаких, всем сразу захотелось больше вариантов.
#geometry #css
Что-то вчерашняя заметка про border-radius: 9999px внесла сумятицу в молодые умы. Я решил, что нужна ещё одна.
На сей раз с иллюстрацией
Итак. 9999px — это просто моё любимое число.
Взамен 9999px можно использовать 100vmax, infinity, calc(1px / 0). Все же помнят соглашение, что деление на ноль даёт бесконечность?
Результат будет один: мы получим скруглённый прямоугольник.
Если же вы выставите 50% — получится эллипс с радиусами в 50% ширины и 50% высоты, на иллюстрации справа.
Разница очевидна, и нам редко нужны эллипсы в жизни. А так хотелось квадруг… (squircle). Ну да ладно.
Обновил кодпен: https://codepen.io/alinaki/pen/jOxRwJJ
Ну и конечно, вынесу сюда ссылку на обсуждение (спасибо Илье Стрельцыну) внедрения в CSS значения border-radius равного round, чтобы убрать этот кажущийся «хак»: https://github.com/w3c/csswg-drafts/issues/6467
Вот только подвижек никаких, всем сразу захотелось больше вариантов.
#geometry #css
👍22
#видео дня
Многие до сих пор страдают от карго-культа при выборе формата изображений для своих проектов. Кому-то сказали использовать webp везде и прикрутить к сайту декодер, кто-то до сих пор считает, что SVG всегда лучше PNG для технических изображений, а кто-то — что нужно поставлять на каждое устройство свой набор разрешений.
Но для начала — нужно разобраться в самих форматах и понять, что не всё так просто. А не слепо следовать за не всегда разумными утверждениями.
https://www.youtube.com/watch?v=CMlXUS6e46w
#video #img #png #jpg #webp
Многие до сих пор страдают от карго-культа при выборе формата изображений для своих проектов. Кому-то сказали использовать webp везде и прикрутить к сайту декодер, кто-то до сих пор считает, что SVG всегда лучше PNG для технических изображений, а кто-то — что нужно поставлять на каждое устройство свой набор разрешений.
Но для начала — нужно разобраться в самих форматах и понять, что не всё так просто. А не слепо следовать за не всегда разумными утверждениями.
https://www.youtube.com/watch?v=CMlXUS6e46w
#video #img #png #jpg #webp
YouTube
004. Картинки как коробки. Что же там внутри? - Полина Гуртовая
👍10🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
#ссылка дня
Да-да, я знаю, знаю, что любить иконочные шрифты нынче не в моде, а в моде дико заморачиваться с SVG, символами...
Но вот типографика же не стоит на месте. Вариативные шрифты — уже реальность. Было бы глупо не применить их для иконок.
И таки да, встречайте, Material Symbols: https://material.io/blog/introducing-symbols
Вариативный иконочный шрифт от Google. Естественно, он есть на Google Fonts: https://fonts.google.com/icons
Естественно, вы можете скачать SVG и PNG.
Ну и куда же без плагина для Figma: https://www.figma.com/community/plugin/1088610476491668236/Material-Symbols, позволяющего настроить и экспортировать иконки как душе угодно.
Меня, правда, забавляет целый ползунок на fill, если вы понимаете, о чём я. Вообще, с ползунками на Google Fonts всё очень плохо... но речь не о них.
К слову, nice touch: там присутствуют специальные символы для iOS, они вариативности не подвластны. Забавный жест.
#fonts #icons #google #material
Да-да, я знаю, знаю, что любить иконочные шрифты нынче не в моде, а в моде дико заморачиваться с SVG, символами...
Но вот типографика же не стоит на месте. Вариативные шрифты — уже реальность. Было бы глупо не применить их для иконок.
И таки да, встречайте, Material Symbols: https://material.io/blog/introducing-symbols
Вариативный иконочный шрифт от Google. Естественно, он есть на Google Fonts: https://fonts.google.com/icons
Естественно, вы можете скачать SVG и PNG.
Ну и куда же без плагина для Figma: https://www.figma.com/community/plugin/1088610476491668236/Material-Symbols, позволяющего настроить и экспортировать иконки как душе угодно.
Меня, правда, забавляет целый ползунок на fill, если вы понимаете, о чём я. Вообще, с ползунками на Google Fonts всё очень плохо... но речь не о них.
К слову, nice touch: там присутствуют специальные символы для iOS, они вариативности не подвластны. Забавный жест.
#fonts #icons #google #material
🔥14👍4👎1
#заметка дня
Если вы делаете тестовое и вариантах приёмки сказано: «Архив или ссылка на репозиторий» всегда делайте репозиторий.
Оценивающему всё равно, сколько было потрачено времени. А вот процесс — интересен. Прислав архив вы сразу получаете мнимый минус. Его же надо распаковать, открыть в редакторе…
В репозитории на гитхабе достаточно нажать точку.
Ну и, очевидно, не пихайте всё одним коммитом.
Ну и читайте мою копию треда про собеседования, конечно: https://t.iss.one/htmlshit/1326
Не ссыте, котаны. Рассылайте резюме и ищите работу мечты.
Тока с умом.
#work
Если вы делаете тестовое и вариантах приёмки сказано: «Архив или ссылка на репозиторий» всегда делайте репозиторий.
Оценивающему всё равно, сколько было потрачено времени. А вот процесс — интересен. Прислав архив вы сразу получаете мнимый минус. Его же надо распаковать, открыть в редакторе…
В репозитории на гитхабе достаточно нажать точку.
Ну и, очевидно, не пихайте всё одним коммитом.
Ну и читайте мою копию треда про собеседования, конечно: https://t.iss.one/htmlshit/1326
Не ссыте, котаны. Рассылайте резюме и ищите работу мечты.
Тока с умом.
#work
❤16👍6👎1
#такое дня
Что-то меня задело сегодня высказывание, что я тут мало по вёрстке выкладываю.
По-моему, я тут только про вёрстку и выкладываю. И лично мне хотелось бы больше хардкора и историй за жизнь.
Но ок, завтра будет хардкор по вёрстке. Всё и сразу. Надо немного подготовиться только. Держитесь там.
Ну и как всегда — делитесь, что хотели бы увидеть.
#css #js #geometry
Что-то меня задело сегодня высказывание, что я тут мало по вёрстке выкладываю.
По-моему, я тут только про вёрстку и выкладываю. И лично мне хотелось бы больше хардкора и историй за жизнь.
Но ок, завтра будет хардкор по вёрстке. Всё и сразу. Надо немного подготовиться только. Держитесь там.
Ну и как всегда — делитесь, что хотели бы увидеть.
#css #js #geometry
❤13👍8❤🔥2😱2
#заметка дня
Что-то мы совсем забыли про полезные кусочки кода.
Например, как сделать красивую градиентную тень?
Да очень просто! Как и всегда, ответ на этот вопрос – псевдоэлемент. Поместили, подвинули, размыли. Готово.
Вот даже живой пример: https://codepen.io/argyleink/pen/WNxeBKa
Похоже на Philips Ambilight, не правда ли?
Добавляйте в ваши коллекции, но лучше – запоминайте принцип.
#css #gradient #shadow
Что-то мы совсем забыли про полезные кусочки кода.
Например, как сделать красивую градиентную тень?
Да очень просто! Как и всегда, ответ на этот вопрос – псевдоэлемент. Поместили, подвинули, размыли. Готово.
Вот даже живой пример: https://codepen.io/argyleink/pen/WNxeBKa
Похоже на Philips Ambilight, не правда ли?
Добавляйте в ваши коллекции, но лучше – запоминайте принцип.
#css #gradient #shadow
👍25👎1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня и #codepen
Лет шесть назад поступил мне заказ от агентства, работающего на некий автозавод. Они хотели «разрезать» машину под углом, представив её в двух ипостасях: для отдыха и для работы.
К сожалению, набор браузеров не позволял просто взять clip-path. Поэтому я даже немного завидую людям, который вошли в мир промо-сайтов в последние пару-тройку лет.
Что же пришлось делать? Немного геометрии! И забавных визуальных хаков.
Повернуть контейнер, сдвинуть его, чтобы совместить части. А вот внутреннюю часть контейнера — повернуть в обратном направлении и обратно же сдвигать на те же значения.
Где-то у меня даже завалялась бумажка с расчётами… если интересно будет кому — можно восстановить.
Ну и, конечно, с использованием CSS-переменных код стал в два раза меньше только за счёт того, что не пришлось клеить строки стилей.
Десктоп: https://codepen.io/alinaki/pen/MWGMLey?editors=0010
P. S. если вам нужны подобные совмещённые изображения — ищите по запросу macos dynamic wallpaper.
#css #geometry
Лет шесть назад поступил мне заказ от агентства, работающего на некий автозавод. Они хотели «разрезать» машину под углом, представив её в двух ипостасях: для отдыха и для работы.
К сожалению, набор браузеров не позволял просто взять clip-path. Поэтому я даже немного завидую людям, который вошли в мир промо-сайтов в последние пару-тройку лет.
Что же пришлось делать? Немного геометрии! И забавных визуальных хаков.
Повернуть контейнер, сдвинуть его, чтобы совместить части. А вот внутреннюю часть контейнера — повернуть в обратном направлении и обратно же сдвигать на те же значения.
Где-то у меня даже завалялась бумажка с расчётами… если интересно будет кому — можно восстановить.
Ну и, конечно, с использованием CSS-переменных код стал в два раза меньше только за счёт того, что не пришлось клеить строки стилей.
Десктоп: https://codepen.io/alinaki/pen/MWGMLey?editors=0010
P. S. если вам нужны подобные совмещённые изображения — ищите по запросу macos dynamic wallpaper.
#css #geometry
👍20🔥9
#статья дня
На сайте последней конференции по Next.js многих поразила WebGL-реализация прохождения света через призму. Возможно, не самая физически точная, но от этого не менее потрясающая.
Подобные вещи на промо-сайтах и лендингах определенно точно привлекают внимание не только широкой аудитории «на поиграться», но и разработчиков.
Вот только подробные посты о том, как это делать, выходят довольно редко. Почему-то чаще легче встретить достойное видео от того же Юрия Артюха, чем хорошую статью.
Да даже мой предыдущий пост должен был стать большой статьей… но лень да и формат Телеграма просто не позволяют это сделать.
Поэтому рекомендую обратить пристальное внимание на статью от, собственно, авторов призмы: https://vercel.com/blog/building-an-interactive-webgl-experience-in-next-js
Все шаги, от прототипа и расчетов до оптимизации производительности. Делается все на react-three-fiber. Настоятельно рекомендую пойти и пройти их самостоятельно.
#webgl #react
На сайте последней конференции по Next.js многих поразила WebGL-реализация прохождения света через призму. Возможно, не самая физически точная, но от этого не менее потрясающая.
Подобные вещи на промо-сайтах и лендингах определенно точно привлекают внимание не только широкой аудитории «на поиграться», но и разработчиков.
Вот только подробные посты о том, как это делать, выходят довольно редко. Почему-то чаще легче встретить достойное видео от того же Юрия Артюха, чем хорошую статью.
Да даже мой предыдущий пост должен был стать большой статьей… но лень да и формат Телеграма просто не позволяют это сделать.
Поэтому рекомендую обратить пристальное внимание на статью от, собственно, авторов призмы: https://vercel.com/blog/building-an-interactive-webgl-experience-in-next-js
Все шаги, от прототипа и расчетов до оптимизации производительности. Делается все на react-three-fiber. Настоятельно рекомендую пойти и пройти их самостоятельно.
#webgl #react
👍15