Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда. Кстати, на прошедшей неделе дайджесту исполнилось 5 лет. Спасибо, что читаете.
← Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin
| Веб-разработка |
| CSS |
| Javascript |
| Браузеры |
| Занимательное |
Веб-разработка
Раскрываем тему WebAssembly с Бренданом Айком- Компоненты веб-интерфейса
- Подкаст Веб-стандарты, Выпуск №64: События, Edge 15, доступный туду-лист и много болтаем с Вадимом Макишвили.
- Пилотный выпуск подкаста devSchacht. Авторы раздают благодарности, грассируют, рассказывают про переводы.
Советы и приёмы по отладке кода- Shadow DOM != Virtual DOM
- Что такое бюджет производительности и почему вы должны его использовать
- Плавная прокрутка и доступность
- Изучите Webpack за 15 минут
- Анонс ресурса PWAStats.com, где представлены подборки сайтов, плодотворно использующих PWA
- AMP для ритейлеров: стоит ли оно того?
- Подробное руководство по HTTP/2 Server Push
- npm и front end
- Building Blocks. Библиотека UI компонентов от Foundation, представляющая собой HTML, CSS и JS сниппеты, которые можно встроить в любой проект на Foundation
- Отсылка сообщений, когда пользователь возвращается в онлайн, с помощью Service Workers и Background Sync
- Так что же такое GraphQL, о котом я постоянно слышу?
- boilrplate — курируемый каталог заготовок (бойлерплейтов) для помощи при старте проекта
- Iceberg — заготовка с React, Babel, Webpack, Sass
- Креативные анимационные эффекты для загрузки гридов
- Эксперименты WebVR
CSS
- Тёмная сторона использования полифиллов CSS
- PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
- Поэтапное руководство по алгоритму автоматического размещения из CSS Grid
- Mobile first: забыть и забить?!
- Продвинутые вертикальные марджины
- Давайте точно определим, что такое Atomic CSS
- Griddy — еще один визуальный онлайн-инструмент, позволяющий на практике ознакомиться с CSS Grid
- Создание устойчивой архитектуры на Sass: часть 1
- Подробно о свойстве touch-action
- Упражнение по созданию masonry-раскладки на CSS
- Кастомизация браузерных скроллбаров с помощью CSS
- От CSS препроцессоров к стилизованным компонентам (React)
JavaScript
- Отчет и материалы SPA meetup'а 8 апреля 2017
- Асинхронные функции 101
- JavaScript: Design Patterns
-
The Post JavaScript Apocalypse — доклад Douglas Crockford на ConFoo Developer Conference - 9 способов поднять уровень вашего кода
- В браузеры пришла поддержка модулей ES6: время переосмыслить бандлинг?
- Теория:
- Зачем использовать статические типы в JavaScript? (Преимущества и недостатки)
- Использование Observables в реальной жизни
- Функциональный JavaScript: развязка методов из их объектов
- 7 советов по обработке undefined в JavaScript
- Практика:
- Beau Carnes (freeCodeCamp): Мой гигантский курс по основам JavaScript доступен на YouTube. И он на 100% бесплатен
- Делаем сайт интерактивным и забавным с помощью Velocity.js (No jQuery)
- Изучение JavaScript Test-Driven Development по примерам
- ThsJSQuiz — протестируйте уровень вашего JavaScript с помощью интерактивной викторины
- React:
- Введение в React и Redux для бекенд-разработчиков
- N причин, чтобы использовать Create React App
- Архитектура модульных React + Redux приложений
- Подкаст «Пятиминутка React» #11 — this.state или this.effectiveValue?
- CodeSandbox — онлайн песочница для React
- Стали доступны все видео с React Conf 2017
- Бесконечный список и React
- Twitter Lite и высокопроизводительное прогрессивное веб-приложение на React, подробности реализации масштабного проекта
- Руководство для искателей приключений по React (часть I)
- Vue:
- Введение в Vue.js для людей, знающих только jQuery
- buefy — легкие компоненты UI для Vue.js, основанные на Bulma
- vms — Vue.js 2.0 CMS
- Управление состоянием во Vue
- Управление состоянием приложения во Vue.js 2 с Vuex — введение
- Миграция с Angular на Vue, и почему мы не выбрали React (+ ES6 и Webpack)
- Angular:
- Libs & Plugins:
Браузеры
- Дополнительные макеты нового интерфейса Firefox 57
- Firefox 55 позволит настроить себя под текущее количество ОЗУ на ПК
- В Firefox планируют добавить секцию настройки производительности
- Mozilla сокращает число стадий в разработке Firefox
- Что нового в DevTools (Chrome 59)
- В Chrome появится режим работы без экрана
- Google объявил Octane устаревшим и не отражающим реальную производительность браузеров
- Edge снова на коне: Microsoft повторила тесты энергоэффективности популярных браузеров
- Что нового в Microsoft Edge после обновления Windows 10 Creators Update
Занимательное
- 75-летний программист основал компанию по обслуживанию компьютерных систем на COBOL
- Google AutoDraw — графический редактор на базе ИИ и машинного обучения, угадывающий то, что рисует пользователь
- В Google Photos появилась функция стабилизации видео
- «Стадия развития ИИ сейчас — на уровне двухлетнего ребёнка». Конспект лекции директора по распространению технологий «Яндекса» Григория Бакунова.
- Так ли важна скорость загрузки сайта, или о «пользе» Google PageSpeed Insights
- Дьявольски умен: Uber два года следил за водителями Lyft
- Пять мифов об искусственном интеллекте
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
← Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin
