
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
•
Подкаст «Frontend Weekend» #39 – Григорий Шехет про жизнь и работу в Сан-Франциско, frontend-дайджест и FRP•
Подкаст «Веб-стандарты», Выпуск №107: CSS на JS в Chrome, HTTPS и SEO, сервис-воркеры в Safari, маркетинг CSS, как провести и пройти собеседование.•
Подкаст «devschacht»: Ночной фронтенд #21?—?Rolling Scopes, день первый•
Подкаст «Пятиминутка Angular» #9 — Angular Msk, Pipeable Operators, Clarity UI, CLI 1.7.0 Beta 3, Ng 6.0 Beta 2•
Подкаст «Drinkcast», #25 — «Те самые Java-фронтендеры»•
«ALL YOUR HTML» #35: «Wordpress минисайт с нуля за час»•
Запись конференции WSD, прошедшей Москве 3 февраля •
Митап по БЭМ. От азов до React.js.•
Все видео со @SmashingConf London•
Yo! новое шоу с последниими новостями о дизайне и веб-разработке от Rob Hope
Веб-разработка
•
Фронтенд фреймворки: кастомные vs готовые к использованию решения•
Еще одна причина использовать noopener — глубокое погружение в распределение процесса рендеринга•
Web Assembly Studio — онлайн-песочница для изучения Web Assembly- Производительность:
•
Оптимизация веб-производительности с помощью webpack: уменьшаем размер фронтенд кода и мониторим его скорость. Новое руководство от Ивана Акулова и Эдди Османи на developers.google.com
•
Как СЕОшники могут извлечь выгоду из Google Lighthouse – метрики веб-производительности
•
Взгляд на текущее состояние прогрессивных изображений и пользовательское восприятие
•
Производительность сайта и краулинговый бюджет
•
Как мы сделали загрузку наших страниц еще быстрее
•
Оптимизация вашего MP4 видео для лучшей производительности
- AMP/PWA:
•
PWA на десктопе
•
Service workers: маленькие герои, стоящие за Progressive Web Apps
•
Google AMP & WordPress: все, что вам нужно знать
•
Встречаем PWA в Microsoft Edge и Windows 10. Microsoft изложила стратегию по внедрению Progressive Web Apps
- Инструменты:
• Роутинг, бандлинг и ленивая загрузка на Webpack
•
hreftools — коллекция онлайновых веб-инструментов для ускорения вашей работы
•
В разделе анализа сайтов Chrome появилась новая категория с SEO аудитом
•
От Webpack к Parcel: миграция create-react-app
- Accessibility:
•
aria-label — это ксенофобия
•
Мое путешествие по доступности: что я узнал за это время
•
Вопросы по Accessibility для собеседования
•
Упрощенные рекомендации по WCAG 2.1
- Эффекты:
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #69
•
Анимированный куб на чистом CSS
•
Бесконечная лестница на CSS
•
Slice Revealer. Эффектная анимация полос слайдера
•
Эффекты наведения, зависящие от направления движения курсора
•
Реализация Winamp2-js на JS
CSS
•
Современный CSS для динозавров• Ссылки против кнопок в современных веб-приложениях
• Поиск «мёртвого» CSS
• CSS позволяет собирать конфиденциальные данные пользователей
•
Использование Media Queries для отзывчивого дизайна в 2018•
Использование конических градиентов и CSS переменных для создания круговой диаграммы для Range Input•
Темизация сайтов с помощью CSS переменных•
Вычисления с помощью CSS каунтеров и CSS Grid•
modern-normalize — современные техники нормализации стилей в браузерах•
3 суперспособности модели Flex-Box — как работают flex-basis, flex-shrink и flex-grow•
Internet Explorer еще существует. Использовать ли CSS Grid?
JavaScript
•
Топ-10 ошибок из 1000+ JavaScript-проектов и рекомендации по их устранению•
Как работает JS: веб-воркеры и пять сценариев их использования•
Научитесь определять красные флажки в вашем коде JavaScript/React коде •
Обзор JavaScript тестирования в 2018•
Пять общих проблем в приложениях на GraphQL (и как их исправить)•
JavaScript фреймворки в числах — зима 2018•
Angular 5 vs. React vs. Vue- ES6:
•
Отменяемые Promises в EcmaScript6
•
JavaScript ES6 — синтаксис оператора spread (…)
•
JavaScript ES6: оператор расширения
•
Использование параметров по умолчанию в ES6
•
Приватные переменные в JavaScript
React:
•
Что нового в React 16.3(.0-alpha)
•
Техники бесконечного скролла в React
•
Эволюция паттернов в React
•
Презентация React Scope — инструмент для визуализации ваших React компонентов, показывающий, как вы взаимодействуете с вашим приложенем
•
Новый Context API в React
VueJS:
•
Создание приложение простого распрознавания лиц с помощью Vue.js и Kairos
•
Vue в 2018?—?интервью с Evan You, автором Vue.js
Angular:
•
Переход с AngularJS на Angular: Цели, планы и правила переноса элементов (1/3),
Проблемы и решения гибридного режима (2/3),
Жизнь после AngularJS (3/3)
•
Запускайте Angular CLI репы напрямую в вашем браузере
•
Начало работы с Angular SDK
Браузеры
• Быстрее Firefox и в обновлённом дизайне: представлен браузер Opera 51
• Анонсирована функция удаления личной информации из URL-адреса в Firefox 59
• Google выпустила бета-версию Chrome 65. Разработчики улучшили блокировку всплывающих окон, обновили видеоплеер для Android и представили несколько новых API.
• С июля браузер Google Chrome будет отмечать все HTTP-сайты небезопасными
•
Как работает блокировщик рекламы в Google Chrome
Занимательное
• 15 SEO-мифов, которые никогда не умрут
• Новая версия WordPress сломала функцию автообновления движка
• Google обучила ИИ многозадачности в процессе интенсивной игровой сессии
• Обнаружена уязвимость, позволяющая «положить» почти все сайты на движке WordPress
• Компания Mozilla представила шлюз для интернета вещей
• Что происходит в космическом бизнесе: обзор перспективных направлений частной космонавтики
• Блокчейн Шредингера: как технология в основе биткоина и полезна, и опасна одновременно
• Определены главные тренды 2018 года на GitHub-проекты
• «Лично я приветствую наших механических повелителей»: мнения ведущих мировых учёных об ИИ
• Жадность, хрупкость, непрозрачность и мелочность: что не так с ИИ на основе глубинного обучения
• Программист разгадал головоломку 2015 года и получил 50 тысяч долларов в биткоинах
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
> Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin
Комментарии (4)

mrsweet
13.02.2018 13:25Подход с поиском «мёртвого» CSS, представленный в дайджесте, сродни современному кинематографу. Есть куда более изящные и быстрые способы решения проблемы удаления неиспользуемых стилевых правил.

belkamax05
14.02.2018 14:59А каким образом минификаторы по вашей ссылке помогут вырезать мертвый код? Всё что может минификатор — убрать лишние пробелы и неиспользуемые импорты. Задача состоит в том что у вас было «div#test1» и «div#test2». В какой-то момент блок test2 полностью исчез из проекта, оставаясь в CSS. Даже внутри модуля код может быть рассинхронизирован и увидеть это можно ТОЛЬКО в реальном времени, и никак на этапе компиляции. В теории может сработать с анализом статических страниц или после рендеринга.
DevTools позволяет отладить CSS на наличие мертвого кода, но потребуется всё-таки сначала открыть страницу developers.google.com/web/updates/2017/04/devtools-release-notes
ht-pro
Спасибо.
alexzfort Автор
Всегда пожалуйста