Telegram Web Link
5 советов по адаптивному веб-дизайну 👨‍💻

@react_tg
Скачайте гайд по тестированию сайтов и приложений для веб-студий бесплатно!

Обращаемся к тем, кто делает сайты и приложения на заказ, руководит командами коммерческой разработки 💻

Как думаете, есть ли секрет успеха у топовых веб-студий? Может быть, безудержный креатив? Или огромные бюджеты на продакшн? Да, не без этого, но основная причина того, что их выбирают «жирные» клиенты — это обязательное профессиональное тестирование на всех этапах.

😒Можно продолжать работать, думая, что на клиентах и пользователях тестировать дешевле. Но помните, что вы сознательно оставляете свою компанию плестись в хвосте. Согласны быть середнячком с нестабильным потоком клиентов?

🚀Если нет, то прямо сейчас скачивайте бесплатный гайд по тестированию для веб-студий через бот и переходите на новый уровень.

💻А ещё записывайтесь на консультацию с экспертами «Лаборатории Качества». Ни к чему не обязывающая получасовая встреча абсолютно бесплатна: обсудим боли и подберём решения под конкретные сроки и бюджет. Бронируйте слоты здесь!

#реклама
О рекламодателе
erid: 2W5zFJSsnat
This media is not supported in your browser
VIEW IN TELEGRAM
Загрузка в виде танцующих частиц, похожих на снежинки.

Примеры применения:
🔶 загрузка расчета стоимости доставки;
🔶 загрузка вывода документа на печать.

#прелоадер #ожидание #загрузка

https://codepen.io/rikhnovets/pen/RwXgqjQ

@react_tg
react-hook — коллекция удобных и строго типизированных хуков для React-компонентов. Этот проект предлагает более 20 готовых решений для распространённых задач: от работы с асинхронными операциями через useAsync() до отслеживания изменений DOM с помощью useResizeObserver().

Библиотека имеет продуманную типизацию и автоматическую очистка ресурсов. Например, useEvent() сам удаляет слушатели при размонтировании, а useMousePosition() корректно работает как на touch-, так и на desktop-устройствах.

🤖 GitHub

@react_tg
🎨 Oh‑My‑Logo — «волшебный» генератор логотипов от shinshin86

Oh‑My‑Logo — утилита с простым интерфейсом для создания уникальных логотипов прямо в терминале. Работает быстро, без лишнего визуального шума.

🛠️ Как это работает:
- Пользователь вводит название бренда (например, “MyStartup”) и краткое описание
- Утилита генерирует цветные ASCII- или Unicode‑логотипы с эффектом паддинга, обводки, рамки или градиента
- Вы можете пробовать разные стили и цвета прямо из командной строки

💡 Зачем это нужно:
- Быстро придумать временное оформление для README, скрипта или учебного проекта
- Стильно оформить вывод утилиты или CI-лог
- Упростить создание ASCII-баннера для скриптов или серверных инструментов

⚙️ Кому понравится:
- Разработчикам и DevOps инженерам, любящим CLI-стайл
- Авторам технической документации и проектных README
- Всем, кто хочет быстро и красиво оформить свои утилиты

Вывод:
Oh‑My‑Logo — лёгкий способ добавить индивидуальности проектам в текстовом интерфейсе. Без GUI, без лишних шагов — просто командный стиль и творческий подход.

https://github.com/shinshin86/oh-my-logo

@react_tg
🐔 ikun-ui — минималистичная UI-библиотека на Svelte и UnoCSS. Необычный проект, сочетающий простоту Svelte с мощью UnoCSS для создания лёгких и настраиваемых интерфейсов. Вместо тяжёлых компонентов здесь есть атомарные стили и интеграция с Iconify, позволяющая использовать тысячи иконок без лишнего бандла.

В библиотеке стили применяются через атрибуты, как в UnoCSS, а конфигурация темы меняется на лету. Библиотека вдохновлена Onu-ui и Naive-ui, но предлагает более компактное решение.

🤖 GitHub

@react_tg
📈 Пора повышать грейд! 10 июля в 20:00 пройдет бесплатный вебинар по теме "Как стать уверенным JavaScript-разработчиком: план от джуна до мидла". Запись ограничена: https://tglink.io/e0f647326a9a

Что будет на вебинаре?

🗝  Что отличает джуна от сильного специалиста: структура знаний, подходы, ответственность.
🗝 Какие технологии важны в 2025 году: React, TypeScript, API, архитектура.
🗝 Почему "копипастить с GitHub" недостаточно — нужно понимать, как и зачем работает код.
🗝  Как избежать «плато развития» и начать расти — по-настоящему.
🗝  Как выстроить план обучения и выйти на следующий уровень — без метаний и хаоса.

Чему вы научитесь:

Как сформировать ядро необходимых навыков и убрать лишнее.
Какие инструменты и технологии действительно ускоряют рост.
Как распознать “синдром джуна” и избавиться от него через практику.
Почему важна архитектура, а не просто знание синтаксиса.

💥 Оставляйте заявку на бесплатный урок и получите спец. предложение: https://tglink.io/e0f647326a9a

erid: 2W5zFHuWGvU
📘 React-подсказка: как работает `useState`

Хук useState добавляет состояние в функциональный компонент, позволяя создавать интерактивные интерфейсы.

🔹 Что делает `useState`?
Добавляет состояние в функциональный компонент. Ты можешь отслеживать и изменять значения прямо внутри компонента.

🔧 1. Импорт

import { useState } from 'react';


🔧 2. Объявление состояния

const [count, setCount] = useState(0);

