Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «Веб-стандарты» #86: Как вписаться в iPhone X, редакторы кода, инверсная тема в 153 байтах, жизнь после git --force, история гридов, вёрстка и программирование, ES-модули в Node и в бою.
•
Подкаст «Пятиминутка React» #35: FrontFest 2017
•
Подкаст «Frontend Weekend» #19: Юрий Артюх учит как стать самым красивым верстальщиком рунета
•
Подкаст «Фронтенд Юность (18+)» : FrontTalks — лучшая конференция в галактике
•
Подкаст «Веб-стандарты», Episode #85: Ага Наплоха, Гарри Робертс, Ева Леттнер, Зак Лезерман и Хьюго Жирадель в специальном выпуске «Веб-стандартов»
•
Подкаст «Drinkcast», Выпуск #8: «Что такое FrontOps»
•
«ALL YOUR HTML» #14: «Анимируем графики на SVG и Canvas, + perlin noise»
•
HTML Шорты: Математика для программиста, плюс текстовая версия
•
Доклады с Frontend Mix: оптимизация загрузки сайтов и дизайн-система на БЭМ и React
• Ошибки и спорные вопросы в HTML-CSS вёрстке
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #53
•
Как убрать белые полосы в Safari на iPhone X (background-color, viewport-fit, safe-area-inset-*)
• Доступ к CSS-переменным и их изменение с помощью Javascript
• Заблокированные кнопки — отстой
•
CSS-in-JS — это как заменить сломаную отвертку вашим любимым молотком
•
Полное руководство по Flexbox? — изучение по примерам
•
Новое руководство по поддержке CSS в письмах от campaignmonitor
•
Видео о создании CSS Grid. Посмотрите, как CSS Grid Layout прошел путь от идеи до реального распространения во всех основных браузерах в 2017
•
Удаление неиспользуемых правил CSS
•
Devices.css — подборка современных устройств, воссозданных на «чистом CSS»
• Почему Facebook SDK занимает около 16% JavaScript-кода на сайтах и что это значит
•
Babel: изменения, запланированные для версии 7.0
•
О том, как можно уменьшить влияние третьесторонних JS скриптов на производительность всего сайта
•
Как работает JavaScript: управление памятью + как бороться с четырьмя распространёнными утечками памяти
•
Готовы ли поисковые остальные движки, кроме Google, к краулингу и индексированию JavaScript?
•
Что я люблю и ненавижу во Flow
•
Есть ли смысл в людях, которые не могут писать JavaScript?
•
В Chrome 64 будет прекращено автоматическое воспроизведение видео со звуком, а FTP будет помечаться, как небезопасный протокол
•
Проект Mozilla представил дополнение с реализацией контекстных контейнеров для Firefox
•
В Firefox 57 будет обновлён внешний вид средств для разработчиков
• iPhone X, iPhone 8 и 8 Plus, Apple Watch Series 3 и Apple TV 4K
• Российские дизайнеры и разработчики об iPhone X, iPhone 8 и других анонсах презентации Apple
• W3C разработал API для криптовалютных платежей в браузерах
• Нейросеть дня: 3D-маска лица на основе фотографии
• Выпуск Vagrant 2.0, инструментария для создания виртуальных окружений
• Сеть казино скомпрометировали через «умный» аквариум
• Компания Oracle выбрала Eclipse Foundation для передачи разработки Java EE
• Человеческий мозг планируют подключить к «интернету вещей»
• Почему Кремниевую долину критикуют все чаще, и что с этим делать
?
> Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
•

•

•

•

•


•

•

•

•


Веб-разработка
• Ошибки и спорные вопросы в HTML-CSS вёрстке
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #53
•

