Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «CSSSR»: Новости 512 – Vue 3 разборки, микросервисы, бенчмарки, свежие релизы и немного о супер-компьютерах
•
Подкаст «CSSSR», Remote Talk #06: Scala и frontend, Scalalaz, блокчейн Steam и веб-фреймворк Korolev
•
Подкаст «Пятиминутка React»: Скринасты Пятиминутки React на YouTube
•
Подкаст «Repozitorro» #19 — Всё так хорошо начиналось и так печально закончилось
•
Подкаст «Pro Conf» #17 HolyJS 2016 — 2018
•
CSS Day 2019 + UI Special
•
Как делать сайты в 2019 году
•
Почему я не использую веб-компоненты
• 10 полезных советов по реализации Pixel Perfect дизайна в Frontend разработке
•
Как разделить ваш HTML на секции
•
Техника Reduced Motion для Picture
•
Урок по веб-компонентам для начинающих [2019]
•
Микро фронтенды
•
Как создать PDF из вашего веб-приложения
•
Все, что вам нужно знать о Progressive Web App (PWA)
•
Перетаскиваемое меню с анимированной сеткой превьюшек
•
Korolev: Таблетка для похудения в сети. Алексей Фомкин о своем веб-фреймворке
•
Почему мы предпочитаем CSS(--variable) переменным SASS($variable)?
• Введение в CSS Shapes
• Галерея картинок в стиле Pinterest
• CSS свои?ство background-image как антипаттерн
•
CSS day 2019: Часть 1: UI special (1/2), Часть 1: UI special (2/2)
•
CSS Day 2019: кое-какие вещи, которые я узнал
•
Буквица и системы дизайна
•
Copy-and-Paste CSS Animation Cheat Sheets
•
CSS Scroll Snap обновлен в Firefox 68
•
CJSS — Веб-фреймворк на основе CSS
•
Программирование на JavaScript для токарного станка
•
Элегантная обработка ошибок в JavaScript с помощью монады Either
•
Создание Micro Frontends с помощью React, Vue и Single-spa
•
Использование сервис-воркеров в Google Search
•
5 функций ES2019, которые вы можете использовать сегодня
• Chrome предупредит об опасных URL и обзаведется расширением Suspicious Site Reporter
• Новый браузер Microsoft Edge на базе Chromium теперь доступен для пользователей Windows 7 и Windows 8
• Для Firefox развивается режим блокировки виджетов социальных сетей и Firefox Proxy
• Для Firefox 69 подготовлен генератор паролей и режим блокировки автовоспроизведения видео
• 5 браузеров, на которые стоит перейти, если вы заботитесь о своей приватности
• Против сотрудников Coinbase использовали две 0-day уязвимости в Firefox
• Расширение для Chrome подменяло результаты поиска
•
Как включить экспериментальные функции веб-платформы в Chrome и Firefox
• Microsoft реализует нативное удаление PWA-приложений
• В PowerPoint появится ИИ-помощник для репетиции речи
• Microsoft добавит в PowerPoint виртуального помощника для репетиции речи — он укажет на слова-паразиты и другие ошибки
• Предугадать и исправить типичные ошибки пользователей при взаимодействии с сайтом
• GitHub приобрёл разработчика сервиса для совместной проверки кода Pull Panda и сделал его инструменты бесплатными
• Facebook представила международную криптовалюту Libra. Ее поддержали Visa, Mastercard, PayPal и многие другие, запуск — в первой половине 2020 года
• Первый взгляд на Facebook Libra
• Больше складных экранов, меньше подкастов: что ждёт технологии в 2019 году
?
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
•

•

•

•

•

•


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

•

• 10 полезных советов по реализации Pixel Perfect дизайна в Frontend разработке
•

•

•

•

•

•

•

•

- Производительность:
•4 приема, которые помогли нам оптимизировать frontend
•Как увеличить размер страницы на 1500% с помощью webpack и Vue
•Оптимизация производительности Google Fonts
•Самый простой способ ускорить медленный сайт
•Как повысить производительность вашего веб-приложения — 5 советов для разработчиков
•exthouse: инструмент мониторинга производительности браузерных расширений и их влияние на общий уровень производительности для пользователей
- Accessibility:
•Анатомия доступных форм: лучшие практики
•Преобразование div в доступные псевдокнопки
•5 шагов к доступной веб-типографике
CSS
•

