Задать вопрос
sfi0zy

Ivan Bogachev

Creative frontend developer
Ответы

  • React.js: как × превратился в крестик?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Я просто оставлю пару ссылок и попрошу вас подумать, каким боком к вопросу относятся теги javascript, react.js и meteor.js.
    Ответ написан
    1 комментарий
    1 комментарий

  • Где можно найти лёгкие макеты .psd для новичка в вёртке?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Сходите на psdrepo.com. Там много приятных глазу макетов (часть из них была замечена в рассылке htmlacademy). Есть целые страницы, есть просто наборы элементов интерфейса.
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно использовать в html единицу измерения em?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Вы задаете :root значение размера шрифта (кстати познакомьтесь с вот этой идеей - сам пользуюсь постоянно, замечательная вещь). По умолчанию обычно размер шрифта для :root в браузерах равен 16px. Задавать для :root размер шрифта в rem/em бессмысленно - это как масло масляное.

    1rem (1 root em) будет равен тому размеру шрифта, который задан для :root и будет одинаковым для всех элементов на странице. Если вы вложите кучу элементов с font-size: 1.1rem друг в друга, то все они будут иметь один и тот же размер шрифта.

    1em у каждого элемента будет свой, равный размеру шрифта родительского элемента. Если вы вложите кучу элементов с font-size: 1.1em друг в друга, то каждый следующий будет иметь размер шрифта больше, чем предыдущий.

    ---

    Сам я стараюсь все, что можно, делать в rem (включая все размеры на странице, отступы, border-radius, брейкпоинты и.т.д.) в сочетании с адаптивной типографикой из вышеприведенной статьи, а единицу em использую очень редко. А размеры в пикселях - вообще редкость, только если 1-2px в местах, где округление может сломаться. Такой подход не является общепринятым, но может быть очень удобным, я его описывал в статье на хабре. Демка там получилась так себе, но с тех пор идея обкаталась и успешно применяется.
    Ответ написан
    1 комментарий
    1 комментарий

  • Что выбрать Macbook Air 13" 2016 или что-нибудь другое?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Может быть кто-то стоял перед подобным выбором? Кто что посоветует :-)

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

    Если у вас планируются простые повседневные задачи (вы сами говорите, что тяжелых задач не планируется) и будущий владелец в состоянии не захламлять свой ноутбук браузером амиго, яндекс барами и прочей фигней, которая жрет ресурсы и мешает, то вполне сгодится любой бюджетный ноут за 15-20К. Ну за 25 максимум. Да, не понтово. Если вы на гироскутере приедете в барбершоп, вращая в одной руке спиннер, а в другой будет что-то без надкусанного яблока - окружающие не заценят. Но ведь главное, что этот кусок железа работает. Я половину всего времени верстаю на ноуте семилетней давности, а вторую половину - на нетбуке. Только заменил HDD на SSD. Стоят линуксы, ничего не тормозит, не виснет. И этого хватает для работы. Вполне. А учитывая небольшую близорукость, оставшуюся с детства, я с 40см ретину от не ретины вообще не отличаю. От обычных матовых мониторов, за которыми я сижу целыми днями уже много лет, зрение не то, что не садится, я даже не помню, когда глаза уставали в последний раз. А на оставшиеся 40-45К (от ваших 60) можно взять квадроцикл, который точно не устареет через пару лет и будет возить и радовать своего владельца. Или велосипед, чтобы хоть каким-то спортом заниматься. Или сайгу. Говорят, нервы успокаивает.
    Ответ написан
    Комментировать
    Комментировать

  • Как освоить функциональное программирование на javascript?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    полноценно изучить все принципы и понять как думать в этом ключе?

    (имхо) Лучше взять какой-нибудь простой лисп (Common Lisp например) и пописать недельку на нем что-нибудь для себя. Без разницы какие книжки брать, насколько они будут старые, не обязательно все запоминать или пытаться написать что-то нереально большое. Главное - попробовать и проникнуться общими подходами к делу, которые вы там увидите. А потом взять свой JS и посмотреть на него свежим взглядом.
    Ответ написан
    2 комментария
    2 комментария

  • Как правильно поставить canvas-анимацию на фон сайта?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Имеете в виду particles.js? (чувствую, что да, вы уже задавали сегодня этот вопрос).

    Подскажите, может какие нюансы есть...

    Полезно прочитать инструкцию по использованию.

    P.S.: Описание "не хочет работать" не дает представления о вашей проблеме. Соответственно не ожидайте, что кто-то угадает, что именно у вас не так.
    Ответ написан
    2 комментария
    2 комментария

  • Как правильно установить Android Studio?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Я завершил, перезагрузил комп, смотрю Studio не установлен!

    Из слов "смотрю не установлен" ничего не понятно. Перечитайте инструкцию. Вы делали "To make Android Studio available in your list of applications, select Tools > Create Desktop Entry from the Android Studio menu bar"?
    Ответ написан
    Комментировать
    Комментировать

  • Как бы вы сверстали такой блок?

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

    Можно взять базовую разметку:
    .project-timeline
    .step
        .number 1
        .content Lorem ipsum dolor sit amet.
    .step
        .number 2
        .content Lorem ipsum dolor sit amet.
    ....


    С помощью CSS-трансформаций перевернуть половину элементов, а их содержимое перевернуть еще раз.
    получится что-то такое
    a3d02b15825a4eb58aa11fd45a526e2b.png


    На маленьких экранах все повернуть еще раз.

    получится вот так
    3bd5d493f63e43fd98b845854a6ba5e9.png


    ---
    CodePen
    Ответ написан
    Комментировать
    Комментировать

  • На разных страницах по разному работает css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    На главной странице в 728 строке stylesheet_custom.css подключается второй раз.
    Ответ написан
    Комментировать
    Комментировать

  • Ставить ли линукс на слабый пк и какой?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Мне никогда не доводилось даже и видеть как работает сие система... коллега говорит, что Линукс будет ненастроенным... мне нужно всего лишь заполнять клиентскую базу через браузер и редактировать текст хоть через wordpad...

    Берите Elementary OS. Система простая в использовании (некоторые считают ее даже слишком минималистичной), никакой настройки не нужно, только если драйвера на видеокарту подогнать, но это в любой ОС так будет. Даже встроенные браузер и текстовый редактор вполне юзабельны (не идеал, конечно, но можно "взять и использовать").

    Использую ее на нетбуке с Селероном 847 на 1.1GHz, 2GB памяти и маленькой SSD-шкой уже не первый год, верстаю переодически. Могу сказать, что если не открывать 100500 вкладок в Хроме и не пытаться рендерить видео, то поймать тормоза довольно затруднительно.
    Ответ написан
    2 комментария
    2 комментария

  • Как в less сделал арифметическую прогрессию?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer 
    .generate-styles(3);

