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

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и 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)
• Будущее CSS. О странном, сбивающем с толку, но захватывающем времени для CSS. (Future CSS)
• Игры на «чистом CSS» (+html) c помощью Counter-Increment (Pure CSS Games with Counter-Increment)
• Трансформации CSS и их перспектива (CSS transforms and their perspective)
• Раскрасска SVG в фоновых изображениях CSS (Coloring SVGs in CSS Background Images)
• Используете ли вы принцип единой ответственности? (Are you Single?)
• Меняем курсор с помощью CSS для улучшенния UX (или забавы ради) (Changing the Cursor with CSS for Better User Experience (or Fun))
• Sass Me — визуализация функции SASS color (Sass Me — visualize SASS color functions in real-time without compiling.)

JavaScript

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

Браузеры

• EdgeHTML issue tracker. Публичный баг-трекер от Microsoft
• Microsoft Edge Web Summit 2016: Microsoft анонсировала RemoteEdge для Mac и Linux
• Microsoft показала новые возможности для Microsoft Edge
• Microsoft Edge будет разумно использовать флэш-контент для повышения производительности и экономии энергии
• Современная классика — браузер Vivaldi 1.0
• В Firefox переходит на Widevine CDM для воспроизведения защищённого DRM видео
• Пользователи устаревших ОС скоро начнут видеть сообщение о том, что Chrome перестанет обновляться
• Тренды браузеров апрель 2016: взлет Samsung (Browser Trends April 2016: Samsung’s Surge)
• О том, что знает о вас любой браузер

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

• bulldogyoga.com — вертикальный скролл-сайт с интересными эффектами
• nextrembrandt.com — интерактивный сайт, посвященный картинам Рембрандта
• Sweet Magnolia — стильный концептуальный сайт с упором на графическое оформление
• airforce.com — современный вертикальный скролл-сайт US Airforce
• bolden.nl — стильный концептуальный сайт с интересными эффектами
• madeinhaus.com — сайт с продвинутыми интерактивными эффектами на страницах
• Sex by numbers — тематический сайт со специфическим дизайном
• GUIBENTO.COM — необычные анимированные эффекты при скролле

Дизайн

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

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

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

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

• 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.

Let's block ads! (Why?)