Дайджест свежих материалов из мира фронтенда за последнюю неделю №222 (1 — 7 августа 2016)

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

db57c87cf2944b8aab412afc032d74ed.png

Веб-разработка
CSS
Javascript
Браузеры
Новости и Занимательное

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


  • Подкаст Веб-стандарты, Выпуск №27: Видео в iOS, ChakraCore конкурент V8, доступные модальные окна, таблицы и формы, чехарда с цветовыми функциями CSS.
  • habrДелать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка. Опыт Яндекса
  • enОрганизация задач в Grunt (Organizing Your Grunt Tasks)
  • enОптимизация производительности критического пути с помощью Express Server и хендлебаров (Optimizing Critical-Path Performance With Express Server And Handlebars)
  • enОптимизация PNG (PNG optimisation)
  • enКак подготовиться к собеседованию на фронтенд-разработчика (How to prepare for an interview for a front-end developer)
  • enРетроспектива использования генератора статических сайтов (Using A Static Site Generator At Scale: Lessons Learned)
  • enВеб-компоненты и прогрессивное улучшение (Web Components and progressive enhancement)
  • enРуководство по работе с мобильным SEO (Your Guide to Getting Started with Mobile SEO)
  • enСамая сложная часть веба — это его невидимые части (The hardest parts of the Web are the invisible parts.)
  • enРасширяемые веб компоненты (Extensible web components)
  • enКак писать неподдерживаемый код (unmaintainable-code)
  • enКогда использовать переключатель, а когда чекбокс (When to Use a Switch or Checkbox)
  • Web Animations API:
    • enПоддержка Web Animations API появилась в Firefox 48
    • enПодборка демок и экспериментов с Web Animation API
    • enКогда использовать Web Animations API (When to Use the Web Animations API)

  • Accessibility:
    • envideoA11ycasts — новый подкаст на канале разработчиков Google, посвященный доступности. А также выпуск #02: Inert Polyfill
    • enБукмарклеты для тестирования доступности (Bookmarklets for Accessibility Testing)
    • enEdge прошел все тесты HTML5 Accessibility (Edge is the only browser to perform 100% in HTML5 Accessibility test)

  • SVG:
    • enВысокопроизводительные SVG (High Performance SVGs)
    • en3 странных браузерных несоответствия в SVG (3 Weird SVG Browser Inconsistencies)
    • enИнтерактивный эффект просвечивания сквозь очки с помощью SVG масок («Put On The Sunglasses, Frank»: An Interactive with SVG Masks)

  • Уроки:
    • enКак я создал большую мультиплеерную онлайн-игру на HTML5 canvas за одну неделю (How I built a Massive Multiplayer Online HTML5 Canavs Game in One Week)
    • enКак создать восьмибитную драм-машину с помощью Web Audio, SVG и Multitouch (How To Create A Responsive 8-Bit Drum Machine Using Web Audio, SVG And Multitouch)


36c2c69660dd21085a2dcb71d7246ae6.gif CSS


  • Полноэкранные контейнеры внутри элементов ограниченной ширины. Перевод статьи Full Width Containers in Limited Width Parents
  • CSS-изоляция. Перевод статьи CSS containment
  • enИспользование вьюпорта для создания индикатора промотки страницы на чистом CSS (Using viewport units to create a CSS-only scroll indicator)
  • enТайминг — это всё: улучшите ваши анимации с помощью нелинейных кривых (Timing is Everything: Improve your animations with custom, non-linear timing curves)
  • enTootik — css-библиотека на CSS/SCSS/LESS для создания симпатичных тултипов
  • enМанипуляция с цветами Sass с помощью функциями HSL и прозрачности (Manipulating Sass Colors With HSL And Opacity Functions)
  • enAphrodite vs. JSS
  • enОткрывающаяся книга на «чистом CSS3»
  • enCSS mix-blend-mode — плохая практика для истории вашего браузера (CSS mix-blend-mode is bad for your browsing history)
  • enПриоритет в CSS (когда порядок в CSS имеет значение) (Precedence in CSS (When Order of CSS Matters))
  • enCutestrap, легковесный CSS фреймворк (очередной) (Getting to Know Cutestrap, a Lightweight CSS Framework)
  • Обзор единиц измерения CSS: углов, времени и частоты

