Size: a a a

Веб-стандарты

2021 April 28
Веб-стандарты
Поприветствуйте выражения от контейнера. Ахмад Шадид показывает, в каких случаях для привычных элементов на страницах будет полезно применять CSS Container Queries.

https://ishadeed.com/article/say-hello-to-css-container-queries/
источник
2021 April 29
Веб-стандарты
Почти полное руководство по Cumulative Layout Shift. Джесс Пек о том, что такое CLS, как замерять сдвиги раскладки при загрузке страницы и как от них избавляться.

https://jessbpeck.com/posts/completecls/
источник
Веб-стандарты
Сортируемые колонки таблицы. Адриан Розелли объясняет, как работает aria-sort и как обеспечить доступность заголовков таблицы с возможностью включить сортировку по колонке.

https://adrianroselli.com/2021/04/sortable-table-columns.html
источник
Веб-стандарты
CSS Flexbox. 10 видеоуроков Евгения Ковальчука по тому, как работают флексы в браузере: основы, оси, переносы и отступы, выравнивания, размеры, порядок элементов и вложенность.

https://www.youtube.com/playlist?list=PLNkWIWHIRwMG0EUBS8rvTRVNL9IcxcawW
источник
2021 April 30
Веб-стандарты
Анимация текста по частям. Адам Аргайл показывает, как при помощи JavaScript и CSS реализовать эффект, когда анимация применяется к отдельным буквам или словам в тексте.

https://web.dev/building-split-text-animations/
источник
Веб-стандарты
Новая книга «Image Optimization» Эдди Османи вышла в Smashing Book: вставка и оптимизация графики, сравнение форматов, управление цветом, адаптация, рендеринг и другое. 15 $ за эл. версию и 35 $ с доставкой за бумажную и эл. версии, начиная с конца мая.

https://www.smashingmagazine.com/2021/04/image-optimization-pre-release/
источник
Веб-стандарты
Принцип мозаики, или Как мы сделали JavaScript по-настоящему модульным. Альфред Генкин рассказывает  про инструмент Mosaic, который позаимствовал принципы на бэкенде, чтобы сделать фронтенд удобно расширяемым.

https://web-standards.ru/articles/modular-javascript/
источник
2021 May 03
Веб-стандарты
История фронтенда: JavaScript как отражение новой эпохи. Второй эпизод серии CSSSR про историю веба и веб-технологий: история языка JavaScript, его стандарта ECMAScript и выросшей вокруг него экосистемы.

Видео https://youtu.be/sgyoKkAfGpU
Текст https://blog.csssr.com/ru/article/frontend-history-java-script-as-a-reflection-of-a-new-era/
источник
Веб-стандарты
fit-content и fit-content(). Питер-Пол Кох показывает, как задавать элементам размеры, зависящие от их содержимого, и чем отличается задание размера для элементов внутри гридов.

https://www.quirksmode.org/blog/archives/2021/04/fitcontent_and.html
источник
Веб-стандарты
Подробное руководство по кастомным свойствам: именование, возможные значения, применение каскада, фолбэки, вычисления, задание типов, трюки и взаимодействие с JavaScript.

https://css-tricks.com/a-complete-guide-to-custom-properties/
источник
2021 May 04
Веб-стандарты
Сквирклы в вебе. Павел Лаптев показывает, как нарисовать фигуру, среднюю между кругом и квадратом, при помощи Houdini Paint API и CSS-масок.

https://medium.com/p/5ef11f646b72
источник
Веб-стандарты
Бесплатный вебинар «Конечные автоматы в реальной жизни» пройдёт 8 мая в 15:00 (МСК) в Яндекс Практикуме. В 1,5–2-часовой программе теория по алгоритмам, примеры использования, сложности и ограничения, кодинг на примере валидации ввода и ответы на вопросы.

https://praktikum.blog/webinar-avtomati/?utm_source=telegram&utm_medium=performance&utm_campaign=Telegram_performance_webinar-avtomati-webstandards_ru
источник
Веб-стандарты
Выпуск №280. Андрей Мелихов, Вадим Макеев, Сергей Сергеев, Никита Дубко про Safari 14.1, гэпы во флексах, историю JS, мозаичный JS и алгоритмы в работе и на собеседованиях.

Слушайте на Ютубе https://youtu.be/v6S_-UIRjUg
Ссылки на сайте https://web-standards.ru/podcast/280/
источник
Веб-стандарты
00:03:35 События
00:05:34 Safari 14.1
00:16:40 Гэпы во флексах
00:21:14 История JS
00:39:46 Мозаичный JS
00:54:18 Кому нужны алгоритмы
источник
Веб-стандарты
Разбираемся в функциях плавности для анимаций. Адриан Бис объясняет, как работают функции плавности: линейные, заданные кривыми Безье и пошаговые.

https://www.smashingmagazine.com/2021/04/easing-functions-css-animations-transitions/
источник
2021 May 05
Веб-стандарты
Как мы используем веб-компоненты. Кристьян Оддссон рассказывает о том, как в GitHub устроена разработка веб-компонентов: инструменты, линтеры, практики.

https://github.blog/2021-05-04-how-we-use-web-components-at-github/
источник
Веб-стандарты
Динамические CSS-маски с кастомными свойствами и GSAP. Мишель Баркер показывает, как создать креативный эффект луча фонарика, следующего за курсором.

https://tympanus.net/codrops/2021/05/04/dynamic-css-masks-with-custom-properties-and-gsap/
источник
Веб-стандарты
Тестирование производительности сайта Google I/O. Джейк Арчибальд разбирает загрузку сайта по шагам и советует, что можно улучшить.

https://jakearchibald.com/2021/io-site-perf/
источник
2021 May 06
Веб-стандарты
Ищем баланс между нативным и кастомным селектом. Сандрина Перейра пытается понять, что такое селект и чем он отличается от выпадающего меню и других похожих UI-паттернов. И в результате предлагает интересный гибрид, не забывая про доступность.

https://web-standards.ru/articles/native-and-custom-select/
источник
Веб-стандарты
Стабильный релиз Bootstrap 5. Марк Отто про изменения: новый логотип, новые и обновлённые компоненты, поддержка RTL, доработанная сетка, отказ от jQuery, прекращение поддержки IE и Edge Legacy и другие.

https://blog.getbootstrap.com/2021/05/05/bootstrap-5/
источник