Frontend по-флотски 👨‍💻
4.51K subscribers
277 photos
61 videos
1 file
534 links
Новости, идеи и знания из мира разработки интерфейсов

Контакт: @qmzik

Про жизнь: @nikita_alena_travel
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
CSS анимация: animation-timeline + animation-range в действии 😎

.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❤‍🔥21
Ивенты мутаций будут удалены из Chrome 🎳

О каких ивентах речь?
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
👍17👏2❤‍🔥11
Что нового из 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)
Please open Telegram to view this post
VIEW IN TELEGRAM
👍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🔥
👍3🔥3🥱2❤‍🔥11
This media is not supported in your browser
VIEW IN TELEGRAM
Nuxt.js и View Transition API 🥳

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👍52❤‍🔥1🤯1🥴1😍1
CSS Nesting задачка 🧐

CSS Nesting всё ближе и ближе, уже 63% поддержки на caniuse, но готов ли ты к нему?

Как думаешь, какого цвета будет бэкграунд?

body {
@​media all {
background: red;
}
background: blue;
}

Ставь реакцию с правильным ответом

Синий - 👍
Красный - ❤️
Так делать нельзя - 💩
Please open Telegram to view this post
VIEW IN TELEGRAM
👍47💩3831😁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 и т.д.

И ещё много всякого разного 🫰

Сайтик
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥41❤‍🔥1
Frontend по-флотски 👨‍💻
Мы живём в такое весёлое время, когда команды делают пропоузалы на встраивание 3D моделек в DOM, но подружить border-image и border-radius до сих пор не могут, сижу и костыли опять пихаю 🏌️
Бывают и неожиданные приятности! 🥰

Сегодня для себя открыл, что оказывается flexbox gap поддерживается уже на 92%, чуть не впихнул костыль с отрицательным маржином для вёрстки тегов (как на скрине)
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥61❤‍🔥1
Встречайте Dev Mode в Figma 🤩

Если ты сегодня верстал что-нибудь, то думаю заметил, что фигма обновилась и появился какой-то режим для разработчиков, го разберёмся для чего он

https://habr.com/ru/articles/743428/
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14👍32❤‍🔥2
Мы в HITECHWOOD вдохновляемся примерами лучших мировых «сетапов» - рабочих мест, являющихся оазисами красоты и комфорта, а также оборудованных по последнему слову техники. Это рабочие места, которыми хочется хвастаться. Красивый деревянный стол, полочки с цветами в стильных горшках, множество аксессуаров, которые интересно рассматривать.

За таким столом и работается лучше. Вспомните свои ощущения, когда вы едите из одноразовой посуды пластиковой вилкой и из красивых тарелок дорогими приборами. Одна и та же еда имеет разный вкус, не так ли?

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

Фулл тут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23🔥32❤‍🔥1👎1🤨1
This media is not supported in your browser
VIEW IN TELEGRAM
Как сделать Ambilight эффект? 🧑‍🎓

Недавно заметил, что 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❤‍🔥11
🎉 С Днём Рождения, дорогая макароннинка! 🎂

Сегодня каналу Frontend по-флотски 2 года! И я от всего сердца поздравляю тебя с этим особенным днём! 🍝🖥

Я хочу поблагодарить тебя за твоё доверие и веру. За прошедший год мы вместе с тобой исследовали безграничный мир фронтенд-разработки, узнавали новые технологии и погружались во все аспекты веба.

Я хочу пожелать тебе постоянного роста и развития в разработке. Пусть твои проекты всегда будут успешными и инновационными. Пусть твоя страсть к коду никогда не угасает, а каждый день приносит новые возможности и достижения.

Спасибо, что ты со мной, и позволяешь быть твоим надежным проводником в мире фронтенда. Я с нетерпением жду продолжения и новых встреч, и буду продолжать готовить для тебя самый сочный и аппетитный фронтенд, но по-флотски 😎
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥25🎉23❤‍🔥66🍾3👍2💯1
Хотите начать разрабатывать смарт-контракты?

Начните с бесплатного урока - присоединяйтесь 13 июля в 20:00 мск к вебинару OTUS и создайте свой первый смарт-контракт!

👨‍🎓В рамках онлайн-курса «Solidity Developer» пройдет открытый урок «Введение в смарт-контракты». Вместе с экспертом мы сначала разберем, как развивались смарт-контракты, а затем перейдем от теории к практике — разработаем смарт-контракт.

🚩На вебинаре мы:

- Погрузимся в увлекательную историю смарт-контрактов, иллюстрируя их зарождение и развитие до сегодняшнего дня

- Рассмотрим области применения смарт-контрактов, представив реальные примеры их использования в различных сферах

- Создадим и задеплоим наш первый смарт-контракт с помощью онлайн-инструмента Remix IDE

- Обсудим известные случаи взлома смарт-контрактов, рассмотрим основные уязвимости и способы их устранения.

🔥После вебинара вы сможете продолжить обучение на курсе, доступном в рассрочку.

✔️Для участия зарегистрируйтесь https://otus.pw/GxXk/

Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963. 2RanykkkR4k
👍31🔥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-size

cqmin
Наименьшее между cqi и cqb

cqmax
Наибольшее между cqi и cqb
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥27🤔7🤯4👍31❤‍🔥1
HTMX и HTML Driven Development

Эта практика - одна из разновидностей серверного рендеринга

htmx — это инструмент, который позволяет разрабатывать сложные и интерактивные веб-приложения на базе HTML, предлагая альтернативу клиентскому рендерингу на JS. Ключевое отличие от современных SSR инструментов, в том, что ответ от сервера приходит всегда в HTML, а не в JSON, зачёт этого приложения работают быстрее

Подробнее про HTML Driven Development
Смотреть короткое видео про htmx
💩9👍4🍌2❤‍🔥11👎1🔥1😁1