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

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

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

Метки javascript, unicode

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

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

mr_dramm

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

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

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

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

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

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

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

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

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

mr_dramm

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

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

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

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

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

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

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

demo

...

mr_dramm

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

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

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

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

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

Метки html, javascript

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

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

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

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

mr_dramm

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

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

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

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

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

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

Метки javascript, next.js

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

mr_dramm

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

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

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

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

Метки html, react

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

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

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

mr_dramm

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

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

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

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

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

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

mr_dramm

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

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

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

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

badUI battles on raddit

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

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

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

Ниндзя-код

mr_dramm

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

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

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

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

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

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

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

Новые блоги и статьи Все статьи Все блоги /
Модель здравосохранения 14. Собираем всю модель вместе. anaschu 22.05.2026 Модель собрана. В будущих постах на видео я покажу, как она работает. В этом посте запускаем её, проверяем результаты и разбираем что можно с ней делать дальше. Перед запуском проверяем. . .	Модель здравоохранения 13. Добавление самой системы здравоохранения. anaschu 22.05.2026 В предыдущем посте мы настроили болезни. Теперь добавим события, которые управляют здоровьем всего коллектива, а также настроим рабочий график и расчёт финансов. В Main создаём четыре события. . . .	Модель здравоохранения 12. добавление болезней через ресурпул, как аварии anaschu 22.05.2026 Болезни — это ключевая часть нашей модели. Нам нужно, чтобы работник периодически уходил на больничный, его задание при этом зависало, а после выздоровления работа возобновлялась. Реализуем это двумя. . .	Модель здравоохранения 11. Создаём классы Задание и Работник anaschu 22.05.2026 В AnyLogic каждая заявка и каждый ресурс — это объект определённого класса. Нам нужно создать два класса: Задание (заявка) и Работник (ресурс). Класс Задание В дереве проекта нажимаем правой. . .
Модель здравоохранения 10. Новая модель, смотрим, как добавлять логические блоки, и что писать внутри anaschu 22.05.2026 Открываем AnyLogic, создаём новый проект. В дереве проекта появляется класс Main — это главный агент, в котором будет жить вся наша логика. Палитра блоков Слева находится палитра. Нас интересует. . .	модель ЗдравоСохранения 9. Новая модель, разбираемся, как ее создавать anaschu 22.05.2026 В этой серии постов мы построим модель небольшого рабочего коллектива. Сотрудники получают задания, выполняют их, иногда болеют — и мы хотим посчитать, сколько это стоит компании. Метод. . .	[golang] Linked list alhaos 22.05.2026 Связный список / Linked list Связный список структура данных позволяющая хранить список значений, в отличии от массива в памяти хранится не сплошным куском, а отдельными частями которые ссылаются. . .	[golang] Двоичная куча, min-heap alhaos 20.05.2026 Двоичная куча Двоичная куча — структура данных, которая всегда держит самый важный элемент наготове. Представьте очередь к хилеру в игре, и очередь из игроков в приоритете те у кого меньше. . .

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

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