• Как сделать реально адаптивную волну между блоками (svg, clip-path)?

    RAX7
    @RAX7
    Лучше фоновое изображение засунуть в svg и сделать маску.
    Либо так:
    (с пропорциональным увеличением)

    либо:
    (с фиксированной высотой)

    Также с помощью медиа-запросов можно совместить оба эти варианта
    Ответ написан
    1 комментарий
  • Как сделать так чтобы антивирусник перестал удалять posinstall.js?

    firedragon
    @firedragon
    Не джун-мидл-сеньор, а трус-балбес-бывалый.
    Вполне может быть. Какой то деятель встроил определение по Ip и стирал файлы при установке его пакета.
    Так что проверьте все на виртуалке. Если нормально то отключите антивирус и установите потом включите его.

    Второй вариант ставить гилп не последней версии а более старой.

    Кстати желательно прилагать текст сообщения и название антивируса и версию nodejs
    Ответ написан
    Комментировать
  • Как правильнее создавать инстанс класса, все инициализирующие методы которого будут выполнены только внутри самого класса?

    black1277
    @black1277
    Вольный стрелок
    Сделайте класс со статическими методами и свойствами, но не используйте это
    new Geomap( {} );
    потому что по завершении всех функций - созданный объект будет удален. Можно, конечно сделать внутри вечно ожидающие кэлбеки, которые через замыкание будут держать объект в памяти, но для чего это нужно я не представляю - проще использовать тогда паттерн модуля, вместо класса.
    Ответ написан
    2 комментария
  • Почему не работает redirect?

    @ArieX
    ты перед этим уже отправляешь ответ res.send(req.body)
    редирект это чисто ответ на запрос с специальным хейдером, т.е. фактически ты сейчас пытаешься отправить ответ на запрос, хотя до этого уже на него ответил
    не лучше ли редирект сделать на стороне клиента?
    Ответ написан
    1 комментарий
  • Можно ли в VScode добавить кастомную область с кнопками?

    Geminix
    @Geminix
    Фуллстек nuxt, .net разработчик
    Комментировать
  • Почему в cacl не работает деление между vh и vw?

    Lynn
    @Lynn
    nginx, js, css
    Читаю доки вслух и с выражением:

    https://developer.mozilla.org/ru/docs/Web/CSS/calc

    /
    Деление. Делитель должен быть <number>.


    100vw это не <number>.
    Ответ написан
    Комментировать
  • Как отменить несколько коммитов в форкнутом репозитории?

    git clone <адрес твоего форка>
    cd <...>
    git reset <commit hash того коммита, до которого хочешь откатиться>
    # можно оставить всё в мастере, но тогда надо предыдущую команду вызывать с --hard и сделать потом git push --force
    # а можно создать новую ветку через git branch и git checkout и потом запушить её через git push
    Ответ написан
    1 комментарий
  • Какую книгу прочитать по JavaScript со средним уровнем знания js?

    black1277
    @black1277
    Вольный стрелок
    Прочитайте серию книг "Вы пока еще не знаете JS" Кайла Симпсона, есть издания 2022г.
    Ответ написан
    Комментировать
  • Как обмениваться переменными между React и JS?

    delphinpro
    @delphinpro
    frontend developer
    между React и JS

    Если вы не понимаете, что react и js это почти одно и то же (реакт по сути надмножество javascript), то у меня для вас очень плохие новости.


    Как бы перекинуть массив в React из JS, но так, чтобы и через JS я мог его изменить?


    Глобальный скоуп еще никто не отменил.

    window.MY_VAR = 123;

    в реакте

    console.log(window.MY_VAR); // 123
    Ответ написан
    1 комментарий
  • Правильно ли реализован класс для работы с базой данных по принципу SOLID?

    ipatiev
    @ipatiev Куратор тега PHP
    Потомок старинного рода Ипатьевых-Колотитьевых
    Во-первых, это никакой не DatabaseManager , а CRUDManager. Работа с БД далеко не ограничивается этими 4 примитивными функциями.

    Отсюда мы делаем логичный вывод, что соединение с БД никаким местом не должно создаваться в конструкторе менеджера крудов. А должно точно так же передаваться в него в качестве зависимости. Это может быть либо ванильная ПДО, либо инстанс реального MySQLDatabase (но поскольку мы пока не знаем, как он должен выглядеть, то лучше остановиться на PDO).

    Сам по себе DatabaseManager выглядит избыточным. Непонятно, зачем он нужен, если любой потребитель DatabaseManager-а может просто написать
    public function __construct(CRUDInterface $crud) {
    }

    и получить тот самый полиморфизм, которого мы изначально и добивались. Передадим другую реализацию - будет другая, но с тем же публичным контрактом, то есть всё будет работать.

    В-четвёртых, хоть это и не относится напрямую к теме SOLID, но для меня является очень важным: собственно, реализация методов CRUD-а. Что в них передаётся? Откуда берутся названия таблиц, полей? Передаются в параметрах методов? Это прямая дорога к SQL инъекции, не говоря уже о нарушении инкапсуляции. Поэтому, отвечая на вопрос "Как вы реализуете работу с базой данных", лично я всё больше в последнее время от развесистых ORM-ов склоняюсь к простым TableGateway-ам. Да, кода писать больше, но он строже и понятнее. И не встаёт колом в нестандартных ситуациях. Тем более что приведённый пример кода как раз очень и похож на этот паттерн. То есть
    abstract class MysqlTableGateway implements CrudInterface
    {
        protected $db;
        protected $table;
        protected $fields;
        protected $primary = 'id';
    
        public function __construct(\PDO $db)
        {
            $this->db = $db;
        }
        public function read($id): ?array
        {
            $stmt = $this->db->prepare("SELECT * FROM `$this->table` WHERE `$this->primary`=?");
            $stmt->execute([$id]);
            return $stmt->fetch();
        }
         // ну и так далее
    }

    И дальше уже классы по работе с отдельными табличками наследовать от него,
    final class UserGateway extends MysqlTableGateway {
        protected $table = 'users';
        protected $fields = ['email', 'password','phone'];
    }

    Соответственно, если мы захотим перейти с мускуля на какой-нибудь редис с джейсоном внутре, то надо будет создать новый абстрактный класс с тем же интерфейсом, и от него отнаследовать реализации. Соответственно, в интерфейсе надо нормально прописать входные и выходные параметры:
    interface CRUDInterface {
        public function create(array $data):int;
        public function read(int $id):?array;
        public function update(array $data);
        public function delete(int $id);
    }

    Другое дело, что в реальности такой шалтай-болтай будет сделать довольно сложно, поскольку классы для работы с отдельными таблицами будут расширяться запросами, специфичными для данной таблицы - то есть все их придется дописывать во все драйверы. То есть в реальности с D будут проблемы. Но чисто с теоретической точки зрения примерно вот так оно будет выглядеть.
    Ответ написан
    4 комментария
  • Как этот сайт запустить? Что для этого нужно? (Язык тут JS + HTML)?

    black1277
    @black1277
    Вольный стрелок
    Ну во-первых, прочитайте что написано в файлах README.md - обычно там записаны инструкции по установке и запуску.
    Во-вторых, нужно будет произвести установку всех зависимостей из файлов package.json - через консоль в каждой из папок набрать npm install , а для этого нужно установить сначала Node.js
    В-третьих, нужно заглянуть в каждый package.json - чтобы узнать какие команды для запуска используются (обычно это npm run start) и соответственно запустить их в каждой из папок (клиент, сервер). (Хотя возможно настроено на запуск единой командой)
    Ответ написан
    3 комментария
  • Методы keys(), values(), entries() находятся в Symbol.iterator у итерируемых объектов?

    Syjalo
    @Syjalo
    Представьте себе бота
    keys(), values() и entries() — методы Map, Set, Array и Object, которые возвращают итератор или массив, у которого есть метод по ключу Symbol.iterator.

    Symbol.iterator — символ, который выступает в качестве ключа (имени) для метода, который возвращает итератор.
    Ответ написан
    1 комментарий
  • Как сохранить select option в localstorage?

    black1277
    @black1277
    Вольный стрелок
    Чтобы при загрузке страницы был выбран сохраненный вариант из списка option, нужно чтобы у нужного варианта был атрибут selected. Пример:
    <select name="nm" id="nam">
      <option value="QBC">QBC</option>
      <option value="QEF">QEF</option>
      <option value="GHI" selected>GHI</option> <!-- этот вариант будет выбран-->
      <option value="KLM">KLM</option>
    </select>

    значит вам нужно в каждом option выводить переменную вместо selected, которая будет либо пустая, либо равна selected (если сохраненное состояние равно выводимому option).
    Добавил рабочий пример, где всё работает (проверял)
    Пример на функциональных компонентах

    import React, { useState, useEffect } from 'react'
    
    const LocalStorage = () => {
      const date = [
        { symbol: 'RU', label: 'рубль' },
        { symbol: 'USD', label: 'доллар' },
        { symbol: 'EUR', label: 'евро' }
      ]
    
      const [curr, setCurrencies] = useState(date)
      const [currentSymbol, setCurrentSymbol] = useState("EUR") // опция выбранная по умолчанию (если нет данных в localstorage)
    
    // срабатывает один раз при загрузке компонента
      useEffect(() => {
        if(localStorage.getItem('symbol')) {
          const item = localStorage.getItem('symbol')
          setCurrentSymbol(item)
        }
      }, [])
    
    // обработчик - срабатывает при выборе опции списка
      const selectHandler = (e) => {
        localStorage.setItem('symbol', e.target.value)
        setCurrentSymbol(e.target.value)
      }
    
      return (
        <div>
          <select onChange={selectHandler} value={currentSymbol}>
            {
              curr.map(currencies => (
                <option key={currencies.symbol} value={currencies.symbol}>
                  {currencies.symbol} {currencies.label}
                </option>
              )
              )
            }
          </select>
        </div>
      )
    }
    
    export default LocalStorage


    на классовых

    import React, { Component } from 'react'
    
    
    class ClassLocal extends Component {
      constructor(props){
        super(props);
        this.state = {
          curr: [
            { symbol: "RU", label: "рубль" },
            { symbol: "USD", label: "доллар" },
            { symbol: "EUR", label: "евро" }
          ],
          currentSymbol: "EUR"
        }
      }
    
    
      componentDidMount() {
        if(localStorage.getItem('symbol')) {
          const item = localStorage.getItem('symbol');
          this.setState({currentSymbol: item})
        }
      }
    
    
      selectHandler = (e) => {
        localStorage.setItem('symbol', e.target.value)
        this.setState({currentSymbol: e.target.value})
      }
    
      render() {
        return (
          <div>
            <select onChange={this.selectHandler} value={this.state.currentSymbol}>
              {
                this.state.curr.map(currencies => (
                    <option key={currencies.symbol} value={currencies.symbol}>
                      {currencies.symbol} {currencies.label}
                    </option>
                  )
                )
              }
            </select>
          </div>
        )
      }
    }
    
    export default ClassLocal

    Ответ написан
    7 комментариев
  • Как запретить нажатие клавишь?

    @KrotKrotKrotTest Автор вопроса
    input.addEventListener("keydown", (e) => {
        if (
          e.ctrlKey ||
          e.altKey ||
          e.shiftKey ||
          e.keyCode == 9 ||
          e.keyCode == 20
        ) {
          return false;
        }
    }
    Ответ написан
    Комментировать
  • Как правильно типизировать функцию?

    bingo347
    @bingo347 Куратор тега TypeScript
    Crazy on performance...
    function preparedData<T extends Record<string, {name: string, id: string}[]>>(data: T) {
      return Object.keys(data).map((key) => {
        return data[key as keyof T].map((a) => ({
          val: a.name,
          newId: a.id,
        }));
      });
    }

    https://www.typescriptlang.org/play?#code/GYVwdgxg...
    Ответ написан
    Комментировать
  • Какая нижняя планка для изучения React?

    black1277
    @black1277
    Вольный стрелок
    Нужны желание и мотивация. Изучайте прямо сейчас. Делайте много маленьких и простых приложений, чтобы усвоить основы и понять концепции этого фреймворка. Опыт будет накапливаться, в том числе и на чистом js. Если всё время откладывать и чего-то ждать - не заметите как "поезд уедет".
    Ответ написан
    1 комментарий
  • Как отключить у элемента управление с клавиатуры?

    @ZaharWeb
    Можешь задать атрибуту tabindex отрицательное значение.
    <input tabindex="-1" placeholder="" />

    Если работать не будет(у меня работало), то можно так:
    element.tabIndex = -1
    Ответ написан
    Комментировать
  • Нормально ли это, что в режиме Strict-mode в React-приложении делается 2 запроса?

    black1277
    @black1277
    Вольный стрелок
    Реакт придерживается концепции "чистых" функций. Т.е. таких функций, которые всегда дают одинаковый, предсказуемый результат при одинаковых входных параметрах. В режиме разработки, с включенным strict-mode реакт помогает выявить непредвиденные эффекты и состояния, возникающие в результате нарушения концепции, вызывая дважды все функции, которые он считает "чистыми". Как это работает?
    Предположим, вы написали функцию, которая по сигналу "свет" - включает свет. Но если свет уже включен - функция его выключает. Вы довольны и счастливы - послали сигнал "свет" - свет включился, послали еще один сигнал "свет" - выключился. Но в режиме strict-mode - вы обнаружите, что свет не включается, потому что реакт шлет второй сигнал "свет", который выключает после первого сигнала! И опять, возникает вопрос - да зачем это нужно? А затем, что вы не можете предсказать результат действия сигнала "свет", не зная текущего состояния! Возникнет острая необходимость - включить свет, а вы не знаете - включен он сейчас или нет... Пошлете сигнал "свет", когда он включен - получите выключение.
    Примерно такие варианты поведения выявляет strict-mode.
    Ответ написан
    Комментировать
  • Как конвертировать с HEX или RGB в Android color?

    RAX7
    @RAX7
    function rgbaToAndroid1(rgba) {
      const c = new Uint8Array([
        rgba[2],
        rgba[1],
        rgba[0],
        Math.round(rgba[3] * 255)
      ]);
      return new Uint32Array(c.buffer)[0];
    }
    
    // либо
    function rgbaToAndroid2(rgba) {
      let color = 0;
      for (let i = 0; i < 3; i++) {
        color += rgba[i] * 2 ** ((2 - i) * 8);
      }
    
      color += Math.round(rgba[3] * 255) * 2 ** (3 * 8);
      return color;
    }
    
    console.log(rgbaToAndroid1([255, 122, 107, 1]));
    console.log(rgbaToAndroid2([255, 122, 107, 1]));
    Ответ написан
    Комментировать