Разработка плагинной системы на JavaScript. Брайан Браун показывает простую плагинную архитектуру и объясняет сложности, которые нужно учитывать при её разработке — https://css-tricks.com/designing-a-javascript-plugin-system/
Size: a a a
2020 August 27
Эффективное тестирование вёрстки. Расшифровка доклада Максима Соснова про многообразие инструментов тестирования и подходы, позволяющие сократить время на написание тестов — https://habr.com/p/499638/
2020 August 28
Почему логические свойства в CSS ещё не готовы? Элад Шехтер рассказывает, какие части спецификации не реализованы в браузерах и почему логические свойства важны для разработки сайтов — https://medium.com/p/c102925a5cba
Это или то. Сборник сравнений похожих в веб-разработке подходов и инструментов Нгуена Хуу Фуока с подсказками и хорошими практиками — https://thisthat.dev/
2020 August 31
Открытый онлайн-чемпионат Яндекса для разработчиков пройдёт с 21 сентября по 7 ноября. Кроме фронтенда, соревнования пройдут по бэкенду, мобильной разработке, аналитике, алгоритмам и машинному обучению. Призовой фонд чемпионата 3 300 000 ₽ — https://yandex.ru/cup/frontend/?utm_source=telegram&utm_medium=posev&utm_campaign=webstandart
Недоступность в картинках. Юля Бухвалова взялась разобраться, что такое «недоступно для скринридера» и проверила, как звучит и выглядит плохая страница, по сравнению с хорошей — http://css.yoksel.ru/inaccessibility/
Modal — простой и доступный веб-компонент для модальных диалогов Filament Group. В основе кастомный элемент <fg-modal> и атрибут inert, для IE11 собирается отдельная версия с полифилами — https://filamentgroup.github.io/fg-modal/demo/
2020 September 01
CSS Values. Луи Лазарис делится инструментом для поиска возможных значений CSS-свойств с информацией об их браузерной поддержке — https://cssvalues.com/
Выпуск №245: Firefox 80 и Chrome 85, никто не новый IE, зачем Yarn 2, новый AVIF и WebP v2. В гостях Андрей Ситник. Слушайте на Ютубе https://youtu.be/W11KhAYfQu8, читайте на Медиуме https://medium.com/p/c3fa63b811ce
Event Listeners: делегирование или прямой биндинг. Джейсон Миллер сравнивает между собой два способа подписки на события, связанные с элементами DOM — https://jasonformat.com/event-delegation-vs-direct-binding/
2020 September 02
Насколько сложно сделать кастомный <select> правильно? Практически невозможно. Педро Дуарте рассматривает существующие решения, перечисляет требования к хорошей реализации и предлагает свою из дизайн-системы Radix — https://www.modulz.app/blog/under-the-spotlight-select
Манипуляции с графикой на CSS. Абдул Хазиз накладывает маски, размывает, применяет фильтры и смешивает изображения для достижения интересных эффектов — https://dev.to/ziizium/image-manipulation-with-css-11dd
Углы градиентов в CSS, Figma и Sketch. Нильс Биндер показывает, почему почти невозможно воспроизвести поведение CSS-градиентов в популярных редакторах графики и на что стоит обращать внимание при вёрстке элементов с градиентами — https://9elements.com/blog/gradient-angles-in-css/
2020 September 03
Больше контроля над фокусом для разработчиков и пользователей. В Chrome 86 появится псевдокласс :focus-visible и настройка Quick Focus Highlight, которая будет показывать фокус вне зависимости от стилей сайта для лучшей доступности интерфейса — https://blog.chromium.org/2020/09/giving-users-and-developers-more.html
Создание шапки сайта на флексах. Ахмад Шадид собирает шаг за шагом вёрстку типичной шапки с вариациями и простой адаптацией — https://ishadeed.com/article/website-headers-flexbox/
Всё, что разработчику нужно знать про Figma. Юрн ван Виссен разбирает самое важное на примере макета: от горячих клавиш, стилей и инспектирования до экспорта графики — https://www.smashingmagazine.com/2020/09/figma-developers-guide/
2020 September 04
Энди Белл делится приёмом, как добавить перенос строки после inline-элемента без правки разметки — https://piccalil.li/quick-tip/create-a-line-break-while-maintaining-inline-status/
Оформление маркеров списков при помощи псевдоэлемента ::marker. Адам Аргайл и Ориол Бруфау рассказывают о новом псевдоэлементе, который уже работает в Firefox и появится в Chrome 86 — https://web.dev/css-marker-pseudo-element/
Кастомные стили для <select> на чистом CSS. Стефани Эклз разбирается, как стилизовать нативный <select> так, чтобы он одинаково выглядел во всех браузерах — https://moderncss.dev/custom-select-styles-with-pure-css/