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

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

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

Показов 2413 Комментарии 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
Просмотров: 162
Размер: 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

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

Нажмите на изображение для увеличения
Название: Чат на React, Node.js и TailwindCSS Фронт.jpg
Просмотров: 156
Размер: 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

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

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

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

Reangularity

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

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

Показов 4298 Комментарии 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
Просмотров: 308
Размер: 124.1 Кб
ID: 11055

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

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

Reangularity

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

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

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

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

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

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

8Observer8

Css рамки

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

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

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

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

FuToma

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

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

Показов 1132 Комментарии 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

Показов 2567 Комментарии 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

Показов 3450 Комментарии 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 / Приветсвие!

Показов 2585 Комментарии 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

Показов 2298 Комментарии 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

Показов 17164 Комментарии 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

Показов 6781 Комментарии 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

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

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

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

kisk

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

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

Показов 3145 Комментарии 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

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

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

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

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

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

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

...

and_y87

Develo0per

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

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

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

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

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

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

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

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

and_y87

Develo0per

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

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

Показов 9683 Комментарии 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

Показов 5460 Комментарии 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,211
Всего записей	6,871
Записи за последние сутки	0

Новые блоги и статьи Все статьи Все блоги /
Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .	PowerShell Snippets iNNOKENTIY21 11.11.2025 Модуль PowerShell 5. 1+ : Snippets. psm1 У меня модуль расположен в пользовательской папке модулей, по умолчанию: \Documents\WindowsPowerShell\Modules\Snippets\ А в самом низу файла-профиля. . .	PowerShell и онлайн сервисы. Валюта (floatrates.com руб.) iNNOKENTIY21 11.11.2025 PowerShell функция floatrates-rub Примеры вызова: # Указанная валюта 'EUR' floatrates-rub -Code 'EUR' # Список имеющихся кодов валют floatrates-rub -Available function floatrates-rub {	PowerShell и онлайн сервисы. Погода (RP5.ru) iNNOKENTIY21 11.11.2025 PowerShell функция Get-WeatherRP5rss для получения погоды с сервиса RP5 Примеры вызова Get-WeatherRP5rss с указанием id 5484 — Москва (восток, Измайлово) и переносом строки:. . .
PowerShell и онлайн сервисы. Погода (wttr) iNNOKENTIY21 11.11.2025 PowerShell Функция для получения погоды с сервиса wttr Примеры вызова: Погода в городе Омск с прогнозом на день, можно изменить прогноз на более дней, для этого надо поменять запрос:. . .	PowerShell и онлайн сервисы. Валюта (ЦБР) iNNOKENTIY21 11.11.2025 # Получение курса валют function cbr (] $Valutes = @('USD', 'EUR', 'CNY')) { $url = 'https:/ / www. cbr-xml-daily. ru/ daily_json. js' $data = Invoke-RestMethod -Uri $url $esc = 27 . . .	И решил я переделать этот ноут в машину для распределенных вычислений Programma_Boinc 09.11.2025 И решил я переделать этот ноут в машину для распределенных вычислений Всем привет. А вот мой компьютер, переделанный из ноутбука. Был у меня ноут асус 2011 года. Со временем корпус превратился. . .	Мысли в слух kumehtar 07.11.2025 Заметил среди людей, что по-настоящему верная дружба бывает между теми, с кем нечего делить.	Новая зверюга volvo 07.11.2025 Подарок на Хеллоуин, и теперь у нас кроме Tuxedo Cat есть еще и щенок далматинца: Хочу еще Симбу взять, очень нравится. . .

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

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

Архив
< Ноябрь 2025
Вс	Пн	Вт	Ср	Чт	Пт	Сб
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	1	2	3	4	5	6