Дайджест свежих материалов из мира фронтенда за последнюю неделю №235 (1 — 6 ноября 2016)

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

1c4f2af708b941cb983e822e9833bd20.png


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

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


  • Подкаст Веб-стандарты, Выпуск №40: Chromium 54, Safari TP16, Mozilla, Servo и разработка движков, таблицы, Node.js 7, стандарты и полифилы, border-image, Дейв Шей про режимы смешивания.
  • Видео докладов с конференции FrontTalks, прошедшей 17 и 18 сентября в Екатеринбурге
  • Accelerated Mobile Pages. Юрий Матюхин делится своим опытом
  • SVG и медиа-запросы
  • Chrome, Firefox и Edge перешли на новый этап тестирования технологии WebAssembly
  • enПока растр, привет вектор: три способа простого использования SVG
    (Bye raster, hello vector: 3 ways to use SVG easier)
  • enВикторина: насколько хорошо вы знаете парсер HTML (HTML parser quiz)
  • en Bootsrap 4: что нового и что изменилось в Bootstrap 4, а также шпаргалка с именами классов
  • enПредставление FlyWeb — набор новых API от Mozilla для создания локальных веб-серверов и сервисов (Introducing FlyWeb)
  • enСоединяем виртуальные миры: гиперссылки в WebVR
    (Connecting Virtual Worlds: Hyperlinks in WebVR)
  • enСсылки mailto: пусть пользователь выбирает сам
    (Mailto links: Letting the user decide)
  • enВеб — это не модно, или как я научился любить веб
    (The Web is not Fashionable. or: How I Learned to Love the Web)
  • enИсследование вьюпортов, часть очередная
    (Viewports research, part umpteen)
  • enКакой язык программирования вам следует учить первым?
    (What programming language should you learn first? ʇdıɹɔsɐʌɐɾ : ɹǝʍsuɐ)
  • Производительность:
    • en10 принципов для плавной анимации в вебе (10 principles for smooth web animations)
    • enПерестаньте объединять ваш CSS/JS (Stop Concatenating Your CSS/JS)
    • enПроизводительность веба (Web Runtime Performance)

  • Доступность:
    • Доступность сайтов для самых маленьких
    • enИнструменты для разработки доступных сайтов (Tools for Developing Accessible Websites)
    • en10 вещей, которых не хватает на вашем сайте (10 things your website might be missing)
    • envideoПочему семантика имеет значение (Why do semantics matter?)

  • Инструменты:
    • enОпросник по Front-End инструментам — 2016 (Front-End Tooling Survey — 2016)
    • enБолее быстрые и надёжнее CI билды с Yarn (Faster, More Reliable CI Builds with Yarn)
    • enRFC: бюджет производительности Webpack (RFC: Webpack Performance Budgets)
    • enwebpack-bundle-analyzer — визуализатор содержимого бандла (webpack-bundle-analyzer — Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap)

  • enЭффектные медиа-попапы (Artsy Media Pop Up Effect)
  • enСоздаем прогресс-бар с радиальным заполнением (Making a Doughnut Progress Bar)

36c2c69660dd21085a2dcb71d7246ae6.gif CSS


  • habrАнонсируем Dart Sass
  • enВеб-шрифты, ребята, ну я даже не знаю (Web fonts, boy, I don’t know)
  • enКак и почему вы должны инлайнить критический CSS
    (How and Why You Should Inline Your Critical CSS)
  • enВещи, которые я узнал о CSS Grid Layout (Things I«ve Learned About CSS Grid Layout)
  • envideo[ИТ-лекторий]: Стандарт СSS: как и для чего он был придуман?
  • enCSS Motion Path по состоянию на октярь 2016
  • enБлог webkit: Изменчивые шрифты в вебе (Variable Fonts on the Web)
  • enСовременный сброс CSS (с оговорками) (A modern CSS reset (with caveats))
  • en8 простых правил для надежной, масштабируемой архитектуры CSS
    (8 simple rules for a robust, scalable CSS architecture)
  • enАрхитектура фронтенда, часть 2: брендовые переменные
    (Front-end Architecture: Part 2 — Brand Variables)
  • enКак построить отзывчиваю сеточную систему (How to build a responsive grid system)
  • enО семантических именах классов (Semantic class names: are you being too generic?)
  • enПост-процессоры CSS для начинающих: советы и ресурсы
    (CSS Post-Processors For Beginners: Tips and Resources)
  • enКонтинуум Q: использование единиц измерения q в CSS
    (The Q Continuum: Using q Measurements In CSS)
  • enОпрос: должен ли CSS стать более похожим на язык программирования?
    (Poll: should CSS become more like a programming language?)
  • enПочему HTML думает, что «chucknorris» это цвет? (Why does HTML think «chucknorris» is a color?)
  • englamor — внедрённый css в React приложениях (glamor — inline css for react et al)