count — текущее значение
setCount — функция для обновления
0 — начальное значение

Примеры с разными типами данных:

const [name, setName] = useState('Alice'); // строка
const [isActive, setIsActive] = useState(false); // булево
const [user, setUser] = useState({ id: 1, name: 'Bob' }); // объект
const [items, setItems] = useState([]); // массив


🔧 3. Обновление состояния
Не изменяй значение напрямую — используй функцию:

setCount(count + 1);
setName('Charlie');
setIsActive(!isActive);
setUser({ ...user, name: 'David' });
setItems([...items, 'New']);


🎯 4. Функциональный стиль обновления
Если новое значение зависит от предыдущего:

setCount(prev => prev + 1);


📦 5. Несколько состояний в одном компоненте

function MyComponent() {
const [count, setCount] = useState(0);
const [text, setText] = useState('');

return (
<>
<button onClick={() => setCount(count + 1)}>+1</button>
<input value={text} onChange={e => setText(e.target.value)} />
<p>Счётчик: {count}</p>
<p>Текст: {text}</p>
</>
);
}


Что важно помнить

* useState возвращает массив [значение, функция].
* Обновление состояния асинхронно.
* При работе с объектами и массивами всегда создавай копии, не мутируй напрямую.

🔥 Пользуйся этой шпаргалкой, чтобы уверенно управлять состоянием в React-приложениях!
#React #useState #Frontend #JavaScript

@react_tg
🔮 fresnel — элегантное решение для адаптивного рендеринга в React. Этот проект переосмысливает работу с медиазапросами, перенося их логику прямо в React-компоненты. Вместо ручного управления условиями рендера через CSS или JS, проект предлагает декларативный подход: вы определяете breakpoints, а библиотека автоматически рендерит нужную версию интерфейса.

Инструмент имеет поддержку SSR, благодаря чему рендерит все breakpoints на сервере, а клиент уже после гидратации отключает лишнее через matchMedia. Это не только ускоряет загрузку, но и избавляет от проблем с мерцанием стилей при CSR.

🤖 GitHub

@react_tg
⚡️ Почему лучшие разработчики всегда на шаг впереди?

Потому что они знают, где брать настоящие инсайд!
Оставь “программирование в вакууме” в прошлом, выбирай свой стек — подпишись и погружайся в поток идей, лайфхаков и знаний, которые не найдёшь в открытом доступе.

ИИ: www.tg-me.com/ai_machinelearning_big_data
Python: www.tg-me.com/pythonl
Linux: www.tg-me.com/linuxacademiya
Мл собес www.tg-me.com/machinelearning_interview
C++ www.tg-me.com/cpluspluc
Docker: www.tg-me.com/DevopsDocker
Хакинг: www.tg-me.com/linuxkalii
МЛ: www.tg-me.com/machinelearning_ru
Devops: www.tg-me.com/DevOPSitsec
Data Science: www.tg-me.com/data_analysis_ml
Javascript: www.tg-me.com/javascriptv
C#: www.tg-me.com/csharp_ci
Java: www.tg-me.com/java_library
Базы данных: www.tg-me.com/sqlhub
Python собеседования: www.tg-me.com/python_job_interview
Мобильная разработка: www.tg-me.com/mobdevelop
Golang: www.tg-me.com/Golang_google
React: www.tg-me.com/react_tg
Rust: www.tg-me.com/rust_code
ИИ: www.tg-me.com/vistehno
PHP: www.tg-me.com/phpshka
Android: www.tg-me.com/android_its
Frontend: www.tg-me.com/front
Big Data: www.tg-me.com/bigdatai
МАТЕМАТИКА: www.tg-me.com/data_math
Kubernets: www.tg-me.com/kubernetc
Разработка игр: https://www.tg-me.com/gamedev
Физика: www.tg-me.com/fizmat

Папка Go разработчика: www.tg-me.com/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: www.tg-me.com/addlist/eEPya-HF6mkxMGIy
Папка ML: https://www.tg-me.com/addlist/2Ls-snqEeytkMDgy
Папка FRONTEND: https://www.tg-me.com/addlist/mzMMG3RPZhY2M2Iy

🎓954ГБ ОПЕНСОРС КУРСОВ: @courses
😆ИТ-Мемы: www.tg-me.com/memes_prog
🇬🇧Английский: www.tg-me.com/english_forprogrammers
🧠ИИ: www.tg-me.com/vistehno

🖥 Chatgpt для кода в тг: @Chatgpturbobot -

📕Ит-книги: https://www.tg-me.com/addlist/BkskQciUW_FhNjEy
💼ИТ-вакансии www.tg-me.com/addlist/_zyy_jQ_QUsyM2Vi

Подпишись, чтобы всегда знать, куда двигаться дальше!
Please open Telegram to view this post
VIEW IN TELEGRAM
📊 Tremor — готовые React-компоненты для дашбордов. Библиотека предлагает более 35 предварительно стилизованных компонентов на базе Tailwind CSS и Radix UI — от графиков и таблиц до сложных интерактивных элементов. Все компоненты можно копировать и вставлять в проект, быстро получая рабочие элементы интерфейса.

Проект фокусируется на доступности и кастомизации: все элементы адаптированы под требования WCAG, но при этом легко перекрашиваются и адаптируются под дизайн-систему. Компоненты заранее оптимизированы для работы с большими наборами данных без потерь производительности.

🤖 GitHub

@react_tg
💡Шпаргалка по CSS

@react_tg
2025/07/06 19:34:17
Back to Top
HTML Embed Code: