Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и материалы из области фронтенда и дизайна.
В связи с нововведениями в создании постов и разделением их на раздельные потоки разработки и дизайна, текущий пост будет последним в таком формате.
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
В связи с нововведениями в создании постов и разделением их на раздельные потоки разработки и дизайна, текущий пост будет последним в таком формате.
| Клиентская разработка |
| 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)
- Анимированные эффекты различных переходов (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.
Поделиться с друзьями
dom1n1k
К какой статье относятся вон те разноцветные линии в тизере, похожие то ли на брызги краски, то ли на light painting?
alexzfort
Это из статьи «Best Practice for HTTP2 Front-end deployments»