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

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

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

CSS

Javascript

Браузеры

Дизайн

Новости

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

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

• How-to: Процесс создания верстки html-писем
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #6
• Семантическая структура для HTML5 страницы. Семантика в HTML5
• Руководство по Web Animations API — Часть 5: приятная траектория движения
• FLIF — бесплатный формат изображений без потери качества (FLIF — Free Lossless Image Format)
• Paul Irish & Paul Lewis презентуют RAIL (Response, Animation, Idle, Load): ориентированную на пользователя модель для производительности (Introducing RAIL: A User-Centric Model For Performance)
• Разбиваем контент по секциям в HTML5 — div, section или article?
• Bootstrap 4 Tutorial: создание одностраничного шаблона
• Рисованное руководство по Flux (A cartoon guide to Flux)
• SVG и DOM, или «Самый странный баг, с которым я сталкивался» (SVG and the DOM, or «The Weirdest Bug I've Ever Encountered»)
• Свежая статья от Peter-Paul Koch о текущем состоянии вьюпортов и новой спецификации адаптации устройств (A new Device Adaptation spec)
• IndexedDB, WebSQL, LocalStorage – что блокирует DOM?
• Отладка Webpack приложений в WebStorm (Debugging Webpack applications in WebStorm)
• Помните впечатляющее демо LavaLamp на SVG? Вот статья о том, как она создавалась (How To Make An SVG Lava Lamp)
• Доклад Addy Osmani на тему «Что нового в Chrome DevTools?»
• Подборка видео с конференций JSConf и CSSConf 2015
• Появилось 7 свежих видео со SmashingConf Freiburg

---

CSS

• 19 принципов разработки по БЭМ, или что должен знать каждый разработчик библиотек
• Осваиваем CSS: BEM и ITCSS
• Эстетичный Sass. Часть 1: архитектура и организация, часть 2: цвета и палитры, часть 3: типографика и вертикальный ритм
• Улучшение загрузки шрифтов c помощью localStorage и WOFF2
• Когда бывает нужен calc()
• Индикаторы правильности заполнения полей на CSS
• Заметка о практической пользе CSS методологий на примере БЭМ и о проблемах Bootstrap
• Руководство по быстрому старту PostCSS: настройка Gulp (PostCSS Quickstart Guide: Gulp Setup)
• Встраивание критического CSS для динамических веб-приложений (Inlining Critical CSS for Dynamic Web Apps)
• Список SVG свойств, которыми можно манипулировать из CSS
• Затемненные объемные прогресс-бары: CSS/Sass упражнение (Shaded Progress Bars: A CSS/Sass Exercise)
• Corpus — коллекция CSS сниппетов для каждого проекта (SCSS)
• Несколько видео с SmashingConf Freiburg: CSS For Software Engineers For CSS Developers, Web Fonts Performance
• Доклад Glen Maddern на тему Interoperable CSS с CSSconf EU 2015

---

JavaScript

• JavaScript и Nginx = nginScript, а HTTP2 в придачу
• Matreshka.js: Matreshka.js 1.1: еще больше крутостей, События
• nginScript – почему мы создали свою собственную имплементацию JavaScript? (nginScript – Why Are We Creating Our Own JavaScript Implementation?)
• ES6:
  
  • Totally Tooling Tips: ES2015. Разработчики Google делятся своими советами по инструментарию
  • Эффект JavaScript 2015 (ES6) на разработку
  • Состояние JavaScript на Android-е в 2015… печальное (The State of JavaScript on Android in 2015 is… poor)
  • ES6: методы против коллбэков (ES6: methods versus callbacks)
  • Документация ES6 с ESDoc (Document ES6 with ESDoc)
  • ES6 промисы в деталях (ES6 Promises in Depth)
  • Настройка ES6 с помощью хорошо известных символов (Customizing ES6 via well-known symbols)
  • Гениальность шаблонов строк в ES6 (The Genius of Template Strings in ES6)
  
  
• ESLint: новое поколоение JavaScript валидаторов (ESLint: The Next-Generation JavaScript Linter)
• 6 хитростей, которые помогут вам изучить JS быстрее (Six Simple Mind Tricks to Help You Learn JavaScript Faster)
• 12 правил для JavaScript-профи в 2015 (12 Rules for Professional JavaScript in 2015)
• Функции без ”function” (Functions without ”function”)
• Видео: Быстродействие с requestAnimationFrame (Watch: Performance with requestAnimationFrame)
• Современный стратовый пакет с React на webpack (A modern React starter pack based on webpack)
• Введение в Rendr (Introduction to Rendr)
• Прототипирование 3D тач взаимодействий с Framer (Prototyping 3D Touch interactions with Framer)
• Плагины и библиотеки:
  
  • clipboard.js — современный способ копирования в буфер, без флеша, всего 2Kb
  • Как clipboard.js набрал 5000 звёзда за несколько дней? (How did clipboard.js get 5000 stars in a few days?)
  • Rune.js — удобная JS библиотека для создания графических систем, объектов, сеток, типографики с помощью SVG.
  • Использование библиотеки JSCharting (Using the JavaScript Charting Library)
  • Реализация 3D Touch на JavaScript
  • Подсветка текста внутри Textarea
  • Popmotion — движок JS анимации с эмуляцией физики в 12 Кб
  • Без jQuery — DOM манипуляции с NodeList.js (Lose the jQuery Bloat — DOM Manipulation with NodeList.js)
  
  

---

Браузеры

• Trainspotting: Firefox 41
• Выход Firefox 42-beta и Firefox Developer Edition 43
• Firefox 41 позволяет разработчикам делать скриншоты для отдельных элементов страницы

---

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

• BioWars — сайт, насыщенный CSS анимацией, которая сочится практически из каждого компонента страниц
• Интерактивный сайт с оригинальной системой поиска, посвященный игре Assassins Creed
• lezilus.fr — сайт с нестандартными ховер-эффектами и переходами
• designdisruptors.com/ — лаконичная и приятная скролл-анимация
• Frontend inWonderland — промо-страница с креативным дизайном и параллаксом
• 88and90lex.com — слайд-скролл сайт с симпатичными эффектами
• homerhudson.com — нестандарная анимированная полноэкранная навигация

---

Дизайн

• Пространственные интерфейсы: Как использовать физические свойства реальных предметов в дизайне
• Психология цифр в дизайне
• Дизайн карты мира
• Визуализируй это. Бытовая картография не такая уж и сложная и запутанная штука, если ей немного увлечься.
• Channel 4 «разбил» логотип на части ради новой айдентики
• Графические редакторы:
  
  • Sketch Plugins — Библиотека плагинов для выравнивание элементов, типографики и цветовых палитр
  • 10 фишек в Sketch для дизайнеров
  • 5 советов, которые помогут ускорить работу в Sketch
  • Ссылка дня: Product Hunt для пользователей Photoshop
  • Быстрый совет: как открыть поврежденный файл Adobe InDesign (Quick Tip: How to Open Corrupted Adobe InDesign Files)
  
  
• Редизайны:
  
  • CodePen с новым дизайном
  • Новый дизайн CSS Tricks получил смешанные отзывы
  • Google изменил дизайн аватаров в аккаунтах пользователей
  • Улучшение профилей Facebook на мобильных (Improving Mobile Profiles)
  • Huffington Post презентовал новый классный дизайн (The Huffington Post debuts a bold new design)
  • Закружились: история ребрендинга Asana (Circling Ourselves: The Story Behind Asana’s Rebrand)
  • Новый логотип Opera был сделан внутри компании при сотрудничестве с фирмами Anti и DixonBaxi (New Logo for Opera done In-house with Anti and DixonBaxiOnline Portal)
  
  
• Типографика:
  
  • 6 шрифтов сравнили на эффективность в рекламе
  • Будущее UI это текст (The future of UI is text)
  • Заставляют ли вас наживать на кнопки шрифты с засечками? (Do serifs make you tap?)
  • Детали типографики лучших сайтов по версии Typewolf за сентябрь 2015 (The Typographic Details Behind Typewolf’s Favorite Sites of September 2015)
  
  
• UI/UX:
  
  • Как IFTTT привлекает новых пользователей (How IF by IFTTT Onboards New Users)
  • Готовы ли пользователи настольных компьютеров к иконке-гамбургеру? (Are Users Ready for the Desktop Hamburger Icon?)
  • Действительно ли веб-дизайнеры должны знать UX? (Do web designers really need to know UX?)
  • Как делать дизайн форм, которые конвертируют (How to design forms that convert)
  • Три десятка примеров интерфейсов поиска на веб-сайтах (30 Examples of Website Search Interface Design)
  • Узнаем о невидимом дизайне (Learning About Invisible Design)
  • Самый потрясающий когда-либо созданный UI
  
  
• Дизайн для веба против дизайна для приложений в эпоху мобильных устройств (Designing for the Web vs. Apps in the Mobile Era)
• Каждый веб-сайт выглядит одинаково, и это нормально (Every website looks the same, and that’s ok)
• Как запускать проекты в свободное время: пример проекта Screenings (How To Run A Side Project: Screenings Case Study)
• Дизайн быстрого приготовления (Fast Food Design)
• Клавиатурный шведский стол (Keyboard Smörgåsbord)
• Origami: как создавать прекрасные прототипы за минуты (Origami: How to Build Terrific Prototypes in Minutes)
• Как оживить ваш плоский дизайн грязными точками (How to Liven up Your Flat Design with Dirty Dots)
• Представляем: стандарты веб-дизайна Соединенных Штатов (Introducing: U.S. Web Design Standards)
• BG Stock — сток HTML5 фоновых видео
• Как экспортировать для печати пиксель-арт в Adobe Photohop (How to Export Pixel Art for Printing in Adobe Photohop)
• Подробное создание иллюстрации стакана молока и печенек в Adobe Illustrator (Create a Detailed Glass of Milk and Cookies in Adobe Illustrator)

---

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

• MOBIRISE WEBSITE BUILDER — Очень простой и бесплатный конструктор мобильных сайтов. (Create awesome mobile-friendly websites. No coding and free.)
• Бесплатный клипарт о пополнении в семье
• Векторный клипарт в стиле барокко
• Мокапы устройств Apple (Free Apple Devices Mockups)
• PSD с UI iOS 9 на iPhone 5, 6 и 6 Plus (iOS 9 Complete UI free PSDs for iPhone 5, 6 and 6 Plus)
• Векторные изображения ленточек (29 Modern Ribbon Vector Freebies to Download)
• Векторный бейдж Halal (Halal Food Free Vector Badge)
• Коллекция векторных изображений графиков и диаграмм (Freebie: Vector Graph & Chart Collection (AI, EPS, SVG, PSD & PNG))
• Иконки самых известных мест мира (AI, EPS, PDF, PNG and PSD) (Freebie: World Landmark Icons (AI, EPS, PDF, PNG and PSD))
• Иконки посвященные SEO (FREEBIE: 36 Free SEO Icon Set)
• Набор иконок Birply от Davide Pacilio (Birply – Free Icons Sets by Davide Pacilio)
• IconAlone: больше сотен контурных иконок (IconAlone: 110 Line Icons)
• Тысяча OpenType шрифтов от Creative Bloq (1000 Free OpenType Fonts by Creative Bloq)
• Relancer — шрифт в стиле арт-деко (Relancer // Free Display Font)
• NOVU — шрифт без засечек (NOVU — M Free Font)

---

Новости

• Новые Nexus, Chromecast и Android 6.0 Marshmallow: теперь официально
• Разработчик расширения для блокировки рекламы Adblock продал проект неизвестному покупателю
• В настольной версии Skype появилась поддержка синхронного перевода речи
• Tesla Model X: двери-крылья и супер-фильтр
• Twitter вскоре может отменить ограничение в 140 символов на сообщение
• Google и Microsoft прекратили затянувшуюся патентную битву
• GitHub объявил о доступности хранилища больших файлов для всех репозиториев
• Facebook за внедрение видеоаватаров
• Компания Yahoo представила Gryffin, открытый сканер безопасности для Web-приложений

---

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

• 11 простых лайфхаков, которые могут значительно повысить продуктивность работы
• Стивен Хокинг считает, что кочевые инопланетяне могут нас уничтожить
• Четыре месяца в Microsoft: От подачи заявки и первого собеседования до увольнения
• Открытое письмо, которое победило Adobe Flash
• Windows 10 как религия ИТ-деспотий
• ИгроМир 2015:
  
  • Игромир/Comic Con Russia 2015: Косплей и стендистки
  • Все свои: Comic Con Russia и «ИгроМир 2015»
  • Лучший косплей и великолепные девушки Игромира 2015 и Comic Con Россия
  • Река людей, день косплея и игра про котиков — первый публичный день «Игромира»/Comic-Con 2015 глазами ошалевшего гостя столицы
  
  
• iКольцо станет реальностью?
• 10 малоизвестных фактов о компании Logitech
• Грабли вай фая: как не нужно настраивать беспроводную сеть
• 9,200 высококачественных фотографий с миссии Apollo оцифрованы и выложены в сеть

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

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