• Почему текст в 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
    Софт для автоматизации
    Синхронно это можно сделать так:
    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 комментариев
  • Установить Composer в Docker?

    karabanov
    @karabanov Куратор тега Docker
    Системный администратор
    FROM ubuntu:latest
    
    ENV DEBIAN_FRONTEND=noninteractive
    
    # экранировать переводы строк надо
    RUN apt update && \
        apt install -y nginx curl php && \ 
        curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer && \
        composer install # Что инстал та? Нет composer.json
    
    COPY ./hosts/my-application.local.conf /etc/nginx/sites-enabled/my-application.local.conf
    
    WORKDIR /var/www/my-application.local
    VOLUME /var/www/my-application.local
    
    # бесполезная директива
    EXPOSE 80
    
    CMD [ "nginx", "-g", "daemon off;"]
    Ответ написан
    8 комментариев
  • Плагины, как из content_scripts и action JS общаться между собой?

    @zkrvndm
    Софт для автоматизации
    Общение обычно происходит через сервис воркер расширения. Из попап шлете сообщение в воркер, а дальше он пересылает в нужную вкладку. Хотя можно сообщение сразу с попапа в нужную вкладку запульнуть, в попап метод tabs доступен.

    https://chrome-ext.blogspot.com/2014/02/blog-post_...
    Ответ написан
    1 комментарий
  • Как сделать простую анимацию на смену font-family и text-transform?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Свойства font-family и text-transform – дискретные. Они не могут плавно анимироваться.
    В примере анимируются свойства color, font-size, top и transform.
    Время анимации задается здесь transition: all 0.2s ease-in-out;
    Ответ написан
    Комментировать
  • Насколько корректно давать отрицательные значения Margin и Top?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Получили задачу.
    Опишите все возможные варианты её решения.
    Сравните целесообразность.
    Выберите лучшее.

    Если лучшим окажется отрицательный margin, то у вас у самого будет куча аргументов почему этот вариант лучший.
    Ответ написан
    Комментировать
  • Как добавить .webp в React?

    theobroma
    @theobroma
    javascript developer (ReactJS)
    1. Gulp точно не нужен. Мне прям вспомнился 2016 - тогда еще были сборки реакта галпом...
    2. В составе create-react-app используется webpack. Нужно просто расширить конфиг с помощью craco.
    Вот тутор , который сам для себя проверял на работоспособность: How to Optimize Images for Usage in Websites
    Ответ написан
    1 комментарий
  • Можно ли через GET запрос отправлять телло запроса?

    AgentSmith
    @AgentSmith
    Это мой правильный ответ на твой вопрос
    Всегда тело запроса ассоциировалось с методом POST

    "ассоциировалось".... Чтобы не было "ассоциаций" надо читать доки.

    Возможно ли отправлять тело запроса

    Достаточно почитать документацию https://www.w3schools.com/tags/ref_httpmethods.asp и станет понятно, что GET-запрос передаёт данные в URL, а не в теле запроса, и есть ограничение на объём передаваемых данных, это очень небольшое значение.
    Ответ написан
  • Как сделать меню иконки на electron?

    @garbagecollected
    А что? эмпирическим путем не догадаться?

    Вот вам три ссылки:

    Все шикарно документировано. С примерами и детальными комментариями.

    У класса Tray есть возможность прослушивать события:
    'click', 'right-click' и 'double-click'.
    Вешайте на эти события сколько угодно менюшек с любыми наборами элементов.

    У класса Tray есть методы:
    • tray.setContextMenu(menu) - устанавливает переданное в параметре menu меню как контекстное меню иконки трея.
    • tray.popUpContextMenu([menu, position]) открывает установленное либо переданное в параметре menu контекстное меню трея. Оба параметра menu и position не обязательны
    • tray.closeContextMenu() закрывает открытое меню трея.



    У класса MenuItem есть параметр icon.
    Пользуйтесь им для размещения иконок в меню.
    Ответ написан
    Комментировать
  • Как вы делаете code-review?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    У code review должна быть цель. В моей практике обычно проекты небольшие и там нет отдельных тестировщиков. Получается, что code review отвечает на три вопроса:

    1. Соответствует ли функционал ТЗ?
    2. Создает ли код проблемы команде?
    3. Есть ли тут какой-то специфичный для проекта опыт, который лучше задокументировать, пока мы еще в контексте?


    Получается что-то такое:

    • До выполнения задачи: проводится анализ задачи, формулируется ТЗ. Бывает, что нужно подключиться и помочь с требованиями, с контекстом, в котором все делается. Чем более подробный анализ мы делаем и чем лучше мы понимаем контекст на этом этапе, тем больше вероятность, что потом весь процесс выполнения задачи пойдет как по маслу и code review будет чистой формальностью в конце.
    • До ревью: линтеры проверяют код на соответствие стилю, на отсутствие синтаксического бреда.
    • Дальше - проверка на соответствие функционала ТЗ. Это защита от глупых ошибок в продакшене, которые коснутся пользователей.
    • Потом - на сответствие принятым соглашениям по коду, если они есть в проекте. Обычно это архитектурные паттерны и что-то про зависимости, смотрим не создает ли код проблем окружающим, а то разные глупости порой случаются. Особенно это важно в коде, который не сам в себе, а затрагивает много чего вокруг. Иногда возникает конфликт интересов, когда что-то явно устарело, и соглашения дополняются чем-то. Чем лучше был анализ в начале, тем меньше вероятность, что тут будет, что обсуждать.
    • Дальше уточняющие вопросы по странным местам, если они есть. Это больше с целью узнать контекст задачи, почему приняты те или иные решения. Происходит передача специфичных для проекта знаний в сторону команды. Возможно там же будут какие-то рекомендации по поводу практик, на что стоит обратить внимание в следующий раз. Это будет передача опыта от команды.


    А кто там будет, джун или синьер-помидор - не важно. Все люди ошибаются, и всем нужен контекст происходящего для эффективной работы.
    Ответ написан
    Комментировать
  • О каких IT специалистах говорят, когда речь идет о дефиците кадров?

    saboteur_kiev
    @saboteur_kiev Куратор тега Карьера в IT
    software engineer
    Даже просто посмотри вопросы на тостере год назад и сейчас.
    Последние 5 лет на тостере вопросы становились сложнее, специфичнее. Много вопросов где сам сидишь думаешь.

    А последние 5 месяцев полно треша.

    На вакансию может откликнуться кто угодно. Даже не айтишник. Поэтому из 357 человек до собеседования может быть хорошо если десяток дойдет. А на собеседовании и из них никого не захочется.
    Ответ написан
    Комментировать
  • Есть ли в webstorm такой функционал?

    black1277
    @black1277
    Вольный стрелок
    Да можно. В коде css выделяете название класса и жмете комбинацию shift+F6 - переименовываете класс и жмете подтверждение (кнопка Refactor) - все вхождения этого класса в верстке будут также переименованы.
    Ответ написан
    Комментировать
  • Как открыть ссылку во внешнем приложении?

    black1277
    @black1277
    Вольный стрелок
    Вот тут описан принцип для проводника Windows, делайте аналогично - Как из браузера открыть папку в проводнике Windows
    Ответ написан
    Комментировать
  • If и undefined как решить проблему?

    delphinpro
    @delphinpro
    frontend developer
    Используйте optional chaining
    if(context?.attachments[0].postType) {
        return context.send(`post`);
    }
    Ответ написан
    2 комментария
  • Почему не работает removeEventListener в React?

    Итак, как раз для прокрутки addEventListener и removeEventListener использовать в реакте вполне легально.
    Более того, вы вполне обошли использование рефов используя window, тут все хорошо.
    Но вот на следующих граблях - жизненном цикле вы таки споткнулись.
    Где гарантия, что компонент не перерендерился и функция disableOnwheel осталось той же что и была ?
    Нужно
    1) Вынести disableOnwheel за пределы компонентов, там нет ничего что зависело бы от наличия React
    2) Внимательно прочесть про клинап https://reactjs.org/docs/hooks-effect.html
    Ответ написан
    1 комментарий