Ответы пользователя Сергей delphinpro

Как заставить css-variables перевычисляться?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

CSS переменные в оригинале называются "пользовательские свойства" (custom properties). То есть по поведению это такие же свойства как и любые другие, вроде width, height и т.п. за исключением того, что они используются в качестве значений. Для них действуют те же правила наследования. и если --bg определен в родителе, и не переопределен в дочке, то будет использоваться значение из родителя.

Проще говоря, сделать то, что вы хотите - не получится. У меня как-то раз тоже возникало такое желание, но увы.

Ответ написан 23 сент.

2 комментария

Как менять картинки у карточки в списке товаров?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

нужно взять любой слайдер.
по умолчанию на мобильных он будет работать как слайдер - перелистывать слайды-картинки
на десктопе поверх всего слайдера растягиваете блок с dots pagination (точки для листания слайдов). стилизуете их, делая полностью прозрачными. и добавляете к ним обработчики наведения мышки. в обработчике определяете точку на которую навелись и переключаете слайдер к нужному слайду.

если говорить о swiper то вот пример hover-навигации Как менять слайд SwiperJS при наведении?

Ответ написан 22 сент.

Комментировать

Как правильно сочетать теги article, section и заголовки h1-h6?

Сергей delphinpro @delphinpro Куратор тега HTML

frontend developer

У вас вся страница посвящена одной теме - экстремум функции. Семантически это одна статья. Значит должен быть один тег article (либо полное его отсутствие) соответственно один тег h1.
При этом если вы расположите h1 вне article и еще один внутри, это будет рассмотрено как нарушение семантики.

Использовать несколько заголовков первого уровня допустимо, например на страницах со списками статей (лента блога и т.п.)

<body>
<!-- никаких больше заголовков вне article! -->
<article>
  <h1>статья 1</h1>
</article>
<article>
  <h1>статья 2</h1>
</article>
<article>
  <h1>статья 3</h1>
</article>
</body>

Если хочется разбить статью на отдельные части, то в вашем случае, наверное, можно так

<article>
  <h1>Экстремум функции нескольких переменных</h1>
  <p>Вводные слова, общая постановка задачи и так далее.</p>
</article>

<article>
  <h1>Экстремум функции двух переменных</h1>
  <p>Теория, которая касается лишь функций двух переменных.</p>
</article>

<article>
  <h1>Экстремум функции n переменных (общий случай)</h1>
  <p>Общая теория и формулы для функций, с числом переменных большим двух.</p>
</article>

<article>
   <header>
     <h1>Задача №1</h1>
   </header>
   <section>
     <h2>Условие</h2>
     <p>Тут условие задачи.</p>
   </section>
   <section>
     <h2>Решение</h2>
     <p>Тут решение задачи, а если в нём нужны заголовки - то они начнутся с h2.</p>
   </section>
   <section>
     <h2>Ответ</h2>
     <p>Тут ответ задачи.</p>
   </section>
</article>

Ответ написан 21 сент.

2 комментария

Какой клиент выбрать для анализа Git?

Сергей delphinpro @delphinpro

frontend developer

SourceTree

PS вам сейчас просто накидают список клиентов. А между тем этот список легко загуглить и самому
Вот неплохая подборка https://git-scm.com/downloads/guis

Ответ написан 16 сент.

Комментировать

Почему input в состоянии webkit-autofill искажает бордер?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

у меня не отображает.

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

Ответ написан 04 сент.

Комментировать

Как сделать плавную анимацию dots?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

https://codepen.io/delphinpro/pen/YPydwKy

Ответ написан 03 сент.

2 комментария

Как убрать цветную кляксу в центре страницы яндекс музыки?

Сергей delphinpro @delphinpro

frontend developer

Если у вас windows, попробуйте приложение https://apps.microsoft.com/detail/9NBLGGH0CB6D

Ответ написан 01 сент.

Комментировать

Как найти элемент с высотой (clientHeight) более определенного значения?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Это и есть "в лоб"

const els = Array.form(document.querySelectorAll('.el-class')).filter(el => el.clientHeight > 300);
console.log(els);

Ответ написан 29 авг.

2 комментария

Как заблокировать кнопку после нажатия на JS?

Сергей delphinpro @delphinpro Куратор тега JavaScript

frontend developer

document.querySelectorAll('.btn').forEach(btn => {
   btn.addEventListener('click', function () {  
      btn.disabled = true;
      btn.textContent = 'Идет поиск. Ждите пожалуйста.'
   });
});

Ответ написан 27 авг.

3 комментария

Html верстка по flexbox и БЭМ?

Сергей delphinpro @delphinpro

frontend developer

Без привязки к макету у вас там просто блоки по сути.
Но, допустим вот такая структура:

<div class="wrapper">
    <div class="header"> <!-- блок header -->
        <div class="header__content"> <!-- элемент блока header -->
            <div class="container"></div>
        </div>
    </div>
    <div class="main">
        <div class="container"></div>
    </div>
    <div class="footer">
        <div class="container">
            <div class="footer__logo"></div>
            <div class="footer__main"></div>
            <div class="footer__links"></div>
        </div>
    </div>