• Введение в CSS Shapes
• Галерея картинок в стиле Pinterest
• CSS свои?ство background-image как антипаттерн
•

•

•

•

•

•

JavaScript
•

•

•

•

•

- Теория:
•13 полезных однострочников на JavaScript
•Лямбда-исчисление в JavaScript?
•Основы JS: движок JavaScript
VueJS:
•Темный день для Vue.js
•5 чрезвычайно простых способов ощутимо повысить скорость вашего VueJS-приложения
•JavaScript.Ninja: VueJS: Продолжаем о 3.х
•Начало работы с Vuex: руководство для начинающих
•Передача переменных в CSS в компонентах Vue
•Используйте Data Binding Options во Vue.js для реактивных приложений
•Введение в хуки жизненного цикла Vue
•Создание CRUD приложения с Vue и GraphQL
•Vue без View — Введение в Renderless компоненты
React:
•Анонс новой версии Styled Components v5: Звериный оскал
•5 отличных способов анимировать React-приложения в 2019 году
•11 советов для тех, кто использует Redux при разработке React-приложений
•Как добавить интернационализацию (i18n) в приложение Preact
•React c 60 кадров в секунду ?—? создание увеличителя Medium-стиле c React-Pose
•Упрощение React State и хуков useState
•Что это за хрень в React? (Suspense)
Angular:
•19 концепций, которые нужно изучить для того, чтобы стать эффективным Angular-разработчиком
•Пользовательские директивы Angular
•Создание масштабируемых, надежных и безопасных форм с помощью Angular
- Ember
•EmberJS2019 Posts
•Как новый синтаксис тестов позволяет упростить тестирование
•Встроенные инпут-хелперы в Ember.js: когда онт должны использоваться?
•Как на самом деле создать первоклассное приложение бесплато?
•Essential Ember Addons: состояние экосистемы аддонов в Ember в 2019
- Libs & Plugins:
•ts-toolbelt: ещё более безопасная типизация для TypeScript
•spotlight: библиотека для наиболее лёгкой интеграции галереи в попапе
•Just — библиотека от microsoft для определения задач сборки
•deepmerge — библиотека для глубокого (рекурсивного) слияния Javascript объектов
Браузеры
• Chrome предупредит об опасных URL и обзаведется расширением Suspicious Site Reporter
• Новый браузер Microsoft Edge на базе Chromium теперь доступен для пользователей Windows 7 и Windows 8
• Для Firefox развивается режим блокировки виджетов социальных сетей и Firefox Proxy
• Для Firefox 69 подготовлен генератор паролей и режим блокировки автовоспроизведения видео
• 5 браузеров, на которые стоит перейти, если вы заботитесь о своей приватности
• Против сотрудников Coinbase использовали две 0-day уязвимости в Firefox
• Расширение для Chrome подменяло результаты поиска
•

Занимательное
• Microsoft реализует нативное удаление PWA-приложений
• В PowerPoint появится ИИ-помощник для репетиции речи
• Microsoft добавит в PowerPoint виртуального помощника для репетиции речи — он укажет на слова-паразиты и другие ошибки
• Предугадать и исправить типичные ошибки пользователей при взаимодействии с сайтом
• GitHub приобрёл разработчика сервиса для совместной проверки кода Pull Panda и сделал его инструменты бесплатными
• Facebook представила международную криптовалюту Libra. Ее поддержали Visa, Mastercard, PayPal и многие другие, запуск — в первой половине 2020 года
• Первый взгляд на Facebook Libra
• Больше складных экранов, меньше подкастов: что ждёт технологии в 2019 году
?
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Комментарии (3)
Valery4
24.06.2019 20:13Так, просто поворчать…
10 полезных советов по реализации Pixel Perfect дизайна в Frontend разработке
Ну зачем этот pixel perfect вообще нужен?
Хорошо не приходилось работать в местах где это требуется.
akeinhell
В секцию реакта попала ссылка про vue
alexzfort Автор
[fixed]