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

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

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

CSS

Javascript

Браузеры

Новости

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

• Подкаст Веб-стандарты, Выпуск №26: «Chrome 52, Safari и MathML, font-display, WebP и WebM, HyperTerm, книги, путь фронтендера.»
• AMP — что это и почему ускорение сайтов для мобильных нужно для SEO
• Что нового в WordPress 4.6?
• Карты Google Maps — вставка и оформление (стилизация) карт на свой сайт
• Доступные SVG. Перевод статьи Accessible SVGs
• Шпаргалка по GIT
• Font Awesome SVGs — все иконки шрифта Font Awsome в виде SVG
• Silo Buster — генератор разметки для оптимизации URL сайта под социальные сети и поисковую выдачу
• Прогрессивные веб-приложения, которые ощущаются, как нативные приложения OS X (Progressive web apps running as native OS X apps)
• Все о кастомных элементах HTML (All about HTML Custom Elements)
• Почему наш сайт быстрее вашего: от оптимизации изображений, шрифтов и критического CSS до нюансов серверной настройки (Why our website is faster than yours)
• Измерения влияния сервис-воркеров на производительность в реальном мире (Measuring the Real-world Performance Impact of Service Workers)
• Добавьте оффлайн поддержку любому веб-приложению (Add offline support to any Web app)
• Mobile CDN – повышение скорости доставки контента на всех устройствах (Speeding up Content Delivery on All Devices)
• Оффлайн поддержка для Google Analytics с помощью sw-offline-google-analytics (Offline Google Analytics Made Easy: Using sw-offline-google-analytics)
• Правильное использование элементов fieldset и legend с точки зрения доступности (Using the fieldset and legend elements)
• Как выбрать подходящий формат изображений (How to select the perfect image format)
• github-widget — виджет, отображающий детали GitHub аккаунта (github-widget — a widget showing your github details that you can easily embed in your portfolio website.)
• Эффектный веб:
  
  • Необычный эффект погружения на сайте (Above & Beneath: Featured Content Layout Effect)
  • SVG слайдер с маскированием (Clipped SVG Slider)
  • Иллюзия жизни: пример SVG-анимации (The Illusion Of Life: An SVG Animation Case Study)
  
  

CSS