.generate-styles(@n, @i: 1) when (@i =< @n) {
  .style-@{i} {
    left: 50px + @i * 15px;
  }
  .generate-styles(@n, (@i + 1));
}


    На выходе даст это:
    .style-1 {
  left: 65px;
}
.style-2 {
  left: 80px;
}
.style-3 {
  left: 95px;
}
    Ответ написан
    1 комментарий
    1 комментарий

  • Прорисовка дизайна сайта - с чего начать?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    выбор CSS-фреймворка лежит на мне как на дизайнере... Просто у каждого CSS-фреймворка свои библиотеки, компоненты, виджеты и т.д...

    Инструмент выбирается под задачи, а не задачи подгоняются под инструмент. И выбирать будет верстальщик/фронтендер, который гораздо лучше вас разбирается в многообразии инструментов.

    Или же мне вообще срать на все это и делать в стиле "я дизайнер - я творю, а как это сверстают меня не волнует?"

    Вы - дизайнер (я надеюсь, что хороший, или по крайней мере стремитесь им стать). Соответственно вы лучше остальных членов команды понимаете как что должно выглядеть. Если вы на макете одинаковые элементы делаете одинаковыми, а не "на глазок, плюс-минус пара пикселей" с требованием верстать pixel-perfect, и к этому прикладываете стайлгайд - все будет хорошо. Вообще стайлгайд - очень полезная вещь, особенно в долгоживущих проектах. И плюсик в карму дизайнеру. Главное - не зазнавайтесь: если хороший верстальщик говорит, что вы где-то что-то ляпнули - проверьте, может и правда ляпнули. Если вы единственный дизайнер на проекте - вас кроме верстальщика проверять обычно некому.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать такой фон на чистом css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    на чистом css?

    вот так.
    Ответ написан
    Комментировать
    Комментировать

  • Несколько вопросов о шрифтах и pagespeed insight?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    1. caniuse.com/#search=ttf, caniuse.com/#search=otf.
    2. Я бы склонялся к woff. Ну или woff в сочетании с eot, если нужны старые IE.
    3. Google PageSpeed Insight вообще много на что ругается. Такой уж у него характер. В первую очередь под сжатием обычно понимают удаление всех ненужных символов из шрифта (у вас на сайте редко когда будет больше 1-2 языков, так что и полный набор обычно не нужен).
    4. Стоит ли вообще учитывать эти критерии , на которые ругается PageSpeed Insight? - Нет. Этот тест показывает вам узкие места, на которые стоит обратить внимание, но в первую очередь вы должны смотреть своими глазами. Я видел сайты, которые загружались меньше секунды и при этом имели 30-40 баллов по оценке этого теста, а то и меньше, а видел и такие, что они грузились 8-10 секунд при оценке в 95-100.
    Ответ написан
    1 комментарий
    1 комментарий

  • Из-за чего может лагать легкая анимация css3 на сайте?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Используйте transform: translateX + will-change вместо того, чтобы анимировать свойство left при абсолютном позиционировании.
    Ответ написан
    Комментировать
    Комментировать

  • Почему не работает .first в lodash?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    https://lodash.com/docs/4.17.4#head
    Gets the first element of array.
    Aliases: _.first


    В документации написано, что он возвращает первый элемент массива. Ваш вопрос непонятен.
    Ответ написан
    1 комментарий
    1 комментарий

  • Оцените верстку начинающего верстальщика?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    По внешнему виду:
    Адаптивность есть, это хорошо. Есть мелкие проблемы, которые портят впечатление (где-то что-то обломалось, где-то что-то не влезло):
    240b345906f84e7ca5af8252d9b00964.png51d00024eb5c4c8896e8e888ce8ea000.png821cc5a47651408c8728229982fe1521.png
    и.т.д. Также стрелка снизу кажется не по центру, отступы какие-то странные местами (макет не смотрел, это чисто личное впечатление). Фокус на элементах практически не заметен. Стоит поработать над этим. Обводка синим - бяка.

    По коду:
    - Отсутствует система в именовании классов. Почитайне про БЭМ или RSCSS.
    - Использовать #id в CSS не стоит. Это дурной тон и источник проблем.
    - Из-за вышеупомянутого отсутствия системы классов CSS читать невозможно + потенциальные проблемы с перебиванием стилей в неожиданных местах.
    - Много магических чисел в CSS (321px, 44.148936%, 381px...). Практически всегда можно избежать этого.
    - Нет ресета/нормалайза. Тоже потенциальные проблемы.

    Поправьте вышеупомянутые проблемы. После этого приходите к использованию препроцессоров (можно начать с LESS - он самый простой, но в 99% случаев его возможностей достаточно). Ну и JS изучайте, без него верстальщику не выжить.
    Ответ написан
    1 комментарий
    1 комментарий

  • На какой курс в институте пойти для карьеры frontend-End developerа?

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

  • Как сделать это в методологии rscss?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Ну вообще-то можно не только дочерний - rscss.io/css-structure.html#avoid-over-nesting, но если вы хотите избежать такой вложенности в CSS, то можно просто сделать ссылку с оберткой отдельным компонентом, как-нибудь так:
    nav.main-navigation
    ul.links-list
        li.wrapped-link: a.link(href='') Link
        li.wrapped-link: a.link(href='') Link
        li.wrapped-link: a.link(href='') Link
        li.wrapped-link: a.link(href='') Link
        li.wrapped-link: a.link(href='') Link


    .main-navigation {
    // ...
}

.links-list {
    display: flex;
    justify-content: center;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}


.wrapped-link {
    flex-basis: 20%;
	
    > .link {
        display: block;
        padding: 15px;
        text-align: center;
        text-decoration: none;
		
        &:hover,
        &:focus {
            text-decoration: none;
            background-color: #333;
        }
    }
}
    Ответ написан
    5 комментариев
    5 комментариев

  • Почему не получается поместить текст в рамках тега span?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    И, разумеется, <br><br> тут совсем ни при чем. Быть может стоит их убрать?
    Ответ написан
    Комментировать
    Комментировать