#такое дня
Ну что же, я так долго на одном месте в жизни не работал!
Пять лет в Supermetrics. От сеньора через тимлида, в техлиды.
В компании забавные традиции в честь достижения пятилетия: кастомный мерч — black hoodie — и участие в Black Hoodie Club, когда все пенсионеры компании собираются вместе и обсуждают, как мы дошли до жизни такой.
Конечно, я благодарен Supermetrics. Всё, что у меня есть в эмиграции, есть благодаря им :)
Приходил я в компанию на 50 человек, а теперь — 350.
Только малость поднадоело работать в одном направлении, что немного сбивает привкус празднования, но это преодолимо.
#anniversary #superversary
Ну что же, я так долго на одном месте в жизни не работал!
Пять лет в Supermetrics. От сеньора через тимлида, в техлиды.
В компании забавные традиции в честь достижения пятилетия: кастомный мерч — black hoodie — и участие в Black Hoodie Club, когда все пенсионеры компании собираются вместе и обсуждают, как мы дошли до жизни такой.
Конечно, я благодарен Supermetrics. Всё, что у меня есть в эмиграции, есть благодаря им :)
Приходил я в компанию на 50 человек, а теперь — 350.
Только малость поднадоело работать в одном направлении, что немного сбивает привкус празднования, но это преодолимо.
#anniversary #superversary
#фишка дня от Кори Хауса
Если для получения значения useState по-умолчанию требуется вызвать функцию, то стоит просто дать ссылку на неё, без вызова.
Почему нельзя просто вызвать? Очевидно, потому что функция будет исполняться на каждый ререндер, что не совсем то, что нам нужно.
Да, естественно, это есть в документации: https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state
Вот только стоит запомнить, что в режиме разработчика, aka StrictMode, инициализаторы будут вызваны дважды, потому что функция-инициализатор должна быть чистой (возвращать одно и то же значение для идентичных аргументов). И React таким способом хочет нас предостеречь.
#react #useState
Если для получения значения useState по-умолчанию требуется вызвать функцию, то стоит просто дать ссылку на неё, без вызова.
Почему нельзя просто вызвать? Очевидно, потому что функция будет исполняться на каждый ререндер, что не совсем то, что нам нужно.
Да, естественно, это есть в документации: https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state
Вот только стоит запомнить, что в режиме разработчика, aka StrictMode, инициализаторы будут вызваны дважды, потому что функция-инициализатор должна быть чистой (возвращать одно и то же значение для идентичных аргументов). И React таким способом хочет нас предостеречь.
#react #useState
#заметка дня
Вчера в комментариях к посту возник логичный вопрос: «Почему фишкой дня назначена буквально строка из документации?»
Спрашивали — отвечаем.
Формат Telegram плохо подходит для лонгридов. Иногда это даже немного удручает: переходов по ссылкам на, на мой взгляд, интересные примеры весьма немного.
Некоторые люди даже отписываются, если видят, что пост в телеге — лишь тизер.
Ну, шутка ли, у поста с каким-нибудь #codepen дня может набраться 3-4 тысячи просмотров за всё время, а переходов по ссылке — ну сотня. Если повезёт. Впрочем, эта ситуация касается не только Telegram и не только меня, тут удивления нет.
Наибольшее число переходов набирают красивые картинки градиентов. А вы говорите, документация...
Теперь к фишкам дня. Мне бы хотелось сказать что-то пафосное вроде: «Мусор одного человека — сокровище другого», — вот только короткие сниппеты кода совсем не мусор. И я за много лет опыта повидал их достаточное количество.
И иногда сидишь и думаешь: «Так, наверное, все уже это знают».
Нет, не все.
И да, вы не поверите, но абсолютно все фишки вытекают из документаций и спецификаций различного рода. И авторы, более упорные, чем я, часто весь контент строят на вытаскивании определений из спецификаций и закидывания багов в браузеры, если что-то работает не так.
Основная фишка фишек — быть bite sized. На один укус. Чтобы никуда не ходить.
Но обратная связь — очень необходима. Реакции, комментарии — не стесняйтесь.
Раскачаем этот чат, котаны 🙂
Вчера в комментариях к посту возник логичный вопрос: «Почему фишкой дня назначена буквально строка из документации?»
Спрашивали — отвечаем.
Формат Telegram плохо подходит для лонгридов. Иногда это даже немного удручает: переходов по ссылкам на, на мой взгляд, интересные примеры весьма немного.
Некоторые люди даже отписываются, если видят, что пост в телеге — лишь тизер.
Ну, шутка ли, у поста с каким-нибудь #codepen дня может набраться 3-4 тысячи просмотров за всё время, а переходов по ссылке — ну сотня. Если повезёт. Впрочем, эта ситуация касается не только Telegram и не только меня, тут удивления нет.
Наибольшее число переходов набирают красивые картинки градиентов. А вы говорите, документация...
Теперь к фишкам дня. Мне бы хотелось сказать что-то пафосное вроде: «Мусор одного человека — сокровище другого», — вот только короткие сниппеты кода совсем не мусор. И я за много лет опыта повидал их достаточное количество.
И иногда сидишь и думаешь: «Так, наверное, все уже это знают».
Нет, не все.
И да, вы не поверите, но абсолютно все фишки вытекают из документаций и спецификаций различного рода. И авторы, более упорные, чем я, часто весь контент строят на вытаскивании определений из спецификаций и закидывания багов в браузеры, если что-то работает не так.
Основная фишка фишек — быть bite sized. На один укус. Чтобы никуда не ходить.
Но обратная связь — очень необходима. Реакции, комментарии — не стесняйтесь.
Раскачаем этот чат, котаны 🙂
#баг дня
Наслаждаетесь экраном 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 лет. И дублируются безальтернативно, субтитры не прилагаются.
И вот ты захотел посмотреть в кино «Дикого робота», но не знаешь финского.
Да-да, после пяти лет проживания я всё ещё не готов.
Что же делать?
Готовить своё веб-приложение для просмотра и синхронизации субтитров, конечно же!
На иллюстрациях — скриншоты процесса создания и результат :)
Неплохо для сорока минут общения с 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
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
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня
Вчера не удержался и вечером всё-таки допилил приложение для параллельного просмотра субтитров, о котором писал тут: https://www.tg-me.com/htmlshit/3204.
1. Теперь сдвиг по времени задаётся простым кликом по фразе.
2. Когда скроллишь, автоматического выделения следующей фразы не происходит, но автоскролл восстанавливается, если докрутить назад.
3. Тёмная тема! Я не понимаю, как мне это сразу в голову не пришло. В кинотеатре вчера было немного стыдно.
Теперь мне надо немного подумать о применимости.
С точки зрения изучения языка — очень хорошо, потому что теперь я могу вывести на стриминге и озвучку и субтитры на одном языке, а подглядывать в другой. Тогда надо бы добавить кнопку Паузы, заодно.
Да, есть расширения для браузеров, выводящие второй набор субтитров на тот же экран, но:
а) на телевизоре-то их нет
б) всё превращается в месиво
Плюс не оставляет идея сделать из этого приложение для смарт-часов.
Исходный код и сайт всё те же:
GitHub: https://github.com/bekharsky/subtitles
Link: https://bekharsky.github.io/subtitles/
На одном из альтернативных приложений я увидел ленту, отображающую плотность фраз на единицу времени. Как карта кода в вашем редакторе. Почему-то очень импонирует эта идея, надо попробовать.
Ну и добавить регулятор скорости воспроихзведения и точную подстройку, конечно же.
#react #movie #subtitles
Вчера не удержался и вечером всё-таки допилил приложение для параллельного просмотра субтитров, о котором писал тут: https://www.tg-me.com/htmlshit/3204.
1. Теперь сдвиг по времени задаётся простым кликом по фразе.
2. Когда скроллишь, автоматического выделения следующей фразы не происходит, но автоскролл восстанавливается, если докрутить назад.
3. Тёмная тема! Я не понимаю, как мне это сразу в голову не пришло. В кинотеатре вчера было немного стыдно.
Теперь мне надо немного подумать о применимости.
С точки зрения изучения языка — очень хорошо, потому что теперь я могу вывести на стриминге и озвучку и субтитры на одном языке, а подглядывать в другой. Тогда надо бы добавить кнопку Паузы, заодно.
Да, есть расширения для браузеров, выводящие второй набор субтитров на тот же экран, но:
а) на телевизоре-то их нет
б) всё превращается в месиво
Плюс не оставляет идея сделать из этого приложение для смарт-часов.
Исходный код и сайт всё те же:
GitHub: https://github.com/bekharsky/subtitles
Link: https://bekharsky.github.io/subtitles/
На одном из альтернативных приложений я увидел ленту, отображающую плотность фраз на единицу времени. Как карта кода в вашем редакторе. Почему-то очень импонирует эта идея, надо попробовать.
Ну и добавить регулятор скорости воспроихзведения и точную подстройку, конечно же.
#react #movie #subtitles
#фишка дня
Мы долго этого ждали! В инструментах разработчика 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
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
#фишка дня
...от Никиты Голубова 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 #бородач
#новость дня
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
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
#видео дня
Внимание! 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
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
This media is not supported in your browser
VIEW IN TELEGRAM
#ссылка дня
Что бы я делал без своих любимых подписчиков :) Вот только что мне напомнили, что Паскуаль Витьелло, который в прошлый раз упоролся и сделал 50 разных полей ввода, сейчас снова упоролся.
И сделал 50 кнопок!
Ссылка на инпуты, если кто не помнит: https://www.tg-me.com/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://www.tg-me.com/htmlshit/3212
А вот и кнопки: https://originui.com/buttons
И, по всей видимости, тут произошло недопонимание и на самом-то деле кнопки и инпуты — они не для Next.js, а являются прямым расширением shadcn: https://ui.shadcn.com/
Об этом вскользь упомянуто на их гитхабе: https://github.com/origin-space/originui
В общем, вдохновляемся, учимся композиции и, возможно, даже используем!
#ui #react #shadcn
#расширение дня
Дал слабину и где-то в глубине кода указал
Воспользовался
И при этом не используешь 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
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
#новость дня
Итак, 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