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

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

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

• Используем WebP сегодня. Перевод статьи Guide To Using WebP Images Today: A Case Study
• DevTips: Советы веб-разработчику (33-48)
• Заблуждения разработчиков. Перевод статьи Developer Fallacies сообщестом css-live.ru
• Почему сложно программировать UI. Кирилл Мокевнин
• Nativefier — Инструмент, превращающий ваш сайт в нативное приложение (Turns Any Web Site Into a Native App from the Command Line)
• W3C опять форкнуло HTML (W3C forks HTML yet again)
• Remy Sharp: Почему я люблю работать с веб (Why I love working with the web)
• Firefox и Web Speech API
• Проблема с глобальными зависимостями для Node.js и их решения (The Issue With Global Node Packages)
• Webpack Your Workflow
• Bootstrap: an intervention. Аргументы за и против бутстрапа от Evil Martians
• Chrome (Canary) DevTools будет показывать измерения из User Timing в таймлайне
• Chrome наконец научился делать плавную промотку — пожалуйста, перестаньте пытаться реализовать ее самостоятельно на JavaScript!
• Создаем оффлайн сайт с помощью ServiceWorkers и UpUp (Building Offline Sites with ServiceWorkers and UpUp)
• Полный гайд по поддержке превью-текста в письмах (The Ultimate Guide to Preview Text Support in Email)
• Встречайте WPGulp: простой в использовании WordPress Gulp Boilerplate
• Проблемы date input (The woes of date input)
• Улучшаем отзывчивые изображения с помощью клиентских подсказок (Leaner Responsive Images With Client Hints)
• Подборка свежих ссылок на материалы и демки по теме SVG (Some Pretty Splendid SVG Links)
• О ссылках, кнопках и div`ах (Links, Buttons, Submits, and Divs, Oh Hell)
• Настройка Google Map маркеров (Customize your Google Map Markers)
• Ленивая загрузка изображений: как действительно не разрдражать ваших пользователей (Lazy-Loading Images: How Not to Really Annoy Your Users)
• Текущее состояние веб-безопасности (интервью с Anselm Hannemann) (The Current State of Web Security)
• Эффектный веб:
  • Еженедельная подборка красивых эффектов на CSS/SVG/JS #21
  • SVG clip-path Hover Effect
  • Анимированная SVG гитара (SVG Animated Guitar (Play Me!))
  • WebGL эксперимент The Spirit
  • Анимированная Хаски на чистом CSS (Alex the CSS Husky)

CSS

• Несколько дельных советов по CSS
• Пришло время переосмыслить вендорные префиксы в CSS. Перевод статьи It’s Time to Rethink Vendor Prefixes in CSS на Прогрессоре
• Первый CSS-модуль 4 уровня в статусе кандидата в рекомендации
• Управляем поведением font-face в CSS
• Подсетки в Grid Layout жизненно важны. Перевод статьи Subgrids Considered Essential сообществом css-live.ru
• CSS модули — решаем проблему масштабирования стилей. Перевод статьи CSS Modules — Solving the challenges of CSS at scale
• Думаете, что flexbox — это сложно? Тогда посмотрите на последние примеры из CSS Grid спицификации
• Исследуем функцию кеширования в Stylus (Exploring the Stylus Cache Function)
• Заметки по концепциям в CSS (CSS Refresher Notes)
• Webkit Flexbox Patterns
• Песочница Flexbox (Flexbox playgroung)
• Sass: директива media
• Преимущества наследования через @extend в Sass (The Benefits of Inheritance via @extend in Sass)
• Трюк для организации фолбэка для CSS свойства object-fit для Edge (и других браузеров) (Neat trick for CSS object-fit fallback on Edge (and other browsers))
• Стилевое руководство для edX-приложений
• Timelined — настраиваемая временная шкала на базе CSS (Timelined is a customizable CSS-only vertical timeline)
• CSS Gradient Animator

JavaScript

• Microsoft отправила запрос на аппрув реализации поддержки ChakraCore в Node.js наряду с движком V8
• Перевод «Simplified JavaScript Jargon»
• 7 жизненно важных функций в JavaScript
• Что нового в jQuery 3.0 и как это использовать (What’s New in jQuery 3.0 and How to Use It)
• Храним обещания с помощью JS (Keeping Promises With JavaScript)
• Интервью с мастером JS: какая разница между наследованием класса и прототипным наследованием? (What’s the Difference Between Class & Prototypal Inheritance?)
• Matthew Podwysocki: «Реактивный JavaScript в Netflix, Microsoft и мире» (Matthew Podwysocki: «Reactive JavaScript at Netflix, Microsoft and the World»)
• Пять примеров использования функции jQuery.each() (5 jQuery.each() Function Examples)
• Обзор GraphQL (GraphQL Overview)
• Польза JS веб-приложений (JavaScript web apps considered valuable)
• CMS.js — генератор статических сайтов (CMS.js — the Javascript Site Generator.)
• Фреймворки:
  • 5 шагов для изучения разработки приложений на React (5 Steps for Learning React Application Development)
  • Создайте ваше первое приложение на React.js (Building Your First React.js App)
  • Изучение основ React и создание прототипа небольшого приложения (Learning React basics and building a basic application prototype)
  • Почему React/Redux это не лучшая парадигма (Why React/Redux is an inferior paradigm)
  • Лучшие практики при работе с React.js в 2016-м (React.js Best Practices for 2016)
  • Динамическое руководство по AngularJS для JS разработчиков (Dynamic AngularJS Guided Tutorial for JavaScript Developers)
  • Состояние в Meteor: когда что-то пошло не так (The State Of Meteor Part 1: What Went Wrong)

• ES6:
  • Шпаргалка по ES6
  • 7 путей для улучшения вашего JS-программирования с помощью ES2015 (7 Ways ES2015 Can Improve Your JavaScript Programming)
  • Объектно-ориентированный JavaScript — глубокое погружение в ES6-классы (Object-Oriented JavaScript — A Deep Dive into ES6 Classes)

• Плагины:
  • Релиз Masonry v4 и imagesLoaded v4: отказ от поддержки IE8 & 9, на 25% & 50% меньше, обратная совместимость
  • Umbrella JS — небольшая (<2kb) производительная библиотека в стиле jquery
  • Сравнение JavaScript календарей и планировщиков (A Comparison of JavaScript Calendars and Schedulers)
  • Десять лучших jQuery и HTML5 WYSIWYG плагинов (10 Best jQuery and HTML5 WYSIWYG Plugins)
  • Drop.js — быстрая и функциональная библиотеа для создания выпадающих списков
  • Philter — применение CSS фильтров с помощью HTML-атрибутов (Philter is a JS plugin giving you the power to control CSS filters with HTML attributes.)

Браузеры

• Релиз web-браузера Chrome 48
• Google Chrome станет быстрее с новым алгоритмом сжатия данных Brotli
• Facebook тестирует новый браузер, с которым никогда не возникнет потребности покидать приложение
• Firefox будет автоматически менять старый Youtube Flash код на HTML5
• Проект Mozilla продлил возможность работы с неподписанными дополнениями в Firefox
• В Firefox 44 появится возможность выполнения WebGL в отдельном потоке
• Бывший глава Mozilla и автор языка JavaScript представил миру браузер Brave
• 6 мифов веб-разработчиков о Microsoft Edge

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

• Loving what you do takes work
• beoplayh8 — промо-сайт, посвященный наушникам, с интересными скролл-эффектами
• colonelsanders.com — забавный сайт от KFC
• The grey tales — продвинутый интерактивный сайт с нестандартной навигацией
• johos.at — яркий мультимедийный сайт с обилием видео-вставок
• gidmotion.com — Сайт с интересным фоновым эффектом
• Сайты, которые нужно смотреть со звуком

Дизайн

• Accessibility: Как «Яндекс» создает доступные интерфейсы
• 10 популярных заблуждений при создании логотипа
• 7 причин отказаться от бесконечного скроллинга
• Справочник: размеры картинок для 9 социальных сетей
• Дизайн для детей — это не детская игра (Designing for Kids Is Not Child’s Play)
• Самые большие ошибки в веб-дизайне, которых стоит избегать в 2016-м (The Biggest Web Design Mistakes to Avoid in 2016)
• Создание более выразительной картинки для профиля (Designing a More Expressive Profile Picture)
• UI Анимация. Микровзаимодействие и макрорезультат (UI Animation. Microinteraction for Macroresult)
• Советы для дизайнеров, которые не пишут код (Tips for Designers Who Don’t Code)
• UX vs CX: что более важно? (UX vs CX: Which is more important?)
• Интервью с Michael Flarup: со-основателем и ведущим дизайнеров в Robocat (Interview with Michael Flarup: Co-Founder and Lead Designer at Robocat)
• Движение со смыслом: семантическая анимация в дизайне интерфейса (Motion with Meaning: Semantic Animation in Interface Design)
• (Незаконченные) основы цвета (The (Unfinished) Basics of Colour)
• Спроси DN: какие книги почитать в 2016-м? (Ask DN: What books to read in 2016?)
• Дизайн более выразительного изображения профиля пользователя (Designing a More Expressive Profile Picture)
• Canvas от Facebook
• Прекрасные причины (Beautiful Reasons)
• Дизайн продукта — как мы делаем сложные задачи простыми (Product design — How we make complex tasks feel simple)
• Drive 47 — концепт приложения
• Открытое письмо дизайнерам делающих редизайны без запроса, а так же авторам несоздаваемых приложений (An Open Letter to Designers of Unsolicited Redesigns and Unbuildable Apps)
• Что Дисней знает об анимации интерфейса? (What does Disney know about interface animation anyway?)
• Scrawl — конструктор геометрических форм
• Геометрический дизайн: диаграмма «Heavenly City» (Geometric Design: The «Heavenly City» Diagram)
• От мебели к экранам (From Furniture to Screens)
• Кривая точности: Как взвесить затраты и выгоды создания макетов пользовательского интерфейса (The Fidelity Curve: How to weigh the costs and benefits of creating UI mockups)
• Плагин для Sketch для генерации вида изменений (git-sketch-plugin)
• Коллекция уроков по созданию типографики в Photoshop (An Awesome Collection Of 80 Photoshop Typography Tutorials)
• Почему San Francisco (шрифт) (Why San Francisco)
• Занимательная типографика
• Panda в 2015-м
• Dribble в 2015-м
• 50 шуток для веб-дизайнеров (50 Web Designer Jokes That Will Definitely Make You Laugh)

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

• Бесплатные текстуры обоев в викторианском стиле
• Бесплатный вектор на вегетарианскую тему
• Набор иконок в формате AI, PSD, SVG​ (72 Icons Free Download​)
• Иконки в стиле Material Design (350 free Material Design Icons)
• Набор иконок Swifticons (AI, SKETCH)
• 14 шрифтов к Дню святого Валентина (14 Free Valentine’s Day Fonts to Fall in Love With)
• Ginebra — декоративный шрифт с засечками (Ginebra Free Font)
• Audrey — элегантный шрифт без засечек (Audrey is a new, FREE and elegant typeface by Cristina Pagnotta)

Новости

• Alphabet реорганизовал лабораторию X и включил в неё подразделение робототехники
• StatCounter: Windows 10 уже обошла Windows 8.1
• Срочно в номер: Microsoft закрывает линейку Lumia и Windows 10 Mobile
• Blue Origin запустила в космос уже летавшую суборбитальную ракету. И вновь посадила её
• Bing обновляет поисковый алгоритм ежедневно
• Через Skype больше нельзя будет вычислить IP пользователя
• Алишер Усманов оказался одним из инвесторов Uber
• Google заплатила Apple $1 млрд за присутствие на iPhone
• Создан сервис, распознающий сарказм в сообщениях
• Анонсирована криптовалюта Zcash, обеспечивающая анонимность транзакций

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

• Дети видят в однополых смайлах Apple членов традиционной семьи: братьев, сестёр и других родственников
• Что будет с технологиями и телекоммуникациями в 2016 году — прогноз Deloitte
• На МКС распустился первый в истории «космический» цветок
• «Как вы объясните важность HTML5 Ларри Пейджу?»
• 8 типов раздражающей рекламы, заблокированной Google в 2015 году
• Что интернет делает с нашим вниманием: привычка отвлекаться
• Присаживайтесь. Почему в истории со SpaceX нельзя спешить с выводами
• Как ваш компьютер и телефон понимают, чего вы от них хотите
• Как изменится мир к 2045 году

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

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

Автор: Zfort Group

Источник