Задать вопрос
  • Как сделать картинку в flexbox сжимаемой с соблюдением пропорций по ширине и высоте?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Просто добавить картинке object-fit: contain и она будет рисоваться по центру своей области, в правильных пропорциях, целиком.

    Ну или контейнеру выравнивание по центру align-items: center (или картинке align-self:center), размеры картинки убрать и задать aspect-ratio: 1;
    Ответ написан
    Комментировать
  • Как сделать всплывающие окно с "ножной" на css?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    sqrt(10^2 + 20^2) = 22,36 != 20

    Исходя из этого, можно взять квадрат со стороной 22 пикселя, расплющить его в ромб (transform: skew(), градус посчитать или подобрать), повернуть на 45 градусов (transform:rotate()) и абсолютом прибить в нужное место.

    Кроме того, можно использовать варианты с SVG или clip-path.
    Ответ написан
    1 комментарий
  • Как обратится к тексту без тегов?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    WARNING! Ниже приведен чистейший говнокод! Нужно устранять источник проблемы, а не последствия.

    .dgwt-wcas-sf-wrapp { opacity: 0; font-size: 0; line-height: 0; }
    .dgwt-wcas-ico-magnifier { opacity: 1; }
    .dgwt-wcas-search-input { opacity: 1; font-size: 16px; line-height: 1; }


    UPD

    Нет. так не сработает...

    Нужно не прозрачностью скрыть, а прозрачным цветом..

    .dgwt-wcas-sf-wrapp { color: transparent; font-size: 0; line-height: 0; }
    .dgwt-wcas-ico-magnifier { color: black; }
    .dgwt-wcas-search-input { color: black; font-size: 16px; line-height: 1; }


    UPD2
    Хотя нафига манипулировать цветом, если font-size:0 и так сплющит текст до невидимого...
    Ответ написан
    2 комментария
  • Как правильно записать на php 2 УРЛ в одном условии?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    Полагаю что так

    if (CSite::InDir('/sozdanie-art-obektov-installyaczij-i-maf/')
        && CSite::InDir('/brif-art-obekt/')
    ) {}


    PS. Не знаю логики, но на всякий случай отмечу, что условие && подразумевает одновременное наличие обоих фрагментов в url
    Ответ написан
  • Как правильно продублировать яндекс карту?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    function init(id) {
      // ...
      let myMap = new ymaps.Map(id, {
          center: [55.921828130219836, 92.31378245197494],
          zoom: 10,
          controls: []
      }, {
      // ...
      return myMap;
    }
    
    ymaps.ready(function(){
      let map1 = init('map1');
      let map2 = init('map2');
    });
    Ответ написан
    Комментировать
  • Фреймворки, действительно ли важно?

    delphinpro
    @delphinpro
    frontend developer
    Почему это не имеет ценности?

    Для кого? Для вас или для заказчика?

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

    Как можно написать этот код?
    1, Как вы - "я крут, я придумал свой фреймворк"
    2, Взять уже готовый slim/laravel/symfony

    Какая разница, спросите вы?
    Для вас – никакой. ВЫ сделали проект и забыли про него. А Клиент потом захочент внедрить новые возможности.

    У него опять будут варианты:

    1, Искать вас для доработок, потому что вы делали систему, и хорошо ее знаете (а ваша доступность может быть неприемлема).
    2, Нанять любого спеца по slim/laravel/symfony.

    И вот тут становится очевидным преимущество использования популярных решений.
    Ответ написан
    5 комментариев
  • Как работает ф-ция url в laravel?

    delphinpro
    @delphinpro Куратор тега Laravel
    frontend developer
    url() https://laravel.com/docs/10.x/helpers#method-url
    Функция url генерирует полный URL для указанного пути:

    $url = url('user/profile');
     
    $url = url('user/profile', [1]);

    Если путь не указан, возвращается экземпляр Illuminate\Routing\UrlGenerator:

    $current = url()->current();
     
    $full = url()->full();
     
    $previous = url()->previous();
    Ответ написан
    Комментировать
  • Как правильно подружить Vue и php?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    а vue выступает сугубо в роли небольших компонентов на разных страницах

    Исходя из этого я могу предположить, что подобные виджетики скорее всего не нуждаются в серверном рендере, а значит все довольно просто.
    Настраиваем любой сборщик (webpack, vite). На входе будет какой-нибудь main.js, на выходе готовый файл (по умолчанию), пара файлов (main и vendor, если настроили разделение) или больше, в зависимости от хитрожопости настроек. Вот эти файлы и подключаем (соблюдая порядок, если их несколько, например vendor перед main)

    В main можно писать весь фронт сайта, или модульно импортировать.
    Туда же подключается вью и компоненты ваших виджетов

    import Vue from 'vue';
    import Calculator from './calc/Calculator.vue';


    На странице, где нужно вставить компонент пишем нечто вроде

    <div class="calc"></div>

    Сюда будет рендериться компонент в рантайме. Например так (в том же main.js)

    document.querySelectorAll('.calc').forEach(el => {
        new Vue({
            el    : el,
            render: h => h(Calculator, {
                props: {
                   /// Пропсы, если надо
                },
            }),
        });
    });


    То есть каждый виджет в этом случае будет независимым vue приложением.

    Если нужно передавать в компоненты какие-то данные, то можно научить компонент самому их запрашивать. Но тут придется отдельные роуты создавать. Или прямо на страницу в head выплевывать их в виде json

    <script>window.calcData = <?= json_encode($calcData) ?>;</script>


    а в компоненте по mounted их доставать

    mounted() {
      const d = window.calcData;
    }
    Ответ написан
    1 комментарий
  • Как сделать overflow hidden для body по нажатию?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    // Добавить
    document.body.style.overflow = 'hidden';
    
    // Убрать
    document.body.style.overflow = '';
    Ответ написан
    1 комментарий
  • Как изменить дочерний класс через другой дочерний класс?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    ну если именно на CSS, то так

    .blog-category:has(> .current-cat) > .cat-item-all {
      background:red;
    }


    Однако пока еще не работает в FireFox
    Ответ написан
    1 комментарий
  • Как установить промежуток времени?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    isAfter возвращает булево значение. Да/Нет.
    const time1 = moment(now, 'HH:mm').isAfter('08:00'); // текущее время больше 8
    const time2 = moment(now, 'HH:mm').isBefore('14:00');// текущее время меньше 14
    if (time1 && time2) { // Если оба условия совпали, то магаз открыт
       console.log(now);
    }
    Ответ написан
  • Как заменить два параметра через replace?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Комментировать
  • Как Laravel «понимает» аутентифицирован пользователь или нет?

    delphinpro
    @delphinpro Куратор тега Laravel
    frontend developer
    В самой сессии хранится идентификатор залогиненного пользователя.

    643d31c6beb10205163174.png

    Для гостей этот идентификатор отсутствует
    Ответ написан
    1 комментарий
  • Как исправить большой отступ между значениями на графике?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Вероятно вам нужны мульти-оси с разными скейлами для каждой оси.
    https://www.chartjs.org/docs/latest/samples/line/m...
    Ответ написан
    Комментировать
  • Laravel Relationships, как получить запись связывания?

    delphinpro
    @delphinpro Куратор тега Laravel
    frontend developer
    Если хотите меньше писать, то называйте таблицы правильно.
    Связующие таблицы состоят из названий связываемых таблиц в единственном числе в алфавитном порядке.

    У вас она должна называться category_post и содержать минимум два столбика unsignedBigInteger
    post_id | category_id

    Модели должны быть названы в единственном числе Category и Post

    Отношения тоже следует называть соответственно. Тут интуитивно просто: если связь ко многим – множественное число (для отношений hasMany, belongsToMany), иначе единственное (для отношений hasOne, belongsTo).

    Методы всегда называются в camelCase. Первая буква маленькая.

    Только тогда у вас будет работать вся магия ларавел по умолчанию, без дополнительных описаний. Например, не нужно будет указывать таблицу в модели (protected $table = 'categories';)

    -------

    Например, Пользователь и Пост. У каждого пользователя может быть множество постов, но каждый пост принадлежит единственному пользователю. Тогда мы можем описать эту связь так (связь будет один-ко-многим)

    class User {
      public function posts(): HasMany {
        return $this->hasMany(Post::class); // юзер->имеетМного(Постов)
      }
    }
    class Post {
      public function user(): BelongsTo {
        return $this->belongsTo(User::class); // пост->относитсяК(Юзеру)
      }
    }
    
    // Получение данных
    
    foreach ($user->posts as $post) {
       // Все посты пользователя
    }
    
    $post->user->name; // Имя пользователя, которому принадлежит этот пост.
    
    // Добавление постов
    
    $user->posts()->create([ 
      'title' => 'Title of post',
      'content' => 'Long content',
      // id юзера в такой записи указывать не нужно, он будет проставлен автоматически.
    ]);


    ---------

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

    class Post extends Model
    {
        public function categories(): BelongsToMany
        {
          return $this->belongsToMany(Category::class); // пост->относитсяКоМногим(Категориям)
        }
    }
    
    class Category extends Model
    {
        public function posts(): BelongsToMany
        {
          return $this->belongsToMany(Post::class); // категория->относитсяКоМногим(Постам)
        }
    }


    Это всё, что нужно для связи.

    Получить все посты из категории

    foreach ($category->posts as $post) {
    
    }


    C сортировкой

    $posts = $category->posts()->orderBy('created_at')->get();


    Для создания есть те же методы create(), save().
    Кроме того, есть возможность присоединить уже существующую модель.

    $post = Post::create([...]); // Создали пост, он никому не принадлежит
    $category->attach($post->id); // Теперь он связан с категорией


    Есть метод sync() для синхронизации пачки моделей.

    Всё это очень подробно написано в официальной документации.
    Я по сути просто сделал небольшую выжимку оттуда.
    https://laravel.com/docs/10.x/eloquent-relationships
    Ответ написан
    1 комментарий
  • Поиск точного вхождения?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Ответ написан
    Комментировать
  • Как сделать таймер без глобальных переменных?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Модуль Counter.js
    export default class {
        #enabled = false;
        #timer = null;
    
        #elHours;
        #elMinutes;
        #elSeconds;
    
        #hours = 0;
        #minutes = 0;
        #seconds = 0;
        
        constructor(el) {
            this.#elHours = el.querySelector('.hours');
            this.#elMinutes = el.querySelector('.minutes');
            this.#elSeconds = el.querySelector('.seconds');
            document.addEventListener('keydown', this.startBySpace.bind(this));
        }
        
        startBySpace() {
            if (e.code === 'Space') {
                if (this.#enabled) {
                    this.#enabled = false;
                    clearInterval(this.#timer);
                } else {
                    this.#enabled = true
                    this.#timer = setInterval(() => this.tick(), 1000);
                }
            }
        }
        
        tick() {
            this.#seconds++;
            if (this.#seconds === 60) {
                this.#seconds = 0;
                this.#minutes++;
                if (this.#minutes === 60) {
                    this.#minutes = 0;
                    this.#hours++;
                }
            }
            this.render();
        }
        
        render() {
            elSeconds.innerHTML = this.zero(this.#seconds);
            elMinutes.innerHTML = this.zero(this.#minutes);
            elHours.innerHTML = this.zero(this.#hours);
        }
        
        zero(number) {
            return number < 10 ? `0${number}` : `${number}`;
        }
    }


    Использование, например в файле main.js

    import Counter from './Counter.js';
    
    document.querySelectorAll('.clocks').forEach(clock => {
        new Counter(clock);
    });
    Ответ написан
  • Как поправить функцию, чтобы она работала после обработки Webpack?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Она не перестает работать. Функция исчезает из глобального пространcтва имен и становится недоступной.
    Можно ее принудительно засунуть в объект window
    window.tabsChanger = function(evt, a) {
        // ...
    }


    <div onclick="tabsChanger">
    </div>


    Но, возможно лучшим вариантом будет навешивать обработчик с помощью addEventListener

    document.querySelector(...)?.addEventListener('change', function(evt){
    
    })
    Ответ написан
    Комментировать
  • Почему не работает :hover?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    643801970bffe545468400.png

    Подсветка намекает на некорректное значение цвета.

    Очевидно перепутали букву l с цифрой 1
    Ответ написан
    1 комментарий
  • Как получить в php данные отправленные через fetch?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    это такой же "POST" как если использовать форму для отправки данных?

    Разумеется. Какой он еще может быть? =)
    Не имеет значения, как именно был инициирован запрос – отправкой формы или скриптом.
    Ответ написан
    Комментировать