Дайджест свежих материалов из мира фронтенда за последнюю неделю №292 (4 — 10 декабря 2017)

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

ev6jf9dvwkctztukb9tqltfz0fe.png


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

1e465593b1b347eea23b1ab81b6e0a04.pngМедиа


podcast Подкаст «devschacht»: Ночной фронтенд #14 — HolyJS. День 1
podcast Подкаст «Пятиминутка Angular» #7 — HolyJS, Articles, Angular-RU/Universal/OfflineMoscow, NewHR
podcast Подкаст «Drinkcast», #20 — «Поймать опенсорсера»
video «ALL YOUR HTML» #26: «SVG и WebGL маски»
video31 видео с KharkivJS #8 2017
video3 видео с MinskCSS Meetup #3
videoen16 видео с Fronteers Conference 2017

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


• Google анонсировал изменения в сканировании AJAX
enКраткие итоги фронтенд-разработки в 2017
en Делаяем оффлайн поддержку для вашего веб-приложения: часть 1 — настройка, часть 2: реализация
enРуководство по подготовке к собеседованию на позицию фронтендера
enУзнайте большое о предупреждениях об уязвимостях
video«Что не так с современным фронтендом», — доклад Максима Корабельского на ThinkPHP

  • Производительность:
    habrЭволюция «img»: Gif без формата GIF
    habrПроизводительность как восприятие: управление восприятием
    enСредняя скорость загрузки страницы в 2018 — как, что и зачем измерять.
    enПроизводительность — это преимущество


  • Инструменты:
    enВстречайте Turbo: пакетный менеджер, который в 5 раз быстрее Yarn и NPM и работает в браузере
    enwordpressify — система сборки, созданная для автоматизации процесса разработки на WordPress
    enparceljs — новый быстрый бандлер веб-приложений
    enWebpack: мягкое введение в модульный бандлер
    enНастраиваем webpack для любого проекта
    enVisual Studio Code добавил интеграцию с Avocode для работы с дизайном прямо в редакторе


  • Accessibility:
    enПересмотр подхода к созданию доступных ссылок
    en5 основных заблуждений на тему веб-доступности
    enПредоставляем альтернативный контент для пользователей скринридеров
    enРуководства по веб-доступности контента для людей, которые их не читали
    enАвтоматизация тестов доступности
    enСоздание инклюзивного веба: почему доступность имеет значение
    enHTML5 Accessibility. Ресурс, где можно узнать об актуальном статусе поддержки свойств HTML5 в основных браузерах


  • Анимация:
    • Еженедельная подборка красивых эффектов на CSS/SVG/JS #65
    enСоздание анимации на SVG с помощью линий на примере велосипеда с помощью GSAP
    enMountains Adventure — SVG filters, clip-path & morphing
    enАнимация заполнения страницы в виде пиксельной волны

3a13046f2d4a46c4a60db0906e962adb.pngCSS



eniota — отзывчивый микро-фреймворк для гридов, использующй кастомные свойства CSS
enНесколько идей для чего можно использовать Grid Layout
enАнимация бордеров
enКак сделать ваш HTML отзывчивым с помощью добавления одной строки кода CSS
enПочему CSS Grid лучше, чем Bootstrap для создания лейаутов
enПонимание CSS переменных
enКалендарь на CSS Grid
enПересмотр вариантов реализации вертикального текста с помощью writing-mode
enОтладка CSS Grid Layouts с помощью Firefox Grid Inspector
ennormalize.email.css — CSS reset для шаблонов HTML писем

1999aed8349b484fb1caa64d98ceb5e3.pngJavaScript


habrАнализ шести веб-фреймворков: плюсы, минусы и особенности выбора
envideoКак написать безопасное приложение для JavaScript
enВот что говорили технические люди о дебюте JavaScript в 1995-м
enИтак, вы изучили JavaScript — что теперь?
enНейронные сети на JavaScript с помощью deeplearn.js
enВ будущем JavaScript будет меньше JavaScript
enКак я создал тепловую карту истории моих посещений с JavaScript и Google Maps
enПоиск неуникального элемента в Javascript

  • ES2015+:
    • Промисы на примерах из жизни
    enawait vs return vs return await
    enКак отменить свои промисы


  • Теория и руководства:
    enJavaScript. Ядро: 2-ое издание
    enРазные способы понимания this в JavaScript
    enРуководство фронденд-разработчиков по GraphQL
    enУзнайте об Internationalization API в JavaScript
    envideoОтветы на каверзные вопросы на собеседованиях по JS


  • ReactReact:
    habrАнализ производительности React 16 приложений с помощью инструментов разработчика Chrome
    habrКак Фейсбук приобрел Инстаграм и почему это привело к открытию исходного кода React.js
    • Redux: шаг за шагом
    enБыстрое введение в React для разработчиков Angular 2/4+
    enДва новых (бесплатных) React курса на 2.5 часов. 1 — Руководство для новичков по ReactJS, 2 — продвинутые компоненты шаблонов React
    enДемистификация подходов к стилизации React
    enКак создать простой блог с помощью React и GraphQL
    enИспраление производительности React на листинг страницах Airbnb
    enmdbootstrap — React Bootstrap с Material
    enjQuery лучше, чем React:)


  • VueVueJS:
    enБезжаргонное введение в Webpack для пользователей VueJS
    enЧто за виртаульный DOM во Vue?
    envideoАнимация VueJS


  • AngularAngular:
    en11 библиотек компонентов Angular, которые вы должны знать в 2018
    enAngular 5.1 & и другие новинки уже доступны
    enПочему мы выбрали Angular 2, а не React для нашей работы над энтерпрайзом


  • Libs & Plugins:
    enВизуализация динамических волновых графиков с помощью wavesurfer.js
    enGithubnpmgraph — инструмент для визуального изучения NPM модулей и зависимостей
    enGithubAnimate Plus — библиотека для анимации, сфокусированная на производительности и гибкости разработки
    enGithubMuuri — адаптивная, фильтруемая, сортируемая сетка с поддержкой перетаскивания элементов в стиле masonry
    enGithubcountry-iso — возвращает код страны по географическим координатам
    enReshader — настраиваемая микро-библиотека для получения оттенков цветов

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


• Выпуск web-браузера Chrome 63
• Google начала «убивать» приложения Chrome и отключила соответствующий раздел магазина Chrome Web Store на Windows, Mac и Linux
• Что нового в Facebook: все изменения ленты новостей за 2017 год
• Chrome для Windows будет блокировать внедрение кода сторонними приложениями, которое часто приводит к сбоям
enПетиция о скорейшей эвантазии Internet Explorer-а раз и навсегда
enДетали релиза Safari Technology Preview 45

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


• Мастер-класс «Почему Стив Джобс любил шрифты» (Алексей Каптерев)
• Mozilla и Yahoo обменялись судебными исками
• Что влияло на выдачу поисковиков в 2017 году
• Что не так с криптокотиками и чем это кончится
• В NVIDIA создали нейросеть, реалистично подделывающую видео
• Дизайнер изобразила главные мировые события 2017 года на одной картинке
• Что случилось с парнем, который купил пиццу за биткоины
enЛучшие книги о программировании, отобранные по многочисленным комментариям в reddit


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

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

© Habrahabr.ru