Ответы пользователя по тегу Веб-разработка
  • Каким инструментов удобнее менять цвета скачанного чужого сайта?

    delphinpro
    @delphinpro
    frontend developer
    Если вот прямо "поиграть цветами" хочется, то есть отличный, но затратный вариант.

    Нанимаете разработчика, он шерстит ваш лендос, находит все цветовые параметры, объединяет их в css-переменные. Далее эти переменные в одном месте можно редактировать через средства разработчика. Результат видно "на лету".
    Но так как инструменты разработчика по какой-то причине табу, то напрягаем этого же разработчика еще больше, и он пилит красивую панельку с ползунками или иными средствами визуального редактирования и клиент радостно "играет с цветами" в этой панельке.

    Однако встаёт вопрос экономической целесообразности такого подхода.
    Ответ написан
    3 комментария
  • Кто должен адаптировать сайт под разные разрешения мониторов?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    Вам попался низкоквалифицированный исполнитель. Или ленивый.
    В наше время, когда подавляющей частью трафика является мобильный трафик, упоминание в требованиях адаптивной вёрстки излишне. Это как бы само собой разумеющееся.
    Да, в идеале дизайн-макеты под разные разрешения должен подготовить дизайнер. Но верстальщик должен в любом случае обеспечить адекватное отображение страницы на любом устройстве от мобильного телефона до монитора. Если специальных оговорок не было, он может сделать адаптив на своё усмотрение или по своей инициативе обговорить варианты с заказчиком.
    Ответ написан
    3 комментария
  • Как реализовать отправку данных в БД с форм выведенных циклом?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    Фанат выше верно отметил – можно сделать отдельные формы на каждый блок.
    Так как в таблицу нельзя впихнуть тег form, то можно сделать так.

    <form name="form1" method="post" action="/save/1"></form>
    <form name="form2" method="post" action="/save/2"></form>
    <form name="form3" method="post" action="/save/3"></form>
    <table>
    <tbody>
      <tr>
        <td><input type="text" name="param1" form="form1"></td>
        <td><input type="text" name="param2" form="form1"></td>
      <tr>
      <tr><td><button type="submit" form="form1">Send</button></td><tr>
    </tbody>
    <tbody>
      <tr>
        <td><input type="text" name="param1" form="form2"></td>
        <td><input type="text" name="param2" form="form2"></td>
      <tr>
      <tr><td><button type="submit" form="form2">Send</button></td><tr>
    </tbody>
    <tbody>
      <tr>
        <td><input type="text" name="param1" form="form3"></td>
        <td><input type="text" name="param2" form="form3"></td>
      <tr>
      <tr><td><button type="submit" form="form3">Send</button></td><tr>
    <table>


    Но, в принципе можно и одной формой обойтись. Тогда и кнопку Save можно сделать общую.

    <form method="post" action="/save">
    <table>
      <tr>
        <td><input type="text" name="data[ОУР][param1]"></td>
        <td><input type="text" name="data[ОУР][param2]"></td>
      <tr>
      <tr>
        <td><input type="text" name="data[ОЭБ][param1]"></td>
        <td><input type="text" name="data[ОЭБ][param1]"></td>
      <tr>
      <tr>
        <td><input type="text" name="data[ОНК][param1]"></td>
        <td><input type="text" name="data[ОНК][param1]"></td>
      <tr>
      <tr><td><button type="submit">Send</button></td><tr>
    </tbody>
    <table>
    </form>

    Ответ написан
    Комментировать
  • Нужна помощь с методологией БЭМ. Не могу разобраться как правильно оформить футер. На скрине правильно?

    delphinpro
    @delphinpro Куратор тега HTML
    frontend developer
    .footer
      .footer__columns
        .footer__column .footer-info
          .footer-info__logo .logo
          .footer-info__author
        .footer__column .footer-nav
          .footer-nav__heading
          .footer-nav__list
            .footer-nav__link
        .footer__column .footer-nav
          .footer-nav__heading
          .footer-nav__list
            .footer-nav__link
    Ответ написан
    Комментировать
  • Как правильно подключить favicon через сборщик задач gulp?

    delphinpro
    @delphinpro Куратор тега Gulp.js
    frontend developer
    1. В корне следует располагать только favicon.ico (16x16 или 32х32). Остальные иконки спокойно можно закинуть в любую папку.
    2. Зачем вообще использовать какие-то плагины для генерации фавиконок, вы что их постоянно обновлять собираетесь? Раз сгенерил на каком-то онлайн-сервисе весь пак и забыл на пару лет. Подключение руками, те же онлайн генераторы предоставят готовый код, в котором только пути под себя скорректировать, если не в корень класть будете.

    В общем, боюсь, вы ерундой маетесь.
    Ответ написан
    8 комментариев
  • Как проверить правильность написания ссылки?

    delphinpro
    @delphinpro
    frontend developer
    Ну если статьи не помогают пониманию, изучите стандарт – RFC3986

    А вообще на википедии, как по мне, довольно понятно написано

    Стандарт URL использует набор символов US-ASCII. Это имеет серьёзный недостаток, поскольку разрешается использовать лишь латинские буквы, цифры и несколько знаков пунктуации. Все другие символы необходимо перекодировать.
    Ответ написан
    Комментировать
  • Правильный способ отправлять форму на laravel 8?

    delphinpro
    @delphinpro
    frontend developer
    Я сам не пробовал, но вроде как jetstream позиционирует себя как фронт-стэк для ларки. Там два решения, один из них под Vue. Вероятно можно использовать.

    Но я предпочитаю "устаревшие" методы (кстати, кто вам это сказал?) – jquery/fetch/axios
    Ответ написан
  • Сайт не видит картинки и гиперссылки в папке?

    delphinpro
    @delphinpro
    frontend developer
    Вместо
    <img src="C:\sait\2\image.jpg">
    Пишите просто
    <img src="2/image.jpg">
    То есть указывайте относительный путь к картинке от того файла, в котором его пишете. Обратите внимание на слеш. В URL от всегда такой "/".
    Ну и почитайте что-нибудь про указание урлов в html коде.
    Ответ написан
    1 комментарий
  • Что такое сегодняшняя разработка сайтов?

    delphinpro
    @delphinpro
    frontend developer
    Как нынче делаются простенькие сайты, сайты посложнее, серьёзные сайты, сложные сайты?


    простенькие как и раньше, html/css/js.
    посложнее - на cms, более всего на слуху вордпресс
    серьезные и сложные разрабатываются на фреймворках (симфони, ларка). В этом сегменте все индивидуально.
    Ответ написан
    Комментировать
  • Почему не работает :checked?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Работать будет только если элементы на одном уровне
    <input type="checkbox" id="burger">
    <div id="nav2"></div>


    #burger:checked + #nav2 {
    }

    Note:
    Использовать идентификаторы для задания стилей – плохая практика.
    Ответ написан
    1 комментарий
  • Могут ли как-либо достучаться до файла в не public папке?

    delphinpro
    @delphinpro
    frontend developer
    Если сервер настроен как положено, то никто не достучится.
    Как положено — это когда DOCUMENT_ROOT указывает именно на папку public, а не используются хаки для установки laravel на shared хостинг
    Ответ написан
    2 комментария
  • Идеальный алгоритм вёрстки сайта?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    В целом согласен. До пункта №7.

    Я обычно придерживаюсь принципа верстки независимыми блоками.
    Поэтому после анализа макетов, я делаю одну-две-три (смотря по объему макетов) вспомогательных страниц, на которых верстаю:

    1. Базовые элементы. Общая типографика, кнопки, ссылки и т.п.
    2. Общие блоки. То что повторяется на нескольких страницах и/или может быть переиспользовано, какие-то виджеты, менюшки, и т.п.

    Все это занимает основную часть времени работы. И к окончанию этих этапов я имею своего рода набор, или конструктор, из готовых блоков. Остается только написать лейауты для разных страниц и раскидать по ним имеющиеся блоки.

    Для этого всё закидываю на гитхаб-пейдж, чтобы по ссылке я мог открыть с телефона или попросить знакомого проверить на другой ОС c телефона


    Это лишняя трата времени. Пусть небольшая, но все же. Плюс, отслеживать качество верстки все-таки удобнее в процессе, а не по окончании подкручивать.
    Поэтому используем browser-sync. Поднимается сайт, доступный по IP в домашней локалке с любого устройства. Совет: использовать всегда один порт в browser-sync, а на устройствах сделать закладки на этот адрес. Любой сайт, который в данное время разрабатывается, открывается одним тапом по закладке.
    Кроме того BS дает бонус в виде синхронизации действий сразу на всех устройствах: клики, прокрутка, ввод. Это мега-удобно — кликаешь на компе, краем глаза смотришь в планшет и телефоны, сразу видишь там все изменения и поведение.

    Всё готово, сжимаю CSS, JS. через веб-сервисы.


    Опять тратите время. Настроенный Gulp в одну команду проделает все оптимизации (на больших проектах даже кофе можно успеть сделать, пока собирается билд=).

    Еще обратите внимание на инструмент lighthouse в инструментах разработчика.

    скриншот
    608fcaa260f31153020142.png


    Не нужно никуда сайт заливать, чтобы проверить на доступность, производительность и т.п.

    Про CMS ничего не скажу. Клиенту удобнее кнопочки тыкать в условном вордпрессе.

    Я не упомянул SASS-фигас и т. д, так как не увидел практической пользы для проектов на 1-15 страниц.


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

    Ну вот зачем PUG? Как конкретно он помогает на небольших проектах 1-15 шаблонов страниц.


    Помогает. Нет, конкретно Pug я очень не люблю. Но другой, более "хэтээмэльный" шаблонизатор бывает полезен. Я уже упомянул выше о верстке независимыми блоками. Шаблонизатор позволит не копипастить эти блоки, а использовать их как компоненты.

    Префиксы? В кодовом редакторе они и так есть.


    Я считаю, что исходный код должен быть чистым, без префиксов. Это лишний визуальный мусор. Пусть лучше автопрефиксер этим занимается. К тому же этот плагин использует актуальную базу caniuse на основе вашего .browserlist. Пусть профит и не большой, но все же поменьше на выходе неактуальных свойств.
    Ответ написан
    2 комментария
  • Как изменить скроллбар у блока?

    delphinpro
    @delphinpro
    frontend developer
    https://yandex.ru/search/?text=custom%20scrollbar
    Выбирайте любое javascript-решение
    Ответ написан
    Комментировать
  • Как работает CSRF?

    delphinpro
    @delphinpro
    frontend developer
    Здесь всё прочитали и уяснили? https://learn.javascript.ru/csrf
    Ответ написан
    Комментировать
  • Поиск на сайте с помощью другого сайта?

    delphinpro
    @delphinpro
    frontend developer
    Комментировать
  • Как правильно собрать 2 разных js в webpack?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    package.json
    {
        "private": true,
        "scripts": {
            "site:development": "mix",
            "site:watch": "mix watch",
            "site:hot": "mix watch --hot",
            "site:production": "mix --production",
            "dashboard:watch": "cross-env TARGET=dashboard mix watch",
            "dashboard:hot": "cross-env TARGET=dashboard mix watch --hot",
            "dashboard:production": "cross-env TARGET=dashboard mix --production"
        },
        "devDependencies": {
            "browser-sync": "^2.26.14",
            "browser-sync-webpack-plugin": "^2.2.2",
            "chalk": "^4.1.0",
            "cross-env": "^7.0.3",
            "dotenv": "^8.2.0",
            "laravel-mix": "^6.0.13",
            "resolve-url-loader": "^3.1.2",
            "sass": "^1.32.8",
            "sass-loader": "^10.1.1"
        },
        "dependencies": {}
    }

    webpack.mix.js
    /** @type {Api} */
    const mix = require('laravel-mix');
    const path = require('path');
    const dotenv = require('dotenv');
    /** @type {Chalk} */
    const chalk = require('chalk');
    
    const dotEnvLocation = path.resolve('./.env');
    dotenv.config({ path: dotEnvLocation });
    
    const WATCH = process.argv.includes('--watch');
    const HOT = process.argv.includes('--hot');
    const localDomain = process.env.LOCAL_DOMAIN ?? 'localhost';
    const target = process.env.TARGET ?? 'site';
    
    let browserSyncPort = 3000;
    let hmrPort = 8088;
    
    const logs = {
        mode    : WATCH ? chalk.red('WATCH') : HOT ? chalk.red('HOT') : 'None',
        domain  : process.env.LOCAL_DOMAIN ?? chalk.red(localDomain),
        frontend: process.env.FRONTEND_DIST ?? chalk.red(process.env.FRONTEND_DIST),
        backend : process.env.BACKEND_DIST ?? chalk.red(process.env.BACKEND_DIST),
    };
    
    console.log(chalk.cyan('Local domain:  ') + logs.domain);
    console.log(chalk.cyan('Location .env: ') + dotEnvLocation);
    console.log(chalk.cyan('Mode:          ') + logs.mode);
    console.log(chalk.cyan('Public paths:'));
    console.log(chalk.cyan('  Frontend:    ') + logs.frontend);
    console.log(chalk.cyan('  Backend:     ') + logs.backend);
    
    if (target === 'dashboard') {
        browserSyncPort = process.env.BACKEND_LOCAL_PORT ?? 3000;
        hmrPort = process.env.BACKEND_HMR_PORT ?? 8088;
        require('./webpack-dashboard.mix.js');
    }
    
    if (target === 'site') {
        browserSyncPort = process.env.FRONTEND_LOCAL_PORT ?? 3001;
        hmrPort = process.env.FRONTEND_HMR_PORT ?? 8089;
        require('./webpack-site.mix.js');
    }
    
    /*==
     *== Customize options
     *== ======================================= ==*/
    
    mix.version();
    
    mix.disableSuccessNotifications();
    
    if (!HOT && WATCH) {
        mix.browserSync({
            proxy    : localDomain,
            startPath: target === 'site' ? '/' : '/admin',
            browser  : ['chrome'],
            notify   : false,
            port     : browserSyncPort,
        });
    }
    
    mix.options({
        clearConsole: false,
        hmrOptions  : {
            host: 'localhost',
            port: hmrPort,
        },
    });
    
    const webpackResolveRules = {
        extensions: ['*', '.wasm', '.mjs', '.js', '.jsx', '.json', '.vue'],
        alias     : {
            '@': path.join(__dirname, 'resources/js'),
        },
    };
    
    mix.sourceMaps(false, 'source-map');
    
    if (!mix.inProduction()) {
        mix.webpackConfig({
            output : { devtoolModuleFilenameTemplate: '[resource-path]' },
            resolve: webpackResolveRules,
        });
    } else {
        mix.webpackConfig({
            resolve: webpackResolveRules,
        });
    }

    webpack.mix.site.js
    /** @type {Api} */
    const mix = require('laravel-mix');
    
    const HOT = process.argv.includes('--hot');
    
    if (!process.env.FRONTEND_DIST) throw Error;
    
    mix.setPublicPath(`public/${process.env.FRONTEND_DIST}`);
    if (!HOT) mix.setResourceRoot(`/${process.env.FRONTEND_DIST}`);
    
    mix.js('resources/js/app.js', 'js');
    
    mix.sass('resources/scss/app.scss', 'css');
    
    mix.extract();

    webpack.mix.dashboard.js
    /** @type {Api} */
    const mix = require('laravel-mix');
    
    const HOT = process.argv.includes('--hot');
    
    if (!process.env.BACKEND_DIST) throw Error;
    
    mix.setPublicPath(`public/${process.env.BACKEND_DIST}`);
    if (!HOT) mix.setResourceRoot(`/${process.env.BACKEND_DIST}`);
    
    mix.js('resources/dashboard/js/main.js', 'js');
    
    mix.sass('resources/dashboard/scss/main.scss', 'css');
    
    mix.extract();

    .env
    LOCAL_DOMAIN=delphinpro.local
    FRONTEND_LOCAL_PORT=3000
    FRONTEND_HMR_PORT=8003
    FRONTEND_DIST=dist/frontend
    BACKEND_LOCAL_PORT=3004
    BACKEND_HMR_PORT=8004
    BACKEND_DIST=dist/backend

    config/app.php
    <?php
    return [
        // .....
        'frontend' => [
            'dist' => env('FRONTEND_DIST'),
        ],
        'backend' => [
            'dist' => env('BACKEND_DIST'),
        ],
    ];

    *.blage.php
    <link href="{{ mix('css/app.css', config('app.frontend.dist')) }}" rel="stylesheet">
    <script src="{{ mix('js/app.js', config('app.frontend.dist')) }}"></script>
    Ответ написан
    Комментировать
  • Overflow-y и overflow-x в slick slide?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Если есть обрезка по одной стороне, то по второй может быть только обрезка или скролл. Visible может быть только по всем четырем сторонам.

    В такой ситуации можно генерировать выпадающий блок вне слайдера и позиционировать скриптом в нужном месте.
    Ответ написан
  • Как должен реагировать сервер, если через post добавить "лишние" данные в теле запроса?

    delphinpro
    @delphinpro
    frontend developer
    Валидируем ожидаемые данные, остальное игнорим. Проще всего.
    Ответ написан
    Комментировать
  • Что выбрать Wordpress или Drupal, MODX, 1СБитрикс?

    delphinpro
    @delphinpro
    frontend developer
    Ответ написан
    Комментировать