• Как написать стили для блоков, что прилипают к разным сторонам контейнера?

    Aetae
    @Aetae
    Тлен
    У flex есть свойство order.
    Просто сделай что-то типа:
    block:nth-child(odd) block__element {
      order: 2
    }

    И оно само выстроится с периодичностью.
    Ответ написан
    Комментировать
  • Как перебрать селекторы через for?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Поменять кавычки с " на `, которые включают режим шаблонных строк.

    Но ващет проще document.querySelectorAll и перебрать уже как массив, без таких извращений.
    Ответ написан
    2 комментария
  • Нужно сгенерировать массив объектов и дать каждому уникальный id, как?

    yarkov
    @yarkov Куратор тега JavaScript
    Помог ответ? Отметь решением.
    Array
      .from({ length: 25 })
      .map((item, index) => ({ id: index + 1 }));
    
    /** 
     * [
     *   {
     *       "id": 1
     *   },
     *   ...
     *   {
     *        "id": 25
     *    }
     * ] 
     */
    Ответ написан
    2 комментария
  • Как изменить прозрачность для background-color?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Как вариант - использование переменной:
    $color-base: 64, 126, 201;
    
    .element {
      background-color: rgba($color-base, 1);
    }
    
    .element-transparent {
      background-color: rgba($color-base, 0.3);
    }

    Чуть сложнее:
    $color-base: 64, 126, 201;
    $alpha-1: 1;
    $alpha-2: 0.3;
    
    .element {
      background-color: rgba($color-base, $alpha-1);
    }
    
    .element-transparent {
      background-color: rgba($color-base, $alpha-2);
    }
    Ответ написан
    Комментировать
  • Почему добавление в цикле работает через insertAdjacentHTML, но не работает через append?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    получается так, что кнопка добавляется только к последней карточке
    На самом деле нет, кнопка последовательно добавляется к каждой карточке. Но поскольку вы используете один и тот же элемент, а не создаёте в цикле отдельную кнопку для каждой карточки, она при каждой последующей вставке переносится на новое место и в итоге остаётся у последней карточки.

    let panesList = document.querySelectorAll('.pane');
    for (let pane of panesList) {
        let button = document.createElement('button');
        button.classList.add('remove-button');
        button.textContent = '[X]';
    
        pane.append(button);
    }
    Ответ написан
    1 комментарий
  • Какой PHP фреймворк можно использовать с VueJs?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Любой бекенд подойдёт, вне зависимости, пыха это, питон и т.п.

    В данных реалиях, у пыхи это laravel, как самый популярный из фреймворков, по моему мнению и мнению знакомых пыхарей.

    Берёте laravel, пишите api. Беретё nuxt(2-3), резим SSR, готово.
    Ответ написан
    Комментировать
  • Как сформировать верстку сотами, и расположить элементы по овальной окружности?

    Stalker_RED
    @Stalker_RED
    Отдельный шестиугольник можно сделать при помощи clip-path, но думаю проще сразу всю схему отрисовать в svg, чем возиться с их позиционированием.
    Ответ написан
    Комментировать
  • Как сделать, чтобы сайт закрывался или становилась белая страница при открытии консоли?

    @alexalexes
    Никак. Любая составляющая сайта, переданная на сторону клиента, может использоваться и изучаться клиентом как угодно и какими угодно инструментами (кто сказал, что на другой стороне будет браузер?), как в полезном ключе, так и в зловредном.
    Краеугольным вопросом безопасности вашего ресурса является не противодействие анализу той части, которая получает клиент, а сделать так, чтобы серверная часть не реагировала на запросы, которые не соответствуют бизнес-логике клиентской части (или считала ошибкой, выводя соответствующее сообщение).
    На стороне сервера нужно проверять валидность данных, получаемых от клиента, как по правам доступа (имеет ли право клиент совершать определенное действие), так и по содержанию (данные, приводящие к изменениям, не будут ли приводить к противоречивому состоянию базы?).
    Ответ написан
    1 комментарий
  • Не давно начала изучать VUE, какие компоненты правильные?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Правильно так, как вам удобно.

    А ещё, чтобы научиться делать правильно, надо сперва сделать неправильно.

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

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

    Когда решите таким образом задач сорок-пятьдесят, начнёт приходить понимание, как делать правильно.
    Ответ написан
    Комментировать
  • Как сделать знак плюс в точном центре круга на css?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Сделайте плюс не шрифтом, а блоком из горизонтальной и вертикальной линий, потому что у шрифтов полно свойств:
    649b0f0b858da350988706.jpeg
    Чему к примеру равна горизонтальная линия вашего шрифтового плюса при размере 35px? Если у вас размер блока 45px, то линия должна быть так же с нечетным размером ровно 1px или 3px, или 5px в любом другом случае (1.2px, 3.6px, 4px) браузер начнет смещать ваш плюс вверх и вниз, что вы и наблюдаете.

    Если же блок будет с четным значением, например 44px, тогда, чтобы плюс стал по центру у него должен быть размер 2px,4px и т.д..

    Шрифты для такой задачи не подходят, тем более с изменением шрифта изменится и его центр.
    Ответ написан
    4 комментария
  • Как сделать горизонтальный scroll?

    Deita
    @Deita
    Можно ли это написать на голом JavaScript'е

    Можно:
    var vwWidth = window.innerWidth;
    
    var controller = new ScrollMagic.Controller();
    
    //for horizontal scrolling
    var horizontalSlide = new TimelineMax()
      .to(".div2", 0.2,   {x: 0, ease: Power1.easeOut}, )
      .to(".div2", 1,   {x: -vwWidth, ease: Power1.easeOut}, )	
      .to(".div2", 0.2,   {x: -vwWidth, ease: Power1.easeOut}, )
      .to(".div2", 1,   {x: -2*vwWidth, ease: Power1.easeOut}, )
      .to(".div2", 0.2,   {x: -2*vwWidth, ease: Power1.easeOut}, )
    
    new ScrollMagic.Scene({
      triggerElement: ".div2",
      duration: "350%",
      offset: 0,
      triggerHook: -0.02
    })
    .setPin('.div2')
    .setTween(horizontalSlide)
    .addTo(controller)


    https://codepen.io/vishwakarma02/pen/QxYJQw
    Ответ написан
    3 комментария
  • Как заменить в массиве число нацело делящихся на 3 строкой "пропускам 3 "?

    liaFcipE
    @liaFcipE
    [1,2,3,6,4,12,3,8,15,55,54,4].map(v => v % 3 ? v : "skip 3")
    // (12) [1, 2, 'skip 3', 'skip 3', 4, 'skip 3', 'skip 3', 8, 'skip 3', 55, 'skip 3', 4]
    Ответ написан
    Комментировать
  • Как получить название классов из css файла в js?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    console.log(document.styleSheets);
    console.log(document.styleSheets[0].cssRules[0].selectorText);
    Ответ написан
    Комментировать
  • Как обратиться к конкретному элементу, полученному с помощью getElementsByName?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Да всё работает: https://codepen.io/alexey-m-ukolov/pen/RwqGRKj?edi...

    В чём-то другом у вас ошибка.
    Ответ написан
    Комментировать
  • Как работает finally и then в Promise?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Смотря о каком коде вы говорите. response.json() будет ждать окончания запроса, setCart будет ждать json, setPreloader будет ждать их обоих или падения.
    Но если вы что-то напишете вне then, после fetch, оно ничего ждать не будет (если бы так работало, то зачем вообще нужен был бы then?).
    Ответ написан
  • Как называется такой синтаксис в JS?

    Get-Web
    @Get-Web Куратор тега JavaScript
    Front-End Developer
    Ответ написан
    Комментировать
  • Замыкания не существует?

    Stalker_RED
    @Stalker_RED
    Я немного добавил наглядности
    function one() {
      const oneVar = 'Hello!'
      let counter = 0;
      console.log('функция one работает прямо сейчас, в счетчике', counter)
    
      function two() {
        console.log(oneVar, ++counter)
      }
      
      console.log('функция one почти завершилась, в счетчике все еще ', counter);
      return two
    }
    
    const three = one();
    console.log('функция one точно завершилась, даже return сработал');
    console.log('в переменной three сейчас функция two()');
    console.log(three);
    
    
    three();
    three();
    three();
    console.log('обожемой, мы видим как менялась переменная в уже завершенной функции. чераная магия? нет - это называется замыкание!');

    выхлоп:
    "функция one работает прямо сейчас, в счетчике", 0
    "функция one почти завершилась, в счетчике все еще ", 0
    "функция one точно завершилась, даже return сработал"
    "в переменной three сейчас функция two()"
    function two() {
      console.log(oneVar, ++counter)
    }
    "Hello!", 1
    "Hello!", 2
    "Hello!", 3
    "обожемой, мы видим как менялась переменная в уже завершенной функции. чераная магия? нет - это называется замыкание!"
    Ответ написан
    Комментировать
  • Замыкания не существует?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    Функция one() определяет переменную oneVar. Затем в ней определяется функция two(), в лексическое окружение которой попадает oneVar. В конце своей работы функция one() возвращает в качестве результата функцию two().
    В переменную three записывается результат работы one(), то есть функция two(). Несмотря на то, что one() уже закончила работу, переменная oneVar сохраняется в лексическом окружении функции two().
    При вызове three() фактически вызывается two(), в которой переменная oneVar доступна для использования.
    Ответ написан
  • Связаны ли JS-селекторы в функциях поиска по элементам с поддержкой их в CSS?

    modelair
    @modelair
    unsocial
    это не js-селекторы, а css-селекторы, поэтому - да, будет работать как предполагается.
    почитайте документацию к querySelector
    Ответ написан
    Комментировать
  • Изучила принцип верстки БЭМ, не уверенна что правильно выполнила?

    delphinpro
    @delphinpro
    frontend developer
    Кнопка - это отдельный блок
    Поиск - блок

    <header class="header">
        <div class="header__btn">
            <button class="btn">Предложить новость</button>
        </div>
        <div class="header__search search">
            <a class="search__number" href="tel:+73513651711">8 (3513) 65-17-11</a>
            <img class="search__img" src="img/search.svg" alt="">
        </div>
    </header>


    В навигации то же самое
    Кроме того внутри UL могут быть только LI
    OPTION не стилизуются, им не нужен класс

    <div class="nav">
        <ul class="nav__menu menu">
            <li class="menu__item"><a href="">Новости</a></li>
            <li class="menu__item"><a href="">Телепроекты</a></li>
            <li class="menu__item"><a href="">Реклама</a></li>
            <li class="menu__item">
                <select name="">
                    <option value="">Онлайн</option>
                    <option value="1">new</option>
                    <option value="2">new</option>
                </select>
            </li>
            <li class="menu__item"><a href="">Программа передач</a></li>
            <li class="menu__item">
                <select name="">
                    <option value="">Ещё</option>
                    <option value="1">new</option>
                    <option value="2">new</option>
                </select>
            </li>
        </ul>
    
        <div class="nav__contacts contacts"
            <p class="contacts__title">Подписывайтесь на нас:</p>
            <ul class="contacts__list">
                <li class="contacts__item"><img src="img/Facebook - Negative.png" alt=""></li>
                <li class="contacts__item"><img src="img/вк.png" alt=""></li>
                <li class="contacts__item"><img src="img/однокласники.png" alt=""></li>
                <li class="contacts__item"><img src="img/inst.svg" alt=""></li>
                <li class="contacts__item"><img src="img/YouTube - Negative.png" alt=""></li>
            </ul>
        </div>
    </div>


    Подобных имен файлов лучше избегать img/YouTube - Negative.png. Используйте для имен файлов только символы латинского алфавита в нижнем регистре, цифры и символы _-, и ничего другого, включая пробелы.
    Ответ написан
    Комментировать