This media is not supported in your browser
VIEW IN TELEGRAM
CSS анимация: animation-timeline + animation-range в действии 😎
⛔️
CodePen
.avatar {
animation: scale-down;
animation-timeline: scroll();
animation-range: calc(var(--header-scroll) * 0.9) ...;
}
Работает только в Chrome Canary CodePen
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥3❤🔥2❤1
Ивенты мутаций будут удалены из Chrome 🎳
О каких ивентах речь?
Потому что они являются очень старой частью спецификации DOM level 2 и были помечены как устаревшие ещё в 2011 году
Чем их можно заменить?
Используй MutationObserver! Это очень крутая и мощная штука, которая отслеживает изменения в DOM
О каких ивентах речь?
DOMNodeInserted, DOMNodeRemoved, DOMSubtreeModified, DOMCharacterDataModified, DOMNodeInsertedIntoDocument, DOMNodeRemovedFromDocument, DOMAttrModified, DOMAttributeNameChanged, DOMElementNameChanged
Почему их удаляет Chrome?Потому что они являются очень старой частью спецификации DOM level 2 и были помечены как устаревшие ещё в 2011 году
Чем их можно заменить?
Используй MutationObserver! Это очень крутая и мощная штука, которая отслеживает изменения в DOM
Please open Telegram to view this post
VIEW IN TELEGRAM
MDN Web Docs
MutationObserver - Web APIs | MDN
The MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature, which was part of the DOM3 Events specification.
👍17👏2❤🔥1❤1
Что нового из CSS я уже использую в продакшене? 🛁
Я всё время пишу про новые CSS фичи, но большинство из них ещё не готово к использованию в реальных проектах, сегодня хочу поделиться, какими современными CSS фичами я пользуюсь в продакшене
1. Псевдоселектор :has — мощный селектор для выбора родительского элемента, который содержит в себе конкретный дочерний элемент (87.43% на caniuse)
2. display: contents — перестаёт отображать элемент, как будто его не существует в DOM, очень удобно для адаптива (95.83% на caniuse)
3. Псевдоселектор :is — удобно для сокращения повторящихся вложенностей для конкретного селектора (96.91% на caniuse)
4. Псевдоселектор :where — для меня это альтернатива для :is, но с нулевой специфичностью (92.82% на caniuse)
5. Псевдоселектор :focus-within — удобно стилизовать контейнер, который содержит инпут с фокусом (95.81 на caniuse)
Я всё время пишу про новые CSS фичи, но большинство из них ещё не готово к использованию в реальных проектах, сегодня хочу поделиться, какими современными CSS фичами я пользуюсь в продакшене
1. Псевдоселектор :has — мощный селектор для выбора родительского элемента, который содержит в себе конкретный дочерний элемент (87.43% на caniuse)
2. display: contents — перестаёт отображать элемент, как будто его не существует в DOM, очень удобно для адаптива (95.83% на caniuse)
3. Псевдоселектор :is — удобно для сокращения повторящихся вложенностей для конкретного селектора (96.91% на caniuse)
4. Псевдоселектор :where — для меня это альтернатива для :is, но с нулевой специфичностью (92.82% на caniuse)
5. Псевдоселектор :focus-within — удобно стилизовать контейнер, который содержит инпут с фокусом (95.81 на caniuse)
Please open Telegram to view this post
VIEW IN TELEGRAM
MDN Web Docs
:has() - CSS | MDN
The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a…
👍30🔥4❤🔥1🤯1
Мы рады объявить курс по Xano! 🔥
Xano - это самый быстрый способ создания масштабируемого бэкенда для твоего приложения с использованием No Code.
Евгений Новиков - автор курса:
✨эксперт в области применения No Code инструментов
✨владеет студией мобильной разработки и дизайна
✨в прошлом CTO, COO, CPO в российских стартапах
Преимущества Xano для твоего проекта:
🟢 Хранение данных в мощной базе данных без ограничений на количество записей
🟢 Легкое создание API с простой и сложной бизнес-логиков, не используя код
🟢 Интеграция и подключение к любой платформе или Front-end
🟢 Надежная документация и активное сообщество
Для кого предназначен курс Xano❓
🔹Ноукодеры - для расширения своих возможностей и выхода на большие чеки
🔹Стартаперы и владельцы продуктов - для самостоятельного управления бизнес-логикой
🔹Разработчики - для быстрой fullstack разработки
🔹Студентам - для освоения концепций разработки бэкенда и создания MVP без кода
Программа курса:
🔸4 вебинара на 1,5 часа
🔸Теория по проектированию БД и логики сервера
🔸Функционал XANO
🔸2 учебных проекта
🔸Разбор домашних заданий
🔸Закрытый чат поддержки в течение 3-х месяцев
Присоединяйся к нашему курсу и стань экспертом в мире приложений уже сегодня!
Все подробности - на канале XANO RU🔥
Xano - это самый быстрый способ создания масштабируемого бэкенда для твоего приложения с использованием No Code.
Евгений Новиков - автор курса:
✨эксперт в области применения No Code инструментов
✨владеет студией мобильной разработки и дизайна
✨в прошлом CTO, COO, CPO в российских стартапах
Преимущества Xano для твоего проекта:
🟢 Хранение данных в мощной базе данных без ограничений на количество записей
🟢 Легкое создание API с простой и сложной бизнес-логиков, не используя код
🟢 Интеграция и подключение к любой платформе или Front-end
🟢 Надежная документация и активное сообщество
Для кого предназначен курс Xano❓
🔹Ноукодеры - для расширения своих возможностей и выхода на большие чеки
🔹Стартаперы и владельцы продуктов - для самостоятельного управления бизнес-логикой
🔹Разработчики - для быстрой fullstack разработки
🔹Студентам - для освоения концепций разработки бэкенда и создания MVP без кода
Программа курса:
🔸4 вебинара на 1,5 часа
🔸Теория по проектированию БД и логики сервера
🔸Функционал XANO
🔸2 учебных проекта
🔸Разбор домашних заданий
🔸Закрытый чат поддержки в течение 3-х месяцев
Присоединяйся к нашему курсу и стань экспертом в мире приложений уже сегодня!
Все подробности - на канале XANO RU🔥
Telegram
XANO RU
Лучший backend для ваших проектов - канал об уникальном инструменте для создания backend за считанные часы.
- Демо функционала
- Примеры и кейсы
- Чат поддержки
Консультации - @eu_novikov
- Демо функционала
- Примеры и кейсы
- Чат поддержки
Консультации - @eu_novikov
👍3🔥3🥱2❤🔥1❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Nuxt.js и View Transition API 🥳
Nuxt.js стал поддерживать View Transition API, как экспериментальную фичу, выглядит это превосходно, мечтаю о том, что весь веб будет такой😍
Магические строчки в👏
Github код проекта
Nuxt.js стал поддерживать View Transition API, как экспериментальную фичу, выглядит это превосходно, мечтаю о том, что весь веб будет такой
Магические строчки в
nuxt.config.ts export default defineNuxtConfig({
experimental: {
viewTransition: true,
},
})
ДемоGithub код проекта
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥30👍5❤2❤🔥1🤯1🥴1😍1
CSS Nesting задачка 🧐
CSS Nesting всё ближе и ближе, уже 63% поддержки на caniuse, но готов ли ты к нему?
Как думаешь, какого цвета будет бэкграунд?
Синий - 👍
Красный - ❤️
Так делать нельзя - 💩
CSS Nesting всё ближе и ближе, уже 63% поддержки на caniuse, но готов ли ты к нему?
Как думаешь, какого цвета будет бэкграунд?
body {
@media all {
background: red;
}
background: blue;
}
Ставь реакцию с правильным ответомСиний - 👍
Красный - ❤️
Так делать нельзя - 💩
Please open Telegram to view this post
VIEW IN TELEGRAM
Caniuse
"css nesting" | Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
👍47💩38❤31😁2❤🔥1
Frontend по-флотски 👨💻
Vision Pro и Web 👨💻 Все пишут про плавательную маску от Apple, и я не буду исключением 😄 Но расскажу я именно про интересности нашей с тобой темы — разработка интерфейсов, в частности для браузеров Если ты внимательный, то обратил внимание, что в VisionOS…
Мы живём в такое весёлое время, когда команды делают пропоузалы на встраивание 3D моделек в DOM, но подружить 🏌️
border-image и border-radius до сих пор не могут, сижу и костыли опять пихаю Please open Telegram to view this post
VIEW IN TELEGRAM
🤣14😢5👍3😁2🦄1
This media is not supported in your browser
VIEW IN TELEGRAM
Vue Telescope — как способ анализировать технологии сайта построенных на Vue.js ✈️
Vue Telescope может обнаружить любой сайт, разработанный с использованием Vue.js и его экосистемы (Nuxt, Gridsome, Quasar или VuePress). Он также может сообщить тебе, какой UI/CSS фреймворк был использован: TailwindCSS, Vuetify, Buefy и т.д.
И ещё много всякого разного🫰
Сайтик
Vue Telescope может обнаружить любой сайт, разработанный с использованием Vue.js и его экосистемы (Nuxt, Gridsome, Quasar или VuePress). Он также может сообщить тебе, какой UI/CSS фреймворк был использован: TailwindCSS, Vuetify, Buefy и т.д.
И ещё много всякого разного
Сайтик
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥4❤1❤🔥1
Frontend по-флотски 👨💻
Мы живём в такое весёлое время, когда команды делают пропоузалы на встраивание 3D моделек в DOM, но подружить border-image и border-radius до сих пор не могут, сижу и костыли опять пихаю 🏌️
Бывают и неожиданные приятности! 🥰
Сегодня для себя открыл, что оказывается flexbox gap поддерживается уже на 92%, чуть не впихнул костыль с отрицательным маржином для вёрстки тегов (как на скрине)
Сегодня для себя открыл, что оказывается flexbox gap поддерживается уже на 92%, чуть не впихнул костыль с отрицательным маржином для вёрстки тегов (как на скрине)
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥6❤1❤🔥1
Встречайте Dev Mode в Figma 🤩
Если ты сегодня верстал что-нибудь, то думаю заметил, что фигма обновилась и появился какой-то режим для разработчиков, го разберёмся для чего он
https://habr.com/ru/articles/743428/
Если ты сегодня верстал что-нибудь, то думаю заметил, что фигма обновилась и появился какой-то режим для разработчиков, го разберёмся для чего он
https://habr.com/ru/articles/743428/
Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
Встречайте Dev Mode в Figma
Эта статья — перевод оригинальной статьи " Making Figma better for developers with Dev Mode ". Также я веду телеграм канал “ Frontend по-флотски ”, где рассказываю про интересные вещи из мира...
🔥14👍3❤2❤🔥2
Мы в HITECHWOOD вдохновляемся примерами лучших мировых «сетапов» - рабочих мест, являющихся оазисами красоты и комфорта, а также оборудованных по последнему слову техники. Это рабочие места, которыми хочется хвастаться. Красивый деревянный стол, полочки с цветами в стильных горшках, множество аксессуаров, которые интересно рассматривать.
За таким столом и работается лучше. Вспомните свои ощущения, когда вы едите из одноразовой посуды пластиковой вилкой и из красивых тарелок дорогими приборами. Одна и та же еда имеет разный вкус, не так ли?
HITECHWOOD производит умные деревянные столы, которые послужат идеальной основой для вашего уникального сетапа.
Мы встроим прямо в ваш стол розетки 220V и USB, беспроводную зарядку и wi-fi «Умный дом».
Подписывайтесь на нас:
https://vk.com/hitech.wood
https://instagram.com/hitech.wood
Мы вдохновляем на красивую работу!
За таким столом и работается лучше. Вспомните свои ощущения, когда вы едите из одноразовой посуды пластиковой вилкой и из красивых тарелок дорогими приборами. Одна и та же еда имеет разный вкус, не так ли?
HITECHWOOD производит умные деревянные столы, которые послужат идеальной основой для вашего уникального сетапа.
Мы встроим прямо в ваш стол розетки 220V и USB, беспроводную зарядку и wi-fi «Умный дом».
Подписывайтесь на нас:
https://vk.com/hitech.wood
https://instagram.com/hitech.wood
Мы вдохновляем на красивую работу!
👍9🤩2🤯1😱1
WebStorm 2023.2 появился в Early Access Program 🔥
Что нового?
— ИИ ассистент (чат и генератор коммитов)
— Улучшено форматирование ошибок типов TypeScript
— Поддержка CSS Nesting
— Возможность коммитить определенные строки кода
— Подсказки для JSON данных в JavaScript
— Поддержка импорта JavaScript в файлах .http
— Предварительный просмотр PDF и HTML для ответов в HTTP-клиенте
— Поддержка редактирования файлов AsyncAPI
— Пара фич для Докера
— Поддержка Emmet для Preact и SolidJS
Фулл тут
Что нового?
— ИИ ассистент (чат и генератор коммитов)
— Улучшено форматирование ошибок типов TypeScript
— Поддержка CSS Nesting
— Возможность коммитить определенные строки кода
— Подсказки для JSON данных в JavaScript
— Поддержка импорта JavaScript в файлах .http
— Предварительный просмотр PDF и HTML для ответов в HTTP-клиенте
— Поддержка редактирования файлов AsyncAPI
— Пара фич для Докера
— Поддержка Emmet для Preact и SolidJS
Фулл тут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23🔥3❤2❤🔥1👎1🤨1
Будущее адаптивного дизайна, доклад с конференции Config 2023 🥰
https://www.youtube.com/watch?v=APhECDy2U3U
Полный плэйлист конференции
https://www.youtube.com/watch?v=APhECDy2U3U
Полный плэйлист конференции
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
The future of responsive design - Una Kravets, Adam Argyle (Config 2023)
Speakers:
Una Kravets – Developer Relations Engineer, Google
Adam Argyle – CSS Developer Relations Engineer, Google
Everything you know about responsive design is changing. With new entry points for user-centered inputs, component-based responsive capabilities…
Una Kravets – Developer Relations Engineer, Google
Adam Argyle – CSS Developer Relations Engineer, Google
Everything you know about responsive design is changing. With new entry points for user-centered inputs, component-based responsive capabilities…
👍8❤🔥3❤1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Как сделать Ambilight эффект? 🧑🎓
Недавно заметил, что YouTube добавил этот эффект в тёмной версии на вебе, выглядит прям сочненько
Вот небольшой код-сниппет:
😍
CodePen Demo
Недавно заметил, что YouTube добавил этот эффект в тёмной версии на вебе, выглядит прям сочненько
Вот небольшой код-сниппет:
ctx = canvas.getContext('2d');
video.addEventListener('play', () => {
video.currentTime = 0;
timerID = setInterval(() => {
ctx.drawImage(video, 0, 0, 600, 460)
}, 30);
});
Сколько же ещё крутых и простых вещей можно сделать с помощью канваса в современном мире CodePen Demo
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥31👍5❤🔥1❤1
Анонсируем Dart 3 🔥
У Дарта в мае вышел большой апдейт, надо следить за JS киллером🙂
https://habr.com/ru/articles/745000/
Также есть видосик с Google I/O про апдейты Dart и Flutter
У Дарта в мае вышел большой апдейт, надо следить за JS киллером
https://habr.com/ru/articles/745000/
Также есть видосик с Google I/O про апдейты Dart и Flutter
Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
Анонсируем Dart 3
Эта статья — перевод оригинальной статьи " Announcing Dart 3 ". Также я веду телеграм канал “ Frontend по-флотски ”, где рассказываю про интересные вещи из мира разработки интерфейсов. Вступление...
😁6🔥5💩2❤1❤🔥1👍1
🎉 С Днём Рождения, дорогая макароннинка! 🎂
Сегодня каналу Frontend по-флотски 2 года! И я от всего сердца поздравляю тебя с этим особенным днём! 🍝🖥
Я хочу поблагодарить тебя за твоё доверие и веру. За прошедший год мы вместе с тобой исследовали безграничный мир фронтенд-разработки, узнавали новые технологии и погружались во все аспекты веба.
Я хочу пожелать тебе постоянного роста и развития в разработке. Пусть твои проекты всегда будут успешными и инновационными. Пусть твоя страсть к коду никогда не угасает, а каждый день приносит новые возможности и достижения.
Спасибо, что ты со мной, и позволяешь быть твоим надежным проводником в мире фронтенда. Я с нетерпением жду продолжения и новых встреч, и буду продолжать готовить для тебя самый сочный и аппетитный фронтенд, но по-флотски😎
Сегодня каналу Frontend по-флотски 2 года! И я от всего сердца поздравляю тебя с этим особенным днём! 🍝🖥
Я хочу поблагодарить тебя за твоё доверие и веру. За прошедший год мы вместе с тобой исследовали безграничный мир фронтенд-разработки, узнавали новые технологии и погружались во все аспекты веба.
Я хочу пожелать тебе постоянного роста и развития в разработке. Пусть твои проекты всегда будут успешными и инновационными. Пусть твоя страсть к коду никогда не угасает, а каждый день приносит новые возможности и достижения.
Спасибо, что ты со мной, и позволяешь быть твоим надежным проводником в мире фронтенда. Я с нетерпением жду продолжения и новых встреч, и буду продолжать готовить для тебя самый сочный и аппетитный фронтенд, но по-флотски
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥25🎉23❤🔥6❤6🍾3👍2💯1
Искусственный интеллект во фронтенд-разработке, запись трудного понедельник от HolyJS 🔥
https://www.youtube.com/watch?v=vcAgVvLh1XU&t=1s
https://www.youtube.com/watch?v=vcAgVvLh1XU&t=1s
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
Михаил Трифонов — Друг или враг? Искусственный интеллект во фронтенд-разработке
Ближайшая конференция — HolyJS 2025 Spring, 7—8 апреля, Москва + online. Подробности и билеты: https://jrg.su/gxfN4t
— —
За последний год ИИ очень сильно развился. Таким технологиям, как ChatGPT, GitHub Copilot, Midjourney и RuGPT-3, пророчат заменить разработчиков.…
— —
За последний год ИИ очень сильно развился. Таким технологиям, как ChatGPT, GitHub Copilot, Midjourney и RuGPT-3, пророчат заменить разработчиков.…
👍10🔥2❤🔥1❤1
❓Хотите начать разрабатывать смарт-контракты?
Начните с бесплатного урока - присоединяйтесь 13 июля в 20:00 мск к вебинару OTUS и создайте свой первый смарт-контракт!
👨🎓В рамках онлайн-курса «Solidity Developer» пройдет открытый урок «Введение в смарт-контракты». Вместе с экспертом мы сначала разберем, как развивались смарт-контракты, а затем перейдем от теории к практике — разработаем смарт-контракт.
🚩На вебинаре мы:
- Погрузимся в увлекательную историю смарт-контрактов, иллюстрируя их зарождение и развитие до сегодняшнего дня
- Рассмотрим области применения смарт-контрактов, представив реальные примеры их использования в различных сферах
- Создадим и задеплоим наш первый смарт-контракт с помощью онлайн-инструмента Remix IDE
- Обсудим известные случаи взлома смарт-контрактов, рассмотрим основные уязвимости и способы их устранения.
🔥После вебинара вы сможете продолжить обучение на курсе, доступном в рассрочку.
✔️Для участия зарегистрируйтесь https://otus.pw/GxXk/
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963. 2RanykkkR4k
Начните с бесплатного урока - присоединяйтесь 13 июля в 20:00 мск к вебинару OTUS и создайте свой первый смарт-контракт!
👨🎓В рамках онлайн-курса «Solidity Developer» пройдет открытый урок «Введение в смарт-контракты». Вместе с экспертом мы сначала разберем, как развивались смарт-контракты, а затем перейдем от теории к практике — разработаем смарт-контракт.
🚩На вебинаре мы:
- Погрузимся в увлекательную историю смарт-контрактов, иллюстрируя их зарождение и развитие до сегодняшнего дня
- Рассмотрим области применения смарт-контрактов, представив реальные примеры их использования в различных сферах
- Создадим и задеплоим наш первый смарт-контракт с помощью онлайн-инструмента Remix IDE
- Обсудим известные случаи взлома смарт-контрактов, рассмотрим основные уязвимости и способы их устранения.
🔥После вебинара вы сможете продолжить обучение на курсе, доступном в рассрочку.
✔️Для участия зарегистрируйтесь https://otus.pw/GxXk/
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963. 2RanykkkR4k
👍3❤1🔥1🤩1
Опрос для проверки востребованности адаптации контента на русский язык
Anonymous Poll
27%
Я знаю английский и мне комфортно читать/смотреть на английском языке
59%
Я знаю английский, но мне комфортнее читать/смотреть на русском
14%
Я не знаю английский язык и не могу читать/смотреть материал на английском языке
👍5🤡3❤1💘1
Frontend по-флотски 👨💻
Container queries === бомба 👀 Представь, что ты можешь делать адаптив отдельно для каждого класса-контейнера, а не пихать всё подряд в media-query, кажется, что это уже становится возможным Зацени этот видосик от гугла https://www.youtube.com/watch?v=gCNMyYr7F6w…
Новые единицы измерения в CSS 🛁
Сегодня я тебя познакомлю с новыми единицами измерения созданные специально для контейнеров, они задают длину относительно его размеров
Сегодня я тебя познакомлю с новыми единицами измерения созданные специально для контейнеров, они задают длину относительно его размеров
cqwПредставляет собой процент от ширины контейнера.
1cqw - это 1% от его ширины. Например, если ширина контейнера составляет 800px, то значение 50cqw для свойства будет равно 400px.cqhТо же самое, что и
cqw, только относительно высоты контейнераcqiПредставляет собой процент от inline-size контейнера.
1cqi - это 1% от inline-size контейнера. Например, если inline-size контейнера составляет 800px, то значение 50cqi для свойства будет равно 400px.cqbТо же самое, что и
cqi, только от block-sizecqminНаименьшее между
cqi и cqb
cqmaxНаибольшее между
cqi и cqbPlease open Telegram to view this post
VIEW IN TELEGRAM
🔥27🤔7🤯4👍3❤1❤🔥1
HTMX и HTML Driven Development
Эта практика - одна из разновидностей серверного рендеринга
htmx — это инструмент, который позволяет разрабатывать сложные и интерактивные веб-приложения на базе HTML, предлагая альтернативу клиентскому рендерингу на JS. Ключевое отличие от современных SSR инструментов, в том, что ответ от сервера приходит всегда в HTML, а не в JSON, зачёт этого приложения работают быстрее
Подробнее про HTML Driven Development
Смотреть короткое видео про htmx
Эта практика - одна из разновидностей серверного рендеринга
htmx — это инструмент, который позволяет разрабатывать сложные и интерактивные веб-приложения на базе HTML, предлагая альтернативу клиентскому рендерингу на JS. Ключевое отличие от современных SSR инструментов, в том, что ответ от сервера приходит всегда в HTML, а не в JSON, зачёт этого приложения работают быстрее
Подробнее про HTML Driven Development
Смотреть короткое видео про htmx
💩9👍4🍌2❤🔥1❤1👎1🔥1😁1