Задать вопрос
  • Какую альтернативу взять место MongoDB?


    а её заблокировали в России

    Только облачный Mongodb Atlas.

    А развернуть свой экземпляр можно без каких-либо проблем.
    Если хочется облако - можно взять dbaas у какого-нибудь провайдера.

    MySQL радикально отличается от mongodb как языком запросов, так и парадигмой.
    GraphQL - вообще даже не база данных, а только лишь протокол
    Ответ написан
    Комментировать
  • Как корректно передать элемент в рендер?

    @slide13
    frontend/web-developer
    Из того, что вижу я при беглом просмотре - у вас в качестве ключа в список ListItem передается undefined, т.к. у вас явно нет свойства key в текущем классе App (в консоли на это тоже ошибка должна быть). А так как ключи для всех элементов не заданы, то при добавлении в начало/середину списка нового элемента приводит к тому, что реакт неправильно высчитывает порядок элементов и из-за этого возникают такие странности при рендеринге списка.
    В качестве решения должно сработать поставить в качестве ключа тоже itemString, если он у вас дублироваться не будет, конечно, но все же лучше при создании таска присваивать ему уникальный id, т.е. в todoList будет не просто массив текстов, а массив объектов, где каждый объект будет содержать id и текст таска. Тогда можно будет и тексты одинаковые добавлять для разных задач и удалять проще будет.
    Также непонятно, для чего нужен key в стейте, если он не изменяется нигде.
    Ответ написан
    Комментировать
  • Как использовать несколько ключей SSH для разных аккаунтов Github через KeePassXC?

    saboteur_kiev
    @saboteur_kiev Куратор тега Git
    software engineer
    Можно настроить config для ссш и юзать разные хостнеймы для конкретных репозиториев
    Пример:

    ~/.ssh/config:
    Host github-user1
          HostName github.com
          User git
          IdentityFile ~/.ssh/id_rsa_user1
    
        Host github-user2
          HostName github.com
          User git
          IdentityFile ~/.ssh/id_rsa_user2


    В разных репозиториях редактируешь ремоут (.git/config)
    url = git@github-user1:user1/myrepo.git
    или
    url = git@github-user2:user2/myrepo.git

    ну или можно командой
    git remote set-url origin git@github-user1:user1/repo.git
    Ответ написан
    3 комментария
  • Почему моя анимация не работает?

    black1277
    @black1277
    Вольный стрелок
    Потому что вы ищете свойство "--main-up" в селекторе класса .favicon, а определили его в :root
    Попробуйте так
    let root =  document.documentElement;
    root.style.setProperty("--main-up", random+'px');
    Ответ написан
    Комментировать
  • Как создать несколько одинаковых элементов?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Если элемент не простой, а содержит вложенные, то можно использовать метод cloneNode(true) для создания копии со всеми под-элементами:
    Ответ написан
    Комментировать
  • Как задать движение изображений в canvas без setInterval?

    georgi1984
    @georgi1984
    Нравится JavaScript
    https://developer.mozilla.org/ru/docs/Web/API/Canv...

    Здесь объясняют как использовать requestAnimationFrame в анимациях
    Ответ написан
    Комментировать
  • Зачем нужен вебпак простым языком?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Вебпак - сборщик. Может взять много файлов и собрать в один. Ну или в несколько, как мы настроим. В js действительно есть модули, которые как бы уже нативно работают в современных браузерах, но есть ряд проблем:

    • Файлов с кодом может быть много. Сотни. Если использовать нативные импорты и загружать сотни файлов в браузер одновременно - накладные расходы будут заметными. Было бы хорошо уменьшить количество файлов. Плюс там могут быть не только скрипты, но и другие файлы, которых тоже может быть много.
    • Большое количество инструментов были написаны еще до появления нативных модулей в JS. Они все еще работают, выполняют свои задачи, но простым словом import их не импортировать. Там очень разные чудеса встречаются. Придумывать для каждого инструмента персональный костыль, как его импортировать, вроде как не хочется.
    • К предыдущему - иногда удобно в скрипты на JS импортировать что-то не на JS из отдельных файлов. В контексте моей работы - шейдеры на GLSL. Их нельзя просто так нативным import загрузить.
    • Часть зависимостей мы ставим с помощью npm. Это удобно. Но мы легко получаем папку node_modules на сотни мегабайт, при том, что в нашем проекте реально используется пара файлов оттуда. Загружать все это целиком на сервер - зачем? Ставить зависимости, а потом копировать нужные файлы откуда-то из глубин node_modules к себе в проект? Можно, но не то, чтобы удобно. Обновлять сложно будет, да и действий лишних что-то много.
    • Не всегда нам нужен полный функционал инструментов, которые мы используем. Часто в пример приводят lodash. Там много готовых функций на разные случаи жизни, но все используются редко. Было бы прям здорово в браузер загружать только то, что там на самом деле будет использоваться. А то, что не используется - не загружать.


    Как-то так. То есть нативные модули - это здорово. Но они далеки от совершенства. Не все проблемы решают. Поэтому сборщики все еще актуальны. И будут актуальны еще долгое время.

    Плюс webpack имеет возможность встроить в процесс сборки дополнительные процессы, которые долго делать руками. Код можно минифицировать. Уменьшит время загрузки страниц. Можно запустить w3c validator, stylelint, eslint, sonar и.т.д. - всякие проверялки, чтобы убедиться, что к пользователям улетит валидный код. Можно какие-то картинки сжать, сконвертировать в другие форматы. Можно typescript превратить в javascript, less, sass и.т.д. - в css. Много чего можно сделать. В целом сборщик сам по себе - это перпендикулярный ко всем этим процессам инструмент. И раньше люди использовали отдельный класс инструментов, чтобы запускать все это - таск раннеры. Grunt, gulp - вы скорее всего про них слышали. Можно писать npm-скрипты или даже по старинке делать makefile под сложную сборку. Но в webpack вроде как есть функционал плагинов, и можно эти процессы запускать и через него тоже. Вроде как он не для этого изначально придуман, но многие люди находят удобным иметь все в одном месте.
    Ответ написан
    Комментировать
  • Для чего нужен параметр sourceMap в tsconfig?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    webpack - это webpack, typescript - это typescript, всекаешь?

    Если нет, то поясню: это разные инструменты, которые могут прекрасно работать сами по себе и никак не пересекаться. Но в обоих случаях есть необходимость sourceMap.
    Если говорить о связке webpack и typescript, при работе в лоб webpack, как сборщик, потребляет sourceMap из typescript и генерирует из них свои.

    Сгенерированные из webpack sourceMap при отключении оных в typescript могут иметь разный вид в зависимости от настроек, плагинов и режимов: от нормальных, т.к. об этом позаботились плагины или вообще компиляция шла через babel, до полностью сломанных и бесполезных.
    Ответ написан
    Комментировать
  • Что за библиотека для анимации на сайте?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Вот вроде основные:
    GSAP,
    TweenMax js
    ScrollMagic js
    barba js
    swiper js
    lottie

    Возможно есть аналоги на js или jquer

    Они все на js. Хотя jQuery у них к сайту тоже подключается.
    Ответ написан
    Комментировать
  • Для чего нужен "Микс" в методологии БЭМ?

    delphinpro
    @delphinpro
    frontend developer
    Если с Модификатором еще + - понятно [...], то вот с Миксом мне не понятно,

    Вы невнимательно читали про БЭМ или вовсе не читали.
    Написание модификатора на html-элементе – это тоже микс.

    Mix - англ. Смесь

    Именно для этого они и нужны: Для размещения (смешивания) нескольких БЭМ-сущностей на одном HTML-элементе.
    Ответ написан
    1 комментарий
  • Canvas линия и способ её описания?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Canvas – это растр. Нарисованная линия ничем не будет, кроме набора пикселей на холсте.
    Вы можете сохранять параметры линии, по которым сможете нарисовать ее заново. Но вы не можете сохранить саму линию.
    Ответ написан
    1 комментарий
  • Как обратится к предыдущему элементу css?

    develx
    @develx Куратор тега CSS
    Web developer
    label:has(+ .field-error) {
      border: 2px solid red;
    }


    https://codepen.io/xdevelx/pen/wvXmqvz

    Но нужно смотреть поддержку браузеров https://caniuse.com/css-has
    Если не устроит, то js
    Ответ написан
    1 комментарий
  • Как запустить консоль ноды в докер контейнере?

    docker run -it --rm node:alpine
    Ответ написан
    Комментировать
  • Почему текст в svg экспортируется как path?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    При экспортировании там есть настройки (три точки вызывают всплывающий список параметров), и там есть пункт "Outline Text". Он как раз отвечает за то, будут ли буквы как буквы, или они будут конвертироваться в path. По умолчанию они конвертируются.
    Ответ написан
    Комментировать
  • Как сравнить вывод скрипта с файлом?

    ky0
    @ky0
    Миллиардер, филантроп, патологический лгун
    Возьмите какой-нибудь хэш от файла, от вывода скрипта и сравните.
    Ответ написан
    Комментировать
  • Как правильно создать webpack для typescript?

    Dasihub
    @Dasihub
    Вот готовый конфиги

    webpack.config.js
    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    
    module.exports = {
        mode: 'production',
        entry: ['@babel/polyfill', path.resolve(__dirname, 'src/index.tsx')],
        output: {
            filename: 'js/vm.js',
            path: path.resolve(__dirname, 'dist')
        },
        devtool: process.env.NODE_ENV === 'development' ? 'source-map' : false,
        devServer: {
            port: 3000,
            historyApiFallback: true,
            open: true
        },
        target: 'web',
        resolve: {
            extensions: ['.tsx', '.ts', '.jsx', '.js']
        },
        performance: {
            hints: false
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, 'public/index.html'),
                filename: 'index.html'
            }),
            new MiniCssExtractPlugin({
                filename: 'css/style.css'
            }),
            new CleanWebpackPlugin()
        ],
        module: {
            rules: [
                {
                    test: /\.(tsx|ts)$/,
                    exclude: /node_modules/,
                    use: ['ts-loader']
                },
                {
                    test: /\.(jsx|js)$/,
                    exclude: /node_modules/,
                    use: ['babel-loader']
                },
                {
                    test: /\.(css|scss|sass)$/,
                    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
                },
                {
                    test: /\.(pdf|png|jpeg|jpg|svg)$/,
                    use: [
                        {
                            loader: 'file-loader',
                             options: {
                                name: '/assets/[name].[ext]'
                            }
                        }
                    ]
                }
            ]
        }
    }


    tsconfig.json
    {
      "compilerOptions": {
        "target": "es6",
        "lib": [
          "dom",
          "dom.iterable",
          "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": false,
        "noEmit": false,
        "jsx": "react-jsx"
      },
      "include": [
        "src"
      ]
    }


    .babelbr
    {
        "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
    }


    пакеты

    "devDependencies": {
        "@babel/core": "^7.19.3",
        "@babel/polyfill": "^7.12.1",
        "@babel/preset-env": "^7.19.4",
        "@babel/preset-react": "^7.18.6",
        "@babel/preset-typescript": "^7.18.6",
        "babel-loader": "^8.2.5",
        "clean-webpack-plugin": "^4.0.0",
        "css-loader": "^6.7.1",
        "file-loader": "^6.2.0",
        "html-webpack-plugin": "^5.5.0",
        "mini-css-extract-plugin": "^2.6.1",
        "ts-loader": "^9.4.1",
        "typescript": "^4.8.4",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "webpack-dev-server": "^4.11.1"
      }
    Ответ написан
    7 комментариев
  • Как сделать такое скругление?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Комментировать
  • Как придать div вот такую форму?

    black1277
    @black1277
    Вольный стрелок
    Вот накидал по быстрому для примера

    Этот способ удобен тем, что можно сделать край любой формы, в зависимости от того какой svg использовать. Недостаток в том, что бордер можно только через drop-shadow сделать.
    Ответ написан
    4 комментария
  • Как придать div вот такую форму?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Ответ написан
    Комментировать
  • Как правильно закодировать в base64?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Синхронно это можно сделать так:
    var text = 'Привет, мир!';
    
    var u8a = new TextEncoder().encode(text);
    
    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
    
    var bytes = u8a, i, len = bytes.length, base64 = '';
    
    for (i = 0; i < len; i += 3) {
    	base64 += chars[bytes[i] >> 2];
    	base64 += chars[((bytes[i] & 3) << 4) | (bytes[i + 1] >> 4)];
    	base64 += chars[((bytes[i + 1] & 15) << 2) | (bytes[i + 2] >> 6)];
    	base64 += chars[bytes[i + 2] & 63];
    }
    
    if (len % 3 === 2) {
    	base64 = base64.substring(0, base64.length - 1) + '=';
    }
    
    else if (len % 3 === 1) {
    	base64 = base64.substring(0, base64.length - 2) + '==';
    }
    
    console.log(base64);

    Асинхронно через FileReader: https://learn.javascript.ru/file#filereader

    P. S. Асинхронный способ:
    var text = 'Привет, мир!';
    
    var blob = new Blob([ text ]);
    
    var reader = new FileReader();
    
    reader.readAsDataURL(blob);
    
    reader.onload = function() {
    	
    	var base64 = reader.result.split(',')[1];
    	
    	console.log(base64);
    	
    };
    Ответ написан
    8 комментариев