Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «Веб-стандарты», Выпуск №160: Перевод документации React, статьи про вёрстку, логический CSS, SVG-фильтры, цветные шрифты, полезные инструменты.
•
Подкаст «CSSSR», Новости 512 — Выпуск №37 (02.02 — 08.02)
•
«Я
?Frontend» — Запись трансляции конференции для фронтенд разработчиков в офисе Яндекс
• SunFox — BurnoutJS — трек, который не оставит равнодушным JS-разработчиков
•
У дизайнера новая идея? Что может быть проще
•
Обзорная статья по A-Frame
•
Что можно узнать при разработке аудио плеера для разных браузеров
•
Play Store теперь принимает прогрессивные веб-приложения (PWA)
• Как быстро создать десктопное приложение на HTML, CSS и JavaScript
•
Где вы изучаете HTML и CSS в 2019 году?
•
PWA на iOS 12.2 beta: хорошее, плохое и «еще не уверен, хорошее ли»
•
Telegram опять раздаёт деньги за разработку простых шаблонов CSS
• Новые логические свойства в CSS!
•
Руководство по CSS Support в браузерах
•
Использование малоизвестной функции CSS element () для создания навигационной мини-карты
•
Буквы на чистом CSS, плохая, но забавная идея
•
Классика: как создать бьющееся сердце на чистом CSS для вашей валентинки
•
Единственная причина, по которой ваш CSS не работает
•
Создание современной карусели с CSS scroll snap, плавной прокруткой и pinch-zoom
•
Position: stuck;?—?и способ это исправить
• HTML-слайдер без фреймворков, просто CSS
•
Что нового в JavaScript ES2019
•
Новые функции JavaScript, которые изменят то, как вы пишете Regex
•
Как справиться с пятью распространенных задачами на интервью по JavaScript
•
React vs. Vue (Todo App) на примере
•
7 шаблонизаторов JavaScript с примерами кода
•
Нуждаемся ли мы все еще в JavaScript-фреймворках?
•
Первые мысли о Deno, среде JavaScript/TypeScript
•
Обфусцированный javascript, мошеннические электронные письма и American Express
•
Новое в браузерах: Firefox 66 по умолчанию блокирует видео и звук, Chromium ограничивает бюджет страниц
• В Firefox 67 ожидается блокировщик скриптов для майнинга и скрытой идентификации
• Для Firefox развивается режим строгой изоляции страниц
• Microsoft просит перестать использовать Internet Explorer
• Opera добавила VPN в браузер для Android
• Для Chrome реализован режим экономии ресурсов
• Из браузера Safari убирают функциональность Do Not Track
•
Canary-сборка Chrome 74 для Windows 10 и macOS теперь сама переходит на тёмную тему, если таковая включена в настройках системы
• Империя Amazon — список всех подразделений онлайн-гиганта
• Как Салман Хан создал Khan Academy и получил миллионы долларов инвестиций
• Microsoft добавила в Skype размытие фона для видеозвонков
• Блокчейн – следующий этап эволюции интеграций
• Facebook — 15 лет: вот 15 событий, которые определили будущее соцсети
• Сотрудники Facebook создали игру, которая позволит проверить, какой ты UI-дизайнер
• Проблему точек в адресах Gmail все еще используют хакеры
?
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
•

•

•


• SunFox — BurnoutJS — трек, который не оставит равнодушным JS-разработчиков
Веб-разработка
•

•

•

•

• Как быстро создать десктопное приложение на HTML, CSS и JavaScript
•

•

