Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
← Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin
| Веб-разработка |
| CSS |
| Javascript |
| Браузеры |
| Занимательное |
Веб-разработка
- Подкаст «Фронтёрки», выпуск №5: Зарема Халилова, митапы и смерть jQuery
- Подкаст Веб-стандарты, Выпуск №66: Из React в Sketch, из HTML в WebGL, игры на CSS, гриды, HTML Шорты, дизайнеры и код в Яндексе.
- Подкаст Веб-стандарты, Выпуск №67: Бета Chrome 59, Safari TP 29, Samsung на десктопе, WebP торт, HTML Шорты, Normalize.css, CSS 5 уровня, CSS в JS, ES-модули.
- Фронтенд по фэн-шуй. Часть 1
Как проверить доступность цветов, — новый выпуск A11ycasts #17- “UX drives all of this.”. Крис Койер рассуждает об усложнении веб-разработки последнее время
- Начало работы с Relay “Modern” (клиентской библиотекой GraphQL от Facebook) для создания изоморфных веб приложений
- Как работает ContextReplacementPlugin в webpack
- Обновления:
- Вышел npm@5 beta, можно ознакомиться со множеством обновлений
- Релиз Autoprefixer 7: поддержка PostCSS 6 и Browserslist 2, улучшенная производительность, уменьшение размера node_modules и многое другое
- Релиз PostCSS 6.0: дропнута поддержка Node.js 0.12, поддержка apply и меньшее потребление памяти
- Презентация d3.express: интегрированная среда для реактивной разработки
- Производительность:
- pageweight — посмотрите, как изображения влияют на скорость вашей страницы с помощью этого онлайн инструмента
- Подождите, а WebP действительно стоит того. Zach Leatherman разбирается с новым форматом изображений в вебе
- Молниеносно быстрые сайты благодаря различным вариантам предзагрузи (Prefetching)
- speedracer — коллекция метрик производительности для вашей библиотеки/приложения
- Как настроить поддержку AMP в WordPress
- От AMP к PWA: Progressive Web AMPs
- SVG:
SVG спрайт с webpack одной строкой- SVGito: маленькие оптимизации для SVG
- Три способа уменьшения размера SVG файлов с помощью SVGO
- Как создать и редактировать SVG спрайты
- Визуализация функций мозга в SVG
- SVG текст маскирующий видео
- Морфинг иконок в кнопках по клику
CSS
- Очередные HTML Шорты: Зачем задавать картинку через background-image, если можно просто написать background?
- Обратитесь к спецификации. Перевод вступительной заметки приглашенного эксперта рабочей группы CSS Rachel Andrew к серии Refer to the spec.
- Первый черновик CSS 5 уровня
- Является ли CSS-in-JS действительно плохой техникой для UX?
- Нативная валидация форм, ч. 1. Подробный разбор от Peter-Paul Koch
- Терминология набора правил в CSS
- Подробно о свойстве backdrop-filter, позволяющем применять фильтр к контенту за элементом
- CSS Animations vs Web Animations API: сравнение и примеры
- mini.css — минималистичный и отзывчивый CSS фреймворк
- iotacss — еще один масштабируемый SASS-фреймворк, использующий принципы OOCSS. Введение в iotaCSS
- Решение проблем, блокирующих рендер CSS
- Пошаговое руководство по созданию всплывающих подсказок на чистом CSS
- Упорядоченные списки с помощью юникод символов
- Сайты, использующие CSS Grid на продакшене
- Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First. Полезные медиа-запросы в спецификации Media Query Level 4
- Почему Facebook стоит поискать других писателей CSS
- CSS Custom Properties:
- CSS Custom Properties и темизация
- Выигрываем с CSS переменными
- CSS Custom Properties — ежедневное использование
JavaScript
- Prepack — новый инструмент от Facebook, делающий исполнение JavaScript кода быстрее. Cравнение Prepack и Svelte, а также webpack плагин для prepack
- 4 видео с UralJS #3
- Элементы JavaScript стиля. Код должен быть простым, а не упрощенным.
- Python для разработчиков JavaScript
- Глоссарий современных концептов JavaScript: часть 2
- Почему я двигаюсь к веб-компонетам и не оглядываюсь назад
- Введение в Flow, выступление Benjamin Reid на Bristol JS
- ES2015+:
- Ужасный import кракен — как использовать ES6-модули и не сойти с ума
- Как продвигается внедрение ES6 модулей в Node.js
- ECMAScript модули в браузерах
- Практическое руководство по использованию fetch() и reduce() для извлечения и форматирования данных со внешних API
- Асинхронный JavaScript с async/await. Бесплатный курс на egghead
- JavaScript: стрелочные функции для начинающих
- React:
- Подкаст «Пятиминутка React» #13 — Redux Business Logic
- Разработка вашего первого Progressive Web App c React
- 10 известных приложений, использующих сегодня ReactJS
- Анимированные переходы по страницам в React
- Оптимизация производительности React с помощью компонентов без состояния
- react-native-masonry — react-native компонент для вывода сетки изображений в стиле Mansory с поддержкой динамических колонок, прогрессивной загрузки изображений, изменения ориентации устройства и обработчиками событий нажатия
- SVG в JSX — конвертер SVG в валидный React SVG, написанный на Svelte
- Как создать ToDo приложение с React, Redux и Webpack
- Angular:
- Vue:
- Когда VueJS не может помочь тебе
- Обновление до Vue.js 2.3
- Концепт минималистичного блога с креативными переходами на Vue.js 2
- Переход с Angular на Vue: вьюдивительное приключение
- Семь способов задания шаблона компонента во VueJS
- vue-infinite-loading — плагин для беконечной прокрутки под Vue.js 1.0 и Vue.js 2.0
- Libs & Plugins:
- SmartPhoto.js — новая библиотека для создания отзывчивых галерей, отлично подходящая для мобильных устройств
- pkg — CLI упаковщик проекта на Node.js в исполняемый файл
- Начало работы с Riot.js
- Typefont — JavaScript проект для распознавания текста в изображениях.
- spector — с легкостью изучайте и устраняйте неполадки в WebGL сценах
Браузеры
- Браузер Microsoft Edge и поисковик Bing, установленные в Windows 10 S по умолчанию, нельзя заменить
- Fathom, новый JS-фреймворк от Mozilla, позволит браузерам «оценивать» веб-страницы с точки зрения человека
- Microsoft тестирует функцию безопасного выполнения браузера Edge в виртуальной машине
- Обновление Firefox 53.0.2 и 52.1.1
- Samsung DeX привносит новое разрешение в мобильный веб
- Технические подробности Safari Technology Preview 29
- Работа с Chrome в Headless Mode
Занимательное
- Массовый фишинг с поддельными ссылками на Google Docs возымел ряд последствий
- Причиной недавней фишинговой атаки «Google Docs» стала уязвимость в OAuth, обнаруженная 6 лет назад
- Microsoft представила Windows 10 S для образования. Что это за система?
- 26% взрослого населения развитых стран не умеют пользоваться компьютером
- Первые спутники SpaceX для раздачи интернета отправятся на орбиту в 2019 году, теперь планируется запустить почти 12 тыс. аппаратов
- Google и Facebook контролируют 20% мировых доходов с рекламы
- Microsoft перестала инвестировать в Windows 10 Mobile
- Истёк срок действия патентов на MP3
- Аудитория Facebook достигла 1,9 млрд пользователей в месяц
- Apple — лидер рынка носимых устройств
- DARPA: сюрпризы и непроизносимое
- Из-за чего наступит закат Google
- Facebook, Google, Microsoft: о стажировках и карьере в гигантах
- SpaceX наметила запуск первых спутников для раздачи интернета на 2019 год
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
← Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin
