• Как сделать такую штуку?

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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Вы забыли подключить jQuery UI. На CodePen библиотеку можно легко подключить введя ее название в поле "search CDNs..." в окошке для подключения скриптов - она есть на cdnjs, так что вы сразу увидите ее в выпадающем списке.
    Ответ написан
    5 комментариев
  • Прорисовка SVG?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Нужно с помощью метода getTotalLength() узнать длину path (она равна 3904) и подставить ее везде, вместо вашего магического числа 1000.
    Ответ написан
    5 комментариев
  • Как прописать CSS стили конкретно для Firefox?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    На сайте browserhacks.com вы найдете самые разные варианты проверок (как на CSS, так и на JS) на те или иные браузеры, в частности - Firefox там тоже есть.
    Ответ написан
    Комментировать
  • Как вставить 3д модель с помощью three.js?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    В сети есть множество примеров. Есть официальный пример из документации самой Three.js. Или вот, например, другой вариант, с дополнением в виде статьи.
    Ответ написан
    Комментировать
  • Как реализовать такое?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    нет 3d модели предмета

    но
    модель крутится

    Если вы хотите сделать вращение модели, то вам в любом случае нужна либо 3d-модель и отображение ее с помощью WebGL, либо куча картинок с видами на нее со всех сторон с разницей в N градусов и последовательное их показывание пользователю (ну или видео, что по сути - тот же набор картинок). Но тут важно отметить, что обычно такие картинки не рисуют прямо руками, а делают модельку и потом ее рендерят с разных сторон, т.к. это получается быстрее, чем рисовать.

    Подход с заранее отрендеренными картинками может показаться избыточным, но на деле он позволяет добиться более реалистичного освещения с бликами, рефлексами и разными материалами вроде стекла или меха, которые можно сделать в 3d в теории, в соответствующих редакторах, но в реальном времени рендерить в браузере не получится из-за проблем с производительностью. Нужно это или нет в вашем случае - решать вам.

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Для квадратов с размером одежды - можно просто border сделать. Круги можно нарисовать с помощью radial-gradient() в фоне, без создания дополнительных элементов (чередуя цвет и прозрачность по мере удаления от центра).

    В таких переключателях не так важно, как вы их сверстаете, важна доступность. И вот тут самая сложность и кроется. В этом маленьком компоненте нужно подумать про поддержку клаиатуры, подумать про то, что читалки должны понимать, что это radio-инпут и здесь что-то выбирается, ну и должны быть по крайней мере очевидные изменения во внешнем виде на :hover/:focus и выделение выбранного варианта. Последнее решается с дизайнером. А про первые два - полезно загуглить для своего развития, даже если ваш заказчик/начальник скажет, что "денег нет, но вы [пользователи с ограниченными возможностями] держитесь".
    Ответ написан
    1 комментарий
  • Cтоит ли учить бустрап?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    У вас есть рабочая задача. Вы выбираете инструменты для ее решения. Если инструмент подходит для ее решения, упрощает вам жизнь - вы его используете. Если инструмент не подходит для решения задачи и только все усложняет на ровном месте - вы его не используете. Вне контекста ваших задач вопрос не имеет смысла - возможно бутстрап вам подойдет для их решения, а возможно, что и нет. И вы можете заменить слово "бутстрап" на любое другое название инструмента, логика останется той же. А просто познакомиться с каким-то инструментом для расширения кругозора - лишним не будет. По крайней мере будете знать, для каких задач он подходит и в будущем будете делать более осознанный выбор.
    Ответ написан
    Комментировать
  • GreenSock или anime.js?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    очень сложный с анимационной части сайт

    Ну "очень сложный" - понятие растяжимое. Если нужен сложный морфинг или физика в 2d - однозначано берите GSAP, у него есть готовые плагины для этого (а значит не нужно думать об интегрировании чего-то со стороны). А так в большинстве повседневных задач вы разницы между этими инструментами не заметите, тут скорее на вкус и цвет: GSAP - это более "энтерпрайзно-замороченный" инструмент с кучей кнопок, а anime.js скорее ближе к unix-way - маленький и решающий одну задачу.
    Ответ написан
    4 комментария
  • Как сделать адаптивный по высоте треугольник на CSS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    В современном CSS есть замечательная штука - clip-path, которая позволяет сделать элемент нужной формы. В контексте вашей задачи это решение гораздо надежнее хаков с градиентами, т.к. будет по-настоящему тянуться на любую высоту (правда IE эту красоту не поддерживает):
    Ответ написан
    3 комментария
  • Тупой вопрос про GitHub и форки?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Если я сделаю форк какого-то репозитория, а затем в оригинальный репозиторий внесут изменения, то появятся ли они в моем форке?

    Нет.

    Если нет, то как сделать, чтобы они появились?

    Есть официальный туториал.
    Ответ написан
    2 комментария
  • Hover у тега svg?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Проблема в том, что у вас дублируются id у элементов на странице.
    Ответ написан
    1 комментарий
  • Какие замечания к JS слайдеру?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    По функционалу:
    • Иногда подвисают кнопки "влево" и "вправо", не реагируют по несколько секунд.
    • При переходе с последнего слайда к первому мелькают они все. Было бы круто, чтобы был просто переход, как между остальными.
    • С клавиатуры нельзя попользоваться, свайпы тоже не поддерживаются.
    • В начале есть что-то вроде document.querySelectorAll в большом количестве. Это намекает на то, что два слайдера на одной странице работать не будут (все смешается в кучу).


    По коду:
    • Код ужасно отформатирован. Читать сложно (читай поддерживать сложно). Ознакомьтесь хотя бы с Airbnb JavaScript Style Guide и поймите, зачем делать код читаемым. Также там мешанина из ES6+ и каких-то древних хаков с that=this, самовызывающимися функциями и.т.д. Вы же уже используете современный язык - так используйте только его. Код будет в разы проще по структуре. Сейчас там черт ногу сломит. И очень очень очень очень очень очень длинные функции тоже мешают ориентироваться в происходящем.
    • Бессмысленные комментарии. Они просто дублируют код.
    • Сторонний код лучше загружать через NPM и подключать из node_modules, а не копироваать себе, и тем более не стоит руками смешивать разные инструменты в один файл. И да, они там вообще используются или просто лежат?
    • В репозитории отсутствуют конфиги и инструкция по сборке. Все это должно быть. Без них непонятно, как вообще это пересобрать.


    Рекомендации:
    • Почитайте про стиль кода, про то, как писать просто и понятно. Лучше этому сразу научиться.
    • Загуглите, как и зачем писать комментарии (и как из них генерировать документацию).
    • Поймите, зачем нужны все стандартные инструменты - сборщики, препроцессоры, линтеры, пакетные менеджеры, системы контроля версий и.т.д. Это понимание поднимет на новый уровень ваши поделки в плане их дальнейшего переиспользования. Да и вам поможет в работе.
    • Тестируйте. Хотя бы вручную.
    Ответ написан
    3 комментария
  • Undefined, в чем причина?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Я же делал проверку на Element, значит у объекта точно должно быть это свойство html

    if (value instanceof Element) {
        value = getHtml(key);
    }

    Ну value может быть и является "instanceof Element", но дальше вы вызываете функцию getHTML, передавая в качестве параметра строку. А никакого свойства html у нее, разумеется, нет.
    Ответ написан
  • Как правильно расположить один предмет относительно другого?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Вожу её туда-сюда и не могу выбрать ей правильное место. Перемещу на одно место, вроде, норм. Потом смотрю — нет не норм и так много раз...

    Обычно это означает, что этот элемент там вообще не нужен. У каждого элемента на странице должно быть какое-то предназначение, не нужно их добавлять просто так, чтобы были. Какое предназначение у иконки телефона в данном случае? Тут и так понятно, что +7 495... - это телефон. То есть иконка, поясняющая, что это такое, тут не нужна (если бы там был ник с собачкой, то можно было бы добавить иконку инстаграма или твиттера, чтобы было понятно, к чему он относится, но телефон - штука универсальная). Если кроме логотипа и телефона в шапке ничего нет, то иконка, помогающая найти что-то на странице, тут тоже не нужна (ну то есть яркая жирная надпись и так бросается в глаза). В плане исправления композиции тоже не совсем понятно, нужна ли она там (иногда иконками можно сбалансировать негативное пространство, но тут скорее светящаяся штука его поломает). Так зачем она там?
    Ответ написан
    Комментировать
  • Почему не могу в браузере запустить react приложение?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Uncaught SyntaxError: Cannot use import statement outside a module

    Скрипту нужно явно задать type="module", чтобы браузер знал, что этот скрипт - модуль, и в нем можно использовать импорты и экспорты. А по умолчанию скрипт за модуль не считается.
    Ответ написан
    2 комментария
  • Стоит ли ввести тег Психология?

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

    Проблема в том, что вопрос по теме, заданный в вакууме, да еще и на всеобщее обозрение, не показывает всю картину происходящего с человеком. Иногда нужно кучу времени потратить, чтобы человека просто один на один разговорить и он рассказал, а что на самом деле у него происходит. Что-то ему будет тяжело принять, что-то он бы не хотел распространять о себе или других людях (это кстати одна из причин, зачем нужна конфиденциальность в этом деле). Поэтому 99% советов, которые дадут в ответ на такой вопрос в сети не соответствуют контексту, в котором автор формулировал вопрос, и хорошо, если они не сделают ему хуже. А учитывая, что психологией программисты не занимаются – советы часто будут не только вне контекста, так еще и вредными по определению (как, например, популярный совет - взять на себя большую нагрузку, когда ты и так истощен до предела). Поэтому формат вопросов-ответов в том виде, в котором он есть на Хабр Q&A тут не годится.

    Так что заводить такой тег именно здесь не имеет смысла. Он мало того, что будет непрофильным, так еще и пользы не принесет. Гораздо лучше задаться вопросом массового образования программистов – чтобы люди не только мыли руки после туалета, но и про психогигиену не забывали, чтобы проблемы не становились очевидными, когда уже все плохо и без врача и серьезных перемен в жизни не обойтись. Но задачка эта не из простых, конечно.
    Ответ написан
    Комментировать
  • Учусь веб дизайну, какие ошибки?

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

    • “Untitled admin” в углу – такие названия имеют свойство быть довольно длинными и в боковую панель оно уже не влезет. Может его как-то в центр вынести, к “панели управления”? И почему это единственная надпись шрифтом с подчергиваниями?
    • Иконки какие-то все похожие и не интуитивно понятные, может с ними поиграть? Про карты вообще бы не догадался, если бы не прочитал.
    • Справа цвета какие-то обратные – рост красный, а падение продаж синее. Было бы логичнее рост делать зеленым, а падение красным.
    • То же с заказами – один “заказ отменен” красный, а другой, такой же – фиолетовый. Пусть уж все отмененные будут красными. И браузеры – почему один зеленый, другой красный, а третий вообще оранжевый? Если это ничего не значит – пусть все будут нейтрально – фиолетовыми.
    • Есть проблемы с контрастностью, особенно внизу. Серые оттенки прохо различаются, особенно на мониторе, который “светит” вверх.
    • Плашка с файлом с тенью. Спорное решение: когда одни элементы с тенями лежат поверх других элементов с тенями – это немного ломает восприятие. Может ее как-то по другому выделить?
    • Чат внизу, после скролла на полтора экрана, какой-то внезапный. Сверху ничего на него не указывало. Может под “почтовым ящиком” должен быть пункт “чат”, чтобы переходить к нему (ну или на отдельную страницу с ним)?
    • Наверное фиолетовую полосу нужно растягивать дальше, а слева не должно быть тени от панели (но тут не совсем понятно под какое это разрешение экрана).


    Ну и мобильная версия должна быть.
    Ответ написан
    1 комментарий
  • Как сделать шар?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Ответ написан
    Комментировать
  • Как для современных браузеров выводить анимацию, а для старых картинку?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Можно сходить на Browserhacks.com, взять проверки на нужные вам браузеры и запускать анимацию в зависимости от их результата. Но это костыль, конечно. Тем более, что Safari - это не "старый браузер".
    Ответ написан
    Комментировать