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

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

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

• БЭМ-методология: с чего всё начиналось и зачем это всё нужно
• Записи с конференции Web Standards Days — Москва 2015
• Видео с FrontendFellows Conf
• Создаем блог используя Jekyll и GitHub Pages
• Первые 8 выпусков скринкаста по Gulp от Ильи Кантора
• Performance Weekly. Issue #0. Дайджеста новостей за прошедшую неделю, посвященный производительности в вебе
• Как избежать ошибок при технической оптимизации сайта. Руководство по первичной настройке
• Подробное руководство по Grunt для новичков (A Beginner’s Guide To Grunt)
• Как выбрать фреймворк для фронтенда (How To Pick a Frontend Web Framework)
• Почему понятие «Mobile First» уже устарело (Why Mobile First Is Outdated)
• Начинаем пользоваться Webpack ч.1: путешествие разработку фронтенда с Webpack, React, Redux и TDD (Let’s start Webpack Part 1)
• Unpacking Webpack. Подробное ознакомление с новой парадигмой в процессе создания проектов
• Tyler Sticka: Наш процесс создания SVG-иконок (Case Study: Our SVG Icon Process)
• svg-icon-system-boilerplate — система для сборки svg иконок в спрайт
• The Service Worker Cookbook — коллекция практических примеров от Mozilla
• Создание Service Worker: пример. Подробная статья от Lyza Danger Gardner (Making A Service Worker: A Case Study)
• Осваиваем типографику в HTML письмах (Master HTML typography in email)
• Accelerated Mobile Pages
• Таблица элементов HTML5 (HTML5 Elements)
• Искусство создания коммитов (The Art of the Commit)
• Серия видео, посвященная разработке игр на HTML 5 (HTML 5 game development video series)
• Адаптивные изображения с умной автоматической обрезкой (Automatically art-directed responsive images)
• Эффектный веб:
  • Еженедельная подборка красивых эффектов на CSS/SVG/JS #23
  • Распознавание голоса (Web Speech Demo)
  • Анимированная драм машина (SVG) (SVG Animated Drum Kit (Play Me!))
  • Эффектный инструмент для предпросмотра и демонстрации сайта с помощью CSS и JavaScript

CSS

• Конец эры глобального CSS
• Подборка полезных утилит SCSS
• Золотая рыбка CSS3 Grid Layout (часть 3)
• Подробно о размещении элементов в грид-раскладке (CSS Grid Layout). Перевод статьи Deep Dive into Grid Layout Placement сообществом css-live.ru
• Еще раз о плавающей метке на CSS. Перевод статьи Revisiting the Float Label pattern with CSS сообществом css-live.ru
• SVG-маски
• Умная прокрутка со Scroll Snap Points
• Подробнейшая статья о свойстве `background-clip` с примерами. (The `background-clip` Property and its Use Cases)
• CSS переменные: почему мы должны думать об этом? (CSS Variables: Why Should You Care?)
• Перезагрузка последней версии clearfix (The very latest clearfix reloaded)
• Sass: структура каталогов, которая облегчит поддержку кода (Sass: Directory Structures That Help You Maintain Your Code)
• Действительно отзывчивые таблицы с помощью CSS3 Flexbox. Really Responsive Tables using CSS3 Flexbox
• Небольшая заметка про улучшение юзабилити прокручиваемых областей (Short note on improving usability of scrollable regions)
• Flexbox и отключение клавиатурной навигации (Flexbox & the keyboard navigation disconnect)
• Звездочный рейтинг с помощью Flexbox
• Foundation 6: новая Flex сетка (Foundation 6: The New Flex Grid)
• Как мы работаем с «CSS» в BigCommerce (How we «CSS» at BigCommerce)
• Масштабный рефакторинг CSS в trivago (Large Scale CSS Refactoring at trivago)
• Управляем шрифтами: Google Fonts + Chrome = проблемка? (Control Your Type: Google Fonts + Chrome = trouble?)
• TestMyCSS — онлайн инструмент для анализа Вашего CSS

