Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «Веб-стандарты», 188. Адресная книга, Hermes, PageSpeed, DevTools, ndb, Puppeteer, PiterJS
•
Подкаст CSSSR: Новости 512 — 25 лет PHP, Github Actions, дизайн, CSS и оптимизация Instagram
•
Подкаст «devschacht» #90: Лайв со SkyEng про удалённую работу
•
Подкаст «devschacht» #89: Роман Прудников про работу в 2ГИС и Яндекс Музыке.
•
Подкаст «Фронтенд Юность (18+)» #103: Маленькая чёрная дыра — Приют для Столлмана
•
«Repozitorro» #24: Портфолио джуниора под другим углом...
•
Подкаст «Веб-стандарты», №187. HTML semantics, Web Components, W3C and WHATWG, HTML5 Doctor, Prince XML, Web Monetization
•
Now Live: Your SmashingConf Toronto Playlist
• Фантастические веб-спецификации и где они обитают
•
Простое введение в Web Workers в JavaScript
•
Создание интерактивных оптимизированных электронных писем с помощью AMP Framework от Google
•
Почему современная веб-разработка так сложна? Длинное, но поспешное объяснение: часть 1
•
Что лучше: программа лояльности PWA или мобильное приложение?
•
Contact Picker API, детали нового API в блоге разработчиков Google
•
Блеск Mavo при создании интерактивных веб-приложений
• Пользовательские CSS-атрибуты как механизм передачи данных из JavaScript в CSS
•
Writing Modes и CSS Layout
•
Изучение CSS, читая спецификации
•
Обработка неиспользуемого CSS в SASS для повышения производительности
•
CSS :empty Selector
•
Еженедельные новости платформы: CSS font-style: oblique, webhin browser extension, CSS Modules V1
•
Принципы дизайна для разработчиков: процессы и советы по CSS для лучшего веб-дизайна
•
Перемещение текста по изогнутой траектории
•
5 классных CSS Grid генераторов для ваших раскладок
•
Субпиксельный рендеринг и границы
•
Как я не занял первое место в конкурсе для JavaScript-разработчиков от Telegram
• Современный учебник JavaScript. Большое обновление популярного ресурса от Ильи Кантора
•
Как реализовать Drag & Drop для HTML элементов и файлов с помощью Javascript
•
Создание моего первого приложения на Svelte: мысли и впечатления
•
Client-side JS Redirects: может ли робот Googlebot их обнаружить?
• Найден метод для определения просмотра в режиме инкогнито в Chrome 76
• В Chrome 78 Canary тестируется функция принудительного тёмного режима для всех сайтов
• В ночные сборки Firefox добавлен режим строгой изоляции страниц
•
Заметки к релизу Safari Technology Preview 89
• Атака на системы фронтэнд-бэкенд, позволяющая вклиниться в сторонние запросы
• Google выделила подкасты в результатах поиска
• Huawei официально представила распределённую операционную систему HarmonyOS
• В процессорах выявлена новая уязвимость, обходящая защиту против Spectre и Meltdown
• Подрядчики Microsoft прослушивают некоторые разговоры пользователей Skype
• Придумать популярную игру, но не заработать на ней: история «Тетриса» и его изобретателя
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
Веб-разработка
• Фантастические веб-спецификации и где они обитают
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- Производительность:
•Особенности Google PageSpeed: улучшение оценки сайта и его рейтинга в поиске
•Largest Contentful Paint (LCP). Новая метрика производительности, которая поможет измерить время загрузки основного содержимого веб-страницы.
•Time to First Byte: что это такое и почему это важно
•Нативная ленивая загрузка в вебе
•Нативный Lazy-Loading уже работает в Chrome 76!
•Установите сетевые подключения заранее, для улучшения воспринимаемой скорости страницы
•Высокопроизводительная обработка инпута в вебе
- Tools:
•5 полезных плагинов для webpack
•Руководство по горячим клавишам Visual Studio Code, для более высокой продуктивности и 30 моих любимых сокращений, которые стоит выучить
•SVG Gobbler — простое расширение, которое находит SVG в текущем окне, выделяет уникальные атрибуты, включая размер, и позволяет загружать или копировать в буфер обмена уже оптимизированную версию
- Accessibility:
•Web Accessibility vs. Usability
•Неожиданные советы по доступности
- Анимация:
•Эффект оставления следов изображениями при движении мыши
•Подобка впечатляющих сайтов Inspirational Websites Roundup #7
•Как создать веб-анимацию с Anime.js
CSS
• Пользовательские CSS-атрибуты как механизм передачи данных из JavaScript в CSS
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
JavaScript
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Современный учебник JavaScript. Большое обновление популярного ресурса от Ильи Кантора
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
- Теория:
•Часто задаваемые вопросы о системах типов
•Defined or Undefined? Нюансы создания массивов в JavaScript
•Использование let объявлений переменных и особенности образуемых при этом замыканий в JavaScript
•Design Patterns #1 — Singleton (Одиночка)
•Работаем с ECMAScript 2019 Asynchronous Iteration с помощью for-of
•Intl.NumberFormat
•Интересные варианты использования битовых операторов JavaScript
•JavaScript Promise комбинаторы: .all(), .race(), .allSettled()
React:
•Анимированное руководство по базовым механизмам React
•Релиз React v16.9.0 и обновление дорожной карты
•Что нового в React v16.9
•Как работает Development Mode Work?
•Создание мобильных приложений с Ionic и React
•useEffect или useLayoutEffect на простом доступном языке
•Использование Immer для управлением состоянием React приложения
VueJS:
• Создание SPA на Vue.js поверх Headless WordPress
•Как настроить среду разработки для Vue
•Модификация данных компонента с помощью источников событий во Vue.js
•Получая больше от асинхронных Vue компонентов
Angular:
•Использование функции async-await в Angular
•Асинхронные модули и компоненты в Angular Ivy
•На пути к Angular 9: три исправленных ошибки в Angular 9
•Как обмениваться Angular компонентами между проектами и приложениями
- Ember:
•Обработка атрибутов Foreign Key в API с данными Ember
•Пишем тесты, как математики: Часть 1
•EmberMap Podcast — Object references considered helpful
•EmberMap Podcast — You gotta feel the pain
- Libs & Plugins:
•sharec — проект для замены бойлерплейтов и пакетов типа Create React App, который позволяет обновлять конфиги и позволяет вносить в них изменения
•Frosted Panel — кросс-браузерная библиотека на чистом JS для реализации отзывчивого эффекта «Замерзшего Стекла»
•murphyjs: простой способ реализовать анимацию, основанную на прокрутке, в ваших компонентах.
Браузеры
• Найден метод для определения просмотра в режиме инкогнито в Chrome 76
• В Chrome 78 Canary тестируется функция принудительного тёмного режима для всех сайтов
• В ночные сборки Firefox добавлен режим строгой изоляции страниц
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
Занимательное
• Атака на системы фронтэнд-бэкенд, позволяющая вклиниться в сторонние запросы
• Google выделила подкасты в результатах поиска
• Huawei официально представила распределённую операционную систему HarmonyOS
• В процессорах выявлена новая уязвимость, обходящая защиту против Spectre и Meltdown
• Подрядчики Microsoft прослушивают некоторые разговоры пользователей Skype
• Придумать популярную игру, но не заработать на ней: история «Тетриса» и его изобретателя
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Комментарии (3)
naarende
14.08.2019 20:02Спасибо. Открыл сотню вкладок в браузере.
Сколько вы мониторите ресурсов для сборки этих дайджестов?
Руками выбираете новости?alexzfort Автор
15.08.2019 10:09Всегда пожалуйста. Ресурсов мониторится много — от социалок до частных блогов и рассылок. Выбираем вручную на свое усмотрение
Imbecile
Важное предложение по реактивности Ангуляра.