Задать вопрос
  • Должен ли UX/UI дизайнер знать компоненты React/Vue?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Смешались в кучу кони, люди...
    Давайте по порядку.

    Должен ли UX/UI дизайнер знать компоненты таких фреймворков как React и Vue

    Если команда разработчиков заранее знает, что будут использовать какой-нибудь набор готовых компонентов для работы (Vuetify, Material UI, etc), то дизайнер должен их знать и использовать как основу, дабы не плодить лишних сущностей, так как без боли эти компоненты можно разве что перекрашивать.

    подготавливать макет прямо на React, но без логики

    "Макет на React без логики" - это вёрстка.
    И боже упаси, чтобы это делал дизайнер - с этим и большинство фронтов так себе справляется (во многом потому, что через 3 месяца работы над пет-проектом говорят "я уже хорошо знаю HTML и CSS, пошёл учить Реакт и получать ЗП в 200+", ха-ха).

    не зная можно ли вообще реализовать такой календарь

    Реализовать в принципе можно почти всё что угодно, вопрос кому оно нужно и кто готов за это платить.

    но наверное какие-то основы, работу с NPM, CSS/SASS препроцессоры он должен знать?

    Очень хорошо, когда дизайнер имеет представление о том, как результат его труда в дальнейшем будет реализован. Но с набором технологий вы сильно дали маху - это всё очень профильные вещи, которые толком изучить - отдельная профессия.

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

    Вообще такое ощущение, что все вокруг просто на самом деле ничего толково делать не умеют, но пытаются себе цену добавить мнимым знанием кучи всего. Сфокусируйтесь на одном чём-нибудь.
    Человеку, который делает гениальный дизайн, прощают всё - сложный характер, срывы сроков, никакую структуру файлов, Layer1-layer2 - и возвращаются к нему снова, потому что это профессионал в своём деле, и нет совершенно никакой нужды добавлять себе стоимость второстепенными навыками. Разве что самому интересно..
    Ответ написан
    Комментировать
  • Как сделать автозапуск pm2?

    bingo347
    @bingo347 Куратор тега Node.js
    Crazy on performance...
    pm2 save
    сохраняет информацию о текущих запущенных процессах из под текущего юзера в папке ~/.pm2
    для каждого юзера у pm2 свой список процессов и свой дамп
    Нужно выполнять каждый раз, когда поменяли список процессов и хотим при перезапуске восстанавливать в текущем состоянии

    pm2 startup
    Добавляет сам pm2 в автозагрузку, в приоритете использует system.d, при отсутствии знает еще несколько init систем.
    Нужно выполнять 1 раз, сразу после установки pm2 и из под root (sudo pm2 startup)
    В случае systemd будет создан юнит pm2-root.service и сразу будет выполнено systemctl enable pm2-root.service
    Ответ написан
    Комментировать
  • Как проверить двумерный массив на наличие в нем одномерного массива?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Сделаем функцию, которая проверяет равенство содержимого двух массивов - сравниваем длины, затем проверяем, что каждый элемент одного массива равен элементу с тем же индексом в другом массиве:

    const isEqual = (a, b) =>
      a.length === b.length && a.every((n, i) => Object.is(n, b[i]));

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

    const includes = (arrs, search) =>
      arrs.some(n => isEqual(n, search));

    Всё: console.log(includes(array, [ 21, 81 ]));.
    Ответ написан
    Комментировать
  • Как разбить строку по символам переноса строки?

    Seasle
    @Seasle Куратор тега JavaScript
    const rows = text.split(/\r\n|\r|\n/g);
    Ответ написан
    Комментировать
  • Что не так с этим кодом?

    profesor08
    @profesor08 Куратор тега JavaScript
    Скобки. Проверь скобки. Массив не может выступать в роли свойства объекта.
    Ответ написан
    2 комментария
  • Нормально ли применять css module в разработке SPA?

    Напротив, в случае SPA лучше как раз применять css modules, css-in-js и прочие подобные решения. БЭМ будет выглядеть, как сова на глобусе просто потому, что вы не сможете сделать более-менее сложную структуру блоков, элементов и модификаторов, не размазав один и тот же блок по нескольким компонентам (которые будут элементами).

    Вместо этого, когда каждый компонент отвечает только сам за себя, вы всегда будете знать, что стили, влияющие на этот компонент, находятся в нем самом же.
    Ответ написан
    1 комментарий
  • Как из console.log вывести значение объекта в HTML?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    const data = JSON.parse(this.responseText);
    "Your link is " + data.shortURL;
    Ответ написан
    Комментировать
  • Как исправить что npm ci игнорирует registry, указанный в package-lock.json?

    OAPrilepa
    @OAPrilepa
    Frontend developer
    Насколько я понимаю, надо чтобы в проекте лежал файл .npmrc и в нём была строка вида:
    @my/package:registry=http://corporate.npm
    Ответ написан
    2 комментария
  • Есть ли сайты, на которых собраны множество "рецептов" по html/css?

    @Firsov36
    full-stack web developer
    Та же песочница codepen.io очень много разного и можно скопировать к себе, изменить, улучшить и т.д.
    Ответ написан
    Комментировать
  • Лучший ресурс(ресурсы) для изучения React.js для новичков?

    miraage
    @miraage
    Старый прогер
    Официальная документация React
    Ответ написан
    Комментировать
  • Как включить на проекте redux devtools?

    miraage
    @miraage
    Старый прогер
    Официальный NPM пакет, который инкаспулирует внутреннюю логику: https://www.npmjs.com/package/redux-devtools-extension
    Ответ написан
    Комментировать
  • Как включить на проекте redux devtools?

    contraomnes
    @contraomnes
    Frontend developer
    расширение передается 3 или, в вашем случае, 2 аргументом (enhancer), а не комбинируется с редьюсерами
    export default createStore(combineReducers(reducer), initialState, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())


    или

    export default createStore(combineReducers(reducer), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
    Ответ написан
    Комментировать
  • Как инициализировать гит в существующем проекте и сравнить что изменено с удаленным репозиторием?

    jcmvbkbc
    @jcmvbkbc
    "I'm here to consult you" © Dogbert
    git init
    git add .
    git commit
    git remote add <remote-name> <url>
    git fetch <remote-name>
    git diff <remote-name>/<remote-branch>
    Ответ написан
    Комментировать
  • Ошибка при нажатии на кнопку зарегистрироваться, что делать?

    @Che603000
    c 2011 javascript
    https://mongodb.github.io/node-mongodb-native/api-...
    форматconnect(url[, options], callback)
    Видимо ошибка в MongoClient.connect
    // Запуск сервера
    MongoClient.connect('mongodb://localhost:27017/alldatabase', function(err, database) {
        useUnifiedTopology: true;  //  <---????
        useNewUrlParser: true;  //  <---???? неправильно опции установлены
    
       ...

    Правильно ниже
    // Запуск сервера
    MongoClient.connect(
      'mongodb://localhost:27017/alldatabase',  // строка подключения
      {
         useUnifiedTopology: true,  // установка опций
         useNewUrlParser: true
      },
      function(err, database) {  // callback
        if (err) {
            return console.log(err);
        }
        // Ссылка на бд
        db = database;
        app.listen(3000, function() {
            console.log('Подключение');
        });
    });
    Ответ написан
    1 комментарий
  • Почему в этом случае не работает querySelectorAll?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Потому что, querySelectorAll() возвращает NodeList (типо массив). А ваш код предполагает обращение к одному элементу.

    Прежде, чем задавать вопрос такого уровня, следует открыть MDN.
    Ответ написан
    1 комментарий
  • Рендер содержимого тега в React?

    @i1yas
    В реакте есть конвенция, что теги с маленькой буквы трактуются как html теги, а с большой как компоненты.
    Назовите компонент Footer
    Ответ написан
    2 комментария
  • Как программно инвалидировать SSR кеш в NextJS?

    @dimuska139 Автор вопроса
    Backend developer
    В общем, сам решил вопрос. У cacheable-response можно в параметре cache указать свой экземпляр Keyv, передав в конструктор класса нужный store. Соответственно, если передать туда @keyv/redis, то кеш будет храниться в Redis. При желании можно просто из Redis удалять нужный ключ и все - вот и инвалидация.
    Может немного неправильно объяснил, так что вот код моего server.js:
    const express = require('express');
    const next = require('next');
    const redirects = require("./redirects");
    const cacheableResponse = require('cacheable-response');
    const port = parseInt(process.env.PORT, 10) || 3001;
    const dev = process.env.NODE_ENV !== 'production';
    const app = next({ dev });
    const KeyvRedis = require('@keyv/redis');
    const Keyv = require('keyv');
    
    const handle = app.getRequestHandler();
    
    const keyvRedis = new KeyvRedis('redis://127.0.0.1:6399'); // TODO: Get from dotenv
    
    const ssrCache = cacheableResponse({
        ttl: 1000 * 60 * 120, // 2 hours
        get: async ({ req, res, pagePath, queryParams }) => ({
            data: await app.renderToHTML(req, res, pagePath, queryParams)
        }),
        cache: new Keyv({ store: keyvRedis }),
        send: ({ data, res }) => res.send(data)
    });
    
    
    app.prepare().then(() => {
        const server = express();
    
        redirects.forEach(({ from, to, type = 301, method = 'get' }) => {
            server[method](from, (req, res) => {
                res.redirect(type, to)
            })
        });
    
        server.use((req, res, next) => {
            res.append('Set-Cookie', "HttpOnly;Secure;SameSite=Strict");
            next();
        });
    
        server.get('/posts/:slug', (req, res) => {
            const queryParams = { slug: req.params.slug };
            const pagePath = '/post';
            return ssrCache({
                req,
                res,
                pagePath,
                queryParams
            });
        });
    
        server.get('/', (req, res) => {
            const pagePath = '/';
            return ssrCache({
                req,
                res,
                pagePath
            });
        });
    
        server.all('*', (req, res) => {
            //console.dir(req.url);
            return handle(req, res)
        });
    
        server.listen(port, err => {
            if (err) throw err;
            console.log(`> Ready on http://localhost:${port}`)
        })
    });
    Ответ написан
    Комментировать
  • Как посчитать сумму одинаковых значений по одной колонке, но разных по другой?

    trapwalker
    @trapwalker
    Программист, энтузиаст
    Уберите T.TRANZTIME из группировки и из селекта. Там два разных значения.
    Если вам обязательно надо какое-то показать (например последнее), то выкиньте его из группировки, а в селекте поставьте там агрегатор, например, max.
    Вот так ваш Сидоров просуммируется на этом датасете в одну строку:
    SELECT
        C.CODE AS "Табельный",
        C.NAME AS "Ф.И.О.",
        T.TRANZDATE AS "Дата",
        max(T.TRANZTIME) AS "Время",
        T.INFOSTR AS "Карта",
        sum(T.SUMM) AS "Сумма"
    FROM 
        DOCUMENT D
            LEFT JOIN TRANZT T ON D.ID = T.DOCUMENTID
            JOIN CLIENT C ON D.CLIENTID = C.ID
    WHERE
          T.TRANZDATE >='20.02.2020' AND T.TRANZDATE <='20.02.2020' AND
          T.TRANZTIME >='18:55:00' AND T.TRANZTIME <='23:59:59' AND
          D.STATE = 1 AND
          D.ISFISCAL = 1 AND
          D.CLIENTID >=0 AND
          T.TRANZTYPE = '36'
    GROUP BY
        C.CODE,
        C.NAME,
        T.TRANZDATE,
    --    T.TRANZTIME,
        T.INFOSTR
    --    ,T.SUMM

    Но на этом ваши проблемы не кончатся. В вашем SQL много других косяков:
    1. Какой смысл делать такое условие: T.TRANZTIME <='23:59:59'? Любое время будет ему удовлетворять.
    2. Если ваши дата и время связаны, то есть определяют какой-то момент во времени, то их нужно хранить и фильтровать как единое значение, иначе вы сами не заметите как наткнётесь на не очевидную (для новичка) ошибку неконсистентности. К примеру, событие Б позднее события А, но А произошло вечером, а Б утром (другого дня). При вашем отдельном сравнении дат и времён может получиться некорректность из-за того, что время (без даты) события А > времени (без даты) события Б. Соедините дату и время в единое поле datetime или соединяйте их каждый раз когда делаете условную фильтрацию по временнОму диапазону.
    3. Зачем вы группируете по T.SUMM, если собирались агрегировать это поле?
    Ответ написан
    2 комментария
  • Как среди команды найти определенное слово?

    joeberetta
    @joeberetta Куратор тега JavaScript
    Читай: https://epdf.pub/google-for-dummies.html
    // msg - текст сообщения, получите ее из нужного объекта/места
    if(msg.includes("ёж")) {
      // Do smth if message includes "ёж"
    }
    Ответ написан
    Комментировать
  • Как заменить добавляемый display:block через javascript на display:flex?

    Seasle
    @Seasle Куратор тега JavaScript
    .show() выполняет .css('display', 'block');, следовательно можно сделать так: .css('display', 'flex');, а вместо .hide:
    .css('display', 'none');. Но лучше сделать доп. класс и тоглить его.
    Ответ написан
    1 комментарий