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

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

CSS

Javascript

Браузеры

Новости

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

• Подкаст Веб-стандарты, Выпуск №19 : Семантика CSS и HTML, содержимое в CSS, полезное для SVG, веб и приложения.
• Что должен знать html-верстальщик?
• С какими сервисами сталкивается frontend-разработчик на фрилансе? Интервью с Антоном Немцевым
• Прогрессивные веб-приложения:
  
  • Прогрессивные веб-приложения — давайте не будем повторять ошибок, которые были в начале становления отзывчивого дизайна
  • PWA Discovery: вы еще ничего не видели (PWA Discovery: You Ain’t Seen Nothin Yet)
  • Проблемы и задачи разработчиков при работе с PWA (Developers Surface Issues And Concerns With Progressive Web Apps)
  • Не стоит безответственно использовать мета-теги iOS для ваших веб-приложений (Don’t use iOS meta tags irresponsibly in your Progressive Web Apps)
  
  
• Инструменты:
  
  • Дополнение в Chrome для валидации ваших AMP страниц
  • Отладка JavaScript с помощью Chrome DevTools Breakpoints
  • Отладка потребления памяти с помощью веб-инспектора в Safari (Memory Debugging with Web Inspector)
  • DevTools Digest: DevTools в 2016-м и после него
  • Как Mozilla помогает разработчикам разбираться с JavaScript ошибками (Helping web developers with JavaScript errors)
  
  
