Задать вопрос
  • Почему не работает наследование методов?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    function Figure() {
        THREE.Group.call(this);
        this.add('TEST');
    }
    
    Figure.prototype = Object.create(THREE.Group.prototype); // <-- вы забыли вот это
    
    let f = new Figure();
    Ответ написан
  • Что использовать для адаптивной вёрстке?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    для адаптивной вёрстке?

    В современной практике нет разделения на резиновую/адаптивную/отзывчивую верстку - это все единый процесс создания компонентов, которые хорошо выглядят на разных размерах экрана. Ответ на ваш вопрос очевиден: используйте тот инструмент, который хорошо решает вашу конкретную задачу. Не нужно вообще всегда использовать вот этот или вот тот инструмент, потому что кто-то в интернете так сказал. Смотрите на логику поведения/применения ваших конкретных компонентов и выбирайте:
    1. px - если нужно жестко задать размер
    2. % - если размер привязан к чему-то в процентном отношении
    3. vw - если нужно привязать что-то к размеру вьюпорта (например размер шрифта)
    4. vh - то же самое (ну и vmin/vmax туда же)
    5. em - если нужно привязать размер чего-то к размеру шрифта (текущему или родительскому)
    6. rem - то же самое, но глобально (можно использовать везде и для всего)
    7. cm, mm, in, pt, pc - если нужно красиво выводить на печать
    8. ex, ch - не сильно удобные единицы измерения в текущих реалиях
    Ответ написан
    Комментировать
  • Как лучше всего реализовать это меню?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    1. Окружность большого диаметра - большой div, большой border-radius, тонкий border.
    2. Пункты меню расположены абсолютным позиционированием один поверх другого, затем с помощью transform: rotate подвинуты в нужные положения (как в этом примере, только углы меньше).
    3. Затемнение сверху и снизу - это линейный градиент поверх всего этого, в центре он прозрачный, по краям - видимо синий.
    4. Центральный (активный) элемент меню при попадании в центр изменяется - из точки увеличивается с помощью transform: scale иконка, а вокруг нее делается что-то такое.
    5. Соответственно остается прикрутить js-логику: считать углы в зависимости от количества элементов, все это поворачивать (при переходе к новому пункту меню), добавить поддержку клавиатуры (и видимо мышки, чтобы меню проворачивать колесиком) и адаптивность (на маленьких экранах можно всю эту красоту спрятать и оставить пункты меню в столбик).
    Ответ написан
    5 комментариев
  • Как сделать анимацию стирания кода?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Посмотрите пример с сердечком из статьи SVG маски и вау-эффекты: о магии простыми словами. Он должен навести на правильные мысли.
    Ответ написан
    Комментировать
  • Чем отличаются псевдоклассы с разным двоеточием?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    В древние времена все браузеры поддерживали только одинарное двоеточие. В наше время (начиная с IE9) принято использовать:


    Эта рекомендация делает код немного более читаемым в ситуациях, когда таких псевдо-сущностей используется много.
    Ответ написан
    6 комментариев
  • Как сделать анимацию жидкости с помощью SVG?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Вот вам наглядный пример того, как все будет тормозить, вплоть до зависания страницы, если применить фильтры и все немного увеличить (и не говорите, что на вашем 12ядерномразогнанноммакпро не тормозит - у пользователя его не будет). Поэтому если выбор пал на SVG - анимируйте path, а потом заливайте его градиентом, как это и сделано на картинке. В простейшем виде можно сразу нарисовать десяток состояний каждой кляксы и последовать примерам из вот этой статьи.
    Ответ написан
    Комментировать
  • Как сверстать элемент в виде буквы с 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 комментарий