Верстаю с прихода Web 2.0, пишу клиентскую логику, свистелки-перделки, анимации всякие.

Умею и использую:
React, typescript, redux, effector, rollup, webpack, Stylus/Less/SASS/PostCSS, etc.

Да, меня можно спрашивать про фронтенд, не кусаюсь. Вести курсы не предлагать.
Контакты
Местоположение
Россия, Санкт-Петербург и область, Санкт-Петербург

Достижения

Все достижения (3)

Наибольший вклад в теги

Все теги (26)

Лучшие ответы пользователя

Все ответы (140)
  • Где тестировать верстку email?

    Raxen
    @Raxen
    Lead Frontend Developer, Beeline
    Тестировать iphone без iphone уже плохая идея, как вариант - ставить виртуальную машину с OS X, на МакОс ставить эмулятор iphone(ios sdk) и на нем уже смотреть, но тут тоже не все просто - у меня заказчик смотрел верстку писем на приложении gmail для iphone, другой открывал gmail в браузере мобильного устройства, там вообще своя атмосфера.

    Так что стандартный набор -
    MS Outlook, Mozila Thunderbird (полезная для тестирования вещь, т.е. в ней есть возможность отправить письмо с html), для эмуляции Android устройств можно использовать Bluestack, для iOS виртуалочку с OSX (https://ru.wikipedia.org/wiki/IOS_SDK), ну и какой-нибудь девайс все же полезно иметь под рукой

    И помните, изначальная верстка отличается от той, которая приходит на email, т.к. каждый почтовый клиент имеет свои ограничения и выпиливает все ему ненужное
    Ответ написан
    4 комментария
  • Почему плохо писать * box-sizing border-box?

    Raxen
    @Raxen
    Lead Frontend Developer, Beeline
    Не плохо. Я пишу, мне хорошо. Я туда еще и псевдоэлементы обычно добавляю, некоторые исключают или пишут ниже отдельные box-sizing для элементов, к которым они привыкли в другой модели, мне так редко это нужно, что когда нужно, я меняю этот момент в классе элемента.
    Ответ написан
    4 комментария
  • Как сделать такую ​​кнопку вниз чтобы она прыгала?

    Raxen
    @Raxen
    Lead Frontend Developer, Beeline
    анимацию можно на css, скролл вниз на jquery, допустим у нас есть круглая кнопка в виде стрелки вниз(html) -
    <a href="#second-screen" class="scroll-down-btn"></a>

    Нам нужно повесить анимацию на кнопку(css) -
    .scroll-down-btn {
    /* Тут стили кнопки, картинки, размеры */
      position: relative;
      bottom: -15px;
      animation: bounce 0.4s infinite; /* Анимацию bounce пропишем ниже */
    }

    Ну и собственно сама анимация(css) -
    @keyframe bounce {
      0 {
        bottom: 0;
      }
      100% {
        bottom: -15px;
      }
    }

    Ну а теперь нужно, чтоб эта кнопка работала(jQuery) -
    $('.scroll-down-btn').on('click', function(e) {
      e.preventDefault(); // Запрещаем переход по ссылке
      var target: $(this).attr('href'), // Берем значение из ссылки как цель id="second-screen"
            destination: $(target).offset().top; // Ищем верхнюю координату у нашей цели
    
      $('body,html').animate({scrollTop: destination}, 500); // Плавно проматываем до цели
    });
    Ответ написан
    Комментировать
  • Написал js, но, думаю, тут можно его сократить (оптимизировать)?

    Raxen
    @Raxen
    Lead Frontend Developer, Beeline
    Способ определения оставленного комментария на ваше усмотрение, сократить можно так

    const { hash, href } = window.location;
    const urlc = href.replace(hash, '');
    
    if (hash && decodeURIComponent(readCookie('commentadd')) === urlc) {
      alert("Комментарий оставлен");
    }

    или так

    const { hash, href } = window.location;
    
    if (hash && href.includes(decodeURIComponent(readCookie('commentadd')))) {
      alert("Комментарий оставлен");
    }
    Ответ написан
    Комментировать