Задать вопрос
  • Умное количество элементов в сетке GRID?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Так?
    .parent {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(calc(100% / 3 - 10px), 1fr));
      gap: 10px; 
    }

    Ответ написан
    1 комментарий
  • Чем отличается функция от конструктора и где применять то или это?

    К большому моему (личному) сожалению, Javascript - это язык, в котором возможно и разрешено вообще всё. Язык постоянно дополняется из "хотелок" пользователей.

    И вот в один момент разработчики спецификации ECMA-script решили, а давайте мы всё же оправдаем первые 4 буквы в названии языка, а именно "Java", и дадим пользователям сахарок, нарисованный над нашим прототипным наследованием, чтобы они могли везде писать class, extends и implements, как и все остальные ООП-динозавры. И сделали это.

    И с этим решением в наш прекрасный язык пришло понимание конструктора, как метода, создающего экземпляр класса. Конструктор очень сильно помогает с инкапсуляцией. В языках, имеющих настоящий ООП, есть приватные поля, которые не могут быть инициализированы прямым присваиванием в какой-то внешней функции, создающей объект, потому что к ним нет прямого доступа, и для такого придётся писать публичные сеттеры. А это плохо, потому что кто угодно сможет менять при помощи этих сеттеров то состояние, которое менять не надо.
    А вот из конструктора к приватным полям прямой доступ имеется. В Javascript приватные поля появились, кстати, вот буквально совсем недавно.

    class ClassWithPrivate {
      #privateField;
      publicField;
    
      constructor() {
        this.#privateField = "Доступ только изнутри класса";
      }
    }
    
    const instance = new ClassWithPrivate();
    
    instance.publicField = "Доступ извне класса";
    instance.#privateField; // Ошибка: SyntaxError: Private field '#privateField' must be declared in an enclosing class


    Еще одной особенностью конструктора является то, что он активно используется при наследовании (крестится и плюётся через левое плечо от отвращения). Если в дочернем классе не описан свой конструктор, то будет использован конструктор родителя. Это упрощает ООП.

    class Animal {
    
      constructor(name) {
        this.speed = 0;
        this.name = name;
      }
    
      run(speed) {
        this.speed = speed;
        alert(`${this.name} бежит со скоростью ${this.speed}.`);
      }
    
      stop() {
        this.speed = 0;
        alert(`${this.name} стоит.`);
      }
    
    }
    
    class Rabbit extends Animal {
      hide() {
        alert(`${this.name} прячется!`);
      }
    
      stop() {
        super.stop(); // вызываем родительский метод stop
        this.hide(); // и затем hide
      }
    }
    
    let rabbit = new Rabbit("Белый кролик"); // используется конструктор родителя
    
    rabbit.run(5); // Белый кролик бежит со скоростью 5.
    rabbit.stop(); // Белый кролик стоит. Белый кролик прячется!


    Таким образом, если вдарились в классический ООП, пользуйтесь везде конструктором, потому что ООП развивается десятилетиями, люди прошли сквозь страдания и выработали определённые "лучшие практики" для ООП.
    Если же вы используете объекты в основном как очень простые структуры без классической инкапсуляции с приватными полями, не используете наследование, а весь ваш код написан, в основном, на функциях, то делайте, ради бога, что вам вздумается, и отдельная функция-фабрика для создания объектов - это тоже вариант.
    Ответ написан
    Комментировать
  • Как добавить "уголки" правильно?

    @ksnk
    Можно поизвращатся.
    Вставить элемент с нужными границами и вырезать из него все ненужное
    Ну или даже одним элементом
    Ответ написан
    Комментировать
  • Как лучше сверстать элемент?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Ну например через transform и математику

    Или через grid

    Или просто в 3 ряда на flex
    66f1ad16c7bf6011256538.jpeg
    Ответ написан
    1 комментарий
  • Как добавить впереди цифр нули?

    Ni55aN
    @Ni55aN
    String(number).padStart(2,'0')
    согласно последним стандартам
    Ответ написан
    Комментировать
  • Как выбрать элементы удовлетворяющие условию выборки?

    Lynn
    @Lynn
    nginx, js, css
    Поиграть со селекторами nth-child и nth-last-child.

    Для начала попробуем выбрать первый элемент последнего неполного ряда. Селектор :nth-child(3n + 1) выберет нам первые элементы каждого ряда.

    Теперь надо ограничить этот список только последним рядом. Видно что нужный нам элемент всегда первый или второй с конца. Так и запишем :nth-last-child(-n + 2).

    В итоге получили селектор :nth-child(3n + 1):nth-last-child(-n + 2).
    Ну а дальше воспользуемся селектором ~ что бы выбрать все (в вашем случае не больше одного) элементы которые идут после уже выбранного.

    Получается вот такой код:
    li:nth-child(3n + 1):nth-last-child(-n + 2),
    li:nth-child(3n + 1):nth-last-child(-n + 2) ~ li {
      .....
    }


    UPD: если надо что бы последний ряд выбирался всегда, даже если он полный, то надо заменить -n + 2 на -n + 3.

    UPD2: можно пойти немного другим путём и выбирать все элементы после последнего элемента в полном ряду. Получится вот так:
    li:nth-child(3n):nth-last-child(-n + 3) ~ li {
      .....
    }


    Ответ написан
    Комментировать
  • Как верстать блок необычной формы адаптивно?

    sh3mahan
    @sh3mahan
    что-то вроде веб-разработчика
    Как уже в комментариях писали, можно сделать максой с радиальным градиентом, а тень с помощью фильтра drop-shadow(), накинул пример:
    Ответ написан
    Комментировать
  • Как получить промежуточное значение между двух слов?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Без регулярки:
    const url = 'www.site.ru/users/agent/512/list/france';
    const parts = url.split('/');
    const agentIndex = parts.indexOf('agent');
    const value = parts[agentIndex + 1];
    console.log(value); // 512

    с регуляркой:
    const url = 'www.site.ru/users/agent/512/list/france';
    const match = url.match(/\/agent\/(\d+)\/list/);
    const value = match ? match[1] : null;
    console.log(value); // 512
    Ответ написан
    Комментировать
  • Как выровнять шрифт?

    Lynn
    @Lynn
    nginx, js, css
    font-feature-settings: 'lnum' 1;

    668d448a323e8531890739.png
    Ответ написан
    3 комментария
  • Ошибка при импорте фото в Apple Photos. Как исправить?

    @AndrewDram Автор вопроса
    Переформатировал SSD в APFS и импорт завелся.
    Ответ написан
    Комментировать
  • Как сделать такие кнопки на css?

    KataevAS
    @KataevAS
    Пусть это будет как не идеальный пример с пространством для творчества и развития https://codepen.io/KataevAS/pen/zYXpdoV
    Ответ написан
    1 комментарий
  • Как скруглить низ изображения?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Накидал на скорую руку, один из вариантов:

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

    victormayorov
    @victormayorov
    Frontend разработчик
    один из первых результатов из гугла - https://driverjs.com/
    Ответ написан
    Комментировать
  • Сталкивался кто-нибудь, как переделать из querySelector в querySelectorall?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Нужно слайдеры в цикле обрабатывать. Выше уже предложили одно из решений, но в нём есть нюанс - создание функций в цикле достаточно дорого по ресурсам (мы же заботимся о наших пользователях?), благо есть альтернатива, в качестве слушателя события может быть не только функция, но и объект с методом handleEvent:
    class PrevClickListener {
        constructor(track, next) {
            this.track = track;
            this.next = next;
        }
    
        handleEvent() {
            const {track, next} = this;
            next.removeAttribute('disabled');
            track.scrollTo({
                left: track.scrollLeft - track.firstElementChild.offsetWidth,
                behavior: 'smooth',
            });
        }
    }
    
    class NextClickListener {
        constructor(track, prev) {
            this.track = track;
            this.prev = prev;
        }
    
        handleEvent() {
            const {track, prev} = this;
            prev.removeAttribute('disabled');
            track.scrollTo({
                left: track.scrollLeft + track.firstElementChild.offsetWidth,
                behavior: 'smooth',
            });
        }
    }
    
    class TrackScrollListener {
        constructor(track, prev, next) {
            this.track = track;
            this.prev = prev;
            this.next = next;
        }
    
        handleEvent() {
            const {track, next, prev} = this;
            const trackScrollWidth = track.scrollWidth;
            const trackOuterWidth = track.clientWidth;
    
            prev.removeAttribute('disabled');
            next.removeAttribute('disabled');
    
            if (track.scrollLeft <= 0) {
                prev.setAttribute('disabled', '');
            }
    
            if (track.scrollLeft === trackScrollWidth - trackOuterWidth) {
                next.setAttribute('disabled', '');
            }
        }
    }
    
    const sliders = document.querySelectorAll('[data-slider]');
    for (const slider of sliders) {
        const track = slider.querySelector('[data-slider-track]');
        const prev = slider.querySelector('[data-slider-prev]');
        const next = slider.querySelector('[data-slider-next]');
        if (!track || !prev || !next) continue;
    
        prev.addEventListener('click', new PrevClickListener(track, next));
        next.addEventListener('click', new NextClickListener(track, prev));
        track.addEventListener('scroll', new TrackScrollListener(track, prev, next));
    }
    Ответ написан
    Комментировать
  • Как сделать SVG чётче?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Нарисовать надо по пиксельной сетке, иллюстрирую:

    65663114addb4709037114.jpeg
    Если дизайнер изначально об этом не думал, когда рисовал (точки поставлены наобум, либо используется не целочисленная величина обводки) - вы с этим ничего не сделаете.

    На экранах повышенной плотности, к слову, эффект менее заметен (что не особо радует всех остальных).
    Ответ написан
    Комментировать
  • Как вытащить переменнную из подключенного JSON в JS?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    function getData() {
      return new Promise(resolve => {
        $.getJSON("https://www.cbr-xml-daily.ru/daily_json.js", function(data) {
            const kyrs = Math.ceil(100 / data.Valute.KZT.Value * data.Valute.EUR.Value).toString().replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
            resolve(kurs);
        });
      })
    }
    
    function func1(kurs) {
      console.log(kurs);
    }
    
    function func2(kurs) {
      console.log(kurs);
    }
    
    async function go() {
      const kurs = await getData();
      $('#euro').html(kyrs);
      func1(kurs);
      func2(kurs);
    }
    
    go();
    Ответ написан
    Комментировать
  • Как разместить блоки?

    @MrColdCoffee
    web
    HTML:
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>      
        </ul>
    </div>


    Css для второй строки:

    div{
        width:100%;  
    }
    ul{  
        padding:0;
        margin:0;
        width:100%;
        text-align:right;
    }
    li{
        width:50px;
        height:50px;    
        margin:20px 5px;
        padding:5px;
        text-align:center;   
        list-style:none;  
        display:inline-block;
        font-size:25px;  
        line-height:50px;
        font-weight:500;
        background:#fc9090;
        color:#FFF;
      font-family:sans-serif;
    }
    li:nth-child(1){
      width:100px;
      height:100px;
      float:left;
      line-height:100px;
      font-size:50px;
    }


    css для третьей строки:

    div{
        width:100%;  
    }
    ul{  
        padding:0;
        margin:0;
        width:100%;
        text-align:right;
    }
    li{
        width:100px;
        height:100px;    
        margin:20px 5px;
        padding:5px;
        text-align:center;   
        list-style:none;  
        display:inline-block;
        line-height:100px;
        font-size:50px;
        font-weight:500;
        background:#fc9090;
        color:#FFF;
        font-family:sans-serif;
    }
    li:nth-child(1),li:nth-child(2){
      float:left;
    }
    li:nth-child(5){
    display:none;
    }
    Ответ написан
    Комментировать