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

Запись от mr_dramm размещена 02.06.2025 в 18:46

Показов 5735 Комментарии 3

Метки javascript, unicode

скопировано из этой темы чтобы не потерялось.

localeCompare без указания локали для сравнения строк под капотом использует Intl.Collator , который работает согласно Unicode Collation Algorithm (UCA), согласно этому алгоритму происходит нормализация строк с учётом особенностей языка и символов или можно по другому сказать имитация алфовитного порядка,...

mr_dramm

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

Интерактивные popup с автоматическим выравниванием и анимацией

Запись от mr_dramm размещена 09.02.2025 в 23:00

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

Метки animation, html, javascript, reflow

Рекомендуется статья к прочтению:

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

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

- автоматическое вертикальное выравнивание при добавлении и удалении popup
- автоматическое удаление popup через указанные промежуток времени
- анимация появления...

mr_dramm

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

передача состояния между анимациями web animations api

Запись от mr_dramm размещена 05.08.2024 в 11:30

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

Метки html, html5, javascript, web animations api

В последнее время участились вопросы как сделать анимацию чтобы она работала в точности как transition, т.е. начиналась анимация потом срабатывал триггер анимация останавливливалась, разворачивалась, и проигрывалась в обратном направлении. Один из вариантов использовать метод animate из Web Animations Api

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

demo

...

mr_dramm

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

Кратко о кодировании битов в utf8

Запись от mr_dramm размещена 26.12.2023 в 20:16

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

Метки javascript, unicode

utf8 - стандарт кодирования символов, позволяющий более компактно хранить и передавать символы Юникода, используя переменное количество байт (от 1 до 4), и обеспечивающий полную обратную совместимость с 7-битной кодировкой ASCII.

рассмотрим, как распределяются биты в символах от 1 до 4х байт. для этого воспользуемся таблицей Table 3-6. UTF-8 Bit Distribution это основной стандарт и там ее можно найти странице 125 или через поиск....

mr_dramm

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

Аккордион с transition

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

Показов 2071 Комментарии 3

Метки html, javascript

Вертикальный на классах

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

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

Логика работы:
- элемент .content скрывается с помощью .dropdown с установленным свойством overflow:hidden,
...

mr_dramm

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

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

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

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

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

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

Пробую новые возможности Next.js 13

Запись от mr_dramm размещена 05.03.2023 в 22:42

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

Метки javascript, next.js

Ссылка на habr
моя система хранения данных contentful сайта сказала что может хранить в одном текстовом поле не более 50к символов, пришлось разделить на 2 части статью

mr_dramm

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

Конвертируем markdown в html и подключаем компоненты React с Unified это просто

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

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

Метки html, react

Моя первая большая статья!

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

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

mr_dramm

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

Надеюсь понравится Лого Cyberforum в svg

Запись от mr_dramm размещена 26.09.2022 в 22:53

Показов 2937 Комментарии 11

Не совсем от нечего делать нарисовал логотип Cyberforum в svg. Тут https://xwyygl.csb.app/

Прикрепил архив с файлами

mr_dramm

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

Не очень полезные ссылки

Запись от mr_dramm размещена 08.09.2022 в 20:53. Обновил(-а) mr_dramm 31.07.2025 в 19:56

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

badUI battles on raddit

Палитра цветов - смореть если работает ютуб

Почти идеальный интерфейс

Сортировка дней недели по алфавиту в интерфейсе

Ниндзя-код

mr_dramm

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

Пытаюсь понять почему tailwind это хорошо

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

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

Метки javascript, next.js, tailwind

Я сейчас собираюсь делать новый проект на NextJS для SSG / materialUI / и выбираю то ли остаться на styled-components в которых я кайфую потому что все просто и понятно, то ли что то новое (Tailwindcss )

2 дневный первый взгляд на Tailwindcss

tailwindcss

Возможно у этой библиотеки высокая производительность потому что во первых на выходе получаем css, который почти...

mr_dramm

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

Ресурсы для почитать и посмотреть front-end

Запись от mr_dramm размещена 17.07.2022 в 15:28. Обновил(-а) mr_dramm 15.02.2026 в 11:24

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

Ресурсы front-end

Доклады
- https://holyjs.ru/archive/
- https://www.youtube.com/@HighLoadChannel
- https://www.youtube.com/@YandexforFrontend

habr:
- https://habr.com/ru/users/meln... /articles/ - статьи Стаса Мельникова

Hi Tech news
- https://xakep.ru/
- https://www.securitylab.ru/news/

Dev Sites
- design-pattern.ru/ - Справочник «Паттерны проектирования»...

mr_dramm

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

Пример модального окна с плюшками

Запись от mr_dramm размещена 27.06.2022 в 02:33

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

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

Новые блоги и статьи Все статьи Все блоги /
Часы электронные Uhbif79 12.08.2026 Выкладываю программу часов. Программа позволяет: 1. Использовать системное время и дату, 2. Есть возможность вводить время и дату вручную. 3. Реализованы 2 будильника: начало и конец рабочего дня. . . .	Часы с будильником на основе класса QLCDNumber Uhbif79 12.08.2026 Всем добрый день, выкладываю программу часов с будильником на основе класса QLCDNumber. Здесь я пробовал самостоятельно создавал классы, впервые столкнулся с видимостью переменной одного класса из. . .	Установка MinGW GCC 16.2 и CMake 8Observer8 10.08.2026 VK Видео: https:/ / vkvideo. ru/ video-240781534_456239017 YouTube: eY5-5PyI9NM Текстовая версия	Неделя из жизни имитационной модели склада: мои кривые руки растут, откуда надо anaschu 10.08.2026 Неделя из жизни имитационной модели склада: как я почти написал неправильную логику и что с этим делать Работаю сейчас над учебно-рабочим проектом: строю в AnyLogic имитационную модель процессов. . .
Калькулятор для расчета родства russiannick 07.08.2026 1. Задача: Создать калькулятор для расчета родства. Родственных связей существует 8 ступеней, такие как: p - отец P - мать q - муж Q - жена b - брат B - сестра s - сын S - дочь	Мир по моей воле kumehtar 07.08.2026 Когда-то кажется, что всё просто. Ты весь такой светлый. Причиняешь добро. Борешься за справедливость в этом тёмном мире. Потом начинаешь замечать одну неприятную вещь. Почти каждый хороший. . .	Кредитный калькулятор Maks 05.08.2026 Решение задачи по прикладной информатике средствами 1С. Задача: Напишите приложение-калькулятор, которое помогает рассчитывать параметры кредита для аннуитетного и дифференцированного видов. . .	У нас сейчас поговорку "Опять 25" нужно переделать на "Опять +35". kumehtar 04.08.2026 С ностальгией вспоминаю времена моего детства, когда у нас и правда +25 - была максимальная температура летом. Раньше +25 °C реально казались вершиной жары, когда можно было весь день пропадать на. . .

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

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