Форум программистов, компьютерный форум, киберфорум
Html
Форум программистов и сисадминов Киберфорум > Блоги > html
Войти
Регистрация
Восстановить пароль
Блоги Социальные группы Поиск Сообщения за день Заказать работу  
Старый
Passkey в ASP.NET Core identity
Запись от stackOverflow размещена 29.10.2025 в 15:40
Показов 4079 Комментарии 0
Нажмите на изображение для увеличения Название: Passkey в ASP.NET Core identity.jpg Просмотров: 176 Размер: 196.2 Кб ID: 11350
Пароли мертвы. Нет, серьезно - я повторяю это уже лет пять, но теперь впервые за это время чувствую, что это не просто красивые слова. В .NET 10 команда Microsoft внедрила поддержку Passkey прямо в ASP.NET Core Identity, и это реально меняет правила игры. Больше никаких "123456" в продакшене, никаких слезных звонков от пользователей "я забыл пароль к корпоративному...
Аватар для stackOverflow
Старый
Чат на React, Node.js и TailwindCSS: Синхронизация, валидация, шифрование, демо-приложение
Запись от Reangularity размещена 01.10.2025 в 20:43 / Vue/React/Angular/Svelte notes
Показов 2413 Комментарии 0
Нажмите на изображение для увеличения Название: Чат на 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
Показов 2087 Комментарии 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
Показов 2390 Комментарии 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
Нажмите на изображение для увеличения Название: ИИ-автозаполнение в React с OpenAI.jpg Просмотров: 308 Размер: 124.1 Кб ID: 11055
Представьте, что вы пишете сообщение, и приложение не просто предлагает вам следующее слово, а формирует целые осмысленные предложения, учитывая контекст вашей переписки. Или, что еще круче, вы начинаете набирать код в редакторе, и он не только автоматически закрывает скобки, но и предлагает логически верное продолжение функции, учитывая архитектуру вашего проекта.

В React интеграция подобных возможностей становится реальностью...
Аватар для Reangularity
Старый
Форма логина на AngularJS с ASP.NET, часть 4
Запись от UnmanagedCoder размещена 29.07.2025 в 21:40 / C# .Net and all about. Обновил(-а) UnmanagedCoder 29.07.2025 в 21:41
Показов 3898 Комментарии 0
Нажмите на изображение для увеличения Название: Форма логина на AngularJS с ASP.NET 4.jpg Просмотров: 261 Размер: 38.3 Кб ID: 11021
Форма логина на AngularJS с ASP.NET, часть 1
Форма логина на AngularJS с ASP.NET, часть 2
Форма логина на AngularJS с ASP.NET, часть 3
Форма логина на AngularJS с ASP.NET, часть 4

Интеграция с внешними провайдерами OAuth



Помню, как несколько лет назад мой клиент возмутился: "Зачем нам эта кнопка 'Войти через Google'? У нас серьезный бизнес-сервис,...
Аватар для UnmanagedCoder
Старый
Форма логина на AngularJS с ASP.NET, часть 3
Запись от UnmanagedCoder размещена 29.07.2025 в 21:40 / C# .Net and all about. Обновил(-а) UnmanagedCoder 29.07.2025 в 21:41
Показов 2471 Комментарии 0
Нажмите на изображение для увеличения Название: Форма логина на AngularJS с ASP.NET 3.jpg Просмотров: 233 Размер: 85.3 Кб ID: 11020
Форма логина на AngularJS с ASP.NET, часть 1
Форма логина на AngularJS с ASP.NET, часть 2
Форма логина на AngularJS с ASP.NET, часть 3
Форма логина на AngularJS с ASP.NET, часть 4

Асинхронные запросы и индикаторы загрузки



Одна из самых досадных ошибок, которую я встречаю в интерфейсах авторизации, — полное отсутствие обратной связи...
Аватар для UnmanagedCoder
Старый
Форма логина на AngularJS с ASP.NET, часть 2
Запись от UnmanagedCoder размещена 29.07.2025 в 21:40 / C# .Net and all about. Обновил(-а) UnmanagedCoder 29.07.2025 в 21:41
Показов 2299 Комментарии 0
Нажмите на изображение для увеличения Название: Форма логина на AngularJS с ASP.NET 2.jpg Просмотров: 178 Размер: 45.5 Кб ID: 11019
Форма логина на AngularJS с ASP.NET, часть 1
Форма логина на AngularJS с ASP.NET, часть 2
Форма логина на AngularJS с ASP.NET, часть 3
Форма логина на AngularJS с ASP.NET, часть 4

Кэширование данных пользователей и оптимизация запросов



Когда ваше приложение начинает расти, каждый запрос к базе данных становится на вес золота. Особенно это...
Аватар для UnmanagedCoder
Старый
Форма логина на AngularJS с ASP.NET, часть 1
Запись от UnmanagedCoder размещена 29.07.2025 в 21:40 / C# .Net and all about. Обновил(-а) UnmanagedCoder 29.07.2025 в 21:41
Показов 2305 Комментарии 0
Нажмите на изображение для увеличения Название: Форма логина на AngularJS с ASP.NET.jpg Просмотров: 225 Размер: 81.6 Кб ID: 11018
Форма логина на AngularJS с ASP.NET, часть 1
Форма логина на AngularJS с ASP.NET, часть 2
Форма логина на AngularJS с ASP.NET, часть 3
Форма логина на AngularJS с ASP.NET, часть 4

Авторизация — это ворота в ваше приложение. И если эти ворота сделаны из фанеры, а не из титана, будьте готовы к тому, что рано или поздно кто-то войдет...
Аватар для UnmanagedCoder
Старый
Рейтинг: 5.00. Голосов: 1.
Умеренная ширина сайта
Запись от russiannick размещена 24.07.2025 в 16:13
Показов 4728 Комментарии 2
Метки html
HTML5
1
2
3
4

        <meta charset="utf-8" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="robots" content="noindex, nofollow">
        <meta content="width=1024" name="viewport" />
HTML5
1
2
3

        <meta charset="utf-8" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible"
...
Старый
Winforstrap или красявый дизайн своими руками на HTML+JS+Winform­s
Запись от anomal6 размещена 04.03.2025 в 21:50
Показов 2891 Комментарии 0
Сидел тут вечером ковырял проект на MAUI, и как же глупо создаются пакеты MSIX и система обновлений пакета публикации, но не об этом.

Бывает нужен современный дизайн программы а писать на MAUI, так не прост в освоении.
Всякие Guna Metro и подобные фреймворки не дают такого...
Старый
Рейтинг: 5.00. Голосов: 1.
Интерактивные popup с автоматическим выравниванием и анимацией
Запись от mr_dramm размещена 09.02.2025 в 23:00
Показов 1324 Комментарии 0
Рекомендуется статья к прочтению:

1. Анимация в браузерах и как с ней работать Сергей Чикуёнок (VK)

Функциональные фичи:

- автоматическое вертикальное выравнивание при добавлении и удалении popup
- автоматическое удаление popup через указанные промежуток времени
- анимация появления...
Аватар для mr_dramm
Молодой техлид)
Старый
Рейтинг: 5.00. Голосов: 2.
передача состояния между анимациями web animations api
Запись от mr_dramm размещена 05.08.2024 в 11:30
Показов 1135 Комментарии 0
В последнее время участились вопросы как сделать анимацию чтобы она работала в точности как transition, т.е. начиналась анимация потом срабатывал триггер анимация останавливливалась, разворачивалась, и проигрывалась в обратном направлении. Один из вариантов использовать метод animate из Web Animations Api

В этом примере используется две анимации, которые сменяют друг друга, для того чтобы показать принцип работы, можно комбинировать больше анимаций

demo

...
Аватар для mr_dramm
Молодой техлид)
Старый
Рейтинг: 5.00. Голосов: 2.
Консольные команды для форматирования исходного кода на 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. Например, достаточно будет ввести команду...
Старый
Рейтинг: 2.60. Голосов: 5.
Аккордион с transition
Запись от mr_dramm размещена 24.10.2023 в 16:15
Показов 1882 Комментарии 3
Метки html, javascript
Вертикальный на классах

В давней теме я сделал прототип влавного спадающего списка Плавное выдвижение блока в js и немного увлекся что привело к созданию этой записи в блоге

Особенности реализации:
- класс .dropdown не должен иметь padding или border, если нужны padding для контента устанавливаем их в классе content или item.

Логика работы:
- элемент .content скрывается с помощью .dropdown с установленным свойством overflow:hidden,
...
Аватар для mr_dramm
Молодой техлид)
Старый
варианты фиксированного заголовка
Запись от 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
Молодой техлид)
Старый
Рейтинг: 5.00. Голосов: 3.
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
Молодой техлид)
Старый
Рейтинг: 5.00. Голосов: 1.
Конвертируем markdown в html и подключаем компоненты React с Unified это просто
Запись от mr_dramm размещена 22.12.2022 в 08:14
Показов 1442 Комментарии 0
Метки html, react
Моя первая большая статья!

Ссылка на мой сайт - тут есть интерактивное оглавление, нет комментариев, надеюсь скоро будут
Ссылка на habr

В статье использована библиотека unified и экосистема плагинов для работы с markdown и html, поверхностно опишем работу с синтаксическими деревьями, создадим процессор подключив несколько плагинов для обработки контента html и markdown, напишем собственный плагин, а для нетерпеливых можно сразу попробовать демо приложение.
Аватар для mr_dramm
Молодой техлид)
Старый
Рейтинг: 5.00. Голосов: 2.
Пример модального окна с плюшками
Запись от mr_dramm размещена 27.06.2022 в 02:33
Показов 1615 Комментарии 10
Метки html, php
пример модального с предотвращением изменения ширины содержимого когда scrollbar скрыт
и предотвращением scroll когда окно активно
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
 
<head>
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
 
    body {
        transition: width .2s;
        position: relative;
    }
 
    .sticky {
...
Аватар для mr_dramm
Молодой техлид)
Старый
Имитация медиа-запросов для конкретного элемента (Element Queries)
Запись от mrtoxas размещена 30.06.2020 в 14:38
Показов 1773 Комментарии 0
Метки html, js, resizeobserver
В примере, при изменении ширины контейнера, ему добавляется соответствующий размеру data-атрибут, который можно использовать для стилизации самого контейнера или вложенных\соседних блоков.

HTML5
1
2
3

<div class="wrapper" id="wrap" data-mq="">
  <div class="block"></div>
</div>
JavaScript
1
2
3
4
5
6
7

const mq = {
  sm: 200,
  md: 400,
  lg: 600
};
 
const element = document.getElementById("wrap");
...
Аватар для mrtoxas
Старый
Рейтинг: 5.00. Голосов: 1.
Игра "Камень, ножницы бумага" на чистом TypeScript и HTML
Запись от 8Observer8 размещена 02.08.2019 в 19:56 / Блог 8Observer8
Показов 2097 Комментарии 0
Метки gamedev, html, typescript
Содержание блога
Старый
Рейтинг: 5.00. Голосов: 1.
How to write a prototype of the Snake Game using JavaScript/ES5, HTML5 Canvas API
Запись от 8Observer8 размещена 06.02.2019 в 21:49 / Блог 8Observer8
Показов 1529 Комментарии 0
Метки canvas, html, javascript
Blog content

Let's make a very simple classic snake game. For example, if we have a snake head with 10x10 pixels then we will move our snake by a step with 10 pixels using timer.

Create a "index.html" file with a canvas element and set the size for the canvas element:

PHP/HTML
1
2
3
4
5
6
7
8

<!DOCTYPE html>
 
