Задать вопрос
  • Есть реально адаптивные/responsive - вплоть до 4k (широкие экраны) шаблоны?

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

    Это бизнес. Ничего личного. Условно, если у сайта менее 0.5% пользователей сидит с телевизоров или с часов, то дешевле положить на них болт, чем адаптировать. Серьезные компании могут заплатить UI дизайнеру, UX дизайнеру (а то и целой команде), верстальщику, купить им несколько телевизоров, умные часы, провести несколько юзабилити-тестирований, потратить на все это кучу денег. А компаниям с небольшим отделом разработки это выльется в годовой бюджет этого отдела и никак не окупится.
    Ответ написан
    Комментировать
  • Возможно ли найти удаленную стажировку в it?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Но вряд ли кого-то интересует человек без опыта... Нормальной работы тут не было...
    сложно ли устроиться... много что пробовал... вольюсь во что-то новое если понадобится

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

    Фриланс тоже имеет смысл попробовать, но это не для всех. Там умение продавать продукт имеет большее значение, чем умение его создавать.
    Ответ написан
    2 комментария
  • Оцените верстку?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Что нужно поправить?

    Доступность. В частности вопросы контрастности элементов. Если вам дизайнер дает такую бяку - вы просто обязаны его поправить. В частности состояния элементов:
    3ff17e1ab4c746688fe4bd419db67e62.pngc9145b0046004608bf1cdeef99826c45.png
    Вы видите разницу? А она есть. Мы с вами может и заметим ее, но пользователь - нет.

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как исправить кучу ошибок цсс в валидаторе?


    Тут вопрос не в том, как исправить, а в том, что исправить. Префиксы, как вы понимаете, нам нужны в любом случае. Меняем настройки валидации, чтобы не обращать на них внимание:
    9d365b5f13ea4505a0f5ffbb674078a3.png

    Имеем 9 ошибок с вашего сайта. Из них (с повторениями, -webkit-min-device... не считаем):
    - Property user-select doesn't exist : none - это свойство из черновика CSS4. Все ок.
    - Property touch-action doesn't exist : pan-y - относится к спецификации Pointer Events, а не CSS. Все ок.
    - Value Error : cursor hand is not a cursor value : hand - вот тут ошибочка, cursor: hand не бывает.
    - Value Error : margin-top Unknown dimension 10px\9 - что-то тут не так со значением отступа.

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как сделать чтобы слова "Первый" и "Второй" были красным цветом, но при этом Потомок 1 и Потомок 2 оставались черным.

    Можно сделать по-простому:
    ul {
        color: #f00;
    }
    
    ul ul {
        color: #000;
    }


    Но в перспективе предпочтительнее отойти от использования подобных селекторов и прийти к бэм или какой-нибудь еще методологии.
    Ответ написан
  • Display обнуляет любую анимацию через transition?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Используйте
    visibility: hidden;
    pointer-events: none;

    вместо display: none;
    и
    visibility: visible;
    pointer-events: auto;

    вместо display: block;

    Анимация будет работать так, как вы описали. Pointer-events отключается для того, чтобы скрытый элемент не мешал наведению и кликам по элементам под ним (если он будет абсолютно позиционирован или перемещен и что-то окажется снизу).
    Ответ написан
    Комментировать
  • Как интерпретировать математический код из LESS в SASS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Посмотрите на mathsass - там реализованы все эти функции.
    Ответ написан
    Комментировать
  • Как задать паролем перемешивание 32 элементов?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    N элементов (до 32)....однозначно из строки (пароля) любой длины


    Думаю можно сделать это с использованием sha-256 (для 32 элементов в самый раз):
    let permutation = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
    
    sha256.array('суперпароль').forEach((n, i) => {
        let j = n % (permutation.length - i) + i;
        
        [permutation[i], permutation[j]] = [permutation[j], permutation[i]];
    });
    
    console.log(permutation); // [19, 30, 25, 16, 23, 8, 11, 27, 13, 6, 4, 26, 21, 28, 24, 14, 2, 5, 15, 18, 10, 0, 7, 22, 31, 9, 17, 29, 20, 3, 12, 1]

    codepen
    Ответ написан
    Комментировать
  • Как с помощью css подстроить размер текста под размеры блока?

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

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

    длинная история
    Дорогие друзья, поделитесь, пожалуйста, своим опытом и подскажите, как увидеть в кандидате гения? ... В дальнейшем кандидат не захотел у нас работать не назвав причину.

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

    Резюме его тянуло на senior, а в комменте к резюме говорилось об отсутствии командной разработки и том, что кандидат интроверт.

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

    Он достал из портфеля свой ноутбук и с невиданной до этого скоростью решил новую тестовую задачу за 22 минуты

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

    что первый раз в жизни видел такой подход к решению задачи и те инструменты, которыми пользовался кандидат были ему не известны

    Это следствие широкого кругозора из предыдущего пункта. Просто есть особенность: если вы говорите "сделай мне xxx с помощью yyy" такой человек с большой вероятностью скажет "но с помощью zzz это сделать проще/быстрее/понятнее/проще_поддерживать и.т.д.". Не стоит сразу отбрасывать эту мысль, практически всегда она будет серьезно аргументирована. Это касается оценки заданий на собеседовании - если вы получили решение или ответ, который не ожидали - это стоит обсудить. Так вы покажете свою заинтересованность в знаниях кандидата. А это жирный плюсик в ваш адрес.

    В ответах выше говорят, что
    Для организации гений скорее вреден, чем полезен.

    Это спорное утверждение. Такой разработчик быстро устает от рутины, но даже рутину он может делать быстрее, чем кто-то другой. Или вообще может ее автоматизировать используя знания из других областей. Да, работать 9 часов в день практически невозможно. Но и за 4-5 часов при частичной занятости можно успевать очень многое.

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

    Еще там кто-то сказал
    психологических качеств (как вольётся в коллектив, в процесс)

    Такие люди почему-то думают, что коллектив должен быть сплоченным, что все должны дружить, ходить в боулинг, вместе кататься на велосипедах и участвовать в корпоративах. Я это видел несколько раз в разных школах, потом в институте, потом на работе. Но на самом то деле (практически всегда) им нужен человек, который будет работать. Пришел. Взял тикет. Сделал. Взял. Сделал. Поделился с кем-нибудь опытом. Предложил какое-то решение. Еще поработал. Ушел.
    Ответ написан
    Комментировать
  • Z-index: over9999 - зачем?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Z-index over9000 не нужен вообще. Это костыль, который некоторые люди, не понимающие css, используют для того, чтобы быть уверенными в том, что их элемент будет "сверху". При этом цивилизованные люди ограничиваются небольшими значениями z-index, с которыми проще работать. Иногда используют логические схемы вроде таких:
    • 0-9 - в пределах компонента
    • 10-19 - для всплывающих менюшек, подсказок и.т.д.
    • 20-25 - для выезжающих меню, модалок и.т.д.

    Можно ограничиться только диапазоном 0-9, но такая схема, хоть и является избыточной, позволяет проще ориентироваться в коде.

    А те, кто говорит "Но если используются сторонние плагины, в которых элементы имеют большой z-index, а их надо перекрыть, то ничего другого не остается" в ответах выше ( mletov ) просто решают один костыль подпереть другим. Не стоит утверждать, что ничего другого не остается - в большинстве случаев предпочтительнее в такой ситуации использовать обертку (пример упрощен для наглядности):

    <div class="my-div">My element</div>
    <div class="wrapper">
        <div class="over9000">over9000</div>
    </div>


    div { position: absolute; width: 100%; }
    
    .my-div   { background: #0f0; z-index: 2; }
    .wrapper  { z-index: 1; }
    .over9000 { background: #f00; z-index: 9999 !important; }


    В такой ситуации "мой элемент" будет выше, чем "over9000".
    codepen
    Ответ написан
    2 комментария
  • Какие есть ресурсы для обогащения знаний по JavaScript?

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

    Почитайте вопросы на тостере. Тут каждый день реальные кейсы, часто интересные задачки, неожиданности, живое общение, обсуждения, споры, троллинг. Вобщем советую.
    Ответ написан
    2 комментария
  • Какой выбрать дистрибутив linux для веб разработки?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    На вид мне понравилась elementary os

    Ну так и возьмите Elementary OS. Это и правда симпатичная и довольно стабильная система, а под капотом - та же самая Ubuntu, так что любой вопрос будет легко гуглиться, как тут все и говорят.
    Ответ написан
    3 комментария
  • Как подогнать psd для верстки?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Шаблон сделан на разрешение 3360х12078. Можно ли как нибудь изменить это разрешение до необходимого 1920х1014?

    А почему вы решили, что там должно быть 1920? Не глядя кажется, что он в ширину не 1920 должен быть, а 3360/2=1680. А сделан в два раза больше только ради картинок для ретины. В чем проблема при верстке все размеры делать в 2 раза меньше? Тем более, что если макет нормальный, то многообразия размеров там не будет. Но если вы все же хотите поменять разрешение - вам нужно скачать полноценный фотошоп и поменять его там, assets не для этого предназначен.
    Ответ написан
    Комментировать
  • Кто эти люди из списка "пригласить эксперта"?

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

    Профитов в целом два:
    1. Когда вы кому-то что-то объясняете - сами лучше разбираетесь, учитесь приводить аргументы, ссылки, примеры. По ходу дела узнаете что-то новое о своих или чужих инструментах. Это помогает держать себя в тонусе (а начинающим помогает развиваться), особенно если текущая работа по большей части рутинная и не требует шевеления мозгами.
    2. Для понимающих работодателей такой профиль - это плюсик в резюме, подтверждающий то, что человек что-то знает, а не просто говорит, что знает.
    Ответ написан
    Комментировать
  • Как заставить все элементы станицы наследовать размер шрифта с body а не с непосредственного родителя в единицах em?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как отменить наследование

    1em = размер шрифта родительского элемента
    1rem = размер шрифта корневого ( :root ) элемента, в данном случае - это html

    Вероятно вам необходимо использовать единицы rem.
    Ответ написан
    Комментировать
  • Чего бы сложного сделать на javascript?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Проблема в том, что я никогда не писал большие проекты на несколько сотен тысяч строк, и всё ещё не использовал тесты или написание целой документации под проект. Всё что делал, небольшие библиотеки под тысячу строк.

    Не всегда что-то интересное должно быть большим - например рисовалка аватарок. Маленький скрипт, страшный, но прикольный, людям нравится. Кстати начало ему положил вопрос от xmoonlight , здесь на тостере. В свободное время я еще делаю убийцу бутстрапа (шутка), просто сборник каких-то компонентов и полезных утилит, чтобы по-быстрому клепать простые сайтики да лендинги, правда не знаю, когда его доведу до ума. В такого рода проекте можно и документацию прикрутить и относительно большие объемы кода красиво организовать.
    Ответ написан
    4 комментария
  • Как ускорить анимацию?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Полагаю, will-change: transform присутствует. Можно еще попробовать на время анимации добавлять к списку pointer-events: none, как в том хаке с плавным скроллом. Если не поможет, то стоит подумать о том, что из большого списка при движении в горизонтальном направлении часть групп не будет видна. Соответственно можно анимировать по отдельности те, которые видны (с небольшой задержкой у каждой следующей - как на ведроиде центр уведомлений очищается), а остальные (скрытые) просто вставлять в нужное место при завершении анимации у первых.
    Ответ написан
    1 комментарий
  • Как законно можно использовать купленный шаблон сайта?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    На Envato Elements хочу купить шаблон BOOKRA. Подскажите как законно использовать купленный шаблон?


    Там есть два варианта:
    - За $17: Use, by you or one client, in a single end product which end users are not charged for. The total price includes the item price and a buyer fee.
    - За $850: Use, by you or one client, in a single end product which end users can be charged for. The total price includes the item price and a buyer fee.

    1. Сколько коммерческих сайтов могу создать на одном купленном шаблоне один или сколько угодно?

    В данной ситуации только один. В ситуации в вакууме - смотрите лицензию, которая прилагается.

    2. Картинки шрифты и пр. в шаблоне будут тоже моими? могу я их использовать для другого сайта?

    В данной ситуации шрифты с google fonts + font awesome. Вы можете их использовать как вам угодно. Картинки не прилагаются (Images used in the Preview demo are not included in the downloaded package). В ситуации в вакууме - смотрите лицензию.

    3. Можно убрать все упоминания автора шаблона или где-то нужно оставлять?

    В данной ситуации вроде бы не нужно упоминать автора (но может я что-то пропустил, почитайте все, что там есть, еще раз).

    4. Если я купил шаблон, создал сайт продал заказчику, имеет право другой разработчик править сайт заказчика?

    Да. Но можно докупить поддержку шаблона у автора (опционально).
    Ответ написан
    1 комментарий
  • Как сделать такую фигуру?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Just Do It!

    Вообще идея использовать clip-path - это хорошая идея, ноо... если фон у вас и правда белый....
    (размеры взял из головы, не в них смысл)
    .test {
        margin: 100px;
        height: 200px;
        width:  600px;
        transform: perspective(600px) rotateY(45deg);
        border-top-left-radius:    50px 100px;
        border-bottom-left-radius: 50px 100px;
        overflow: hidden;
        background: #000;
    }
    
    .test::after {
        background: #fff;
        content: '';
        display: block;
        height: 120%;
        width: 30%;
        transform: translateX(75%) translateY(-10%);
        float: right;
        border-radius: 50%;
    }


    273d37ed0c98421996e1600752619040.pngCodePen
    Ответ написан
    1 комментарий