• Написание сайтов на разных платформах?

    Sanes
    @Sanes
    Использовать относительные пути.
    Ответ написан
    Комментировать
  • Как работает свитч-кейс?

    iiiBird
    @iiiBird
    Пока ты спишь - твой конкурент совершенствуется
    switch нужен когда выражение может иметь несколько исходов. он создан для избавления от многих if else. в твоем выражении исход один. смысла в switch нет.
    Ну если прям так хочется, то твой бред можно сделать так:
    let a = 2
    let b = 2
    switch(a === b) {
      case true:
      console.log('1');
      break
    }
    Ответ написан
    3 комментария
  • Как работает свитч-кейс?

    examix
    @examix
    Gutta cavat lapidem
    switch - case

    Принимает аргумент и выполняет строгое сравнение с требуемыми блоками условий, если условие сравнения в блоке истинно выполняется код в данном блоке до ближайшей директивы break. Если ни один блок сравнений не сработал, выполняется блок кода default.
    let etalonCity1 = ['Самара',  'Архангельск'];
    switch (arg) {
    	case etalonCity1[1]:  // if (arg === etalonCity1[0])
    		//to-do
    		break;
    	case etalonCity1[0]:  // if (arg === etalonCity1[1])
    		//to-do
    		break;
    	default:
    		//to-do
    		console.log('Условия сравнения не совпали');
    		break;
    }


    Вариант сравнения используя ' тернарный оператор '
    a === b ? console.log('true') : console.log('false');

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

    vabka
    @vabka
    Токсичный шарпист
    https://developer.mozilla.org/ru/docs/Web/JavaScri...
    switch-case в js не умеет сопоставлять одновременно несколько значений.
    Так что никак твой код рабочим не сделать.
    Тем более, что не понятно, что он должен делать.

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

    switch (expression) { // expression - это какое-то выражение. Тоесть значение одно.
      case variant1: // variant1 и variant2 - это тоже какое-то выражение. Тоесть тоже ровно одно значение.
        // ...
      break;
      case variant2:
        // ...
      break;
      default:
        // ...
      break;
    }
    
    // Вот в такое
    const value = expression;
    if(value === variant1) {
      //...
    } else if (value === variant2) {
      //...
    } else {
      // ...
    }
    Ответ написан
    Комментировать
  • Как сократить запись в v-bind?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Не надо indexOf, индексы доступны в v-for без каких-либо дополнительных телодвижений:

    <div v-for="(row, iRow) in rows" class="board__rows">
      <div
        v-for="(col, iCol) in columns"
        v-text="col + row"
        :class="[ [ 'white', 'black' ][(iRow ^ iCol) & 1], 'board__square' ]"
      ></div>
    </div>
    Ответ написан
    Комментировать
  • Как объединить массив с повторяющимися объектами?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Object.fromEntries(Object
      .entries(arr.reduce((acc, n) => ((acc[n.name] ??= []).push(n.value), acc), {}))
      .map(n => [ n[0], n[1].length === 1 || n[1] ])
    )
    Ответ написан
    2 комментария
  • Как создать скрипт, изменяющий scale?

    RAX7
    @RAX7
    Вынеси значение scale в переменную:
    .clouds:nth-child(2) {
        --scale: 2;
        top: 180px;
        left: 28px;
        z-index: 2;
    }
    
    .cloud {
        animation: scale 3s infinite alternate;
    }
    
    @keyframes scale {
        from {
          transform: scale(var(--scale));
        }
        to {
          transform: scale(calc(var(--scale) / 2));
        }
    }


    P.S. не использую раздельные свойства для трансформаций, они еще плохо поддерживаются https://caniuse.com/mdn-css_properties_scale
    Ответ написан
    1 комментарий
  • Как сделать вывод юзеров из бд?

    ipatiev
    @ipatiev Куратор тега PHP
    Потомок старинного рода Ипатьевых-Колотитьевых
    Делаем загадочные движения руками, незаметно меняем тег br на td и... Магия!
    foreach($row as $v) {
        echo "<td>$v</td>";
    }


    Но на самом деле обычно так не делают, и действительно вытаскивают "что-то одно". Попутно разделяя работу с SQL и HTML и защищаясь от инъекцй. Для этого:

    • сначала получаем нужные на странице данные. Если выводим список, то записываем его в массив
    • только после того как все данные получены и обработаны, можно начинать вывод. В простейшем варианте закрываем тег РНР и начинаем выводить HTML и в нужных местах - запрошенные выше данные
    • не забывая их в обязательном порядке экранировать

    $data = $mysqli->query('SELECT * FROM users')->fetch_all(MYSQLI_ASSOC);
    ?>
    <table>
      <?php foreach($data as $row): ?>
        <tr>
            <td><?=htmlspecialchars($row['id'], ENT_QUOTES) ?></td>
            <td><?=htmlspecialchars($row['name'], ENT_QUOTES) ?></td>
            <td><?=htmlspecialchars($row['email'], ENT_QUOTES) ?></td>
        </tr>
      <?php endforeach ?>
    </table>
    Ответ написан
    1 комментарий
  • «Семантические» HTML5 элементы — это аттавизм?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    Не всё так радужно, как задумывалось, но смысл в их использовании есть.
    От каких то тэгов больше - от каких то меньше.
    Но если что-то можно сделать не прилагая почти никаких усилий и получить от этого пользу, то почему этого делать не стоит?

    https://habr.com/ru/company/htmlacademy/blog/546500/

    Основных поинтов использования семантики 3.
    1) Использование подходящих элементов делает их использование удобнее. Несколько раз встречал когда ссылки делали дивами с js поверх. Нет возможности нажать на них колёсиком чтобы открылаьс в новой вкладке или правой кнопкой с соответствующем ссылке контекстным меню. Это отвратительно неудобно.
    2) это помощь людям с ограниченными возможностями для понимания контекста происходящего на экране. Наглядный пример это ссылки внутри тэга nav. Можно побаловаться со скрин ридером и будет понятно о чём речь.
    Если коротко: ссылки в div будут озвучены как: *ссылка*.
    Ссылки в nav: "ссылка, навигация"
    https://vc.ru/promo/132280-kak-zvuchat-sayty-nezry...
    https://www.youtube.com/watch?v=RQiN1Hhrxu0
    3) Помощь поисковым ботам понимать контекст и формировать снипеты в поисковой выдаче. Пример есть в статье выше.
    https://siteclinic.ru/blog/technical-aspects/html5...

    с какой-либо из «сторон дела»: пользователя, верстки, программирования, поисковых систем?

    1) Про пользователей выше
    2) Про вёрстку - удобнее читать
    3) Про программирование - использование верных тэгов соответствующим образом влияет на работу с этими элементами в JS либо избавляет от необходимости в JS в принципе.
    4) Про поисковые системы выше.
    Ответ написан
    11 комментариев
  • Как сверстать такой элемент?

    RAX7
    @RAX7
    Для полупрозрачного уголка можно css-masks использовать, либо просто вставить svg как data-url в background-image
    Ответ написан
    3 комментария
  • Как перемножить два массива?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const result = a.map(function(n) {
      return b.slice(this[0], this[0] += n).reduce((acc, n) => acc * n, 1);
    }, [ 0 ]);

    Или, если второй массив больше не будет нужен:

    const result = a.map(n => b.splice(0, n).reduce((acc, n) => acc * n, 1));
    Ответ написан
    1 комментарий
  • Когда можно использовать цикл внутри цикла?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Все зависит от конкретной задачи. В реальной жизни вы столкнетесь с циклами внутри циклов - когда будете например активно работать над преобразованием данных. Например используя методы массивов (вроде map, reduce, forEach и т.п.).

    // задача - сделать все буквы А в именах заглавными
    const names = ['вася', 'петя', 'алла', 'маша', 'юля', 'вова'];
    
    // первый цикл
    const adjustedNames = names.map(name => {
      const nameArr = [...name];
      
      // второй цикл
      const nameAdjusted = nameArr.map(letter => letter === 'а' ? 'А' : letter);
      
      return nameAdjusted.join('');
    });
    
    console.log(adjustedNames); // [ "вАся", "петя", "АллА", "мАшА", "юля", "вовА" ]


    Всегда нужно помнить, что цикл внутри цикла - это очень ресурсоемкая задача.
    Если сложность одного цикла равняется O(n), то сложность цикла внутри цикла возрастает на порядок и равняется O(n2) что может привести к проблемам и задержкам в вычислениях в случае обработки больших массивов из тысяч+ элементов.

    По этому не используйте такую вещь без крайней необходимости. Современный синтаксический сахар в JS позволяет делать много вложенных массивов не замечая проблем.
    Ответ написан
    2 комментария
  • Как реализовать переключение на другие компоненты в модальном окне?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Есть такой свойство, is, указываете в него компонент и нет проблем.
    <Component :is="currentComponent">
    И в нужных методах меняете этот currentComponent на компонент, который нужно показать.
    Вот примерчик набросал https://jsfiddle.net/set9x5fj/

    <div id="app">
      <h2>Toster</h2>
      <Component :is="currentComponent"></Component>
      <input type="button" @click="showComp1" value="showComp1">
      <input type="button" @click="showComp2" value="showComp2">
    </div>

    Vue.component("comp1", {
    	template: "<div>Hello from comp1</div>"
    });
    Vue.component("comp2", {
    	template: "<div>Hello from comp2</div>"
    });
    new Vue({
      el: "#app",
      data: {
         currentComponent: "comp1"
      },
      methods: {
      	showComp1() {
        	this.currentComponent = "comp1";
        },
        showComp2() {
        	this.currentComponent = "comp2";
        }
      }
    })
    Ответ написан
    Комментировать
  • Стоит ли переписать gulp на webpack?

    @deliro
    webpack - это помойка. Медленная, грязная и монструозная. Попробуй лучше https://vitejs.dev/ или https://parceljs.org/

    Ну или можно остаться на gulp, только тормознутый babel заменить на esbuild или swc, а sass компилировать dart-sass
    Ответ написан
    Комментировать
  • Нужно ли сразу учить TypeScript или сначала JavaScript?

    vabka
    @vabka
    Токсичный шарпист
    TypeScript - это JavaScript с опциональной статической типизацией.
    Так что зная TypeScript - ты автоматически знаешь JavaScript.
    Но это никак не избавляет тебя от изучения браузерных API (или API ноды, если ты хочешь в бэкенд идти)

    В каком именно порядке изучать TypeScript - это твоё дело. Возможно, проще будет начать с чуть более простого JS, а может наоборот - проще будет временно забыть о динамической типизации.
    Ответ написан
    Комментировать
  • Как сделать подсветку картинки?

    SmthTo
    @SmthTo Куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.
    Можно задвоить картинку, нижнюю при этом размыть с помощью blur, а также поднять ей яркость и контраст, чтобы яркие участки были более выраженными и не теряли своей цветности. Это самый эффективный и простой способ создания таких теней:


    Если лень включать VPN для JSFiddle, то результат такой:
    630f73e9f39e5350575339.png

    Либо можно сделать примерно то же самое, но с абсолютно позиционированными элементами, расположенными под картинкой.

    Либо можно геморроится с множественными box-shadow.
    Ответ написан
    Комментировать
  • Как найти исполняемый js код конкретного блока?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Что значит "конкретной обёртки?
    Обработчик какого-то элемента?
    Открывайте инструменты разработчика, тыкайте селектором в элемент.
    И на той панели где отображаются стили элемента есть вкладка "Event Listeners" ну или том языке, какой у Вас выбран. Там можно посмотреть все обработчики данного элемента.

    Если что-то другое, то можно открыть вкладку Sources, сбоку в "проводнике" найти js файлы и искать код там.
    Ответ написан
    Комментировать
  • Как заменить фразу в контенте кроме подписей внутри картинок?

    Догадываюсь, что нужно бы прописать регулярку
    Догадка объяснимая, но неверная, в конечном итоге.
    Для изменения произвольного HTML нельзя надёжно использовать регулярные выражения.
    Нужно использовать готовые парсеры, которые понимают разметку HTML и умеют обрабатывать ошибки, допущенные в ней (например, DOMDocument::loadHTML). И в итоговом дереве уже рекурсивно делать, что требуется.
    Ответ написан
    2 комментария