• Как проверять наличие ключа в объекте?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    const object = {
      prop1: 'value1'
    };
    
    // https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
    if (object.hasOwnProperty('prop1')) {
      // your code here
    }
    
    // Тоже самое, что и 1й, но немного отличается своей работой
    // https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty#Example_hasOwnProperty_as_a_property
    if (Object.prototype.hasOwnProperty.call(object, 'prop1')) {
      // your code here
    }
    
    if (object.prop1) {
      // your code here
    }
    
    if (typeof object.prop1 !== 'undefined') {
      // your code here
    }
    
    if ('prop1' in object) {
      // your code here
    }
    Ответ написан
    2 комментария
  • Как вернуть значение из Promise у Javascript?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Отличная статья (хабр) на эту тему
    Ответ написан
    Комментировать
  • Как найти все экземпляры определенного класса в javascript?

    Negwereth
    @Negwereth
    lvivcss.com.ua
    const instancesOfFoo = new Set();
    class Foo {
      constructor() {
        instancesOfFoo.add(this);
      }
    }
    
    new Foo;
    new Foo;
    new Foo;
    
    console.log([...instancesOfFoo.values()]);


    Set
    Ответ написан
    Комментировать
  • Тестовое задание (Junior Frontend), приемлемое ли?

    @kirill-93
    Вертел я такие задания при устройстве на работу.
    Однажды тоже устраиваясь в "крутую" контору прислали большое задание. Все выходные убил на него. Потом еще две недели мурыжили собеседованиями и в итоге не взяли.
    Я с тех пор никогда не соглашаюсь на тестовые задания, которые займут больше получаса моего времени.
    Объемные задания должны оплачиваться. Если они очень требовательно отбирают сотрудников, то сначала надо дать простое задание/прособеседовать и уже если человек их устраивает, давать объемное задание и платить.

    UPD
    Не слушайте, пожалуйста, бред об опыте и пользе для вас. Из таких "будущих хороших специалистов" потом веревки вьют, типа "поработай по вечерам, это ж опыт для тебя!" или "давай ты теперь и по субботам выходить будешь, а мы тебя за это серьёром называть будем!". Очень работает с наивными молодыми людьми.
    Вы поймите, что все эти разговоры про опыт и пользу для вас - это уловки с целью сэкономить и вас обмануть. Всем плевать на ваш опыт, им нужно денег меньше вам заплатить и все.
    Огромное тестовое задание - это неуважение к кандидаду.
    Давай представим обратную ситуацию: я прихожу к потенциальному работодателю и говорю: "Давайте я у вас тут недельку посижу без каких-либо обязательств, а вы мне зарплату платите. А потом посмотрим, может быть останусь, а может уйду". Нормально? Ситуация выглядит именно так, потому что работодатель не делает одолжения принимая на работу, он "покупает" ваше время и ваш опыт и все.
    Ответ написан
    13 комментариев
  • Как в компоненте vue вывести геттер из хранилища?

    bootd
    @bootd Автор вопроса
    Гугли и ты откроешь врата знаний!
    Вопрос решён. Меня мучал один вопрос, как вот этот код поймёт, что нужно идти в модуль стора cart.js
    import { mapGetters } from 'vuex'
    
    export default {
      name: 'CartInfoBox',
      computed: {
        ...mapGetters([
          'totalCount',
          'totalPrice'
        ])
      }
    }

    Оказалось всё просто, нужно указать имя этого модуля и в итоге получилось так:
    import { mapGetters } from 'vuex'
    
    export default {
      name: 'CartInfoBox',
      computed: {
        ...mapGetters('cart', [
          'totalCount',
          'totalPrice'
        ])
      }
    }
    Ответ написан
    Комментировать
  • Как выполнить переадресацию страницы до ее создания с помощью vue router?

    kulakoff
    @kulakoff Куратор тега Vue.js
    Vue.js developing
    Возможно имеет смысл использовать хук роутера. Т.е. в компоненте или глобальном хуке разрешения перехода использовать:
    beforeRouteEnter (to, from, next) {
        const session = this.$cookie.get('session');
    	if(session) next({path: '/search-content'});
      },
    Ответ написан
    Комментировать
  • Как добавлять и удалять файлы в input type="file"?

    и так:
    1)
    <input onchange="handleChange" type="file" />
    
    <!-- как-то циклом выводи Store.files -->
    <span>file 1</span>
    <button onclick="(e) => removeFile(0)">remove file</button>
    
    <span>file 2</span>
    <button onclick="(e) => removeFile(1)">remove file</button>

    2)
    const Store = {
      files: [], // какое-то хранищие файлов, для примера так
    }
    
    // при выборе файлов, мы будем их добавлять
    function handleChange(e) {
      // если не выбрали файл и нажали отмену, то ничего не делать
      if (!e.target.files.length) {
        return;
      }
    
      // создаем новый массив с нашими файлами
      const files = Object.keys(e.target.files).map((i) => e.target.files[i]);
    
      addFiles(files); добавляем файлы в хранилище
      
      // очищаем input, т.к. файл мы сохранили
       e.target.value = '';
    }
    
    function addFiles(files) {
      // добавляем файлы в общую кучу
      Store.files = Store.files.concat(files);
    }
    
    // удалить файл из хранилища, например по индексу в массиве
    function removeFile(index) {
      // удаляем файл по индексу
      Store.files.splice(index, 1);
    }
    
    // если надо послать файлы на сервер, формируем FormData с файлами
    // const formData = getFilesFormData(Store.files);
    function getFilesFormData(files) {
        const formData = new FormData();
    
        files.map((file, index) => {
            formData.append(`file${index + 1}`, file);
        });
    
        return formData;
    }


    ну вот как-то так
    Ответ написан
    4 комментария
  • Как подружить height 100vh и chrome mobile?

    evorios
    @evorios
    Для себя я решил эту проблему таким образом:

    body {
      margin: 0;
      overflow: hidden;
    }
    
    body > .scroll-box {
        position: relative;
        left: 0;
        right: 0;
        height: 100%;
        max-height: 100vh;
        overflow-y: auto;
    }

    Таким образом блокируется прокрутка страницы, следовательно навигационная панель будет видна всегда. А также 1vh будет постоянным. Прокрутка же появляется, если внутри контейнера .scroll-box содержимое не помещается по вертикали. Прокрутка контейнера никак не повлияет на размеры body. Все лайтбоксы, модальные окна и выдвигающиеся меню помещаются в body для того, чтобы появление прокрутки никак не влияло на верстку этих окон.
    PS. Для блокировки паразитной прокрутки основного контейнера во время прокрутки модального окна я добавил в JS:
    $modal.on('show', () => $scrollBox.css({ 'pointer-events': 'none' }));
    $modal.on('hide', () => $scrollBox.css({ 'pointer-events': 'auto' }));
    Ответ написан
    1 комментарий
  • Как в гугл-таблицах реализовать смену цвета ячейки при выполнении условия «=ЕСЛИ»?

    Volounteer
    @Volounteer
    Нет такого параметра в формулах, который меняет цвет. Формулы вычисляют значение, они не управляют форматированием. Вам как раз и нужно условное форматирование. Просто у Вас ошибочное мнение о нём.

    Потому что оно работает только с одной строкой

    Это утверждение неверно. Задайте настройки условного форматирования как на скриншоте, и все ячейки столбца K, начиная с третьей, будут зеленые, если соответствующая ячейка столбца L больше соответствующей ячейки столбца B. Для красного цвета по аналогии.
    5ccadb4d5c264488414794.png
    Ответ написан
    Комментировать
  • Как сделать большую картинку opengraph в телеграм?

    @skrinart Автор вопроса
    вопрос решен. Для телеграма нужна специальная верстка Instant View.

    Результат:
    5d73791ba5860152010038.jpeg
    Ответ написан
    2 комментария
  • Макеты для тренировки навыков анимирования (CSS, JS, GSAP)?

    alexyarik
    @alexyarik
    Битрикс разработчик
    Вот на мой взгляд интересные задачки:
    вертикальная прокрутка и смена авто
    porschevolution.com/#2000s
    горизонтальная смена экранов
    hotdot.pro/#bilet2u
    Интересный Parallax на первом скрине
    www.firewatchgame.com
    несколько разных эффектов
    https://kirillpritula.com/en/
    прокрутка с разными эффектами появления
    lavash26.ru
    первый экран прикольно меню сделано
    https://rizon.pro/
    примеры
    https://threejs.org/examples/
    вращение товара, уменьшение и приближение
    www.manufaktur-sehen.de/brillenkonfigurator
    много всего
    https://codepen.io/search/pens?q=animation
    Ответ написан
    Комментировать
  • Как менять данные в массиве объектов не нарушая правила хорошего кода?

    0xD34F
    @0xD34F
    this.setState(({ events }) => ({
      events: events.map(n => n.id === id ? { ...n, title: newTitle } : n),
    }));
    Ответ написан
    Комментировать
  • Есть ли плавный скролл между якорями на чистом JS?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Для современных браузеров ничего придумывать не нужно, все и так уже есть.
    element.scrollIntoView({ behavior: 'smooth' })
    Для остальных можно временно заполифиллить.
    Ответ написан
    1 комментарий
  • Как получить положение скролла?

    @Eugeny1987
    Работаю с HostCMS
    Вот мой рабочий код
    (function($) {
    	
    	$.fn.totop = function(options) {
    	
    		options = $.extend(
    			{
    				height	: 300, // позиция появления
    				speed	: 1000 // скорость прокрутки наверх
    			}, options);
    		
    		return this.each(function() {
    			button = $(this);
    			$(window).scroll( function() {
    				if ( $(window).scrollTop() > options.height ) {
    					if (!button.attr('data-x')) {
    						button.fadeIn();
    					}
    				}  else {
    					if (!button.attr('data-x')) {
    						button.fadeOut();
    					}
    				}
    			});
    			button.click(function(e) {
    				if ($(this).attr('data-x')) {
    					var top = parseInt($(this).attr('data-x'));
    					e.preventDefault();
    					$('html, body').stop().animate({scrollTop: top}, options.speed, function(){
    						button.removeAttr('data-x');
    					});
    					button.html('<i class="icon-arrow-up"></i>');
    					return false;
    				}
    				var top = $(window).scrollTop();
    				button.attr('data-x',top);
    				button.html('<i class="icon-arrow-down"></i>');
    				e.preventDefault();
    				$('html, body').stop().animate({scrollTop: "0px"}, options.speed );
    				return false;
    			});
    			$(window).scroll();
    		})
    	}
    	
    })(jQuery);
    Ответ написан
    Комментировать
  • Как отпредилить размер окна браузера на javascript?

    @frees2
    <!DOCTYPE html>
    <html>
    <body>
    
    <p id="demo"></p>
    
    <script>
    var w = window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;
    
    var h = window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;
    
    var x = document.getElementById("demo");
    x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
    </script>
    
    </body>
    </html>
    Ответ написан
    Комментировать
  • Как правильно сделать живой поиск?

    @r_mustang
    Ответ написан
    Комментировать
  • Как правильно сделать живой поиск?

    dimovich85
    @dimovich85 Куратор тега JavaScript
    https://u-academy.net/
    Для работы с полями ввода есть набор событий:
    1. focus - пользователь поставил фокус на поле ввода.
    2. blur - пользователь убрал фокус с элемента вода.
    3. input - пользователь как-то что-то ввел. Это лучше, чем keyup, ибо не надо проверки keyCode, второе потому что пользователь может в поле вставить текст, что тогда будет с Вашим keyUp? Событие input срабатывает каждый раз, как пользователь сделал изменение в поле ввода.
    4. change - пользователь ввел данные и убрал фокус с поля ввода, то есть это input + blur. Событие происходит не так часто, как input, но и не заставляет проверять value на изменение, как это придется делать при blur.
    5. submit - срабатывает на всей форме, при попытке отправить данные, в данной задаче скорее не интересное событие.

    Для живого поиска логично использовать input, по которому надо отправить текущее value через ajax на сервер и далее ответ куда-то распечатать. Вопрос в другом, ведь событие срабатывает довольно часто, и кто-то печатает так быстро, что и запрос-ответ не успеет, поэтому логично сделать тут debounce с задержкой в приблизительно 300мс, чтобы отправка/получение сработало когда пользователь притормозил в наборе текста или вообще прекратил ввод.
    Ответ написан
    Комментировать
  • Vue bind style if?

    FLUNKEY
    @FLUNKEY
    самовар
    :style="{ top: returnTrueOrFalse() ? '0px' : '' }"

    P.S. С вычисляемыми свойствами будет почище

    :style="styleObject"

    //..
    computed: {
      styleObject: function() {
        return {
          top: this.returnTrueOrFalse() ? '0px' : ''
        }
      }
    }
    Ответ написан
    1 комментарий
  • Как работает @yield в Laravel?

    @D3lphi
    Вы создаете шаблон (Назовем его, first.blade.php), вставляете в него @yield():
    <div class="example">
        @yield('content')
    </div>


    Затем вы наследуете от этого шаблона другой шаблон (second.blade.php) и прописываете в него конструкцию @section() с тем же именем, что указали у yield:
    @extends('first')
    
    @section('content')
        Hello, World!
    @endsection


    Теперь вы рендерите второй шаблон:
    class Controller
    {
        public function indexAction()
        {
            return view('second');
        }
    }


    Рендерится вот такая страница:
    <div class="example">
        Hello, World!
    </div>


    Таким образом, получается, что @yield() служит своеобразным маркером, на место которого будет подставлено содержимое @section() дочернего шаблона.
    Ответ написан
    2 комментария