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

Ivan Bogachev

Creative frontend developer
Ответы

  • Как правильно установить 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> тут совсем ни при чем. Быть может стоит их убрать?
    Ответ написан
    Комментировать
    Комментировать

  • Подключение шрифтов на сайт и форматы?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Достаточно ли этого для кроссбраузерности?

    Ну так можно посмотреть:
    caniuse.com/#search=woff (спойлер: IE9+ и все нормальные браузеры)
    caniuse.com/#search=eot (спойлер: решение для IE6-9)

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

  • Как вы "обрабатываете" контент и материал, который изучаете?

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

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

    Полезные практические навыки запоминать бесполезно. Если есть возможность отработать сразу - делаю, если нет - они переходят в состояние "нужно в ближайшие дни". Факты, связаные с практикой запоминаются сами по себе в процессе работы, записывать их не нужно.

    Нужная на данный момент информация записывается на лист бумаги (а4), при необходимости сопровождается картинками. Картинки иногда очень важны. И стрелочки. Без стрелочек никак. Лист лежит на столе в течении недели, собирая важные термины, какие-то контакты, или что-то, что нужно загуглить или просто не забыть до вечера. Если лист лежит пару дней нетронутым - отправляется под стол и заменяется новым. Написанное собственной рукой хорошо запоминается (гораздо лучше, чем напечатанное), даже если сложно сказать "что было написано", всегда можно сказать "где именно это было написано". Если через пару месяцев лист не понадобился - в дальний ящик. Через год - уничтожается за ненадобностью. Необходимые на данный момент закладки кладутся в отдельную ветку дерева закладок и, когда их количество переваливает за 50 (примерно), сортируются. Часть попадает в основное дерево, часть удаляется.

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

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

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Это проблемы макета или верстальщик должен сам подбирать все? Сетки вроде нет; Отступы кажись на глаз надо делать.

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

  • Что можно изучить до поступления в институт?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    хочу стать программистом в сфере IOS и Android и думаю что уже не поменяю это решение

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

    до поступления в институт?

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

    Я бы на вашем месте уделил определенное внимание (не всмысле бросить все и заниматься только этим, а именно в дополнение) алгоритмам, структурам данных, вопросам организации кода и архитектуры приложения в целом. Это общие знания, которые потом будут с вами долгое время, чем бы вы впоследствии не занимались. На тостере уже не раз спрашивали, что можно почитать по этим темам. Ну а так, выше верно сказали: программирование - это ремесло, здесь нельзя послушать теоретический курс и всему научиться, поэтому практика, практика и еще раз практика.
    Ответ написан
    Комментировать
    Комментировать

  • Как пользоваться плагином postcss-scss в связке с gulp?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Почитайте, что народ пишет в issues на гитхабе, начать можете с первого вопроса по теме - Example of using scss parser with gulp. Там уже ответили на ваш вопрос.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать смену изображения через каждые 5 сек?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    /* There is no JS scripts! */

    На чистом CSS - никак. Просто потому, что CSS не позволяет "чекнуть" input. Вообще на CSS много чего нельзя сделать, я уже как-то раз приводил список аргументов в пользу слайдеров на скриптах.
    Ответ написан
    3 комментария
    3 комментария