Дайджест свежих материалов из мира фронтенда за последнюю неделю №301 (5 — 11 февраля 2018)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

qpvcu4h3kabozx4mxyw7jjhngi0.png


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

1e465593b1b347eea23b1ab81b6e0a04.png Медиа


podcast Подкаст «Frontend Weekend» #39 — Григорий Шехет про жизнь и работу в Сан-Франциско, frontend-дайджест и FRP
podcast Подкаст «devschacht»: Ночной фронтенд #21 — Rolling Scopes, день первый
podcast Подкаст «Пятиминутка Angular» #9 — Angular Msk, Pipeable Operators, Clarity UI, CLI 1.7.0 Beta 3, Ng 6.0 Beta 2
podcast Подкаст «Drinkcast», #25 — «Те самые Java-фронтендеры»
video «ALL YOUR HTML» #35: «Wordpress минисайт с нуля за час»
videoЗапись конференции WSD, прошедшей Москве 3 февраля
videoМитап по БЭМ. От азов до React.js.
videoenВсе видео со @SmashingConf London
videoenYo! новое шоу с последниими новостями о дизайне и веб-разработке от Rob Hope

888d64fa796b4b6e82e98edc17dc85ae.png Веб-разработка


enФронтенд фреймворки: кастомные vs готовые к использованию решения
enЕще одна причина использовать noopener — глубокое погружение в распределение процесса рендеринга
enWeb Assembly Studio — онлайн-песочница для изучения Web Assembly

  • Производительность:

    enОптимизация веб-производительности с помощью webpack: уменьшаем размер фронтенд кода и мониторим его скорость. Новое руководство от Ивана Акулова и Эдди Османи на developers.google.com
    enКак СЕОшники могут извлечь выгоду из Google Lighthouse — метрики веб-производительности
    enВзгляд на текущее состояние прогрессивных изображений и пользовательское восприятие
    enПроизводительность сайта и краулинговый бюджет
    enКак мы сделали загрузку наших страниц еще быстрее
    enОптимизация вашего MP4 видео для лучшей производительности


  • AMP/PWA:

    enpwaPWA на десктопе
    enpwaService workers: маленькие герои, стоящие за Progressive Web Apps
    enAMPGoogle AMP & WordPress: все, что вам нужно знать
    enpwaВстречаем PWA в Microsoft Edge и Windows 10. Microsoft изложила стратегию по внедрению Progressive Web Apps


  • Инструменты:

    • Роутинг, бандлинг и ленивая загрузка на Webpack
    enhreftools — коллекция онлайновых веб-инструментов для ускорения вашей работы
    enВ разделе анализа сайтов Chrome появилась новая категория с SEO аудитом
    enОт Webpack к Parcel: миграция create-react-app


  • Accessibility:

    enaria-label — это ксенофобия
    enМое путешествие по доступности: что я узнал за это время
    enВопросы по Accessibility для собеседования
    enУпрощенные рекомендации по WCAG 2.1


  • Эффекты:

    • Еженедельная подборка красивых эффектов на CSS/SVG/JS #69
    enАнимированный куб на чистом CSS
    enБесконечная лестница на CSS
    enSlice Revealer. Эффектная анимация полос слайдера
    enЭффекты наведения, зависящие от направления движения курсора
    enРеализация Winamp2-js на JS

3a13046f2d4a46c4a60db0906e962adb.png CSS


habrСовременный CSS для динозавров
• Поиск «мёртвого» CSS
• CSS позволяет собирать конфиденциальные данные пользователей
enИспользование Media Queries для отзывчивого дизайна в 2018
enИспользование конических градиентов и CSS переменных для создания круговой диаграммы для Range Input
enТемизация сайтов с помощью CSS переменных
enВычисления с помощью CSS каунтеров и CSS Grid
enmodern-normalize — современные техники нормализации стилей в браузерах
en3 суперспособности модели Flex-Box — как работают flex-basis, flex-shrink и flex-grow
envideoInternet Explorer еще существует. Использовать ли CSS Grid?

1999aed8349b484fb1caa64d98ceb5e3.png JavaScript


habrТоп-10 ошибок из 1000+ JavaScript-проектов и рекомендации по их устранению
habrКак работает JS: веб-воркеры и пять сценариев их использования
enНаучитесь определять красные флажки в вашем коде JavaScript/React коде
enОбзор JavaScript тестирования в 2018
enПять общих проблем в приложениях на GraphQL (и как их исправить)
enJavaScript фреймворки в числах — зима 2018
enAngular 5 vs. React vs. Vue

  • ES6:

    habrОтменяемые Promises в EcmaScript6
    habrJavaScript ES6 — синтаксис оператора spread (…)
    habrJavaScript ES6: оператор расширения
    enИспользование параметров по умолчанию в ES6
    enПриватные переменные в JavaScript


  • ReactReact:

    enЧто нового в React 16.3(.0-alpha)
    enТехники бесконечного скролла в React
    enЭволюция паттернов в React
    enПрезентация React Scope — инструмент для визуализации ваших React компонентов, показывающий, как вы взаимодействуете с вашим приложенем
    enНовый Context API в React


  • VueVueJS:

    enСоздание приложение простого распрознавания лиц с помощью Vue.js и Kairos
    enVue в 2018 — интервью с Evan You, автором Vue.js


  • AngularAngular:

    habr Переход с AngularJS на Angular: Цели, планы и правила переноса элементов (⅓), habrПроблемы и решения гибридного режима (2/3), habrЖизнь после AngularJS (3/3)
    enЗапускайте Angular CLI репы напрямую в вашем браузере
    enНачало работы с Angular SDK

8a7fed178dce42c099f5da05982aec87.png Браузеры


• Быстрее Firefox и в обновлённом дизайне: представлен браузер Opera 51
• Анонсирована функция удаления личной информации из URL-адреса в Firefox 59
• Google выпустила бета-версию Chrome 65. Разработчики улучшили блокировку всплывающих окон, обновили видеоплеер для Android и представили несколько новых API.
• С июля браузер Google Chrome будет отмечать все HTTP-сайты небезопасными
enКак работает блокировщик рекламы в Google Chrome

d4b289ef0a00e969108c25d0c3d75f58.gifЗанимательное


• 15 SEO-мифов, которые никогда не умрут
• Новая версия WordPress сломала функцию автообновления движка
• Google обучила ИИ многозадачности в процессе интенсивной игровой сессии
• Обнаружена уязвимость, позволяющая «положить» почти все сайты на движке WordPress
• Компания Mozilla представила шлюз для интернета вещей
• Что происходит в космическом бизнесе: обзор перспективных направлений частной космонавтики
• Блокчейн Шредингера: как технология в основе биткоина и полезна, и опасна одновременно
• Определены главные тренды 2018 года на GitHub-проекты
• «Лично я приветствую наших механических повелителей»: мнения ведущих мировых учёных об ИИ
• Жадность, хрупкость, непрозрачность и мелочность: что не так с ИИ на основе глубинного обучения
• Программист разгадал головоломку 2015 года и получил 50 тысяч долларов в биткоинах

Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.


→ Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin

© Habrahabr.ru