JavaScript

• Chakra официально принят Node.js
• ES6:
  • ES6: символы изнутри (Перевод статьи ES6 Symbols in Depth)
  • ES6 стрелочные функции: новый клевый и лаконичный синтаксис в JavaScript (ES6 Arrow Functions: The New Fat & Concise Syntax in JavaScript)
  • Представление ES2015 Proxies (Introducing ES2015 Proxies)
  • Стоимость траспилинга es2015 в 2016 (Investigating the overhead cost of compiled es2015 )
  • ES предложения: async функции, Object.getOwnPropertyDescriptors()

• Фреймворки:
  • Сравнение Angular 2 и Aurelia side by side
  • Почему я больше не использую MVC фреймворки (Why I No Longer Use MVC Frameworks)
  • React:
    • Про использование React с элементом canvas
    • 10 причин, по которым каждый разработчик ДОЛЖЕН выучить React (10 reasons why every developer SHOULD learn React)
    • Доклад Sasha Aickin на тему Reactjs — Speed up Server Side Rendering
    • Производительная разработка с React (Performance Engineering with React (Part 1))
    • Создание универсального блог приложения на React: внедрение Flux (Building a React Universal Blog App: Implementing Flux)
    • Начало работы с React: создание Hello World демо (Getting Started with React: Building a Hello World Demo)
    • Пять шагов для изучения разработки React-приложений (5 Steps for Learning React Application Development)
    • react-designer — простая в настроке, легкая и редактируемая векторная графика в ваших react компонентах

  • Angular:
    • Релиз Angular 1.5.0
    • Юнит тестирование AngularJS контроллеров с Karma и Jasmine (Unit Testing AngularJS Controllers using Karma and Jasmine)
    • Создание мультипользовательских игр с Angular (Building multiplayer games with Angular)
    • Angular 2 компоненты: вводы и выводы (Angular 2 Components: Inputs and Outputs)
    • От Angular 1.x ng-repeat к Angular 2 NgFor с компонентом (From Angular 1.x ng-repeat to Angular 2 NgFor with Component)
    • Angular 2 компоненты и провайдеры: классы, фабрики и значения (Angular 2 Components and Providers: Classes, Factories & Values)

  • Пять причин почему Meteor идеален для стартапов (5 Reasons Why Meteor Is Ideal for Startups)