• Что нового в Shadow DOM v1 (в примерах) (What's New in Shadow DOM v1)
• Bootstrap 4: визуальное руководство и обзор нововведений (Bootstrap 4: A Visual Guide)
• Автоматизируйте вашу разработку с помощью Gulp JS (Automate your Workflow with Gulp JS)
• CloudFlare представляет cf-ui — открытый UI фреймворк
• Почему онлайн-хостинг SVG так сложен и как его делать (Why Hosting SVG Online Is Hard (… and How to Do It))
• О свойствах и атрибутах в контексте задания маски с помощью SVG (More About SVG Masking — Properties And Attributes)
• MIND Patterns — книга о доступности от eBay
• Важность Code Review (The Importance of Code Reviews)
• Погружение в Git: ветки в Git-е (Jump Start Git: Branching in Git)
• Уникальные градиенты, построенные по данным для визуализаций с d3.js (Data-based and unique gradients for visualizations with d3.js)
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #41

CSS

• Новый черновик CSS-модуля псевдоэлементов 4 уровня
• Магия CSS. Глава 3. Таблицы. Перевод главы из сборника The magic of CSS
• Семантический CSS. Перевод статьи Semantic CSS Джонатана Снука
• CSS Grid Layout и позиционированные элементы. Перевод статьи CSS Grid Layout and positioned items
• Битва с БЭМ: 10 самых распространенных проблем и способы их решения (часть 1)
• Избегайте переопределения базовых стилей (Avoid Overstyling Base Styles)
• Резиновый список на Flexbox со страницы AMP Roadmap
• AOS: библиотека для реализация CSS-анимаций при скролле страницы
• Интерактивная визуализация данных: анимация viewBox (Interactive Data Visualization: Animating the viewBox)
• 4 свойства, которые меняют наш способ использования CSS (4 features transforming how we use CSS)
• Рационализация функционального CSS (Rationalizing Functional CSS)
• Как создать разметку для сайта новостей с Flexbox (How to Build a News Website Layout with Flexbox)
• Быстрый совет: как z-index и Auto Margin работают во Flexbox (Quick Tip: How z-index and Auto Margins Work in Flexbox)
• CSS специфичность (CSS Specificity)
• EQCSS — библиотека-расширение к CSS для работы с Element Queries
• Изучи Sass (курс в codeacademy) (Learn Sass)
• Sass Deprecate — Sass-миксин, который сигнализирует об устаревшем коде (Sass Deprecate)
• Китайский текст отображается с разными размерами и шрифтами: шрифтовые проблемы в Китае

JavaScript

• Асинхронность в JavaScript: Пособие для тех, кто хочет разобраться
• jQuery 3.0 Final Released
• Введение в функциональный JavaScript: Часть 1
• Видео с ReactEurope 2016: Day 1 , Day 2
• 7 удивительных «свойств» JavaScript (Seven Surprising JavaScript 'Features')
• Шокирующий секрет о статических типах (The Shocking Secret About Static Types)
• TypeScript, WTF?!
• Я ошибался относительно TypeScript, и вот почему (I Was Wrong About TypeScript, Here is Why)
• Делаем ваш JavaScript чистым (Making your JavaScript Pure)
• Создание объектов в JavaScript: паттерны и лучшие практики (JavaScript Object Creation: Patterns and Best Practices)
• Web Storage: меньшее зло для токенов сессии (Web Storage: the lesser evil for session tokens)
• Создание собственной системы тэгов с нуля (Make your own tagging system from scratch)
• Зачем нужен key в default props (ReactJS)
• lernajs — инструмент для управления мульти-пакетными проектами на JavaScript
• ES6:
  
  • Модули ES и Node.js: тяжелый выбор (ES Modules and Node.js: Hard Choices)
  • Почему существуют классы ES6 (Why do ES6 Classes exist and why now?)
  • 10 функций Lodash, которые могут быть заменены с помощью ES6 (10 Lodash Features You Can Replace with ES6)
  • Промисы: все неверные способы (Promises: All The Wrong Ways)
  • Когда не стоит использовать стрелочные функции (When 'not' to use arrow functions)
  • 6 советов для более чистых js промисов (Six tips for cleaner javascript promises)
  
  
• Фреймворки:
  
  • Как добавить ReactJS в существующее веб-приложение
  • Директивы Angular и их аналоги на React (Angular Directives Mapped to React)
  • Использование React Native: год спустя (Using React Native: One Year Later)
  • Масштабирование React.js приложений (Scaling React.js Applications)
  • trixly — универсальный стартовый пакет для Angular 2 и React, с тестами на Mocha & Chai, TSLint-валидацией и компиляцией в ES5 c Babel (trixly — Universal TypeScript starter kit for Angular 2 and React, tests in Mocha & Chai, TSLint for better code quality, transpilation to ES5 by Babel for compatibility)
  • Проверочный лист для код ревью Angular-приложений (Angular Code Review Checklists)
  • Всестороннее погружение в хуки Angular 1.5 lifecycle (Comprehensive dive into Angular 1.5 lifecycle hooks)
  
  
• Уроки:
  
  • «Герой Node» — урок по юнит-тестированию Node.js (Node Hero — Node.js Unit Testing Tutorial)
  • Создание Real-time приложений с Websockets и событиями отправляемыми сервером (Building Real-time Apps with Websockets & Server-Sent Events)
  • Создание приложения видео чата на базе WebRTC с PeerJS (Building a WebRTC Video Chat Application with PeerJS)
  • Как сделать существующий API real-time с FeathersJS (Make your existing API real-time with FeathersJS)
  
  
• Плагины:
  
  • chillout.js — уменьшаем использование CPU JS-ом с помощью асинхронных итераций
  • lodash-bound — включает функции цепочки lodash с ES bind (::) синтаксисом
  • is.js — минималистичная библиотека для проверки данных
  • seen.js — рендер 3D сцен в SVG или HTML5 Canvas. (Render 3D scenes into SVG or HTML5 Canvas.)
  
  

Браузеры

• Ресайз картинок в браузере. Все может стать еще хуже
• Релиз Firefox 47, Технические подробности о релизе для веб-разработчиков
• Тестирование Firefox 48-beta и Firefox Developer Edition 49
• Выпуск браузера Opera 38, Что нового в Chromium 51 и Opera 38
• В Chrome 51 наблюдаются проблемы с невозможностью использования HTTP/2
• В стабильной версии Opera 38 появился режим энергосбережения, снижающий температуру ноутбука на 3 градуса
• В Firefox запланировано включение по умолчанию многопроцессного режима
• Началось открытие исходных текстов WebGL-движка браузера Microsoft Edge
• Браузер «Яндекса» обзавёлся персональной лентой рекомендаций «Дзен»

Новости и Занимательное

• Яндекс внес изменения в обработку файла robots.txt
• Google: у рекламы на AMP-страницах более высокие показатели видимости и CTR
• Google обвиняют в манипуляциях в пользу Хиллари Клинтон
• Развиваем дизайнерское чутье
• В Индии запретили делать Street View по соображениям национальной безопасности
• «ВКонтакте» начала принудительный перевод пользователей на новый дизайн
• Какие стартапы любят европейские инвесторы: топ-20 лучших проектов на TNW Europe 2016
• Хакер, сливший данные MySpace, LinkedIn и Tumblr, продает 379 млн аккаунтов Twitter
• «Десятка» любой ценой: почему не пошла Windows 10?
• Google Play Music научился подбирать «правильную» музыку, соответствующую текущему моменту
• Весь мир — карта проблем энергетики
• Как фанат «Звездных войн» придумал языки народов «Игры престолов»
• Почему я отказался от $500 000, разозлил инвесторов и закрыл стартап
• Мы вас внимательно слушаем. Даниил Туровский — об уязвимости, позволяющей вскрыть почти любой мобильный телефон
• Вибромотор смартфона можно использовать как микрофон для прослушки пользователей
• Бессмертные спамеры: Почему «нигерийские письма» всё ещё работают
• Влюбиться в робота: как технологии меняют отношения
• Линейка для квазара. Как измеряют расстояния в космосе и почему иногда их приходится пересматривать

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

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