</div>

wrapper - самостоятельный блок, может иметь такие стили:

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

<div class="wrapper">
    <div class="header">  ... </div>
    <div class="wrapper__main main"> <-- Блок main и одновременно элемент враппера -->
        <div class="container"></div>
    </div>
    <div class="footer"> ... </div>
</div>

.wrapper__main {
  flex-grow: 1;
}

Дальше блок footer - тоже вполне себе самостоятельный.
Он в свою очередь может иметь внутренние элементы

<div class="footer">
    <div class="container">
        <div class="footer__logo"></div>
        <div class="footer__main"></div>
        <div class="footer__links"></div>
    </div>
</div>

Обратите внимание, что "в середине" блока вклинился другой блок - container. Это вполне допустимо! Вложенность БЭМ не обязательно должна соответствовать вложенности DOM.

Если вам здесь нужно для container добавить какие-то другие стили в контектсе footer, то делаете его элементом footer. Например, нужно выстроить элементы подвала в ряд:

<div class="footer">
    <div class="footer__container container">
        <div class="footer__logo"></div>
        <div class="footer__main"></div>
        <div class="footer__links"></div>
    </div>
</div>

// общие стили контейнера (например центрирование)
.container {
  max-width: 1000px;
  margin-inline: auto;
}
// стили контейнера в подвале
.footer__container {
  display: flex;
  justify-content: space-between;
}

И последнее: не нужно связывать flexbox и БЭМ =). Первое - это технология раскладки элементов, второе - это система именования css классов для имитации модульности, избежания конфликтов и упрощения поддержки.

Ответ написан 25 авг.

Комментировать

Как правильно именовать стили в Figma?

Сергей delphinpro @delphinpro

frontend developer

Как верстальщик ваших макетов скажу, - пофиг.
Главное чтобы именование было, чтобы я видел что это именно тот цвет (шрифт и т.д.), а не сравниал каждый раз пипеткой

Ответ написан 15 авг.

1 комментарий

Как открыть скомпилированный Vue проект локально?

Сергей delphinpro @delphinpro

frontend developer

можно запустить браузер без контроля CORS https://www.junian.net/dev/google-chrome-disable-cors/
но скорее всего, проект всё равно не будет работать.

Ответ написан 22 июл.

Комментировать

Почему так работает usort?

Сергей delphinpro @delphinpro Куратор тега PHP

frontend developer

это не usort. Это незнание языка

вариант 1

$order = 'price';
usort($filtered_items, function($a, $b) use ($order){
  return ($a[$order] - $b[$order]);
});

вариант 2

$order = 'price';
usort($filtered_items, fn($a, $b) => ($a[$order] - $b[$order]));

Ответ написан 17 июл.

5 комментариев

Как узнать номер акк вк не взламывая?

Сергей delphinpro @delphinpro

frontend developer

Поищите ответ здесь – https://dev.vk.com/ru/reference

Ответ написан 15 июл.

Комментировать

Как сделать, чтобы свойства класса прописывались не DOM-узлу, а классу, создаваемому в JS?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

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

// добавляем стиль
order_active.style.flex = '0 1' + choisenitemwidth + 'px';

// обнуляем
order_active.style.flex = '';

При этом стиль не сбросится полностью – он станет таким, каким прописан в css

Ответ написан 14 июл.

Комментировать

Какой тип и формат жёсткого диска производительный?

Сергей delphinpro @delphinpro

frontend developer

Если не планируете переносить на другие машины, выбирайте родной формат - VDI
VMDK - это формат WMware, если вдруг планируете переехать в будущем - самое то. Формат хорошо поддерживается, примерно как и нативный.
VHD - совместим с HyperV, но чуть медленнее VDI.
Про остальные не знаю.

Ответ написан 29 июн.

2 комментария

Как выровнить в колонку фотки как на макете?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

.blog-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
}
.blog__card:first-child {
  grid-row: span 3;
}

Ответ написан 28 июн.

1 комментарий

Как сделать чтобы блок с border-dashed постепенно заполнялся border-solid?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

svg stroke-dasharray https://developer.mozilla.org/en-US/docs/Web/SVG/R...

Ответ написан 28 июн.

Комментировать

Как оптимизировать загрузку и парсинг больших JS файлов со стороны браузера/клиента?

Сергей delphinpro @delphinpro Куратор тега JavaScript

frontend developer

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

Сложить список файлов в базу данных.
Загружать небольшое количество, ну скажем 50-100 изображений.
По мере прокрутки страницы подгружать еще сотню следующих. Предыдущие удалять. При прокрутке в обратную сторону подгружать предыдущие, а ушедшие из зоны видимости удалять.
И никакой нагрузки на браузер не будет, и визуально будет казаться, что все фото присутствуют на странице.

Ответ написан 28 июн.

1 комментарий

Как заставить работать вместе react с laravel в openserver 6?

Сергей delphinpro @delphinpro Куратор тега Laravel

frontend developer

export default defineConfig({
    // ...
    server : {
        cors: true,
    },
});

Ответ написан 22 июн.

1 комментарий

Войдите на сайт