#такое дня

Меня одного задолбали недоделанные технологии?

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

Щас поясню. Примеры будут очень простые, про скроллинг. Но показательные. Дальше предложите сами.

1. position: sticky

Мы его ждали много лет. С таблицами правило стало работать только после того, как в Chrome полностью движок таблиц переписали. А теперь... а теперь ещё несколько лет будем ждать, чтобы получить возможности навесить нужные стили на «прилипший» элемент. Слухи о псевдоклассе :sticked так и остались слухами.

Что мы делаем? Конечно же считаем скролл ручками!

2. element.scrollIntoView

Шикарная вещь! Просто гениальная по своей сути. Что может быть приятнее, чем просто указать, как именно нужно автоматически доскроллить до элемента и где остановиться. Вот только...

Вот только где offset, я спрашиваю? Почему нет такой простой вещи?

Но ведь есть scroll-margin-top, скажете вы...

Ага, вроде и есть. А что если мне нужен разный в зависимости от ситуации? А если динамический? Что если у меня на одном варианте AB-теста есть sticky-заголовки, а в другом — нет?

Что мы делаем? А опять ручками:

const line = document.querySelector(`[data-id=${id}]`);

if (line) {
  const p = line.getBoundingClientRect();
  window.scrollTo(p.left, p.top + window.scrollY - 40);
}

Раздражает. Зачем таким вообще заниматься?

Ну выход на самом деле только один — участвовать в обсуждениях. Или заткнуться.

#css #hate

Перевод статьи Андрея Ситника про новые спецификации CSS и цветовое пространство OKLCH.

Читать

How to fix scroll freezing in Safari

https://stackoverflow.com/questions/39692337/div-scrolling-freezes-sometimes-if-i-use-webkit-overflow-scrolling

#кодинг
#javascript

10 тенденций веб-разработки в 2023 году

Эта статья — своего рода попытка осмыслить последний опрос State of JS и спрогнозировать тренды на текущий год.

Читать

Deploy Vite app to GitHub Pages using GitHub Actions

https://github.com/sitek94/vite-deploy-demo/tree/main#readme

#кодинг
#vite
#github

Создание отзывчивого мобильного меню с помощью CSS без JavaScript

В этой статье вы узнаете, как создать отзывчивое мобильное меню с помощью CSS, без использования JavaScript. Автор пошагово показывает, как создать и стилизовать гамбургер-меню, анимировать его и сделать его доступным для пользователей с ограниченными возможностями:

https://blog.logrocket.com/create-responsive-mobile-menu-with-css-no-javascript/

#css #фронтенд

7 интересных API на JavaScript для создания веб-сайтов, о которых вы (скорее всего) не знали

В связи с быстро меняющимися технологиями разработчикам предоставляются невероятные инструменты и технологии.
Но было замечено, что различные функции и возможности API не так активно используются, и многие даже не знают о некоторых из них.
Давайте взглянем на некоторые полезные веб-API, которые могут помочь вам поднять ваш сайт до небес!

https://habr.com/ru/post/718712/

#js #education #ru

💬 Чат фронтендеров

Deploying Nodejs app on Ubuntu server with pm2 & nginx

Deploying a Node.js application on an Ubuntu server can be a daunting task, but with the right tools, it can be done with ease. In this tutorial, we will go over how to deploy a Node.js application using the process manager pm2 and the web server Ngi...

Read: https://bwiza.hashnode.dev/deploying-nodejs-app-on-ubuntu-server-with-pm2-nginx

Используем MutationObserver API для работы с элементами, которых пока нет.

О работе с интерфейсом, позволяющим отслеживать изменения в DOM и работать с новыми элементами.

https://www.macarthur.me/posts/use-mutation-observer-to-handle-nodes-that-dont-exist-yet

🏭 25 лучших практик отправки кода в продакшн

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

🔗 Основной сайт
🔗 Зеркало

#инструмент дня

Устал вручную типизировать ответы от API для TypeScript или любого другого типизированного языка?

Есть решение!

https://app.quicktype.io/

Фиганул туда JSON — получил нужную структуру или описание типа, даже с тайпгардами. Уютненько!

Есть расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype

Ещё один мощный инструмент в тему дня: https://transform.tools. Одним типизированием JSON не ограничивается: можно CSS в Tailwind, а можно Flow в TypeScript.

Вот, например, если кто использует Zod — конвертор типов в схему Zod: https://transform.tools/typescript-to-zod

#json #typescript #type

​Intersection Observer

Это браузерный API, который позволяет асинхронно отслеживать пересечение элемента с его родителем или областью видимости документа (viewport). В момент пересечения можно запустить какое-либо действие, например, подгрузить дополнительные посты в ленте новостей («бесконечный скролл») или сделать «ленивую» загрузку контента.

Пример
Для наглядности область наблюдения выделена жёлтой рамкой, а снизу показано как изображения прокручиваются к этой области. Видно, что изображения начинают загружаться при пересечении пунктира, то есть чуть раньше, чем они появляются в видимой области. Это возможно благодаря свойству rootMargin.

Ещё одна фишка — изображение Морти немного увеличивается, когда полностью оказывается в наблюдаемой области. Такой трюк делается с помощью свойств threshold и intersectionRatio, о которых будет рассказано ниже.

Упрощённый код для этого примера выглядит приблизительно так.
const lazyImages = document.querySelectorAll('.lazy-image')

const callback = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
console.log('Пользователь почти докрутил до картинки!')

entry.target.src = entry.target.dataset.src
observer.unobserve(entry.target)
}
})
}

const options = {
// root: по умолчанию window, но можно задать любой элемент-контейнер
rootMargin: '0px 0px 75px 0px',
threshold: 0,
}

const observer = new IntersectionObserver(callback, options)

lazyImages.forEach((image) => observer.observe(image))

👉 @seniorFront

Каррирование

#theory | Гайды по JavaScript

Мемоизации в JavaScript на практике

Материал для новичков и не только, после прочтения которого должно сложиться уверенное и всестороннее понимание мемоизации и таких тем, как: замыкание, функции высшего порядка, чистые функции, каррирование, TDD, рекурсия и property‑based тестирование. А главное — понимание как и где это применять.

Читать