Задать вопрос

NeKt0

it-шник
Лайки

  • Как сделать эффект закруглений как на фото?

    @historydev Куратор тега JavaScript
    Острая аллергия на анимешников
    svg, clip-path
    Ответ написан
    2 комментария
    2 комментария

  • Как убить неубиваемый процесс и сервис под Windows?

    CityCat4
    @CityCat4
    Внимание! Изменился адрес почты!
    Возможно и есть, но начать надо с того, что это за процесс/сервис. Вполне возможно его "убиение" приведет к задушевной беседе со службой безопасности :)
    Ответ написан
    Комментировать
    Комментировать

  • Какие книги есть по эффективной работе в технической поддержке?

    oskv
    @oskv
    Head of technical support и я обожаю Zendesk!
    Мне очень понравилась в своё время книга "Kind regards, деловая переписка на английском языке" (она достаточно старая, тогда ещё не было ChatGPT ))
    И, как ни странно, книга "ВкусВилл: Как совершить революцию в ритейле, делая всё не так", они там много рассказывают про клиентский сервис в том числе.
    Есть ещё русскоязычный блог ребят из supprt science (в первом слове нет опечатки, так и пишется), у них достаточно ёмкие статьи про коммуникацию с клиентом и решение их проблем.
    Ответ написан
    Комментировать
    Комментировать

  • Как и на чем сделать пошаговую инструкцию на сайте?

    victormayorov
    @victormayorov
    Frontend разработчик
    один из первых результатов из гугла - https://driverjs.com/
    Ответ написан
    Комментировать
    Комментировать

  • Как реализовать подобную скролл-анимацию на сайте?

  • Как правильно перехватывать события ухода пользователя со страницы?

    @cryptodust
    Ответ на первый вопрос:
    window.addEventListener('beforeunload', function(event) {
    event.preventDefault();  // для того чтобы браузер показал пользователю сообщение
});


    Насчет второго вопросов думаю много вариантов(создать div который будет отображаться по событию например).
    Ответ написан
    Комментировать
    Комментировать

  • Плавная прокрутка к якорю средствами css?

    @humvn
    html {
    scroll-behavior: smooth;
    }
    Ответ написан
    3 комментария
    3 комментария

  • Как создать скелетон-структуру при загрузке сайта?

    DanArst
    @DanArst
    Гриффиндор в моде при любой погоде!
    1) Вот руководство с использованием javascript - реализация примера на codepen
    2) Вот вариант реализации с Jquery
    Ответ написан
    Комментировать
    Комментировать

  • Как изменить текст цвета в зависимости от фона?

    Frontend777
    @Frontend777
    Ubuнтер, php разраб, Wordпрессер, человек
    Если вам подойдет использование js, то можно попробовать рассмотреть такой пример:
    <!DOCTYPE html>
<html lang="en">
<head>
  <script src="script.js"></script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Dynamic Text Color</title>
</head>
<body>
  <div class="container">
    <p id="content">Ваш текст.</p>
  </div>
</body>
</html>

    Css:
    body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white; /* Default background color */
}

.container.dark {
  background-color: black; /* Dark background color */
  color: white; /* Text color for dark background */
}

    JS:
    const container = document.querySelector('.container');
const content = document.getElementById('content');

// Функция для определения цвета фона
function getBackgroundColor(element) {
  const bgColor = window.getComputedStyle(element).backgroundColor;
  return bgColor;
}

// Функция для определения оптимального цвета текста
function getTextColor(backgroundColor) {
  // Пример простой проверки на светлый или тёмный цвет фона
  const rgb = backgroundColor.match(/\d+/g);
  const brightness = (parseInt(rgb[0]) * 299 + parseInt(rgb[1]) * 587 + parseInt(rgb[2]) * 114) / 1000;

  return brightness >= 128 ? 'black' : 'white';
}

// Изменение цвета текста в зависимости от цвета фона
function updateTextColor() {
  const bgColor = getBackgroundColor(container);
  const textColor = getTextColor(bgColor);
  content.style.color = textColor;
}

