Проверка утечек личных данных от Google: «Dark Web Reports» станет бесплатным
После закрытия VPN-сервиса Google One, функция «Dark Web Reports» станет доступна всем владельцам Google-аккаунтов. Это произойдет в конце июля. Ранее функция была доступна лишь пользователям с подпиской Google One.
«Dark Web Reports» позволяет Google отслеживать дарквеб и уведомлять вас, если ваши личные данные были найдены в утечках и взломах. Вот как этим воспользоваться: https://tproger.ru/news/--proverka-utechek-lichnyh-dannyh-ot-google---dark-web-reports--stanet-besplatnym
#google #безопасность
Original post link: t.me/tproger_web/4689
Forwarded and filtered by @smartfeed_bot
После закрытия VPN-сервиса Google One, функция «Dark Web Reports» станет доступна всем владельцам Google-аккаунтов. Это произойдет в конце июля. Ранее функция была доступна лишь пользователям с подпиской Google One.
«Dark Web Reports» позволяет Google отслеживать дарквеб и уведомлять вас, если ваши личные данные были найдены в утечках и взломах. Вот как этим воспользоваться: https://tproger.ru/news/--proverka-utechek-lichnyh-dannyh-ot-google---dark-web-reports--stanet-besplatnym
#google #безопасность
Original post link: t.me/tproger_web/4689
Forwarded and filtered by @smartfeed_bot
🖥 Alien Staff Assets – более 20 PNG-элементов в футуристичном стиле. Шаблоны, изображения и иконки подойдут для веб-приложений развлекательного формата, а также для афиш и баннеров.
Сайтодел | #макет #figma
Original post link: t.me/sitodel/1847
Forwarded and filtered by @smartfeed_bot
Сайтодел | #макет #figma
Original post link: t.me/sitodel/1847
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Digital clock with separate indicators
Необычные часы, реализованные из трех svg-картинок, параметры которых задаются через JS с помощью логики вычисления текущего времени пользователя.
https://codepen.io/mortezasharifinia/pen/abEgNdJ
Original post link: t.me/senior_front/2113
Forwarded and filtered by @smartfeed_bot
Необычные часы, реализованные из трех svg-картинок, параметры которых задаются через JS с помощью логики вычисления текущего времени пользователя.
https://codepen.io/mortezasharifinia/pen/abEgNdJ
Original post link: t.me/senior_front/2113
Forwarded and filtered by @smartfeed_bot
Forwarded from Веб-страница
Playwright и Allure как хорошая практика для разработки веб-приложения
Разработчики вынуждены вечно искать баланс: как выпускать фичи быстро, качественно и желательно небольшой командой. Один из рабочих рецептов — это фронт + E2E-тесты.
E2E-тесты проверяют, как весь стек приложения работает вместе в реальной среде. Они имитируют действия конечного пользователя: нажатие кнопок, заполнение форм, навигацию по страницам и проверку содержимого.
Playwright предоставляет API для автоматизации действий в браузере. Он предлагает удобный способ создания и запуска E2E-тестов, благодаря поддержке браузеров Chromium, Firefox и WebKit, а также поддержке нескольких языков программирования: JavaScript, TypeScript, Python и других.
В статье автор рассказывает, как пользоваться этими инструментами и как прогонять порядка 1000 автотестов в сутки, имея всего 2 тестировщика вместо 15: https://habr.com/ru/companies/clevertec/articles/822583/
#react
Разработчики вынуждены вечно искать баланс: как выпускать фичи быстро, качественно и желательно небольшой командой. Один из рабочих рецептов — это фронт + E2E-тесты.
E2E-тесты проверяют, как весь стек приложения работает вместе в реальной среде. Они имитируют действия конечного пользователя: нажатие кнопок, заполнение форм, навигацию по страницам и проверку содержимого.
Playwright предоставляет API для автоматизации действий в браузере. Он предлагает удобный способ создания и запуска E2E-тестов, благодаря поддержке браузеров Chromium, Firefox и WebKit, а также поддержке нескольких языков программирования: JavaScript, TypeScript, Python и других.
В статье автор рассказывает, как пользоваться этими инструментами и как прогонять порядка 1000 автотестов в сутки, имея всего 2 тестировщика вместо 15: https://habr.com/ru/companies/clevertec/articles/822583/
#react
Forwarded from Senior Frontend - javascript, html, css
Что такое React Reconciliation (Cверка) и как он работает?
Reconciliation (Cверка) - это процесс, посредством которого React обновляет DOM. Когда состояние компонента изменяется, React должен рассчитать необходимость обновления DOM. Это делается путем создания виртуального DOM и сравнения его с текущим DOM. В этом контексте виртуальный DOM будет содержать новое состояние компонента.
При сравнении двух деревьев первым делом React сравнивает два корневых элемента. Поведение различается в зависимости от типов корневых элементов.
Всякий раз, когда корневые элементы имеют различные типы, React уничтожает старое дерево и строит новое с нуля.
При сравнении двух React DOM-элементов одного типа, React смотрит на атрибуты обоих, сохраняет лежащий в основе этих элементов DOM-узел и обновляет только изменённые атрибуты.
По умолчанию при рекурсивном обходе дочерних элементов DOM-узла React проходит по обоим спискам потомков одновременно и создаёт мутацию, когда находит отличие. Эта неэффективность может стать проблемой. Когда у дочерних элементов есть ключи, React использует их, чтобы сопоставить потомков исходного дерева с потомками последующего дерева.
👉 @seniorFront
Reconciliation (Cверка) - это процесс, посредством которого React обновляет DOM. Когда состояние компонента изменяется, React должен рассчитать необходимость обновления DOM. Это делается путем создания виртуального DOM и сравнения его с текущим DOM. В этом контексте виртуальный DOM будет содержать новое состояние компонента.
При сравнении двух деревьев первым делом React сравнивает два корневых элемента. Поведение различается в зависимости от типов корневых элементов.
Всякий раз, когда корневые элементы имеют различные типы, React уничтожает старое дерево и строит новое с нуля.
При сравнении двух React DOM-элементов одного типа, React смотрит на атрибуты обоих, сохраняет лежащий в основе этих элементов DOM-узел и обновляет только изменённые атрибуты.
По умолчанию при рекурсивном обходе дочерних элементов DOM-узла React проходит по обоим спискам потомков одновременно и создаёт мутацию, когда находит отличие. Эта неэффективность может стать проблемой. Когда у дочерних элементов есть ключи, React использует их, чтобы сопоставить потомков исходного дерева с потомками последующего дерева.
👉 @seniorFront
Forwarded from Веб-страница
Разработчик представил веб-сайт, который имитирует работу утилиты Disk Defragmenter в Windows 98, включая звуки HDD
Разработчик Деннис Морелло представил онлайн-проект Windows 98 Disk Defrag Simulator, который имитирует работу утилиты Disk Defragmenter в Windows 98, включая звуки HDD. На сайте можно посмотреть, как работала система дефрагментации дисковых носителей в Windows 98.
Для этого проекта Морелло использовал некоторые из самых мощных инструментов современной веб-разработки, включая:
— React для создания компонентов пользовательского интерфейса;
— Next.js для оптимизации производительности и SEO;
— Zustand для управления состоянием приложения;
— TailwindCSS для стилизации приложения вместе с 98.css для придания эстетики Windows 98;
— Radix UI Primitivesx для доступных интерактивных компонентов, таких как слайдеры и модальные окна;
— Vercel, хостинговую платформу для приложения.
Одной из самых больших проблем была реализация алгоритма дефрагментации, который выглядел бы аутентичным. Чтобы добиться точного внешнего вида Windows 98, требовалось пристальное внимание к деталям. Морелло использовал комбинацию 98.css и TailwindCSS. А чтобы добавить дополнительный слой ностальгии, Морелло реализовал реалистичные звуки жёсткого диска.
Ностальгируем: defrag98.com
#петпроект
Разработчик Деннис Морелло представил онлайн-проект Windows 98 Disk Defrag Simulator, который имитирует работу утилиты Disk Defragmenter в Windows 98, включая звуки HDD. На сайте можно посмотреть, как работала система дефрагментации дисковых носителей в Windows 98.
Для этого проекта Морелло использовал некоторые из самых мощных инструментов современной веб-разработки, включая:
— React для создания компонентов пользовательского интерфейса;
— Next.js для оптимизации производительности и SEO;
— Zustand для управления состоянием приложения;
— TailwindCSS для стилизации приложения вместе с 98.css для придания эстетики Windows 98;
— Radix UI Primitivesx для доступных интерактивных компонентов, таких как слайдеры и модальные окна;
— Vercel, хостинговую платформу для приложения.
Одной из самых больших проблем была реализация алгоритма дефрагментации, который выглядел бы аутентичным. Чтобы добиться точного внешнего вида Windows 98, требовалось пристальное внимание к деталям. Морелло использовал комбинацию 98.css и TailwindCSS. А чтобы добавить дополнительный слой ностальгии, Морелло реализовал реалистичные звуки жёсткого диска.
Ностальгируем: defrag98.com
#петпроект
Forwarded from Senior Frontend Developer | JavaScript, React, HTML & CSS
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация в стиле Хэллоуина
Sass - это расширение CSS, которое добавляет много дополнительных возможностей, таких как переменные, вложенность, функции и другие, которые могут упростить и ускорить написание CSS. Sass написан на Ruby и компилируется в обычный CSS. SCSS - это особый тип файла для Sass, который имеет синтаксис, похожий на CSS.
Этот код представляет собой набор инструкций на языке Sass, который является препроцессором CSS. Препроцессоры CSS расширяют возможности обычного CSS, позволяя использовать переменные, функции и другие конструкции для более гибкого и эффективного написания стилей.
Вот, что делает каждая часть кода:
1. Определение переменных:
2. Цикл
Цикл выполняется, пока значение
Для каждой итерации цикла создается элемент с классом
Каждому элементу задается атрибут
3. Определение функций:
4. Определение переменных:
5. Стили для элемента
Устанавливаются свойства для контейнера
6. Стили для элементов с классом
Определяются стили для элементов с классом
Анимация
Анимация
Этот код создает элементы с классом
🌐 Ссылка на код
Sass - это расширение CSS, которое добавляет много дополнительных возможностей, таких как переменные, вложенность, функции и другие, которые могут упростить и ускорить написание CSS. Sass написан на Ruby и компилируется в обычный CSS. SCSS - это особый тип файла для Sass, который имеет синтаксис, похожий на CSS.
Этот код представляет собой набор инструкций на языке Sass, который является препроцессором CSS. Препроцессоры CSS расширяют возможности обычного CSS, позволяя использовать переменные, функции и другие конструкции для более гибкого и эффективного написания стилей.
Вот, что делает каждая часть кода:
1. Определение переменных:
c - массив цветов.n - длина массива c.2. Цикл
while:Цикл выполняется, пока значение
n не станет равным 0.Для каждой итерации цикла создается элемент с классом
.lyr.Каждому элементу задается атрибут
style, в котором используются переменные n и c для установки значения --i и color.3. Определение функций:
gcd($a, $b) - функция для нахождения наибольшего общего делителя двух чисел.lcm($a, $b) - функция для нахождения наименьшего общего кратного двух чисел.4. Определение переменных:
$ua - значение 135.$lcm - наименьшее общее кратное между $ua и 360.$m0 - результат деления $lcm на $ua.$m1 - результат деления $lcm на 360.5. Стили для элемента
body:Устанавливаются свойства для контейнера
body, включая отображение в виде сетки, отступы, высоту и фон.6. Стили для элементов с классом
.lyr:Определяются стили для элементов с классом
.lyr, включая размеры, радиус границы, фон с использованием градиента и анимацию.Анимация
mov изменяет позицию фона элемента.Анимация
rot поворачивает элемент на определенный угол.Этот код создает элементы с классом
.lyr и применяет к ним стили, чтобы создать анимированный эффект. Конкретный внешний вид зависит от значений переменных и используемых цветов в массиве c.🌐 Ссылка на код
Forwarded from Senior Frontend - javascript, html, css
Обучающие игры для разработчиков
Обучение программированию — это не только штудирование учебников, форумов и статей. Это еще и игра — вернее, игры, причем специализированные. Речь идет о геймификации в процессе учебы, когда материал подготавливают в игровой форме. Оказывается, таких проектов много.
Retro Gadgets
Симулятор предназначен для кодеров с опытом сборки электронных девайсов, то есть для тех, кто способен спаять устройство и разработать для него ПО. Задания в игре, несмотря на ее «ламповость», довольно сложные. Нужно паять, правда, в виртуальном мире, плюс собирать различные системы из отдельных модулей и писать код на Lua.
Joy of Programming
Ну а здесь — чистая радость программирования. По крайней мере, в том виде, в котором его себе представляют авторы проекта. Предусмотрена и возможность поработать с 3D-графикой, если есть такое желание. Задачи в игре достаточно сложные. Основной вектор здесь — автоматизация и управление роботами, навигация, логистика и машинное обучение.
CPU-Chef
Игра предназначена для новичков в мире электроники, поскольку ее единственная задача — помочь изучить строение ПК или ноутбука. Разработчики помогают пользователям понять, какие модули, включая процессор, хаб и т. п., для чего предназначены.
SQL Murder Mystery
Уже по названию понятно, что игра предназначена для разработчиков, изучающих SQL. Сюжет интересный: нужно раскрывать преступления в мире баз данных. В процессе расследования геймеры учатся создавать базы данных, формы, а еще — правильно писать SQL-запросы, чтобы выявить настоящего преступника.
Check IO
Отличная игра для изучения Python и TypeScript. Выглядит она неплохо, внутри интерфейса — острова, на которых расположены задачи и головоломки. У игры разные уровни сложности: она подойдет как новичкам, так и опытным кодерам. В самом начале есть подсказки, но постепенно их становится все меньше.
👉 @seniorFront
Обучение программированию — это не только штудирование учебников, форумов и статей. Это еще и игра — вернее, игры, причем специализированные. Речь идет о геймификации в процессе учебы, когда материал подготавливают в игровой форме. Оказывается, таких проектов много.
Retro Gadgets
Симулятор предназначен для кодеров с опытом сборки электронных девайсов, то есть для тех, кто способен спаять устройство и разработать для него ПО. Задания в игре, несмотря на ее «ламповость», довольно сложные. Нужно паять, правда, в виртуальном мире, плюс собирать различные системы из отдельных модулей и писать код на Lua.
Joy of Programming
Ну а здесь — чистая радость программирования. По крайней мере, в том виде, в котором его себе представляют авторы проекта. Предусмотрена и возможность поработать с 3D-графикой, если есть такое желание. Задачи в игре достаточно сложные. Основной вектор здесь — автоматизация и управление роботами, навигация, логистика и машинное обучение.
CPU-Chef
Игра предназначена для новичков в мире электроники, поскольку ее единственная задача — помочь изучить строение ПК или ноутбука. Разработчики помогают пользователям понять, какие модули, включая процессор, хаб и т. п., для чего предназначены.
SQL Murder Mystery
Уже по названию понятно, что игра предназначена для разработчиков, изучающих SQL. Сюжет интересный: нужно раскрывать преступления в мире баз данных. В процессе расследования геймеры учатся создавать базы данных, формы, а еще — правильно писать SQL-запросы, чтобы выявить настоящего преступника.
Check IO
Отличная игра для изучения Python и TypeScript. Выглядит она неплохо, внутри интерфейса — острова, на которых расположены задачи и головоломки. У игры разные уровни сложности: она подойдет как новичкам, так и опытным кодерам. В самом начале есть подсказки, но постепенно их становится все меньше.
👉 @seniorFront
👩💻 Как написать правильный API-клиент на Typescript
В этой статье я подробно расскажу о реализации API-клиента на языке TypeScript для работы как со сторонними API, так и со своими собственными. Клиент может работать с публичными и защищенными эндпойнтами и не привязан к конкретному фреймворку, что делает его пригодным для использования в React, Vue, Svelte и других фреймворках.
Читать...
Original post link: t.me/frontendnoteschannel/3755
Forwarded and filtered by @smartfeed_bot
В этой статье я подробно расскажу о реализации API-клиента на языке TypeScript для работы как со сторонними API, так и со своими собственными. Клиент может работать с публичными и защищенными эндпойнтами и не привязан к конкретному фреймворку, что делает его пригодным для использования в React, Vue, Svelte и других фреймворках.
Читать...
Original post link: t.me/frontendnoteschannel/3755
Forwarded and filtered by @smartfeed_bot
Библиотека программиста
📜 Как написать правильный API-клиент на Typescript
В этой статье я подробно расскажу о реализации API-клиента на языке TypeScript для работы как со сторонними API, так и со своими собственными. Клиент может работать с публичными и защищенными эндпойнтами и не привязан к конкретному фреймворку, что делает…
Сокращение с помощью AND
Давайте рассмотрим ситуацию, в которой у нас есть логическое значение и функция. Немало кода получается ради проверки логического условия и вызова функции. (пример кода №1)
А как насчёт использования сокращённой записи вместе с оператором AND (&&)? Да, условный оператор "if" нам больше не нужен. Круто, правда? (пример кода №2)
Original post link: t.me/senior_front/2118
Forwarded and filtered by @smartfeed_bot
Давайте рассмотрим ситуацию, в которой у нас есть логическое значение и функция. Немало кода получается ради проверки логического условия и вызова функции. (пример кода №1)
А как насчёт использования сокращённой записи вместе с оператором AND (&&)? Да, условный оператор "if" нам больше не нужен. Круто, правда? (пример кода №2)
Original post link: t.me/senior_front/2118
Forwarded and filtered by @smartfeed_bot
Forwarded from Frontender's notes [ru]
Необходимо написать алгоритм для проверки того, может ли заданная строка
s быть составлена из двух других строк, part1 и part2.Ограничение состоит в том, что символы в частях
part1 и part2 должны быть в том же порядке, что и в s.Пример кода
isMerge('xcyc', 'xc', 'yc') => true
isMerge('codewars', 'code', 'wars') => true
isMerge('More progress', 'More ess', 'pro') => false
isMerge('Making progress', 'Mak pross', 'inggre') => trueРешение задачи🔽
function isMerge(s, part1, part2) {
if (!s) return !part1 && !part2;
const matchPart1 = part1 && s[0] === part1[0];
const matchPart2 = part2 && s[0] === part2[0];
return (matchPart1 && isMerge(s.slice(1), part1.slice(1), part2)) ||
(matchPart2 && isMerge(s.slice(1), part1, part2.slice(1)));
}
// Примеры использования:
console.log(isMerge('xcyc', 'xc', 'yc')); // true
console.log(isMerge('codewars', 'code', 'wars')); // true
console.log(isMerge('More progress', 'More ess', 'pro')); // false
console.log(isMerge('Making progress', 'Mak pross', 'inggre')); // true
Please open Telegram to view this post
VIEW IN TELEGRAM
В Python могли встроить вирус. Все из-за утечки админского токена языка через публичный Docker-контейнер
В мире программирования произошла одна из самых опасных ошибок за последнее время. И все из-за невнимательности одного из разработчиков: https://tproger.ru/news/v-python-mogli-vstroit-virus--vse-iz-za-utechki-adminskogo-tokena-yazyka-cherez-publichnyj-docker-kontejner
#python
Original post link: t.me/tproger_web/4710
Forwarded and filtered by @smartfeed_bot
В мире программирования произошла одна из самых опасных ошибок за последнее время. И все из-за невнимательности одного из разработчиков: https://tproger.ru/news/v-python-mogli-vstroit-virus--vse-iz-za-utechki-adminskogo-tokena-yazyka-cherez-publichnyj-docker-kontejner
#python
Original post link: t.me/tproger_web/4710
Forwarded and filtered by @smartfeed_bot
🖥 Mid Mod – коллекция ярких, контрастных шаблонов для лендингов и презентаций. В ней есть карточки, основы для инфографики и мокапы.
Сайтодел | #макет #figma
Original post link: t.me/sitodel/1860
Forwarded and filtered by @smartfeed_bot
Сайтодел | #макет #figma
Original post link: t.me/sitodel/1860
Forwarded and filtered by @smartfeed_bot
🖥 15 сайтов, экономящих время разработчика
Хотите выделить время, чтобы взяться за новые увлекательные задачи, углубиться в сложные проблемы или просто уходить с работы вовремя? Эти 15 сайтов помогут значительно сократить процесс разработки.
Читать...
Original post link: t.me/frontendnoteschannel/3767
Forwarded and filtered by @smartfeed_bot
Хотите выделить время, чтобы взяться за новые увлекательные задачи, углубиться в сложные проблемы или просто уходить с работы вовремя? Эти 15 сайтов помогут значительно сократить процесс разработки.
Читать...
Original post link: t.me/frontendnoteschannel/3767
Forwarded and filtered by @smartfeed_bot
NOP::Nuances of programming
15 сайтов, экономящих время разработчика
Хотите выделить время, чтобы взяться за новые увлекательные задачи, углубиться в сложные проблемы или просто уходить с работы вовремя? Эти 15 сайтов помогут значительно сократить процесс разработки.
This media is not supported in your browser
VIEW IN TELEGRAM
Нашли codepen того самого переключателя из мемного видео: Detailed Theme Switch
Проект реализован с помощью CSS и JavaScript. Исходники:https://codepen.io/jkantner/pen/OJazKey
👍 — юзабельно
🗿 — троллейбус_из_буханки_хлеба.jpg
#codepen
Original post link: t.me/tproger_web/4711
Forwarded and filtered by @smartfeed_bot
Проект реализован с помощью CSS и JavaScript. Исходники:https://codepen.io/jkantner/pen/OJazKey
👍 — юзабельно
🗿 — троллейбус_из_буханки_хлеба.jpg
#codepen
Original post link: t.me/tproger_web/4711
Forwarded and filtered by @smartfeed_bot
Forwarded from Senior Frontend - javascript, html, css
Что такое Flux - архитектура? Какие сущности она имеет?
Flux-архитектура — архитектурный подход или набор шаблонов программирования для построения пользовательского интерфейса веб-приложений, сочетающийся с реактивным программированием и построенный на однонаправленных потоках данных.
Основной отличительной особенностью Flux является односторонняя направленность передачи данных между компонентами Flux-архитектуры. Архитектура накладывает ограничения на поток данных, в частности, исключая возможность обновления состояния компонентов самими собой. Такой подход делает поток данных предсказуемым и позволяет легче проследить причины возможных ошибок в программном обеспечении.
В минимальном варианте Flux-архитектура может содержать три слоя, взаимодействующие по порядку:
- Действия (англ. actions) — выражение событий (часто для действий используются просто имена — строки, содержащие некоторый «глагол»). Диспетчеры передают действия нижележащим компонентам (хранилищам) по одному. Новое действие не передаётся пока предыдущее полностью не обработано компонентами. Действия из-за работы источника действия, например, пользователя, поступают асинхронно, но их диспетчеризация явлется синхронным процессом. Кроме имени (англ. name), действия могут иметь полезную нагрузку (англ. payload), содержащую относящиеся к действию данные.
- Диспетчер/Диспатчер (англ. dispatcher) предназначен для передачи действий хранилищам. В упрощённом варианте диспетчер может вообще не выделяться, как единственный на всё приложение. В диспетчере хранилища регистрируют свои функции обратного вызова (callback) и зависимости между хранилищами.
- Хранилище (англ. store) является местом, где сосредоточено состояние (англ. state) приложения. Остальные компоненты, согласно Flux, не имеют значимого (с точки зрения архитектуры) состояния. Изменение состояния хранилища происходит строго на основе данных действия и старого состояния хранилища при помощи чистых функций.
- Представление (англ. view) — компонент, обычно отвечающий за выдачу информации пользователю. Во Flux-архитектуре, которая может технически не касаться внутреннего устройства представлений вообще, это — конечная точка потоков данных. Для информационной архитектуры важно только, что данные попадают в систему (то есть, обратно в хранилища) только через действия.
👉 @seniorFront
Flux-архитектура — архитектурный подход или набор шаблонов программирования для построения пользовательского интерфейса веб-приложений, сочетающийся с реактивным программированием и построенный на однонаправленных потоках данных.
Основной отличительной особенностью Flux является односторонняя направленность передачи данных между компонентами Flux-архитектуры. Архитектура накладывает ограничения на поток данных, в частности, исключая возможность обновления состояния компонентов самими собой. Такой подход делает поток данных предсказуемым и позволяет легче проследить причины возможных ошибок в программном обеспечении.
В минимальном варианте Flux-архитектура может содержать три слоя, взаимодействующие по порядку:
- Действия (англ. actions) — выражение событий (часто для действий используются просто имена — строки, содержащие некоторый «глагол»). Диспетчеры передают действия нижележащим компонентам (хранилищам) по одному. Новое действие не передаётся пока предыдущее полностью не обработано компонентами. Действия из-за работы источника действия, например, пользователя, поступают асинхронно, но их диспетчеризация явлется синхронным процессом. Кроме имени (англ. name), действия могут иметь полезную нагрузку (англ. payload), содержащую относящиеся к действию данные.
- Диспетчер/Диспатчер (англ. dispatcher) предназначен для передачи действий хранилищам. В упрощённом варианте диспетчер может вообще не выделяться, как единственный на всё приложение. В диспетчере хранилища регистрируют свои функции обратного вызова (callback) и зависимости между хранилищами.
- Хранилище (англ. store) является местом, где сосредоточено состояние (англ. state) приложения. Остальные компоненты, согласно Flux, не имеют значимого (с точки зрения архитектуры) состояния. Изменение состояния хранилища происходит строго на основе данных действия и старого состояния хранилища при помощи чистых функций.
- Представление (англ. view) — компонент, обычно отвечающий за выдачу информации пользователю. Во Flux-архитектуре, которая может технически не касаться внутреннего устройства представлений вообще, это — конечная точка потоков данных. Для информационной архитектуры важно только, что данные попадают в систему (то есть, обратно в хранилища) только через действия.
👉 @seniorFront
👩💻 35 браузерных плагинов для Google Chrome в помощь разработчику
Ловите подборку расширений и плагинов для браузера, облегчающих жизнь программисту: ответы со StackOverflow в виде кода в топе выдаче Google, вызов, обнаружение и тестирование HTTP и REST API, анализатор UX, уменьшение потребления памяти Chrome и многое другое.
Читать...
Original post link: t.me/frontendnoteschannel/3771
Forwarded and filtered by @smartfeed_bot
Ловите подборку расширений и плагинов для браузера, облегчающих жизнь программисту: ответы со StackOverflow в виде кода в топе выдаче Google, вызов, обнаружение и тестирование HTTP и REST API, анализатор UX, уменьшение потребления памяти Chrome и многое другое.
Читать...
Original post link: t.me/frontendnoteschannel/3771
Forwarded and filtered by @smartfeed_bot
Библиотека программиста
🧩 35 браузерных плагинов для Google Chrome в помощь разработчику
Ловите подборку расширений и плагинов для браузера, облегчающих жизнь программисту: ответы со StackOverflow в виде кода в топе выдаче Google, вызов, обнаружение и тестирование HTTP и REST API, анализатор UX, уменьшение потребления памяти Chrome и многое другое.
Forwarded from Веб-страница
Cloudflare выпустила Pingora v0.3.0 с поддержкой HTTP-модулей
Cloudflare представила второй публичный релиз открытого проекта Pingora v0.3.0. Это асинхронный многопоточный фреймворк на Rust, который помогает создавать прокси-сервисы HTTP.
Проект используется для создания сервисов, обеспечивающих значительную часть трафика в Cloudflare (вместо применения Nginx). Исходный код Pingora опубликован на GitHub под лицензией Apache 2.0.
Проект Pingora предоставляет библиотеки и API для создания сервисов поверх HTTP/1 и HTTP/2, TLS или просто TCP/UDP. В качестве прокси-сервера он поддерживает сквозное проксирование HTTP/1 и HTTP/2, gRPC и WebSocket. Поддержка HTTP/3 — в планах.
Pingora также включает в себя настраиваемые стратегии балансировки нагрузки и аварийного переключения. Чтобы соответствовать требованиям безопасности, он поддерживает как широко используемые библиотеки OpenSSL, так и BoringSSL, которые соответствуют требованиям FIPS (федеральных стандартов обработки информации США) и пост-квантового шифрования.
Подробнее: https://habr.com/ru/news/828678/
#cloudflare
Cloudflare представила второй публичный релиз открытого проекта Pingora v0.3.0. Это асинхронный многопоточный фреймворк на Rust, который помогает создавать прокси-сервисы HTTP.
Проект используется для создания сервисов, обеспечивающих значительную часть трафика в Cloudflare (вместо применения Nginx). Исходный код Pingora опубликован на GitHub под лицензией Apache 2.0.
Проект Pingora предоставляет библиотеки и API для создания сервисов поверх HTTP/1 и HTTP/2, TLS или просто TCP/UDP. В качестве прокси-сервера он поддерживает сквозное проксирование HTTP/1 и HTTP/2, gRPC и WebSocket. Поддержка HTTP/3 — в планах.
Pingora также включает в себя настраиваемые стратегии балансировки нагрузки и аварийного переключения. Чтобы соответствовать требованиям безопасности, он поддерживает как широко используемые библиотеки OpenSSL, так и BoringSSL, которые соответствуют требованиям FIPS (федеральных стандартов обработки информации США) и пост-квантового шифрования.
Подробнее: https://habr.com/ru/news/828678/
#cloudflare
👩💻 Не бойтесь генераторов JavaScript
Все еще пренебрегаете генераторами JavaScript? И совершенно напрасно. Узнайте, как использовать эти мощные средства для управления асинхронным программированием, создания итерируемых объектов и выдачи нескольких значений.
Читать...
Original post link: t.me/frontendnoteschannel/3773
Forwarded and filtered by @smartfeed_bot
Все еще пренебрегаете генераторами JavaScript? И совершенно напрасно. Узнайте, как использовать эти мощные средства для управления асинхронным программированием, создания итерируемых объектов и выдачи нескольких значений.
Читать...
Original post link: t.me/frontendnoteschannel/3773
Forwarded and filtered by @smartfeed_bot
NOP::Nuances of programming
Не бойтесь генераторов JavaScript
Все еще пренебрегаете генераторами JavaScript? И совершенно напрасно. Узнайте, как использовать эти мощные средства для управления асинхронным программированием, создания итерируемых объектов и выдачи нескольких значений.
This media is not supported in your browser
VIEW IN TELEGRAM
Sphere
Анимация вращения трёх сфер, реализованная с помощью библиотеки Three.js.
https://codepen.io/termat/pen/MdjBeQ
Original post link: t.me/senior_front/2125
Forwarded and filtered by @smartfeed_bot
Анимация вращения трёх сфер, реализованная с помощью библиотеки Three.js.
https://codepen.io/termat/pen/MdjBeQ
Original post link: t.me/senior_front/2125
Forwarded and filtered by @smartfeed_bot