Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
![](https://habrastorage.org/r/w1560/files/782/953/fe4/782953fe4ee0466895831caf12862d8b.png)
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
![](https://habrastorage.org/files/782/953/fe4/782953fe4ee0466895831caf12862d8b.png)
Веб-разработка |
CSS |
Javascript |
Браузеры |
Дизайн |
Новости |
Занимательное |
Веб-разработка
- Видео с мастер-класса «Автоматизация для фронтендеров проведённый в Академии HTML Робертом Харитоновым
«Автоматизация процессов обучения» . Выступление Алексея Малейкова с конференции IT NonStop Петербург
«Responsive Images» — Bruce Lawson из Opera о правильном использовании размеров изображений и <picture> на Awwwards Conference Barcelona 2015
Toolsday — 20-минутный подкаст про инструменты для веб-разработчиков
Создание альфа-канала для JPEG с помощью SVG
Введение в Google’s Accelerated Mobile Pages (AMP)
Более двадцати документов и руководств для Front-end разработчиков (№. 6)
Динамические сайты со скоростью статических: искусство кеширования веб-сайтов (Dynamic sites at static speed: the art of website caching)
Big Rig — система для тестирования производительности
Срез производительности: редизайн Ryanair в 2015 (Performance snapshot: Ryanair’s 2015 redesign)
The Web Animations API. Быстрое введение от James Y Rauhut.
Введение в Canvas
Новые инструменты Firefox для работы с памятью
Как переиспользовать SVG Text c помощью элемента tref (How To Reuse SVG Text With The tref Element)
Воссоздание логотипа Google с помощью SVG и GreenSock
- ServiceWorker:
Мой первый Service Worker. Jeremy Keith делится впечатлениями
Встроенные в html SVG <img> c помощью ServiceWorker (Inline SVG <img> using ServiceWorker)
Делаем простой сайт доступным оффлайн с помощью ServiceWorker (Making a Simple Site Work Offline with ServiceWorker)
Создаем прогрессивное приложение с помощью ServiceWorker (Making a Progressive App with ServiceWorker)
- Эффектный веб:
- Еженедельная подборка красивых эффектов на CSS/SVG/JS #12
Креативная анимация гамбургер-иконки меню в SVG формате с библиотекой Segment (Animating an SVG Menu Icon with Segment)
Интерактивная презентация интерьера комнаты от Mary Lou
Электрический эффект с помощью CSS и Javascript
Концепт разноцветного динамического календаря с помощью CSS
Анимация волка
Рендер преломлений света (JavaScript и WebGL)
Анимированные GitHub-уголки
CSS
- Так ли уж нужна специфичность в CSS?
- Флексбокс для интерфейсов: основные паттерны
- Краткое руководство по PostCSS: продолжаем обзор плагинов
- Начинаем работу с SASS и Bourbon
- 5 способов улучшить Sass с помощью Bourbon
Не используйте генераторы градиентов! (Don't use gradient generators )
Написание CSS в растущих командах (Writing CSS on Growing Teams)
CSS в современном мире (CSS in the Modern World)
Эффекты CSS для изображений #6: инфракрасная фотография (CSS Image Effects #6: Infrared Photography)
PostCSS глубокое погружение: как создать собственный плагин (PostCSS Deep Dive: Create Your Own Plugin)
PostCSS становится быстрее в полтора раза
eBay Tech Blog: как наш CSS фреймворк помогает обеспечивать соблюдение доступности
Шаблоны для масштабирования CSS (Patterns for scaling CSS)
Opacity A to Z
Использование системных шрифтов в веб дизайне: быстрое практическое руководство (Using System UI Fonts In Web Design: A Quick Practical Guide)
JavaScript
Агрегация и осведомленность
- ES6:
Обзор ES6 в 350 пунктах. Часть вторая
- ES6: стрелочные функции изнутри
- ES6: литералы шаблона изнутри
- Краткая история инструментария ES6
Использование ES6 и ES7 в браузере, с Babel 6 and Webpack (Using ES6 and ES7 in the Browser, with Babel 6 and Webpack)
Топ 10 особенностей ES6, о которых должен знать каждый JS разработчик (Top 10 ES6 Features Every Busy JavaScript Developer Must Know)
Haskell в ES6: часть 1 (Haskell in ES6: Part 1)
What’s in ECMAScript 2016 (ES7)?
JavaScript съедает мир (JavaScript Is Eating The World)
Десять вопросов, задаваемых на собеседовании
Функциональное программирование в Javascript (Functional Programming in Javascript)
Шесть вещей, которые вы должны знать о Babel 6 (The Six Things You Need To Know About Babel 6)
Что нового в TypeScript – Bill Ticehurst (What's new in TypeScript – Bill Ticehurst)
Использование нативного HTML5 Drag and Drop API (Using HTML5’s Native Drag and Drop API)
Распознавание близости лица с JavaScript (Face Proximity Detection with JavaScript)
Обзор JavaScript шаблонизаторов (An Overview of JavaScript Templating Engines)
Десять привычек счастливого Node-хакера (2016) (10 Habits of a Happy Node Hacker (2016))
Опрос в Twitter-е: используете ли вы точку с запятой?
Ускорение производительности JavaScript с asm.js (Supercharging JavaScript performance with asm.js)
Шахматная партия: Asm.js выигрывает у обычного JS (Asm.js Chess Battle)
- Фреймворки:
Matreshka.js — Три возможности
- AngularJS советы от команды PayPal
Анатомия больших приложений на Angular (Anatomy of a large Angular application)
Создание компонентов в Angular 2 с Typescript и ES5 (Creating Components in Angular 2 with Typescript and ES5)
Внутренности AngularJS, часть 2 (AngularJS’ Internals In Depth, Part 2)
Приступаем к работе в Angular 2 — Rado Kirov и Naomi Black (Getting started in Angular 2 – Rado Kirov and Naomi Black)
Выдержки из AngularConnect 2015 (Highlights from AngularConnect 2015)
Keynote — Brad Green, Igor Minar и Jules Kremer с конференции AngularConnect 2015 (Keynote – Brad Green, Igor Minar and Jules Kremer)
Rollup: как мы использовали React.js и npm для разделения UI кода в AdRoll (Rollup: How we use React.js and npm to share UI code at AdRoll)
Jeff Morrison — Flow, или как я перестал беспокоиться и проверять типы в React коде (Jeff Morrison — Flow or how I learned to stop worrying and typecheck my React code)
- Плагины и библиотеки:
- Три плагина, которые сделают Single Page Application лучше
antimoderate — библиотека для прогрессивной загрузки изображений в стиле Medium
jsCodeStructure — анализ структуры вашего JS проекта (отношения между JS файлами)
drool — автоматизированное определение и анализ утечек памяти
wu.js — библиотека предоставляющая функции высокого порядка (подобные map, filter, reduce) для ES6 итераторов
gridmanager.js — конструктор колонок и строк в сетках Bootstrap/Foundation, а так же встроенный редактор
notie.js — простой плагин без зависимостей для создания уведомлений (alert/growl style)
Браузеры
- Поддержка Google Chrome на Windows XP/Vista прекратится в апреле 2016 года
- Браузер Firefox доступен на iOS всем желающим
- 6 функций, которые должны быть в каждом браузере
- Уязвимость Chrome на Android позволила взломать телефон одним кликом по ссылке
- Тестирование Firefox 43-beta и Firefox Developer Edition 44
Сайты с интересным дизайном и функциональностью
- Креативный сайт-портфолио студии Олега Чулакова
- Сайты, сделанные в Бельгии
- Сайты, по которым можно путешествовать
resume.shreyanschandak.com — интерактивное резюме со скроллингом в разных направлениях, анимацией и забавной рисовкой
loremipsum.ro — вырвиглазный сайт в олдскульном стиле
theforecaster-interactive.com — сайт, стилизированный под газету
epicurrence.com — вертикальный скролл-сайт с интересным параллаксом и нестандартными эффектами
mksgraphisme.com — анимированный скролл-сайт в стиле Nintendo
22 креативный сайта с необычными лейаутами
wove.com/ — впечатляющий презентационный сайт
История автомобилей — большое количество скролл-эффектов
Дизайн
Неправильно использованные шаблоны мобильного интерфейса
Шрифт Lato: Sketch vs Android Studio
- 284 лекции по UI- и веб-дизайну собрали на одном сайте
Вдохновляющие примеры анимации логотипов (Inspiring Examples of Subtly Animated Logos in Web Design)
Использование A/B тестирования для улучшения конверсии вашего сайта (Using A/B Testing To Improve Your Site Conversion Rate)
Почему веб-графика может уменьшить количество читателей (Why web graphics can reduce readership)
- Тени для создания объема в веб-дизайне
Важность руководства при презентации прототипов (The Importance Of Guidance When Presenting Prototypes)
Как пяти-центовая накладка на глаз сделала историю на миллион (How a 5-cent Eye-Patch Created a Million Dollar Story)
Девять пунктов чтобы убедиться что тренды дизайна не сдерживают вас (9 Ways That Design Trends Are Holding You Back)
Дизайны приборных панелей (Showcase Of Beautiful Dashboard UI Designs)
Чему я научилась, делая небольшие вещи в Facebook-е (What I’ve Learned Designing Small Things at Facebook)
Длительное воздействие плоского дизайна: как тренд медленно уменьшает эффективность пользователей (Long-Term Exposure to Flat Design: How the Trend Slowly Decreases User Efficiency)
Если это не iPhone, это не iPhone (If it’s not an iPhone, it’s not an iPhone)
Пантон смузи
Девять состояний дизайна (The Nine States of Design)
Когда простота не является решением — дизайн для сильно отличающейся аудитории (When Simplicity Isn’t the Answer — Designing for Vastly Different Audiences)
Как я работаю с цветом (How I Work with Color)
Советы по нахождению идеального изображения (3 Pro Tips For Finding the Perfect Image)
Давайте поговорим о белых иконках приложений (Let’s talk about white app icons)
- Графические редакторы
- Шрифтовые иконки в Sketch и Grunt
- Плагин State Switch Master — мастер переключения состояний
- Рисуем кисти солнечных лучей в Adobe Photoshop
Photoshop за 60 секунд: бесшовные паттерны (Photoshop in 60 Seconds: Seamless Patterns)
Лучшие Photoshop-плагины для UI дизайнeров (Top Photoshop Plugins for UI Designers)
Как создать трио няшных карандашей в Adobe Illustrator-е (How to Create a Trio of Cute Pencil Characters in Adobe Illustrator)
- UI/UX:
Улучшайте ваши способности убеждения, чтобы преуспеть как UX дизайнер (Improve your persuasion abilities to succeed as a UX designer)
- Будущее UI за командной строкой
UX в долгосрочной перспективе (Longterm User Experience)
Адаптируя эмпатические карты для UX дизайна (Adapting empathy maps for UX design)
Как сохранить согласованность UX продукта? (How to maintain product UX consistency?)
Подборка бесплатных дизайнерских печенек
- Бесплатные фото людей со смартфонами
photostockeditor — фото в высоком разрешении
Бесплатные промо-фоны и цветовые растяжки (Free download: 49 promo backdrops and gradients)
Мокапы для демонстрации логотпиов (60+ Free Logo PSD Mock-up Templates)
Адапитвный шаблон интернет-магазина Aloha (Aloha Shop Responsive Template)
15 Бесплатных наборов иконок с жестами (15 Free Gesture Icon Sets for Mobile Developers)
20 плоских векторных иконок (Freebie: 20 Flat Vector Icons)
Набор иконок Voyage (40 иконок, AI, EPS, SVG, PNG) (Freebie: Voyage Icon Set (40 Icons, AI, EPS, SVG, PNG))
Набор иконок Creative Fields (Creative Fields Icon Set)
Пять наборов веб иконок (5 Free Sets of Web Icons to Download Today)
Три десятка полезных иконочных набора (30 Free Icons Sets That You Must Have)
FontBase — программа для управления шрифтами для Windows. (FontBase is a blazing fast, beautiful and free font manager for Windows.)
Три десятка необычных кричащих шрифтов (30+ Quirky, Free Fonts We’re Shouting Out)
LIQUIDE — шрифт без засечек (LIQUIDE — Free Typeface)
Новости
- Индексирующий робот Яндекса начал использовать JavaScripts и CSS
- WSJ: Apple запустит сервис по мобильному переводу денег между пользователями
- В Google Maps добавили офлайновую навигацию и поиск
- Apple закроет Beats Music 30 ноября
- Производительность Apple A9X сравнима с процессорами Intel Core i5
- У Apple Music и Spotify появился конкурент — YouTube Music
- Большое ноябрьское обновление Windows 10: что нового
- Microsoft запустила онлайн-анализатор эмоций по фото
- Вскоре Gmail будет предупреждать о письмах, пришедших по незащищенному соединению
- «Яндекс» закроет Rich Content API как непопулярный сервис
- «Яндекс» обратился в Еврокомиссию по поводу монополии Google в Android
- Facebook представил новостной сервис-приложение Notify
- В Google появился единый сервис для управления личными данными
- В Нью-Йорке свой e-mail получат 200 деревьев
Занимательное
- 18-ти летний тинейджер снял короткое видео про СТО и выиграл $400 тысяч от Марка Цукерберга
- Bitcoin против BitcoinXT: главная криптовалюта близка к аннигиляции
- Япония запустит собственный аппарат к Луне
- 8 самых дорогих сделок в истории IT-индустрии
- Почему я не пользуюсь smart-часами?
- Зачем Элон Маск, Марк Цукерберг и Сергей Брин вкладывают деньги в космос
- Советское радиационное убежище: намного круче и сложнее, чем кажется
- Хакерские атаки в кино и в реальности
10 самых популярных рекламных роликов на YouTube в октябре
- Кончина Rutracker и полезные выводы
Крутой косплей с Blizzcon 2015
- BlizzCon 2015 — два дня одной мультивселенной. Репортаж
Guide to Tackle Common Issues with UX Design
uMake — Наброски в 3D становятся реальностью (Sketching in 3D)
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.