Css - Форум программистов и сисадминов Киберфорум

Чат на React, Node.js и TailwindCSS: Синхронизация, валидация, шифрование, демо-приложение

Запись от Reangularity размещена 01.10.2025 в 20:43 / Vue/React/Angular/Svelte notes

Показов 3986 Комментарии 0

Метки chat, cors, cryptography, css, ddos, e2ee, encryption, event-driven, express.js, graceful degradation, html, http, in-memory, javascript, jwt, middleware, next.js, node.js, ntp, prisma, purgecss, rate limiting, react, redis, refresh token, rest api, security, socket.io, svelte, tailwindcss, tls, vite, vue, web, webrtc, websocket, xss

Нажмите на изображение для увеличения
Название: Чат на React, Node.js и TailwindCSS Синхронизация, валидация, шифрование, демо-приложение.jpg
Просмотров: 494
Размер: 84.3 Кб
ID: 11252

Часть 1 - Чат на React, Node.js и TailwindCSS: Протоколы и сервер
Часть 2 - Чат на React, Node.js и TailwindCSS: Фронт

Синхронизация состояния: подводные камни

WebSocket создает иллюзию простоты - отправил событие, получил ответ, обновил UI. На практике между этими шагами куча точек отказа, и каждая может привести к рассинхронизации...

Reangularity

Чат на React, Node.js и TailwindCSS: Фронт

Запись от Reangularity размещена 01.10.2025 в 20:42 / Vue/React/Angular/Svelte notes

Показов 3470 Комментарии 0

Нажмите на изображение для увеличения
Название: Чат на React, Node.js и TailwindCSS Фронт.jpg
Просмотров: 429
Размер: 63.4 Кб
ID: 11251

Часть 1 - Чат на React, Node.js и TailwindCSS: Протоколы и сервер
Часть 3 - Чат на React, Node.js и TailwindCSS: Синхронизация, валидация, шифрование, демо-приложение

React на клиенте: компоненты без фанатизма

React для чата - естественный выбор, но я видел проекты где разработчики строили архитектуру уровня Facebook Messenger для обмена десятком...

Reangularity

Чат на React, Node.js и TailwindCSS: Протоколы и сервер

Запись от Reangularity размещена 01.10.2025 в 19:13 / Vue/React/Angular/Svelte notes. Обновил(-а) Reangularity 01.10.2025 в 19:21

Показов 3723 Комментарии 0

Нажмите на изображение для увеличения
Название: Чат на React, Node.js и TailwindCSS.jpg
Просмотров: 326
Размер: 74.0 Кб
ID: 11249

Я открываю GitHub и вижу еще пятьдесят репозиториев с чат-приложениями. Зачем создавать новое? Вопрос резонный, но давайте разберемся по честному. Большинство туториалов по чатам делятся на два лагеря. Первые показывают игрушечные примеры на двадцать строк кода, которые в продакшене развалятся от первой сотни пользователей. Вторые сразу погружают в энтерпрайз-архитектуру с микросервисами, Kubernetes и базами данных, когда тебе надо просто добавить...

Reangularity

ИИ-автозаполнение в React с OpenAI

Запись от Reangularity размещена 14.08.2025 в 20:56 / Vue/React/Angular/Svelte notes

Показов 5411 Комментарии 0

Метки ai, chatgpt, ci/cd, composition, css, html, javascript, mock, observer, oop, openai, openai api, patterns, react, react query, redux, unit-test, zustand, ии, нейросеть

Нажмите на изображение для увеличения
Название: ИИ-автозаполнение в React с OpenAI.jpg
Просмотров: 522
Размер: 124.1 Кб
ID: 11055

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

В React интеграция подобных возможностей становится реальностью...

Reangularity

Консольные команды для форматирования исходного кода на C, C++, C#, Java, JavaScript, HTML и CSS. Сортировка пакетов на Python

Запись от 8Observer8 размещена 18.02.2024 в 16:35 / Блог 8Observer8. Обновил(-а) 8Observer8 11.07.2026 в 16:59

Показов 3107 Комментарии 8

Метки c, c#, c++, css, html, java, javascript, python, си

Содержание блога

Здесь представлены ссылки на утилиты и команды для автоматического форматирования отступов из консоли. Если использовать Far Manager, то консольные команды будут сохранены в подсказчике. Far Manager похож на Total Commander, но можно показывать и скрывать консоль сочетанием клавиш Ctrl+O. Например, достаточно будет ввести команду...

8Observer8

Css рамки

Запись от FuToma размещена 06.10.2023 в 15:38

Показов 1099 Комментарии 1

Метки border, css, рамки

Есть ли возможность нарисовать рамку вокруг первых 3 строк, а остальные не трогать?
Если же в рамку попадает меньше 3 строк, то она бы подстраивалась под другие автоматом

FuToma

варианты фиксированного заголовка

Запись от mr_dramm размещена 02.04.2023 в 15:38

Показов 1362 Комментарии 0

Метки css, html

Использовал эти варианты в этой теме и решил закрепить в блоге. Может еще вариантов позже допишу.

