HolyJS — конференция для всех, кто пишет на JS 👨‍💻

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

Поговорим про ИИ во фронтенд-разработке, разберемся в устройстве плееров анимаций на примере lottie-web, обсудим, почему Playwright лучше Jest — и это только малая часть программы. Будут и более софт-скилловые доклады, например, про апгрейд карьеры, а также круглые столы и дискуссии.

Ты можешь пообщаться с коллегами из разных компаний, увидеть новые лица JS-мира, а в офлайне поиграть в старую-добрую JS-игру: ищи в словаре случайное слово, гугли, есть ли JS-библиотека с таким названием. Если есть, пьёшь пиво :)

Если билет тебе оплачивает работодатель, то отправь ему эту ссылку

Если идёшь за свой счет, то ищи билеты здесь, по промокоду FRONTENDPASTA они будут дешевле

Фичи WebKit в Safari 16.4 🧑‍🎓

Очень долго переводил статью, команда webkit выпустила по настоящему большое обновление 🥳

https://habr.com/ru/articles/730998/

CSS свойство display с несколькими значениями 🧑‍🎓

Скоро в Chrome Canary появится возможность указывать display с несколькими значениями, но это не какая-то новая лайфченжинг фича, а всего лишь более очевидная форма свойства display, что я имею ввиду?

Например, у нас есть свойство значение inline-flex, по новому это будет inline flex, небольшая разница, правда же?
Но подобные дополнения будут для каждого из значений, вот значение flex будет block flex, просто block станет block flow, а list-item будет block flow list-item

Спецификацию мона глянуть тут

P.S. предыдущие значения не исчезнут, а будут работать как сокращения

Всем доброе утро, встречаем победителей 🥳🥳🥳

Фронтенд стремится к фуллстэку 🫡

Перевёл анонс компания Vercel, они явно хотят, чтобы фронтендеры стали независимыми 😄

https://habr.com/ru/articles/732886/

Ты можешь анимировать числа используя CSS @property 🧑‍🎓

Короткий пример:
@property --ms {
inherits: false;
initial-value: 0;
syntax: '<integer>';
}
keyframes ms { to { --ms: 100; }}

Работает в хроме и в сафари техникал превью

CodePen видоса 🔥

Вышел Vue 3.3 🔥

Релиз получился сочненький, бегом читать :)

https://habr.com/ru/articles/735086/

Анимация спрайтов на CSS с помощью animation-scroll 🔥

Выглядит так, что на основе этого можно будет делать очень много крутых вещей 😍

img {
    animation:move steps(var(--frames));
    animation-timeline:scroll(root);
}

keyframes move {
to {
object-position:100% 0;
}
}

CodePen (работает в Chrome Canary)

ReScript как альтернатива JS + TS 🧑‍🎓

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

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

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

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

Официальный сайт

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)

Вышел Safari 16.5 😇

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

Подробнее тут

Представляем popover API 👨‍💻

Современное решение создания поповеров, маст хэв всем 🥰

https://habr.com/ru/articles/737398/

React.js исполнилось 10 лет 🥳

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

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

Поздравляем React с прошедшим Днём Рождения!