Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
| Веб-разработка |
| CSS |
| Javascript |
| Браузеры |
| Дизайн |
| Новости |
| Занимательное |
Веб-разработка
FLIF — свободный формат сжатия изображений- Кризис ожирения сайтов
- Что нового в WordPress 4.5?
- SVG:
- Спойлер: Вставка SVG иконок одним единственным способом
Как создать иконочную систему с помощью SVG symbols (How to create an icon system using SVG symbols)- Облако текста на SVG с неровными выгибающимися краями (Staggered and Fainting Text with SVG)
- SVG Fundamentals: XML and Versioning
- Parallax жжет: превращение плоских фотографий в объемные с помощью SVG (Parallax Burns: Converting Photographs from 2D to 3D with SVG)
- Техническое руководство по SEO (A technical guide to SEO)
- 5 трендов SEO, о которых вы должны знать в 2016-м (SEO Trends of 2016: 5 Trends You Must Know This Year)
- Создание Bixa Color, цветного шрифта для веба (Building Bixa Color, a color font for the web)
- Отладка Service Workers и Push с помощью Firefox DevTools
- Service Workers: сохраняйте пользовательскую информацию с помощью Save-Data Header (Service Workers: Save your User's Data using the Save-Data Header)
- Аудит производительности m.imgur.com ([m.imgur.com] page load performance #1)
- Google’s AMP: забавное и удобное руководство (The Fun and User-Friendly Guide to Accelerated Mobile Pages)
- Песочница компонентов руководства по стилю (A Style Guide Component Playground)
- Клик правой кнопкой на логотипе для вывода диалога загрузки файлов (Right Click Logo to Show Logo Download Options)
- Дизайн в инженерном море (Design in a Sea of Engineering)
- Медиа:
- Подкаст Веб-стандарты, Выпуск №6: флексбокс, типографика, быстродействие, блютус и критика БЭМа
Видео докладов с Я.Субботника 2016- Видео с митапа Girls Not Bombs #6
- Эффектный веб:
- Еженедельная подборка красивых эффектов на CSS/SVG/JS #28
- Фильтры в инстаграммном стиле с помощью HTML5 Canvas (Instagram-style filters in HTML5 Canvas)
- Эффект размытия изображений во время загрузки в стиле Medium (Medium site like Image loading blur effect)
- Очередные креативные лоадеры с помощью Rebound и Canvas (Spring Loaders with Rebound and Canvas)
- Адаптивный пиксель-арт
CSS
- Как создать анимацию и переходы с помощью Motion UI
- Sass: передача блоков кода с помощью примесей и выбор межу mixin и extend
- Чиним сломанный текст с помощью box-decoration-break (Fixing Broken Text with box-decoration-break)
- Использование `rem` для задания глобальных размеров; `em` — для задания локальных (Use `rem` for Global Sizing; Use `em` for Local Sizing)
- Люди не меняют дефолтное значение в 16px для шрифта в их браузере (People don't change the default 16px font size in their browser)
- Продвинутые CSS селекторы, о которых вы никогда не знали (Advanced CSS Selectors you never knew about)
- Импровизируем с отзывчивыми изображениями в ожидании браузерной поддержки (Waiting for browser support: makeshift responsive images)
- Как сделать пирамидную структуру c помощью CSS (How to create a pyramid layout with CSS)
- Быстрый совет: исправление проблемы с font-weight в состоянии наведения (Quick Tip: Fixing the font-weight Problem on Hover States)
- Прибираем в CSS-коде (Cleaning Up a CSS Codebase)
- Добавляем стили для битых изображений (Styling Broken Images)
- Типографика на базе относительных единиц размеров видимой области (Viewport Unit Based Typography)
- Инструменты и ресурсы для создания более значимой веб-типографики (Tools And Resources For A More Meaningful Web Typography)
- “Живое” руководство по стилю — Pattern-Lab (The “Living” Style Guide — Pattern-Lab)
- balloon.css — простые всплывающие подсказки на CSS (Simple tooltips made of pure CSS)
- Читайте книгу ‘Enduring CSS’ онлайн на ecss.io
JavaScript
- Тестирование JS. Кармический Webpack
- Google обновил рекомендации по индексации сайтов на JavaScript
- Продвинутое использование метода reduce
- 5 советов по написанию более поддерживаемого JS кода (5 Tips For Writing More Maintainable JavaScript Code)
- Изучение нативных функций JS и как их использовать (Learning JavaScript Native Functions and How to Use Them)
- Простой сайт на Node.js – 2016 Edition
- Создатель JavaScript Brendan Eich: WebAssembly меняет правила игры (JavaScript founder Brendan Eich: WebAssembly is a game-changer)
- Фреймворки:
- На освоение React мне потребовалась всего неделя, а чем вы хуже?. Перевод статьи I Learned How to be Productive in React in a Week and You Can, Too сообществом css-live.ru
- Выпущен React v15.0 RC (React v15.0 Release Candidate)
- Быстрый совет: создание React-компонента видео-проигрывателя (Quick Tip: Build a Video Player Component in React)
- enclave — более простая компиляция React приложений
- Горячая перезагрузка в React (Hot Reloading in React)
- Конец магии Meteor (The end of the magic of Meteor)
- Создание UI для Ember приложения (Building a UI Around an Ember Data App)
- Angular — это паттерн проектирования (Angular is a Design Pattern)
- Аутентификация в Angular 2 (Authentication in Angular 2)
- madewithangular — коллекция сайтов, сделанных с использованием AngularJS
- react-mt-svg-lines — компонент для линейной анимации с обводкой в SVG
- react-key-handler — React-компонент для обработки клавиатурных событий (React component to handle key events )
- ES6/ES2015:
- ES6 в деталях: стрелочные функции
- Самые полезные особенности ES6/ES2015 (The most useful features of ES6/ES2015)
- Пять советов по улучшению Вашего JS с ES6 (5 Tips To Improve Your JS with ES6 — Crater Conf Talk)
- Возможно, нам стоит понизить уровень JavaScript (Maybe we could tone down the JavaScript)
- JavaScript в 2016-м: за пределами гармонии (JavaScript in 2016: Beyond Harmony)
- В защиту JavaScript классов (In Defense of JavaScript Classes)
- Как передать значения переменных из SCSS в JavaScript (How To Pass Variables from SCSS to JavaScript)
- Создание 3D движка с JavaScript (Building a 3D Engine with JavaScript)
- Нервозность от JavaScript инструментария — помощь под рукой (JavaScript Tooling Anxiety — Help Is at Hand)
- JavaScript Unit Testing Performance
- JS Bits — концептуальные JavaScript-сниппеты
- freezeframe.js — скрипт, ставящий на паузу анимированные GIF-ки
- babylon — JavaScript парсер
Браузеры
- Релиз Firefox 45, подробности для разработчиков в блоге Марата Таналина
- В ночных сборках Firefox появилась поддержка синтеза речи
- Opera выпустила превью-версию браузера со встроенным блокировщиком рекламы
- Microsoft добавила баннер по поводу обновления до Windows 10 в обновление безопасности для Internet Explorer
- Chrome 49: Custom CSS properties, background sync and save-data client hint
Сайты с интересным дизайном и функциональностью
- Креативный сайт Haruki Murakami
- tse-foundation.org — сайт со сменой цветовой гаммы при скроллинге
- aaronporter.co — креативное сайт-портфолио дизайнера с нестандартными переходами
- Publicis90 — сайт с замечательной плавной скролл-анимацией
- 12dishes.com — кулинарный сайт с нестандартной навигацией и симпатичными эффектами
- 56.digital — вертикальный скролл-сайт с трехмерным фоновым элементом и эффектами при промотке
- Лучшие интерактивные сайты за 2016-й
- Сайт с погодными эффектами
- I/O 16 coming
- Новые лучше сайты-портфолио, март 2016 (The best new portfolio sites, March 2016)
Дизайн
- Дайджест продуктового дизайна, февраль 2016
- Состояния интерфейса: первый экран, индикатор загрузки и сообщения об ошибках
- Влияние интерфейса на рост сервиса: разбор iOS-приложения Telegram
- Использование Sympli для взаимодействия с разработчиками
- Дизайн с осмысленными данными
- Графические редакторы:
- Плагин для удобной конвертации артбордов в PDF
- animatemate — плагин для создания анимации в Sketch
- Основы видео слоя в Photoshop-е (Photoshop Video Layer Essentials)
- Пять советов для сохранения SVG для веба в Illustrator-е (5 Tips for Saving SVG for the Web with Illustrator)
- Illustrator за 60 секунд: как использовать обрезающие маски (Illustrator in 60 Seconds: How to Use Clipping Masks)
- Существует ли граница видимой области в вебе? (Is there a fold on the web?)
- Будущее диалогового UI принадлежит гибридным интерфейсам (The Future of Conversational UI Belongs to Hybrid Interfaces)
- Мифы UX дизайна/продуктового дизайна/или как там они это называют на этой неделе (The Myths of UX Design/ Product Design/Whatever They Call It This Week)
- Чем меньше, тем больше – минималистичный и простой веб дизайн (Less Is More – Minimalist And Simple Web Design)
- Семь лучших стратегий использования фото в веб-интерфейсах (The Seven Best Strategies For Using Photos in Web Interfaces)
- Как просто справляться с тенями с режимами перехода одного цвета или оттенка в другой (How to Shade Easily With Layer Blend Modes)
- Лучшие тренды мобильного дизайна для 2016-го (Top 5 Breakout Mobile Design Trends for 2016)
- LIQUID BRANDS — стилизация известнейших брендов
- Мгновенный поиск логотипов (Instant Logo Search)
- Высокоточное сотрудничество и философия дизайна в Intercom (High-Fidelity Collaboration and Design Philosophy at Intercom)
- Приборная панель в Stripe (Stripe Dashboard)
- Детали типографики избранных сайтов за февраль 2016 от Typewolf (The Typographic Details Behind Typewolf’s Favorite Sites of February 2016)
- Впечатляющие концепты Material-дизайна (Distilling 5 Incredible Material Design Concepts)
- Введение в Material-дизайн (An Introduction To Material Design)
- Отличные комбинации шрифтов (Great font combinations)
- Иллюстрации паттернов различных арабских стран (18 Free Various Illustration Patterns of Arab Countries)
- Вдохновляющие качественные вайрфреймы (Quality Wireframes Inspiration)
Подборка бесплатных дизайнерских печенек
- Бесплатные фотографии молний для фотоманипуляций
- Бесплатные текстуры разводов чернил и красок
- Шаблоны для флаера и постера к Дню святого Патрика (Freebie: 5 Free Flyer & Poster Templates for St. Patrick’s Day)
- Мокапы с изображением Apple Watch (20 Free Apple Watch Mock-up Templates)
- Элегантные мокапы для демонстрации дизайна логотипов (PSD, AI, EPS) (Elegant Logo Mockup Templates – Free PSD, AI, EPS Download)
- Набор иконок посвященных окружающей среде (AI, SVG, PNG) (Freebie: Environmental Icons (AI, SVG, PNG))
- Набор контурных иконок со стрелками (Line Arrow Icons)
- Иконки транспорта и путешествий (Icons for getting around)
- http://open-foundry.com/ — сервис с бесплатными веб-шрифтами
- Коллекция шрифтов (Collection of Free Fonts and Typefaces)
- Романтический коллиграфический шрифт Olesia (Free Download: Olesia Font)
- Коллекция шрифтов за февраль 2016-го (Discover 36 free fonts From February 2016)
Новости
- Разработка MIT позволяет ускорить загрузку веб-страниц на 34%
- Google запустила мобильный сервис по планированию путешествий Google Destinations
- Основатель анонимного форума 4chan устроился на работу в Google, чтобы работать над стриминговыми и фотосервисами
- ФБР против Apple: Президент США выступил против абсолютной защиты смартфонов от взлома
- ИИ Google окончательно покорил го, одержав третью победу над Седолем. Следующая цель — StarCraft
- Google запускает проект Chrome Music Lab для создания музыкальных экспериментов прямо в браузере
- Новая мировая карта расскажет о количестве регистраций в национальных доменах
- Первый релиз интегрированной среды разработки Eclipse Che, Компания Microsoft присоединилась к организации Eclipse Foundation
- В выдаче Google можно услышать голоса 19 животных
- Google несколькими способами борется с вирусом Зика
- Google переносит свои блоги на новый домен
Занимательное
- Facebook бедных. Чем занимаются в соцсетях китайские крестьяне и чилийские шахтеры
- Как проходит собеседование в Medium
- О том, как эволюционируют Атласы
- Сергей Мурашов (Slack): «Наша капитализация, может, завышена, но не сильно»
- Карта мира доменов, переворачивает все вверх ногами
- Каково это — быть уволенным из Facebook
- Почему уход из Microsoft на низкооплачиваемую работу стал для меня глотком свежего воздуха
- IT-гиганты объединились в борьбе против кандидата в президенты США Дональда Трампа
- Как быстро самые популярные в мире программы набирали 1 млрд пользователей — инфографика
- Самый полный обзор новых функций Android N
- 10 браузерных игр, в которые можно поиграть, пока куда-то ушел начальник
- Бесконечная история блокировщиков рекламы (A Never-Ending Story On Ad-Blockers)
- Chrome Music Lab – как рождается музыка
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
spmbt
"ES6 в деталях: стрелочные функции" — когда-то эту же статью перевели здесь: http://css-live.ru/articles/es6-iznutri-strelochnye-funkcii.html (01.09.2015)
alexzfort
Да, и мы ее тоже включали в сентябрьский дайджест.
Ну, как говорится, повторение — мать учения, тем более полгода прошло, а стрелочные функции все еще актуальны. Кроме того, в рунете не так уж много серьезных тематических ресурсов с качественных авторскими и переводными статьями, и мы стараемся поддерживать их по возможности. Всё на благо комьюнити :)