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

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

CSS

Javascript

Браузеры

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

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

• Консоль разработчика Google Chrome: десять неочевидных полезностей
• Подкаст Веб-стандарты, Выпуск №43: Opera DevRel всё, Safari TP18, Firefox 50, CSS-шлюзы, инлайновые стили, печать, гриды весной, новый DL, Atom без Shadow DOM, 42, Медиум.
• Улучшение формы комментариев. От базовых до улучшенных сообщений об ошибках к фоновой синхронизации
• AMP, Instant Articles, Instant View, whut?
• SVG-паттерны
• Случайные интересные факты из использования HTML/SVG (Random Interesting Facts on HTML/SVG usage)
• Топ моноширинных шрифтов для написания кода (Top monospaced fonts for coding)
• Демонстрация Web Bluetooth и физического веба с помощью танцующего робота
• Как читать веб-спецификации, или WebVR, как ты работаешь? (How to read web specs Part I – Or: WebVR, how do you work?)
• Разница между role=”presentation” и aria-hidden=”true”
• Как опенсорсинг Бутстрапа сделал его огромным (How Open Sourcing Bootstrap Made It Huge)
• Gloria — новый генератор статических сайтов, как jekyll, но с помощью JavaScript
• Elm для фронтенда, уже сейчас (Elm for the Frontend, Right Now)
• Пожалуйста, не учитесь по стоковым фотографиям (Please Don't Learn To Code From Stock Photos)
• Эффектный веб:
  
  
  • Как сделать эффект приближения изображения в шапке сайта при скроллинге (How to Zoom Hero Images on Scroll)
  • Эффктная реализация наклонов слоя под углом при наведении (Tilt Hover Effects)
  • Дешевый параллакс с помощью JavaScript и CSS Transforms

CSS

• Грид, флексбокс и выравнивание блоков: наша новая система раскладки
• Я совсем забыл о стилях для печати
• CSS Reference — визуальное руководство по свойствам CSS, c примерами и интерактивной демонстрацией
• Наследование в CSS, каскад и глобальная область видимости: ваши новые/старые худшие/лучшие друзья (CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends)
• Стилизация маркеров списка в CSS (Style List Markers in CSS)
• Должен ли я попробовать использовать имплементацию IE для CSS Grid Layout? (Should I try to use the IE implementation of CSS Grid Layout?)
• Переключение состояния с помощью CSS Keyframes (Swapping State with CSS Keyframes)
• Font style matcher — подборка шрифтов для оптимального фоллбека
• Simple CSS Tooltips — всплывающие подсказки с помощью css переменных и es6
• Как использовать переменные в CSS
• Готов ли Flexbox уже для прайм-тайма? (Is CSS Flexbox ready for prime time yet?)
• Запустился CastleCSS, новый статический фреймворк
• Вертикальное выравнивание в CSS для всех (CSS Vertical Align for Everyone (Dummies Included))
• Селекторы CSS, объясненные на примере шоппинга на машине
• Плагин PostCSS для простой имплементации CSS гридов
• High Contrast, A PostCSS Plugin Story
• Два вопроса, которые я постоянно задаю при написании CSS (2Questions to constantly ask while writing CSS! EP1)
• Как добавить глубину вашему дизайну с помощью множественных бордеров
• Как сделать полупрозрачные границы или паддинги без фонового цвета

JavaScript

• Стек технологий JavaScript с нуля (перевод материалов «JavaScript Stack from Scratch»)
• JavaScript — не враг доступности (JavaScript is not an enemy of accessibility!)
• Написание ваших стилей в JS ? написание инлайновых стилей (Writing your styles in JS ? writing inline styles)
• Написание эффективного JavaScript (Writing efficient JavaScript)
• Полифильте JavaScript только когда нужно (Polyfill JavaScript Only When You Need To)
• Почему я благодарен «усталости от JS»
• Будущее Aurelia — дорожная карта и грядущие возможности
• Объяснение замыканий и цепи областей видимости в JavaScript на примерах (Explaining JavaScript Closure & Scope Chain with Examples)
• Настройка минимального, полезного окружения для JavaScript разработки (Setting up a Minimal, Yet Useful JavaScriptDev Environment)
• Внедряем компоненты в разметку: React vs Angular 2
• React:
  
  
  • React.js на русском языке. Часть четвертая
  • Подкаст «Пятиминутка React»: #1 — React Fiber, #2 — JSX 2.0, #3 — Hot Module Replacement или React Hot Loader?
  • React – One year later
  • Как разобраться с роутингом в React (How to Handle Routing in React)
  • Почему Redux требует, чтобы Reducer-ы были “чистыми функциями” (Why Redux Need Reducers To Be “Pure Functions”)
  • React сниппеты: отладка производительности компонента с ES7 аннотациями (React Snippets: Debug Component Performance with ES7 Annotations)
  
  
• Angular:
  
  
  • Получаем свойства Angular 1 в Angular 2
  • Как распознать посты по Angular 1.x с устаревшими практиками (Spotting Outdated Angular 1.x Posts)
  
  
• Vue:
  
  
  • Минималистичный фреймворк для приложений на Vue.js applications (вдохновленный Next.js)
  • Создание приложения с Vue v2 JS с использованием Vue-router (Building a Vue v2 JS app using Vue-router)
  
  
• ES6:
  
  
  • Еще 6 маленьких, но клевых свойств в ES6 (Six More Tiny But Awesome ES6 Features)
  • ES6 итераторы и генераторы на практике
  • Как читать спецификации в вебе, ч.2 – Or: ECMAScript Symbols
  
  
• Практика:
  
  
  • WebRTC: Делаем peer to peer игру на javascript
  • Как создать простой, легкий и универсальный слайдер на JavaScript
  • Создание пагинации с помощью Laravel and Vue js
  
  
• Плагины:
  
  
  • query-state — хранение state в строке запросов
  • gDriveSync.js — обёртка для Google Drive API v3
  • HolographicJS — компонент Windows для запуска приложений Windows Holographic созданных с Javascript и WebGL
  • Autocomplete плагин от Amazon
  • intercooler-js — делает AJAX запросы с помощью атрибутов HTML

Браузеры

• Тестирование Firefox 51-beta и Firefox Developer Edition 52
• В Firefox-дополнении NoScript появилась поддержка многопроцессного режима
• Firefox прекратит поддержку XUL-дополнений в конце 2017 года
• Новый режим Responsive Design Mode в Firefox Dev Tools

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

• ИИ Google теперь читает по губам лучше, чем человек
• Telegram запустил аналог предпросмотра статей «ВКонтакте» и сервис для вёрстки публикаций Telegraph
• Шифровальщик Locky распространяется через SVG-картинки в Facebook
• 10 функций Google Docs, о которых вы не знали
• Что читать айтишнику: лучшие книги по программированию всех времен и народов
• Microsoft выпустила «Косынку» на Android и iOS
• Ещё раз про китайские лампочки: всё очень плохо
• Нейросеть Google Translate составила единую базу смыслов человеческих слов
• Данные 8 млн пользователей GitHub утекли из-за неправильно настроенной базы MongoDB
• Поисковик Google стал показывать посещаемость заведений в реальном времени
• Российский спамер подделал домен Google при помощи Unicode
• Facebook из-за ошибки в расчетах завышал показатели охвата на 55%
• Исследование: Apple собрала 91% мировой прибыли от продажи смартфонов в третьем квартале 2016 года

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

< Дайджест за прошлую неделю

» Материал подготовили dersmoll и alekskorovin