// Обновляем цвет текста при загрузке и изменении размера окна
window.addEventListener('load', updateTextColor);
window.addEventListener('resize', updateTextColor);

    P.S Нагенерил код gpt
    Ответ написан
    7 комментариев
    7 комментариев

  • В чем разница между ajax, вебсокетом и реактивностью?

    VoidVolker
    @VoidVolker Куратор тега JavaScript
    Dark side eye. А у нас печеньки! А у вас?
    Это разные вещи. Аякас - изначально концепция, но на деле под ним обычно понимают стандартный хтпп запрос на сервер. Веб сокеты - это асинхронный протокол для передачи данных поверх TCP. Голые сокеты не очень удобно применять в вебе, а у хттп свои ограничения - вот и сделали хороший и удобный стандарт. А реактивность - по сути просто обновление интерфейса при поступлении обновленных данных.
    Ответ написан
    Комментировать
    Комментировать

  • Почему TS выдает ошибку при попытке присвоить объект значению val: User | null = null?

    XanXanXan
    @XanXanXan
    removeUser: state => state = null
    removeUser: state => initialState

    const initialState: {
  currentUser?:  User;
} = {}

state.currentUser = {
        id: token.user_id,
        name: token.user_name,
        role: token.user_role
}


    https://stackoverflow.com/questions/63037105/why-i...
    Ответ написан
    5 комментариев
    5 комментариев

  • Как использовать тег picture при создании адаптивных изображений?

    @IvanPsarev
    It-любитель
    Заводим тег picture внутри которого указываем дефолтную картинку:
    <picture>
    <img class="image"
      src="img/mobile.jpg"
      alt="Описание" width="260" height="260">
<picture>

    В данном коде у нас везде просто загрузится "img/mobile.jpg".
    Как это можно улучшить? Можно использовать прогрессивные файлы изображений такие как webp (почитать про них стоит отдельно, вкратце - они меньше весят при одинаковом качестве картинки).
    Добавляем условие для показа новой картинки:
    <picture>
    <source srcset="img/mobile.webp" 
      type="image/webp">
    <img class="image"
      src="img/mobile.jpg"
      alt="Описание" width="260" height="260">
<picture>

    Здесь, если браузер поддерживает .webp будет загружена картинка: img/mobile.webp.
    Допустим у нас есть брейкпоинт на десктоп при 768px где нам нужно показывать картинку более высокого качества (либо вообще другую). Код можно улучшить так:
    <picture>
    <source media="(min-width:768px)" 
      srcset="img/desktop.webp"
      type="image/webp">
    <source media="(min-width:768px)"
      srcset="img/picture/desktop.jpg">
    <source srcset="img/mobile.webp" 
      type="image/webp">
    <img class="image"
      src="img/mobile.jpg"
      alt="Описание" width="260" height="260">
<picture>

    Тут мы добавили еще 2 условия: если окно шире 768px и браузер поддерживает webp - грузится desktop.webp, если не поддерживает то - desktop.jpg.
    Данную конструкцию можно еще расширить. Например мы хотим чтобы на retina-дисплеях картинки показывались в более высоком качестве. Для этого у нас должны быть копии всех наших картинок но с увеличенным в 2 раза разрешением. Например, наши картинки будут именоваться как mobile@1x.jpg (260х260рх). плюс эти же картинки, но в 2 раза большем разрешении: mobile@2x.jpg (520х520рх). Загружать их, или нет будет решать браузер, на основании данных о плотности пикселей на экрана полученных от системы (это тоже отдельная тема для обсуждения, есть статьис названием что-то вроде "Пиксель на самом деле не пиксель". Точного названия не помню, но смысл в том, что на "так называемых" Retina-дисплеях при фактическом разрешении, например, 2500х1600px браузер будет "считать", что окно шириной 1250px). Короче для "ретинизации" код нужно изменить так:
    <picture>
  <source media="(min-width:768px)" 
    srcset="img/desktop@1x.webp, img/webp/desktop@2x.webp 2x"
    type="image/webp">
  <source media="(min-width:768px)"
    srcset="img/picture/desktop@1x.jpg, img/picture/desktop@2x.jpg 2x">
  <source srcset="img/webp/mobile@1x.webp, img/webp/mobile@2x.webp 2x" 
    type="image/webp">
  <img class="image" 
    src="img/mobile@1x.jpg" 
    srcset="img/mobile@2x.jpg 2x"
    alt="Описание" width="260" height="260">