• Пишем переиспользуемые JavaScript модули нового поколения на ECMAScript 6 (Writing Next Generation Reusable JavaScript Modules in ECMAScript 6)
• JavaScript AI для HTML пазлов (JavaScript AI For An HTML Sliding Tiles Puzzle)
• Изучение JavaScript по примерам (JavaScript by Examples)
• Как исправить JS… возможно (How to fix Javascript… maybe)
• Как писать пуленепробиваемую функцию обертки в JS (How to write bulletproof function wrappers in JavaScript)
• Что ожидать от JS в 2016-м — вне браузера (What To Expect From JavaScript In 2016 – Beyond the Browser)
• Понимание JavaScript's async await (Understanding JavaScript's async await)
• Запись аудио и видео с MediaRecorder (Record audio and video with MediaRecorder)
• Leveling Up Your JavaScript
• Плагины:
  • jQuery Select Box компоненты – Chosen против Select2 (jQuery Select Box Components – Chosen vs Select2)
  • samsaraJS — библиотеа для создания анимированных интерактивных интерфейсов
  • Gridifier — адаптивные сетки с сортировкой (Gridifier rethinks HTML layout & improves browser's grid layouting engine with the improved version of the Skyline 2D bin-packing algorithm.)
  • Instadate — высокопроизводительная библиотека для работы с датами
  • Multi-Screen.js — простой jQuery плагин, который превращает страницу в несколько экранов анимированной навигации в разных направлениях
  • Whitestorm — движок WebGL на базе Three.js (Introduction to Whitestorm Modern WebGL engine based on Three.js technology, including physics and post effects.)

Браузеры

• Microsoft Edge для разработчиков в 2016-м: ES2016 Modules, Fetch API, Web Notifications, Beacon API, WOFF 2.0, High Resolution Time Level 2 и др.
• Расширения для Microsoft Edge скоро станут доступны инсайдерам и будут распространяться через Windows Store
• Firefox Developer Edition 46: инструментарий для работы с памятью, media sidebar и другое
• Тестирование Firefox 45-beta и Firefox Developer Edition 46
• Firefox переходит на плавающий график подготовки релизов
• Google планирует выпустить Chrome в стиле Material Design
• Плавный скроллинг в Chrome 49
• Chrome 49 Beta: кастомные CSS-свойства, фоновая синхронизация с service workers, и новые функциональности ES2015
• Упраздненные и убранные API в Chrome 49 (API Deprecations and Removals in Chrome 49)
• Google начинает блокировать сайты с обманными кнопками загрузки программ
• Opera 35 released
• Тренды браузеров февраль 2016: снижение рынка мобильных? (Browser Trends February 2016: Mobile Market Decline?)

Дизайн

• Новый интерфейс — это отсутствие интерфейса
• Дайджест продуктового дизайна, январь 2016
• Полное руководство для начинающих по стратегии работы с контентом (Complete Beginner’s Guide to Content Strategy)
• Графические редакторы:
  • Photoshop, Sketch инструментарий UI/UX-дизайнеров: что выбрать для разработки интерфейсов?
  • Серия уроков Sketch (часть 4 из 5): Дизайн планшетной и мобильной версии
  • Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику
  • Плагин git-sketch. Это Git клиент, встроенный прямо в Sketch
  • Подробный урок по дизайну приложения под iOS в Sketch: Часть 1 из 3
  • Переход с Photoshop на Sketch
  • Как пересадить вашу команду на Sketch
  • Полезные советы по использованию Sketch (5 Very Special, 10 Useful Sketch Tips)
  • Дизайн с динамическим содержанием благодаря плагину Craft от InVision LABS в Sketch (Holy Sh!t~ Designing with Craft by InVision LABS in Sketch)

• Uber представила новый логотип и новые иконки приложений
• «Мы поняли, кто мы»: Как создавался новый фирменный стиль Uber
• Новый логотип и айдентика для Uber (New Logo and Identity for Uber done In-houseYour Identity is Arriving Now)
• Что стоит за редизайном Budweiser? (What’s behind Budweiser’s new look?)
• Микровзаимодействия: дьявол в деталях (Microinteractions: The Devil is in the Details)
• Клевая типографика, которая поднимет ваши заголовки на новый уровень (Awesome Typography That Takes Titles to the Next Level)
• Как мы делали дизайн для Dream Crew (How we’re designing Dream Crew)
• Как делать дизайн UI анимаций (How To Design User Interface Animations)
• Переосмысливаем чтение в вебе (Re-thinking reading on the Web)
• Руководство по персональному брэндингу для дизайнeров (Personal Branding Guide for Designers)
• Видео галерея для вдохновления привлечением пользователей различными мобильными приложениями (A Video Gallery for Mobile Onboarding Design Inspiration)
• Цвета альбомов года (ALBUM COLORS OF THE YEAR)
• Любовное письмо фрилансу (A love letter to freelancig)
• Все размеры рекламных блоков (The ultimate social & digital ad size guide!)
• Международные художники: Россия (International Artist Feature: Russia)
• Как цифровой номадизм превратил меня в мотивированного дизайнeра (How Digital Nomadism Turned Me Into a Highly Motivated Designer)
• Индустриализация дизайна (или почему Кремниевой Долине больше не нужны UX дизайнеры)
• Ценность последовательности в дизайне (The value of consistent design)
• Советы для UX дизайна приложений, часть 2 (UX design tips for your app, part 2)
• Illustrator за 60 секунд: как создать и экспортировать цветовые наборы (Illustrator in 60 Seconds: How to Create and Export Color Swatches)
• Инструмент «ручка» против Live Trace: подробное сравнение (Pen Tool Vs. Live Trace: The Big Comparison)
• Это лучшая иконка «сохранить»? (Is this the perfect save icon?)
• Прибытие в San Francisco (Arriving at San Francisco)

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

• Векторные наборы ко Дню Влюбленных
• Бесплатные UI-наборы
• Craft — плагины для Sketch и Photoshop (Craft — UI design plugins for Sketch and Photoshop powered by real data)
• Набор кистей к фотошопу с элементами футуристического интерфейса (25 Best Tech Interface Photoshop Brushes Ever Created)
• Набор, включающий бесплатную графику и шрифт Hellena Script (Free Downloads: Valentine's Day Doodles, Graphics, and Brush Script Font)
• Лучшие кисти с водяными красками для дизайнеров (Top Free Photoshop Watercolor Brushes for Designers)
• Лучшие Smart PSD с классными текстовыми эффектами (30 Free Smart PSDs to Help You Create Easy Text Effects)
• Иконки еды в SVG формате ([Freebies] Food icon)
• Упаковка иконок ко Дню святого Валентина (Free Valentine’s Day Icon Pack + More Lovely Resources)
• Логотипы в AI-формате (Free Logo Designs For Your Projects, Added Every Tuesday)
• Pacha — декоративный шрифт (Pacha is a display typeface with a rustic and ethnic design, inspired in the ancient cultures of Latin America.)
• Fibon Sans – тонкий шрифт без засечек (Fibon Sans – Regular Weight Free)
• Прекрасные шрифты «нарисованные кистью» (15 Beautifully Imperfect Free Brush Fonts)

Новости

• Alphabet теперь самая дорогая публичная компания в мире
• Visa открыла API своих технологий для сторонних разработчиков
• «Яндекс» начнет понижать в выдаче «немобильные» сайты
• В «Одноклассниках» появилась функция денежных переводов
• В Facebook проверили теорию шести рукопожатий (на самом деле их три с половиной)
• Новый рекорд «ВКонтакте»: 5 млрд сообщений в день
• К 2030 году у Facebook будет 5 млрд пользователей
• Facebook закроет облачный сервис для разработчиков Parse через год
• Google расширил поддержку JSON-LD на микроразметку для отзывов и товаров
• Google расширит поддержку микроразметки в 2016 году
• Google: валидность HTML-кода не является фактором ранжирования
• Mozilla убивает Firefox OS для смартфонов и фокусируется на «Интернете вещей»
• Стоимость LinkedIn упала на $10 млрд после негативного прогноза на 2016 год
• Windows 10 обошла по популярности Windows 8.1 и XP
• BlackBerry откажется от собственной ОС в пользу Android

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

• Domain Name System — сложная технология, объясненная простыми словами
• Gmail стал седьмым сервисом Google, преодолевшим отметку в миллиард пользователей
• Как собеседуют и отбирают лучших сотрудников?
• Флексирамика — новый материал для печатных плат
• Китай опубликовал цветные фотографии после высадки на Луне
• Видео дня: впечатляющая демонстрация возможностей шлема дополненной реальности Microsoft HoloLens
• Почему блокчейн мог бы уничтожить государство, но не сделает этого
• Маркетинг в браузере: что такое push-уведомления и как получить от них пользу
• Самые странные объекты на картах Google Earth
• Превращение в Slack: история сына Glitch (Becoming Slack: The Story of a Son of a Glitch)
• Мое зеркало в ванной умнее твоего (My Bathroom Mirror Is Smarter Than Yours)
• nest-100.com — необычный аудио-визуальный опыт для веба

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

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

Автор: Zfort Group

Источник