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
View Transition API позволяет анимировать flex и grid позиционирование 🧑‍🎓

С его помощью ты сможешь делать плавные переходы align-content и justify-content, всего в пару строчек JS

function setRandomAlignments() {
document.body.style.alignContent = positions[getRandomInt(3)]
document.body.style.justifyContent = positions[getRandomInt(3)]
}

document.body.addEventListener('click', e => {
if (!document.startViewTransition)
setRandomAlignments()
else
document.startViewTransition(() => {
setRandomAlignments()
})
})

CodePen (работает в хроме начиная со 111 версии, 63.55% по caniuse)
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14👍5❤‍🔥31💩1
Хотите начать карьеру в IT?

Быстро освоить навыки и перейти к практике — легко! 

Платформа Deepskills представляет методику микрообучения, которая поможет вам быстро войти в профессию и получить работу мечты!

Курсы от практикующих экспертов.

Бесплатный пробный период в течение 14 дней, чтобы вы убедились в качестве нашего обучения.

Начни свой путь к успеху уже сегодня.

Учись на практике с Deepskills!
2❤‍🔥1👍1🔥1💩1
Вышел Safari 16.5 😇

Что же там нового?
— Добавили CSS Nesting 😍😍😍
— CSS :user-valid и :user-invalid псевдо-классы
— Apple Pay в вебе теперь поддерживает предзаказы и отложенные платежи

Подробнее тут
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥131❤‍🔥1👍1💩1
React.js исполнилось 10 лет 🥳

Вчера репозиторию react стукнуло 10 лет!

Как же быстро растут чужие дети, с которыми ты няньчишься уже несколько лет 😄

Поздравляем React с прошедшим Днём Рождения!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🎉129💩8🔥2❤‍🔥1👀1
Хочешь сократить время, затраченное на настройку бэкенда?

Xano — твой идеальный инструмент❗️

Xano — это платформа, которая позволяет быстро создавать и масштабировать API и веб-приложения без необходимости писать код с нуля.

Использование Xano Frontend разработчиками позволит:

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

Присоединяйся к русскоязычному сообществу Xano RU 🔥

В данном телеграм канале Евгений Новиков, в прошлом технический директор в стартапе, а сейчас основатель студии Flutter разработки рассказывает о:

— примерах решения реальных кейсов с использование Xano;
— об отличиях от других ноукод платформ;
— преимуществах использования Xano для программистов, стартаперам и ноукодерам;
— проводит бесплатные демо вебинары о Xano, где рассказывает об этом инструменте.

Присоединяйся!
👍5❤‍🔥21🔥1💩1
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация переменной "MORF" шрифта Kablammo 🤓

@keyframes morph {
50% {
font-variation-settings: "MORF" 60;
}
}

h1 {
font-family: "Kablammo";
font-variation-settings: "MORF" 0;
animation: morph 10s linear infinite;
}

CodePen
Please open Telegram to view this post
VIEW IN TELEGRAM
🤯21👍9🔥5❤‍🔥21💩1
Чтобы уверенно говорить на английском во время собеседования — нужно несколько раз пройти его неуверенно и с ошибками. Чтобы говорить хорошо на англоязычных стендапах — нужен опыт стендапов. Где его взять? Попробуйте курсы «Английского для работы в IT» в Яндекс Практикуме.

Во время курса одна из студенток нашла работу в Германии: «Я много тренировалась на курсе, и в итоге оказалось, что всё то же самое я могу делать на настоящем интервью».
Полный отзыв.

Во время курса вы поймёте:
Что говорить.
🗣 Личный преподаватель расскажет про грамматические конструкции и фразы, которые уместно применять на стендапах, собеседованиях и ревью.
Как говорить.
🎤 Иностранцы из IT и преподаватель будут регулярно тренировать разговорные навыки на примере рабочих ситуаций.
Как слушать.
🧏‍♂️На разговорной практике с иностранными IT-специалистами вы быстрее привыкнете к разным акцентам.

Запишитесь на бесплатную консультацию.
Куратор определит ваш уровень языка и расскажет про обучение.

Реклама АНО ДПО "Образовательные технологии Яндекса», ИНН:7704282033, erid: LjN8Jyytr
💩7👍2🔥21👎1🤯1
Vision Pro и Web 👨‍💻

Все пишут про плавательную маску от Apple, и я не буду исключением 😄

Но расскажу я именно про интересности нашей с тобой темы — разработка интерфейсов, в частности для браузеров

Если ты внимательный, то обратил внимание, что в VisionOS можно юзать Safari браузер (надеюсь можно будет скачать Chrome), как это отразится на нас с тобой? Как поменяется разработка веба для управления жестами? Как сделать её более доступной?

Команда Safari выпустила видео об особенностях разработки веб сайтов под VisionOS, но кому лень смотреть, то выпишу хайлайты:

— Нужно юзать cursor: pointer на всех активных элементах
— Перемещение глаза будет тригерить событие PointerEvent
— Можно будет вставлять ссылки на 3D модельки и вытаскивать их из браузера используя <a rel="ar" href="<ссылка на модельку.usdz>">
— Появился пропоузал для HTML элемента <model>, который позволит вставлять модельки без использования canvas

Что ты думаешь по этому поводу? 🤯
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11🤯7🤨5👍3🦄3💩2❤‍🔥11
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