• Как создать такой же градиент на чистом css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    А так же попутный вопром, как исбавиться от полос в градиенте? а то больно уж напрягают они

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как вы документируете свой код css? Некоторые говорят, что должен быть комментарии, как, например, в нормалайзе

    Должны быть комментарии для каких-то хаков, которые не все знают (полезно, если после вас этим кодом кто-то еще будет пользоваться). А остальное решается каким-нибудь пре- пост- процессором, и разбиением всего на компоненты.

    P.S.: БЭМ - не панацея, есть и другие варианты (тот же RSCSS очень неплох).
    Ответ написан
    Комментировать
  • На каком уровне нужно знать js, чтобы изучать React, Angular framework или jQuery?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    На каком уровне нужно знать js, чтобы изучать XXX

    Ответ: если вы читаете документацию по XXX и понимаете о чем идет речь - вы готовы изучать XXX.

    P.S.: Если выбираете между ангуляром и реактом - почитайте про Vue - он по сложности вхождения сопоставим с jQuery.
    Ответ написан
    1 комментарий
  • Как правильно делать валидацию форм?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    они делают валидацию для каждой формы (почему??? Ведь про какое то поле можно забыть к примеру =))

    Валидация - она на то и валидация, нужно все проверить.

    ведь id по сути вообще плохой тон

    Эмм... что? В стилях - да, это плохо, но не в скриптах.

    Тогда придется второй тоже другие id делать

    Это проблема? Кажется, что нет.

    по словам крутого разраба, ПРОЩЕ сделать самому.. Что скажите?

    Валидация на клиенте - это регулярное выражение + некая реакция на правильность/неправильность действий пользователя. Написать руками часто действительно проще и быстрее, чем переписывать готовое.

    посылаю запрос контроллеру (laravel использую) и в представление передаю статус, в зависимости от которого выводятся разные сообщения. Т.е. в случае ошибки сервер дает вьюху с ошибкой.

    С точки зрения UX вы должны (если пользователь ошибся) показать ему сразу на ошибку в духе "эй, парень, у тебя пароль короче восьми символов" и подсветить форму с паролем (пример). И ничего не отправлять на сервер.
    Ответ написан
    6 комментариев
  • Как определиться новичку?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    но все наперекор твердят, что надо выбирать, типа не потянешь и все - такое

    Да нет, можно совмещать (сам занимаюсь и дизайном и разработкой). Очень полезно посмотреть на то, что делают ребята из Tubik Studio - если научитесь совмещать навыки дизайнера в плане "придумать и нарисовать" и навыки "реализовать это на html/css/js" - станете очень ценным специалистом.

    Недавно видел вопрос мужичка тут, который 8 лет верстал на чистом html/css и вдруг понял, что стоит на месте и так продолжаться не может :D

    Если делать однотипные проекты с одними и теми же инструментами - этот момент наступит независимо от того, что это за инструменты.

    Я осознал, что не хочу оказаться на месте этого мужичка и начал лихорадочно учить подряд все фреймворки, попадавшиеся мне под руку

    Имея опыт дизайна, вам стоит не просто "учить все, что попалось", а разобраться в том, что можно сверстать, а что нет, для чего есть готовое решение, а где придется руками целый день писать. Это очень полезное умение - ни у кого не возникнет желания "оторвать вам голову". Также очень полезно будет изучить все возможности CSS.

    Как вообще единомышленников найти в этой сфере? Вместе вроде как всегда проще и веселее учить и двигаться вперед :D

    В русскоязычном интернете - крайне проблематично (вероятно менталитет сказывается). Посмотрите на codepen, совмещая навыки дизайнера и фронта можно регулярно попадать на первую страницу и получать какую-то обратную связь, заводить знакомства. Как бонус - можно смотреть, что делают окружающие, и перенимать опыт в создании чего-то не очень стандартного (анимации, неочевидная верстка, и.т.д.)
    Ответ написан
    Комментировать
  • Что выбрать, слайдер на чистом CSS или с использованием JS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Что выбрать, слайдер на чистом CSS или с использованием JS?

    Ответьте на следующие вопросы и ответ придет сам собой:
    • Можете ли вы в слайдере на чистом CSS сделать поддержку touch-устройств (свайпы)?
    • Можете ли вы в слайдере на чистом CSS сделать поддержку клавиатуры (фокус на весь слайдер и переключение слайдов стрелками)?
    • Можете ли вы в слайдере на чистом CSS адекватно останавливать его на hover, чтобы юзер мог прочитать написанное на слайде?
    • Можете ли вы в слайдере на чистом CSS легко добавить или убрать слайд, не сломав все остальное?


    P.S.: Как человек, создающий всякое на чистом (и не очень) CSS, понимаю ваше стремление, но продукт делается в первую очередь для пользователей.
    Ответ написан
    Комментировать
  • Индексируются ли невидимые изображения?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    либо object-fit (но тут явный минус - никакой кроссбраузерности).

    Ну это не совсем так. Никакой тут только IE, впрочем, ничего нового. Использовал object-fit-images для решения этого недоразумения - впечатления положительные, работает.
    Ответ написан
    1 комментарий
  • Можно ли использовать JS на ЕГЭ?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Из демоверсии 2017 года:
    Вы можете записать решение также на другом языке программирования (укажите название и используемую версию языка программирования, например, Free Pascal 2.6) или в виде блок-схемы.

    Так что теоретически можете. На практике - у вас скорее всего будут проблемы. JS сам по себе не имеет ничего для работы с вводом данных, который требуется в заданиях. Да и можете что-то ляпнуть случайно. А потом придется подавать апелляцию и объяснять проверяющему, что это ES8 (а он JS видел в последний раз в какой-то книжке лет 10 назад) и все работает на node.js, поэтому у вас там есть потоки ввода-вывода...
    Ответ написан
    1 комментарий
  • Как сделать красивый футер?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как сделать футер который всегда будет находиться в самом низу страницы?

    Вот так.

    P.S.: Этот же пример я вставлял в ответы на другие вопросы: 374214, 379899, 396793, 401529...
    Из чего можно сделать вывод: учитесь пользоваться гуглом.
    Ответ написан
    Комментировать
  • CSS. Как сделать, чтоб блок занимал всё пространство родителя?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Вам нужно свойство object-fit. Правда для IE все-таки нужен полифилл.
    Ответ написан
    1 комментарий
  • Как получить данные из списка vue?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Вероятно вам нужно что-то такое (надеюсь понял вопрос).

    P.S.: В перспективе - прикладывайте сразу песочницу, чтобы было проще понять происходящее (тут есть универсальная заготовка для Vue+Vuex+Lodash)
    Ответ написан
    2 комментария
  • Как вывести несколько строк в компоненте vue.js?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Подскажите, что я делаю не так. Component template should contain exactly one root element.

    У вас ошибка довольно простая: в переводе звучит как "шаблон компонента может иметь только один корневой элемент":
    <template id="login-form">
    <div>
        <div>@{{ labelName }}</div>
        <div>@{{ labelPassword }}</div>
    </div>
    </template>
    Ответ написан
  • Как передать в props не строку, а выражение в Vue.js?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    artekha , Дмитрий Беляев совершенно правильно вам намекает на computed. Опишу подробнее: у вас есть "список всех задач". А вам нужно получить "список выполненных задач" и "список невыполненных". Вы берете и делаете следующее (все это для примера):
    var vm = new Vue({
        .....
        data: {
            tasks: []
        },
        computed: {
            completedTasks() {
                return _.filter(this.tasks, (task) => task.completed);
            },
            pendingTasks() {
                return _.filter(this.tasks, (task) => !task.completed);
            }
        }
        ....
    })

    а потом используете эти самые completedTasks и pendingTasks:
    <div id='app'>
        <div>Completed:</div>
        <div v-for='task in completedTasks'>
            <span>{{ task.text }}</span>
            <input type='checkbox' v-model='task.completed'>
        </div>
        <br>
        <div>Pending:</div>
        <div v-for='task in pendingTasks'>
            <span>{{ task.text }}</span>
            <input type='checkbox' v-model='task.completed'>
        </div>
    </div>

    Вот вам codepen для наглядности.
    Ответ написан
    2 комментария
  • Как сделать адаптивность без bootstrap?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Если не использовать бутстраповскую сетку надо для большинства элементов просто шириной блоков играть в @media-запросах? Или есть другие методы?

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

    Писал ли кто-то свой аналог сетки, если да, то чем вас бутстраповский не устроил?

    Да, писал. Бутстраповский вариант (замените слово бутстрап на любое другое известное вам название) не устроил тем, что глаза устали и нужна была более простая система классов (например у колонки - "column -s12 -m6 -l4"), хотелось из коробки поиметь некоторые дополнительные фишки, вроде прибитого к низу футера, хотелось брейкпоинты в rem, хотелось еще что-то...

    Вы сами как оцениваете такую идею?

    Хорошая идея.
    Ответ написан
  • Где найти интересные скрипты и ccs3 фишки?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Где найти интересные скрипты и ccs3 фишки?

    Все там же.
    Ответ написан
    Комментировать
  • Как наложить div на iframe?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Клавиатурой по голове тому, кто так сделает (ибо есть только одна причина перекрыть iframe чем-то своим).
    Ответ написан
    2 комментария
  • Что создать новичку для практики?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    https://codepen.io/pens/ - выбирайте демку и пробуйте сделать ее самостоятельно.
    Ответ написан
    6 комментариев
  • Можно ли онлайн обучиться на HR-специалиста?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Можно ли онлайн обучиться на HR-специалиста?

    HR - это не профессия, это призвание (и чем больше вы общаетесь с различными hr`ами, тем сильнее это понимаете).

    А вообще все, что нужно знать HR, описала Виктория Придатко в своих выступлениях. Посмотрите на презентации и все поймете:
    IT рекрутинг без факапов
    HR Bullshit в IT
    Собеседование как секс. Удовольствие должны получи...
    Ответ написан
    Комментировать
  • Как разместить footer внизу страницы после всего содержимого?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Не знаю, что вы имели в виду делая всему, что есть, position: absolute и fixed и большие значения z-index, но вам определенно стоит посмотреть сюда.
    Ответ написан
    2 комментария
  • Можно ли сделать текстовую кнопку, чтобы цвет зависел от фона?

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

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