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

Контакт: @qmzik

Про жизнь: @nikita_alena_travel
Download Telegram
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
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