Перевод статьи Андрея Ситника про новые спецификации 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 тестирование. А главное — понимание как и где это применять.

Читать

Команда Microsoft заявила о выпуске TypeScript 5.0

TypeScript стал меньше, проще и быстрее. Команда внедрила новый стандарт декораторов, добавила функциональные возможности для лучшей поддержки проектов ESM в Node и сборщиках, предоставила авторам библиотек новые способы управления обобщенным выводом, расширила функциональность JSDoc, упростила настройку и внесла множество других улучшений.

Подробнее