Гайд по использованию 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...
Hyperscript Tagged Markup (htm) — альтернатива JSX, использующая стандартные шаблоны с тегами, с поддержкой компилятора👇
🔸Используйте JSX-подобный синтаксис в простом JavaScript (транспилятор не требуется)
🔸Разрабатывайте с помощью React/Preact прямо в браузере, а затем компилируйте htm для продакшена
🔸Он использует стандартные JavaScript tagged templates и работает во всех современных браузерах
📌htm в цифрах:
🐣 < 600 байт при использовании непосредственно в браузере
⚛️ < 500 байт при использовании с Preact (спасибо gzip 🌈)
🥚 < 450 байт версия htm/mini
🏅 0 байт при компиляции с помощью babel-plugin-htm
🔗 GitHub
🔸Используйте JSX-подобный синтаксис в простом JavaScript (транспилятор не требуется)
🔸Разрабатывайте с помощью React/Preact прямо в браузере, а затем компилируйте htm для продакшена
🔸Он использует стандартные JavaScript tagged templates и работает во всех современных браузерах
📌htm в цифрах:
🐣 < 600 байт при использовании непосредственно в браузере
⚛️ < 500 байт при использовании с Preact (спасибо gzip 🌈)
🥚 < 450 байт версия htm/mini
🏅 0 байт при компиляции с помощью babel-plugin-htm
🔗 GitHub
🤩Подборка бесплатных API на любой случай жизни
Здесь вам и база данных продуктов/рецептов для приложений о ЗОЖ, и коллекция цитат знаменитых людей, и база данных с видеоиграми, и многое другое. Одним словом, маст хэв для ваших проектов.
Здесь вам и база данных продуктов/рецептов для приложений о ЗОЖ, и коллекция цитат знаменитых людей, и база данных с видеоиграми, и многое другое. Одним словом, маст хэв для ваших проектов.