• Как в кнопках bootstrap убрать/уменьшить рамку при нажатии?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    https://github.com/twbs/bootstrap/blob/main/scss/_...

    А если уберёте, то как вы будете отличать отличать состояние "в фокусе"? Это затруднит навигацию по странице с помощью клавиатуры.
    Ответ написан
    2 комментария
  • Какую литературу посоветуете по паттернам проектирования?

    black1277
    @black1277
    Вольный стрелок
    Швец А. Погружение в паттерны проектирования (2018) - современное продолжение темы банды четырех с примерами на разных языках.
    The Clean Architecture - by Robert C. Martin (Uncle Bob) - но это не совсем новенькое
    Ответ написан
    3 комментария
  • Как можно сократить этот код?

    @n1ksON
    мидл
    let arr = [10, 20, 30, 50, 235, 3000];
    arr.forEach(item => ['1', '2', '5'].includes(String(item)[0]) && console.log(item))
    Ответ написан
    8 комментариев
  • Почему у стрелочной функции из объекта контекст виндоу?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    На learn.javascript, например, неплохо написали:
    Стрелка => ничего не привязывает. У функции просто нет this.
    При получении значения this – оно, как обычная переменная, берётся из внешнего лексического окружения.


    В вашем примере с литералом объекта можно добавить для понимания:
    const obj = {
      w() {
        console.log('w', this);
      },
      x: function () {
        console.log('x', this);
      },
      y: this,
      z: () => {
        console.log('z', this);
      },
    };
    
    obj.w(); // obj
    obj.x(); // obj
    console.log('y', obj.y); // Window
    obj.z(); // Window


    Запись литерала объекта не создаёт свой контекст: на момент записи this тот же, что и снаружи:
    const a = this; // Window
    const obj = {
      b: this, // тоже Window 
    }
    
    a === obj.b // true
    Ответ написан
    1 комментарий
  • Почему нельзя писать transition в hover?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    <div id="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam est fugit mollitia nisi quam qui! Aliquam aliquid consequatur dolorem ea, expedita ipsam laborum, mollitia praesentium, quidem sed voluptas?</div>
    
        <style>
            #test {
                color: red;
            }
            #test:hover {
                color: green;
                transition: color 3s ease;
            }
        </style>

    Просто запустите этот код. И поймёте разницу.

    Или лучше так:

    #test {
                color: black;
                transition: color 1s ease;
            }
            #test:hover {
                color: red;
                transition: color 5s ease;
            }


    Переход, указанный в hover, будет применён именно в этом состоянии – когда мышь наведена.
    Переход, указанный в обычном состоянии будет применён при уходе мыши с элемента.
    В данном примере видно разницу скорости анимации.
    Если для hover переход не указан, будет применён переход обычного состояния и при наведении мыши, и при ее уходе. Если переход указан только для hover, то при отведении мышки плавного перехода не будет.
    Ответ написан
    Комментировать
  • Как отправить все файлы из папки на сайт с сервера?

    black1277
    @black1277
    Вольный стрелок
    Скорее всего вам нужен метод для раздачи статичных файлов:
    app.use(express.static(path.join(__dirname, 'public')))

    все файлы, лежащие в папке public (можно задать свою) могут быть получены клиентом. Нужно только сформировать список существующих файлов и выдавать их url на фронт.
    Ответ написан
    1 комментарий
  • Когда вы используете type, а когда - intefcace, в React?

    profesor08
    @profesor08
    Если надо описать некоторый перечень значений, то type:

    type ResponseStatus = "error" | "success";

    Если надо описать объект, то intefcace:

    interface ApiResponse {
        status: ResponseStatus;
    }


    И никто не запрещает написать через type:

    namespace Api {
        type Status = "error" | "success";
    
        type Response = {
            status: Status;
        };
    }
    Ответ написан
    1 комментарий
  • Где этот код можно запустить?

    Seasle
    @Seasle Куратор тега JavaScript
    Этот код написал для Node.js с использованием стандартного модуля crypto. Для запуска Вам потребуется установить среду исполнения Node.js, создать директорию для работы, в которую необходимо будет поместить Ваш файл и package.json (npm init -y). В приведённом Вами коде используются ES6-импорты (ESM-импорты), которые сразу не будут работать в Node.js, т.к. в нём используются CommonJS-импорты. Для решения данной проблемы у Вас есть два пути:
    1. Добавить "type": "module"в package.json:
    {
      ...
      "type": "module",
      ...
    }

    2. Изменить подключение модулей в исходных кодах:
    - import * as crypto from 'crypto';
    + const crypto = require('crypto');

    Вывод:
    $ node .
    cVoADkhcldK+mYC3Id5vhkxOr4NwVspTcgF56RiRG0CzcnOcBwcELKi1YnBNySmZugpjJNHuCU7ePjwVadqfAw==
    Ответ написан
    Комментировать
  • Стандарты сообщений коммитов?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Это точно не `chore`, так как относится к продакшен коду.
    `chore` - это всё что угодно вокруг кода, если не заведено более узкого типа.
    Линтеры (если не используете `style`), настройка CI (если не используете `ci`), всевозможный дополнительный тулинг вроде `husky` или `lint-staged`, незначимое обновление зависимостей и так далее.

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

    Если хотите строго следовать, то ваша правка - либо `fix`, либо `feat`.
    Я же для себя и для команды ввёл дополнительный тип `temp` (от `temporal`) как раз для такого толка изменений.
    Когда "приходит время", можно просто поиском по этому типу быстро его найти и сделать `revert`.

    Ещё расширил типом `nvm` (от `nevermind`) для исправлений в духе "забыли пробел в readme" и прочего незначительного.
    Хоть формально это может быть выражено через `docs`, `refactor`, `style` или `fix`, от наличия таких коммитов в changelog'e никому ни горячо, ни холодно, поэтому они просто в него не включаются.

    Расширяйте конфигурацию до необходимого вам и вашим изменениям, и всё будет хорошо.
    * Однако, опыт и здравый смысл подсказывает, что чем типов меньше, тем меньше вероятность ошибки и тем больше шанс, что ими будут пользоваться. Без фанатизма, короче :)
    Ответ написан
    1 комментарий
  • Как рисовать такие svg в react и не только?

    @goshaLoonny
    Использовать целую библиотеку ради одной линии это конечно сильно : )
    Используйте Rete.js если не хотите заморачиваться ради одной линии.
    Но ничего сложного нету на самом деле. Нужно просто нарисовать необходимую линию на канвасе, наложить его сверху на ваши элементы и установить ему pointer-events: none. Вот и все.
    Ответ написан
    1 комментарий
  • Почему не работает миксин :before?

    cannibal_corpse
    @cannibal_corpse
    Верстальщик руками
    1. Зачем миксин для псевдо?
    2. При абсолютном позиционировании указание display: block избыточно (см. computed styles)
    3. Ты неправильно используешь миксин.
    Ответ написан
    1 комментарий
  • Не работают gulp-autoprefixer?

    delphinpro
    @delphinpro Куратор тега Gulp.js
    frontend developer
    Включу телепата и предположу, что вы оставили настройки автопрефиксера по умолчанию и сейчас не видите на выходе префиксов для свойств, которым они уже давно не нужны. Например -webkit-border-radius.
    Это не значит, что автопрефиксер не работает. Он на то и авто, что добавляет только актуальные префиксы, а ненужные удаляет.
    Ответ написан
    3 комментария
  • Как подключить базу данных в Heroku?

    @MaxKozlov
    вместо
    postsFile = open('posts.txt','r+') # Открываем файл на чтение и запись
    posts = postsFile.read().splitlines() # Читаем файл и помещаем строки в список posts
    у вас будет подключение к базе данных, создание таблицы, если надо
    и чтение из неё данных
    а вместо
    postsFile.writelines(url+'\n') # И ссылку записываем в файл posts.txt

    запись в базу данных

    первый же пример работы из гугла по запросу "python postgresql"
    https://pythonru.com/biblioteki/vvedenie-v-postgre...

    по совету Александр, ссылка на аддон Heroku Postgres
    https://elements.heroku.com/addons/heroku-postgresql

    он понадобится чтобы подключить, собственно БД от heroku
    Ответ написан
    1 комментарий
  • Почему живучий режим аккумулятора это 60%?

    @nehrung
    Не забывайте кликать кнопку "Отметить решением"!
    Аккумуляторов напридумано множество типов. на базе разных электрохимических процессов и веществ. Но всем им свойственен циклический принцип работы, когда вещество возле электродов переходит в другое состояние и потом возвращается в исходное. Количество таких циклов не бесконечно, поскольку в любой электрохимии (кроме, может быть, газовых) в процессе перехода накапливаются непредусмотренные отходы.
    Для литиевых экспериментально установлено, что если держать заряд около 60%, то это накопление будет наиболее медленным.
    А что касается ресурса, то тут зависит от того, как его считать. Если считать в количестве циклов, то опять-таки - каких циклов. Считается, главный цикл - это заряд 0->100%, а разряд 100%->0, и тогда новый аккум до его полного износа даст примерно 1000 циклов. Где-то писали, что облегчённый цикл с неполным зарядом и неполным разрядом (20% - 80%) даст увеличение количества циклов в 2...3 раза, но эти циклы будут сильно меньше по отдаваемой энергии. Лично я это утверждение не проверял. Зато не раз проверено, что всякого рода ускоренные зарядки сильно снижают ресурс (до 500 циклов, а то и меньше). Собственно, и с мобильниками так же.
    Ответ написан
    2 комментария
  • Как полностью скопировать директорию в Gulp?

    black1277
    @black1277
    Вольный стрелок
    Вот рабочий gulpfile.js под вашу структуру проекта:
    "use strict";
    
    const {src, dest} = require("gulp");
    const gulp = require("gulp");
    const gulpCopy = require('gulp-copy');
    const outputPath = "dist/";
    
    var path = {
      build: {
        html: "dist/",
        images: "dist/"
      },
      src: {
        html: "src/*.html",
        images: ['src/img/**/*.*']
      }
    }
    
    function images() {
      return src(path.src.images)
        .pipe(gulpCopy(outputPath, {prefix: 1}))
        .pipe(dest(path.build.images));
    }
    
    const build = gulp.series(images);
    
    exports.images = images;
    exports.default = build;

    проверял у себя - копирует с сохранением структуры папок
    Ответ написан
    2 комментария
  • Правда ли что SSR постоянно отваливается?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Нет, неправда.

    Не бывает так, что один и тот же код в одинаковом окружении иногда "отваливается", а иногда "не отваливается".
    Я вот за что очень люблю программирование - у всего всегда есть причина.
    Чаще всего причиной являются кривые руки. :)
    Ответ написан
    Комментировать
  • Как обосновать выбор стека технологий?

    ThunderCat
    @ThunderCat Куратор тега PHP
    {PHP, MySql, HTML, JS, CSS} developer
    У меня чистый JS и PHP с фреймворком Laravel.
    Во первых - неизвестно сколько кода и какой функционал у вас в проекте. Естественно инструмент выбирают под задачу, а не наоборот.

    Если у вас на фронтенде нет огромного функционала по манипулированию ДОМ, это не СПА и нет смысла тянуть еще 10 библиотек ради 200 строчек кода - чистый жс лучший выбор. Плюсы - хорошо поддерживается, любой специалист среднего уровня может поддерживать, нет необходимости в дополнительных библиотеках, которые ведут к дополнительной зависимости от чужой кодовой базы, нет необходимости следить за последними изменениями в чужой библиотеке, не тянутся лишние файлы.

    На бэкенде - ларавел неплохо покрывает 90% типовых задач "искаропки", широкий выбор достаточно качественных модулей на любой чих, хорошее покрытие тестами, обширное комьюнити и качественная документация. Качество кода однозначно будет выше по сравнению с начинающим кодером, если использовать уже кем-то написанный и многократно протестированный код. Кроме того - имеет кодестайл, приучает к (относительно) качественному подходу в разработке...

    Что из этого применимо в вашем случае - хз, так как это больше общие слова, хотя и хорошо отражающие действительность.
    Ответ написан
    4 комментария
  • Кто поможет решить задачу по JavaScript?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    узнать, есть ли атрибут у элемента: element.hasAttribute('maxlength')

    установить атрибут: element.setAttribute('maxlength', 20)

    выбрать все: document.querySelectorAll('input[type=password]')

    План:
    1. выбрать все с типом password;
    2. пройти по ним циклом forEach()
    3. внутри смотреть, есть ли уже атрибут maxlength;
    4. если нет, добавить атрибут
    5. выполнить alert() в любом случае
    Ответ написан
    Комментировать
  • Как общаться между вкладками браузера js?

    profesor08
    @profesor08 Куратор тега JavaScript
    https://developer.mozilla.org/ru/docs/Web/API/Wind...

    Получаешь токен, пихаешь в localStorage, при этом все остальные вкладки получают событие storage. А значит, просто слушая этот ивент, ты сможешь обновить токен где тебе надо, на всех вкладках.
    Ответ написан
    7 комментариев