<head>
    <title>Snake</title>
</head>
 
<body>
    <canvas width="200" height="200"
...
Старый
Рейтинг: 5.00. Голосов: 1.
Несколько мыслей об HTA
Запись от diadiavova размещена 03.03.2017 в 13:49
Показов 12875 Комментарии 0
  1. Об HTML-приложениях.
  2. Краткое сравнение или почему HTA выглядит привлекательно
  3. В поисках утраченного диалога
  4. Не оставлять же все в таком виде
  5. А нельзя ли сделать поудобнее?
  6. Попробуем что-нибудь запустить
  7. Заключение
Об HTML-приложениях.

Клиентские Web-технологии (я сейчас говорю в первую очередь о связке HTM/JavaScript/CSS) уже давно вышли за пределы той ниши, которая была им...
Аватар для diadiavova
Старый
Рейтинг: 5.00. Голосов: 1.
Моноблок на 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
Старый
Рейтинг: 5.00. Голосов: 8.
Прижать footer к нижнему краю страницы. Подборка вариантов.
Запись от mrtoxas размещена 27.10.2016 в 22:52
Показов 17164 Комментарии 4
Вариант 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
Старый
Рейтинг: 5.00. Голосов: 1.
Книги по графике: HTML5 Canvas, WebGL, ThreeJS и Phaser
Запись от 8Observer8 размещена 13.09.2016 в 09:05 / Блог 8Observer8
Показов 17584 Комментарии 0
Содержание блога

На русском по WebGL:
  1. 2015 - WebGL. Программирование трехмерной графики - Коичи Мацуда, Роджер Ли -> описание -> исходники

На русском по Canvas
  1. 2016 - JavaScript для детей. Самоучитель по программированию -> описание

На английском по Canvas и WebGL:
  1. 2011 - 11 - Foundation HTML5 Animation with JavaScript - Billy Lamberta, Keith Peters -> description and source code
  2. 2012 - 05 - Core HTML5 Canvas Graphics, Animation, and Game Development
...
Старый
Github Atom: заставить разворачиваться конструкцию emmet-а “div.class” по табуляции в php файлах
Запись от fol размещена 07.09.2016 в 11:19
Показов 7463 Комментарии 0
Метки atom, emmet, html, php
Для тех, кто пользуется Emmet-ом в Atom.

Дело в том, что в html файлах отрабатывает:
Code
1

div.some-class
преобразовывается в
Code
1

<div class="some-class"></div>
при нажатии табуляции, когда курсор стоит в конце конструкции, а в php файлах такая система не работает. Итак, как заставить это работать в php файлах?

=======

В конфигурации горячих клавиш Emmet по умолчанию про Tab написано следующее:

Code
1

'atom-text-editor[data-grammar="text
...
Аватар для fol
fol
Старый
Невозможно парсить регулярными выражениями HTML !!!
Запись от BOGG ART размещена 01.06.2016 в 14:51
Показов 15911 Комментарии 12
Подробнее...
Аватар для BOGG ART
Старый
Рейтинг: 5.00. Голосов: 1.
Использование PDO в MySQL
Запись от ASKazin размещена 07.02.2016 в 15:44 / Еще один блог web-мастера
Показов 2194 Комментарии 0
Метки html, mysql, pdo, php, sql
Создаем базу и таблицу через phpMyAdmin:

SQL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

--
-- База данных: `test_base`
--
CREATE DATABASE IF NOT EXISTS `test_base`;
USE `test_base`;
 
--
-- Структура таблицы `test_table`
--
 
CREATE TABLE IF NOT EXISTS `test_table` (
  `id` INT(11) NOT NULL,
  `login` longtext NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
--
-- Индексы таблицы
...
Аватар для ASKazin
Старый
Слайдер на чистом 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

С обычными...
1 из 2 1 2 »
Новые блоги и статьи
Фото: 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 есть еще и щенок далматинца: Хочу еще Симбу взять, очень нравится. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru