Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №198 (7 — 14 февраля 2016)

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

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

• Полный стек технологий БЭМ — доклад Александра Браумгертнер с PiterJS #6
• Весёлая консолька. Обзор полезных и неочевидных возможностей консоли браузера от Юли Бухваловой
• SVG:
  • SVG-файлы изнутри и вывод векторных изображений на canvas «вручную» (ч.1)
  • Способы генерации SVG-спрайтов на примере библиотеки svg-sprite
  • Искуссная работа с `feColorMatrix` (Finessing `feColorMatrix`)
  • Использование SVG в вебе (Start simple: using SVGs on web)
  • Баш скрипт для создания SVG спрайта из папки с SVG файлами
  • FontReaper — node script, разбивающий иконочные шрифты на CSS-классы с фоновыми SVG-изображениями при сохранении исходного синтаксиса

• Веб-производительность:
  • Performance Weekly. Issue #1
  • Как HTTP/2 изменяет веб: лучшие практики веб-производительности (How HTTP/2 Is Changing Web Performance Best Practices)
  • Веб-произведительность: более двадцати экспертов делятся своими советами и ошибками (Web Performance: 20+ Experts Share Their Advice and Mistakes)
  • Веб-производительность топ 50-ти мировых блогов (Web Performance of the World’s Top 50 Blogs)

• Google AMP будут поддерживать платный доступ к контенту
• Введение в AMP (Accelerated Mobile Pages)
• Видеоформаты, поддерживаемые HTML5, сейчас доминируют в вебе (HTML5 Supported Video Formats Now Dominate The Web)
• Why npm Scripts?
• Размышления о базах данных с тqочки зрения фронтенд разработки
• WebGL для всех
• Как написать расширение для синтаксической подсветки в Atom (How To Write a Syntax Highlighting Package for Atom)
• Как использовать эффективно ARIA с HTML5 (How to Use ARIA Effectively with HTML5)
• Урок для начинающих по Webpack (Beginner Webpack Tutorial Part 1 — Introduction To Webpack)
• HTML5 Validator — утилита для командной строки для проверки валидности статических HTML5 файлов (HTML5 Validator)
• Небольшая заметка об атрибутах alt=”” и title (Short note on use of alt=”” and the title attribute)
• Вверх и вниз по Web-стэку (Running up and down the Web stack)
• Как внести свой вклад в проект с открытым кодом на GitHub (How to Contribute to an Open Source Project on GitHub)
• Система доступов в GitHub несовершенна (GitHub's Permission System is Flawed)
• git-blame-someone-else — подмени автора коммита
• Я веб-разработчик и я застрял с самым простым приложением последние 10 дней (I’m a web developer and I’ve been stuck with the simplest app for the last 10 days)
• Эффектный веб:
  • Еженедельная подборка красивых эффектов на CSS/SVG/JS #24
  • Лучшие концепты UI, реализованные на CodePen (Can you Code this UI Concept? Vol. 2)
  • Pure CSS TV Show Widget

CSS

• Работаем с переменными CSS с помощью JS
• Flex Box Editor
• Как я использую Sass с Polymer?
• Orna4Node — инструмент для создания архитектуры Atomic CSS, основанный на NW.JS
• Как улучшали CSS на bet365 (Improving CSS at bet365)
• Почему DockYard перешел на PostCSS (Why DockYard transitioned to PostCSS)
• Техника Fab Four для создания отзывчивых писем без Media Queries (The Fab Four technique to create Responsive Emails without Media Queries)
• Почему я люблю писать CSS в Visual Studio Code (Why I love Visual Studio Code for CSS )
• Subgrids thinking out loud: Краткое изложение мыслей по поводу свойства subgrids из спецификации CSS Grid Layout
• PostCSS — официальный сайт
• Sass: The @extend Directive
• Подходит ли вам Sass (Is Sass Right For Your CSS)
• Async CSS w/ link[rel=preload]
• Будущее загрузки CSS (The future of loading CSS)
• Как я тестирую CSS (How I Test CSS)
• Введение в PostCSS (An Introduction to PostCSS)
• Уроки по CSS на самоклейках (16 CSS Lessons via Post-it® Notes)
• Pixel Art в CSS (Pixel Art to CSS)

JavaScript

• Релиз Babel v6.5.0
• Релиз Grunt 1.0.0 rc1
• jQuery Mobile v1.5 | Все еще жив (jQuery Mobile 1.5 | It’s alive)
• ES6:
  • ES6: объекты WeakMap, Set и WeakSet изнутри. Перевод статьи ES6 WeakMaps, Sets, and WeakSets in Depth сообществом css-live.ru
  • ES6: Методы объекта Map изнутри. Перевод статьи ES6 Maps in Depth
  • ES6 в деталях: символы
  • Fallback-действия в ES6 Promise
  • Используйте ECMAScript 6 СЕЙЧАС (Use ECMAScript 6 NOW)
  • Матиматические функции ES6, которые вы можете использовать уже сегодня (ES6 Math Functions You Can Use Today)

• Фреймворки:
  • Angular 1.5: Компоненты
  • Сначала основы, потом фреймворки (Fundamentals Then Frameworks)
  • Я научилась продуктивно работать с React за неделю, и вы тоже сможете (I Learned How to be Productive in React in a Week and You Can, Too)
  • A Lazy Isomorphic React Experiment
  • Введение в Ember для Angular разработчиков (An Introduction to Ember for Angular Developers)
  • Избегайте частичной привязки методов в React компонентах (Avoid partial application in React components)
  • Детальное рассмотрение модуля AngularJS ngMessages (A Closer Look at Angular’s ngMessages Module)
  • LineChart — графики для Angular 2.0
  • angular2-autosize — директива для Angular2 автоматически меняющая высоту в зависимости от контента
  • Почему Java разработчики будут принимать Angular 2 и TypeScript (Why Java Developers Will Embrace Angular 2 and TypeScript)

• Объектно-ориентированный JavaScript: немного практики
• Выбирая ванильный JavaScript в 2016 (Choosing Vanilla JavaScript in 2016)
• Усталость от JavaScript усталости (JavaScript fatigue fatigue)
• Взаимодействие JavaScript с железом (Hardware Hacking With JavaScript)
• ECMAScript String Padding
• Вежливое введение в функциональный Javascript (A Gentle Introduction to Functional JavaScript)
• JavaScript метод requestAnimationFrame() для плавной анимации
• Расширенные свойства в Javascript (Advanced Javascript Properties)
• Делаем многомерный массив плоским (Flattening multidimensional Arrays in JavaScript)
• Быстрый совет: Управляем замыканиями переопределяя их (Quick Tip: Master Closures by Reimplementing Them from Scratch)
• Как создать простой загрузчик с JavaScript Promis-ами (Create a Basic Loader with JavaScript Promises)
• Использование Webworkers чтобы сделать React быстрее (Using Webworkers to make React faster)
• Привлекательность Scala.js (The allure of Scala.js)
• beautify-text — автоустановка кавычек и знаков препинания
• Lazy- загрузка изображений с помощью Igaro JavaScript фреймворка (Lazy Loading Images with the Igaro App JavaScript Framework)
• Приложение, дающее совет по JavaScript каждый день (An app that gives you a JavaScript tip a day!)

Браузеры

• В Chrome скоро будет прекращена поддержка протокола SPDY
• Изменение Хрома ломает визуальный вьюпорт (Chrome change breaks the visual viewport)
• Обновление Web Audio в Chrome 49 (Web Audio Updates in Chrome 49)
• Новинки DevTools (DevTools go dark, @keyframe editing and smarter autocomplete)
• Гладкая прокрутка в Firefox 46 с APZ (Smoother scrolling in Firefox 46 with APZ)
• Обновление Firefox 44.0.1. Представитель Mozillа вошёл в Совет по архитектуре Интернета
• Chrome для Android получил поддержку «физической сети»

Сайты с интересным дизайном и функциональностью

• Сервис генерирования отмазок
• Обновленный бренд Uber
• zfort.com — новый сайт компании, с концептуальным дизайном и насыщенными анимациями
• HTML-909 — синтезатор ударных
• beatboxacademy.ca — сайт с реализацией интерактивного битбокса
• macroinvertebrates.org — интерактивный сайт для любителей насекомых
• gabrielfaucon.com — стильный сайт с симпатичными ховер-эффектами
• Почему китайские сайты выглядят такими заполненными? (Why do Chinese websites look so busy?)
• Сайт с удачным применением SVG анимации
• Генератор валентинок от Spotify с необычным поведением фона
• patrik-huebner.com — креативный сайт-портфолио дизайнера
• Забавный пример сайта с треш-анимацией

Дизайн

• Почему интерфейс настольных компьютеров по-прежнему лучше планшетов — мнение
• История и эволюция дизайна логотипов (THE HISTORY & EVOLUTION OF LOGO DESIGN)
• Хорошие UX дизайнеры должны быть бойцами, потому что компромисный дизайн — это не хороший дизайн (Good UX designers must be fighters, because compromised designs are not good designs.)
• Руководство по Sketch для iOS разработчиков
• Улучшение продуктивности путем лучшей организации папок в Photoshop (Improve Productivity by Properly Organizing Your Folders in Photoshop)
• Анимация для начинающих: как анимировать процесс бега персонажа (Animation for Beginners: How to Animate a Character Running)
• Процесс создания дизайна логотипа Arriva (The design process of the Arriva logo)
• Дизайн, процесс, и совместная работа в Stripe (Design, Process, and Collaboration at Stripe)
• Как мы старались сами сделать дизайн обложки своей книги (и как Jessica Hische спасла ситуацию) (How We Tried to Design Our Own Book Cover (and How Jessica Hische Saved the Day))
• Как работают дизайнеры в 2015-м (How designers worked in 2015)
• Отбеливание социальных медиа (Social Media Whitewash)
• Дизайн игры Cave Story (The Careful Design of Cave Story)
• Как я пробовал устроиться в Blablacar, (I applied for a job at Blablacar,)
• The First Title-Pages
• Новый год, новый Hopper (New Year, New Hopper)
• Определяющие принципы DDD (Defining Principles to Drive Design Decisions)
• Использование психологии для улучшения ваших конверсий в 2016-м (Using Psychology to Boost Your Conversions in 2016)
• Обзор iPad Pro от UX дизайнера (A UX Designer’s Review of iPad Pro)
• Первый взгляд на Adobe Animate CC (First look at Adobe’s Animate CC)
• Магические трюки в фотошопе (Magic tricks)
• Как состарить фото в Adobe Photoshop (How to Age a Photo in Adobe Photoshop)
• Как создать эффект античного металлического текста в Adobe Photoshop (How to Create a 3D Antique Metal Text Effect in Adobe Photoshop)
• Уроки по созданию иллюстраций персонажей (60+ Outstanding Character Design Tutorials)
• Великолепные логотипы ресторанов для вдохновения (25 Stunning restaurant logos for your inspiration)
• Новый логотип и айдентика для VSCO (New Logo and Identity for VSCO done In-houseApp of the Rings)
• Растущее количество логотипов в форме сердец (Heart Rate Rising)
• Текстовый эффект со множественной обводкой в Adobe Photoshop
• Деревянный эффект для текста в Adobe Illustrator

Подборка бесплатных дизайнерских печенек

• Лучшие в 2015: шрифты для дизайнеров (Best of 2015: 100 Free Fonts for Designers)
• Плагины к Sketch
• Коллекция фото пищи (Foodshot)
• Chat — миниалистический набор UI
• Пять десятков наборов кистей к фотошопу (50 Free Photoshop Brushes Sets For Amazing Photoshop Work)
• Набор UI Elton (Elton UI Kit)
• Иконки к Дню святого Валентина (SVG) ([Freebies] Valentine Day icon)
• Набор иконок посвященный дому и недвижимости (AI, CSH, EPS, SVG, Webfont, Sketch) (Freebie: Home Appliance And Real Estate Icons (72 Icons, AI, CSH, EPS, SVG, Webfont, Sketch))
• ANURATI — стильный декоративный заголовочный шрифт (ANURATI — Free font)
• Hadron Sans — декоративный шрифт (Hadron Sans FREE font)
• Коллекция шрифтов (Collection of Free Fonts and Typefaces)
• Шрифты с личностью (Free Fonts With Personality)
• Mockup файлы под дизайн для напитков
• Бесплатный вектор на транспортную тему
• Бесплатные шрифты в вашу коллекцию

Новости

• Слухи подтвердились — Opera Software продаётся в Китай
• Google позволил редактировать блоки выдачи Сети знаний
• Google откажется от рекламных баннеров в формате Flash
• Google объявил о скором закрытии фотосервиса Picasa
• Google работает над самодостаточным шлемом виртуальной реальности, не требующим дополнительного оборудования в виде смартфона или ПК
• Установлен абсолютный рекорд скорости передачи данных: 1,125 Тбита/с
• Twitter изменил алгоритм показа сообщений в ленте вопреки заявлениям Джека Дорси
• Подписчики YouTube Red получили доступ к первым эксклюзивным фильмам и телепередачам YouTube Red Originals
• Издатель журналов Fortune и People выкупил социальную сеть Myspace
• В США систему управления робомобилем Google решили считать водителем
• Microsoft выпустила приложение для определения породы собак по фото
• В Китае проходит самый масштабный тест Тьюринга
• Firefox OS мертва (Firefox OS is DEAD, Says Mozilla)

Занимательное

• Поговорим о Gmail: Как развивался популярный почтовый сервис
• Видео дня: анимированная карта «подводного интернета»
• «Кажется, команда Medium опять напилась». Журналист The Verge Кейси Ньютон обратил внимание на необычные описания обновлений приложения Medium в App Store
• DARPA: имплантат «стентрод» для управления протезом внедряют в мозг через вены
• Мертвые программисты не пишут код
• Создан мозговой имплантат для управления экзоскелетом
• Океан интернета: на интерактивную карту нанесли подводные кабели, которые удерживают мир в онлайне
• Internet Archive запустил музей DOS вирусов
• Ученые доказали существование гравитационных волн через 100 лет после предсказания Эйнштейна
• IT и горная промышленность: как с помощью одной системы оптимизировать все процессы

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

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

Автор: Zfort Group

Источник