Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «Пятиминутка Angular» #12 — Battle, Real world app, Render Props, Soviet, ng v7 beta
• Подкаст «Frontend Weekend» #73 – Анна Селезнёва об истории эмоционального выгорания, выборе города для работы и поиске себя
• «Девшахта?—?подкаст»: #52: Node.js в бэкенде?—?миф или суровая необходимость?
• Подкаст «Веб-стандарты», Выпуск №141: Браузеры и расширения, планы Vue.js 3.0, цветная прокрутка, фронтенд в Харькове
• Подкаст «Фронтенд Юность (18+)» #67 Хронический простатит JavaScript
•
Видеоблог Вадима Макеева №4. Навигация, дизайнеры и код, актуальность, личинки фронтендера и фреймворки
• 3 видео с KharkivFrontend Summer Conference
• 
SmashingConf Toronto 2018, 11 видео
• Full Stack Fest 2018, 34 видео
• Node.js Foundation и JS Foundation заявили об объединении
•
Что происходит при создании контейнера Flexbox?
• «Спор из-за пустого места» и изменение в селекторах 4 уровня
• Первый (и странный) публичный черновик CSS-модуля скроллбаров
• Отладка и оптимизация CSS: Инструменты для разработчиков, встроенные в браузер, Инструменты измерения качества кода, Минификация с CSSO
• Наиболее распространенные варианты использования Flexbox
• Создание гибких лейаутов с помощью Flexbox
• Селекторы Sass: вкладывать или не вкладывать?
• Scribble-Font — шрифт для создания Scribble Font for Prototyping & Wireframing
• Стилизация битых изображений
• Как я организовываю CSS в больших проектах с помощью UFOCSS?—?часть 2
• Создаём простую игру на Vanilla JS
• Объяснение функционального программирования в JavaScript: Fusion & Transduction
• Как прекратить использовать console.log() и начать использовать дебаггер в вашем браузере
• Почему каждый начинающий разработчик фронтенда должен знать о шаблоне «издатель-подписчик»? AKA: как понимать асинхронный JS код наименее болезненным способом
• Карманный справочник по: Функциям в JavaScript, Прототипам в JavaScript
• Сравнение серверного рендеринга в приложениях на React и Angular
• Представлен переработанный web-браузер Firefox Focus
• В Firefox будет добавлена поддержка формата изображений WebP
• Google позволит играть в «Assassin’s Creed Одиссея» прямо в Chrome
• Chrome 70 — что нового в DevTools
• Google изменила требования к расширениям Chrome
• Что нового в Microsoft Edge, обновленном в Windows 10 October 2018 Update
• Microsoft представила программу Your Phone для запуска Android-приложений на компьютере
• Microsoft выложила MS-DOS 1.25 и 2.0 на GitHub
• Выход WordPress 5.0 запланирован на 19 ноября 2018
• Microsoft обновила Windows 10. Что нового?
• Microsoft — это новая Apple. Мнение
• Подборка эзотерических языков программирования
• Следующая версия Wi-Fi будет называться Wi-Fi 6
• Обнаружены фишинговые формы, подписанные сертификатами Cloudflare и Microsoft
• В Git устранена уязвимость, которая может привести к выполнению кода атакующего
?
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
•
Подкаст «Пятиминутка Angular» #12 — Battle, Real world app, Render Props, Soviet, ng v7 beta•
Подкаст «Frontend Weekend» #73 – Анна Селезнёва об истории эмоционального выгорания, выборе города для работы и поиске себя •
«Девшахта?—?подкаст»: #52: Node.js в бэкенде?—?миф или суровая необходимость?•
Подкаст «Веб-стандарты», Выпуск №141: Браузеры и расширения, планы Vue.js 3.0, цветная прокрутка, фронтенд в Харькове•
Подкаст «Фронтенд Юность (18+)» #67 Хронический простатит JavaScript•
Видеоблог Вадима Макеева №4. Навигация, дизайнеры и код, актуальность, личинки фронтендера и фреймворки•
3 видео с KharkivFrontend Summer Conference•
SmashingConf Toronto 2018, 11 видео•
Full Stack Fest 2018, 34 видео
Веб-разработка
• Node.js Foundation и JS Foundation заявили об объединении
- Инструменты:
• 10 лучших VS Code-расширений 2018 года для фронтенд-разработчиков
• Симуляция мобильных устройств с помощью Device Mode в Chrome DevTools
• project-explorer: CLI инструмент визуализации любого проекта в виде дерева с аннотациями
- Accessibility:
• Доступность интерфейсов. Лекция Яндекса
• Как сделать блок Terms & Conditions доступным
• Как мы сделали доступным меню в Basecamp 3
• О правильном написании хороших текстовых альтернатив
- Анимация:
• Multibox Menu — анимированная навигация, состоящая из нескольких блоков
• Двигаем фон вместе с курсором мыши
CSS
•
Что происходит при создании контейнера Flexbox?• «Спор из-за пустого места» и изменение в селекторах 4 уровня
• Первый (и странный) публичный черновик CSS-модуля скроллбаров
•
Отладка и оптимизация CSS: Инструменты для разработчиков, встроенные в браузер, Инструменты измерения качества кода, Минификация с CSSO•
Наиболее распространенные варианты использования Flexbox•
Создание гибких лейаутов с помощью Flexbox•
Селекторы Sass: вкладывать или не вкладывать?•
Scribble-Font — шрифт для создания Scribble Font for Prototyping & Wireframing•
Стилизация битых изображений•
Как я организовываю CSS в больших проектах с помощью UFOCSS?—?часть 2
JavaScript
• Создаём простую игру на Vanilla JS
•
Объяснение функционального программирования в JavaScript: Fusion & Transduction•
Как прекратить использовать console.log() и начать использовать дебаггер в вашем браузере•
Почему каждый начинающий разработчик фронтенда должен знать о шаблоне «издатель-подписчик»? AKA: как понимать асинхронный JS код наименее болезненным способом•
Карманный справочник по: Функциям в JavaScript, Прототипам в JavaScript•
Сравнение серверного рендеринга в приложениях на React и Angular- ES2015+:
• HTTP203: предложения нового синтаксиса для JS в 2018-м
• JavaScript ES6: слабые стороны
• Практическое ES6 руководство, о том, как сделать HTTP запрос с помощью Fetch API
• Стрелочные функции JavaScript: как, когда (и КОГДА НЕ) использовать их
VueJS:
• Планы на следующую версию Vue.js
• Почему я выбрал Vue.js вместо React
• Радость создания Vue приложений на Typescript?—?часть 1: Vue Class Components
• Создание SPA клона поиска Google на Vue и Flask
• Юнит-тестирование вашего первого компонента на Vue.js
• Глубокое погружение в новые Vue Devtools v5.0
• Бесплатные шаблоны для админок на vue.js и bootstrap
React:
• Разработка React-приложений с использованием ReasonReact
• Начинаем работать с React и GSAP Animations
• React/JSX в качестве серверного языка шаблонизации
• Смерть от тысячи порезов — чеклист для избавления от популярных проблемах с производительностью в React
• 9 React Styled-Components UI библиотек в 2018
• Как создать PWA игру за 5 шагов используя Preact
• Тестирование компонентов в React: что и как тестировать с помощью Jest и Enzyme
• Эти основы React, которые вы пропустили, могут быть убийственны для вас
• Миграция с Angular на React
• Уроки, извлечённые из работы с долгосрочным SPA приложением на React/Redux
• React Podcast 23: Ditch Authority with Sunil Pai
Angular:
• Лучшие практики для чистого и производительного приложения на Angular
• Как использовать анимации в Angular 6
• Как создать новостное приложение с помощью Angular 6 и Material Design
• Упрощенное юнит-тестирование в Angular
• Изучаем Drag and Drop в новом Angular Material CDK
• На что обратить внимание при переходе с AngularJS на Angular 2.0+
- Libs & Plugins:
• lvovich — Склонение названий городов, определения пола по ФИО, склонения имен по падежам
• Cogear.JS – современный статический генератор
• imgToAscii — JavaScript имплементация перевода изображений в Ascii код
• ferret — система веб-скрапинга для упрощенного извлечения данных из веба для последующего ui тестирования, машинного обучения и аналитики
Браузеры
• Представлен переработанный web-браузер Firefox Focus
• В Firefox будет добавлена поддержка формата изображений WebP
• Google позволит играть в «Assassin’s Creed Одиссея» прямо в Chrome
•
Chrome 70 — что нового в DevTools•
Google изменила требования к расширениям Chrome•
Что нового в Microsoft Edge, обновленном в Windows 10 October 2018 Update
Занимательное
• Microsoft представила программу Your Phone для запуска Android-приложений на компьютере
• Microsoft выложила MS-DOS 1.25 и 2.0 на GitHub
• Выход WordPress 5.0 запланирован на 19 ноября 2018
• Microsoft обновила Windows 10. Что нового?
• Microsoft — это новая Apple. Мнение
• Подборка эзотерических языков программирования
• Следующая версия Wi-Fi будет называться Wi-Fi 6
• Обнаружены фишинговые формы, подписанные сертификатами Cloudflare и Microsoft
• В Git устранена уязвимость, которая может привести к выполнению кода атакующего
?
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Комментарии (6)
SelenIT3
08.10.2018 12:34Спасибо за дайджест!
Вот только насчет «стилизации битых изображений» у меня возникло некоторое дежавю — статья показалась мне до боли похожей на позапрошлогоднюю статью Ире Адеринокун на ту же тему (есть даже перевод). Не плагиат ли? :)
alexzfort Автор
08.10.2018 13:10Кстати да, сложилось похожее впечатление и изначально не планировал включать эту статью в подборку. Но она была в топе многих ресурсов на этой неделе, да и почти три года прошло, так что решил — пусть будет :)
SelenIT3
08.10.2018 13:38+1Меня в ней еще смутило, что автор упорно относит элементы форм к замещаемым элементам, хотя по стандарту HTML они незамещаемые (и то, что браузеры не дают стилизовать их как нам нужно — баг, который надо фиксить:).
alexzfort Автор
08.10.2018 14:06Соглашусь, что есть спорные нюансы, но сам посыл статьи остается крайне верным — большинство верстальщиков (не говоря уже о жс-ориентированных фронтендерах) забивают на стилизацию битых картинок, чем смущают не особо продвинутых пользователей интернетов
CuamckuyKot
Спасибо за дайджест и упоминание Cogear.JS, в частности.
Скажите, а статья на Medium — это перевод данного материала получается?
alexzfort Автор
90% материалов на английском языке, поэтому грех было не публиковать англоязычную версию дайджеста еще где-то :)