dans

MS Word | Заголовок и таблица всегда на одной странице

2025-12-19T08:33:14.776Z

Часто в последнее время приходится работать с шаблонами MS Word для генерации документов. Одна из типовых задач: сделать, чтобы заголовки таблицы не отделялись от основного содержимого.

Алгоритм:

Выделить все строки, которые будут переноситься как целый объект.

Шаг 1. Заголовок и таблица всегда на одной странице

В контекстном меню выбрать "Абзац", вкладка "Положение на странице", установить флажки "Не отрывать от следующего" и "Не разрывать абзац".

Шаг 2. Заголовок и таблица всегда на одной странице

Включить режим отображения скрытых символов форматирования.

Шаг 3. Заголовок и таблица всегда на одной странице

Убедиться, что в конце шаблона последний символ не имеет свойств присоединения к следующему за ним блоку.

Шаг 4. Заголовок и таблица всегда на одной странице

Если галочки "Не отрывать от следующего" или "Не разрывать абзац" не сняты у последней строки, то рядом с последним символом будет стоять точка (черный маленький квадратик). Это приведет к тому, что блок при генерации будет цепляться к следующим строкам документа и могут появится нежелательные переносы.

Это всё. Спасибо за внимание.

Chmod Calculator

2025-06-05T13:24:00.662Z

Утилита для расчета числового или символического значения для набора разрешений файлов/папок на серверах Linux:

https://chmod-calculator.com/

504 (Outdated Optimize Dep) React+Vite

2025-04-07T09:00:03.495Z

Остановить сервер.
Удалить папку: node_modules/.vite/
Очистить кеш пакетного менеджера: npm cache clean --force
Переустановить зависимости и запустить сервер: npm i && npm run dev

Источник: stackoverflow.com

Функция плавности / easing

2024-08-11T07:40:24.042Z

Функция плавности — это инструмент, который позволяет регулировать степень гладкости или резкости перехода между двумя значениями. Она используется для создания эффекта постепенного изменения, чтобы избежать резких скачков или ступенчатых переходов.

Самая простая функция плавности — линейная. В случае линейной функции изменение значения происходит плавно и равномерно. Но для создания качественных визуальных эффектов может пригодиться не только линейная функция плавности, поскольку в реальной жизни объекты никогда не двигаются с постоянной скоростью.

https://easings.net/

На этом сайте можно найти обширный список функций плавности с визуализацией их в нескольких практических вариантах использования, такие как отрисовка градиента, появление/исчезновение объекта через прозрачность, движение, изменение размера. Мне понравилось. Очень наглядно и удобно! Плюс там же есть готовый код для разработки на CSS и JS.

JavaScript Key Codes

2024-06-25T11:21:26.938Z

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

https://www.toptal.com/developers/keycode

JavaScript Key Codes

React и проигрывание аудио

2024-06-12T09:07:10.408Z

Проигрывание звуковых дорожек в React можно сделать с помощью готового хука use-sound. Для этого — установить пакет:

npm install use-sound

Выполнить импорт хука и файла с аудио-записью:

import useSound from 'use-sound';
import mySound from '@/../assets/sounds/sound.mp3' // assets располагается в папке resources

Использовать в коде так:

const MyButton = () => {
  const [playSound] = useSound(mySound);
  
  return (
    <button onClick={() => playSound()}>
       Play Sound
    </button>
  );
};

Или так:

const MyButton = () => {
  const [playSound] = useSound(mySound, { volume: 0.7 });
  
  const handleClick = () => {
    playSound();
    // ...
  };

  return (
    <button onClick={() => handleClick()}>
       Play Sound
    </button>
  );
};

Подробности можно посмотреть тут или на гитхаб.

Изменение состояния без повторного рендеринга / React

2024-03-21T11:10:58.487Z

Каждый раз, когда состояния (useState, useReducer) компонента изменяются, весь компонент рендерится заново. Это означает, что текущий и каждый дочерний, зависимый от этого состояния компонент будет повторно перерисовывать себя.

В разработке может возникнуть необходимость поменять состояние, но не вызывать перерисовку компонента (-ов). В этом будет полезен хук useRef.

Хук React.useRef()— это функция, которая возвращает изменяемый объект ссылки. У этого объекта есть свойство под названием current. Доступ к значению, сохраненному с помощью хука useRef, можно получить или обновить через свойство current. Этот объект сохраняет значение в течение всего срока службы компонента.

const refValue = React.useRef("Initial value"); <-- initializing 

refValue.current = "new value"; <-- Assigning new value through 'current' property

console.log(refValue.current);  <-- Accessing values using 'current' property
>> "new value" <<

Оба хука и useState, и useRefмогут использоваться для сохранения состояния. Но обновление значений useStateприводит к повторному рендерингу компонента, тогда как для useRefне происходит повторного рендеринга при обновлении значения.

Также useRef используется для сохранения ссылки на элементы DOM-дерева. Но это уже совсем другая тема.

Ссылка на источник.

Не подключаются стили tailwindcss для библиотеки material-tailwind

2024-02-28T10:25:12.589Z

Подключила к проекту @material-tailwind/react. Стили, которые используются внутри компонентов библиотеки после сборки отсутствуют.

Чтобы они попали в сборку в конфиге tailwind.config.js необходимо добавить путь до компонентов:

...

export default {
    content: [
        ...
        './node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}',
        './node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}'    
    ],
    
    ...
};

ngrok / Публикация локального приложения, работающего по протоколу HTTPS

2023-12-22T11:01:13.076Z

Что такое ngrok?

ngrok — это глобально распределенный обратный прокси-сервер, который защищает и ускоряет ваши приложения и сетевые службы, независимо от того, где вы их запускаете. Можно представить, что ngrok — это входная дверь для ваших приложений.

ngrok не зависит от среды, поскольку он может доставлять трафик службам, работающим где угодно, без каких-либо изменений в вашей сетевой среде. Запустите свое приложение на AWS, Azure, Heroku, локальном кластере Kubernetes, Raspberry Pi и даже на своем ноутбуке. С ngrok все работает так же.

ngrok — это унифицированная входная платформа, поскольку она объединяет в одно все компоненты для доставки трафика от ваших сервисов в Интернет. ngrok объединяет ваш обратный прокси-сервер, балансировщик нагрузки, шлюз API, межсетевой экран, сеть доставки, защиту от DDoS и многое другое.

Источник: дока по ngrok.

Команда для создания туннеля и публикации приложения, доступного по протоколу HTTPS:

ngrok http http://localhost:8000 --scheme=https

После успешного запуска в консоли появится информация о зарегистрированном ресурсе:

В строке Forwarding есть адрес, по которому приложение доступно в Интернете: https://6c8d-178-64-170-208.ngrok-free.app При завершении сеанса Ctrl+C туннель будет удален и приложение снова станет недоступно.

Разработчикам это может пригодится, например, для тестирования и отладки подключения платежных систем к проектам.

Could not verify SSL certificate

2023-12-19T08:34:34.762Z

Could not verify SSL certificate. (Network error [errno 60]: SSL certificate problem: self-signed certificate in certificate chain)

Ошибка происходит, если сертификаты SSL не установлены в системе должным образом.

Можно решить эту проблему следующим образом:

Загрузить файл с обновленным списком сертификатов по ссылке:
https://curl.haxx.se/ca/cacert.pem
Переместить загруженный файл cacert.pem в локальное безопасное место.
Обновить файл php.ini: добавить или обновить путь до сертификата:
openssl.cafile=C:/dev/ssl/cacert.pem
Перезапустить сервер.