Роутинг, бандлинг и ленивая загрузка на 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.
Читать полностью…Кадрирование и масштабирование графики в браузерах, где не работает object-fit http://www.sarasoueidan.com/blog/svg-object-fit/ и внешние картинки в инлайновой графике с текстом https://www.sarasoueidan.com/blog/optimizing-svg-delivery-with-svg/ — Сара Суайдан возвращается с новыми статьями про SVG.
Читать полностью…Крупнейшие мероприятия 2018 года по дизайну и фронтенду, обзор на Хабре — https://habr.ru/p/346484/
Читать полностью…Выражения от контейнера. Джонатан Снук на dotCSS в Париже о мечте всех верстальщиков, как она может быть реализована и что делать до тех пор — https://www.dotconferences.com/2017/11/jonathan-snook-container-queries
Читать полностью…ECMAScript вероятно будет рекомендовать использовать точку с запятой в конце строк. Уточнение Дэниела Эренберга рекомендует не полагаться на автоматическую расстановку. Обсуждение формулировки и справедливости рекомендации в официальном репозитории — https://github.com/tc39/ecma262/pull/1062/files
Читать полностью…Кастомные элементы v1 https://bugzilla.mozilla.org/1406825 и <script type="module"> https://bugzilla.mozilla.org/1428002 включены по умолчанию в Firefox Nightly и должны быть готовы для релиза в Firefox 59 в середине марта.
Читать полностью…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/
Читать полностью…Альтернативная реализации npm ES-модулей для Node.js как попытка решить проблему обоих лагерей JS-разработчиков. Подробное описание инициативы и реализация в форке — https://gist.github.com/ceejbot/b49f8789b2ab6b09548ccb72813a1054
Читать полностью…Выпуск №103: браузеры и разработка интерфейсов, где искать, если потеряли статью, точка с запятой в JS, понятно о выравнивании в CSS, трюки Сары с SVG и Андрей Саломатин в гостях про управление проектами и фронтенд в Берлине. Слушайте на Медиуме https://medium.com/p/e1fedf35fbb4 или сразу на Ютубе https://youtu.be/Zn81bUw-t44.
Читать полностью…Важное для раскладки на гридах свойство display: contents появится в Chrome и Safari (и уже три года как в Firefox). Мануэль Рего о причинах важности и работе Igalia по внедрению — https://blogs.igalia.com/mrego/2018/01/11/display-contents-is-coming/ Ждём только Edge, кстати, проголосуйте: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/10938981-implement-the-box-generation-keywords-from-css-dis
Читать полностью…15 видео с ColdFront 2017, прошедшей 5–6 сентября в Копенгагене — https://www.youtube.com/playlist?list=PLl0kzWeYVmgsShWwV0jobX_K-01uMT49o В этом году конференция пройдёт 13–14 ноября — https://2018.coldfront.co/
Читать полностью…Выравнивание в современном CSS. Патрик Броссет рассказывает про Box Alighment в подробностях и с примерами https://medium.com/p/2d3ea7a02a36 и предлагает шпаргалку на каждый день http://patrickbrosset.com/lab/2018-01-10-css-alignment-cheatsheet/
Читать полностью…