Ответы пользователя по тегу Веб-разработка
  • Правильный способ отправлять форму на 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
    Ответ написан
    Комментировать
  • Что такое сегодняшняя разработка сайтов?

    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 хостинг
    Ответ написан
    3 комментария
  • Идеальный алгоритм вёрстки сайта?

    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
    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
    Ответ написан
    Комментировать
  • Как реализовать корзину на LARAVEL?

    delphinpro
    @delphinpro
    frontend developer
    Идентификация по IP — так себе идея. Все абоненты Yota к примеру сидят за провайдерским натом, им не выдается статический IP. более того, выданный динамически периодически меняется.

    Я бы наверное хранил корзину в localstorage.
    Или хотя бы генерил guid и его хранил у клиента, чтобы потом идентифицировать.
    Ответ написан
    Комментировать
  • Как пользоваться препроцессорами, отличными от SCSS и SASS?

    delphinpro
    @delphinpro
    frontend developer
    Какие танцы с бубном?

    1. Поставить на машину nodejs
    2. Написать gulpfile.js
    3. Установить пакеты
    4. Начать пользоваться.


    Самое сложное здесь (но не сложное в целом) — это написать gulpfile.

    Пример задачи для компиляции sass

    import gulp from 'gulp';
    import gulpSass from 'gulp-sass';
    
    export const sass = function(){
      return gulp.src('./src/sass/*.scss')
        .pipe(gulpSass())
        .pipe(gulp.dest('./dis/css/'));
    }


    Запускаем
    npm run sass
    И получаем скомпилированный файл.
    Ответ написан
    Комментировать
  • Как снизить зависимость от разработчиков?

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

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

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

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

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

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

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

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

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

    Если нет желания тратиться на собственный домен (560р/год в зоне ru), для демонстрации верстки вполне можно ипользовать github pages. Тройной бонус — бесплатно, виден результат, виден код.

    Если 560 р/год не жалко, можно и домен приобрести, сделать свой сайт, разместить на нем портфолио, резюме, вести блог разработчика.
    Ответ написан
    Комментировать