Задать вопрос
  • Как сделать Респонсивный текст во всем проекте?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Комментировать
  • Сайты/каталоги/базы с новыми сайтами и приложениями?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Интересность - понятие растяжимое и очень субъективное. Но если говорить про те вещи, которые могут быть полезными, то вам поможет twitter, как это ни странно. Подпишитесь на несколько десятков известных людей в интересующей области и будете видеть все полезные сайты и инструменты, которые появляются в их поле зрения. Там же можно найти ботов, которые постят полезности по конкретным темам.
    Ответ написан
    3 комментария
  • Как правильно сделать прогресс выполнения как в макете?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Посмотрите вот этот пример:

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    впечатление от взаимодействия с ним

    Оно ломает мозг. Если кнопка открытия меню находится справа, то и меню ожидается справа. А оно слева.

    советы по улучшению

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

    P.S.: После взаимодействия с меню оно ломается. Или исчезает или просто перестает откликаться на нажатия. Видимо это тот самый момент, когда конструктор уже не справляется и нужно все делать руками.
    Ответ написан
    3 комментария
  • Как создать свой собственный метод?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    К предыдущему ответу стоит добавить, что при расширении стандартных объектов (вообще любых объектов, но именно со стандартными все обычно про это забывают) существует риск коллизии имен. Если вы добавите свой метод к стандартному массиву и какая-то из ваших библиотек тоже добавит свой метод с таким же названием к массиву, то будет печалька. Как один из вариантов решения вопроса - расширять объекты с использованием символов:

    const sayHello = Symbol('sayHello');
    
    Array.prototype[sayHello] = function() {
        console.log('hello');
    };
    
    // ---
    
    const test = [];
    
    test[sayHello](); // "hello"
    Ответ написан
    Комментировать
  • Где смотреть современные интересные сайты?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Ответ написан
    Комментировать
  • Как быстро и эффективно прокачать скилы в верстке?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    танцы с бубном... прокачать навыки верстки максимально быстро и при этом достаточно углубленно... Главное - результат и время.


    Был в похожей ситуации. Могу сказать, что очень полезно порисовать картинки с помощью CSS (если не сталкивались - сходите на CodePen, там это дело очень полюбили). Звучит глупо, но тем не менее такая деятельность помогает очень быстро освоить те свойства CSS, которые обычно все гуглят и не понимают. Это своеобразные "концентрированные" задачи на верстку. Если в одном макете 5 сложных моментов, то тут в одной картинке - 25.
    Ответ написан
    3 комментария
  • Можете рассказать о минусах дизайна и взаимодействий с постом в блоге?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Расскажите о минусах и плюсах

    Из плюсов - идея интересная, выглядит симпатично.
    Из минусов (в самом посте):
    • Шрифт мелкий, строки длинные. На 15-дюймовом FullHD - сложно читать. Я бы увеличил хотя бы до 16-18px.
    • Контрастность тоже не самая лучшая. Серый текст по белому фону заставляет напрягать глаза.
    • Вертикальный ритм немного странный. Может быть над заголовками добавить отступы?
    • Картинки хочется сделать побольше. Хотя может быть и нет. Но отделить их отступами точно стоит.
    • Не хватает информации об авторе, даты написания статьи (может все уже устарело на 10 лет).
    • Иконки для расшаривания в социальных сетях тоже можно добавить.
    • Так и хочется внизу увидеть теги, комментарии, похожие посты и.т.д. Их там нет, а очень хочется.
    • Эффекты при наведении мыши и фокусе на элементы нужно добавить.

    Скролл очень сильно лагает, так что навигацию оценить сложно. Адаптивность отсутствует. Определенно стоит подумать про сценарии взаимодействия с сайтом в целом. Если это - блог, то там точно должно быть (люди к этому привыкли и ждут этого):
    • Список статей, который можно быстро пролистывать.
    • Поиск по статьям. Если материалов мало, то по крайней мере поиск по тегам или категориям.
    • Страницы авторов, или по крайней мере хоть какая-то о них информация, контакты.

    и.т.д.

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Является ли желтая квадратная форма в конце анимации видоизмененной кнопкой или же это совершенно другой элемент разметки?

    По смыслу - это другой элемент. Если мы говорим про более-менее компонентный подход к верстке, то это должно быть очевидно. Кнопка - один компонент. Всплывающее окошко - другой компонент. Набросал небольшую заготовку:


    С такими анимациями можно долго играться, самое главное - проверить в конечном итоге кроссбраузерность. А то в хроме и FF работает, а в каком-нибудь IE всякое может случиться.

    P.S.: Но в целом - я голосую за реализацию таких вещей целиком на JS. Практика показывает, что в проектах с такими анимациями очень быстро собирается большое количество одновременно анимирующихся значений у большого количества элементов, которые нужно синхронизировать между собой. На CSS голова лопнет все это делать. И да, чем больше всего меняется в CSS-анимациях в единицу времени, тем выше шанс найти какой-нибудь редкий баг и долго ломать себе голову в поисках проблемы. Лучше уж взять какую-нибудь библиотеку вроде anime.js или любимый многими GSAP и использовать их.
    Ответ написан
    Комментировать
  • В чем разница двух кодов js?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Почему один код рабочий, другой нет?

    Потому, что не blur, а onblur.
    Ответ написан
    2 комментария
  • Может ли CSS файл содержать вредоносный код?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Например, если подключить так:
    <link rel="stylesheet" href="http://evil.com/styles.css">


    На CSS можно сделать недокейлоггер, который даст информацию о том, что пользователь начинает вводить (повторы одного и того же символа уже не срабатывают).

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

    Можно издеваться над "отключением" кнопок (pointer-events к примеру поменять) или вообще скрыть какие-то важные блоки и пользователи не смогут нормально пользоваться сайтом. Для какого-нибудь магазина - это полный фейл как вы понимаете. Причем, в отличии от полного дефейса, пользователи могут даже не понять, что что-то не так.
    Ответ написан
    Комментировать
  • Оценить дизайн начинающего дизайнера?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    По ссылке только одна страница, так что только про нее:
    - Не понятно под какое это разрешение экрана, варианта для телефонов там точно нет. Сейчас без этого вопроса никак, особенно если дизайн предполагает перестановку блоков на маленьких экранах. Разрешение картинки намекает, что это было для FullHD, но на 15 дюймах - все огромное и глаза разбегаются. Стоит над этим моментом поработать.
    - Сочетание разных шрифтов с засечками и без в случайном порядке - не самая лучшая идея.
    - Белый по бежевому не читается.
    - Контент местами плохо воспринимается.
    - Иконки все разные по стилю.
    - Отступы везде разные.
    - Кнопка "call to action" внизу совершенно не видна.
    и.т.д.

    что нужно подтянуть в знаниях/практике

    Основы. Возможно вы как-то через них проскочили, но стоит вернуться и разобраться. Почитайте про "дизайн для недизайнеров" (книжка так называется), она может подтолкнуть в нужную сторону.

    на что обратить внимание

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    blockquote {
        overflow: auto;
    }
    Ответ написан
    Комментировать
  • Как адаптировать изображение CSS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    По всей видимости вам подойдет свойство object-fit. Для старых браузеров понадобится полифилл, например этот.
    Ответ написан
    Комментировать
  • Как в linux вести лог команд?

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

    Можно например так:
    echo $(date) $(node -v) >> test.log
    При повторных выполнениях будет формироваться лог вроде такого:
    Thu Oct 18 20:13:31 MSK 2018 v10.11.0
    Thu Oct 18 20:13:32 MSK 2018 v10.11.0
    Thu Oct 18 20:13:33 MSK 2018 v10.11.0

    Форматировать можно по вкусу - загуглите про echo. Для удобства можно сделать alias, если не сталкивались - можете почитать о том, как ими пользоваться.
    Ответ написан
    Комментировать
  • Что значит HTTP-Based Public Key Pinning на Тостере?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    HTTP Public Key Pinning (HPKP) - это технология, позволяющая снизить риск MITM-атак, почитать можно на MDN.
    Ответ написан
    Комментировать
  • Не могу понять задание. Что имел в виду автор[2.0]?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    для массива простых чисел я не смог найти двоичных чисел, которые были бы симметричны

    Может быть я чего-то не догоняю, но 17 в десятичной - это 10001 в двоичной. Симметрично, однако.
    Ответ написан
    Комментировать
  • 3D рендер в WEB?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Добавлю еще пару слов про эту задачу в целом (не про сайт по ссылке в вопросе, а вообще). Если нужно делать такую статичную штуку с выбором цвета стен, обоев, полов и.т.д., особенно если нужно дать пользователю возможность выбирать свой вариант, то можно поиспользовать SVG. Это немного внезапно, но тем не менее. Основная часть комнаты, тени и рефлексы - это обычная картинка с прозрачностью в нужных местах (ее можно встроить в SVG через тег image), стены, полы - это простые прямоугольники, на которые наложены 3D-трансформации. Дальше их можно заливать как угодно - цветами, текстурами... и не нужно будет ломать себе мозг вопросом о том, как на лету повернуть "нормальную" текстуру и сделать из нее пол с перспективой. Мебель заливается цветом не намного сложнее - делается SVG-маска в форме предмета мебели и применяется фильтр hue-rotate. Таким образом можно "на коленке" соорудить работающий вариант такой презентации.
    Ответ написан
    Комментировать
  • Как правильно ходить на собеседования?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    На сколько так правильно делать?

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

    Учитывая тот факт, что (в жизни всякое бывает) может я захочу в будущем вернуться к данной вакансии.

    По моему опыту если разойтись с работодателем спокойно, до оформления каких-либо бумаг, то через некоторое время вполне можно вновь встретиться. У меня есть несколько компаний, с которыми мы где-то раз в год пересекаемся, не подходим друг другу и сохраняем контакт на будущее. Главное тут - наличие взаимного уважения. Всякие казусы случаются в жизни и отказаться можно по тысяче причин. А попросить указать на свои ошибки, как и предоставить свой отзыв - это неплохая мысль. Особенно если собеседующий вас человек был адекватен. У меня даже было такое, что молодой владелец небольшой компании поблагодарил за предоставленный отзыв и обмен опытом в процессе общения. До этого случая я думал, что такого вообще не бывает, а он восстановил мою веру в человечество. Так что смотрите сами, никто вас ругать ни за что не будет.

    P.S.: А по поводу "домашних заданий" в комментариях верно говорят, зачастую их пачками раздают и вероятность положительного исхода стремится к нулю.
    Ответ написан
    Комментировать