• Что есть кроме БЭМ?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    В дополнение к статье Способы организации CSS-кода, упомянутой выше, добавлю еще ссылку на RSCSS.
    Ответ написан
  • Косые рамки у блока через css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Много-много градиентов - немного странный на первый взгляд способ, позволяющий нарисовать бордер любой формы:

    59ddbb6fa04ff692806185.png
    Длинный кусок кода...
    .button {
        display: inline-block;
        position: relative;
        margin: 2rem;
        padding: 0 2rem;
        line-height: 2rem;
        font-family: 'Montserrat', sans-serif;
        color: #FFF;
        background:
            linear-gradient(to right, #41D3BD, #791E94),
            linear-gradient(to bottom, #791E94, #FE9920),
            linear-gradient(-45deg, transparent, transparent 40%, #FE9920 45%, #FE9920 55%, transparent 60%, transparent),
            linear-gradient(to left, #FE9920, #FCFF4B),
            linear-gradient(to top, #FCFF4B, #41D3BD),
            linear-gradient(-45deg, transparent, transparent 40%, #41D3BD 45%, #41D3BD 55%, transparent 60%, transparent);
        background-repeat: no-repeat;
        background-position: top right, top right, bottom right, bottom left, bottom left, top left;
        background-size:
            calc(100% - 10px) 2px,
            2px calc(100% - 10px),
            10px 10px,
            calc(100% - 10px) 2px,
            2px calc(100% - 10px),
            10px 10px;
    
        &::before {
            content: '';
            display: inline-block;
            height: 100%;
            width: 100%;
            position: absolute;
            bottom: -4px;
            right: -4px;
            background:
                linear-gradient(to bottom, #791E94, #FE9920),
                linear-gradient(-45deg, transparent, transparent 45%, #FE9920 50%, #FE9920 55%, transparent 60%, transparent),
                linear-gradient(to left, #FE9920, #FCFF4B);
            background-repeat: no-repeat;
            background-position: top right, bottom right, bottom left;
            background-size:
                2px calc(100% - 12px),
                12px 12px,
                calc(100% - 12px) 2px;
        }
    }

    codepen
    Ответ написан
    1 комментарий
  • CSS размыть div?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Ответ написан
    Комментировать
  • Какие курсы по криптографии вы знайте?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Н. Смарт. Криптография. Русский перевод очень неплох. В открытой продаже найти сложно, но вы же знаете, что в такой ситуации велит делать пиратский кодекс. В наших вузах эту книжку обычно малость недолюбливают, советуют читать отечественных авторов, но по наблюдениям она стоит прочтения.
    Ответ написан
    Комментировать
  • Как делают такие вещи?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Алгоритм примерно такой:
    - Берем обычный canvas, на нем что-то пишем или выводим картинку (в данном случае строго 2 цвета).
    - Берем imageData у того, что получилось.
    - Проходим по всем пикселям этой imageDatы с каким-то шагом, делаем объект "частица" с нужными координатами когда цвет соответствует определенному (если писали черным по белому - значит если цвет пикселя черный).
    - Стираем надпись.
    - Проходим по массиву частиц, рисуем небольшой круг (что угодно, но пусть будет круг) на месте с координатами этой частицы.
    - PROFIT.

    По вкусу к частице добавляется параметр "цвет" (лучше полупрозрачный) и "размер". Можно сделать функцию обновления, которая будет менять эти параметры и координаты, requestAnimationFrame нам в помощь. Координаты частицы меняются по определенному закону в каком-то радиусе от ее изначального положения, можно взять параметрическое уравнение любой замкнутой кривой и использовать его для вычисления отклонения частицы от ее изначального положения.
    Ответ написан
    Комментировать
  • Как сверстать данный блок?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Хммм... где-то я уже такое видел....

    P.S.: Чисто из профессионального интереса - это тестовое задание или просто макет из какой-то рассылки?
    Ответ написан
    1 комментарий
  • В каких случаях использовать ES6 Class?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Нормально ли вообще иметь компоненты в виде классов?

    "Нормальность" - это термин из области психиатрии, обозначающий тот факт, что кто-то другой делает то, что мы на данный момент времени и в данном обществе считаем приемлемым. Были времена, когда люди говорили "мы должны разделять разметку, стили и скрипты и ни в коем случае не должны их смешивать". Это считалось нормальным. Даже относилось к хорошим практикам. А потом появился реакт. И те же люди стали говорить "да давайте все в одном файле фигачить, это же круто, а еще вебпаком можно весь проект со всеми ресурсами в один бандл сжать". И теперь это - норма. Как можно заметить, нормальность немного поменялась.

    не могу найти место применение классов при создании интерфейсов

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    LaTeX будет в самый раз, хотя и не всем он по душе. Текстовый редактор по вкусу. Я так книжку оформлял, там был структурированный текст, картинки с подписями, ноты. Могу сказать, что это весьма удобно при больших объемах информации. Стилизация всего этого получается в одном месте, можно ее спокойно вынести в отдельный файл и импортировать во все ваши документы, дальше все само рендерится в pdf.
    Ответ написан
    1 комментарий
  • Как сделать обратную анимацию распада с использования css или javascript (Pixel Dust)?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Вот как-то так (кроссбраузерность не проверял, но должно работать IE11+).
    59d5e110e70d2375505477.gif
    По-хорошему стоило бы нарисовать точки в виде SVG-картинки и анимировать ее части, а не div элементы, как я сделал, но общая концепция должна быть понятна. Поведение с опцией hidden можно заменить на :hover у вашей кнопки.
    Ответ написан
    1 комментарий
  • Как сделать такой hover эффект?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    background:
        linear-gradient(135deg, transparent, rgba(255,255,255,.1)),
        linear-gradient(to top, #999,  transparent),
        linear-gradient(to left, #999, transparent);
    background-repeat: no-repeat;
    background-position: top left, top right, bottom right;
    background-size: 100% 100%, 1px 100%, 100% 1px;

    59d3401b85c87840054203.pngcodepen
    Ответ написан
    2 комментария
  • Почему браузеры стали такими прожорливыми?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Тут все пишут, что JS разработчики такие-сякие, гонятся за новыми версиями и красивыми плюшками, сами за памятью не следят, а сборщик мусора у них плохо работает, и вообще они все такие редиски. Может это и так, но будет интересно, если кто-нибудь объяснит мне, человеку темному, почему происходит вот такое (подопытный - хром под линуксом, это случалось на всех сайтах, где я проверял, расширения все отключил для чистоты эксперимента):
    59d32ab2ecb36167727227.png
    Сеть показывает, что было скачано где-то 1.2MB. Как мы можем видеть, куча, в которой "сборщик мусора плохо убирается" меньше 30MB. Если сложить значения из правой колонки, получится около 50MB (по грубой оценке). Страница стоит, я не скроллил ее, ничего не нажимал, запись выделения памяти пустая, т.е. память не выделяется (не стал скриншотить - там просто все пустое), а вкладка потребляет почти 200MB. Если начать что-то делать (например скроллить, тем самым вызывая перерисовку всего), то память начнет выделяться, что будет видно в соответствующей записи, но общее количество потребляемой памяти не изменится. Если открыть htop, то он покажет, что хром потребляет памяти чуть больше, чем в сумме получается у его собственного диспетчера задач, так что там сильного подвоха нет. Или я что-то совсем очевидное не вижу или каждая вкладка заводит себе "хомячка", который берет себе памяти про запас, но сам ее сразу не использует.
    Ответ написан
  • Как реализовать плавный якорь на чистом(Нативном) JavaScript?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Этот функционал находится в стадии черновика и в некоторых браузерах уже есть из коробки. Вероятно вам нужен smooth scroll polyfill. Разумеется никто не мешает в образовательных целях посмотреть его исходники.
    Ответ написан
    1 комментарий
  • Зачем в библиотеке lodash функция map?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Lodash дает возможность использовать большой набор утилит (как стандартных, так и не очень) в едином функциональном стиле. Это чуть ли не главная фишка, за которую его так любят.
    Ответ написан
    Комментировать
  • Какие есть плагины анимации элементов?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Возьмите animate.css и добавляйте нужные классы к элементам. Или, что еще лучше, достаньте из нее только необходимые вам анимации (postcss-animation может это дело автоматизировать) или посмотрите идеи в исходниках и сами их напишите, чтобы не тащить всю библиотеку ради пары десятков строк. Если хотите что-то совсем кастомное и необычное - идите на codepen, смотрите идеи там и адаптируйте под свои нужды. Тут главное не переборщить, все-таки сильно нестандартные или длинные анимации интересны первые пару-тройку раз, потом начинают раздражать.
    Ответ написан
    Комментировать
  • Какую лучше сделать разметку и как запомнить выбор?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Это стандартные радио-кнопки. Сами инпуты скрываются, а label для каждого из них стилизуется необходимым образом - пример.
    Ответ написан
    Комментировать
  • Где и как можно проверить сайт и получить рекомендации куда двигаться дальше?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Про SEO уже сказали, добавлю про юзабилити и общее впечатление:

    1. Отсутствует информация о всех товарах. Если есть категория в каталоге - она должна что-то содержать. Чем больше ассортимент - тем лучше. А пустующие категории, как и пустющие прилавки в обычном магазине - настораживают.
    Решение проблемы: заполнить сайт контентом. В том числе на всех второстепенных страницах.

    2. А как собственно купить? Ни кнопок "купить", ни информации об оплате и доставке. Это как автомат с газировкой без дырки для денег.
    Решение проблемы: добавить инструкцию как купить. Как минимум напишите, куда позвонить/написать, чтобы заказать какой-то товар, куда вы доставляете, в какие сроки и.т.д. Чем подробнее - тем лучше. Кнопка "купить" у товаров тоже желательна. Даже если она будет вести на страницу "как заказать". Это не полноценная корзина, но лучше, чем ничего.

    3. Тексты на цветных фонах сложно читать. Это даже не дизайнеру заметно. Сложно читать = я не буду это читать.
    Решение проблемы: Уменьшить яркость фонов под текстом (которые с разноцветным паттерном), добавить небольшие темные тени светлому тексту и светлые темному для заголовков на фоне фотографий.

    4. Прелоадер реально бесит. Я серьезно. На этом сайте нет ничего такого, что можно было бы так долго грузить. В современном мире все куда-то спешат, если ваш сайт ничего не показывает по 10 секунд, а соседний показывает что-то сразу - у вас проблемы (особенно, если вы не владеете заметной долей рынка или не предоставляете товар, не имеющий аналогов).
    Решение проблемы: убрать прелоадер. Почитать про оптимизацию скорости загрузки. Как минимум необходимо убрать фон, который весит больше 5MB, картинки можно немного сжать и законвертить в progressive-jpeg, скрипты и стили вниз страницы, наверху вставить critical css (на тостере уже спрашивали про все это - почитайте).
    Ответ написан
    1 комментарий
  • Как реализуется подобный hover?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Идея примерно такая:
    span {
        background: linear-gradient(to right, #ccc 0%, #ccc 50%, #fff 50%, #fff);
        background-size: 200% 100%;
        background-position: 100% 0;
        transition: background-position .5s cubic-bezier(.56,.08,.42,.7);
    }
    
    span:hover {
        background-position: 0 0;
    }


    codepen
    Ответ написан
    Комментировать
  • Как использовать em применительно к font-size?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    я имею в виду, чтобы при уменьшении окна, шрифт также уменьшался.

    Почитайте вот эту статью.
    Ответ написан
    Комментировать
  • Как не применять html при отключенном JS?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Как не показывать прелоадер если у человека выключен JS?

    Можно посмотреть на вопрос с обратной стороны и показывать ваш прелоадер с помощью JS. Там, где нет JS - не будет и прелоадера.
    Ответ написан
    Комментировать