49d04efb96fb6ce31cde9be5dc12a874.gif JavaScript


  • Как учить людей JS: Часть 1. Заметки на полях
  • Распознавание голоса и чтение текста в браузере в 3 строки на JavaScript: демонстрация и примеры кода
  • Представлен бесплатный видеокурс по современным технологиям для веб-разработчиков: ES6, ESnext, Node.js, NPM, RxJS, WebPack и TypeScript
  • enФункциональный TypeScript (Functional TypeScript)
  • enПонимание нативных методов для массивов в JavaScript (Understanding native JavaScript array methods)
  • enДетальный обзор symbols в ES6 (Detailed overview of well-known symbols)
  • enЗаметки Джейка Арчибальда по мотивам мероприятия на тему сервис-воркеров (Service worker meeting notes by Jake Archibald)
  • enКак внедрить интернационализацию (i18n) в JavaScript (How to Implement Internationalization (i18n) in JavaScript)
  • enAsync функции попадут в ES2017! (Async functions are now stage 4 and will be included in ES2017!)
  • enJavaScript и функциональное программирование (JavaScript and Functional Programming)
  • enЦикл for против forEach в JavaScript (The for Loop vs. forEach in JavaScript)
  • enВнедрение JavaScript в Python (Embedding JavaScript into Python)
  • enИсчерпывающий обзор jQuery селекторов (A Comprehensive Look at jQuery Selectors)
  • Фреймворки:
    • Компоненты высшего порядка в React. Перевод статьи Higher Order Components: A React Application Design Pattern
    • enAngularJS vs ReactJS
    • enИнтернационализация в React (Internationalization in React)
    • enИнтерактивные графики на Angular с помощью ZingChart
    • enОтладка приложений на Angular c помощью Augury (Debugging Angular 2 Apps with Augury)
    • en State of React: #1: A Stateless React App?, #2 — From Inception to Redux
    • enОписание нового алгоритма ядра React, React Fiber (React Fiber Architecture)
    • enУчебник для начинающих по экосистеме React: часть 2 из 3-х (A Primer on the React Ecosystem: Part 2 of 3)
    • enReact Native в SoundCloud (React Native at SoundCloud)
    • enkasia — инструментальный набор React Redux для WordPress API (kasia — a React Redux toolset for the WordPress API)
    • enreact-media — CSS media query компонент для React (react-media — a CSS media query component for React)
    • enИспользование Kendo UI для jQuery в React приложениях (Using Kendo UI for jQuery in a React App)
    • enКастомные элементы форм в Angular 2 (Custom Form Controls in Angular 2)
    • enСоздание современных веб-приложений с Ember.js (Building Ambitious Web Applications with Ember.js)
    • enИсследование Mithril, JavaScript фреймворк для создания прекрасных приложений (Exploring Mithril, A JavaScript Framework for Building Brilliant Applications)

  • Плагины:
    • enAudiogram — библиотека для генерации видео из аудиоклипов
    • enlightgallery.js — полнофункциональная галерея для изображений и видео (lightgallery.js — full featured JavaScript image & video gallery.)
    • envivus — библиотека для анимации SVG (vivus, bringing your SVGs to life)
    • enjQuery Rate — простой jQuery плагин для создания графических рейтингов (jQuery Rate — a simple jQuery plugin for creating graphical ratings)


Браузеры


  • «Биткоин-браузер» Brave собрал 4,5 млн долларов
  • Установка дополнений Google Chrome в Mozilla Firefox
  • Релиз Firefox 48, технические детали для разработчиков
  • План перевода Firefox на многопроцессную архитектуру
  • Firefox начнёт показывать вместо ошибок 404 архивные страницы
  • В Opera 39 оптимизировано выносное видео и требуется меньше памяти
  • В Chrome 52 для Android видео грузится быстрее, использует меньше трафика и медленнее садит батарею
  • Microsoft продолжает кампанию против Chrome, теперь ОС Windows 10 советует пользователям перейти с браузера Google на Edge
  • Microsoft Edge по-прежнему аутсайдер на рынке браузеров
  • enНовинки Microsoft Edge, которые появились после Windows 10 Anniversary Update
  • enТренды браузеров августа 2016: как располагаются соперники Chrome? (Browser Trends August 2016: How Do Chrome«s Rivals Stack Up?)
  • enMicrosoft Edge получит расширения, обновление поддержки JavaScript в обновлении Windows 10 Anniversary (Microsoft Edge Get Extensions, Better JavaScript in Windows 10 Anniversary Update)

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


  • В протоколе HTTP/2 выявлено сразу четыре опасных бага
  • Google расширит поддержку AMP на всю органическую выдачу
  • В ОАЭ на законодательном уровне запретили использование VPN
  • Dropbox запускает собственный сервис Paper для совместной работы над документами и задачами
  • Кликбейт под запретом: Facebook уменьшит присутствие неинформативных публикаций с завлекающими заголовками в ленте
  • Искусственный интеллект не справился с тестом на здравый смысл
  • Киберспорт на Олимпиаде: фантазии или реальность?
  • Как стать киберспортсменом, и что для этого нужно
  • Инвестор Yahoo Эрик Джексон о продаже компании
  • Аналитики оценили среднюю стоимость украденных аккаунтов от Uber, Netflix, Gmail и других сервисов
  • Выпиливание реальности
  • IBM создала ближайший искусственный аналог нейронов
  • MS Windows: накануне дефолта
  • Windows 10 Anniversary Update: первые впечатления
  • Цикл статей Ильи Климова на тему »7 грехов программиста»: Гордыня, Зависть, Гнев, Уныние, Алчность, Чревоугодие

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

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

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

© Habrahabr.ru