Задать вопрос
  • Как сделать так что бы при нажатии на Enter, текст в textarea переносился?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Ну очевидно же:

    if (event.code === 'Enter') {
      textArea.textContent += '\n'
    };
    Ответ написан
  • Как правильно подключать плагины jquery в gulp scss?

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    Вы из какой директории сервер поднимаете? Наверное что-то вроде dist. А файлы подключаете из src.
    Сделайте таск, который будет копировать файлы плагинов в dist
    И лучше вендоров ставить через npm, и копировать прямо из node_modules.
    Ответ написан
  • Правильные ли конфиги вебпак и gulp для Vue проекта?

    delphinpro
    @delphinpro
    frontend developer
    Да, забивать шурупы молотком — это хороший выбор =)

    Но в целом, вроде правильно. Если через webpackStream

    Я так делал. правда не для Vue, а просто, чтобы писать на привычном es6.
    Но я использовал node интерфейс вебпака.
    Покажу свой таск, разбирайтесь:

    webpack.task.js

    const path = require('path');
    
    const bs      = require('browser-sync');
    const webpack = require('webpack');
    
    const config      = require('../../gulp.config');
    const tools       = require('../lib/tools');
    const DEVELOPMENT = require('../lib/checkMode').isDevelopment();
    
    let webpackConfig = require(path.join(config.root.main, 'webpack.config.js'));
    
    function showInfo(err, stats) {
      // эту функцию приводить не буду. просто вывод ошибок в консоль
    }
    
    module.exports = function (options = {}) {
    
        options = {
            watch: false,
            ...options,
        };
    
        return function (done) {
    
            const compiler = webpack(webpackConfig);
    
            if (options.watch) {
                tools.info('Webpack watching...');
    
                compiler.watch({
                    ignored         : /node_modules/,
                    aggregateTimeout: 300,
                }, (err, stats) => {
    
                    showInfo(err, stats);
    
                    if (DEVELOPMENT && bs.has(config.browserSync.instanceName)) {
                        bs.get(config.browserSync.instanceName).reload();
                    }
                });
    
            } else {
    
                compiler.run((err, stats) => {
                    showInfo(err, stats);
                    done();
                });
    
            }
    
        };
    };
    Ответ написан
  • Разный Layout для страниц?

    delphinpro
    @delphinpro
    frontend developer
    Nested routes я полагаю.

    <Route component={App} path="/">
      <Route component={Layout1} path="/">
        <Route component={View1} path="/view1"></Route>
        <Route component={View2} path="/view2"></Route>
      </Route>
      <Route component={Layout2} path="/">
        <Route component={View3} path="/view3"></Route>
        <Route component={View4} path="/view4"></Route>
      </Route>
    </Route>


    Я правда не помню, как это пишется в реакте. Мы на Vue таким образом решаем проблему лейаутов.
    Ответ написан
  • Какие есть способы ведения документации JSON/XML структур?

    delphinpro
    @delphinpro
    frontend developer
    Если ориентироваться на тег ajax, то можно предположить, что речь идет об ответах API. Тот же OpenAPI позволяет описать в том числе и структуру json ответов.
    Ответ написан
  • Как вынести в отдельный массив элементы, которые не помещаются я в контейнере?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Вам концепт нужен или что?

    Могу предложит следующее.

    Делаем строку не переносимой на новую строку (nowrap, flex, overflow)
    Основной враппер с обрезкой (overflow)
    Внутри контейнер с элементами (flex no wrap, white-space nowrap)
    Таким образом мы сможем получить ширину враппера и ширину контейнера.
    Если ширина внутреннего контейнера меньше враппера — ничего не делаем, всё помещается.
    В противном случае проверяем ширину последнего элемента. Если она больше (wrapper_width - first_el_width), то последний слишком широкий. Тогда мы вырезаем все внутренние со второго по предпоследний. В последнем обрезаем длину (можно через css ellipsis).
    Если последний элемент не такой широкий, то подсчитываем ширины средних элементов, начиная с предпоследнего до тех пор пока не станет больше или равной разнице ширин контейнера и враппера. Такое количество элементов вырезаем.
    Ну и на месте вырезанных элементов можно размещать кнопку с троеточием, по клику на которую будет выпадать список в вырезанными элементами.
    Ответ написан
    Комментировать
  • Почему переменная scss в компоненте vue - undefined?

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    Вот здесь гляньте VueJS: где лучше хранить css, в компонентах .vue или main.css?

    Переменные не нужно объявлять в компонентах (только если локальные, чисто для этого компонента)
    Их нужно вынести в отдельный файл и подключить этот файл глобально, через конфиг webpack

    PS/ Код конфига в том моем ответе возможно устарел. Уточните имена опций в документации sass-loader.
    Ответ написан
  • Почему зависает browserSync при изменении в файлах?

    delphinpro
    @delphinpro Куратор тега Gulp.js
    frontend developer
    gulp.watch("#src/sass/**/*.sass").on('change', browsersync.reload);


    watch должен запускать задачу, а не перегружать страницу.
    А в конце задачи должен быть вызов браузер синка.
    примерно так:

    gulp.watch("#src/sass/**/*.sass").on('change', sassTask);
    и в задаче sassTask
    .pipe(browsersync.stream()))

    stream — не перезагружает страницу, а обновляет код в открытой. По моим наблюдениям это работает только со стилями. В js и других тасках лучше использовать .reload
    Ответ написан
    Комментировать
  • Может ли gulp присоединить к Angular/React/Vue?

    delphinpro
    @delphinpro Куратор тега Gulp.js
    frontend developer
    Gulp не нужен здесь.
    У них в комплекте идут свои уже настроенные сборщики.

    Если говорить о Vue - это интерфейс vue ui.
    Запускаете его из консоли, открывается панель управления в браузере. Там выберете нужные опции и создадите проект с готовой конфигурацией.
    Ответ написан
  • Carbon, как к одной дате выведенной из базы прибавить другую?

    delphinpro
    @delphinpro Куратор тега Laravel
    frontend developer
    Делаем нормальную модель.
    В модели кастуем поле с датой к дате
    И получаем готовое поле Carbon, с которым делаем что хотим.
    Ответ написан
    Комментировать
  • Как получить данные с сервера?

    delphinpro
    @delphinpro
    frontend developer
    если что то поменять по FTP или в админке на сервере,


    В первую очередь нужно исключить подобные вещи.

    Если же все-таки кто-то вносил правки на сервере и их нужно сохранить, то заходим на сервер по ssh, стэшим все изменения, пуллим свежак из репы. Достаем правки из стэша, оформляем новый коммит(ы) и отправляем их в репу.
    Ответ написан
  • Как менять контент только определенного блока?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    Я думаю использовать ajax запросы на сервер и получать уже готовую вёрстку в результате рендерить с помощью JS.

    Верно.
    Для начала нормально.
    Потом можно перейти в использованию шаблонизатора на клиенте и получение по аякс не разметки, а чистых данных в json.
    Третий этап — переход на использование js-фреймворка.
    Ответ написан
    Комментировать
  • Обьекты.клонирование, права доступа, поможете?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    const student = {
        name   : 'Sasha',
        age    : 46,
        surname: 'Belov',
      };
      const studentCS = { ...student };
      studentCS.speiality = 'Computer Science';
    
      const courses = {
        Math   : 10,
        English: 9,
        Sport  : 8,
      };
      const permissions = {
        canView : true,
        canEdit : false,
        canPrint: true,
      };
      Object.assign(studentCS, courses, permissions);
      console.log(studentCS);
    
      studentCS.average = function () {
        return (this.Math + this.Sport + this.English) / 3;
      };
      studentCS.checkPermission = function () {
        return [
          this.canView,
          this.canEdit,
          this.canPrint,
        ].filter(i => i).length;
      };
      console.log('Score: ' + studentCS.average());
      console.log('Number of enabled rights: ' + studentCS.checkPermission());
    Ответ написан
    1 комментарий
  • Как сделать аккордеон на js?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Ответ написан
    Комментировать
  • Как часто нужно использовать заголовки на сайте?

    delphinpro
    @delphinpro
    frontend developer
    У вас начальная стадия SEO головного мозга. Это опасно.
    Переключитесь, пока не поздно. Ориентируйтесь на контент, а не на поисковики.

    Далее серьёзно.

    Нужно понять назначение основных семантических элементов html — h1-h6, header, footer, section, article, main, aside.
    Разметить основное содержимое страницы - main. Это единственный элемент на странице.
    Разметить второстепенное - aside, сколько угодно
    Разметить основной контент - article, section, header, footer
    Насчет article и section многие спорят. Насчет того, что во что вкладывается. Ну я не буду настаивать на каком то варианте, почитайте доводы обеих сторон в интернете.
    Разметить отдельные смысловые блоки контента внутри article/section - h1-h6, header, footer

    Вот и всё.
    Дальше детали. Main должен иметь заголовок . используем h1.
    У article может быть свой заголовок h1 (а может и не быть) и любое количество подзаголовков h2-h6
    Ну и так далее.

    В общем нужно почитать о назначение данных элементов. Можно в спецификации, если осилите, можно статейки поискать с разжевыванием.
    Ответ написан
    5 комментариев
  • Как сделать доступ с определённого IP?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    // добавляйте сколько угодно разрешенных IP
    $allowedIP = [
      '127.0.0.1',
      '127.0.0.2',
    ]; 
    if(!in_array($_SERVER['REMOTE_ADDR'], $allowedIP)){
            header('Location: https://google.com');
    }
    Ответ написан
    Комментировать
  • Как снизить зависимость от разработчиков?

    delphinpro
    @delphinpro
    frontend developer
    ограничения редактирования CMS, т.е. если мы захотим что-то дописать - это будут костыли,

    Вовсе нет.
    CMS - это не всегда закрытый ящик. Если взять к примеру joomla, wordpress, modx (из тех что я знаю) — то они достаточно гибко дописываются. Тут вопрос в том, насколько хорошо разраб знает эту систему. Если хорошо, то он напишет расширенный функционал не "на костылях". С другой стороны, даже если говорить о фреймворке и о разработчике, который плохо его знает, то он и там будет писать костыли, только потому, что не в курсе имеющихся средств и инструментов из комплекта поставки или популярных пакетов.
    Резюмируя — количество костылей обратно пропорционально квалификации программиста, вне зависимости от используемого инструмента.

    CMS или Framework зависимость от разработчиков будет меньше?

    Зависимость тем меньше, чем популярнее выбранное решение. Найти разработчика на условный вордпресс проще, чем на неизвестную AweCMS.

    Есть ли удобный способ для заказчика проверить качество кода, который пишет разработчик?

    Тут я не претендую на истину, но мне кажется единственный способ проверки, не имея собственной квалификации — нанять аудитора. Но тут возникнет вопрос компетентности аудитора =)
    Ответ написан
    7 комментариев
  • Зачем интерфейсы если есть трэйты?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    Про публичные контракты уже написали. Небольшой пример.
    Я пишу класс. Он должен принимать в конструктор объект определенного типа:

    class Me {
      public function __construct(IHttpRequest $request){
    
      }
    }


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

    delphinpro
    @delphinpro
    frontend developer
    Если мы имеем дело с конструктором, то тут в большинстве случаев никакой wget не поможет.
    И вообще копирование в принципе не поможет.
    У конструкторов чаще всего ужасная верстка, иногда даже все на абсолютах сверстано.
    И единственный подход здесь — верстка с нуля по подобию. Иногда копируя некоторые отдельные элементы.

    Если же вам повезло, и конструктор выдаёт приемлемый код, то в принципе wget вам может помочь.
    Ответ написан
    Комментировать
  • Как сделать, чтобы не убирался активный класс?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    const servicesList = document.querySelector('.services__сategory');
    const activeClass = "active-category";
    
    servicesList.addEventListener("click", function(event) {
      const element = event.target.closest(".category-item");
      if (!element) return;
    
      const activeElement = element.parentElement.querySelector(".active-category");
      
      if (element !== activeElement) {
        activeElement.classList.remove(activeClass);
        element.classList.add(activeClass);
      }
    });
    Ответ написан
    Комментировать