- Производительность:
•Как ускорить загрузку сайта
•Заметка на hacks.mozilla.org о быстром построении DOMа — рискованный парсинг, async, defer и preload
•Addy Osmani о том, как на Treebo радикально повысили скорость работы мобильной версии сайта (React/Preact PWA)
- Инструменты:
•О-о-очень долгожданный релиз Sublime Text 3.0
• Текстовый редактор Atom стал средой разработки
•Прототипирование возможностей DevTools в будущих версиях браузеров
- Wordpress:
• WordPress отказывается от React, Gutenberg будет переписан на основе другой библиотеки
• Gutenberg предлагает новый подход к TinyMCE в WordPress 5.0
• Gutenberg 1.1.0: новые возможности редактора
CSS
• Доступ к CSS-переменным и их изменение с помощью Javascript
• Заблокированные кнопки — отстой
•

•

•

•


•

•

JavaScript
• Почему Facebook SDK занимает около 16% JavaScript-кода на сайтах и что это значит
•

•

•

•

•

•

- ES2015+:
•Применение ES2015+ кода на продакшене уже сегодня
•Async/Await сделают ваш код проще
•Асинхронная рекурсия с помощью Callbacks, Promises и Async.
•Простое объяснение монад в JavaScript
•HTML шаблоны, реализованные с помощью JavaScript Template Literals
- Теория:
•JavaScript: загадочное дело выражения null >= 0
•Думать как JavaScript. Перевод статьи Кайла Симпсона “Thinking JavaScript”
•JavaScript: методы асинхронного программирования
•Почему “throttling” и “debouncing” так называются?
•ООП в JavaScript
VueJS:
• Паттерны разделения кода приложения на Vue.js
•Функции рендера Vue.js и transitions
•Phytochemia: почему мы выбрали Vue.js
React:
•Что нового в React 16?. В статье рассмотрен пример создания музыкального плеера с использованием некоторых функций нового React
•React для Angular разработчиков
•Как организовать больше приложение на React и сделать его масштабируемым
•react-powerplug — создает состояние и передает логику его детям, давая жизнь dumb компонентам
Angular:
•Как я перестал любить Angular
•Использование Веб Компонентов с Angular
•Начало работы с End-to-End тестированием в Angular с использованием Protractor
•Проблемы с защитой роута в Angular
- Libs & Plugins:
•p-progress — создание промиса, который сообщает о прогрессе.
•punchcard — jquery плагин для создания графиков в стиле GitHub перфокарт
•classwrap — js утилита для конкатенации имен CSS классов по заданным условиям
•ellipsed — JS библиотека для добавления троеточия в многострочных текстах
Браузеры
•

•

•

Занимательное
• iPhone X, iPhone 8 и 8 Plus, Apple Watch Series 3 и Apple TV 4K
• Российские дизайнеры и разработчики об iPhone X, iPhone 8 и других анонсах презентации Apple
• W3C разработал API для криптовалютных платежей в браузерах
• Нейросеть дня: 3D-маска лица на основе фотографии
• Выпуск Vagrant 2.0, инструментария для создания виртуальных окружений
• Сеть казино скомпрометировали через «умный» аквариум
• Компания Oracle выбрала Eclipse Foundation для передачи разработки Java EE
• Человеческий мозг планируют подключить к «интернету вещей»
• Почему Кремниевую долину критикуют все чаще, и что с этим делать
?
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
> Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin
vtvz_ru
Честно говоря, в статье «Что нового в React 16» я ожидал увидеть подробный разбор изменений и чем они полезны для нас. А нет, написание музыкального плеера с использованием некоторых фич нового реакта… Просто интересна целевая аудитория. Люди, которым интересны изменения в новой версии их инструмента, и сами смогут слепить плеер. А тех, кто хочет изучить библиотеку, вряд ли прельстит такой заголовок. Или я чего-то не понимаю?
* К подборке нареканий нет. Всегда огромное спасибо за ваш труд. Всегда с нетерпением жду новый выпуск)
derSmoll
Соглашусь. Статья для новичков возможно и неплохая, но с заголовком они однозначно промахнулись, либо намеренно занимаются кликбейтом. Что касается разбора изменений, рекомендую соответствующий выпуск Пятиминутки React