Выпуск №342. Никита Дубко, Андрей Мелихов, Юля Миоцен про Safari 16.1, Chrome 107/108, проблемы Next.js 13, новый конфиг ESLint, мэш-градиенты, блендинг, опрос про дизайн и быстрый YouTube.
Слушайте на Ютубе https://youtu.be/u_zsXrW_T9k
Ссылки на сайте https://web-standards.ru/podcast/342/
Три видео со вчерашней встречи MinskJS #3: JS-декораторы, Redux-Saga и полный Spectre уязвимостей — https://www.youtube.com/playlist?list=PL-whh3wS8xsIYbyxR513W3NXU-VJIxxFq
Читать полностью…Ещё большее ускорение WebAssembly: новый потоковый и многоуровневый компилятор в Firefox. Лин Кларк просто о сложном в комиксах на Хабре — https://habrahabr.ru/post/347158/
Читать полностью…БЭМ для начинающих. Очевидные и неочевидные вопросы верстки. Статья Инны Белой по мотивам выступления на БЭМапе — https://medium.com/p/1a21d67cf840
Читать полностью…Сборник требований и возможных примеров использования для выражений от контейнера. Рабочий черновик Общественной группы по вопросам адаптации (RICG) для разработки будущей спецификации https://wicg.github.io/cq-usecases/. Разработка и обсуждение документа на Гитхабе https://github.com/WICG/cq-usecases.
Читать полностью…Роутинг, бандлинг и ленивая загрузка на Webpack. Серджио Гомес разбивает JS на отдельные, действительно нужные части и лениво подгружает остальное — https://sgom.es/posts/2018-01-18-multiple-routes-webpack/
Читать полностью…Лучшая поддержка CSS в первом тестовом релизе WebStorm 2018.1: подсказки для SVG-свойств, переход по клику в исходник стилей до компиляции по картам кода, а ещё удобный запуск npm-скриптов и умный копипейст из HTML в JSX — https://blog.jetbrains.com/webstorm/2018/01/webstorm-2018-1-eap/
Читать полностью…Испытания и невзгоды атрибута title. Скотт Охара об истории атрибута, его реализации в браузерах и применения для доступного описания — https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/
Читать полностью…Выпуск №103: уточнение про селектор matches, гриды для бизнеса, нейровёрстка, или как машины вас не заменят, согласие по <main>, общие JS-модули, шортики и уважение. Слушайте на Медиуме https://medium.com/p/6d5af0f5547 или сразу на Ютубе https://youtu.be/Cgl_gsCKRDA.
Читать полностью…Первый Frontend Meetup в Новосибирске пройдёт 3 февраля в офисе N1.RU: библиотека компонентов для дизайнера и разработчика, реактивное программирование на RxJS и Flow в легаси-коде — https://www.meetup.com/DEVNSK/events/246962197/
Читать полностью…Бесплатный видеокурс по гридами Уэса Боса: от основ до реальных примеров. Создан при поддержке Mozilla, состоит из 25 видео на 4 часа — https://cssgrid.io/
Читать полностью…Удивительно простые раскладки. Джен Симмонс из Mozilla рассказывает про явное и неявное в контексте гридов и показывает пример адаптивной фотогалереи всего одной строчкой кода в первом сезоне нового шоу Layout Land — https://youtu.be/tFKrK4eAiUQ?list=PLbSquHt1VCf2Y4UEiaGjAOxuTXzo5iyZA
Читать полностью…Открылась предпродажа билетов на KharkivCSS #3 в Харькове 21 апреля: билеты по 350 ₴ (700 ₽) https://2event.com/events/1174678, в программе 10 докладов http://kharkivcss.org/.
Читать полностью…Изучаем гриды на сетках в швейцарском стиле. Введение в сетки и эксперименты Павла Лаптева с новой системой раскладки — https://medium.com/p/2bd02e913fa
Читать полностью…Можно только один <main> на всю страницу — теперь и по версии живого стандарта HTML, а не только W3C (разногласием меньше) https://github.com/whatwg/html/pull/3354 Стиву Фолкнеру удалось уговорить WHATWG рекомендовать более доступное использование, см. оригинальное ишью https://github.com/whatwg/html/issues/100.
Читать полностью…Удобная работа в Adobe XD с новыми интеграциями: импорт в Avocode https://medium.com/p/2e684f1d179 и экспорт в Zeplin https://medium.com/p/726c8a4b2f22, обе пока работают только на macOS.
Читать полностью…Новинки Firefox 58 в обзоре Марата Таналина: font-display, finally() для промисов, Performance Navigation Timing, Intl.PluralRules, новый быстрый компилятор WebAssembly и другое — http://tanalin.com/blog/2018/01/firefox-58/
Читать полностью…Правила работы с Гитхабом в HTML Academy: от терминологии до веток, ишьев, системы лейблов и работы с кодом в компании — https://htmlacademy.ru/blog/213-github-in-academy
Читать полностью…Бандлер модулей Rollup v0.55.0 теперь умеет разделять код, выводить в формате SystemJS, поддерживает плагины acorn и другое. Подробнее в майлстоуне https://github.com/rollup/rollup/milestone/10?closed=1 или в треде Лукаса Тагерта https://mobile.twitter.com/lukastaegert/status/955724244415057920
Читать полностью…Новинки Safari 11.1 в бетах iOS и macOS: сервис-воркеры, веб-манифест, API для платежей, font-display, видео в <img>, SRI, замороженный UA, улучшения отладчика. Подробнее в официальной документации https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_11_1.html или в треде Рики Монделло https://mobile.twitter.com/rmondello/status/956256697969909760
Читать полностью…Bootstrap 4, спустя годы разработки: новые примеры, известные проблемы, планы на 4.1 http://blog.getbootstrap.com/2018/01/18/bootstrap-4/ и обновлённое руководство по миграции с предыдущих версий https://getbootstrap.com/docs/4.0/migration/
Читать полностью…Сборник слайдов лекций Раса Уикли по CSS с примерами и заданиями, всего 24 темы: от основ синтаксиса до каскада и сложных селекторов — https://russmaxdesign.github.io/maxdesign-slides/
Читать полностью…Как убедиться, что мёртвый CSS на большом проекте действительно мёртвый? Закинуть невидимую фоновую картинку и ждать. Простой совет Гарри Робертса — https://csswizardry.com/2018/01/finding-dead-css/
Читать полностью…Игра гомоку на чистом CSS. Роман Комаров сочетает эксперименты из предыдущей статьи про флексы со счётчиками и создаёт казалось бы невозможную механику — http://kizu.ru/en/blog/counters-and-stones/
Читать полностью…Ранжирование результатов поиска в мобильной выдаче Google будет зависеть от скорости загрузки и работы сайтов — https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html Рекомендованные инструменты для тестирования: Chrome UX Report, Lighthouse, PageSpeed Insights.
Читать полностью…В стартовом шаблоне create-react-app (v2, альфа) появилась поддержка CSS-модулей по схеме [name].module.css и с именованием [directory]__[filename]___[classname] вместо привычной случайной строки — https://github.com/facebookincubator/create-react-app/pull/2285
Читать полностью…Два новых доклада в программе WSD в Москве 3 февраля: Никита Дубко распечатает курсач на CSS, а Людмила Мжачих проведёт фронтенд-ликбез — https://wsd.events/2018/02/03/#schedule
Читать полностью…Speedometer 2.0, новый тест скорости JS в браузерах, разработанный совместными усилиями WebKit и Chromium. Проверка включает 480 тестов: популярные фреймворки и библиотеки, чистый ES2015 и JS скомпилированный из Babel, TypeScript, Elm, PureScript — https://webkit.org/blog/8063/speedometer-2-0-a-benchmark-for-modern-web-app-responsiveness/
Читать полностью…Инструменты: Gulp. Екатерина Назарова с обзором популярного инструмента автоматизации в свежем выпуске .getInstance — https://youtu.be/86TvKUX3hMI
Читать полностью…Небольшие шаги к доступности в стеке React. Опыт Хьюго Жироделя из N26: постановка требований, предотвращение ошибок, правила, линтинг, обмен знаниями — https://hugogiraudel.com/2018/01/08/little-steps-for-accessibility-at-n26/
Читать полностью…