Дайджест свежих материалов из мира фронтенда за последнюю неделю №254 (13 — 19 марта 2017)

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

Веб-разработка

CSS

Javascript

Браузеры

Занимательное

Веб-разработка

• Правила использования ARIA в HTML
• Подкаст Веб-стандарты, Выпуск №59: Chrome 57, бета Samsung Internet, Safari TP, гриды на практике, выражения от контейнера, прокрутка в вебе, оптимизация шрифтов.
• Фронтёрки: новый подкаст про фронтенд и людей, который ведёт Тим Маринин. Первый выпуск с Вадимом Макеевым в гостях
• Незрячий программист — о разработке «на слух» и доступности интернета
• Web Developer Roadmap — 2017
• Создание HTML писем под Gmail: 12 вещей, о которых вы должны знать
• HTML5 Video и Audio: разметка
• Формы HTML5: типы полей ввода (часть 2)
• Что такое цветные шрифты?
• Виталий Фридман представляет новую версию Smashing Magazine
• Эффект многослойного движения по наведению
• SVG:
  
  • Оформление SVG-фигур бесплатный курс HTML Академии
  • Трибьют анимации Miyazaki – с SVG и GSAP
  • 7 решений для создания более доступных SVG
  • shapeshifter — веб-приложение для создания морфинг-анимации в SVG
  
  
• Производительность:
  
  • Веб-производительность топ 100 сайтов для путешествий
  • Что такое HTTP/2?
  • Преимущества производительности в технике прогрессивого улучшения
  • Почему WebAssembly быстрее asm.js
  • Первый взгляд на WebAssembly
  • Итоги AMPconf: AMP — производительный фреймворк, который взрослеет
  • Мы верим в AMP (In AMP we trust)
  
  
• Инструменты:
  
  • Создание Alix, Chrome-расширения для линтинга HTML
  • Как передавать параметры через командную строку в Gulp задачи
  • animista — онлайн-сервис для удобного создания CSS анимации
  • Console Importer — простой импорт JS и CSS ресурсов через консоль в Chrome
  
  
• Практика
  
  • Реализуем пуш-уведомления на фронтенде и бэкенде
  • Minecraft в WebVR с помощью HTML используя A-Frame
  • Web Components: как создать свои собственные кастомные компоненты
  
  

CSS

• Проблема выбора структуры документа
• Новая версия оптимизатора CSSO 3.0.0, с отдельным CLI и новым парсером CSSTree
• CSS Grid Layout:
  
  • Как грид-раскладка (Grid Layout) провела лето
  • Начинаем работать с CSS Grid , от Robin Rendle на css-tricks
  • Как организовывать и выравнивать элементы в Grid Layout
  • CSS Grid Layout и прогрессивное улучшение
  • CSS Grid VS Flexbox: практическое сравнение
  • Знакомимся с CSS Grid Layout, подробная статья от Chris Wright
  • CSS Grid Layout здесь, чтобы остаться. История, о разработке CSS Grid Layout в Chromium/Blink и Safari/WebKit, выполненной Igalia с помощью поддержки Bloomberg
  
  
• Пишем модульный CSS (часть 1)
• Как модернизировать ваш CSS с помощью css-js-loader
• Waffle grid — простая система гридов на flexbox
• Предотвращение reflow

JavaScript

• Краткая история JavaScript. Часть 1
• Эволюция модульного JavaScript
• Фильтрация и создание цепочек в функциональном JavaScript
• Асинхронный JavaScript против отложенного
• Вышел jQuery 3.2.0. Среди всего прочего — поддержка кастомных свойств CSS
• Привычкаи эффективных JavaScript разработчиков
• Заменит ли WebAssembly JavaScript?
• Три хака при работе с массивами
• Управление асинхронными зависимостями с JavaScript
• Вещи, которые вы должны знать про объекты и иммутабельность в JavaScript
• ES2015+:
  
  • Новинки JavaScript: Асинхронные итераторы
  • 5 особенностей, которые вы можете использовать в ES6 уже сегодня
  • Понимание классов в ES6
  • Communicating Sequential Processes: альтернатива асинхронным генераторам от Dr. Axel Rauschmayer
  
  
• React:
  
  • Готовим плацдарм для react-приложения
  • Представление библиотеки React Loadable
  • Представление React Native App (Introducing Create React Native App)
  • Жизненный цикл методовв react, объясненный на примере детского танца
  • Angular 2 vs React – финальная битва – раунд 2
  • Маршрутизация в React, несложный способ
  • Мемоизация React компонентов
  • React Router — изучение роутинга
  • Быстрые советы для React-Redux приложений
  
  
• Vue:
  
  • Как создать SPA c помощью Vue 2 (часть 1)
  • Откуда взялся Vue.js?
  • Быстрое введение в VueJS
  • Пишем компоненты Vue.js с Flow
  • Простой серверный рендеринг с Vue.js и Express
  • bottle-vue-kickstart — стартовый пакет с Vue.js, включающий Axios, Bulma.io, Babel и Webpack 2
  • Eagle.js — слайдшоу фреймворк на Vue.js для хакеров
  
  
• Angular:
  
  • Планируем приложение на Angular
  • 5 функций, на которые нужно обратить внимание в Angular v4
  • Понимание архитектуры компонентов: рефакторинг Angular приложения
  • Как создать Angular приложение: добавление стилей с Kendo UI
  
  
• Plugins & libs:
  
  • HyperApp — JS библиотека на 1kb для создания фронтенд приложений с привкусом Elm
  • Sazerac — модульное тестирование, основанное на данных для Jasmine, Mocha и Jest
  • Fetch Inject — вставка ресурсов в DOM с использованием Fetch Injection
  • Planck.js — физический 2D движок
  
  

Браузеры

• Тестирование Firefox 53-beta и Firefox Developer Edition 54
• Причина прекращения поддержки звуковой системы ALSA в Firefox
• Chrome 57 умерил аппетиты фоновых вкладок для экономии энергии
• Chrome 56 получил поддержку WebGL 2.0
• Разработчики Chrome намерены перейти к полной остановке выполнения фоновых вкладок
• В Chromium добавлена поддержка анимированных PNG-изображений
• Chrome 57 научился «душить» фоновые вкладки для снижения энергопотребления

Занимательное

• Новый алгоритм Google позволяет сжать JPEG-файлы на 35%
• GitLab объявил о покупке Gitter и планирует открыть его код
• Google выложил в открытый доступ код алгоритма, ужимающего изображения на 35%
• В Telegram началось тестирование зашифрованных голосовых звонков
• Microsoft запустила конкурента Slack для Office 365 в международном масштабе
• Конец еще одной эпохи: Windows Vista официально перестанут поддерживать с 11 апреля
• На каких принципах построен дизайн продуктов, которыми пользуется весь мир — примеры Airbnb, Facebook, Apple и других компаний
• В Google теперь можно искать фразы с символами ||, === и другими программистскими обозначениями
• Сооснователь Yahoo рассказал, что фиолетовый стал фирменным цветом компании по ошибке
• Если бы Стив Джобс воскрес или 7 смертных грехов Apple
• 7 навыков, которые необходимы IT-специалистам, чтобы получить работу в Apple, Google или Microsoft

Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.

Let's block ads! (Why?)