Size: a a a

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

2020 December 17
Веб-стандарты
Новинки Firefox 84 в обзоре Криса Миллса: инспектор порядка фокуса на странице, поддержка сложных селекторов в :not, новый интерфейс PerformancePaintTiming, удаление AppCache, адреса localhost теперь считаются безопасными для удобства тестирования.

https://hacks.mozilla.org/2020/12/and-now-for-firefox-84/
источник
Веб-стандарты
Справляемся с коротким и длинным контентом в CSS. Ахмад Шадид предлагает способы решения ситуаций переполнения и недополнения элементов интерфейса.

https://ishadeed.com/article/css-short-long-content/
источник
Веб-стандарты
Фронтенд-2021: тенденции, как мы их видим. Филипп Нехаев располагает тренды и технологии фронтенда на технологическом радаре в блоге Tinkoff на Хабре: JS, TS, Vue, Svelte, ML, BFF, DI и другие.

https://habr.com/p/533462/
источник
2020 December 18
Веб-стандарты
Как переехать с Wordpress на Eleventy. Скотт Доусон показывает, как перевезти блог на статический генератор сайтов минимальными усилиями.

https://www.smashingmagazine.com/2020/12/wordpress-eleventy-static-site-generator/
источник
Веб-стандарты
Слайдер «До и После». Джозеф Вонг пошагово реализует на JS и CSS слайдер для сравнения изображений.

https://levelup.gitconnected.com/how-to-create-a-before-after-image-slider-with-css-and-js-a609d9ba77bf
источник
Веб-стандарты
GUI Challenges: центрирование в CSS. Второй эпизод серии Адама Аргайла про способы центрирования и их особенности.

Статья https://web.dev/centering-in-css/
Видео https://youtu.be/ncYzTvEMCyE
Код-лаб https://web.dev/codelab-centering-in-css/
источник
2020 December 21
Веб-стандарты
MDN закончил переезд на Гитхаб. Главный редактор MDN Крис Миллс рассказал о новой платформе с кодовым именем Yari, которая позволит главному хранилищу знаний по веб-технологиям стать ближе к сообществу: маркдаун, пулреквесты, ишью и знакомый интерфейс.

https://hacks.mozilla.org/2020/12/welcome-yari-mdn-web-docs-has-a-new-platform/
источник
Веб-стандарты
Опубликован первый рабочий черновик Screen Fold API, который позволит определять состояние новых устройств со сгибаемыми экранами. Добавится интерфейс ScreenFold и новые медиафичи screen-fold-posture и screen-fold-angle.

https://www.w3.org/TR/screen-fold/
источник
Веб-стандарты
Индивидуальные свойства для CSS-трансформаций. Команда WebKit рассказала о свойствах translate, rotate и scale, которые появились в Safari TP 117 (а также в Firefox и Chrome Canary) и позволят удобнее менять или анимировать отдельные трансформации.

https://webkit.org/blog/11420/css-individual-transform-properties/
источник
2020 December 22
Веб-стандарты
Команда React представила Zero-Bundle-Size Server Components и обёртки для удобного получения данных. Эти компоненты могут быть целиком отрендерены в HTML, что уменьшает размер бандлов, ускоряет загрузку и потребление ресурсов на клиенте.

https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html
источник
Веб-стандарты
Выпуск №261. Ольга Алексашенко, Вадим Макеев и Никита Дубко про Трансформации, Firefox 84, боль, MDN, черновики CSS, переполнение, центрирование и вьюпорт.

Слушайте на Ютубе https://youtu.be/ZRWhAWQH7L8
Читайте на Медиуме https://medium.com/p/748b61d7b796
источник
Веб-стандарты
00:00:52 События
00:03:13 Отдельные трансформации
00:09:16 Firefox 84
00:16:16 Боль разработчиков
00:27:26 MDN на Гитхабе
00:37:04 Удивительные черновики CSS
00:50:15 Переполнение и недополнение
00:56:44 Способы центрирования
01:02:09 Залоченный вьюпорт
источник
Веб-стандарты
Как в Discord реализовали клавиатурную навигацию по приложению. Джон Эгеланн делится опытом команды и рассказывает о сложностях и нюансах, возникающих при работе с фокусом.

https://blog.discord.com/how-discord-implemented-app-wide-keyboard-navigation-abf073fd71de
источник
2020 December 23
Веб-стандарты
Что можно положить в CSS-переменную. Уилл Бойд показывает, какие различные значения может принимать кастомное свойство и для чего их можно применять.

https://codersblock.com/blog/what-can-you-put-in-a-css-variable/
источник
Веб-стандарты
Basecamp представила фреймворк Turbo, продолжающий идею Hotwire по передаче HTML вместо JSON. Фреймворк частично обновляет страницы с эффективностью SPA, но без перехода на JS-архитектуру.

Анонс https://twitter.com/dhh/status/1341420143239450624
Turbo https://turbo.hotwire.dev/
Видео https://youtu.be/eKY-QES1XQQ
источник
2020 December 24
Веб-стандарты
Что нужно знать о популярных JS-фреймворках. Дима Чудинов рассказывает новичкам об истории создания фреймворков, об их пользе и принципах работы и отличиях фреймворков друг от друга.

https://habr.com/p/533702/
источник
Веб-стандарты
React Server Components. Эдди Османи разбирается в свежем анонсе команды React, который в будущем поменяет подход к рендерингу компонентов и перенесёт часть нагрузки на бэкенд. В чём отличие от SSR, что ждёт Next.js и другое.

https://addyosmani.com/blog/react-server-components/
источник
2020 December 25
Веб-стандарты
Как добавлять фавиконки в 2021. Андрей Ситник подробно разбирает, каких файлов достаточно, чтобы фавиконка корректно отображалась в большинстве браузеров.

https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
источник
Веб-стандарты
Несколько трюков с консолью. Патрик Броссет делится приёмами, которые делают работу с консолью в DevTools браузера удобнее и экономят время.

https://patrickbrosset.com/articles/2020-12-22-a-few-web-console-tricks/
источник
2020 December 28
Веб-стандарты
Отладка WebAssembly современными инструментами. Ингвар Степанян показывает возможности Chrome DevTools для работы с WebAssembly: дебаггер, инспектор памяти, профилирование кода и другие.

https://developers.google.com/web/updates/2020/12/webassembly
источник