• Как оставить focus рабочим только для меню?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега CSS
    Нужно назначать кликнутой ссылке отдельный класс, который бы обозначал её активность.
    Это делает на основании адреса страницы либо бэкенд при генерации шаблона, либо JS, если это SPA.

    В представленной песочнице это может выглядеть примерно так:
    .nav ul li a.active {
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: .1em;
    }

    const $links = document.querySelectorAll('.nav a');
    
    Array.from($links).forEach(($link) => {
      $link.addEventListener('click', (event) => {
        document.querySelector('.nav a.active')?.classList.remove('active');
        event.target.classList.add('active');
      })
    });
    Ответ написан
    1 комментарий
  • Как подчинить алгоритм YouTube?

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

    Lynn
    @Lynn
    nginx, js, css
    Вместо экспорта переменной лучше экспортировать методы для её чтения и изменения.
    let myVar = false;
    const getMyVar = () => myVar;
    const setMyVar = (value) => { myVar = value };
    
    module.exports = { getMyVar, setMyVar };


    const { getMyVar, setMyVar } = require('./myVarModule');
    
    console.log(getMyVar());
    setMyVar(true);
    console.log(getMyVar());
    Ответ написан
    Комментировать
  • Как добиться такого эффекта при наведении?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Интересная задача. В общем весь фокус в том, что поверх видимых карточек, лежит точно такая же сетка с невидимыми карточками у которых есть только синий border. На сетку, которая лежит сверху, наложена маска:
    mask: radial-gradient(320px 320px at var(--x) var(--y), black 1%, transparent 40%);

    То есть у всего блока с синими border остается видимым только радиальный градиент в 320px, а x и y это координаты курсора. Ну и грубо говоря получается такая картина:

    Ответ написан
    4 комментария
  • На чем пишут современные соц.сети, способные выдержать большой поток людей?

    sergey-gornostaev
    @sergey-gornostaev
    Седой и строгий
    Нужно писать соцсеть на "одних лишь ЯП". Производительность CMS принципиально ограничена. Все существующие соцсети, "способные выдержать большой поток" - это очень индивидуальные решения, без каких-либо готовых компонентов.
    Ответ написан
    Комментировать
  • Как в CSS повернуть горизонтальный сайт на 90° чтобы на смартофне можно было горизонтально смотреть?

    @dramsky
    не понимаю зачем поворачивать сам сайт, если можно переключить ориентацию страницы
    Screen: orientation
    ScreenOrientation: lock()
    Ответ написан
    1 комментарий
  • Какая оптимальная структура хранения кастомных классов в Laravel 11?

    Adamos
    @Adamos
    Ну, раз гуру говорят, что best practices нет, посоветую свою just practice.
    Вообще не класть в app ничего сверх того, что там держит фреймворк.
    Создать свою папку для своих модулей, внутри них создать свои классы (можно повторить иерархию app).
    Вопроса, куда девать то, что в эту иерархию не вписывается, уже не возникает - создаешь папку с названием tools, например, и сваливаешь эти тулзы туда ;)

    Такой вариант навеян подходом OctoberCMS, где весь РНР-код разработчика ложится в папку plugins/{developer}/{module}, в принципе не смешиваясь с остальной системой.
    Как следствие, в следующий проект этот код переносится куда легче.
    Ответ написан
    2 комментария
  • Каким образом формируются имена файлов из набора букв и цифр?

    md5 или подобный хеш
    из плюсов, он позволит не хранить копии, если кто-то зальет картинку еще раз
    Ответ написан
    3 комментария
  • Почему ошибка 502 после миграции с PHP 8.2 на PHP 8.3?

    ipatiev
    @ipatiev Куратор тега PHP
    Потомок старинного рода Ипатьевых-Колотитьевых
    Ошибка 502 обычно означает кривые настройки сервера. То есть надо или трясти админов этого "хостинга где всё кнопочками" или учиться настраивать сервер самостоятельно и переезжать на впс.

    И на будущее.
    было записано только то, что вызывается 502 ошибка, а не причина почему она вызвана.

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

    Adamos
    @Adamos
    Потому что вычисление $a ?? [] имеет результатом копию массива, на нее и ссылается переменная цикла. Оригинальный массив в цикл вообще не попадает.
    Ответ написан
    Комментировать
  • Почему не могу закоммитить?

    sergey-kuznetsov
    @sergey-kuznetsov Куратор тега Git
    Автоматизатор
    первый раз работаю с git

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

    выдает 10000 файлов в каталоге

    Причина проста — вы инициализировали репозиторий находясь в корне вашего домашнего каталога. Нельзя так делать, если не хотите потерять свои файлы, бездумно вбивая команды типа stash.

    Что мне делать

    Удалить (или переименовать) подкаталог .git в котором хранится репозиторий. Затем создать его в правильном месте — в каталоге вашего проекта.
    Ответ написан
    Комментировать
  • Как уместить кроссбраузерную поддержку в одну строку?

    vhood
    @vhood
    Не забывайте отмечать решения
    пользуйтесь постпроцессором, который все проставит
    Ответ написан
    Комментировать
  • Что сработает быстрее, что лучше использовать?

    ipatiev
    @ipatiev
    Потомок старинного рода Ипатьевых-Колотитьевых
    Хороший вопрос, хотя и задавался миллион раз.

    Когда у вас выполняется запрос
    SELECT * FROM users WHERE DATE(created_at) = '2024-04-14'
    то СУБД должна пройти весь индекс до конца, получить каждое значение created_at, применить к нему функцию, сравнить с переданным значением, и добавить строку в результат запроса.

    Когда у вас выполняется запрос
    SELECT * FROM users WHERE created_at BETWEEN '2024-04-14 00:00:00' AND '2024-04-14 23:59:59'

    То СУБД находит бинарным поиском первое нужное значение, потом бежит по заранее отсортированному индексу и возвращает все значения до последнего, подходящего под второе условие.
    Ответ написан
    4 комментария
  • Почему не выводит первую строку в select?

    ipatiev
    @ipatiev Куратор тега PHP
    Потомок старинного рода Ипатьевых-Колотитьевых
    Потому что она зачем-то была получена до начала вывода.

    Откуда вы все берете учебники с таким дебильным кодом? Тут все делается в три строчки
    $result = $mysql->query("SELECT * FROM `postavshik`");
    while ($row = $result->fetch_assoc()) {
        echo  "<option>" . htmlspecialchars($row['Name_pred']). "</option>\n";
    }

    И возьмите нормальное руководство.
    Ответ написан
    1 комментарий
  • Как масштабировать число с идеальной точностью?

    vaut
    @vaut
    Предлагаю решить уравнение
    11*x=13
    И почитать что такое рациональные числа.
    Ответ написан
    2 комментария
  • Почему не получается объединить коммиты?

    sergey-kuznetsov
    @sergey-kuznetsov Куратор тега Git
    Автоматизатор
    Вы сами процитировали причину:

    Нельзя начать пересборку ветки (cannot rebase), пока есть незакоммиченные изменения в рабочем каталоге (You have unstaged changes).

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

    Поэтому гит предлагает закоммитить или спрятать несохраненное (Please commit or stash them)

    Команда git stash по факту тоже создает коммит, но он не привязан ни к какой ветке и рабочий каталог становится чистым. Затем вы делаете свои нехорошие дела и восстанавливаете stash обратно в рабочий каталог.
    Ответ написан
    Комментировать
  • Переписать грамотнее и с помощью Laravel реально ли и каким лучше образом?

    vhood
    @vhood
    Не забывайте отмечать решения
    Выводить HTML через echo точно не правильно, изначально PHP полюбили как раз за то, что можно закрыть PHP тег ?> и писать чистый HTML, можно посреди HTML открыть PHP тег <?php и воспользоваться языком, например вывести HTML в цикле (опять же, закрыв тег после начала цикла), или использовать переменную как значение, или выводить HTML по условию.

    В Laravel используется шаблонизатор Blade, но если есть ощущение, что Laravel изучать еще рано, можно через composer поставить какой-нибудь самостоятельный шаблонизатор (искать не сложно) и научиться пользоваться им.

    тут всякие визуальные уточнения страницы; форма, css специфика для страницы
    css стоит писать отдельно и подключать как файл/файлы, для формы будет отдельный шаблон

    тут всякие оперативные реакции на действия в браузере требуемые страницей.
    js тоже стоит писать отдельно и подключать как файл/файлы

    Работа с шаблонами - не самое востребованное знание, скорее очень базовое. Стоит так же изучить:
    • Архитектурный паттерн MVC (Model, View, Controller), т.к. его все популярные фреймворки реализуют и с ним так или иначе придется работать
    • Базы данных и SQL. Обязательно нужно уметь проектировать таблицы и индексы, забирать данные из базы и обновлять их
    • Безопасность, или как правильно писать приложения, что-бы их не взломали SQL инъекциями, XSS атаками и т.д.
    • Маршрутизацию. Можно попробовать найти какой-нибудь php-router на github и изучить работу с ним, внедрить в проект

    Таким образом, приложение будет обрабатывать запрос через некий роутер, посылать его в контроллер (буква C из MVC), контроллер запросит данные в какой-нибудь модели (M), отправит их в шаблон некого шаблонизатора и вернет с его помощью готовый HTML.

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

    Так же добавлю, что первую работу лично я нашел без знания фреймворков, но хорошее знание языка и баз данных, а так же знания HTML, CSS и базовые знания JS - обязательно. Да и без фронтенда динамичный сайт не сделать, но начать изучение фронтенда лучше всего с изучения чистого javascript, т.к. знание языка важнее и открывает правильную дорогу дальше. А вот на каком этапе изучения останавливаться и куда больше делать упор - решать Вам.
    Ответ написан
    1 комментарий
  • Почему эффект применяется только к одной кнопке из трёх?

    https://codepen.io/kusakinvova/pen/ExJRvqO
    вот как я решил проблему

    document.querySelectorAll('.btn_clip').forEach(button => {
        button.addEventListener('mousemove', e => {
            // Получаем координаты курсора относительно кнопки
            const rect = button.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
    
            // Устанавливаем переменные для текущей кнопки
            button.style.setProperty('--x', x + 'px');
            button.style.setProperty('--y', y + 'px');
        });
    });
    Ответ написан
    8 комментариев
  • Какой актуальный стек верстки 2024?

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

    Так вы будете на острие ножа, и сможете делать то, что обычная публика не умеет, сделаете хорошее портфолио и вас чаще будут брать на интересные и дорогие задачи. А Tailwind, Bootstrap и т.д.... каждая обезьяна может научиться использовать...
    Ответ написан
    2 комментария