Ссылка на блог mrtoxas Прижать footer к нижнему краю страницы. Подборка вариантов.

Использование sticky codepen

Кликните здесь для просмотра всего текста

PHP/HTML
1
2
3
4
5
6
7
<!-- https://codepen.io/den4ik_rus/pen/JjaQQyQ -->
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,

...

mr_dramm

Молодой техлид)

smooth scroll

Запись от mr_dramm размещена 14.03.2023 в 12:14

Показов 3010 Комментарии 15

Метки css, html, javascript

Несложный smooth scroll

css анимация лучше работает чем js

Пример на css transform

горизонтальный codepen

Кликните здесь для просмотра всего текста

PHP/HTML
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <style>
    * {

...

mr_dramm

Молодой техлид)

Схлопывания полей в CSS

Запись от DanLo размещена 27.07.2021 в 19:10 / DanLo BLOG

Показов 3681 Комментарии 2

Метки css, margin

Все сталкивались со схлопывание полей при верстке сайтов или отдельных компонентов, но не все понимают как это работает и зачем это было придумано. К сожалению сводка на MDN c описанием этой проблемы может запутать при чтении и напоминает головоломку или ребус. На www.w3.org все описано вкратце, сухо и без каких-либо примеров. По крайней мере так показалось мне.

Разметка которая будет использована в примерах:

HTML5
1
<div class="external-block">external-block</div>

...

DanLo

Краткое пособие по простой установке/использовании sass (css-препроцессор)

Запись от pavel666228 размещена 13.12.2018 в 22:49 / Приветсвие!

Показов 2853 Комментарии 2

Метки css, sass

Препроцессор обрабатывает ваш Sass-файл и сохраняет его как простой CSS-файл, который вы сможете использовать.

1) Для начала вам нужно скачать Ruby: https://rubyinstaller.org/downloads/
2) Установить Ruby на свой компьютер.
3) Заходим в CMD ( WIN+R -> cmd ) и пишем gem install sass.
4) Sass установлен на ваш компьютер.

Подключение sass к вашим проектам:

1) Снова заходим в cmd.
2) Вводим путь к scss...

pavel666228

<h1>Hello world</h1>

Моноблок на CSS

Запись от mrtoxas размещена 30.10.2016 в 00:54

Показов 2534 Комментарии 0

