Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №206 (4 — 10 апреля 2016) Опции

[Decker]

Разработка веб-сайтов*,
Веб-дизайн*,
JavaScript*,
CSS*,
Блог компании Zfort Group
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости










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


CSS


Javascript


Браузеры


Дизайн


Новости


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



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

• Готовим WebP правильно
• Подкаст Веб-стандарты. Выпуск №10
• «Это мой код», думают многие офисные работники. На самом деле нет.
• В сентябре 2016-го ожидается релиз HTML5.1
• AMP by Example — введение Accelerated Mobile Pages с живыми примерами кода. Список проектов, уже использующих AMP HTML — NY Times, Guardian, Twitter, LinkedIn и многие другие
• Быстрый совет о том, как сделать инлайнинг стилей для AMP проще с помощью Jade или PHP (Quick Tip: Make AMP’s Inline CSS Easier With Jade or PHP)
• Записи докладов с Microsoft Edge Web Summit 2016
• Заметки Aaron Gustafson по итогам 2016 Edge Web Summit
• Знали ли вы, что у инстаграмма есть не только фото с едой, но и неплохой технический блог? Вот свежая заметка про использование и производительность (Performance & Usage at Instagram)
• Чеклист для подбора лучшего решения CDN (Checklist to Find the Best CDN Solution)
• Начинаем работать с Browserify (Getting Started with Browserify)
• Семантика кастомных html элементов (Custom Element Semantics)
• Записывайте почти все в вашем браузере с помощью MediaRecorder API (Record almost everything in the browser with MediaRecorder)
• Принципы создания сайта, доступного с клавиатуры (Principles of the keyboard-accessible website)
• Создание простых, доступных веб-форм (Create simple, accessible web forms)
• Быстрый совет: как правильно использовать элементы Figure и Figcaption (Quick Tip: The Right Way to Use Figure & Figcaption Elements)
• Использование Foundation 6 с ASP.NET (Using Foundation 6 on ASP.NET Core)
• Процесс работы с SVG для создания доступных иконок (A Working SVG Workflow for Accessible Icons)
• Создание стрелочек на SVG (Making Arrows in SVG)
• Экспериментальное демо Angry Bots, игры на Unity, портированной на WebAssembly.
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #32

CSS

• 4 мифа о PostCSS. Перевод статьи PostCSS Mythbusting: Four PostCSS Myths Busted
• Почти полное руководство по flexbox (без самих flexbox). Перевод статьи Almost complete guide to flexbox (without flexbox)
• Автоматизация регрессионного тестирования CSS. Перевод статьи Automating CSS Regression Testing
• Основы CSS-селекторов на примере котиков. Перевод статьи Basic CSS Selector Syntax Explained Using Cats
• Что такое CSS Modules и зачем они нужны? (What are CSS Modules and why do we need them?)
• Что на самом деле такое “CSS хак”? (What is the Definition of a “CSS Hack”?)
• Модульный CSS c помощью React (Modular CSS with React)
• Emoji: как пройти путь от U+1F355 к [иконке emoji, которую вырезает редактор хабра при публикации]
• HTML/CSS: Z-axis Adventures
• Проблема с iOS Safari и shrink-to-fit
• 16 Unix-правил для CSS (The 16 Unix Rules of CSS)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Будущее CSS. О странном, сбивающем с толку, но захватывающем времени для CSS. (Future CSS)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Игры на «чистом CSS» (+html) c помощью Counter-Increment (Pure CSS Games with Counter-Increment)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Трансформации CSS и их перспектива (CSS transforms and their perspective)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Раскрасска SVG в фоновых изображениях CSS (Coloring SVGs in CSS Background Images)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Используете ли вы принцип единой ответственности? (Are you Single?)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Меняем курсор с помощью CSS для улучшенния UX (или забавы ради) (Changing the Cursor with CSS for Better User Experience (or Fun))
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Sass Me — визуализация функции SASS color (Sass Me — visualize SASS color functions in real-time without compiling.)

[img]https://habrastorage.org/getpro/habr/post_images/49d/04e/fb9/49d04efb96fb6ce31cde9be5dc12a874.gif[/img] JavaScript

• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Свежие релизы: React v15.0 , Node v5.10.0 (стабильный), Релиз Grunt 1.0.0
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Как я стал рок-звездой Javascript (How I Became a JavaScript Rock Star)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Использование веб-компонентов в ванильном JS (Use Web Components in Vanilla JavaScript)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Объяснение Debouncing и Throttling на примерах (Debouncing and Throttling Explained Through Examples)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Оптимизация производительности JavaScript с Firefox Dev Tools (Optimizing JavaScript Performance With Firefox Dev Tools)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Шпаргалка по JavaScript-паттернам с примерами на jQuery (javascript design patterns cheat sheet using jquery for some examples.)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Инструменты, позволяющие изучать JavaScript применяя его на практике (Tools to Learn JavaScript By Doing)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] В защиту гипер-модульности JavaScript (In Defense of Hyper Modular JavaScript)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Опрос по основной стратегии отладки в JavaScript
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Потоковые литералы шаблонов (Streaming template literals)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Четыре типа утечек памяти в JS и как от них избавиться (4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Обзор модульных систем: CommonJS vs AMD vs ES2015 (JavaScript Module Systems Showdown: CommonJS vs AMD vs ES2015)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] [img]https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif[/img] Техники отладки Javascript — Скринкаст Spacedojo Code Kata
• 2 Javascript функции для ускорения верстки
• ES5/ES6:
  
  
  • [img]https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png[/img] ES5 руководство по JavaScript
  • Прокси изнутри. css-live.ru продолжает перевод цикла Николаса Беваквы о ES6
  • ES6 классы
  • Новая возможность языка в ES2016: Array.prototype.includes
  • [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Загрузка ES6 модулей: более сложна чем вы думаете (ES6 module loading: More complicated than you think)
  • [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Выжимка о ES6 (ES6 Succinctly)
  
  
  
• Фреймворки:
  
  
  • [img]https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png[/img] Angular 2 Beta, обучающий курс «Тур героев» часть 1
  • Добро пожаловать в мир React
  • [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Функциональный фронтенд с React (A Functional Front-End with React)
  • [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Улучшаем производительность React с помощью Babel (Improve React performance with Babel)
  • [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Подборка ресурсов для изучения ReactJS
  • [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Простая аутентификация с React и Auth0 (React Authentication is Easy with Auth0)
  • [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Переезд на React на проекте с Rails и Angular (The Transition to React in a Legacy Rails and Angular App)
  • [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Почему стоит рассмотреть использование React Native для мобильных приложений (Why You Should Consider React Native For Your Mobile App)
  • [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] После шести месяцев разработки мы запустили проект на Angular 2
  • [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Лучшие ресурсы по изучению AngularJS за март 2016
  • [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Angular 2 Style Guide
  
  
  
• Плагины:
  
  
  • [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Coloor — HTML препроцессор, добавляющий небольшую версию изображения в base64 коде и вызывающее его при lazy load
  • [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] atrament.js — небольшая JS библиотека для рисования в HTML Canvas
  • [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] InlineTweet.js — позволит вам сделать твит-ссылку из любого текста на странице
  • [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] object-fit-images — полифил для добавления поддержки object-fit у изображений для IE9, IE10, IE11, Edge и других старых браузеров
  • [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] glio.js — определяет, когда пользователь уводит мышь за сайта границы сайта

Браузеры

• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] EdgeHTML issue tracker. Публичный баг-трекер от Microsoft
• Microsoft Edge Web Summit 2016: Microsoft анонсировала RemoteEdge для Mac и Linux
• Microsoft показала новые возможности для Microsoft Edge
• Microsoft Edge будет разумно использовать флэш-контент для повышения производительности и экономии энергии
• [img]https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png[/img] Современная классика — браузер Vivaldi 1.0
• В Firefox переходит на Widevine CDM для воспроизведения защищённого DRM видео
• Пользователи устаревших ОС скоро начнут видеть сообщение о том, что Chrome перестанет обновляться
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Тренды браузеров апрель 2016: взлет Samsung (Browser Trends April 2016: Samsung’s Surge)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] О том, что знает о вас любой браузер

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

• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] bulldogyoga.com — вертикальный скролл-сайт с интересными эффектами
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] nextrembrandt.com — интерактивный сайт, посвященный картинам Рембрандта
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Sweet Magnolia — стильный концептуальный сайт с упором на графическое оформление
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] airforce.com — современный вертикальный скролл-сайт US Airforce
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] bolden.nl — стильный концептуальный сайт с интересными эффектами
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] madeinhaus.com — сайт с продвинутыми интерактивными эффектами на страницах
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Sex by numbers — тематический сайт со специфическим дизайном
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] GUIBENTO.COM — необычные анимированные эффекты при скролле

[img]https://habrastorage.org/getpro/habr/post_images/a27/ea0/6f7/a27ea06f7d56f6b750420fcbc5c63da8.gif[/img] Дизайн

• [img]https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png[/img] Дайджест продуктового дизайна, март 2016
• DPI, пиксели, Retina: Как устроены экраны устройств
• Сделать редизайн сайта и облажаться: 3 провала и как их можно было избежать
• Пять анти-принципов хорошего дизайна
• Дизайнер Basecamp: «Мне нравятся уродливые интерфейсы»
• Adobe Photoshop, Affinity Designer и Sketch 3 — отличное трио для дизайна интерфейсов
• Framer и Sketch: продуманное прототипирование
• Как создавать цвета, типографику и макет для iOS
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Простота — это хорошо (Simple is Good!)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Что такое микровзаимодействие (What is a Microinteraction?)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Почему я люблю уродливые, грязные интерфейсы — и вы, возможно, тоже. (Why I love ugly, messy interfaces — and you probably do too)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Space — новая концепция дизайна от Google
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Как сделать дизайн в стиле Болливуда на тему Нового года Hindu (How to Design a Bollywood-Inspired Poster to Celebrate Hindu New Year)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Художники мира: Индонезия (International Artist Feature: Indonesia)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Проходит ли Ваш сайт «сотовый» тест? (Does Your Site Pass the Honeycomb Test?)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Коллекция лучших сообщений пользователям (Just Good Copy)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Простите за прокол пузырька вашего чата (Sorry to burst your [chat] bubble)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Руководство для начинающих по UX прототипированию (The beginner’s guide to UX prototyping)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Простое руководство по выбору цветовой палитры (A Simple Web Developer’s Guide To Color)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Как использовать Adobe Fuse (How to Use Adobe Fuse)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Sketch, Illustrator или Fireworks? Открываем новое приложение для дизайна UI: Gravit
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Соляризовать как Zayn: цифровой эффект сюрреалистичных черно-белых портретов (Solarized Like Zayn: The Digital Sabattier Effect for Surreal Black and White Portraits)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Triangulart — простой редактор для рисования изометрических иллюстраций
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Детали типографики отобранных сайтов Typewolf за март 2016 (The Typographic Details Behind Typewolf’s Favorite Sites of March 2016)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Представлены финалисты конкурса логотипа для олимпийских игр Tokyo 2020 (Tokyo 2020 Olympics unveils shortlisted logo designs)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Новый логотип и айдентика для для Natsuki от Erretres: Moon Shot (New Logo and Identity for Natsuki by Erretres: Moon Shot)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] HP представила «новый» логотип (HP unveil «new» logo)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Новый логотип HP, который никем еще не был использован (HP's new logo is the awesome one it never used)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Музей логотипов: рисуем линию (Museum Logos: Drawing The Line)

[img]https://habrastorage.org/getpro/habr/post_images/a27/ea0/6f7/a27ea06f7d56f6b750420fcbc5c63da8.gif[/img] Подборка бесплатных дизайнерских печенек

• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Текстуры бумаги (130+ Free Paper Textures)
• Бесплатные фотографии, которые будут хорошо смотреться в качестве фона
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Наборы изображений с абстрактными фонами (Free Abstract Background Images, Mega Bundle and Resources)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Голливудские сцены, превращенные в мокапы (Hollywood Mockuuups)
• Крутые паттерны с птицами в главной роли
• Бесплатный вектор на тему мотоциклов
• Свежие бесплатные mockup-файлы
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Набор контурных иконок: Интернет вещей (FREEBIE: The Internet of Things Stroke Icon Set)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Набор шрифтов-монограмм (25+ Elegantly Designed Free Monogram Fonts)
• [img]https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif[/img] Упаковка преимущественно декоративных шрифтов (16 Free Fonts Bundle — Web Design Freebies List — #16)

<a name="news">[img]https://habrastorage.org/getpro/habr/post_images/281/994/c0f/281994c0fe695abbe6d963faed1cffb6.gif[/img] Новости и занимательное

• SpaceX Элона Маска впервые успешно посадила первую ступень Falcon 9 на плавучую платформу в океане
• Доля Windows 10 приближается к 15%: более 270 млн пользователей по всему миру
• ФБР не может взломать iPhone 5s и более поздние модели
• «ВКонтакте» и Warner Music Group заключили внесудебное соглашение об использовании музыкального контента
• Rovio терпит убытки
• Windows 10 Insider Preview Build 14316 с Bash on Ubuntu уже доступен
• Medium нацелился на успех WordPress, предложив новый способ управления сайтами
• WSJ: Apple при Джобсе взламывала iPhone для властей США и заартачилась лишь в наши дни при Тиме Куке
• Почему умение программировать не спасет вашу работу
• Ну что, дописались, фантасты?!!
• Samsung тестирует сканеррадужной оболочки глаза для смартфонов
• Фотогалерея: Где начинающие карьеру разработчики и дизайнеры живут в Кремниевой долине
• Нейросеть вместо фотошопа
• В MIT напечатали робота из твердых, гибких и жидких материалов одновременно
• Энтузиаст подключил Chromecast к ламповому телевизору 1978 года

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



Дайджест за прошлую неделю.

Материал подготовили dersmoll и alekskorovin.



Original source: habrahabr.ru (comments, light).

Читать дальше