#заметка дня
Вчера в комментариях к посту возник логичный вопрос: «Почему фишкой дня назначена буквально строка из документации?»
Спрашивали — отвечаем.
Формат Telegram плохо подходит для лонгридов. Иногда это даже немного удручает: переходов по ссылкам на, на мой взгляд, интересные примеры весьма немного.
Некоторые люди даже отписываются, если видят, что пост в телеге — лишь тизер.
Ну, шутка ли, у поста с каким-нибудь #codepen дня может набраться 3-4 тысячи просмотров за всё время, а переходов по ссылке — ну сотня. Если повезёт. Впрочем, эта ситуация касается не только Telegram и не только меня, тут удивления нет.
Наибольшее число переходов набирают красивые картинки градиентов. А вы говорите, документация...
Теперь к фишкам дня. Мне бы хотелось сказать что-то пафосное вроде: «Мусор одного человека — сокровище другого», — вот только короткие сниппеты кода совсем не мусор. И я за много лет опыта повидал их достаточное количество.
И иногда сидишь и думаешь: «Так, наверное, все уже это знают».
Нет, не все.
И да, вы не поверите, но абсолютно все фишки вытекают из документаций и спецификаций различного рода. И авторы, более упорные, чем я, часто весь контент строят на вытаскивании определений из спецификаций и закидывания багов в браузеры, если что-то работает не так.
Основная фишка фишек — быть bite sized. На один укус. Чтобы никуда не ходить.
Но обратная связь — очень необходима. Реакции, комментарии — не стесняйтесь.
Раскачаем этот чат, котаны 🙂
Вчера в комментариях к посту возник логичный вопрос: «Почему фишкой дня назначена буквально строка из документации?»
Спрашивали — отвечаем.
Формат Telegram плохо подходит для лонгридов. Иногда это даже немного удручает: переходов по ссылкам на, на мой взгляд, интересные примеры весьма немного.
Некоторые люди даже отписываются, если видят, что пост в телеге — лишь тизер.
Ну, шутка ли, у поста с каким-нибудь #codepen дня может набраться 3-4 тысячи просмотров за всё время, а переходов по ссылке — ну сотня. Если повезёт. Впрочем, эта ситуация касается не только Telegram и не только меня, тут удивления нет.
Наибольшее число переходов набирают красивые картинки градиентов. А вы говорите, документация...
Теперь к фишкам дня. Мне бы хотелось сказать что-то пафосное вроде: «Мусор одного человека — сокровище другого», — вот только короткие сниппеты кода совсем не мусор. И я за много лет опыта повидал их достаточное количество.
И иногда сидишь и думаешь: «Так, наверное, все уже это знают».
Нет, не все.
И да, вы не поверите, но абсолютно все фишки вытекают из документаций и спецификаций различного рода. И авторы, более упорные, чем я, часто весь контент строят на вытаскивании определений из спецификаций и закидывания багов в браузеры, если что-то работает не так.
Основная фишка фишек — быть bite sized. На один укус. Чтобы никуда не ходить.
Но обратная связь — очень необходима. Реакции, комментарии — не стесняйтесь.
Раскачаем этот чат, котаны 🙂
❤30👍15🤡3🤩2🤬1
#баг дня
Наслаждаетесь экраном MacBook Pro или радуетесь новому wide gamut дисплею от, например, Dell?
Не спешите радоваться, Chome и тут нас подставил!
Обратите внимание на иллюстрацию. На ней — не продублированный текст, а просто пропущенный через SVG-фильтр, который фильтрует цвета и сдвигает контент через матрицу преобразований: https://codepen.io/thebabydino/pen/RwmPZVR
Автор этой прелести — Ана Тюдор (ну кто же ещё, больше таких крутых специалистов по фильтрам просто нет).
Так вот, есть маленькая проблема. На дисплеях с широким покрытием цветового поля Chrome находит зелёный цвет в красном и голубом. Где-то просчитались :) Из-за чего в фильтрах появляются серые полосы.
На Firefox и Safari таких проблем нет.
Чтобы проверить свой дисплей, можно пройти сюда: https://www.wide-gamut.com/test
Чтобы проверить баг, сюда: https://codepen.io/thebabydino/pen/vYqMvzv (должно быть только три чёрные полосы, без серых).
И вот сегодня утром Ана отправила баг в Chromium: https://issues.chromium.org/u/1/issues/373410239?pli=1
Если у вас оно повторяется, напишите, пожалуйста, подробности о своей платформе на трекере 🙏
Новые возможности хардвари — это, конечно, хорошо. Но лучше бы без багов, да.
#color #bug
Наслаждаетесь экраном MacBook Pro или радуетесь новому wide gamut дисплею от, например, Dell?
Не спешите радоваться, Chome и тут нас подставил!
Обратите внимание на иллюстрацию. На ней — не продублированный текст, а просто пропущенный через SVG-фильтр, который фильтрует цвета и сдвигает контент через матрицу преобразований: https://codepen.io/thebabydino/pen/RwmPZVR
Автор этой прелести — Ана Тюдор (ну кто же ещё, больше таких крутых специалистов по фильтрам просто нет).
Так вот, есть маленькая проблема. На дисплеях с широким покрытием цветового поля Chrome находит зелёный цвет в красном и голубом. Где-то просчитались :) Из-за чего в фильтрах появляются серые полосы.
На Firefox и Safari таких проблем нет.
Чтобы проверить свой дисплей, можно пройти сюда: https://www.wide-gamut.com/test
Чтобы проверить баг, сюда: https://codepen.io/thebabydino/pen/vYqMvzv (должно быть только три чёрные полосы, без серых).
И вот сегодня утром Ана отправила баг в Chromium: https://issues.chromium.org/u/1/issues/373410239?pli=1
Если у вас оно повторяется, напишите, пожалуйста, подробности о своей платформе на трекере 🙏
Новые возможности хардвари — это, конечно, хорошо. Но лучше бы без багов, да.
#color #bug
👍12❤2
#заметка дня
Итак, есть у жизни в Финляндии один нюанс.
Фильмы не дублируются, а идут в оригинале. Японский ли он, французский ли, немецкий, американский — звук в оригинале, и два набора субтитров, шведские и финские.
Дублируются же только мультики и фильмы, рассчитанные на аудиторию до 12 лет. И дублируются безальтернативно, субтитры не прилагаются.
И вот ты захотел посмотреть в кино «Дикого робота», но не знаешь финского.
Да-да, после пяти лет проживания я всё ещё не готов.
Что же делать?
Готовить своё веб-приложение для просмотра и синхронизации субтитров, конечно же!
На иллюстрациях — скриншоты процесса создания и результат :)
Неплохо для сорока минут общения с ChatGPT, не правда ли? :)
Репозиторий: https://github.com/bekharsky/subtitles
Демо: https://bekharsky.github.io/subtitles
Естественно, в ходе эксплуатации выяснились некоторые проблемы, и начать, как минимум, надо с более простой синхронизации и тёмной темы.
Но начало положено! Потрясающее ощущение, когда от идеи до рабочего прототипа проходит полчаса.
#ai #subtitles #life #app
Итак, есть у жизни в Финляндии один нюанс.
Фильмы не дублируются, а идут в оригинале. Японский ли он, французский ли, немецкий, американский — звук в оригинале, и два набора субтитров, шведские и финские.
Дублируются же только мультики и фильмы, рассчитанные на аудиторию до 12 лет. И дублируются безальтернативно, субтитры не прилагаются.
И вот ты захотел посмотреть в кино «Дикого робота», но не знаешь финского.
Да-да, после пяти лет проживания я всё ещё не готов.
Что же делать?
Готовить своё веб-приложение для просмотра и синхронизации субтитров, конечно же!
На иллюстрациях — скриншоты процесса создания и результат :)
Неплохо для сорока минут общения с ChatGPT, не правда ли? :)
Репозиторий: https://github.com/bekharsky/subtitles
Демо: https://bekharsky.github.io/subtitles
Естественно, в ходе эксплуатации выяснились некоторые проблемы, и начать, как минимум, надо с более простой синхронизации и тёмной темы.
Но начало положено! Потрясающее ощущение, когда от идеи до рабочего прототипа проходит полчаса.
#ai #subtitles #life #app
👍23🤩6❤2
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Вы только посмотрите на эту красоту!
Да, я в курсе, что компонентов для красивого прокручивания цифр у нас какое-то невероятное количество, но до сих пор не было ничего настолько универсального и простого в использовании.
Итак, встречайте: NumberFlow от Максвелла Барвиана.
GitHub: https://github.com/barvian/number-flow
Документация и демо: https://number-flow.barvian.me/
Настраивается формат чисел, параметры анимированных переходов. И, собственно, никаких скрытых зависимостей.
Прекрасное.
#react #number #transition
Вы только посмотрите на эту красоту!
Да, я в курсе, что компонентов для красивого прокручивания цифр у нас какое-то невероятное количество, но до сих пор не было ничего настолько универсального и простого в использовании.
Итак, встречайте: NumberFlow от Максвелла Барвиана.
GitHub: https://github.com/barvian/number-flow
Документация и демо: https://number-flow.barvian.me/
Настраивается формат чисел, параметры анимированных переходов. И, собственно, никаких скрытых зависимостей.
Прекрасное.
#react #number #transition
❤34🤩10👍7
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня
Вчера не удержался и вечером всё-таки допилил приложение для параллельного просмотра субтитров, о котором писал тут: https://t.iss.one/htmlshit/3204.
1. Теперь сдвиг по времени задаётся простым кликом по фразе.
2. Когда скроллишь, автоматического выделения следующей фразы не происходит, но автоскролл восстанавливается, если докрутить назад.
3. Тёмная тема! Я не понимаю, как мне это сразу в голову не пришло. В кинотеатре вчера было немного стыдно.
Теперь мне надо немного подумать о применимости.
С точки зрения изучения языка — очень хорошо, потому что теперь я могу вывести на стриминге и озвучку и субтитры на одном языке, а подглядывать в другой. Тогда надо бы добавить кнопку Паузы, заодно.
Да, есть расширения для браузеров, выводящие второй набор субтитров на тот же экран, но:
а) на телевизоре-то их нет
б) всё превращается в месиво
Плюс не оставляет идея сделать из этого приложение для смарт-часов.
Исходный код и сайт всё те же:
GitHub: https://github.com/bekharsky/subtitles
Link: https://bekharsky.github.io/subtitles/
На одном из альтернативных приложений я увидел ленту, отображающую плотность фраз на единицу времени. Как карта кода в вашем редакторе. Почему-то очень импонирует эта идея, надо попробовать.
Ну и добавить регулятор скорости воспроихзведения и точную подстройку, конечно же.
#react #movie #subtitles
Вчера не удержался и вечером всё-таки допилил приложение для параллельного просмотра субтитров, о котором писал тут: https://t.iss.one/htmlshit/3204.
1. Теперь сдвиг по времени задаётся простым кликом по фразе.
2. Когда скроллишь, автоматического выделения следующей фразы не происходит, но автоскролл восстанавливается, если докрутить назад.
3. Тёмная тема! Я не понимаю, как мне это сразу в голову не пришло. В кинотеатре вчера было немного стыдно.
Теперь мне надо немного подумать о применимости.
С точки зрения изучения языка — очень хорошо, потому что теперь я могу вывести на стриминге и озвучку и субтитры на одном языке, а подглядывать в другой. Тогда надо бы добавить кнопку Паузы, заодно.
Да, есть расширения для браузеров, выводящие второй набор субтитров на тот же экран, но:
а) на телевизоре-то их нет
б) всё превращается в месиво
Плюс не оставляет идея сделать из этого приложение для смарт-часов.
Исходный код и сайт всё те же:
GitHub: https://github.com/bekharsky/subtitles
Link: https://bekharsky.github.io/subtitles/
На одном из альтернативных приложений я увидел ленту, отображающую плотность фраз на единицу времени. Как карта кода в вашем редакторе. Почему-то очень импонирует эта идея, надо попробовать.
Ну и добавить регулятор скорости воспроихзведения и точную подстройку, конечно же.
#react #movie #subtitles
👍21❤5
#фишка дня
Мы долго этого ждали! В инструментах разработчика Chrome Canary 131 появилась специальная панель с подсказками от ИИ.
Теперь вовсе необязательно все запросы к гугловому ИИ писать в консоли :)
Кликаем по Ask AI и открывается диалоговый интерфейс, в котором можно попросить ИИ описать компонент, анимировать его, узнать побольше.
Новость в блоге разработчиков: https://developer.chrome.com/docs/devtools/ai-assistance
Как нетрудно догадаться, эта штука позволяет задать вопрос по любой части сайта и получить ответ, основанный на коде проекта. И не просто уровня "какие слушатели событий навешаны на ссылку", но и, например, условия, при которых ссылка может появиться и код, который влияет на её поведение.
Ну, то есть, всё то, что при должном уровне умений может осуществить и человек, только гораздо быстрее.
По-моему, это очень круто. Ведь обучаться на чужом коде — это наше всё.
И, естественно, можно попросить ИИ исправить ваш собственный код! Пруф: https://x.com/jecfish/status/1846832374757155134
#ai #devtools
Мы долго этого ждали! В инструментах разработчика Chrome Canary 131 появилась специальная панель с подсказками от ИИ.
Теперь вовсе необязательно все запросы к гугловому ИИ писать в консоли :)
Кликаем по Ask AI и открывается диалоговый интерфейс, в котором можно попросить ИИ описать компонент, анимировать его, узнать побольше.
Новость в блоге разработчиков: https://developer.chrome.com/docs/devtools/ai-assistance
Как нетрудно догадаться, эта штука позволяет задать вопрос по любой части сайта и получить ответ, основанный на коде проекта. И не просто уровня "какие слушатели событий навешаны на ссылку", но и, например, условия, при которых ссылка может появиться и код, который влияет на её поведение.
Ну, то есть, всё то, что при должном уровне умений может осуществить и человек, только гораздо быстрее.
По-моему, это очень круто. Ведь обучаться на чужом коде — это наше всё.
И, естественно, можно попросить ИИ исправить ваш собственный код! Пруф: https://x.com/jecfish/status/1846832374757155134
#ai #devtools
1👍17🤩3❤2
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Что такое "упоролся"?
Ну вот, например, Паскуаль Витьелло сел и сделал 50 инпутов разного рода и задач. От простых текстовых и т. н. input group, которые когда-то популяризовал Bootstrap до полей ввода OTP и банковских карт.
Вот: https://originui.com/inputs
Есть один нюанс... реализовано всё под Next.js и стилизовано Tailwind.css. Что, мягко говоря, накладывает некоторые ограничения.
Но!
Я бы не писал пост, не будь некоего "но", не правда ли? :)
Часть полей ввода реализовано при помощи вспомогательных компонентов и хуков, знать которые весьма полезно: Input OTP, React Aria, react-phone-number-input... Таким образом эти самые компоненты являют собой прекрасный пример композиции.
Использовать их или нет — решать вам. Но идея хорошая.
#next.js #react #ui #components
Что такое "упоролся"?
Ну вот, например, Паскуаль Витьелло сел и сделал 50 инпутов разного рода и задач. От простых текстовых и т. н. input group, которые когда-то популяризовал Bootstrap до полей ввода OTP и банковских карт.
Вот: https://originui.com/inputs
Есть один нюанс... реализовано всё под Next.js и стилизовано Tailwind.css. Что, мягко говоря, накладывает некоторые ограничения.
Но!
Я бы не писал пост, не будь некоего "но", не правда ли? :)
Часть полей ввода реализовано при помощи вспомогательных компонентов и хуков, знать которые весьма полезно: Input OTP, React Aria, react-phone-number-input... Таким образом эти самые компоненты являют собой прекрасный пример композиции.
Использовать их или нет — решать вам. Но идея хорошая.
#next.js #react #ui #components
👍32
#фишка дня
...от Никиты Голубова aka @midfilecrisis в Twitter.
В WebStorm из коробки (а значит, и в том же PhpStorm) можно получить предпросмотр стилей для выбранного класса. Включая CSS Modules.
Option-Space на macOS, или через Cmd, зависит от выбранных хоткеев. Ctrl+Shift+I на остальных системах.
Аналогичное расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
...более 6 миллионов установок, ик.
#css #webstorm #phpstorm #vscode #plugin #extension #бородач
...от Никиты Голубова aka @midfilecrisis в Twitter.
В WebStorm из коробки (а значит, и в том же PhpStorm) можно получить предпросмотр стилей для выбранного класса. Включая CSS Modules.
Option-Space на macOS, или через Cmd, зависит от выбранных хоткеев. Ctrl+Shift+I на остальных системах.
Аналогичное расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
...более 6 миллионов установок, ик.
#css #webstorm #phpstorm #vscode #plugin #extension #бородач
👍14🤩2
#новость дня
Ubuntu — 20 лет!
https://ubuntu.com/20years
20 октября 2004 года Марк Шаттлворт — на тот момент уже весьма известный предприниматель, основавший Thawte — представил миру основанный на Debian дистрибутив Linux — Ubuntu.
В переводе с зулу — человечность.
Так вот, одним из ключевых отличий от остальных дистрибутивов было бесплатное распространение на компакт-дисках. Но не сразу, года так с 2005.
Итак, на дворе 2005 год, ты толькопоступил в первый раз вылетел из университета, и тут оказывается, что можно указать свой адрес на сайте и получить дистрибутив операционной системы, не скачивая его! Широкополосный доступ был ещё далеко не везде.
Собственно, что я тогда и сделал. И так потихоньку где-то с 2007 по 2018 год Ubuntu стала моей основной операционной системой. Целый новый мир! Ведь на диске ещё умещалась куча нужных программ. И офисный редактор, и IDE, и GIMP...
Потом, конечно же, я перелез на рабочий мак. А сейчас на личном ноутбуке Fedora, просто потому что.
Количество людей, которых я пересадил на Ubuntu исчисляется десятками. Естественно, моя семья и друзья :) Со многими это было легко, достаточно было показать куб.
О, вы не в курсе, что такое куб? Compiz, не? Эффекты сгорающих окон? Ну как же, смотрите: https://www.youtube.com/watch?v=OKtpnvvFlMc
Господи, вы не представляете как сложно найти видео сносного качества, это буквально следы утерянной цивилизации! Рабочие столы наигрались в эффекты и пошли немного по другому пути, сохранив суть.
В общем, праздник-праздник, пусть нынче Ubuntu и не является моим первоочередным выбором, она навсегда на моих серверах :)
#linux #ubuntu #birthday
Ubuntu — 20 лет!
https://ubuntu.com/20years
20 октября 2004 года Марк Шаттлворт — на тот момент уже весьма известный предприниматель, основавший Thawte — представил миру основанный на Debian дистрибутив Linux — Ubuntu.
В переводе с зулу — человечность.
Так вот, одним из ключевых отличий от остальных дистрибутивов было бесплатное распространение на компакт-дисках. Но не сразу, года так с 2005.
Итак, на дворе 2005 год, ты только
Собственно, что я тогда и сделал. И так потихоньку где-то с 2007 по 2018 год Ubuntu стала моей основной операционной системой. Целый новый мир! Ведь на диске ещё умещалась куча нужных программ. И офисный редактор, и IDE, и GIMP...
Потом, конечно же, я перелез на рабочий мак. А сейчас на личном ноутбуке Fedora, просто потому что.
Количество людей, которых я пересадил на Ubuntu исчисляется десятками. Естественно, моя семья и друзья :) Со многими это было легко, достаточно было показать куб.
О, вы не в курсе, что такое куб? Compiz, не? Эффекты сгорающих окон? Ну как же, смотрите: https://www.youtube.com/watch?v=OKtpnvvFlMc
Господи, вы не представляете как сложно найти видео сносного качества, это буквально следы утерянной цивилизации! Рабочие столы наигрались в эффекты и пошли немного по другому пути, сохранив суть.
В общем, праздник-праздник, пусть нынче Ubuntu и не является моим первоочередным выбором, она навсегда на моих серверах :)
#linux #ubuntu #birthday
🤩11👍7❤1
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Тут на днях разработчики библиотеки для drag-n-drop react-beautiful-dnd объявили о прекращении разработки и пометили библиотеку как устаревшую.
Это значит, что теперь при попытке установить её вы получите предупреждение от npm, а 30 апреля 2025 года будет архивирован и репозиторий.
Но было бы странно, если бы всё просто растворилось в воздухе, правда же?
Поэтому, встречайте: Pragmaric Drag&Drop от Atlassian!
react-beautiful-dnd так-то тоже от Atlassian
Репозиторий: https://github.com/atlassian/pragmatic-drag-and-drop
Документация: https://atlassian.design/components/pragmatic-drag-and-drop/about
Дока прекрасная, очень советую.
Разработчики переосмыслили весь опыт, полученный при разработке react-beautiful-dnd и применили его в новом проекте.
И, прежде всего, Pragmatic D&D — не зависит от фреймворка!
Весь рендеринг на вашей стороне, а сама библиотека щедро усыпает всё событиями и нивелирует разницу имплементаций между браузерами. А ещё онв потрясающе маленькая!
И да, естественно именно Pragmatic используется в Trello, Jira и Confluence.
В общем, король умер, да здравствует король!
#ui #dnd
Тут на днях разработчики библиотеки для drag-n-drop react-beautiful-dnd объявили о прекращении разработки и пометили библиотеку как устаревшую.
Это значит, что теперь при попытке установить её вы получите предупреждение от npm, а 30 апреля 2025 года будет архивирован и репозиторий.
Но было бы странно, если бы всё просто растворилось в воздухе, правда же?
Поэтому, встречайте: Pragmaric Drag&Drop от Atlassian!
react-beautiful-dnd так-то тоже от Atlassian
Репозиторий: https://github.com/atlassian/pragmatic-drag-and-drop
Документация: https://atlassian.design/components/pragmatic-drag-and-drop/about
Дока прекрасная, очень советую.
Разработчики переосмыслили весь опыт, полученный при разработке react-beautiful-dnd и применили его в новом проекте.
И, прежде всего, Pragmatic D&D — не зависит от фреймворка!
Весь рендеринг на вашей стороне, а сама библиотека щедро усыпает всё событиями и нивелирует разницу имплементаций между браузерами. А ещё онв потрясающе маленькая!
И да, естественно именно Pragmatic используется в Trello, Jira и Confluence.
В общем, король умер, да здравствует король!
#ui #dnd
❤17👍8👎1
#видео дня
Внимание! Attention! Pozor! Huomio! Контент не по React на нашем канале🤯
Решил я посмотреть на этот ваш Svelte, ведь как раз пару дней назад вышла пятая версия: https://github.com/sveltejs/svelte/releases
Ссылка на гитхаб, потому что офсайт ленятся обновлять. Ну и ещё докидывают какое-то несусветное число патчей.
Наверное, потому и не обновляют офсайт.
Ну не суть. Короче, я вам тут принёс плейлист для быстрого (сравнительно) старта в Svelte, основанный как раз на пятой версии: https://www.youtube.com/playlist?list=PLA9WiRZ-IS_zU2j29HQy478UCuHyDZQXC
Я сам видео смотрю редко, чаще пролистываю, но я точно знаю, что очень многим заходит такой формат, так что почему бы и нет.
В любом случае, есть вероятность, что скоро я выскажу своё фи. Или нет.
Есть тут свелтоводы, остались ещё? :)
#svelte #video #education
Внимание! Attention! Pozor! Huomio! Контент не по React на нашем канале
Решил я посмотреть на этот ваш Svelte, ведь как раз пару дней назад вышла пятая версия: https://github.com/sveltejs/svelte/releases
Ссылка на гитхаб, потому что офсайт ленятся обновлять. Ну и ещё докидывают какое-то несусветное число патчей.
Наверное, потому и не обновляют офсайт.
Ну не суть. Короче, я вам тут принёс плейлист для быстрого (сравнительно) старта в Svelte, основанный как раз на пятой версии: https://www.youtube.com/playlist?list=PLA9WiRZ-IS_zU2j29HQy478UCuHyDZQXC
Я сам видео смотрю редко, чаще пролистываю, но я точно знаю, что очень многим заходит такой формат, так что почему бы и нет.
В любом случае, есть вероятность, что скоро я выскажу своё фи. Или нет.
Есть тут свелтоводы, остались ещё? :)
#svelte #video #education
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4👍3
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Мне очень нравится пытаться учить разработку под 3D и WebGL в частности. Опыт имеется, но минимальный в рамках разработки промо-сайтов.
Шум там наложить, модельку картой нормалей увешать...
Поэтому я очень люблю статьи, которые объясняют работу с шейдерами на примерах. Например, темой статьи, ссылку на которую оставлю ниже, является имитация ЭЛТ-мониторов и телевизоров.
Да-да, под ретро-игры!
Ссылка: https://blog.maximeheckel.com/posts/the-art-of-dithering-and-retro-shading-web/
Даны базовые принципы квантизации изображений, дизеринга и результат приводится как на GLSL, так и готовая сцена на react-three.
Очень круто выглядит.
#webgl #shader
Мне очень нравится пытаться учить разработку под 3D и WebGL в частности. Опыт имеется, но минимальный в рамках разработки промо-сайтов.
Шум там наложить, модельку картой нормалей увешать...
Поэтому я очень люблю статьи, которые объясняют работу с шейдерами на примерах. Например, темой статьи, ссылку на которую оставлю ниже, является имитация ЭЛТ-мониторов и телевизоров.
Да-да, под ретро-игры!
Ссылка: https://blog.maximeheckel.com/posts/the-art-of-dithering-and-retro-shading-web/
Даны базовые принципы квантизации изображений, дизеринга и результат приводится как на GLSL, так и готовая сцена на react-three.
Очень круто выглядит.
#webgl #shader
👍7
This media is not supported in your browser
VIEW IN TELEGRAM
#ссылка дня
Что бы я делал без своих любимых подписчиков :) Вот только что мне напомнили, что Паскуаль Витьелло, который в прошлый раз упоролся и сделал 50 разных полей ввода, сейчас снова упоролся.
И сделал 50 кнопок!
Ссылка на инпуты, если кто не помнит: https://t.iss.one/htmlshit/3212
А вот и кнопки: https://originui.com/buttons
И, по всей видимости, тут произошло недопонимание и на самом-то деле кнопки и инпуты — они не для Next.js, а являются прямым расширением shadcn: https://ui.shadcn.com/
Об этом вскользь упомянуто на их гитхабе: https://github.com/origin-space/originui
В общем, вдохновляемся, учимся композиции и, возможно, даже используем!
#ui #react #shadcn
Что бы я делал без своих любимых подписчиков :) Вот только что мне напомнили, что Паскуаль Витьелло, который в прошлый раз упоролся и сделал 50 разных полей ввода, сейчас снова упоролся.
И сделал 50 кнопок!
Ссылка на инпуты, если кто не помнит: https://t.iss.one/htmlshit/3212
А вот и кнопки: https://originui.com/buttons
И, по всей видимости, тут произошло недопонимание и на самом-то деле кнопки и инпуты — они не для Next.js, а являются прямым расширением shadcn: https://ui.shadcn.com/
Об этом вскользь упомянуто на их гитхабе: https://github.com/origin-space/originui
В общем, вдохновляемся, учимся композиции и, возможно, даже используем!
#ui #react #shadcn
👍19
#расширение дня
Дал слабину и где-то в глубине кода указал
Воспользовался
И при этом не используешь WebStorm?
Есть решение! Расширение для VS Code any-xray от Дана Вандеркама: https://marketplace.visualstudio.com/items?itemName=danvk.any-xray
Про DefinitelyTyped не шутка, всякое бывает: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b0ad06b09bd5547cf6f01a8355cbcb309d3f5e24/types/find-package-json/package-json.d.ts#L449
У React в типах, кстати, тоже.
Это не плохо само по себе, не все хотят заниматься ментальной гимнастикой там, где в целом можно спихнуть проверки на пользователя типов.
Но подсветить такие случаи, чтобы не попасть впросак — удобно.
#vscode #typescript
Дал слабину и где-то в глубине кода указал
any?Воспользовался
DefinitelyTyped, не проверив?И при этом не используешь WebStorm?
Есть решение! Расширение для VS Code any-xray от Дана Вандеркама: https://marketplace.visualstudio.com/items?itemName=danvk.any-xray
Про DefinitelyTyped не шутка, всякое бывает: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b0ad06b09bd5547cf6f01a8355cbcb309d3f5e24/types/find-package-json/package-json.d.ts#L449
У React в типах, кстати, тоже.
Это не плохо само по себе, не все хотят заниматься ментальной гимнастикой там, где в целом можно спихнуть проверки на пользователя типов.
Но подсветить такие случаи, чтобы не попасть впросак — удобно.
#vscode #typescript
👍2🤩1
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Разработчики браузеров, даже те, что пишут на движке Blink от Chrome, очень хотят, чтобы их работу заметили на их продукт в итоге обратили внимание. И достигают они этого разными способами.
Arc активно переосмысляет интерфейс, Vivaldi играет на чувстве ностальгии, Яндекс.Браузер предлагаетзакладки перевод и озвучание видео в реальном времени, Opera — встраивает VPN.
А ребята из Microsoft Edge — дорабатывают девтулзы. Почти всё новое из последних релизов Chrome — от них.
И вот чтобы покончить все споры на тему производительности CSS, ещё в Chrome 125 бэкпортнули статистику селекторов на вкладке оценки производительности.
Речь там, как правило, о микросекундах в худшем случае, но вдруг...
И, пользуясь случаем, хочу напомнить о замечательном ресурсе Can I DevTools, где можно найти разные фишки работы со средствами разработчика: https://www.canidev.tools/find-expensive-selectors/edge
#css #performance #devtools
Разработчики браузеров, даже те, что пишут на движке Blink от Chrome, очень хотят, чтобы их работу заметили на их продукт в итоге обратили внимание. И достигают они этого разными способами.
Arc активно переосмысляет интерфейс, Vivaldi играет на чувстве ностальгии, Яндекс.Браузер предлагает
А ребята из Microsoft Edge — дорабатывают девтулзы. Почти всё новое из последних релизов Chrome — от них.
И вот чтобы покончить все споры на тему производительности CSS, ещё в Chrome 125 бэкпортнули статистику селекторов на вкладке оценки производительности.
Речь там, как правило, о микросекундах в худшем случае, но вдруг...
И, пользуясь случаем, хочу напомнить о замечательном ресурсе Can I DevTools, где можно найти разные фишки работы со средствами разработчика: https://www.canidev.tools/find-expensive-selectors/edge
#css #performance #devtools
👍18🤩4❤3
#новость дня
Итак, JetBrains WebStorm и Rider присоединяются к программе бесплатного некоммерческого использования.
Что это означает? Ну, буквально, использовать их для обучения и вне бизнеса вообще теперь можно бесплатно и без ограничений.
Новость на офсайте: https://blog.jetbrains.com/blog/2024/10/24/webstorm-and-rider-are-now-free-for-non-commercial-use/
Стоит заметить, что до этого такую же модель лицензирования получили RustRover и Aqua (IDE заточенная под автоматическое тестирование).
У каждого свои причины использовать IDE против настройки VS Code. Для меня таковым стал прекрасный отладчик (найденные мной решения для Jest в том же VS Code требуют больше усилий для настройки, капризны и предоставляют меньше возможностей).
Но мне-то контора оплачивает лицензию.
Правда, для скачивания из РФ придётся воспользоваться VPN. Да и в целом есть вопросики.
Но рыночек порешал в нужную сторону!
#ide #webstorm
Итак, JetBrains WebStorm и Rider присоединяются к программе бесплатного некоммерческого использования.
Что это означает? Ну, буквально, использовать их для обучения и вне бизнеса вообще теперь можно бесплатно и без ограничений.
Новость на офсайте: https://blog.jetbrains.com/blog/2024/10/24/webstorm-and-rider-are-now-free-for-non-commercial-use/
Стоит заметить, что до этого такую же модель лицензирования получили RustRover и Aqua (IDE заточенная под автоматическое тестирование).
У каждого свои причины использовать IDE против настройки VS Code. Для меня таковым стал прекрасный отладчик (найденные мной решения для Jest в том же VS Code требуют больше усилий для настройки, капризны и предоставляют меньше возможностей).
Но мне-то контора оплачивает лицензию.
Правда, для скачивания из РФ придётся воспользоваться VPN. Да и в целом есть вопросики.
Но рыночек порешал в нужную сторону!
#ide #webstorm
🤩12👍9🤡4❤1
#инструмент дня
Да-да, я в курсе, что писать SQL-запросы, возможно, не самая частая компетенция у фронтендеров, но мы же все хотим расти, не правда ли?
А запросы ведь могут стать достаточно сложными. Конечно, есть EXPLAIN, но его вывод по сложности может сравниться с самим запросом. Если не сложнее.
К счастью, есть визуальные инструменты! И одним из таких является MySQL Visual Explain.
Уникальное название, согласен.
Ссылка: https://mysqlexplain.com/
Рекомендую посмотреть примеры и попробовать самим, если MySQL является частью вашего стека.
Кстати, у них даже API есть, одним из примеров использования является плагин для Laravel: https://github.com/tpetry/laravel-mysql-explain
То есть, вариант использования может быть таким:
1. Прогнали интеграционные тесты
2. Нашли медленные запросы с помощью telescope
3. Отправили их на визуальный анализ
4. ...
5. Пофиксили!
Да и для обучения — бесценно.
#mysql #explain #laravel
Да-да, я в курсе, что писать SQL-запросы, возможно, не самая частая компетенция у фронтендеров, но мы же все хотим расти, не правда ли?
А запросы ведь могут стать достаточно сложными. Конечно, есть EXPLAIN, но его вывод по сложности может сравниться с самим запросом. Если не сложнее.
К счастью, есть визуальные инструменты! И одним из таких является MySQL Visual Explain.
Уникальное название, согласен.
Ссылка: https://mysqlexplain.com/
Рекомендую посмотреть примеры и попробовать самим, если MySQL является частью вашего стека.
Кстати, у них даже API есть, одним из примеров использования является плагин для Laravel: https://github.com/tpetry/laravel-mysql-explain
То есть, вариант использования может быть таким:
1. Прогнали интеграционные тесты
2. Нашли медленные запросы с помощью telescope
3. Отправили их на визуальный анализ
4. ...
5. Пофиксили!
Да и для обучения — бесценно.
#mysql #explain #laravel
❤9
This media is not supported in your browser
VIEW IN TELEGRAM
#игра дня
Ну, различного рода лабиринты и Tower Defence на чистом CSS мы видели. Все требуют использования мыши, поскольку по чекбоксам надо кликать.
В принципе, можно и табом с пробелом, но не то...
Итак, встречайте: первая игра на чистом CSS, в которой можно использовать стрелочки с клавиатуры! Автор — Темани Афиф, знакомый нам по CSS-фигурам.
Помоги Марио собрать все монетки!
Построена на использовании Scroll Timeline API и, соответственно, голова Марио — не что иное, как пересечение "лифтов" скроллбаров. И мышью (ну ок, тачпадом) игра проходится даже легче.
https://codepen.io/t_afif/full/OJYbVWP
Делитесь вашими скриншотами с лучшим временем :)
#css #scroll #game
Ну, различного рода лабиринты и Tower Defence на чистом CSS мы видели. Все требуют использования мыши, поскольку по чекбоксам надо кликать.
В принципе, можно и табом с пробелом, но не то...
Итак, встречайте: первая игра на чистом CSS, в которой можно использовать стрелочки с клавиатуры! Автор — Темани Афиф, знакомый нам по CSS-фигурам.
Помоги Марио собрать все монетки!
Построена на использовании Scroll Timeline API и, соответственно, голова Марио — не что иное, как пересечение "лифтов" скроллбаров. И мышью (ну ок, тачпадом) игра проходится даже легче.
https://codepen.io/t_afif/full/OJYbVWP
Делитесь вашими скриншотами с лучшим временем :)
#css #scroll #game
❤9🤩2