Метки css, design, html, perversion

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
  background: #b6b4b7;
  padding: 10px;
  font-family: Geneva, Arial, Helvetica, sans-serif;
}
.monoblock {
  width: 475px;
  margin: 0 auto;
}
.monitor {
  height: 345px;
  background: -webkit-linear-gradient(top, #255f6b 0%, #255f6b 83%, #ffffff 83%, #ffffff 100%);
  background: linear-gradient(to bottom, #255f6b 0%, #255f6b 83%, #ffffff 83%, #ffffff 100%);
  border-radius: 15px;

...

mrtoxas

Прижать footer к нижнему краю страницы. Подборка вариантов.

Запись от mrtoxas размещена 27.10.2016 в 22:52

Показов 17728 Комментарии 4

Метки css, footer, html, прижать футер

Вариант 1. Псевдоэлементы.

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Sticky Footer</title>
  <style>
    html, body {
      height: 100%;
      margin:0;
    }
    .wrapper {
      min-height: 100%;
      /* margin-bottom = высота футера */
      margin-bottom: -50px;

...

mrtoxas

Слайдер на чистом css с "кнопками"!

Запись от kisk размещена 19.05.2015 в 13:34

Показов 7052 Комментарии 0

Метки css, html, input, label, slider

Привет ленивым и не ленивым! Недавно лазил по разделу html/css и там нашел тему про фотоальбом: https://www.cyberforum.ru/html... ost7635550
Который был написал на JavaScript. Автор спросил, как меняется текст под фотографиями? Конечно просто! Но я сделал именно слайдер с текстом, потратив 2 часа своего времени, которые могли бы сейчас уйти на учебу, на которой меня, собственно, не было

Пример: http://output.jsbin.com/dewahe

С обычными...

kisk

Обработка события click на CSS

Запись от kisk размещена 17.05.2015 в 14:49

Показов 3545 Комментарии 0

Метки click, css, focus, html

Нажатие на элементе переключает :focus на него, если ему будет присвоено tabindex="n".
В результате элементы с классом .orange или .green покажутся.
Нажатие в другой области экрана приведет к сбросу фокуса с элемента и восстановит состояние по умолчанию для элементов с классом .orange и .green
В данном случае стиль display я убрал, т.к. анимация с ним не работает.
Оставляйте комментарии, если...

kisk

Как прилепить подвал?

Запись от and_y87 размещена 10.12.2014 в 13:59

Показов 3339 Комментарии 0

Метки css, front-end, html, вёрстка, подвал

что бы было.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            min-height: 100% !important;
        }
 
        #wrap {
            min-height: 100% !important;
        }
 
        #footer {
            position: relative;
            top: -50px; /** в некоторых случаях + высота border & padding & margin (top/bottom)

...

and_y87

Develo0per

производительность CSS: селекторы, раздутые и тяжелые стили.

Запись от and_y87 размещена 17.11.2014 в 09:55

Показов 4329 Комментарии 0

Метки css, front-end, html, оптимизация сайтов

Что такое быстрый CSS? Какие у него слабые места? Работают ли всё ещё правила быстрых и медленных селекторов? Являются ли используемые нами свойства более важными, чем селекторы?

Появился перевод интересной статьи отвечающий на ряд этих вопросов.

Акцентируя внимание на главном:

большинство методов выбора теперь работает так быстро, что на это не стоит тратить время. Более того,

...

and_y87

Develo0per

Новый опыт брендирования.

Запись от and_y87 размещена 23.09.2014 в 21:00

Показов 3668 Комментарии 0

Метки css, html, livejournal, брендирование

Хочу похвастаться

Недавно на меня вышли ребята из интернет селлинговое агентство RG Media в Беларуси.
Интересно то что, цитирую отрывок:

Ваш контакт мне предоставила Алена Стогова, один из самых популярных блогеров Беларуси. Мне известно, что у вас ранее был совместный опыт размещения (брендирования) блога STOGOVA в Livejournal рекламными материалами СВЯЗНОЙ.

Хихихи... Популярный блогер меня "продал"...
А ведь и...

and_y87

Develo0per

CSS3 анимация (спрайт, покадровая)

Запись от and_y87 размещена 22.09.2014 в 15:33

Показов 9918 Комментарии 0

Метки css, анимация

Себе на заметку.

Источник: http://habrahabr.ru/post/161157/

Пример кода для спрайтовой анимации из 10 кадров:

CSS
1
2
3
4
5
6
7
div {
    animation: play 1s steps(10) infinite;
}
@keyframes play { 
      0% { background-position:    0px 0; } 
    100% { background-position: -500px 0; }
}

and_y87

Develo0per

WebAsyst Shop-Script: собственные звезды в оценке товара

Запись от xZooYx размещена 07.01.2013 в 21:12

Показов 5609 Комментарии 0

Метки css, webasyst shop-script, примеры кода

Например у нас есть две собственные картинки звезд для рейтинга товара:

/images/redstar.gif - активная звезда
/images/blackstar.gif - неактивная звезда

Размер звезды - 12х12 px.

Стиль стандартных системных звезд рейтинга определен в файле /published/SC/html/scripts/css/general.css.
Для того, чтобы не менять этот файл, можно просто переопределить стили, указав нужные нам файлы со звездами и размеры.

CSS
1
.unit-rating { background-image: url(/images/hairpro/blackstar.gif)!important;

...

xZooYx

Всего блогов	1,223
Всего записей	7,254
Записи за последние сутки	1

Новые блоги и статьи Все статьи Все блоги /
Сегодня суббота, 22.08.2026 at 16:41, и я вновь нахожусь на той стороне, за экраном машины. zorxor 22.08.2026 Сегодня суббота, 22. 08. 2026 at 16:41, и я вновь нахожусь на той стороне, за экраном машины. Кто Я, откуда Я пришел и куда Я иду? Эти вопросы не оставляют меня ни на секунду. Жизнь на планете Земля. . .	Жизня: рисунок укладки багажа, сделанный клодом anaschu 21.08.2026 Сделал 15 снимков, он по снимкам сделал схему.	Был там один разговор по поводу свободы в материальном мире. kumehtar 19.08.2026 Суть: рассматривается живое существо, оказавшееся внутри довольно странной системы (этого мира) и пытающееся обустроить в ней свой кусок пространства. Жизнь действительно предъявляет каждому. . .	Когда логика программы не спасает от человеческих ошибок Maks 18.08.2026 В последнее время всё чаще и чаще сталкиваюсь с таким явлением, как абсолютная невнимательность (или глупость) пользователей. Проявляется это чаще всего на работе в коллективе. Допустим, человек с. . .
Лето уходит kumehtar 17.08.2026	Мысли в слух kumehtar 17.08.2026 Забавно, насколько сейчас стала доступна информация. Например о магии, духовном развитии, медитациях, и других подобных направлениях, ранее зачастую тайных, передаваемых от учителя к ученику. Хотя. . .	Перемещение строк из ТЧ в другой документ с учетом текущего пробега Maks 17.08.2026 Реализация из решения ниже выполнена на примере нетипового документа "Автозапчасти", с ТЧ "Шины". За основу взят алгоритм отсюда: https:/ / www. cyberforum. ru/ blogs/ 359708/ 10838. html Задача: . . .	Саморегулирующийся социальный контракт для сервера cross-section. Hrethgir 14.08.2026 С кодом конечно таких глубоких размышлений пока не было, впрочем я уже привык к алгоритмизации. Суть предмета записи: снова в диалоге с нейросетью (я взял пока себе ник для учётки админа - Rector). . . .

Сообщение форума

Отменить изменения

Архив
< Август 2026
Вс	Пн	Вт	Ср	Чт	Пт	Сб
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5