- Производительность:
• CSS и производительность сети
• Google: показатель PageSpeed Insights может меняться независимо от изменений на сайте
•Рендеринг в вебе. Статья Jason Miller и Addy Osmani о вариантах и нюансах рендера в браузере и возможностях его оптимизации
•GTMetrix — Как использовать GTMetrix для анализа и повышения скорости сайта
•Как время загрузки страницы влияет на доход вашего сайта?
•Делаем Google Шрифты Быстрее
- Инструменты:
• Список инструментов разработчика JavaScript
•Новые функции в Webpack 5
•git-history: быстрый просмотр истории любого GitHub файла
- Accessibility:
•Пожалуйста, прекратите создавать недоступные формы (и как их исправить)
•Возвращаясь к элементу abbr
•Ссылки, которые никуда не ведут, должны быть кнопками
•The “C” Is For Accessibility — доклад Evangelina Ferreira с Fronteers
- Анимация:
•SVG фильтры 101
•Эффекты фильтров SVG: контурный текст при помощи feMorphology
•Эффект искажения текста с помощью Blotter.js
•Подборка с вдохновляющими сайтами #1
•Пузырная анимация текста с помощью SVG и Text Clipping
CSS
•

• Новые логические свойства в CSS!
•

•

•

•

•

•

•

• HTML-слайдер без фреймворков, просто CSS
JavaScript
•

•

•

•

•

•

•

•

- Практика:
•Точная оценка времени чтения статей на Medium в JavaScript
•Как обнаружить последовательность нажатий клавиш в JavaScript
•Анимируйте ваши цифры как Робингуд
- Теория:
•Подробности о JavaScript-объектах
•Разбираемся с асинхронностью в JavaScript [Перевод статьи Sukhjinder Arora]
•Работа с часовыми поясами в JavaScript
•Как работают генераторы в JavaScript.
•Мастер JavaScript: как дела с ‘this’?
React:
Команда React начала кампанию по переводу документации. Приглашаются переводчики, желающие заняться русским переводом, в котором также участвует и Ден Абрамов. Кроме того, собирается команда мейнтейнеров по переводу документации на украинский язык. Прогресс перевода на разные языки можно отслеживать на ресурсе Is React Translated Yet?
•React & БЭМ – официальная коллаборация. Часть историческая
•Redux. Простой как грабли
•Релиз React v16.8: того самого, который с хуками
•Как загрузить данные в React с помощью redux-thunk, redux-saga, susse, & hooks
•Как начать работу с React Hooks: контролируемые формы
•React как пользовательский интерфейс
•Глобальное управление состоянием в React без бойлерплейта
•Создание онлайн-панели мониторинга в React
VueJS:
•Релиз Vue 2.6
•Что значат хуки для Vue
•Производительность в Vue — часть 2
•Vuethereum: библиотека Vue, которую заслуживает Ethereum
•Новое в Vue: ES Module Browser Build
•Оптимизация производительности приложения Vue.js: часть 2 — Lazy loading routes и вендорный bundle anti-pattern
Angular:
•The Need for Speed: не маршрутизируемые модули с ленивой загрузкой в Angular
•Планы на версию 8.0 и Ivy
•Раскройте силу форм с помощью Angular’s Reactive Forms
•Как реализовать локализацию в Angular с помощью инструментов i18n
- Libs & Plugins:
•MiniSearch — Крошечная, но мощная полнотекстовая поисковая система для браузера и Node
•uppy — это элегантный модульный загрузчик файлов JavaScript, который легко интегрируется с любым приложением.
•timetable-fns: полезные утилиты для работы с датами и временем в расписаниях
•x-spreadsheet: эксель таблицы на JavaScript
Браузеры
•

• В Firefox 67 ожидается блокировщик скриптов для майнинга и скрытой идентификации
• Для Firefox развивается режим строгой изоляции страниц
• Microsoft просит перестать использовать Internet Explorer
• Opera добавила VPN в браузер для Android
• Для Chrome реализован режим экономии ресурсов
• Из браузера Safari убирают функциональность Do Not Track
•

Занимательное
• Империя Amazon — список всех подразделений онлайн-гиганта
• Как Салман Хан создал Khan Academy и получил миллионы долларов инвестиций
• Microsoft добавила в Skype размытие фона для видеозвонков
• Блокчейн – следующий этап эволюции интеграций
• Facebook — 15 лет: вот 15 событий, которые определили будущее соцсети
• Сотрудники Facebook создали игру, которая позволит проверить, какой ты UI-дизайнер
• Проблему точек в адресах Gmail все еще используют хакеры
?
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.