49d04efb96fb6ce31cde9be5dc12a874.gif JavaScript


  • habrJavaScript и SEO в 2016 году
  • habr$mol: reactive micromodular ui-framework
  • enДетали о версии Node.js v7
    (Node.js v7 — URLs, deprecation warnings and a better developer experience)
  • enСовместное планирование с requestIdleCallback
    (Cooperative Scheduling with requestIdleCallback)
  • Теория:
    • habrПаттерн Стратегия на JavaScript
    • enВанильный JavaScript vs Фреймворки и Библиотеки — в поисках хорошего баланса (Vanilla JavaScript vs. Frameworks & Libraries — Finding a good balance)
    • enУчебный план для излечения усталости от JavaScript
      (A Study Plan To Cure JavaScript Fatigue)
    • enЯвляется ли JavaScript всегда лучшем решением?
      (Editorial: Is JavaScript Always the Best Solution?)
    • enВойны JavaScript. Как мы до этого дошли? (The JavaScript Wars. How did we get here?)
    • enЗамыкания в JavaScript на примерах (Closure in JavaScript through examples)
    • enДелаем ваш JavaScript более функциональным (Making Your JavaScript More Functional)

  • Практика:
    • enСоздание шейдеров с помощью Babylon.js (Building Shaders With Babylon.js)
    • enНачало работы с MobX: простой пример
      (Getting Started With MobX: An Easy Example)
    • enСоздание динамических таблиц за секунды из любых JSON данных
      (Make Dynamic Tables in Seconds from Any JSON Data)
    • enПрограммная генерация звуков с Javascript
      (Generate Sounds Programmatically With Javascript)

  • React:
    • 9 полезных советов для тех, кто начинает знакомство с React.js
    • enВиджет автозаполнения с React (Autocomplete Widget with React)
    • enНужна ли вообще библиотека для роутинга? (Do I Even Need A Routing Library?)

  • Angular:
    • enAngular 2 — уходим от распознавания изменений
      (Angular 2 —  Escape From Change Detection)
    • enБудущее Angular 1.x, что дальше? (The future for Angular 1.x, what next?)
    • enПростая авторизация с Angular с JSON веб токенами
      (Easy Angular Authentication with JSON Web Tokens)
    • enAngular 2 —  как использовать преимущества свойства exportAs
      (Angular 2 — Take Advantage Of The exportAs Property)
    • enТестирование Angular 2 в деталях: сервисы (Angular 2 Testing In Depth: Services)

  • ES6:
    • enПромисы в Javascript: зачем и как (Javascript Promises; the Why and the How)
    • enШесть маленьких, но клевых свойств ES6 (Six Tiny But Awesome ES6 Features)
    • en Введение в ES6: Переменные, стрелочные функции (Getting to Grips with ES6:)
    • enИспользуйте лучшее из ES6 везде (Use the coolest ES6 features everywhere)
    • enВычисляемые tag функции для литералов шаблонов ES6
      (Computing tag functions for ES6 template literals)

  • Vue:
    • enЗамените jQuery на Vue.js в следующем вашем проекте на Bootstrap
      (Drop jQuery from your Bootstrap project and replace it with Vue.js)
    • enVueJS: перебор элементов списка (VueJS: Loop List Elements)
    • enVueJS: условное скрытие/отображение (VueJS: Conditional Show And Hide)

  • Плагины:
    • enutransition, микробиблиотека, упрощающая создание анимаций и управление ими в JS
    • entypeis.js — простой и интеллектуальный детектор типов данных
    • enLightflow — библиотека для управления потоком по типу промисов для браузера и Node.js
    • enSkateJS — библиотека для написания функциональных, лёгких и кросс-фреймворк совместимых веб компонентов по спецификациям W3C
    • enegjs — библиотека с набором интерактивных UI компонентов
    • enRecordy — запись с микрофона и добавление эффекта прямо в браузере


Браузеры


  • habrИз Firefox 52 удалят API уровня заряда аккумулятора для сохранения приватности пользовательских данных
  • Chrome для Windows стал на 5%-15% быстрее за счет новых оптимизаций
  • Microsoft пытается увеличить долю Microsoft Edge c помощью бонусов
  • Microsoft Edge обошёл Chrome и Firefox в тесте безопасности
  • Internet Explorer и Edge потеряли 40 млн. пользователей
  • enНовое представление элемента input type=«date» в Firefox
  • enFirefox Nightly News — поддержка async/await (Firefox Nightly News — async/await support in Firefox)

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


  • habrИнтернет-пользователей, заходящих с настольных компьютеров, стало меньше, чем мобильныхновость
  • habrPornhub обходит блокировщики рекламы с помощью вебсокетов
  • Microsoft запустила сервис для коллективной работы Teams, являющийся частью Office 365
  • Викторина: хорошо ли вы знаете Stack Overflow?
  • Статистика западных соцсетей: месячная аудитория, доход с пользователя, присутствие брендов
  • Влияет ли доменная зона на поисковую выдачу
  • Умные лампочки назвали угрозой эпидемии в интернете вещей
  • Азбука ИИ: «Рекуррентные нейросети»
  • Мобильные гаджеты обогнали ПК по заходам в интернет
  • Android стал самой продаваемой мобильной системой в истории
  • Duo Security: 65% пользователей до сих пор предпочитают Windows 7
  • Почему пионер Linux Линус Торвальдс предпочитает x86, а не ARM
  • Как быстро хакеры взломают тостер с выходом в интернет?
  • en«Dear Microsoft», — письмо от Slack
  • enПочему Slack может пожалеть из-за своего письма Microsoft
    (Why Slack may live to regret its smarmy letter to Microsoft)
  • enНовый MacBook Pro — уже не Laptop для разработчиков часть 1 и 2
    (New MacBook Pro is not a Laptop for Developers Anymore)

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

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

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

© Habrahabr.ru