Дайджест свежих материалов из мира фронтенда за последнюю неделю №213 (23 — 29 мая 2016)

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

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

• Autofill: чего не знают веб-разработчики, хотя должны знать
• Git: подстраховка для ваших проектов
• Wintersmith — генератор статических сайтов на Node.js
• Google улучшил функционал AMP-страниц, добавив новые возможности.
• О jQuery и Bootstrap: расставляем точки над «i»
• От нуля до героя фронтенда: Часть 1, Часть 2
• Медиа:
  • Подкаст Веб-стандартов, Выпуск №17: Семантика и БЭМ, CSS для новичков, клиенты для Git, JS-модули в Edge, Google I/O.
  • AMP + прогрессивные веб-приложения (AMP + Progressive Web Apps: Start fast, stay engaged — Google I/O 2016)
  • Гудини: демистификация будущего CSS (Houdini: Demystifying the Future of CSS — Google I/O 2016)
  • Мгновенная загрузка: создание offline-first прогрессивных веб приложений (Instant Loading: Building offline-first Progressive Web Apps — Google I/O 2016)
  • Frontend Party, Питер, 29 апреля 2016

• MIND Patterns — шаблоны доступных компонентов для веба от ebay (Accessibility Patterns for the Web)
• Почти полное руководство по переходу на Gulp 4 (The Complete-Ish Guide to Upgrading to Gulp 4)
• Прогрессивные веб приложения — что это за хрень? (WTF are Progressive Web Apps?)
• Регрессивные веб-приложения (Regressive Web Apps)
• Как провести простой аудит доступности сайта, ч.2 (Part 2: How to Conduct a Basic Accessibility Audit on Your Site)
• Объяснение понятия семантики (Understanding semantics)
• placeholder.pics — легкий способ подключения изображений-плейсхолдеров, представляющих из себя оптимизированный SVG
• Как начать работать с Политикой Безопасности Контента (How to Get Started with a Content Security Policy)
• Фронт-энд разработка после Internet Explorer (Front End Development after Internet Explorer)
• Service Workers 101 — инфографика с наиболее важными частями Service Workers API (Service Workers 101 — An infographic to summarize the most important parts of the Service Workers' API)
• Важность URL-ов (The importance of URLs)
• Как перенести шрифты Google на свой CDN (How to Migrate Google Fonts CDN to Your Own CDN)
• google-webfonts-helper — простой способ использовать Google Web шрифты на своем хостинге
• SVG:
  • Новый бесплатный курс «Знакомство с SVG» на HTML Academy.
  • «SVG за пределами простых форм» — доклад Nadieh Bremer с OpenVis Conf (SVG Beyond Mere Shapes — Nadieh Bremer)
  • SVG примеры маскирования Path — использование Paths и текста (SVG Clipping Path Examples — Using Paths And Text)
  • Создание адаптивного логотипа бренда с помощью SVG (Make an Adaptive Branding Module with SVG)
  • Создаем отзывчивые графики и инфографику на SVG

• Эффектный веб:
  • Еженедельная подборка красивых эффектов на CSS/SVG/JS #39
  • Создание вертикального таймлайна с помощью капельки JavaScript
  • Эффектное демо трансформации изображений (что увидеть эффект нужно прокрутить колесо прокрутки мыши) (Displacementmap image transition)
  • Трехмерная изометрическая сетка (Isometric and 3D Grids)
  • Создание аналоговых часов с помощью Web Animation API (Make an Analog Clock with the Web Animation API)

CSS

• Магия CSS. Глава 2. Раскладка
• Линтинг CSS с помощью stylelint
• Инспекция и причёсывание CSS
• Отладка CSS. Перевод статьи Debugging CSS
• Stylelint: валидатор стилей, о котором мы всегда мечтали (Stylelint: The Style Sheet Linter We’ve Always Wanted)
• Хроматические веб-шрифты (Chromatic Web Fonts, Redux)
• Вставка разрыва строки в CSS (Injecting a Line Break)
• inStyle (модификация текущего селектора `&` в Sass) (Modifying the Current Selector `&` in Sass)
• Интересное предложение о добавлении правил When/Else в CSS
• Джонатан Снук разбирается с каскадом и специфичностью (Dealing with the Cascade and Specificity)
• Его же мысли по поводу компонентного дизайна (Considerations in Component Design)
• Соображения по стилизации тега pre (Considerations for styling the pre tag)
• Свойство box-shadow (The box-shadow Property)
• Family.scss — полезные Sass примеси для работы с :nth-child элементами
• Пять способов создания прилипающего футера (Sticky Footer, Five Ways)
• Atomic CSS модули (Atomic CSS Modules)
• Система атрибутов для Flexbox разметки (Flex Layout Attribute)
• Проектируем стили фронтэнда (Architecting Front-end Styles)
• Starability.css – доступный звездочный рейтинг с анимацией
• CSS-шутки (28 CSS Puns to Brighten Your Day)

JavaScript

• Использование JavaScript для атаки через манипуляцию с содержимым буфера обмена
• JavaScript-only: гомогенная архитектура веб-проектов
• Подробное объяснение ключевого слова 'this' в JavaScript (Gentle explanation of 'this' keyword in JavaScript)
• Апгрейдим мусорный код IE8 с помощью современных плюшек (Upgrading junky IE8 code with current goodies)
• Компиляция в JavaScript: 4 альтернативы для JS (Compile to JavaScript: The 4 best alternatives to JavaScript)
• Да здравствует jQuery (Long Live jQuery)
• Быстрый совет: сохранение состояния чекбокса после перезагрузки страницы (Quick Tip: Persist Checkbox Checked State after Page Reload)
• Создание простого JavaScript слайд-шоу без jQuery (Make a Simple JavaScript Slideshow without jQuery)
• Анимированный градиент для имитации потока с использованием d3.js (Animating a gradient to imitate a flow using d3.js)
• Визуализация алгоритмов (Algorithm Visualizer)
• Фреймворки:
  • React:
    • Погружение в React: роутер
    • HTML to React — утилита для разбивки HTML на React-компоненты
    • Ваш график для изучения React (Your Timeline for Learning React)
    • CSS Модули и React
    • Создание шаблонов React в WebStorm
    • Укрощение настройки React (Taming the React Setup)
    • Клонируем Yelp с помощью React (React Tutorial: Cloning Yelp)
    • React и Firebase вместе (React and Firebase, sittin’ in a tree)

  • Angular:
    • 10 основный причин, по которым разработчикам стоит использовать AngularJS (Top 10 Reasons: Why Web Developers should use AngularJS)
    • AngularDoc — документация для Angular 2 проектов
    • Миграция с ванильного JavaScript на Angular 2 в NativeScript (Moving from Vanilla JavaScript to Angular 2 in NativeScript)
    • Angular и Webpack для модульных приложений (Angular and Webpack for Modular Applications)
    • Создание Angular 2 демок с System.js и TypeScript (Building Angular 2 Demos With System.js And TypeScript)

  • Создание игры с Ember (Make a game with Ember by mattmckenna)
  • Не ругайте фреймворк: мой опыт с AngularJS и ReactJS (Don’t blame the framework: my experience with AngularJS and ReactJS)

• Плагины:
  • WebGazer.js — отслеживание направления взгляда через веб-камеру в браузере
  • ally.js — библиотека делающая доступность приложений более простой
  • Tourist.js — для создания маршрута по функцональностям вашей страницы
  • Bideo.js — библиотека для добавления фонового видео (Bideo.js)
  • Target.js! — добавляет функциональность к DOM элементам с помощью data-атрибутов

Браузеры

• Как установить в Firefox расширения Chrome
• Выпуск web-браузера Chrome 51
• Измерение элементов и расстояний в Firefox DevTools (Measuring elements and distances in Firefox DevTools)
• Поддержка вашим браузером WAAPI (WAAPI Browser Support Test)
• Создание расширений для Microsoft Edge (Building Extensions for Microsoft Edge)
• F12 Edge Developer Tools
• Появилась технология для показа рекламы в веб-браузерах в обход блокировки
• В браузере Opera появилась персональная новостная лента

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

• Анонс от Facebook: «New Response Graph for Live Content»
• Facebook и Microsoft проложат оптоволоконный кабель через Атлантику
• Google обрабатывает свыше 2 трлн поисковых запросов в год
• В Google Photos 13,7 петабайт фотографий и видео
• The Verge: Microsoft потеряла $8 млрд на присоединении Nokia
• Во Франции запретили отправлять электронные письма сотрудникам после завершения рабочего дня
• Почему Google одержала верх над Yahoo — на примере решения одной проблемы
• Пятилетний забег: как изменился «Яндекс» с момента IPO
• Google создала в Париже квест в реальности, который можно пройти только с помощью продуктов компании
• Интернет дырявых вещей
• «Печальная карьера — это когда они идут работать в Facebook или в “Яндекс”»
• Каково знать клингонский язык и читать на нём Шекспира
• Большие ожидания: что хранится в капсулах времени
• Как студент добился стажировки мечты с помощью фильтра Snapchat
• Как «несерьёзные» «Хромбуки» проложили Google дорогу на рынок ПК
• Почему вам обязательно нужно узнать, что такое Scrum
• История украинского хакера, который стал лучшим оружием ФБР и худшим его кошмаром (Перевод публикации в Wired)
• Как типографика может сохранить вашу жизнь
• Google IO 16  —  рассказ о двух Google (Google IO 16 — A tale of two Googles)
• Как работает Mediachain (How Mediachain Works)

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

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

Автор: Zfort Group

Источник