• Где можно найти звуковые эффекты для сайта?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    На freesound.org есть много всего, в том числе и звуки разных кнопок (по запросу "button").
    Ответ написан
  • Как добавить автоматическое добавление квадратов на CSS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Ну строго говоря для решения задачи "на CSS добавить внутри квадрата квадраты меньше и другим цветом" достаточно одного div-элемента (нет нужды добавлять новый элемент на каждый декоративный квадрат).



    Но лучше все же уточнить у задавшего вопрос, что значит "не стереть локти" в его понимании.
    Ответ написан
  • Как импортировать 3D модель и крутить ее в three.js?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    Очень рекомендую почитать статью про трехмерные презентации товаров на Three.js и разобраться с примером из нее. Там речь в частности идет про загрузку и отображение модели и вращение камеры вокруг нее.
    Ответ написан
  • Обтекание текстом фиксированного блока?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    На CSS такое обтекание никак не сделать. Но можно пойти одним весьма хитроподвывернутым способом - продублировать текст и скроллить два блока с контентом одновременно. Как в этом примере, только в одной плоскости, без "перевернутой" трансформации:



    Это позволит сделать плавное движение, без рывков при перестроении элементов в DOM-дереве.
    Ответ написан
  • Для каких проектов стоит подключать reset.css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    У браузеров есть встроенные стили (user agent stylesheets), которые они применяют к элементам на страницах по умолчанию. И эти стили у разных браузеров разные. Это не сразу бросается в глаза, но отличий там довольно много. И эти отличия вынесут вам мозг при тестировании любой более-менее сложной верстки.

    Один вариант решения проблемы - normalize.css. Там переопределяются лишь некоторые свойства, которые отличаются в разных встроенных наборах стилей (ну и плюс некоторые детали, которые не так важны в этом контесте), но большая часть стилей по умолчанию (которые одинаковые в разных браузерах) остается на месте.

    Есть альтернативный вариант с ресетами, когда сбрасывается все подряд без разбора. Что лучше, normalize или ресеты - это больше вопрос личных предпочтений и привычек, но не использовать ничего из этого - это верный путь к поиску таинственных багов, когда в одном из множества браузеров что-то внезапно не работает, хотя по идее должно.
    Ответ написан
  • Иногда падает сайт (Nuxtjs), что делать?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    из-за чего так?

    Скрипты на сервере хотят слишком много памяти - больше, чем для них было выделено.

    Как исправить

    Можно как временный фикс увеличить --max-old-space-size для ноды, но скорее всего проблема в утечке памяти, а не в том, что у вас действительно такое нагруженное приложение. Но поиск утечек - это очень широкая тема, явно выходящая за рамки ответа. Начать можно с поискового запроса "node.js memory leak detection".
    Ответ написан
  • Как заставить взаимодействовать два соседних тега друг с другом?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Вероятно вам нужно использовать "+":
    nav:hover + section
      left: 170px
    Ответ написан
  • Фигуры на чистом css или svg?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Давайте посмотрим с разных сторон:

    С одной стороны SVG можно нарисовать в графическом редакторе - для замороченных фигур это будет проще, чем пытаться нашаманить их на CSS.

    С другой стороны - для простых фигур быстрее может быть их сверстать, чем идти куда-то, открывать редактор, что-то там мышкой кликать, сохранять, копировать и.т.д. Ну а если быстрее - то выбор очевиден.

    С третьей стороны может быть соглашение в компании относительно верстки и в нем этот момент может быть описан (скорее всего в пользу SVG). Тогда ничего не придумываем и действуем в соответствии с ним - постоянство в коде очень важно для его поддержки.

    С четвертой стороны могут быть такие элементы, что на CSS их не получится сделать кроссбраузерно (с учетом утвержденного списка браузеров). Тогда SVG - наш выбор.

    С пятой стороны могут быть анимации у этих элементов. Там нужно смотреть, но иногда вариант с SVG можно будет анимировать как задумано, а вариант на CSS - нет.

    С шестой стороны есть вопрос производительности. Часто для имитации одного элемента в SVG нужен десяток-другой элементов, стилизованных с помощью CSS. А если таких элементов на странице сотни (и они превращаются в тысячи), то это начинает влиять на скорость применения стилей к странице.

    Итого: иногда CSS - это быстрый и надежный вариант. Но у него есть ограничения, так что на практике SVG используется для этих задач чаще. И да, проверять кроссбраузерность стоит в любом случае.
    Ответ написан
  • Code Review вёрстки?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    UI developer. Верстаю неверстаемое.
    1. Картинки, как и любые бинарники, в репозиториях лучше не хранить. Любые изменения в них - и они будут раздувать размер репозитория до безобразия. Для демо - норм, но по жизни - лучше картинки хранить отдельно.
    2. Почему минифицированные зависимости лежат прямо в исходниках, а не подгружаются по необходимости в node_modules?
    3. Цвета и шрифты в стилях то задаются как переменные, то как магические значения в коде. Лучше уж все делать на переменных, раз уж начали.
    4. Скриптов слишком мало, чтобы что-то говорить.
    5. Во втором лендинге все стили в одну кучу - не удобно, лучше бы поделить как в первом. И писать префиксы руками в 2020 году - не комильфо. Для этого есть автопрефиксер.
    6. Табом страницы не табаются. Ну то есть табаются, но этого местами совсем не видно, а некоторые элементы как я понимаю совсем недостижимы.
    7*. Есть проблемы с контрастностью. Вероятно это косяк дизайнера, но вы, как профессионал в своей области, должны такое поправлять, даже если с самим дизайнером связи нет (как в случае с найденным в сети макетом).
    Ответ написан
  • Position: fixed; - фиксирует элемент не на экране, а в родительском блоке. Как исправить?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Без кода сложно говорить, но третий глаз подсказывает, что скорее всего у родительского блока задано свойство transform, filter или will-change. Уберите его и все встанет на свои места.
    Ответ написан
  • Как сверстать эту магию?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Вариант, предложенный Максим Ленский не адаптивный и ломается при изменении контента, так что предложу свой.

    Треугольники можно было упустить, не в них суть)


    Ну ну совсем так. При верстке таких сайтов важно сохранять контекст, в котором был дизайнер (если с ним есть контакт, то лучше все обсудить с ним, но в нашем случае пример в вакууме, так что думаем сами). Конкретные размеры обычно не так важны, как контекст. Здесь его задает равномерная линия между треугольниками и ее важно сохранить. Исходя из этого соображения нужно посчитать, какого размера должны быть треугольники, чтобы все влезало и "было красиво", учитывая, что высоты всех блоков могут меняться. CSS у нас не дает возможности делать вычисления исходя из высоты соседних элементов, так что придется добавить щепотку JS. Ну а дальше - дело техники.

    5e202e499c905300447523.png

    codepen.io/sfi0zy/pen/zYxJNmG.
    Ответ написан
  • Как изменить код чтобы он работал?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    term does not evaluate to a function taking 2 arguments


    a = max(b, c, d);

    Стандартная функция max из algorithm не имеет варианта для поиска наибольшего из трех чисел в таком виде. Есть для двух. Если нужно для трех - вам придется написать такую функцию самостоятельно. Ну или загуглите "cpp max of 3 numbers".
    Ответ написан
  • Review верстки: ошибки и замечания???

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    По внешнему виду сказать особо нечего, дизайн слишком простой. Есть пара замечаний:
    • Дюже мелкий шрифт на 15.6' fullhd мониторе. Нужно увеличить. Это один из тех моментов, когда может быть накосячили и не вы (а дизайнер), но исправить нужно. Вообще дизайнеров всегда нужно проверять - они тоже люди, ошибаются иногда.
    • Обводка вокруг элемента, на котором сейчас фокус, не всегда видна, особенно вокруг картинок. Нужно что-то с этим сделать.


    По коду и сборке:
    • Concat для скриптов? Весьма своеобразный выбор. Лучше освойте сборщики, тот же webpack, и используйте везде его.
    • Освойте хотя бы классы из ES6. Делать компоненты в виде функций и париться с прототипами в 2020 году - не комильфо. И просто не удобно.
    • Собранный CSS/JS не нужно хранить в директории с исходниками. Вообще все что генерируется при сборке - не исходники. Когда все в кучу смешано - думать сложнее.
    • Картинки в git репозитории в общем случае лучше не хранить.
    • Зависимости проще и понятнее ставить из npm, а не копировать себе файлы.
    • JS стоит форматировать поаккуратнее, будет проще бысто читать и понимать его. Загуглите стайлгайд от airbnb.
    • Селекторы в CSS не способствуют пониманию происходящего, поддержке и переиспользованию кода. Почитайте про CSS методологии. Для начала про БЭМ. Поймите саму суть, зачем они нужны, и используйте.
    • Подтяните английский, чтобы в самих селекторах не было тупых грамматических ошибок (в комментариях - черт с ними, а вот селекторы переиспользуются много где, поэтому лучше, если имена у них понятные и грамматически верные).


    Советы, как и в большинстве таких вопросов, простые:
    • Изучайте современный стек инструментов, старайтесь понять не форму, не внешние признаки их использования, а суть, зачем они нужны.
    • Больше практикуйтесь.
    Ответ написан
  • Как работает async js?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    У тега script кроме атрибута async есть еще defer. Скрипты с этим атрибутом загружаются все асинхронно, но выполняются потом в том порядке, в котором записаны в html (только они все должны быть отдельными файлами, не инлайновыми скриптами).

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

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    если добавляю 1-2 svg, то все норм, но стоит добавить больше, то во-первых на некоторых изображениях какого-то фига меняется цвет заливки, во-вторых некоторые элементы одного SVG файла не отображаются.

    Вангую, что в SVG файлах есть id у масок, фильтров и.т.д. Пока SVG находится в вакууме, как отдельная картинка, все ок. Когда вы вставляете SVG-картинки прямо в страницу - все id попадают как бы в "общую область видимости" страницы. А как мы знаем id на странице не должны дублироваться. Ваша магия очень похожа на то, что что-то где-то продублировалось. Так что вам нужно пройтись по всем SVG и сделать везде уникальные id для элементов, чтобы при вставке в страницу не было нигде дублей.
    Ответ написан
  • Как скрыть элементы dom в скрипте?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    Без работающей демки сложно говорить, но там много раз повторяется следующая конструкция:
    // Hide typebox
    if (this.options.use_typebox)
        this.typebox.empty();
    
    // Hide new result list
    if (this.options.use_listbox)			
        this.listbox.setStyle('display', 'none');


    Думаю эти действия и нужно использовать, чтобы скрывать элементы в вашем случае. Получится что-то такое:

    var myAutocompleter = new GooCompleter(/*...*/);
    
    if (/* что-то случилось */) {
        myAutocompleter.typebox.empty();
        myAutocompleter.listbox.setStyle('display', 'none');
    }
    Ответ написан
  • Linux несколько вопросов от новичка, посвятите?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    Кто уже долгое время юзает линукс, как вам?

    6 лет, полет нормальный.

    Удобно ли для веб-разработки

    Да.

    Как работает Steam?

    Работает.

    Есть ли возможность работать с MS Office( >=2007)?

    Можно экспортировать документы из LibreOffice в необходимых форматах.

    Наслышан про Ubuntu, ее выбирать и какой версии?

    Если брать Ubuntu, то только LTS (18.04 на текущий момент). Но я бы лучше взял Elementary OS.
    Ответ написан
  • Периодическое мерцание элементов?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    В postcss-trolling есть готовая CSS анимация под вашу задачу. Нужно лишь задать разный animation-delay элементам (возможно с помощью :nth-of-type или :nth-child).
    Ответ написан
  • Как решить проблему с babel?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    Попробуйте использовать пресет не "env" из "babel-preset-env", а "@babel/preset-env" из одноименного пакета.
    Ответ написан