Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
Представляем вам Vue 3.3
Эта статья — перевод оригинальной статьи " Announcing Vue 3.3 ". Также я веду телеграм канал “ Frontend по-флотски ”, где рассказываю про интересные вещи из мира разработки интерфейсов. Вступление...
👍19🥱4❤🔥2🔥2❤1👎1💩1👾1
В мире технологий творится столько всего интересного: инновации сменяют друг друга, не уследить!
ITalks - это команда опытных разработчиков, которые ежедневно пишут статьи на тему кодинга, освещают инсайды из мира IT, делятся советами и опытом, а также постят авторские мемы.
Хочешь узнать об IT напрямую от разработчиков? Вот пара занимательных материалов, которые они подготовили:
✅ Большая подборка нейросетей на все случаи жизни
✅ Задачи и знания, отличающие джунов от мидлов, а мидлов от сеньоров
Просто и интересно об IT-индустрии в ITalks. Заходи!
ITalks - это команда опытных разработчиков, которые ежедневно пишут статьи на тему кодинга, освещают инсайды из мира IT, делятся советами и опытом, а также постят авторские мемы.
Хочешь узнать об IT напрямую от разработчиков? Вот пара занимательных материалов, которые они подготовили:
✅ Большая подборка нейросетей на все случаи жизни
✅ Задачи и знания, отличающие джунов от мидлов, а мидлов от сеньоров
Просто и интересно об IT-индустрии в ITalks. Заходи!
🔥3❤1❤🔥1👍1💩1
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация спрайтов на CSS с помощью animation-scroll 🔥
Выглядит так, что на основе этого можно будет делать очень много крутых вещей😍
Выглядит так, что на основе этого можно будет делать очень много крутых вещей
img {
animation:move steps(var(--frames));
animation-timeline:scroll(root);
}
keyframes move {
to {
object-position:100% 0;
}
}
CodePen (работает в Chrome Canary)Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🔥7❤1❤🔥1💩1
ReScript как альтернатива JS + TS 🧑🎓
Несколько раз уже натыкался на него, но только на 3-ем касании решил написать про него
ReScript — самостоятельный язык со своим синтаксисом, который компилируется в оптимизированный JS
От разработчиков
ReScript выглядит как JS, работает как JS и компилируется в чистый, удобочитаемый и производительный JS высочайшего качества, который можно напрямую запускать в браузерах и Node.js
Есть официальная документация по интеграции с React.js
Официальный сайт
Несколько раз уже натыкался на него, но только на 3-ем касании решил написать про него
ReScript — самостоятельный язык со своим синтаксисом, который компилируется в оптимизированный JS
От разработчиков
ReScript выглядит как JS, работает как JS и компилируется в чистый, удобочитаемый и производительный JS высочайшего качества, который можно напрямую запускать в браузерах и Node.js
Есть официальная документация по интеграции с React.js
Официальный сайт
Please open Telegram to view this post
VIEW IN TELEGRAM
💩26👍10🔥3😐3❤2❤🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
View Transition API позволяет анимировать flex и grid позиционирование 🧑🎓
С его помощью ты сможешь делать плавные переходы align-content и justify-content, всего в пару строчек JS
С его помощью ты сможешь делать плавные переходы 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❤🔥3❤1💩1
Хотите начать карьеру в IT?
Быстро освоить навыки и перейти к практике — легко!
Платформа Deepskills представляет методику микрообучения, которая поможет вам быстро войти в профессию и получить работу мечты!
Курсы от практикующих экспертов.
Бесплатный пробный период в течение 14 дней, чтобы вы убедились в качестве нашего обучения.
Начни свой путь к успеху уже сегодня.
Учись на практике с Deepskills!
Быстро освоить навыки и перейти к практике — легко!
Платформа Deepskills представляет методику микрообучения, которая поможет вам быстро войти в профессию и получить работу мечты!
Курсы от практикующих экспертов.
Бесплатный пробный период в течение 14 дней, чтобы вы убедились в качестве нашего обучения.
Начни свой путь к успеху уже сегодня.
Учись на практике с Deepskills!
❤2❤🔥1👍1🔥1💩1
Вышел Safari 16.5 😇
Что же там нового?
— Добавили CSS Nesting😍 😍 😍
— CSS :user-valid и :user-invalid псевдо-классы
— Apple Pay в вебе теперь поддерживает предзаказы и отложенные платежи
Подробнее тут
Что же там нового?
— Добавили CSS Nesting
— CSS :user-valid и :user-invalid псевдо-классы
— Apple Pay в вебе теперь поддерживает предзаказы и отложенные платежи
Подробнее тут
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13❤1❤🔥1👍1💩1
Представляем popover API 👨💻
Современное решение создания поповеров, маст хэв всем🥰
https://habr.com/ru/articles/737398/
Современное решение создания поповеров, маст хэв всем
https://habr.com/ru/articles/737398/
Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
Представляем popover API
Эта статья — перевод оригинальной статьи " Introducing the popover API ". Также я веду телеграм канал “ Frontend по-флотски ”, где рассказываю про интересные вещи из мира разработки интерфейсов....
👍12❤🔥2❤1🔥1👏1💩1
React.js исполнилось 10 лет 🥳
Вчера репозиторию react стукнуло 10 лет!
Как же быстро растут чужие дети, с которыми ты няньчишься уже несколько лет😄
Поздравляем React с прошедшим Днём Рождения!
Вчера репозиторию react стукнуло 10 лет!
Как же быстро растут чужие дети, с которыми ты няньчишься уже несколько лет
Поздравляем React с прошедшим Днём Рождения!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🎉12❤9💩8🔥2❤🔥1👀1
Хочешь сократить время, затраченное на настройку бэкенда?
Xano — твой идеальный инструмент❗️
Xano — это платформа, которая позволяет быстро создавать и масштабировать API и веб-приложения без необходимости писать код с нуля.
Использование Xano Frontend разработчиками позволит:
— ускорить процесс разработки за счет быстрого создания настройки API;
— облегчит управление данными и базами данных;
— уменьшить затраты на разработку и обслуживание бэкенда;
— улучшить качество пользовательского интерфейса за счет сосредоточения на его разработке, а не на настройке бэкенда.
Присоединяйся к русскоязычному сообществу Xano RU 🔥
В данном телеграм канале Евгений Новиков, в прошлом технический директор в стартапе, а сейчас основатель студии Flutter разработки рассказывает о:
— примерах решения реальных кейсов с использование Xano;
— об отличиях от других ноукод платформ;
— преимуществах использования Xano для программистов, стартаперам и ноукодерам;
— проводит бесплатные демо вебинары о Xano, где рассказывает об этом инструменте.
Присоединяйся! ✨
Xano — твой идеальный инструмент❗️
Xano — это платформа, которая позволяет быстро создавать и масштабировать API и веб-приложения без необходимости писать код с нуля.
Использование Xano Frontend разработчиками позволит:
— ускорить процесс разработки за счет быстрого создания настройки API;
— облегчит управление данными и базами данных;
— уменьшить затраты на разработку и обслуживание бэкенда;
— улучшить качество пользовательского интерфейса за счет сосредоточения на его разработке, а не на настройке бэкенда.
Присоединяйся к русскоязычному сообществу Xano RU 🔥
В данном телеграм канале Евгений Новиков, в прошлом технический директор в стартапе, а сейчас основатель студии Flutter разработки рассказывает о:
— примерах решения реальных кейсов с использование Xano;
— об отличиях от других ноукод платформ;
— преимуществах использования Xano для программистов, стартаперам и ноукодерам;
— проводит бесплатные демо вебинары о Xano, где рассказывает об этом инструменте.
Присоединяйся! ✨
👍5❤🔥2❤1🔥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;
}
CodePenPlease open Telegram to view this post
VIEW IN TELEGRAM
🤯21👍9🔥5❤🔥2❤1💩1
Чтобы уверенно говорить на английском во время собеседования — нужно несколько раз пройти его неуверенно и с ошибками. Чтобы говорить хорошо на англоязычных стендапах — нужен опыт стендапов. Где его взять? Попробуйте курсы «Английского для работы в IT» в Яндекс Практикуме.
Во время курса одна из студенток нашла работу в Германии: «Я много тренировалась на курсе, и в итоге оказалось, что всё то же самое я могу делать на настоящем интервью».
Полный отзыв.
Во время курса вы поймёте:
— Что говорить.
🗣 Личный преподаватель расскажет про грамматические конструкции и фразы, которые уместно применять на стендапах, собеседованиях и ревью.
— Как говорить.
🎤 Иностранцы из IT и преподаватель будут регулярно тренировать разговорные навыки на примере рабочих ситуаций.
— Как слушать.
🧏♂️На разговорной практике с иностранными IT-специалистами вы быстрее привыкнете к разным акцентам.
Запишитесь на бесплатную консультацию.
Куратор определит ваш уровень языка и расскажет про обучение.
Реклама АНО ДПО "Образовательные технологии Яндекса», ИНН:7704282033, erid: LjN8Jyytr
Во время курса одна из студенток нашла работу в Германии: «Я много тренировалась на курсе, и в итоге оказалось, что всё то же самое я могу делать на настоящем интервью».
Полный отзыв.
Во время курса вы поймёте:
— Что говорить.
🗣 Личный преподаватель расскажет про грамматические конструкции и фразы, которые уместно применять на стендапах, собеседованиях и ревью.
— Как говорить.
🎤 Иностранцы из IT и преподаватель будут регулярно тренировать разговорные навыки на примере рабочих ситуаций.
— Как слушать.
🧏♂️На разговорной практике с иностранными IT-специалистами вы быстрее привыкнете к разным акцентам.
Запишитесь на бесплатную консультацию.
Куратор определит ваш уровень языка и расскажет про обучение.
Реклама АНО ДПО "Образовательные технологии Яндекса», ИНН:7704282033, erid: LjN8Jyytr
💩7👍2🔥2❤1👎1🤯1
Vision Pro и Web 👨💻
Все пишут про плавательную маску от Apple, и я не буду исключением😄
Но расскажу я именно про интересности нашей с тобой темы — разработка интерфейсов, в частности для браузеров
Если ты внимательный, то обратил внимание, что в VisionOS можно юзать Safari браузер (надеюсь можно будет скачать Chrome), как это отразится на нас с тобой? Как поменяется разработка веба для управления жестами? Как сделать её более доступной?
Команда Safari выпустила видео об особенностях разработки веб сайтов под VisionOS, но кому лень смотреть, то выпишу хайлайты:
— Нужно юзать
— Перемещение глаза будет тригерить событие PointerEvent
— Можно будет вставлять ссылки на 3D модельки и вытаскивать их из браузера используя
Что ты думаешь по этому поводу?🤯
Все пишут про плавательную маску от 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❤🔥1❤1
Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
Знакомимся с @scope в CSS
Эта статья — перевод оригинальной статьи " An introduction to @scope in CSS ". Также я веду телеграм канал “ Frontend по-флотски ”, где рассказываю про интересные вещи из мира разработки интерфейсов....
👍14🔥3❤1❤🔥1
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