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

Медиа

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

CSS

Javascript

Браузеры

Занимательное

Медиа

• Подкаст «Веб-стандарты», Выпуск №80 : Firefox 55, Samsung есть, Safari виднее, алгоритмы и паттерны, прозрачный JPG, Телеграм, приоритеты загрузки, фокусы, модули в Node.js.
• Подкаст «Пятиминутка React» #30 : setState и организация кода
• Подкаст «Пятиминутка Angular» #1 : Angular 5 Beta 3, Angular CLI 1.3, CreateAngularComponents
• Подкаст «Фронтенд Юность (18+)» #14: Все секреты производительности фронтенда
• Подкаст «devschacht», Выпуск №6: Готовим с фронтендером: одна часть Node.js, одна часть CSS-in-JS, густо приправить ФРП, добавить щепотку корутин и чайную ложечку зелёных тредов.
• Подкаст «Drinkcast» #3: «Раньше дивы были зеленее»
• Нужно ли фронтендеру знать алгоритмы и паттерны проектирования?. Игорь Алексеенко в HTML Шортах
• Totally Tooling Tips: Webpack Tips. Регулярное шоу от разработчиков Google Chrome, в этом выпуске советы по Webpack

Веб Разработка

• О чем всегда стоит помнить при локализации веб-сайта, чтобы потом не было стыдно
• Ускорьте ваш сайт с помощью машинного обучения
• Календарь событий по фронтенду. Конференции, встречи и другие события по фронтенду во всём мире в одном календаре.
• W3C рассматривает вопрос перевода предыдущих спецификаций HTML в разряд устаревших
• Урок-введение по WebAssembly на примере игры «Жизнь»
• .NET и WebAssembly — это будущее фронтенда?
• Какие функции Progressive Web App будет поддерживать Apple?
• SEO
  
  • Google призывает оптимизаторов помочь JS-разработчикам понять SEO
  • JavaScript и SEO: разница между Crawling и Indexing
  • Разработчик из Shuvayatra делится опытом внедрения Progressive Web App в контексте SEO
  
  
• Инструменты:
  
  • Вредоносный код в npm-пакетах и борьба с ним
  • Официальный релиз Bootstrap 4 beta наконец состоялся. Переход с Bootstrap 4 Alpha 6 на Beta
  • JPNG.svg — прозрачный PNG с JPEG компрессией
  
  
• Accessibility:
  
  • Основные ошибки accessability при разработке сайта
  • Создание доступного SPA
  • Доступные таблицы на SVG
  
  
• Анимация:
  
  • Еженедельная подборка красивых эффектов на CSS/SVG/JS #48
  • Transitions with JavaScript: коллекция небольших Chrome-only демок от Ana Tudor (CSS переменные плюс немного JS)
  • Производительные веб-анимации и интерактив: достигаем 60 FPS
  • Креативные переходы между страницами с эффектом морфинга
  • Руководство по покадровой анимации с помощью CSS и JavaScript
  
  

CSS

• Свойства для интервалов (*-gap) становятся универсальными
• Модуль CSS-изоляции (CSS Containment Level 1) стал кандидатом в рекомендации
• Практическое руководство по использованию CSS Modules в React приложениях
• Изоляция css стилей с помощью компонентного подхода
• Развенчание мифов о Hex цветах в CSS
• Font-size: неожиданно сложное CSS-свойство
• Shadow DOM: Быстрые и инкапсулированные стили
• Веб-шрифты: когда вы нуждаетесь в них, а когда нет
• Наследование в CSS: введение
• Лучший способ сделать “Wrapper”-обертку на CSS
• Flex Grow и Flex Basis: адаптивная раскладка страниц
• CSS Grid Layout:
  
  • Вёрстка реальных проектов на гридах (CSS Grid Layout) уже сейчас
  • Разница между явными и неявными сетками
  • Простые Sass миксины для улучшения браузерной совместимости для CSS Grid Layouts
  • Изменения в спецификации Grid и использование многоколоночного макета
  • Создание графиков на CSS с помощью гридов и пользовательских свойств
  • chrome-css-grid-highlighter — Chrome-расширение для подсветки CSS Grid Layout
  
  

JavaScript

• ES Modules в Node уже сегодня. Анонс нового загрузчика standard/esm
• JavaScript для людей, которые ненавидят JavaScript
• Машинное обучение в Javascript. Слайды с обзором возможностей
• JavaScript паттерны: паттерн Observer
• Как все время быть в теме экосистемы JavaScript?
• Как на самом деле работает JavaScript: часть 1
• Практика:
  
  • Ленивая загрузка изображений с помощью Intersection Observer
  • Бинарный поиск в JavaScript. Практический пример
  • Как мы создали наше первое full-stack JavaScript приложение за три недели. Простое пошаговое руководство от идеи до запуска
  • Улучшаем разговоры с помощью Perspective API
  • Как создать UI поиска по GitHub за 60 минут
  
  
• VueJS:
  
  • Лучшие мобильные компоненты для PWA в VueJs
  • React + Webpack: замешательство, фрустрация и как Vue.js может помочь
  • Компонент Yandex Maps для VueJS
  
  
• React:
  
  • Почему React лучше, чем Vue.js. И когда.
  • React Progressive Web Apps — часть Part 1
  • Получение данных из API с React.JS
  • Использование Create React App с Relay Modern
  • react-beautiful-dnd — доступные drag and drop для списков с React.js
  
  
• Angular:
  
  • Как Angular защищает нас от XSS атак?
  • MEAN Stack: разработка приложения с помощью Angular 2+ и Angular CLI
  • Избегайте общих проблем с модулями в Angular
  
  
• Libs & Plugins:
  
  • js-meter — инструмент для измерения производительности времени выполнения, CPU, RAM и кучи javascript кода
  • posterus — компонуемые асинхронные примитивы (futures) с реальной отменой, управлением расписанием и корутинами
  • nanoid — крошечный генератор уникальных ID, дружественный к URL
  • react-simple-maps — SVG карты с d3-geo и topojson
  • DisplayJS — быстрый и простой JS фреймворк для создания амбициозных UI, местами похожий на jQuery
  
  

Браузеры

• У Mozilla есть план, как победить Chrome. Встречайте Firefox 57 и боевую лисичку в броне
• Релиз Firefox 55, разбор деталей от Марата Таналина
• Firefox 55: first desktop browser to support WebVR
• Фишеры уже два месяца «охотятся» на разработчиков расширений для Chrome
• Выпуск web-браузера Opera 47
• Релиз Safari Technology Preview Release 37

Занимательное

• Новый рубеж взят: стоимость биткоина превысила $4000
• Foursquare снова обновил Swarm. Теперь это журнал ваших путешествий
• Facebook представила похожий на YouTube видеосервис с пользовательскими и профессиональными видео
• SoundCloud нашла финансирование для дальнейшей работы и сменила гендиректора
• Криптовалюты и блокчейн: история и перспективы рынка
• Киберспорт могут включить в программу Олимпийских игр 2024 года
• «Дефейс» дорожных знаков может дезориентировать беспилотные автомобили
• Бот OpenAI победил трёх топовых профессионалов в Dota 2
• Как устроен «Яндекс.Навигатор». Как алгоритм строит маршрут, откуда берутся данные о пробках и будет ли сервис платным
• Алгоритмы компрессии — введение с хорошей визуализацией
• Руководство по участию в Open Source

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

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

https://habrahabr.ru/post/335562/