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

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

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

• Подкаст «Веб-стандарты», Выпуск №7
• 22 видео с московской конференции Web Standards Days, проходившей в декабре
• Три основных браузера добавили поддержку низкоуровневого бинарного формата WebAssembly
• Web-приложения в режиме offline. ServiceWorker и CacheStorage
• Google: работы с техническими аспектами сайта недостаточно для выхода в топ
• Я не умный, я просто сидел над этим дольше, чем ты — история Грэма Фултона.
• Возможные методы для создания профессиональной анимации в SVG (The following are the possible ways to create professional animations in SVG)
• Подборка с инструментарием и ресурсами для экосистемы Chrome DevTools (Awesome tooling and resources in the Chrome DevTools ecosystem)
• Issue-дайджест от Addy Osmani за последнюю неделю: Service Worker Debugging, RAIL on 3G, Offline Analytics, Progressive Web Apps, Rollupify & другое
• Ответ разработчиков Google на некоторые вопросы: Paul Lewis: "Answers to Questions About Performance", Matt Gaunt: Web Development is a Balancing Act
• Оптимизация производительности:
  • Управляем оптимизацией производительности под мобильными устройствами (Managing Mobile Performance Optimization)
  • Как улучшить ваше значение YSlow (How to Improve Your YSlow Score)
  • Приоритизация ваших ресурсов с помощью rel='preload' (Prioritizing Your Resources with link rel='preload')

