Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
•

•

•

•

•

•

•

•

•

•


Веб-разработка
•

•

•

• Веб-компоненты: долгая игра
•

•

•

•

•

•

- AMP/PWA:
•WordPress + PWAs = (видео с Chrome Dev Summit 2017)
•Что такое Прогрессивные Веб-приложения?
- Инструменты:
•Прощание с Firebug
•Знакомство с sonar — новым инструментом для анализа сайта и линтинга от Microsoft
•HEML — опенсорсный язык разметки для создания отзывчивых email-писем
- Производительность:
•Можете ли вы себе позволить это? Бюджеты производительности в реальном мире
•Влияет ли скорость загрузки страниц на SEO? (спойлер: да)
•Беспроигрышные рекомендации по повышению производительности и безопасности сайтов: HTTP/2, SSL, Brotli, CDN, WebP
•Оптимизируем изображения для уменьшения веса страницы: форматы файлов, инструменты и RWD
•Как получить 100/100 в Google Page Speed Score с помощью Middleman и Nginx?
•Скорость по умолчанию: лучшие современные практики загрузки страниц (доклад с Chrome Dev Summit 2017)
•Графические метрики производительности скоро появится в Chrome DevTools
- Accessibility:
• Как помочь слепым на вашем сайте
•Не используйте ARIA Menu Roles для навигации по сайту
•Хватит создавать сайты только для 85% пользователей: принципы доступности в дизайне
•Схлопывающиеся секции — реализация современного аккордиона с учетом доступности
•Полное руководство по Alt-текстам
- Анимация:
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #59
•SVG волны с помощью feDisplacementMap
CSS
• Ну что, можно уже использовать CSS-переменные?
• Критический CSS + прогрессивный CSS = ?
•

•

•

•

•

•

JavaScript
•

•

•

•

- Теория:
•Объясняем современный JavaScript динозавру
• Памятка по современному JavaScript
•В чем разница между JavaScript и ECMAScript?
•Ответы на 12 основных вопросов JavaScript
- Фреймворки:
•Ember.js: отличный фреймворк для веб-приложений
•Сравнение CLI в JavaScript фреймворках
•3+ года с Ember, 6 месяцев с React
React:
•БЭМ + React: гибкая архитектура дизайн-системы
• Cerebral 2. Сравнение Redux, MobX и Cerebral
•Релиз React 16: что нового?
•Что делает Redux? (и когда вы должны его использовать?)
•Как мне понять, что я готов к Redux?
•Удивите своих друзей с помощью разделения кода в React
VueJS:
•Создание переходов и анимаций в Vue.js
•Продвинутые концепты Vue.js: миксины, кастомные директивы, фильтры, переходы и менеджмент состояния
•SEO для Vue.js SPA: Prerender & Server-Side Rendering
•Element — библиотека компонентов для Vue 2.0
•Создание схлопывающегося дерева меню с помощью рекурсивных компонентов Vue.js
•Создание Lazy-Load роутера с помощью Vue.js и последних браузерных технологиях
- Libs & Plugins:
•Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 1
•Light-Modal — легкий плагин для модальных окон, кастомизируемый с помощью CSS
•Физика в JavaScript с помощью Matter.js
Браузеры
•

•

•


Занимательное
• Как устроен Ethereum и смарт-контракты. Децентрализованная машина Тьюринга с гарантиями блокчейна
• 7 SEO-трендов, за которыми стоит наблюдать в 2018 году
• Как Booking.com заставляет вас принимать решения
• Где обучиться профессиям, которые появятся в ближайшем будущем
• Машинное обучение в Google или как искусственный интеллект делает сервисы компании и жизнь людей лучше
• Интересные GitHub-проекты: «змейка» для терминала, работающая на этапе компиляции
• Microsoft показала как создают голограммы к Mixed Reality
• Adobe делает жизнь проще с новыми инструментами на базе ИИ
•

?
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Комментарии (8)
redyuf
30.10.2017 15:05Что-то раз от раза меньше материала по Angular становится, он популярность теряет или что?
Это наверное первый дайджест за последнее время, где о нем вообще ни слова, кроме тега.alexzfort Автор
30.10.2017 15:20Уже второй такой за последнее время… по react и vue сейчас побольше новых статей, да
IamStalker
30.10.2017 16:30Заметен странный переход на эти фрэймворки/библиотеки. Меня интересует как насчет энтерпрайзов, на чем они работают? Знаю что был на нескольких интервью и там уже оговаривался переход на vue.js и react.
Что думаете?
uRusure
01.11.2017 03:22Кстати, а как насчет мемасов из мира Front-end? :) Может как-нибудь получиться добавить подобную категорию с картинками?
twentyfivesymbolsusername
Спасибо за очередной отличный дайджест!
alexzfort Предлагаю ввести рубрику GraphQL, т.к. тема достаточно популярная и новостей всегда куча (например, на прошлой неделе прошел саммит в Сан Франциско). GraphQL, хоть это уже в сторону бекенда, достаточно затрагивает и фронтенд, поэтому я считаю, что рубрика будет к месту. Спасибо :)
alexzfort Автор
Всегда пожалуйста. Отдельную рубрику по GraphQL — это наверное вряд ли, слишком специфическая тема. Но периодически включать будем :)
uRusure
Поддерживаю. Тоже хотелось бы по GraphQL. И побольше по Реакту новостей желательно :)