• Почему не работает ховер для body?

    @smigles
    Селектор A + B применяет стили к B, который находится на том же уровне сразу после A, а у вас B является родителем A.
    Ответ написан
    Комментировать
  • Где можно применить оператор нулевого слияния?

    @entermix
    Это синтаксический сахар

    let user;
    alert(user ?? "Аноним"); // Аноним (user не существует)


    let user = "Иван";
    alert(user ?? "Аноним"); // Иван (user существует)


    let firstName = null;
    let lastName = null;
    let nickName = "Суперкодер";

    // показывает первое значение, которое определено:
    alert(firstName ?? lastName ?? nickName ?? "Аноним"); // Суперкодер


    https://learn.javascript.ru/nullish-coalescing-operator
    Ответ написан
    Комментировать
  • Интересная задача на js?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Решение не верно, т.к. расчитывает только на эти 4 имени. Что, если там будут другие?

    Алгоритм:
    1. составить объект, где ключи – имена, а значения – счётчики, сколько раз имя встретилось.
    2. после полного подсчёта, найти максимум и минимум счётчиков.
    3. собрать имена, у которых счётчик равен максимуму или минимуму. Каждого, теоретически, может оказаться больше одно, поэтому – в массивы имён.
    4. пройти по всем ключам объекта со счётчиками, и исключить имена, которые есть среди макс и мин. – останутся «остальные».


    spoiler
    const mostLeastAndTheRest = names => {
      const dict = names.reduce((acc, name) => ((acc[name] ??= 0), acc[name]++, acc), {});
      // { "Женя": 3, "Иван": 1, "Виктор": 4, "Константин": 1 }
    
      const values = Object.values(dict);
      const max = Math.max(...values);
      const min = Math.min(...values);
    
      const entries = Object.entries(dict);
      const winners = entries.filter(([_, value]) => value === max).map(([key, _]) => key);
      const losers = entries.filter(([_, value]) => value === min).map(([key, _]) => key);
      const rest = Object.keys(dict).filter(name => !winners.includes(name) && !losers.includes(name));
      return { winners, losers, rest };
    };
    
    mostLeastAndTheRest(['Женя', 'Женя', 'Иван', 'Женя', 'Виктор', 'Виктор', 'Константин', 'Виктор', 'Виктор']);
    /*
    {
      "winners": [ "Виктор" ],
      "losers": [ "Иван", "Константин" ],
      "rest": [ "Женя" ]
    }
    */


    Ещё вопрос — особый случай, если всех одинаковое число, то все – «победители» или «проигравшие» ?
    Ответ написан
    1 комментарий
  • Как натянуть frontend (React + JS) на backend (Java + Spring)?

    azerphoenix
    @azerphoenix Куратор тега Java
    Java Software Engineer
    Добрый день.
    Ну натягивать точно ничего не стоит)
    Что касается вашего вопроса, то в backend должен быть написать RESTful сервис (API).
    В отличие от работы с шаблонизаторами (thymeleaf, mustache) фронт-энд является отдельным приложением, которое не связано с бэк-эндом. Т.е. абсолютно все равно на чем написан бэк будь то Spring, Django и т.д.
    Соответственно. когда у вас будет готов REST сервис, то вы можете приступать к разработке фронта.
    Чтобы разработать сервис на Spring можете начать с изучения аннотации @RestController
    https://www.baeldung.com/spring-controller-vs-rest...
    Вы также можете воспользоваться возможностями Spring Data REST, который сам сгенерирует необходимые эндпоинты с поддержкой HATEOAS.
    https://www.baeldung.com/spring-data-rest-intro

    Что касается React, то:
    https://www.youtube.com/watch?v=GNrdg3PzpJQ
    гуглим
    Ответ написан
    Комментировать
  • Срабатывание запроса в Mysql при клике на кнопку, ajax?

    rozhnev
    @rozhnev Куратор тега PHP
    Fullstack programmer, DBA, медленно, дорого
    Почитайте про технологию AJAX
    Ответ написан
    Комментировать
  • Почему у стрелочной функции из объекта контекст виндоу?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    На learn.javascript, например, неплохо написали:
    Стрелка => ничего не привязывает. У функции просто нет this.
    При получении значения this – оно, как обычная переменная, берётся из внешнего лексического окружения.


    В вашем примере с литералом объекта можно добавить для понимания:
    const obj = {
      w() {
        console.log('w', this);
      },
      x: function () {
        console.log('x', this);
      },
      y: this,
      z: () => {
        console.log('z', this);
      },
    };
    
    obj.w(); // obj
    obj.x(); // obj
    console.log('y', obj.y); // Window
    obj.z(); // Window


    Запись литерала объекта не создаёт свой контекст: на момент записи this тот же, что и снаружи:
    const a = this; // Window
    const obj = {
      b: this, // тоже Window 
    }
    
    a === obj.b // true
    Ответ написан
    1 комментарий
  • Что на самом деле делает атрибут type у input?

    profesor08
    @profesor08
    Задает визуальное отображение, задает способ взаимодействия, дает доступ к тем или иным данным, которые соответствуют инпуту, и активируют работу тех или иных атрибутов. По сути это разные элементы, у них разные интерфейсы.

    Например, если у тебя type="text", то выглядеть будет как белый прямоугольник с рамкой, в который ты можешь печать текст и получить этот текст в атрибуте value

    Если у тебя type="number", то выглядеть будет несколько иначе, появятся кнопочки. Вводить можно будет только цифры. Начинают работать дополнительные атрибуты, которые ограничивают диапазон вводимого числа, шаг инкремента при нажатии на стрелки, а так-же появляется дополнительное форматирование.

    Если у тебя type="file", то вводить ты туда ничего не можешь, в value будет имя выбранного файла. А через свойство files можно будет получить доступ к выбранным файлам. Так-же начнет работать атрибут accept.

    И так для каждого типа инпута.

    Так что тут можно сказать лишь то, что сказать что атрибут type задает тип инпута, это как ничего не сказать.

    Преподаватель говорит, что атрибут type у input задаёт тип данных для этого элемента.

    Не он не прав, в зависимости от типа, браузер отображает разные элементы. И взаимодействовать с инпутами надо по разному.

    Но мне кажется, что атрибут type задаёт не тип данных, а лишь формат ввода данных.

    Учитывая выше написанное, это не так.
    Ответ написан
    Комментировать
  • Как сделать переключение слайдов при клике на метку?

    0xD34F
    @0xD34F
    Во-первых, перестаньте заниматься некрофилией - актуальная версия swiper'а седьмая, а не третья.

    Во-вторых.
    swiper.on('slideChange', ({ activeIndex }) => {
      document.querySelectorAll('.points .point').forEach((n, i) => {
        n.classList.toggle('active', i === activeIndex);
      });
    })
    
    document.querySelector('.points').addEventListener('click', ({ target: t }) => {
      if (t.classList.contains('point')) {
        swiper.slideTo([...t.parentNode.children].indexOf(t));
      }
    });

    А вообще,...

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

    pagination: {
      el: '.points',
      bulletClass: 'point',
      bulletActiveClass: 'active',
      renderBullet: (index, className) => `<div class="${className}">${index + 1}</div>`,
      clickable: true,
    },
    Ответ написан
    Комментировать
  • Как добиться 3d эффекта?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    5 комментариев
  • Почему не работает простенький скрипт на js?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    А вызывать свою IIFE кто будет?)

    })(); // в последней строчке
    Ответ написан
    Комментировать
  • Как читать документацию по node.js?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    на официальномй сайте, проматываю чуть ниже и вижу

    fs.writeFile(file, data[, options], callback)#
    History:
    • file <string> | <Buffer> | <URL> | <integer> filename or file descriptor
    • data
      <string> | <Buffer> | <TypedArray> | <DataView> | <Object>

    • options <Object> | <string>
      • encoding <string> | <null> Default: 'utf8'
      • mode <integer> Default: 0o666
      • flag <string> See support of file system flags. Default: 'w'.
      • signal <AbortSignal> allows aborting an in-progress writeFile

    • callback <Function>
      • err <Error> | <AggregateError>



    When file is a filename, asynchronously writes data to the file, replacing the file if it already exists. data can be a string or a buffer.

    When file is a file descriptor, the behavior is similar to calling fs.write() directly (which is recommended). See the notes below on using a file descriptor.

    The encoding option is ignored if data is a buffer.

    If data is a plain object, it must have an own (not inherited) toString function property.
    ...


    откуда следует что:
    первый параметр - это имя файла который нужно создать,
    второй параметр - это данные которые нужно записать,
    третий (необязательный) - это объект с опциями
    а четвертый (или третий если предыдущий параметр не был указан) - это коллбэк

    ЗЫ: уважаемый ТС, я понимаю что вопрос скорее всего был задан из-за вашей невнимательности, но тем не менее ответ вы получили, отметьте его решением)))

    Вот вам способ быстро найти информацию на странице:
    - открыв нужную страницу с большим объемом текста, перемотайте страницу в начала (до оглавления) и затем нажмите комбинацию кнопок CTRL+F (поиск по тексту страницы) и в появившемся окошке вбивайте искомый текст (в данном случае fs.write). После этого нужные пункты оглавления подсветятся желтым и вы легко найдете нужный.
    Ответ написан
    12 комментариев
  • У каких-нибудь сайтов с аниме есть API?

    vabka
    @vabka Куратор тега Веб-разработка
    Ответ легко ищется поисковиком.
    Shikimori: https://shikimori.one/api/doc
    My anime list: https://myanimelist.net/apiconfig/references/api/v2
    AniDB: https://wiki.anidb.net/API
    Ответ написан
    Комментировать
  • Как удалить блок при клике на PHP?

    @karminski
    Senior React.JS Developer
    PHP - это серверный язык программирования, ему фиолетово до ваших кликов. Клики обрабатываются JavaScript. Так вот алгоритм примерно такой:
    1. Ловим клик по "плюсику" JavaScript
    2. Javascript`ом отправляем http-запрос на сервер с указанием какого-либо идентификатора фотографии (например, имя файла)
    3. Сервер обрабатывает запрос, PHP отправляет команду MySQL на удаление нужной строки из БД и возвращает какой-нибудь результат, что строка удалена.
    4. JavaScript обрабатывает результат от PHP и убирает картинку с экрана пользователя.

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

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    @font-face {
      font-family: "Open Sans";
      src: local("Open Sans"), url("../assets/fonts/OpenSans/OpenSans-Regular.woff2") format("woff2");
      font-weight: 400;
      font-style: normal;
    }
    @font-face {
      font-family: "Open Sans";
      src: local("Open Sans"), url("../assets/fonts/OpenSans/OpenSans-Bold.woff2") format("woff2");
      font-weight: 700;
      font-style: normal;
    }
    @font-face {
      font-family: "Open Sans";
      src: local("Open Sans"), url("../assets/fonts/OpenSans/OpenSans-BoldItalic.woff2") format("woff2");
      font-weight: 700;
      font-style: italic;
    }
    Ответ написан
    Комментировать
  • Насколько правильно натягивать верстку через файлы темы?

    @DeniSidorenko
    Более 2 года интегрирую данным методом и все идеально. Клиент получает возможность редактировать без муссора. Главное что бы сами поля были размещены удобно и интуитивно понятно.

    Насколько я помню Page Builder дает более улучшенные возможности, к примеру поменять цвет, размер шрифта, семейство шрифта и.т.п
    Но исходя из практики такое давать клиенту не стоит по двум причинам
    1) Его фантазия за частую угробит весь дизайн
    2) Инслайновые стили не очень любят поисковые системы
    Ответ написан
    5 комментариев
  • Как стилизовать группу в SVG из внешнего CSS?

    Лучше вставить svg в html, присвоить нужным элементам классы или id и стилизовать как обычные элементы
    Ответ написан
    Комментировать
  • Как проверить текст на соответствие шаблону?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    5 комментариев
  • Как сделать чтобы активная страница подсвечивалась?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Достаточно добавить один символ... Или убрать. Вот здесь:

    if (item.innerText === currentPage) {

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

    item.innerText == currentPage

    Или превращайте строку в число явным образом:

    +item.innerText === currentPage
    Ответ написан
    Комментировать
  • Как создать и скачать файл на фронте?

    hzzzzl
    @hzzzzl


    см строчки

    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + text);
    element.setAttribute('download', 'file.csv');
    Ответ написан
    Комментировать
  • Как активировать функцию в jQuery при загрузке страницы?

    rockfeeler
    @rockfeeler
    Фронтендер, дизайнер, верстальщик-перфекционист
    Обращение в функции идет к элементам с классом nav, так почему же класс active должен добавиться к элементу с классом nav__link?

    <div id="wrap">
    
    	<div class="nav">
    		<a href="http://test.test/test.html" class="nav__link">LINK</a>
    		<a href="" class="nav__link">LINK</a>
    		<a href="" class="nav__link">LINK</a>
    		<a href="" class="nav__link">LINK</a>
    	</div>
    
    </div>


    $(function () {
    	var loc = window.location.href;
    	
    	$('.nav__link').each(function () {
    		var theHref = $(this).attr('href');
    		
    		if (theHref === loc) {
    			$(this).addClass('active');
    		}
    	});
    });
    Ответ написан
    6 комментариев