• Как сверстать элемент в виде буквы с background-image?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Вы там в комментарии написали:
    Единственная проблема, что в IE11 не работает


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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    если взять этот провод не рукой а например ручкой или карандашом и подкидывать даже, ничего не происходит

    Вы бы заземление корпуса проверили, а то мало ли что (вы - проводник, пластиковая ручка и деревянный карандаш - можно считать, что нет).
    Ответ написан
  • Как реализовать поворот треугольника за курсором мыши?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    как я понимаю это работа с canvas

    Совсем не обязательно. Треугольник можно вставить как картинку (формат SVG будет хорошим выбором), расположить его абсолютным/фиксированным позиционированием в нужном месте, а дальше к нему применять CSS-трансформацию "rotate". Пример того, как следить за мышкой и применять трансформации есть вот тут.
    Ответ написан
    Комментировать
  • Как преобразовать less в css на стороне сервера и получить ответ в css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Нагружать сервер компиляцией? А вы уверены, что у вас хватит вычислительных мощностей когда пользователей станет больше? Может лучше на клиенте компилировать (пример)?
    Ответ написан
  • Объясните как работает position: fixed; когда используется transform?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    кто может объяснить это поведение?

    Спецификация может объяснить:

    For elements whose layout is governed by the CSS box model, any value other than none for the transform also causes the element to become a containing block, and the object acts as a containing block for fixed positioned descendants.


    Добавили элементу transform - все его потомки с position:fixed начинают отсчитывать свое расположение от него. Они начинают считать его своим "внешним блоком", а не вьюпорт или страницу, как это происходит по умолчанию для position:fixed.
    Ответ написан
    3 комментария
  • Можно ли с помощью normalize.css или reset.css добиться полной кросбраузерности или для этого обязательно нужен JavaScript?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Эти инструменты вообще не влияют на кроссбраузерность, они просто избавляют от необходимости помнить в каких браузерах какие стили применяются по умолчанию.
    Ответ написан
    Комментировать
  • Зачем нужен nunjucks, как он может помочь в фронтенд верстке?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как он может помочь в фронтенд верстке? Не могу понять.

    В целом nunjucks своим синтаксисом напоминает handlebars, а еще есть pug (бывший jade) - схожий инструмент (по совместительству препроцессор), который вам точно стоит посмотреть.

    Все эти инструменты (их вообще много разных), которые можно объеденить словом "шаблонизаторы", фронтендеру нужны в разных ситуациях:
    • Переиспользование разметки при верстке (один раз компонент сверстали, десять раз импортировали)
    • Удобное отображение загруженных с сервера данных на странице (в одностраничниках с большим количеством данных - просто маст хев)
    • В некоторых случаях ускорение верстки, да и выглядит она более красиво и структурированно
    • Создание шаблонов под автогенерируемую документацию и тесты

    Можно придумать и другие варианты использования.
    Ответ написан
    Комментировать
  • Можно ли внутри section использовать еще один section?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Рекомендации от W3C говорят, что можно.
    Ответ написан
    1 комментарий
  • Найм разработчиков через кадровое агентство?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    По личному опыту (как соискателя и просто из общения с ними) кадровые агенства и хедхантеры-фрилансеры частенько имеют следующие проблемы:
    1. Смотрят ключевые слова, но в упор не видят контекст, в котором они используются. Если в резюме фронтендера написать "есть небольшой опыт с PHP" - они вполне могут пригласить пособеседоваться на вакансию, где ищут сеньера-бэкендера.
    2. Могут отсекать хороших специалистов из-за того, что не услышали нужного ключевого слова. Это хорошо видно, когда у них есть список "синонимов" - похожих инструментов, но того, про который сказал соискатель, в списке не оказалось.
    3. Не могут корректно оценить ответы на вопросы. Это касается и тестов в онлайне и вопросов по телефону. Проверяются ответы по спискам "правильных" ответов, так что фактически верный ответ, не входящий в список формально верных, не является верным.
    4. Скрывают информацию о компании, чтобы было сложно связаться напрямую, без их участия. В результате соискатель, понимающий, что вакансия интересная, не может никак связаться с компанией в ситуации, когда агенство отшивает его из-за вышеупомянутых проблем.
    5. Не могут вести переговоры. Это не сколько проблема, сколько особенность. Скажем у вас, как вы говорите, не самая высокая з/п. Но вы, как представитель конечной компании, можете поторговаться. Снизить изначальные (более высокие, недоступные вам на данный момент) ожидания кандидата предлагая частично удаленную работу, неполный рабочий день (знаю людей, которые готовы работать за меньшие деньги, но условно с 9.00 до 15.00), еще какие-то плюшки, важные для него. Таким образом всем будет хорошо - вы уложитесь в бюджет, получите более дорогого специалиста, а он будет доволен хорошими условиями. Агенство такие переговоры вести не может и этого специалиста вообще рассматривать не станет.
    Ответ написан
    Комментировать
  • Как сменить версию nodejs?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Попробуйте n. Это небольшой и интуитивно понятный менеджер версий для ноды.
    Ответ написан
    Комментировать
  • Возможно ли сделать такой переход между различными страницами?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Пока что я вижу возможность сделать это внутри одной страницы

    Так и делайте внутри одной страницы. Это называется "одностраничное приложение" (SPA - single page application).

    Если возможно, то с помощью каких инструментов?

    Инструментов много, все на вкус и цвет разные. Из модного и достаточно простого можно взять vue и добавить к нему vue-router, чтобы ходить между страницами.
    Ответ написан
    Комментировать
  • Конструктор комнаты в we?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Я бы предложил (как вариант) поступить следующим образом:
    1. Стены сделать обычными div'ами, с помощью CSS-трансформаций повернуть в нужную сторону.
    2. Предметы, все, что не меняется - в картинку с прозрачным фоном. Положить слоем поверх "стен".
    3. "Обои" - это background-image, нужно будет только сообразить, как выбирать размер в зависимости от картинок, которые вы будете использовать.
    4*. Если есть желание сохранять это потом в виде картинки - можно загуглить html-to-canvas, дальше png сохранить не сложно.
    Ответ написан
    Комментировать
  • Как использовать gremlin, monkey testing?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    актуально ли использовать gremlin.js

    Ну инструмент не очень популярный - всего 636 загрузок с NPM за последний месяц. Давно не обновлялся, но свою задачу по всей видимости продолжает решать, так что если вам он нужен - используйте.

    Если б он был такой крутой, то его б все использовали

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

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Абсолютное позиционирование, вырезание картинок, before/after... Ох и понапридумывают всякого...
    .example {
        background: linear-gradient(to right, #F0F3BD, #F0F3BD), // левая граница
            linear-gradient(to right, #F0F3BD 0%, #F0F3BD 70%, #fff 70%, #fff 100%), // верхняя
            linear-gradient(to right, #F0F3BD 0%, #F0F3BD 70%, #fff 70%, #fff 100%), // нижняя
            linear-gradient(to right, #fff, #fff); // правая
        background-size: .5rem 100%, 100% .5rem, 100% .5rem, .5rem 100%;
        background-position: top left, top left, bottom left, top right;
        background-repeat: no-repeat;
    }

    Один элемент. Один фон. Для всего остального есть CSS.
    codepen
    5aa57a2048bd2215197814.png
    Ответ написан
    Комментировать
  • Что отвечать на вопрос: "Насколько вы знакомы с жанром RPG, в какие RPG вы играли, назовите лучшие RPG на ваш взгляд"?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    ...на позицию тестировщика ...назовите лучшие RPG на ваш взгляд

    Это очевидно - вам нужно выбрать те, с которыми вы знакомы и которые славятся отсутствием багов, и что вы, как тестировщик, будете прикладывать все усилия, чтобы продукты вашей компании продолжали быть такими же клевыми в плане качества. Дальше мысль можно развивать в разные стороны в зависимости от того, каким тестированием вы там занимаетесь и какие глобальные цели перед собой ставите.
    Ответ написан
    1 комментарий
  • Что за ошибку выдаёт JS?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Скорее всего ваш скрипт с атрибутом async начинает выполняться раньше, чем загрузится jQuery. Посмотрите этот вопрос на SO - там есть возможные решения проблемы.
    Ответ написан
    Комментировать
  • Как обновленять минифицированные стили в Chrome?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Сейчас я её решил переименованием файлов, что довольно странно делать

    Общепринятое решение - использовать ссылки вида my-file.css?v=1.0.0 и при обновлении изменять номер версии. Сами файлы переименовывать не обязательно.
    Ответ написан
    Комментировать
  • Какие сборщики проектов сейчас используют?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Помню пару лет назад самым популярным был gulp, а до него grunt. Сейчас что-то особо про них не слышно.

    Потому что из разряда "хайповых" они перешли в разряд "стабильно решают свою задачу". Никуда они не делись. Те, кто делает SPA, любят Webpack, но это опять же смесь моды и готовых конфигов под те или иные фреймворки. Никто не мешает сочетать эти инструменты, особенно если вы делаете "не-SPA" - вебпаком собирать скрипты или стили, а галпом решать сопутствующие задачи.
    Ответ написан
    Комментировать
  • Баг transform: translate в FireFox?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Существует ли какое-то решение проблемы, помимо замены translate?

    Не используйте пустые кадры в keyframes, указывайте все в явном виде:
    @keyframes logo {
        0% {
            transform: translateX(-120%); /* Раз */
        },
        10% {
            transform: translateX(-120%);
        }
        15% {
            transform: translateX(0%); /* И два */
        },
        100% {
            transform: translateX(0%);
        }
    }
    Ответ написан