• Свойство background. Перевод статьи The Background Properties
• Языки, чуть было не ставшие CSS. Перевод статьи The Languages Which Almost Became CSS
• Как и почему был создан стайлгайд для сайта Marvel (How and why we created the Marvel Styleguide)
• Создание странцы, где полноширинный блок заключен в контейней ограниченной ширины (Full Width Containers in Limited Width Parents)
• Ограничения стилей с помощью нового свойства contain можно уже попробовать в Хроме 52 (CSS Containment in Chrome 52)
• Отзывчивый лайтбокс без использования JS (Responsive CSS Lightbox with No JavaScript)
• Способы уменьшения кода при создании шаблонов писем (Reducing HTML Email Code)
• Манипуляция цветами в Sass с помощью операторов и RGB функций (Manipulating Sass Colors With Operators And RGB Functions)
• Создание объектно-ориентированного фронтенд-фреймворка с помощью BEM, SASS и OOCSS (Creating an Object Oriented front-end framework using BEM, SASS and OOCSS)
• О современных возможностях создания отражения с помощью CSS (The State of CSS Reflections)
• О способах использования свойства CSS writing-mode (CSS Writing Mode)
• Ховер умер. Да здравствует ховер! (Hover is dead. Long live hover.)
• Уроки, которые были получены из создания дружественных к мобильным устройствам отзывчивых таблиц (Lessons from building mobile-friendly, accessible data tables)
• О написании и поддержке устаревшего CSS кода(Are you writing legacy CSS code?)
• Angled Edges — SASS-примесь для создания SVG-фрагментов для срезанных углов секций (Angled Edges — a SASS mixin for creating angled edges on sections by dynamically encoding SVGs.)
• Анимация цветового круга с помощью CSS (Color Wheel Animation with CSS Filters)
• Создайте иллюзию загрузки элементов с помощью CSS, пока не подгрузится настоящий контент (Fake it 'til you Make it CSS)

JavaScript

• Обновления: Релиз Aurelia 1.0, Релиз Ember.js 2.7 и 2.8 Beta, а также Анонс Meteor 1.4 — c обновленными Node и MongoDB
• Запись трансляции MoscowJS Meetup 32
• jQuery Foundation и стандарты (The jQuery Foundation and Standards)
• Экранирование некоторых символов Unicode в регулярных выражениях (Unicode property escapes in JavaScript regular expressions)
• Какие зависимости есть у популярных JS инструментов (What Do the Popular JavaScript Tools Depend On?)
• Прагматичные советы по написанию модулей (Pragmatic Modularity)
• Автоматическое исправление и форматирование вашего JavaScript с помощью ESLint (Auto-fixing & Formatting Your JavaScript with ESLint )
• Улучшаем события скроллинга с помощью throttle (Quick Tip: How to Throttle Scroll Events)
• Жизненный цикл переменных в JavaScript (JavaScript variables lifecycle: why let is not hoisted)
• Неизменяемость против инкапсуляции (Immutability vs Encapsulation)
• ES6:
  
  • Знакомство с promises — одним из нововведений ES6
  • Большая шпаргалка по ES6 (How's your ES6?)
  • Почему важно сейчас всем комьюнити мигрировать на ES2015 модули (Why choose ES2015 modules, based on the state of the art of JavaScript modularization)
  
  
• Фреймворки:
  
  • React Gotchas
  • Производительность рендера компонентов в React (Component Rendering Performance in React)
  • Как анимировать элементы с помощью AngularJS (How to Animate elements using Angularjs)
  • Быстрый взгляд на React и Redux DevTools (A Quick Look at the React and Redux DevTools)
  • Interpose — инструмент, позволяющий использовать нативные переменные CSS в компонентах React
  • bisheng — трансформация Markdown файлов в одностраничный сайт с React
  • Использование Angular для создания SPA (Using Angular for Single Page Applications (SPAs))
  • react-monocle — инструмент разработчика для визуализации иерархии компонентов React-приложений (react-monocle — a developer tool to visualize a React application's component hierarchy.)
  • Использование React Native для создания приложения для распознавания лиц (Use React Native to a Create a Face Recognition App)
  • Компоненты высшего порядка: паттерны проектирования React приложений (Higher Order Components: A React Application Design Pattern)
  • Создание React-приложений без конфигураций (Create Apps with No Configuration)
  • Стратегии обновления с Angular 1.x на Angular 2 (Angular 2 Upgrade Strategies from Angular 1.x)
  
  
• Уроки:
  
  • Музыка в JavaScript. Изучение Web Audio путем воспроизведения работ Steve Reich и Brian Eno (JavaScript Systems Music)
  • Делаем селфи с помощью JavaScript (Take a Selfie With JavaScript)
  • Урок: использование Redux с TypeScript и Angular 2 (Tutorial: Building Redux in TypeScript with Angular 2)
  • Создание JavaScript интерфейса командной строки (CLI) с Node.js (Build a JavaScript Command Line Interface (CLI) with Node.js)
  
  
• Плагины:
  
  • IZIMODAL — очередной jQuery-плагин для создания гибких отзывчивых модальных окон
  • MetricsGraphics.js — библиотека на базе D3 для визуализации данных, относящихся ко времени (MetricsGraphics.js is a library built on top of D3 that is optimized for visualizing and laying out time-series data.)
  • box-js — инструмент для исследования вредоносных JS программ (box-js — a tool for studying JavaScript malware.)
  • Typography.js — библиотека для генерации типографических стилей (Typography.js — a powerful toolkit for building websites with beautiful typography.)
  
  

Браузеры

• В ночные сборки Firefox встроено дополнение FlyWeb
• В Firefox 49 будет прекращена поставка коммуникационного клиента Hello
• Доступны сборки Firefox без обязательной проверки цифровой подписи дополнений
• Отключение автозаполнения в Chrome с помощью React (Turning Off Autocomplete in Chrome with React)
• Псевдо-класс CSS :any-link уже работает в FF без префиксов (Firefox Site Compatibility — :any-link CSS pseudo-class has been unprefixed)
• Лучшие расширения для Chrome для фрилансеров (The 10 Best Chrome Extensions for Freelancers)
• Search Overflow — Расширение для Opera и Chrome для поиска по Stack Overfloww)

Новости

• В плагине WooCommerce, который используют миллионы сайтов, найдена уязвимость
• IEEE Spectrum опубликовал рейтинг языков программирования
• Microsoft уволит еще 2850 сотрудников
• Изменения в OneDrive, о которых вам нужно знать
• Verizon покупает Yahoo! за $5 млрд
• Неизвестный Dropbox: сервисы компании для пользователей, бизнеса и разработчиков
• Миссия на Марс обойдется компании SpaceX в $320 миллионов
• Топ-10 самых дорогих сделок в IT-индустрии

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

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

Let's block ads! (Why?)