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

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

f3ed7f55e4be43c48639f80fb4e6f80f.png

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

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


  • habrПишите меньше кода, блин
  • Подкаст Веб-стандарты, Выпуск №30: Старьё, мысли про React, SMIL пока можно, скрывать по-новому, Народ.ру на Гитхабе, сайт на 10 КБ, интернет в отпуске.
  • Подкаст Frontflip, выпуск №20: Elm и ядовитый утконос. В гостях Игорь Капков
  • Анимации: ищем общий язык. Перевод статьи Communicating Animation
  • Опубликованы два новых документа по b_-методологии: Быстрый старт, CSS по БЭМ
  • enКак фронтенд-разработка может улучшить искусственный интеллект (How Front-End Development Can Improve Artificial Intelligence)
  • enДоступный в оффлайне контент с помощью сервис-воркеров (Offline content with service workers)
  • enИспользование изображений в формате WebP (Using WebP Images)
  • enMarkapp: сайт со списком HTML/JS библиотек от LEA VEROU, целью которого является сбор и поддержка плагинов, не требующих написания JS кода
  • enCarbide — новая среда программирования, не требующая установки или настройки, и поддерживающая Javascript/ES2015, автоматический импорт модулей из NPM и GitHub Saves и работающая напрямую с Github Gists
  • enПроизводительность означает прогрессивное улучшение (Performance Means Progressive Enhancement)
  • enНесколько подсказок по HTML (A few HTML tips)
  • enВоспитание кодера занимает много времени (It takes a village to raise a coder)
  • enНастройка прогрессивных веб-приложений с amp-install-serviceworker (Bootstrapping Progressive Web Apps with amp-install-serviceworker)
  • enСоздание первого плагина к Atom-у (Building your first Atom plugin)
  • enВизуализации концепций GraphQL (GraphQL Concepts Visualized)
  • enFlash умрёт в декабре: да здравствует HTML5 видео проигрыватель (Flash Is Dying In December: Long Live HTML5 Video Player)
  • envideo«SVG So Very Good» — доклад Tyler Sticka с CascadiaFest 2016
  • enInline SVG — как я перестал беспокоиться и полюбил gzip (Inline SVG — How I Learned to Stop Worrying and Love gzip)
  • API:
    • enКак использовать WebPageTest и его API (How To Use WebPageTest and its API)
    • enБыстрый совет по работе с JavaScript Battery API (Quick Tip: Working with the JavaScript Battery API)
    • enВведение в Web Audio API (An Introduction to the Web Audio API)
    • enСоздание прогрессивного веб-приложения с помощью Web Bluetooth API (Start Building with Web Bluetooth and Progressive Web Apps)
    • enЛокальное кеширование результатов полученных AJAX запросов: обертка Fetch API (Cache Fetched AJAX Requests Locally: Wrapping the Fetch API)

36c2c69660dd21085a2dcb71d7246ae6.gif CSS


  • По старшинству. Когда порядок в CSS важен
  • enStyle Validator — валидатор, определяющий «рискованные стили», которые могут сломать лейаут после JavaScript или CSS Media Queries.
  • enПримеры использования Fixed Backgrounds в CSS (Use Cases for Fixed Backgrounds in CSS)
  • en3 скрытых совета по CSS (3 hidden CSS tips)
  • enВосемь хитрых трюков по использованию CSS (8 Clever Tricks with CSS Functions)
  • enУлучшение структуры данных с помощью Sass Maps (Building Better Data Structures With Sass Maps)
  • enПредставление CSS свойства «font-display»
  • enУлучшение CSS анимаций с помощью движений по кривым (Upgrading CSS Animation With Motion Curves)
  • enКак выбрать правильные CSS инструменты и фреймворки (How to Choose the Right CSS Toolkits and Frameworks)
  • enИспользование CSS3 счетчиков для нумерации Figure и таблиц (Using CSS3 Counters for Figure and Table Numbering)
  • enКак использовать модульный паттерн в таблицах стилей SCSS/SASS (How to use the module pattern in your SCSS/SASS stylesheets)
  • enЛетящая ракета на чистом CSS (Pure CSS Flying Rocket)
  • envideoВведение в новую единицу CSS Grid «fr» в новом видео от Rachel Andrew (Intro to the CSS Grid fr unit)

