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

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

ad3c6dd7279f42d1ad291729f63a903f.png

Веб-разработка
CSS
Javascript
Браузеры
Новости

b70f9feaeee78b42a0c78c3731555e73.gif Веб-разработка


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


36c2c69660dd21085a2dcb71d7246ae6.gif CSS


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

49d04efb96fb6ce31cde9be5dc12a874.gif JavaScript


  • en Обновления: Релиз Aurelia 1.0, Релиз Ember.js 2.7 и 2.8 Beta, а также Анонс Meteor 1.4 — c обновленными Node и MongoDB
  • Запись трансляции MoscowJS Meetup 32
  • enjQuery Foundation и стандарты (The jQuery Foundation and Standards)
  • enЭкранирование некоторых символов Unicode в регулярных выражениях (Unicode property escapes in JavaScript regular expressions)
  • enКакие зависимости есть у популярных JS инструментов (What Do the Popular JavaScript Tools Depend On?)
  • enПрагматичные советы по написанию модулей (Pragmatic Modularity)
  • enАвтоматическое исправление и форматирование вашего JavaScript с помощью ESLint (Auto-fixing & Formatting Your JavaScript with ESLint)
  • enУлучшаем события скроллинга с помощью throttle (Quick Tip: How to Throttle Scroll Events)
  • enЖизненный цикл переменных в JavaScript (JavaScript variables lifecycle: why let is not hoisted)
  • enНеизменяемость против инкапсуляции (Immutability vs Encapsulation)
  • ES6:
    • Знакомство с promises — одним из нововведений ES6
    • enБольшая шпаргалка по ES6 (How’s your ES6?)
    • enПочему важно сейчас всем комьюнити мигрировать на ES2015 модули (Why choose ES2015 modules, based on the state of the art of JavaScript modularization)

  • Фреймворки:
    • enReact Gotchas
    • enПроизводительность рендера компонентов в React (Component Rendering Performance in React)
    • enКак анимировать элементы с помощью AngularJS (How to Animate elements using Angularjs)
    • enБыстрый взгляд на React и Redux DevTools (A Quick Look at the React and Redux DevTools)
    • enInterpose — инструмент, позволяющий использовать нативные переменные CSS в компонентах React
    • enbisheng — трансформация Markdown файлов в одностраничный сайт с React
    • enИспользование Angular для создания SPA (Using Angular for Single Page Applications (SPAs))
    • enreact-monocle — инструмент разработчика для визуализации иерархии компонентов React-приложений (react-monocle — a developer tool to visualize a React application’s component hierarchy.)
    • enИспользование React Native для создания приложения для распознавания лиц (Use React Native to a Create a Face Recognition App)
    • enКомпоненты высшего порядка: паттерны проектирования React приложений (Higher Order Components: A React Application Design Pattern)
    • enСоздание React-приложений без конфигураций (Create Apps with No Configuration)
    • enСтратегии обновления с Angular 1.x на Angular 2 (Angular 2 Upgrade Strategies from Angular 1.x)

  • Уроки:
    • enМузыка в JavaScript. Изучение Web Audio путем воспроизведения работ Steve Reich и Brian Eno (JavaScript Systems Music)
    • enДелаем селфи с помощью JavaScript (Take a Selfie With JavaScript)
    • enУрок: использование Redux с TypeScript и Angular 2 (Tutorial: Building Redux in TypeScript with Angular 2)
    • enСоздание JavaScript интерфейса командной строки (CLI) с Node.js (Build a JavaScript Command Line Interface (CLI) with Node.js)

  • Плагины:
    • enIZIMODAL — очередной jQuery-плагин для создания гибких отзывчивых модальных окон
    • enMetricsGraphics.js — библиотека на базе D3 для визуализации данных, относящихся ко времени (MetricsGraphics.js is a library built on top of D3 that is optimized for visualizing and laying out time-series data.)
    • enbox-js — инструмент для исследования вредоносных JS программ (box-js — a tool for studying JavaScript malware.)
    • enTypography.js — библиотека для генерации типографических стилей (Typography.js — a powerful toolkit for building websites with beautiful typography.)


Браузеры


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

281994c0fe695abbe6d963faed1cffb6.gif Новости


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

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

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

Комментарии (0)

© Habrahabr.ru