Задать вопрос
  • Как удобнее проставлять размеры, цвета в макетах дизайна сайта для программистов?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    По фен-шую нужно делать стайлгайд. В нем должна быть наглядно показана типографика, цвета, стандартные размеры отступов (их обычно немного, можно для каждого написать, что вот этот для заголовков, вот этот для того-то, а вот этот по умолчанию) и компоненты интерфейса по отдельности (включая все их состояния). Как потом будут выглядеть сами макеты, будут ли они кривыми и косыми - не важно, они могут быть хоть от руки карандашом нарисованы, ибо их смысл в том, чтобы показать взаимное расположение компонентов, а вся остальная информация есть в стайлгайде. Такой подход может экономить кучу времени, избавляет дизайнера от необходимости рисовать макеты страниц с точностью до пикселя, а компонентная верстка становится очень приятным занятием. Разумеется, в интернете можно найти достаточно примеров по запросу ui style guide example.
    Ответ написан
    1 комментарий
  • Какие есть способы / сервисы для тестирования верстки в safari на ПК и мобильных?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Как вариант есть еще saucelabs.com.
    Ответ написан
    Комментировать
  • Анимация на css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как сделать на чистом css?

    Сергей говорит, что CSS не может отслеживать скролл и это действительно так. Его вариант решения задачи является общепринятым и я бы тоже использовал его. Но если вы хотите доказать, что у вас скилл CSS равен 95% - придется шаманить. Мысль следующая: если взять большой блок с кривым градиентом и аккуратно перекрыть его слоями, которые не будут скроллиться (position: sticky будет очень кстати), оставив небольшую видимую полоску, то можно получить занятный эффект зависимости содержимого полоски от этого самого скролла - codepen (будьте осторожны, проверено только в последних версиях хрома и ff). Понятно, что идея сырая, но если ее доработать, то можно будет запилить что-то похожее на вашу картинку.
    Ответ написан
    1 комментарий
  • Шрифты. Теория. Какой рукописный шрифт использовать для заголовков (h1, h2, ...), если основной Open Sans?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Причём интересует не только кириллица, но и латиница (даже без поддержки русского). Ещё, желательно, из коллекций Google Font.

    Тогда стоит начать поиски с сайта fontpair.co, там как раз собраны хорошие сочетания разных шрифтов из коллекции от Google.
    Ответ написан
    1 комментарий
  • Где найти электронный актуальный список всех УДК книжных изданий?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    с актуальным списком всех существующих УДК

    На udcsummary.info или udcdata.info можно посмотреть как они говорят 2,600 top-level classes from the UDC , доступ к полному справочнику, в котором over 70,000 classes extended with more than 11,000 records of historical UDC data (cancelled numbers) можно получить вот тут. Есть триал-версия и подписка, что не удивительно - им тоже жить на что-то нужно.
    Ответ написан
    Комментировать
  • Что есть кроме БЭМ?

    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 дает возможность использовать большой набор утилит (как стандартных, так и не очень) в едином функциональном стиле. Это чуть ли не главная фишка, за которую его так любят.
    Ответ написан
    Комментировать