49d04efb96fb6ce31cde9be5dc12a874.gif JavaScript


  • habrNode.js и JavaScript вместо ветхого веба
  • habrСтоит ли Typescript усилий?
  • habrJavaScript Performance, базы данных и поиски «серебряной пули»: видеозаписи ТОП-5 докладов HolyJS 2016
  • enОпрос: текущее состояние JavaScript (The State Of JavaScript)
  • enБыстрая подсказка: получение параметров URL с JavaScript (Quick Tip: Get URL Parameters with JavaScript)
  • enО ненависти к NodeJS
  • enComposition Is King
  • Теория JS:
    • habrПочему я все ещё использую function в JavaScript?
    • Введение в каррирование в JavaScript
    • О ключевом слове «this» языка JavaScript: особенности использования с пояснениями
    • enES6, var против let (ES6, var vs let)
    • enДля чего необходимы типы (Why You Need Types)
    • enЯвляется ли твоя JavaScript функция действительно чистой? (Is your JavaScript function actually pure?)

  • Фреймворки:
    • habrЧто нового в Marionette.js 3.0? (Getting started with new version)
    • enСостояние JavaScript: Front-End фреймворки (The State Of JavaScript: Front-End Frameworks)
    • enReact FAQ
    • enReact паттерны (React Patterns)
    • enBookReactJS для чайников: почему и как изучать React Redux правильно (ReactJS Convention BookReactJS For Dummies)
    • enКомпоненты ReactJS: изучение основ (ReactJS Components: Learning the Basics)
    • enРабота с данными в React: свойства и State (Working with Data in React: Properties & State)
    • enИгра на React — охота слона на тако (React Game- Elephant Taco Hunt)
    • enreact-music — создаем бит с помощью React (react-music — Make beats with React!)
    • enreact-static-plate — создание статических сайтов с помощью React и CSS Modules с хостингом на Amazon S3, Github Pages, Surge и т.п. (react-static-plate — build fast static sites with React & CSS Modules)
    • enНовые горизонты с Horizon, RethinkDB и React (New horizons with Horizon, RethinkDB and React)
    • enКак изучать Angular (How to Learn Angular)
    • enAngular 1 с использованием архитектуры Redux (Angular 1 using redux architecture)
    • enОт ng-class к привязке свойств (From ng-class to Property Binding)
    • en19 Советов по облегчению изучения Angular 2 от Cody Lindley (19 Tips to Make Learning Angular 2 Easier)

  • Уроки:
    • enЭксперимент с веб аудио: определение нот пианино (A Web Audio experiment: detecting piano notes)
    • enСоздание музыкального комплекса на ванильном JavaScript (Create a Music Jam Station with Vanilla JavaScript)
    • enСоздание собственного фильтра (pipe) в Angular 2 (Creating a custom filter (pipe) in Angular 2)
    • enВращающиеся по направлению к мыши либо местам тача элементы (Rotating Elements To Mouse and Touch Locations Using JavaScript)
    • enСоздание смайлика на CSS, чьи глаза следят за курсором (Make a CSS Smiley Face with Dynamic Googly Eyes)
    • envideoСоздание ударной установки с Ember.js (Build a drum machine #1 — Playing Sounds — Ember.js)

  • Плагины:
    • enGrade.js — библиотека для генерации двухцветного градиента из основных цветов выбранного изображения
    • enbaffle.js — маленькая (~1.8kb) библиотека для обфускации и восстановление текста в DOM элементах
    • enslate — фреймворк для создания текстовых веб-редакторов
    • enpluggable.js — позволяет делать JS-код подключаемым с сохранением необходимых объектов и приватных данных через замыкания
    • enWebMonkeys — тысячи параллельных задач на GPU с помощью самого простого API
    • enPush.js — JS уведомления для браузеров
    • enOdoo — эффектный одометр на SVG. Библиотека использует функциональный подход и ES7 Function Bind Syntax
    • enin-view — скрипт, определяющий, когда элемент DOM появляется и исчезает из вьюпорта


Браузеры


  • Исследователь рассказал об уязвимости в Chrome и Firefox из-за арабских доменов и эмодзи
  • Google прекращает поддержку Chrome Apps на настольных системах
  • В Firefox появится поддержка формата изображений Webp
  • enSurfingkeys — расширение возможностей браузера с javascript и клавиатурой (расширение для Chrome). (Surfingkeys — Expand your browser with javascript and keyboard.)

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


  • Mozilla запустила бесплатный сервис по сканированию сайтов (Observatory by Mozilla)
  • enТехнология Micropub получает статус CR в W3C (Micropub is now a W3C Candidate Recommendation!)
  • Facebook открыл код библиотеки классификации текста fastText, а также наработки по распознаванию объектов на фотографиях
  • Google не переходит по ссылкам в файлах SVG
  • Google понизит сайты с полноэкранными баннерами в мобильной выдаче с 2017 года
  • В поиске Google появилась возможность запускать некоторые игры, прослушивать издаваемые животными звуки и бросать монетку для принятия сложных решений
  • Opera реализовала бесплатный сервис VPN для Android
  • Pinterest покупает Instapaper
  • Список из 300 полезных Slack-сообществ для дизайнеров, разработчиков и менеджеров
  • Увольнения топ-менеджеров и растущая капитализация: год после реорганизации Google в Alphabet
  • Список русскоязычных подкастов на тему информационных технологий.
  • Обзор Windows 10 Anniversary Update: снова отучаем «десятку» следить и шпионить
  • Ядру Linux исполнилось 25 лет
  • Интернету — 25 лет! Тест на знание всемирной сети
  • Две дороги в глобальном мире хайтека
  • Как учить детей математике, чтобы они ее не возненавидели
  • Индустрии из прошлого
  • Apple уже не торт, или Почему я перехожу на продукты Google
  • enИнтерактивная веб-карта олимпийского Рио
  • enGIF умер. Да здравствует GIF! (The GIF Is Dead. Long Live the GIF.)
  • enИнтернет плохо работающих вещей (The Internet of Poorly Working Things)

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

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

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

© Habrahabr.ru