📺Гайд по использованию Document Picture-in-Picture API и Insertable Streams для записи экрана и камеры
❓Document Picture-in-Picture API позволяет поддерживать любой произвольный HTML-контент в окне Picture-in-Picture. Это открыло возможность для создания инновационных взаимодействий и улучшения рабочих процессов, таких как запись экрана.
🤩И хоть Document Picture-in-Picture API все еще находится в стадии тестирования, вы уже сейчас можете попробовать его использовать вместе с Insertable Streams для разработки простого инструмента записи экрана и камеры.
📌Что получаем в итоге? Пользователь сможет видеть свою камеру и управлять записью, беспрепятственно используя вкладку или окно браузера, которые выбраны для записи. А потоки экрана и камеры будут объединены в один видеофайл.
❓Document Picture-in-Picture API позволяет поддерживать любой произвольный HTML-контент в окне Picture-in-Picture. Это открыло возможность для создания инновационных взаимодействий и улучшения рабочих процессов, таких как запись экрана.
🤩И хоть Document Picture-in-Picture API все еще находится в стадии тестирования, вы уже сейчас можете попробовать его использовать вместе с Insertable Streams для разработки простого инструмента записи экрана и камеры.
📌Что получаем в итоге? Пользователь сможет видеть свою камеру и управлять записью, беспрепятственно используя вкладку или окно браузера, которые выбраны для записи. А потоки экрана и камеры будут объединены в один видеофайл.
⚒️ typograms — интересный способ элегантного рендеринга диаграмм ASCII. Это проект, с помощью которого вы «рисуете» диаграммы простым текстом ASCII со специальными тегами script, и они визуализируются в гораздо более привлекательных версиях. Отличная альтернатива, если Mermaid не подходит для ваших задач.
🔗 GitHub
🔗 GitHub
382. Safari, Sanitizer API, PWA на iOS, Firefox, ChatGPT, SVG-анимации…
Веб-стандарты
#подкасты
🎙 Подкаст «Веб-стандарты»: Алексей Симоненко, Юля Миоцен, Никита Дубко про Safari, Sanitizer API, PWA на iOS, расшишения Firefox, краулер ChatGPT, SVG-анимации, шаблонизацию и опять Jamstack.
00:01:54 Safari TP
00:08:46 Storage Policy в Safari
00:20:56 Переделка Sanitizer API
00:28:17 PWA в Chrome на iOS
00:31:59 Расширения Firefox
00:36:31 Краулер ChatGPT уходи
00:46:40 SVG-анимации
00:52:09 Будущее HTML-шаблонизации
01:06:56 Jamstack точно всё
01:18:50 Ответы на вопросы
🔗 Слушайте на Ютубе
🔗 Ссылки на сайте
00:01:54 Safari TP
00:08:46 Storage Policy в Safari
00:20:56 Переделка Sanitizer API
00:28:17 PWA в Chrome на iOS
00:31:59 Расширения Firefox
00:36:31 Краулер ChatGPT уходи
00:46:40 SVG-анимации
00:52:09 Будущее HTML-шаблонизации
01:06:56 Jamstack точно всё
01:18:50 Ответы на вопросы
🔗 Слушайте на Ютубе
🔗 Ссылки на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
🔧 schema — библиотека, которая позволяет определять и использовать схемы для валидации и преобразования данных в TypeScript.
🔗 GitHub
🔗 GitHub
📌Подборка для фронтенд-разработчика:
🌐 Гибридное мобильное приложение с нуля за 3 недели — Зулейха Ибрагимова, Frontend Team Lead в X5 Tech
🌐 Как мы ускорили фронтенд Практикума в несколько раз — Алексей Яковлев, Frontend Community Lead в Яндекс Практикуме
🌐 Что происходит в браузере после того, как пользователь ввёл адрес в адресную строку — Екатерина Танькова, Фронтенд-разработчик в Яндекс Маркете
🌐 Последние тенденции на рынке IT глазами HR — Илья Морозов, Lead IT Recruiter Yandex
Please open Telegram to view this post
VIEW IN TELEGRAM
#холивар
💬Как вы относитесь к Flutter? Может быть вы используете его для разработки веб-приложений и можете поделиться опытом?
🤔В связи с тем, что фреймворк Flutter + язык программирования Dart можно использовать для разработки проекта под любую платформу, не остался ли веб в стороне?
Если кто-то не знает, многие считают Dart будущим всей мобильной, веб- и десктопной разработки. По сравнению с JavaScript + React Native, Dart полностью объектно-ориентирован и строго типизирован. Это значит, что код на Dart гораздо более устойчив к ошибкам и намного проще в поддержке.
💬Как вы относитесь к Flutter? Может быть вы используете его для разработки веб-приложений и можете поделиться опытом?
🤔В связи с тем, что фреймворк Flutter + язык программирования Dart можно использовать для разработки проекта под любую платформу, не остался ли веб в стороне?
Если кто-то не знает, многие считают Dart будущим всей мобильной, веб- и десктопной разработки. По сравнению с JavaScript + React Native, Dart полностью объектно-ориентирован и строго типизирован. Это значит, что код на Dart гораздо более устойчив к ошибкам и намного проще в поддержке.
❗«Библиотека программиста» в поиске контент-менеджера для ведения телеграм-каналов
Ищем человека, который грамотно пишет, разбирается в контенте и в одной из этих трех тем:
👉Data Science
👉Frontend
👉мобильная разработка
Мы предлагаем частичную занятость и полностью удаленный формат работы — можно совмещать с основной и находиться в любом месте🌴
Подробнее о вакансии и форма для отклика — по ссылке.
Ждем вас в команде!
Ищем человека, который грамотно пишет, разбирается в контенте и в одной из этих трех тем:
👉Data Science
👉Frontend
👉мобильная разработка
Мы предлагаем частичную занятость и полностью удаленный формат работы — можно совмещать с основной и находиться в любом месте🌴
Подробнее о вакансии и форма для отклика — по ссылке.
Ждем вас в команде!
Гайд по использованию RxDB в качестве базы данных для приложений React
🚀RxDB — это реактивная автономная база данных специально для JavaScript-приложений. Она предлагает комплексный API для выполнения действий с базой данных и синхронизации данных между клиентами и серверами.
Основная философия RxDB вращается вокруг наблюдаемости (observability), что позволяет разработчикам оперативно управлять изменениями данных и создавать динамический UI.
🔗 Читать
🚀RxDB — это реактивная автономная база данных специально для JavaScript-приложений. Она предлагает комплексный API для выполнения действий с базой данных и синхронизации данных между клиентами и серверами.
Основная философия RxDB вращается вокруг наблюдаемости (observability), что позволяет разработчикам оперативно управлять изменениями данных и создавать динамический UI.
🔗 Читать
#css #tip by Андрей Ситник
Не используйте кучу JavaScript’а для тёмной и светлой темы. useMedia() и т. п. приводят к тому, что сайт вспыхнет белым при загрузке JS.
Делайте переключение темы в CSS через специальное медиа-выражение. А чтобы работал переключатель, возьмите этот PostCSS-плагин.
Андрей Ситник как раз выпустил новую версию 0.8, где классы для JS-переключателя добавляются с :where().
:where() имеет нулевую специфичность и плагин теперь не меняет специфичность селекторов.
Не используйте кучу JavaScript’а для тёмной и светлой темы. useMedia() и т. п. приводят к тому, что сайт вспыхнет белым при загрузке JS.
Делайте переключение темы в CSS через специальное медиа-выражение. А чтобы работал переключатель, возьмите этот PostCSS-плагин.
Андрей Ситник как раз выпустил новую версию 0.8, где классы для JS-переключателя добавляются с :where().
:where() имеет нулевую специфичность и плагин теперь не меняет специфичность селекторов.
💰 Обзор зарплат: сколько сейчас зарабатывают айтишники
В этой статье обсуждаем самую животрепещущую тему — зарплату. Присоединяйтесь :)
🔗 Читать статью
🔗 Зеркало
В этой статье обсуждаем самую животрепещущую тему — зарплату. Присоединяйтесь :)
🔗 Читать статью
🔗 Зеркало
This media is not supported in your browser
VIEW IN TELEGRAM
#devtool #tip by Addy Osmani
💡Chrome Dev Tools теперь может переопределять содержимое запросов Fetch/XHR. Отлично подходит для мокинга API, ведь теперь не надо ждать изменения на бэкэнде. Про эти и многие другие изменения Chrome 117 читайте в блоге.
💡Chrome Dev Tools теперь может переопределять содержимое запросов Fetch/XHR. Отлично подходит для мокинга API, ведь теперь не надо ждать изменения на бэкэнде. Про эти и многие другие изменения Chrome 117 читайте в блоге.
frontend.pdf
136.2 KB
#холивар
Вы посоветовали бы данную дорожную карту для начинающих фронтенд-разработчиков? Если да, есть ли какие-то важные аспекты, которых в ней не хватает? Может быть в ней есть то, что вообще неуместно?
Вы посоветовали бы данную дорожную карту для начинающих фронтенд-разработчиков? Если да, есть ли какие-то важные аспекты, которых в ней не хватает? Может быть в ней есть то, что вообще неуместно?
Бесплатный IT-интенсив: алгоритмы и структуры данных
😱Мы пригласили несколько крупных разработчиков из Yandex, Sharechat и даже Meta*.
👉 Регистрируйтесь – https://proglib.io/w/89be6e70
Программа вебинаров на август:
🗓 14 августа (уже прошел, отправим вам запись) «NP-трудные задачи: почему их плохо решают».
🎙Спикер: Дмитрий Коротенко, ML specialist at Yandex. (отправим вам запись)
🗓 22 августа, «Графы: алгоритмы и структуры данных на Python».
🎙Спикер: Иван Потапов, Staff machine learning engineer at Sharechat.
🗓 29 августа, «Собеседование на разработчика: разбор задач и ошибок».
🎙Спикер: Алексей Бочкарев, Engineering Manager at Meta*
👉Узнать подробнее и зарегистрироваться можно по ссылке: https://proglib.io/w/89be6e70
*Компания Meta признана в РФ экстремистской и запрещена
😱Мы пригласили несколько крупных разработчиков из Yandex, Sharechat и даже Meta*.
👉 Регистрируйтесь – https://proglib.io/w/89be6e70
Программа вебинаров на август:
🗓 14 августа (уже прошел, отправим вам запись) «NP-трудные задачи: почему их плохо решают».
🎙Спикер: Дмитрий Коротенко, ML specialist at Yandex. (отправим вам запись)
🗓 22 августа, «Графы: алгоритмы и структуры данных на Python».
🎙Спикер: Иван Потапов, Staff machine learning engineer at Sharechat.
🗓 29 августа, «Собеседование на разработчика: разбор задач и ошибок».
🎙Спикер: Алексей Бочкарев, Engineering Manager at Meta*
👉Узнать подробнее и зарегистрироваться можно по ссылке: https://proglib.io/w/89be6e70
*Компания Meta признана в РФ экстремистской и запрещена
This media is not supported in your browser
VIEW IN TELEGRAM
🤩Discover three.js — полное введение в веб как платформу для 3D-графики с использованием библиотеки three.js WebGL.
Эта онлайн-книга представляет собой полную серию учебных пособий, которые помогут начать работу по созданию современных 3D-приложений профессионального качества в кратчайшие сроки.
Широта предлагаемого контента заставила искать цену, но все это онлайн и бесплатно. Здесь есть над чем покопаться, если вы хотите начать (или просто улучшить) работу с three.js.
Уже знакомы с three.js? Тогда обратите внимание на страницу советов и рекомендаций по three.js.
Эта онлайн-книга представляет собой полную серию учебных пособий, которые помогут начать работу по созданию современных 3D-приложений профессионального качества в кратчайшие сроки.
Широта предлагаемого контента заставила искать цену, но все это онлайн и бесплатно. Здесь есть над чем покопаться, если вы хотите начать (или просто улучшить) работу с three.js.
Уже знакомы с three.js? Тогда обратите внимание на страницу советов и рекомендаций по three.js.
This media is not supported in your browser
VIEW IN TELEGRAM
#чтопроисходит
📌 Подборка для фронтенд-разработчика:
⚡️ Вышел Chrome 116. Что нового: Document Picture-in-Picture API, свойство notRestoredReasons и многое другое.
🔸Анонс Electron 26.0. Значительное изменение номера версии связано с обновлением до кодовой базы Chromium 116, платформы Node.js 18.16.1 и JavaScript-движка V8 11.2.
🔸Анонс Fresh 1.4, веб-фреймворка на базе Deno.
🔸jest-dom 6.0.1 — кастомные матчеры Jest.
🔸NodeBB 3.3.1 — движок для форумов на базе Node.js.
🔸Angular 16.2
🔸Playwright 1.37.0 — фреймворк для веб-тестирования и автоматизации.
🔸SVGR 8.1 — преобразование SVG в React-компоненты.
🔸BlockNote 0.9 — блочный редактор в стиле Notion, построенный на основе Prosemirror (демо)
🔸React Number Format 5.3 — библиотека форматирования ввода для чисел.
🔸Tinypool 0.8 — минималистичная имплементации Worker Thread Pool Node.js.
🔸melonJS 15.9 — легковесный игровой движок HTML5.
🔸Sortable 2.3 — ванильная сортировка таблиц JavaScript (демо)
🔸Preact 10.17.0 — быстрая альтернатива React размером с таким же современным API.
📌 Подборка для фронтенд-разработчика:
🔸Анонс Electron 26.0. Значительное изменение номера версии связано с обновлением до кодовой базы Chromium 116, платформы Node.js 18.16.1 и JavaScript-движка V8 11.2.
🔸Анонс Fresh 1.4, веб-фреймворка на базе Deno.
🔸jest-dom 6.0.1 — кастомные матчеры Jest.
🔸NodeBB 3.3.1 — движок для форумов на базе Node.js.
🔸Angular 16.2
🔸Playwright 1.37.0 — фреймворк для веб-тестирования и автоматизации.
🔸SVGR 8.1 — преобразование SVG в React-компоненты.
🔸BlockNote 0.9 — блочный редактор в стиле Notion, построенный на основе Prosemirror (демо)
🔸React Number Format 5.3 — библиотека форматирования ввода для чисел.
🔸Tinypool 0.8 — минималистичная имплементации Worker Thread Pool Node.js.
🔸melonJS 15.9 — легковесный игровой движок HTML5.
🔸Sortable 2.3 — ванильная сортировка таблиц JavaScript (демо)
🔸Preact 10.17.0 — быстрая альтернатива React размером с таким же современным API.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
#css #tip
По мотивам поста с советом про отступы для вложенных радиусов: как использовать кастомные свойства, чтобы определить радиус вложенности элементов👇
По мотивам поста с советом про отступы для вложенных радиусов: как использовать кастомные свойства, чтобы определить радиус вложенности элементов👇
.parent {
--nested-radius: calc(var(--radius) - var(--padding));
}
.nested {
border-radius: var(--nested-radius);
}
🔗 Код здесь⌛️⚒ Croner — cron для JavaScript и TypeScript. Запускайте функции по расписанию по вашему выбору, используя классический синтаксис cron. Работает в Node, Deno, Bun и браузере в разных часовых поясах, предлагает обработку ошибок, защиту от переполнения и многое другое.
Для любопытных на JSFiddle есть живая демонстрация. Инструмент активно поддерживается — недавно выпущена версия 7.0.
🔗 GitHub
Для любопытных на JSFiddle есть живая демонстрация. Инструмент активно поддерживается — недавно выпущена версия 7.0.
🔗 GitHub
🔍Насколько легко «войти в айти»?
IT — перспективная отрасль с высокими зарплатами и огромной конкуренцией. Собираем ваши истории: расскажите, как вам удалось сменить профессию (или сразу найти себя), какие шаги вы для этого предприняли и с какими сложностями пришлось столкнуться.
👉Пройдите наш 10-минутный опрос по ссылке.
IT — перспективная отрасль с высокими зарплатами и огромной конкуренцией. Собираем ваши истории: расскажите, как вам удалось сменить профессию (или сразу найти себя), какие шаги вы для этого предприняли и с какими сложностями пришлось столкнуться.
👉Пройдите наш 10-минутный опрос по ссылке.
HTTP/2 — вторая крупная версия сетевого протокола HTTP, которая является первой новой версией HTTP с версии HTTP 1.1. Спецификация HTTP/2 была опубликована как RFC 7540 в мае 2015 года.
И пока HTTP/3 находится в стадии черновика, самое время разобраться в HTTP/2, в алгоритмах установки соединения, формате кадров, примерах взаимодействия клиента с сервером и многом другом.
HTTP Frame {
# Заголовок
Length (24),
Type (8),
Flags (8),
Reserved (1),
Stream Identifier (31),
# Содержимое
Frame Payload (..),
}🔗 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
Разбираем HTTP/2 по байтам
Откройте любую статью с обзором HTTP/1.1. Скорее всего, там найдётся хотя бы один пример запроса и ответа, допустим, такие: GET / HTTP/1.1 Host: localhost HTTP/1.1 200 OK Date: Sat, 09 Oct 2010...