Задать вопрос
  • Почему не могу в браузере запустить 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 - это не "старый браузер".
    Ответ написан
    Комментировать
  • Как сделать такие вырезы и бордер?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    С помощью градиентов можно нарисовать все, что угодно:

    Ну и обычными картинками тоже можно, через border-image или так же, через фоны.
    Ответ написан
    Комментировать
  • Как сделать такой слайдер с такими эффектами?

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

    Ну и простенький примерчик чего-то похожего по принципу действия:



    P.S.: Но вообще-то в плане производительности было бы уместно все эти геометрические штуки рисовать на канвасе, а не делать кучу одновременных изменений CSS-свойств у элементов.
    Ответ написан
    Комментировать
  • Что за библиотека используется, в данном коде?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Непонятно что за синтаксис использования переменных через $somename

    Тут что-то все про PHP говорят, но вообще-то в JS (а вопрос про него судя по тегу) всегда имена переменных можно было начинать не только с буквы, но и с символов "_" и "$". Это не какой-то "специальный синтаксис".

    Я еще помню времена, когда таким образом разделяли в коде "обычные" элементы, например полученные через стандартные querySelectorAll, getElementById и.т.д., и "необычные" элементы, полученные через обертку в виде jQuery. В наше время более частый кейс для такого именования - сокращения для имен переменных при отладке, например в Chrome Dev Tools у нас есть переменные с именами $0, $1 и.т.д. Или можно использовать доллар прям в виде одного символа - вот есть библиотека lodash, методы из нее загоняют в переменную-контейнер с именем "_", а есть еще набор своих утилит, краткое имя "_" уже занято, но можно загнать свои утилиты в переменную "$". И будет все аккуратно и удобно.
    Ответ написан
    Комментировать
  • Эффект движения изображений при scroll?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Есть очень прикольная штука - Locomotive Scroll.
    Ответ написан
    Комментировать
  • Как сделать эффект поворота-разворота при скролинге как на сайте?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    0. Делим 360 градусов на N частей. Получаем N направлений.
    1. Делаем по картинке с коробкой для кажного из направлений. Сохраняем по порядку.
    2. Загружаем все картинки (по одной, или спрайт с ними) на клиента.
    3. Выводим на канвас по одной картинке, выбирая их в зависимости от позиции скролла.

    Альтернативно - то же самое, но вместо канваса меняем url у элемента img (именно так у них сделано).
    Альтернативно - сообразить 3D модель коробки, текстуру и загуглить, как делать презентации товаров на Three.js.
    Ответ написан
    4 комментария
  • Анимация на canvas/js?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    На CSS вы это никак не сделаете - там неравномерное растяжение картинок присутствует. Тут "начальник отдела разработки" либо не шарит во фронтенде, либо пытается сбить цену. Но штука из разряда "ябзаверстал", а я тут как раз собираю коллекцию примеров с шейдерами, так что набросал похожий эффект для нее, только без кляксы в центре (там есть немного лишнего кода, но это издержки, чтобы серия примеров не сильно отличалась).


    * Если вдруг будете копировать себе, не забывайте про лицензию.
    Ответ написан
    8 комментариев
  • Что за эффект при скролле?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Все это строится на шейдерах в WebGL.

    Первый пример очень похож на вот эту демку (лучше открыть в отдельном окне):


    А вот найти готовое решение один в один как на какой-то гифке из сети очень сложно. Часто его не будет. Дизайнер концепт нарисовал, а на практике никто такое еще не запрограммировал. В такой ситуации - только руками писать. Советую почитать введение в программирование шейдеров для верстальщиков и посмотреть стримы Юрия Артюха (меня терзают смутные сомнения, что он когда-то делал эффект, как во втором вашем примере).
    Ответ написан
    1 комментарий
  • Почему не работает js в сафари браузерах?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    modal.show(...);

    Скорее всего проблема тут. На SO много вопросов в стиле "jquery show/hide не работает в safari". В общем случае можно дать рекомендацию не использовать функции show/hide, а добавлять свои CSS-классы к элементу в зависимости от его состояния.
    Ответ написан
    4 комментария
  • Как сделать, чтобы эффект blur не выходил за бэграунд?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    .main-header {
        overflow: hidden;
    }
    Ответ написан
    Комментировать
  • Gulp watch не отслеживает измения в стилях и .js файлах?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Кажется тут ./src/css/**/.css
    должна быть еще звездочка ./src/css/**/*.css.

    И вот тут ./src/js/**/.js
    тоже ее не хватает ./src/js/**/*.js.
    Ответ написан
  • Как правильно настроить внутреннюю тень SVG?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Тут все дело в том, что вы используете для создания тени не саму кривую штуку, а "прозрачность" вокруг нее. Это немного нелогично с точки зрения понятия "тень". То есть у вас тень отбрасывает "пустота" вокруг кривой штуки (и эта "пустота" еще и обрезается в неудачном месте). Тут нужно использовать обратный подход, когда именно кривая штука используется для создания тени. В вашем примере для этого нужно поменять tableValues в feFuncA с "1 0" на "0 1" и в первом feComposite заменить "in" на "out".

    Как альтернативный пример:


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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Пример километрового SVG


    Это не SVG. Это обычная растровая png картинка, которую закодировали в base64 и вставили в SVG. Сжать никак не получится (ну то есть насколько вы растровую картинку сожмете?). Вам нужно эту штуку нарисовать изначально в векторе, тогда она будет маленькая и аккуратненькая.
    Ответ написан
    3 комментария
  • Где тут ошибка?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Набор id у элементов в html: 1, 2, 6, 4, 5, 6.
    Набор id у элементов в js: 1, 2, 3, 4, 5, 3.

    Итого: третий и последний элемент, которые добавляются в массив, отсутствуют в html.
    Ответ написан
  • Работает ли PHP на GitHub Pages?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    GitHub Pages предоставляет только хостинг для статики, никаких серверных скриптов там не запустить. Так что да, если вам нужен PHP, то этот вариант не подойдет.
    Ответ написан
    Комментировать
  • Почему сафари сжимает SVG?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    У Safari есть проблемы с отображением SVG-картинок внутри flex-контейнеров. Стандартное решение - сделать непосредственным родительским элементам этих картинок display:block или inline-block.
    Ответ написан
    Комментировать