🎉 MeteorJS 3.0 — Долгожданный релиз спустя 3 года! 🚀
Наконец-то вышел MeteorJS 3.0, избавившись от Fibers в пользу async методов, что позволило обновить NodeJS до версии 20! 🎉 Теперь все методы и работа с БД выполняются асинхронно, улучшена документация, добавлена поддержка ARM на Linux. Для релиза выполнено 160 задач и обновлено множество пакетов. Это огромный шаг вперед для разработчиков! 🌟
📌Обсуждение на GitHub
📌Новая документация
#react #meteor #js
@react_tg
Наконец-то вышел MeteorJS 3.0, избавившись от Fibers в пользу async методов, что позволило обновить NodeJS до версии 20! 🎉 Теперь все методы и работа с БД выполняются асинхронно, улучшена документация, добавлена поддержка ARM на Linux. Для релиза выполнено 160 задач и обновлено множество пакетов. Это огромный шаг вперед для разработчиков! 🌟
📌Обсуждение на GitHub
📌Новая документация
#react #meteor #js
@react_tg
Plasmic позволяет создавать React-приложения практически без написания кода из готовых компонентов.
При этом Plasmic очень производительный и его можно использовать для разработки маркетинговых сайтов и сайтов электронной коммерции с большими объёмами трафика
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
⚛️ React Custom Hooks позволяют повторно использовать логику состояния в компонентах React, интегрируясь с хуками useState и useEffect.
Пример Custom Hook, `useFetch`, показывает, как можно обрабатывать загрузку данных и управлять состоянием загрузки:
Helper Function, `formatDate`, не зависит от React и форматирует даты, используя
Если требуется управление состоянием, используйте Custom Hooks. Для общих вычислений без привязки к состоянию лучше подходят Helper Functions.
#frontend #react #JavaScript #ReactJS
📎 Хабр
@react_tg
Пример Custom Hook, `useFetch`, показывает, как можно обрабатывать загрузку данных и управлять состоянием загрузки:
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState([]);
const [isClick Me Load More, setIsClick Me Load More] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
try {
const response = await fetch(url);
const result = await response.json();
...
Helper Function, `formatDate`, не зависит от React и форматирует даты, используя
dayjs
:import dayjs from 'dayjs';
function formatDate(date) {
return dayjs(date).format('MM/DD/YYYY');
}
Если требуется управление состоянием, используйте Custom Hooks. Для общих вычислений без привязки к состоянию лучше подходят Helper Functions.
#frontend #react #JavaScript #ReactJS
📎 Хабр
@react_tg
—
npm install @kudoai/chatgpt.js
chatgpt.js — это клиентская JS-библиотека, позволяющая легко взаимодействовать с DOM ChatGPT.
Библиотека chatgpt.js — многофункциональная, объектно-ориентированная, простая в использовании и производительная
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Zag работает с React и с другими фреймворками, а также с чистым JS.
Zag позволяет писать компоненты 1 раз и использовать везде: взаимодействие компонентов моделируется независимо от фреймворка.
Особенности Zag:
— Фокус на доступности: Zag создан с учетом требований доступности и решает многие вопросы, связанные с взаимодействием с клавиатурой и т.д.
— Headless: Zag даёт возможность использовать любое решение по стилизации, которое нравится
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Buffet — это всеобъемлющий веб-менеджер виртуальных машин с открытым исходным кодом, предназначенный для удобного и безопасного управления виртуальными машинами.
Его серверная часть реализована на Python Flask, а интерфейс - на TypeScript React, при этом используются QEMU и KVM для виртуализации и noVNC для удаленного доступа к рабочему столу.
- Безопасный доступ к виртуальным машинам осуществляется через noVNC, websockify с поддержкой SSL/TLS и случайно генерируемые одноразовые пароли VNC.
- Администрирование пользователей, виртуальных машин и журналов выполняется из панели администратора.
- Возможность создания, запуска и удаления виртуальных машин QEMU/KVM.
- Определение пользовательских операционных систем и дистрибутивов с помощью JSON.
- Полностью адаптивный интерфейс, подходящий для настольных компьютеров, планшетов и смартфонов.
- Безопасная аутентификация и авторизация пользователей реализована с помощью JSON Web Tokens (JWT), bcrypt и двухфакторной аутентификации.
▪ GIthub
@react_tg
Его серверная часть реализована на Python Flask, а интерфейс - на TypeScript React, при этом используются QEMU и KVM для виртуализации и noVNC для удаленного доступа к рабочему столу.
- Безопасный доступ к виртуальным машинам осуществляется через noVNC, websockify с поддержкой SSL/TLS и случайно генерируемые одноразовые пароли VNC.
- Администрирование пользователей, виртуальных машин и журналов выполняется из панели администратора.
- Возможность создания, запуска и удаления виртуальных машин QEMU/KVM.
- Определение пользовательских операционных систем и дистрибутивов с помощью JSON.
- Полностью адаптивный интерфейс, подходящий для настольных компьютеров, планшетов и смартфонов.
- Безопасная аутентификация и авторизация пользователей реализована с помощью JSON Web Tokens (JWT), bcrypt и двухфакторной аутентификации.
▪ GIthub
@react_tg
—
npx create-expo-app@latest my-app -e with-reanimated
React Native Reanimated предоставляет полную, низкоуровневую абстракцию для API библиотеки Animated, на основе которой можно построить более гибкий интерфейс, особенно когда речь идет о взаимодействии с помощью жестов.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Cypress — это современный инструмент для тестирования фронтенда, созданный для решения ключевых проблем, с которыми сталкиваются разработчики и специалисты по качеству при тестировании веб-приложений.
В отличие от Selenium, Cypress обеспечивает более быстрые, простые и надежные тесты. Он позволяет легко настраивать, писать, запускать и отлаживать различные типы тестов, включая сквозные, компонентные и модульные.
Подходит для любых приложений, работающих в браузере, и поддерживает тестирование в разных браузерах, обеспечивая стабильные результаты и эффективную интеграцию в CI-процессы.
▪Github
@react_tg
В отличие от Selenium, Cypress обеспечивает более быстрые, простые и надежные тесты. Он позволяет легко настраивать, писать, запускать и отлаживать различные типы тестов, включая сквозные, компонентные и модульные.
Подходит для любых приложений, работающих в браузере, и поддерживает тестирование в разных браузерах, обеспечивая стабильные результаты и эффективную интеграцию в CI-процессы.
npm install cypress --save-dev
▪Github
@react_tg
This media is not supported in your browser
VIEW IN TELEGRAM
❗️Простой React Совет
Если вам нужно импортировать серверный компонент из клиентского компонента, передайте его как prop ❗
@reeact_tg
Если вам нужно импортировать серверный компонент из клиентского компонента, передайте его как prop ❗
@reeact_tg
This media is not supported in your browser
VIEW IN TELEGRAM
⭕ Двигающиеся кольца прелоадера, которые раскрываются при взлёте.
Примеры применения:
▪ загрузка нового уровня в игре;
▪ загрузка результатов тестирования.
#прелоадер #ожидание #загрузка
https://codepen.io/izmaelmag/pen/XNJKZx
@react_tg
Примеры применения:
▪ загрузка нового уровня в игре;
▪ загрузка результатов тестирования.
#прелоадер #ожидание #загрузка
https://codepen.io/izmaelmag/pen/XNJKZx
@react_tg
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Полезный сервис CSS Grid Generator, который сгенерирует сетку и выдаст CSS-код.
Вам нужно только задать количество строк, колонок и расстояния между ними, далее рисуем расположение div-блоков в сетке.
https://cssgrid-generator.netlify.app/
@react_tg
Вам нужно только задать количество строк, колонок и расстояния между ними, далее рисуем расположение div-блоков в сетке.
https://cssgrid-generator.netlify.app/
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM