• Как интерпретировать математический код из 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 комментарий
  • Как создать подложку на ::before?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Немного поправил ваш код:
    .arrow {
      position: relative;
    }
    
    .arrow::before {
      content: '';
      display: block;
      width:  650px;
      height: 600px;
      background: blue;
    }
    
    .arrow::after {
      content: '';
      display: block;
      position: absolute;
      top:  0;
      left: 0;
      width:  600px;
      height: 400px;
      background: url(http://cliparting.com/wp-content/uploads/2016/05/Arrow-clipart-arrow-graphics-clipartcow-2.png);
    }
    Ответ написан
    Комментировать
  • Как сверстать это?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Как сверстать это?

    Вот как-то так (вариант без SVG, построенный на CSS-трансформациях).

    Пара замечаний по поводу решения:
    - Картинки в виде нормальных картинок, а не фонов, нужны для того, чтобы было проще адаптировать под ретину, загружать их независимым lazy-loadом и для лучшего индексирования поисковыми системами (не могу ни подтвердить, ни опровергнуть, но по личным наблюдениям фоновые картинки имеют свойство иногда не индексироваться вообще, зависит от фазы луны).
    - В связи с первым пунктом добавил полифил для свойства object-fit (нужен только для IE, остальные браузеры давно уже умеют его использовать).
    - Все резиновое, но на маленьких экранах лучше сбрасывать одну секцию под другую (на вашей картинке это не отображено, но логика подсказывает).
    Что имею в виду

    На большом экране:
    ca767f8e94ed4185a9afc83022f90d4f.png
    На маленьком:
    f0d7cc300cb344a7883526d7f28606b0.png
    Ответ написан
    Комментировать
  • Как сделать кнопку со с резаными углами?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Иван Карпущенко верно говорит, можно использовать transform:skew, но вот по поводу использования псевдоэлемента для текста - очень спорная мысль, точнее сказать не универсальная. Или придется этот текст передавать через data-атрибут, что будет довольно странным решением. Гораздо практичнее просто в button добавить span с текстом - codepen.
    Ответ написан
    Комментировать
  • Стоит ли изучать Cobol?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    На HH нет ни одной вакансии. Это означает то, что у нас вакансий, где нужен Cobol, мало. Очень мало. Если вы через знакомых найдете вакансию - вам будут рады (ну если вы разбираетесь в теме), т.к. специалистов на рынке почти нет, а те, кто есть - уже пенсионеры по большей части. Но при этом вы будете иметь маленький выбор мест где вообще можно работать. Если с текущим местом что-то не сложится, то уйти куда-то будет проблемно. Так что да, для общего развития можно познакомиться, но с применением все сложно - повезет/не повезет.
    Ответ написан
    Комментировать
  • Какой порядок обучения веб-верстке вы посоветуете?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    По вашим словам кажется, что вы понятия не имеете о том, какой инструмент для чего нужен. Так что рекомендую следующий план:

    HTML: практика -> Pug или любой другой препроцессор -> понять зачем он нужен -> микроданные -> wai-aria
    CSS: практика -> каждый день выкладывать один сверстанный компонент на CodePen -> всякое разное -> изучить внутренности normalize.css -> использовать autoprefixer -> изучать хорошие практики -> написать свою сетку -> познакомиться с БЭМ, RSCSS -> осознать полезность методологий -> препроцессоры (LESS проще, SASS моднее, есть еще много разных) -> PostCSS -> осознать разницу между пре-процессором и пост-процессором
    JS: ES6+ -> Babel -> понять смысл инструмента -> писать много велосипедов -> много велосипедов -> больше велосипедов богу велосипедов -> паттерны проектирования -> тестирование
    Gulp/Grunt и Webpack/Browserify: осознать разницу -> использовать по мере надобности -> научиться автоматизировать все, что можно автоматизировать
    Git, NPM: без комментариев

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

    Есть еще один дельный совет: читайте ответы на тостере и изучайте решения, которые народ предлагает. Разбирайтесь с тем, как они что-то делают. В перспективе сами отвечайте. Метод утенка рулит.

    Ну и умение задавать вопросы тоже лишним не будет.
    Ответ написан
    Комментировать
  • Как перестроить дерево в Media запросах?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Если я вас правильно понял, то SASS тут не при чем. Почитайте про специфичность селекторов в CSS (это легко гуглится). В крайнем случае можно было бы использовать !important в вашей ситуации, но это только в том случае, если вы понимаете то, зачем вы это делаете, и есть какая-то система его использования во всем проекте.

    Но разумнее будет использовать методологии вроде популярного БЭМ или не очень популярного RSCSS. Это будет гораздо лучшим решением по сравнению с попыткой одну бяку закостылить другой.
    Ответ написан
    Комментировать