Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и материалы из области фронтенда и дизайна. В связи с нововведениями в создании постов и разделением их на раздельные потоки разработки и дизайна, текущий пост будет последним в таком формате. Клиентская разработка CSS Javascript Браузеры Дизайн Новости Занимательное Клиентская разработка 15-й выпуск «Веб-стандартов»: блокировка рекламы, Pointer Events, расширения, веб-компоненты 39-й выпуск RadioJS: React, мед, пиво и все остальное Данные на фронтенде: шаг к приложениям будущего Введение в Web MIDI Интересная статья про оптимизацию хореографии контента, изображений и типографики для крупномасштабных экранов (Optimizing for Large-Scale Displays) Введение в Page Visibility API Unstuck Webpack — GUI инструмент с готовыми Webpack-шаблонами для тех, кто не хочет тратить время на настройку Введение в Webpack: часть 2 (Introduction to Webpack: Part 2) Необходимые инструменты для кроссбраузерного тестирования в 2016-м (The 7 Cross-Browser Testing Tools You Need in 2016) Шпаргалка по Bootstrap 4 Список утилит для командной строки для работы со структурированной текстовой информацией (A list of command line tools for manipulating structured text data) Интерактивные уроки по работе с Sublime (Sublime Tutor) Я — гребаный веб-мастер (I'm a fucking webmaster) Производительность: Предзагрузка ресурсов в HTML5. Предугадывание действий пользователя и предзагрузка ресурсов для улучшения производительности Советы по развертыванию фронтенда на HTTP2 (Best Practice for HTTP2 Front-end deployments) Полное руководство по оптизимации изображений для веба (Optimize Images for Web – Ultimate Guide) SVG: Создание SVG паттернов без выноса мозга (или бюджета) (Mastering SVG Patterns Without Breaking Your Brain (or Budget)) Еще раз о SVG Clipping Paths Маскирование в браузере с CSS и SVG (Masking in the Browser with CSS and SVG) Доступность: Стоимость доступности (The cost of accessibility) Создаем более доступный UX с помощью HTML5 и UIA (Building a more accessible user experience with HTML5 and UIA) Как провести базовый аудит доступности на вашем сайте (How to Conduct a Basic Accessibility Audit on Your Site) Краткое руководство: как делать доступные веб-компоненты (How to Make Accessible Web Components — a Brief Guide) О том, что делают с вопросами доступности в Vox Media Frend — колекция доступных компонентов для веба (Off Canvas, аккордион, табы и пр.) Эффектный веб: Анимированные эффект искажения для кнопок с помощью SVG фильров (Distorted Button Effects with SVG Filters) Эффекты на кнопка с искажениями с SVG фильтрами (Distorted Button Effects Using SVG Filters) Анимированные эффекты различных переходов (Animated Transition Effects) Еженедельная подборка красивых эффектов на CSS/SVG/JS #37 CSS Стилизация React-компонентов Переход с HTML Grid на CSS Grid системы Осмысленный CSS: описывайте стилями свою логику. Перевод статьи Meaningful CSS: Style Like You Mean It сообществом css-live.ru Видео с PiterCSS №3 Важность !important в CSS (The Importance of !important: Forcing Immutability in CSS) Сценарии использования для вертикальных медиа-запросов (Use Cases For CSS Vertical Media Queries) BEMantic: DRY Like You Mean It to__bem or not__to--bem Разработка архитектуры для стилей фронтенда (Architecting Front-end Styles) CSS Modules в rescue.jsx CSS Modules в примерах Давайте писать красивые коментарии в CSS (Let’s Write Beautiful CSS Comments) Хорошие и плохие практики работы с CSS для начинающих (Good and Bad CSS Practices for Beginners) Типографика Действительно гибкая типографика с помощью единиц vh и vw (Truly Fluid Typography With vh And vw Units) Flexbox и обрезание длинного текста (Flexbox and Truncated Text) Отзывчивое модульное масштабирование текста (Responsive Modular Scale) JavaScript Метод функций bind своими руками Опубликованы новые документы в b_ методологии: JavaScript по БЭМ, Особенности JavaScript Дорожная карта JavaScript: впереди небольшие и более частые обновления (JavaScript road map: Smaller, more frequent updates ahead) Упрощенный JavaScript жаргон (словарь терминов) (Simplified JavaScript Jargon) Нейросети в JS (Neural Networks in Javascript) 7 удивительный вещей, которые я узнал, когда писал генератор чисел Фибоначчи на JS (7 Surprising Things I Learned Writing a Fibonacci Generator in JavaScript) Что такое Promise.try, и почему он так важен? (What is Promise.try, and why does it matter?) Создание простого цикла, используя массив (Create an easy loop using an array) Модульный JavaScript: руководство для начинающих по SystemJS и jspm (Modular JavaScript: A Beginners Guide to SystemJS & jspm) Вкус новых параллельных примитивов в JavaScript (A Taste of JavaScript’s New Parallel Primitives) Необычные jQuery селекторы (Uncommon jQuery Selectors) Создание собственного настраиваемого Slack-бота с Node.js (Build Your Own Custom SlackBot with Node.js) Видео-курсы по Node.js (Learn Node.js) ES6: ES6 в деталях: генераторы, продолжение 5 «плохих» частей JavaScript, которые починили в ES6 (5 JavaScript “Bad” Parts That Are Fixed In ES6) Пример использования ES6 генераторов (A Case For ES6 Generators) Обзор ES6 Sets (A Look at ES6 Sets) Как создавать и публиковать модули ES6 сегодня с Babel и Rollup (How to Build and Publish ES6 Modules Today, with Babel and Rollup) Фреймворки: Почему нельзя использовать Backbone.js в 2016 году ReactJS 15.0.2 Tutorial Лучшие новости и анонсы с ng-conf 2016 (The Best News from Angular’s ng-conf 2016) 33 Видео с ng-conf 2016 (ng-conf 2016) Производительность в Angular: настройка движка (Angular Performance: Tuning the Engine) Не вините фреймворк: мой опыт с AngularJS и ReactJS (Don’t blame the framework: my experience with AngularJS and ReactJS) Angular 2 серии — часть 5: формы и кастомная валидация (Angular 2 Series — Part 5: Forms and Custom Validation) Создание собственного расширения для Chrome с Angular 2 и TypeScript (Build Your Own Chrome Extension Using Angular 2 & TypeScript) Как я перестал беспокоиться и полюбил JSX (How I learned to stop worrying and love the JSX) Советы по оптимизации отрисовки набора элементов в React (Tips to optimise rendering of a set of elements in React) Начало работы с Ionic: навигация (Getting Started With Ionic: Navigation) Скрипты и плагины: Tocbot — генерирует содержание страницы со ссылками-якорями по структуре заголовков HTML JavaPoly.js — полифил для нативной поддержки в JVM браузере (JavaPoly.js — Java(script) in the Browser) Stop.js — 'setTimeout' на базе промисов (Stop.js — the Promise base `setTimeout`, reduce your callback) Trial.js — библиотека для мониторинга позиции курсора мыши и предположения дальнейшего поведения (Trial.js — simple library could monitor mouse position and predict user input) Adobe CC Scripts Panel — панель для скриптов для After Effects, Illustrator, и Photoshop (Adobe CC Scripts Panel — Scripting Panel for After Effects, Illustrator, and Photoshop) Браузеры Спасём Firefox Представлена программа предварительного тестирования экспериментальных улучшений Firefox Новый режим экономии заряда батареи в браузере Opera для ПК продлевает автономность ноутбука на 50% В Chrome планируют отключить информирование сайтов о поддержке Flash В Microsoft Edge теперь можно блокировать рекламу с помощью AdBlock или Adblock Plus В Яндекс.Браузере для устройств на базе Android заработала технология Антишок Релиз Safari Technology Preview 4 Blisk — браузер (на базе Chromium) для веб-разработки (Develop and test websites that look great and work fine on any device) Последние разработки в области браузерной безопасности (The Cutting Edge of Browser Security) Дизайн Дайджест продуктового дизайна, апрель 2016 Material Design: философия и практика «Веб-брутализм»: Зачем разработчики создают простые и некрасивые сайты в стиле 90-х годов Вдохновляясь сообществом — как проходил редизайн Instagram С чего начать, чтобы стать дизайнером Instagram представил новый дизайн и «радужную» иконку приложения Дизайн высоконагруженных интерфейсов, управляемых данными Дизайн умных уведомлений в мобильных и веб-интерфейсах Новинка от Google — Material motion (Material motion) Эволюция дизайна, или я как стал лучшим дизайнером (The Evolution of Design. Or how I became a better designer) 8 популярных ошибок, которые допускают начинающие дизайнеры (8 Super Common Mistakes That Beginner Designers Make) Набор для работы с ретиной, который вы всегда хотели в Photoshop (The Retina Asset Workflow You’ve Always Wanted For Photoshop) Полное введение для новичков по поиску в UX (Complete Beginner’s Guide to UX Research) Темная сторона UI. Преимущества темного фона (Dark Side of UI. Benefits of Dark Background) Работы на Dribble, посвященные новой иконке Instagram Дизайн новой иконки для Instagram, вдохновленный сообществом (Designing a New Look for Instagram, Inspired by the Community) Тренды веб-дизайна 2016-го: полное руководство (Web Design Trends 2016: The Definitive Guide) Простые шаги для улучшения дизайна иконок (Easy Steps To Better Icon Design) Дизайн Eventbrite: эволюционный процесс (Eventbrite Design: An evolutionary process) Как мы сделали редизайн нашего приложения (How We Redesigned Our App) Как Duolingo делает дизайн, используя психологию (How Duolingo Designs with Psychology in Mind) Uber для возрастных и плохо видящих людей (Uber for Seniors and Poor Visibility) Юзабилити эвристика для ботов (Usability Heuristics for Bots) Научно обоснованные факты о цветах (50 Hard Science-Backed Facts About Color) Всегда показывайте свою работу: почему дизайнеры должны писать на стенах (и ты в том числе) (Always Show Your Work: Why designers write on the walls (and why you should, too)) OpenBazaar в деталях: брендинг и эстетика (OpenBazaar in Detail: Branding & Aesthetics) Курируемая коллекция работ цифровых художников (Talented web artists exhibit code-driven art) В чем назначение логотипов? (What is the purpose of a logo? It’s more than design…it’s about purpose) Никогда не показывайте дизайн который не был протестирован на пользователях (Never Show A Design You Haven’t Tested On Users) Основные и вспомогательне кнопки для выполнения действий (Primary & Secondary Action Buttons) Быстрый совет: как использовать набор инструментов Symbol в Sketch (Quick Tip: How to Use Sketch’s Updated Symbols) Как обновленный инструмент Symbols в Sketch улучшит процесс работы (How Sketch’s New Symbols Will Improve Your Workflow) Illustrator за 60 секунд: как использовать инструмент Width (Illustrator in 60 Seconds: How to Use the Width Tool) Логотипы со скрытыми сообщениями (15 Logos With Hidden Messages) Как использовать сходные шрифты (How to Use Clashing Fonts) Новости Google Translate теперь работает внутри любого приложения Android В YouTube появится встроенный мессенджер Alphabet снова стал самой дорогой компанией в мире В Google Photos появились комментарии и умные подсказки Github вводит неограниченные приватные репозитории, повысив цены для организаций Топовые esports команды создали новую киберспортивную лигу Релиз Electron 1.0, платформы создания приложений на базе движка Chromium Amazon запустил собственный видеохостинг – конкурента YouTube Mozilla расширила область действия системы грантов открытым проектам Mozilla в суде добивается раскрытия уязвимости, применённой в атаке ФБР на Tor Browser Facebook запускает поддержку панорамных фотографий Дизайнер голливудских фильмов будет разрабатывать скафандры для SpaceX Искусственный интеллект IBM Watson будет бороться с киберпреступностью Занимательное Хабрахабр ? 10 лет Креативность: пять мифов, которые давно пора развеять Тестирование Hyperloop доказало — будущее все еще будет скучным «Прощай смартфон, прощай лептоп!»: экскурсия по самому загадочному IT-стартапу Magic Leap Все без исключения учитесь программировать. Пожалуйста Не учитесь программировать, пожалуйста Наглядная математика: как рассчитать ценность пользователя с помощью интегралов Ах, этот глупый «умный» дом! В Неваде испытали Hyperloop Hyundai разрабатывает собственный костюм «Железного человека» Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять. Дайджест за прошлую неделю. Материал подготовили dersmoll и alekskorovin.