</picture>

    Вся эта громадина читается сверху:
    - первый <source>: если ширина экрана больше 768рх, браузер поддерживает webp и плотность пикселей 2x грузится desktop@2x.webp, если плотность пикселей 1х - desktop@1x.webp
    - если webp не поддерживается, то второй <source> - все тоже самое для .jpg
    - если экран уже 768px - третий <source>
    - во всех остальных случаях и в случае если браузер не поддерживает загрузится обычный <img>.
    Нужно понимать, что для такого подхода требуется иметь для одной картинки 4 файла и это только для одной ширины экрана:
    mobile@1x.jpg, mobile@2x.jpg, mobile@1x.webp, mobile@2x.webp.
    И еще столько же для desktop.
    Вот как-то так, можно добавить еще брейкпоинт для tablet - все по примеру :)
    Ответ написан
    10 комментариев
    10 комментариев

  • Локальная сеть переключается на 'Общественную'. Как исправить?

    pindschik
    @pindschik
    ФЫВА ОЛДЖ
    21 ПК это более чем достаточно для создания домена. Сильно облегчите себе же работу... И проблемы типа этой просто перестанут существовать.
    Ответ написан
    4 комментария
    4 комментария

  • Где должны храниться файлы с тестами в модульной и FSD архитектуре Front-end?

    WblCHA
    @WblCHA
    В папке __tests__ на том же уровне, что и тестируемый файл. Локальные моки там же, глобальные для пекеджей согласно документации библиотеки для тестирования, а свои глобальные уже смотреть надо, в фсд можно в шейрд запихнуть.

    П.с.: но это всё очень условные правила, всё зависит от проекта и принятых там правил. Так же и от настроек линтера (в смысле можно настроить какой хочешь паттерн). Так что не грех попробовать разные варианты и выбрать тот, который для тебя/команды и проекта больше подходит.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать, чтобы при всех масштабах сайт отображался корректно?

    demon416nds
    @demon416nds
    Разработчик на чем попало
    Изменение масштаба технически является изменением разрешения рендеринга, делайте "резиновую" вёрстку
    Ответ написан
    2 комментария
    2 комментария

  • Что такое выражение, литерал и инициализация в JavaScript?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    По-простому я бы объяснил так:
    • выражение – это любой кусок кода, который в итоге даёт значение. Напр. цифра 0 или a===b
    • литерал – это буквально записанное значение. Напр. 10 или "строка" или объект {a:10, b:20}
    • инициализация – придание начального значения. Напр. переменной при создании: var a = 10
    Ответ написан
    3 комментария
    3 комментария

  • Как сделать анимацию курсора под текстом?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Можно конечно отключать poiner-events, но если включать его для текста, то это всё равно приведёт к той же проблеме. Что под текстом не будет работать.

    Поковырял немного:


    Основное что изменил - отслеживание событий mousemove не на канвасе, а на всей секции и e.offsetX на e.clientX
    Ответ написан
    2 комментария
    2 комментария

  • Как сверстать подобные блоки?

    LenovoId
    @LenovoId
    svg, css,js


    Ответ написан
    Комментировать
    Комментировать

  • Как правильно верстать используя bootstrap?

    ThunderCat
    @ThunderCat Куратор тега CSS
    {PHP, MySql, HTML, JS, CSS} developer
    Как вообще задавать фикс значения используя бутстрап?
    Никак, он не для этого.

    Создавать свой класс? Нормально ли вообще создавать свой класс и юзать его в перемешку с версткой на bootstrap?
    Да, создавать, да, нормально.

    Если да, то как организовывать такие классы в файловой структуре, ведь они будут созданы только в том случае, если возможностей бустрапа не хватит.
    Добавляете файл /assets/css/style.css, подключаете после бутстрап.
    Ответ написан
    Комментировать
    Комментировать

  • Замыкания внутри циклов javascript

    dizballanze
    @dizballanze
    Software developer at Yandex
    1. Если как они утверждают цикл будет закончен до того как будет вызвана console.log(i) то почему результат выводится 10 раз?


    У вас же timeout используется, т.е. 10 раз внутри цикла будет запущен таймер, пока первый из таймеров закончится цикл уже пройдет все 10 итераций и соотв i будет иметь значение 10.
    Ответ написан
    Комментировать
    Комментировать