• Разбираемся с Веб Компонентами (Understanding Web Components)
• Как можно использовать адаптивные веб-компоненты уже сегодня (How You Can Use Responsive Web Components Today)
• Семь причин, по которым стоит использовать генератор статических сайтов (7 Reasons to Use a Static Site Generator)
• Семь причин, по которым НЕ стоит использовать генератор статических сайтов
• Про rel=noopener (About rel=noopener)
• how2: терминальный stackoverflow (how2: stackoverflow from the terminal)
• Практическое введение в Material Design Lite от Google (A Practical Introduction to Material Design Lite by Google)
• Новинки последней версии шаблонизатора Marko (What's New in Marko v3)
• Видеообзор новых возможностей WebStorm 2016.1: улучшенная поддержка ECMAScript 6 и TypeScript, CSS Custom Properties, Angular 2, отладка асинхронного client-side, JSON Schema и многое другое
• Эффектный веб:
  • Еженедельная подборка красивых эффектов на CSS/SVG/JS #29
  • Концепт перетекания активной подсветки полей ввода с помощью CSS/SVG
  • Boom, Wham, Pow! Создание эмоциональной типографики для комиксов с помощью фильтров SVG
  • Как создать анимированную интерактивную барабанную установку на SVG
  • Впечатляющая реализация коробки с пластинками с помощью 3D движка на WebGL и Three.js.

CSS

• Переменные в CSS: зачем они нам?. Перевод стати CSS Variables: Why Should You Care? на frontender.info
• Оформление незагруженных изображений. Перевод статьи Styling Broken Images на css-live.ru
• Объяснение CSS свойства will-change и текущей поддержки браузера в блоге Джонатана Снука
• Создание отзывчивой сетки в 2016-м (Designing a Responsive Grid in 2016)
• Шрифты:
  • Антипаттерн для веб-шрифтов: Data URI. Перевод статьи Web Font Anti-pattern: Data URIs там же
  • Иконочные лигатуры с помощью псевдо-элементов и иконочных шрифтов (Ligature Icons via Pseudo Elements and Icon Fonts)
  • Веб типографика поломана. И вот как мы можем это исправить. (Web typography is broken. Here’s how we can fix it)
  • Задаем стили для текста в Zeplin (Defining text styles in Zeplin)

• CSS Flexbox вполне логичен (ну, почти) (CSS Flexbox Is Entirely Logical (Almost))
• Генерируемый пользователем контент в мире CSS методологий и привязки к классам (User Generated Content in a Classy World)
• Экспериментальная лаборатория от Jen Simmons: клевые демки с CSS лейаутами
• CSS Exclusions and Grid Layout
• Советы по работе с медиа-запросами (Managing Media Queries)
• PX, EM или REM Media Queries?
• Продвинутые CSS селекторы, о которых вы могли не знать, а если и слышали, то не использовали (Advanced CSS selectors you really may not have heard of — and if you have, you may not have used them)
• 8 советов по CSS, которые вы не будете ненавидеть (8 Tips to Write CSS You Won't Hate)
• Насчет :not и специфичности (On :not and Specificity)
• Как сделать всплывающие названия полей форм с HTML5 валидацией (How to Make Floating Input Labels With HTML5 Validation)
• Шаблоны содержания и отображения с помощью Expressive CSS (Content & Display Patterns with Expressive CSS)
• Градиенты с текстурой на чистом CSS (Textured Gradients in Pure CSS)
• Aleut.css — статический фреймворк на Sass, с идеями BEM, OOCSS и нацеленностью на производительность и масштабирование
• grd — компактный CSS-фреймворк для сеток на Flexbox
• Результаты масштабного опросника по CSS (The Results of The Ultimate CSS Survey)

JavaScript

• Декораторы в typescript: оружие против сложности или бесполезная «свистелка»?
• Подкаст RadioJs, Выпуск 37: semver, секрет привлекательности node.js, идёт ли Фронтенду деловой костюм, 5 шокирующих действий на которые пошли Custom Elements чтобы попасть в WebKit и другое
• Глубокие корни усталости от Javascript (The Deep Roots of Javascript Fatigue)
• Почему я пишу модули на чистом JavaScript (Why I Write Plain JavaScript Modules)
• JavaScript — это дисфункциональный язык программирования (JavaScript is a Dysfunctional Programming Language)
• Шесть способов, как забиндить ключевое слово this в JavaScript в React, ES6 и ES7 (6 Ways to Bind JavaScript’s this Keyword in React, ES6 & ES7)
• Три способа отобразить строку в обратном порядке в JavaScript (Three Ways to Reverse a String in JavaScript)
• Заметка в блоге разработчиков Ebay: Путь к следующему JavaScript (The Path to JavaScript Next)
• Разбор фрагмента JavaScript кода на Hacker News (The Single Piece of JavaScript on Hacker News)
• Введение в jQuery Deferred объекты (An Introduction to jQuery’s Deferred Objects)
• Быстрый совет: установка нескольких версий Node.js использование nvm (Quick Tip: Install Multiple Versions of Node.js using nvm)
• Футуристический движок для запуска тестов (ava — futuristic test runner)
• Все JS библиотеки должны быть написаны на TypeScript (All JS libraries should be authored in TypeScript)
• Douglas Crockford о проекте новом Seif (Douglas Crockford: The Seif Project)
• Несколько новых видео на канале Netflix UI Engineering: React.js для интерфейсов TV, Netflix JavaScript Talks — RxJS Version 5
• ES6/7:
  • Стрелочные функции и bind()
  • es6features.com: Изучаем основные возможности ES6 (Explore Top ES6 Features)
  • Пожалуйста, перестаньте ссылаться на предложенные функции JS, как на ES7 (Please stop referring to proposed JavaScript features as ES7)

• Фреймворки:
  • Создание иконочной системы на SVG c помощью React (Creating an SVG Icon System with React)
  • Печальное состояние экосистемы Backbone (The Sad State of the Backbone Ecosystem)
  • Leveling Up With React: React Router
  • React Router & Webpack на продакшене
  • Новый NPM, упрощающий разработку на React (New NPM will simplify React JavaScript development)
  • Анимации с React, Redux, и d3 (Animating with React, Redux, and d3)
  • Angular 2 и будущее HTML5 приложений (Angular 2 and the future of HTML5 apps)
  • Гляди-ка, без сервера: разработка приложений с Angular 2 MockBackend (Look Ma, No Server: Developing Apps with Angular 2 MockBackend)
  • Как работать с асинхронными данными в Firebase и Angular (Mastering asynchronous data in Firebase and Angular — Firecasts #5)

• Плагины:
  • Force.js — плавная прокрутка и анимация страницы на ванильном JS (но с поддержкой jQuery)
  • JsSpeechRecognizer — библиотека для распознования слов
  • calendar-heatmap — создание тепловой карты, представляющей отрезки времени с данными в виде коммитов GitHub
  • Substance — wysiwyg-библиотека для редактирования веб-контента

Браузеры

• Тестирование Firefox 46-beta и Firefox Developer Edition 47
• Developer Edition 47 – эмуляция User agent, popup debugging и многое другое
• Что нового в Chromium 49 и Opera 36
• Вкладки в Chrome для Android по умолчанию снова собраны воедино
• V8 версия 5.0 (V8 Release 5.0)
• Mozilla готовит к запуску браузерный движок нового поколения Servo
• Для браузера Microsoft Edge появились первые три расширения

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

• Интерактивная веб-инсталляция на тему освоения космоса.
• printedbysomerset.com — концептуальный сайт с «картонным дизайном» и фотореалистичной спрайтовой анимацией
• nuuneoi.com — крутое портфолио, реализованное в стиле старой восьмибитной игры
• Вертикальный скролл-сайт с качественным параллакс-эффектом
• thedabney.com — скролл-сайт с минимилистичным дизайном и интересными эффектами перехода
• Впечатляющие сайты веб-дизайнерских агенств (40 Impressive Design Agency Websites)

Дизайн

• Как можно использовать Github для совместной работы над дизайном
• «Студия Лебедева» проиллюстрировала рабочий процесс ювелирного завода идеально зацикленными коубами
• Дизайн каждого сайта на Bootstrape-е (Hey Look, It's Every Bootstrap Website Ever)
• В защиту однородного дизайна (In Defense of Homogeneous Design)
• Восемь неинтуитивных уроков, полученных в роли дизайнера (8 Unintuitive Lessons on Being a Designer)
• Что если дети презентуют ваши идеи? (What if kids presented your ideas?)
• Шесть вдохновляющих примеров использования игрового дизайна (6 Inspiring Examples of Gamification in Design)
• Коллекция графических интерпретаций букв латинского алфавита и цифр (Letter Kit)
• Mackey Saturday — дизайнер, создавший логотип Инстаграмма (Mackey Saturday)
• Инструменты и графические редакторы:
  • 10 очень особенных и полезных трюков в Sketch
  • Коллекция лучших инструментов дизайнера
  • Возможности прототипирования в Sketch через Silver Flows
  • 6 обязательных книг о Photoshop на русском для новичков и профессионалов
  • Глобальная замена цвета в Sketch (Global color replacement in Sketch)
  • Framer & Sketch: настроенный процесс (Framer & Sketch: An Intentional Workflow)
  • Первомайская перезагрузка для перезапуска сайтов и портфолио веб-дизайнеров
  • Adobe выпустил Experience Design CC (Adobe launches Experience Design CC)
  • Превью-релиз Adobe Experience Design CC (Project Comet)
  • Первые впечатления от Adobe Experience дизайн (First impressions with Adobe Experience Design)
  • Что такое Adobe XD (или ‘Проект Comet’) и зачем он вам? (What is Adobe XD (or ‘Project Comet’)? And Should You Care?)
  • Скоро появится версия Affinity для Windows (Affinity is coming to Windows)

• Типографика:
  • Крутая кинетическая типографика
  • Системные шрифты могут быть красивыми. Веб-шрифты — это не требование для замечательной типографики

• UX/UI:
  • Главный инструмент у каждого UX-эксперта
  • Терминология в области UX (User Experience Design & Research Jargons)
  • UXD и исследование жаргонов (User Experience Design & Research Jargons)
  • Свет и тьма в UI дизайне. Вопрос выбора (Light and Darkness in UI Design. Matter of Choice.)
  • 7 методов как измерять UX вашего сайта (7 Ways to Measure Your Website’s UX)

• Уроки:
  • Подробный урок по дизайну приложения под iOS в Sketch: Часть 3 из 3
  • Заливка текста с помощью Craft в Sketch
  • Выравнивание цвета кожи в Adobe Photoshop
  • Новое небо для лучшего вида в Adobe Photoshop
  • Текст с эффектом яркого пластика в Adobe Illustrator
  • Создание иллюстрации маяка в Adobe Illustrator (Create a lighthouse in Adobe Illustrator)
  • Как рисовать реалистичную кожу в Adobe Photoshop (How to Paint Realistic Skin in Adobe Photoshop)
  • Как сделать винтажный постер на тему путешествий в Adobe Illustrator и Photoshop (How to Design a Vintage Travel Poster in Adobe Illustrator and Photoshop)

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

• Бесплатный вектор для дизайна о животных
• Мокапы для демонстрации дизайна визиток (130+ Free Business Card Mockup PSD Templates)
• Лучшие наборы UI (145+ Best Free UI Kits)
• Коллекция иконок кредиток (Collection of Credit Card Icons (Free Vectors))
• Набор гравюрных кистей для Adobe Illustrator (25 Free Linocut & Woodcut Brushes for Adobe Illustrator)
• Наборы кистей для Illustrator-а (20 High-Quality Free Illustrator Brush Sets)
• Набор кистей с отпечатками водяных красок (25 Free Watercolor Brush Sets for Skilled Digital Artists)
• Набор UI для мобильных приложений Avital (Avital Mobile UI Kit)
• halogen — индустриальный шрифт без засечек (download halogen — free industrial font)
• Набор иконок на тему космоса и астрономии (AI, Sketch, SVG, PNG) (Freebie: Astronomy & Space Icons (AI, Sketch, SVG, PNG))
• Набор иконок-аватарок пользователей (16 Free Vector Icons For User Avatars)
• Набор иконок с плоским дизайном на тему инструментов в графическом дизайне (Flat Line Graphic Design Tools Icon Set Freebie)
• Набор кофейных иконок (EPS, PNG, SVG) (Freebie: Barista And Coffee Lovers Icon Set (50 Icons, EPS, PNG, SVG))
• Свежие бесплатные иконки для вашего дизайна

Новости

• Twitter: Алгоритмическая лента новостей теперь активирована по умолчанию, закрывается приложение TweetDeck для Windows, опровергают намерение увеличить количество символов в твитах
• Youtube запускает Accelerator – возможность мгновенного просмотра закэшированного видео
• Alphabet планирует продать Boston Dynamics из-за неспособности последней создать коммерческие продукты в ближайшие несколько лет
• Google назвал 100 самых популярных и безопасных веб-ресурсов
• Google объявил об изменении UserAgent поискового робота для смартфонов
• Учёные из Стэнфорда создали программу, которая переносит ваше выражение лица на других людей
• Свершилось! Microsoft начала обновление Lumia до Windows 10 Mobile
• СМИ: Uber заказал у Daimler 100 тысяч Mercedes S-Class
• SoundCloud заключил сделку с одним из крупнейших мировых издателей Sony Music
• Для Wikipedia будет разработан синтезатор речи

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

• Опыт BBC, KIA и Unilever в применении искусственного интеллекта
• В кванты могут все
• Индустрия порока: как секс, наркотики и рок-н-ролл создают новые большие технологические компании
• О бедном биткоин замолвите слово
• Двое из трех разработчиков самостоятельно научились программированию — исследование Stack Overflow
• Как мы вышли на ThemeForest и начали зарабатывать на шаблонах для сайтов
• Всё о версиях Windows 10 — что такое Threshold1, Threshold2 и Redstone
• Компьютер научился вычислять «пьяные» твиты
• Кому поля не жмут. Десять занимательных и поучительных историй о Великой теореме Ферма
• Квантовая азбука: «Компьютер». Чем сильны квантовые компьютеры и могут ли они заменить обычные?
• Хранители: Что наши гаджеты уже знают о нас?
• Самые масштабные «проделки» Anonymous
• Apple против ФБР: ответный удар 2
• Стив Возняк высказался о конфликте Apple с ФБР
• «Нейросети можно не объяснять правила игры в го — она сама их выучит» Интервью разработчика искусственного интеллекта «Яндекса» Александра Крайнова
• Офисные кандалы: Почему люди на самом деле ненавидят свою работу
• Метроном средствами ванильного Google

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

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

Автор: Zfort Group

Источник