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

Контакт: @qmzik

Про жизнь: @nikita_alena_travel
Download Telegram
​​В мире технологий творится столько всего интересного: инновации сменяют друг друга, не уследить! 

ITalks - это команда опытных разработчиков, которые ежедневно пишут статьи на тему кодинга, освещают инсайды из мира IT, делятся советами и опытом, а также постят авторские мемы.

Хочешь узнать об IT напрямую от разработчиков? Вот пара занимательных материалов, которые они подготовили:

Большая подборка нейросетей на все случаи жизни
Задачи и знания, отличающие джунов от мидлов, а мидлов от сеньоров

Просто и интересно об IT-индустрии в ITalks. Заходи!
🔥31❤‍🔥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🔥71❤‍🔥1💩1
ReScript как альтернатива JS + TS 🧑‍🎓

Несколько раз уже натыкался на него, но только на 3-ем касании решил написать про него

ReScript — самостоятельный язык со своим синтаксисом, который компилируется в оптимизированный JS

От разработчиков
ReScript выглядит как JS, работает как JS и компилируется в чистый, удобочитаемый и производительный JS высочайшего качества, который можно напрямую запускать в браузерах и Node.js

Есть официальная документация по интеграции с React.js

Официальный сайт
Please open Telegram to view this post
VIEW IN TELEGRAM
💩26👍10🔥3😐32❤‍🔥1
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