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

Odisseya

Оптимизирую PageSpeed & Performance
Лайки

  • Что лучше использовать для анимаций css или js? И почему?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    но которую можно реализовать и с помощью css, и с помощью javascript...
    ваше мнение хотел услышать

    Мне самому нравится делать все на CSS, но... Если анимация должна быть интерактивной и нужно ее останавливать в процессе, откатывать в изначальное положение и.т.д., или некоторые ее части зависят от данных (в широком смысле - это и движение по сложной траектории, и построение графиков и.т.д.) и их проще рассчитать скриптом, чем подбирать коэффициенты в CSS keyframes, то JS будет лучшим выбором. Если это последовательность мало связанных между собой изменений, то опять же скрипты почти всегда будет проще реализовать. Если речь идет о CSS-анимациях с фильтрами (особенно SVG-фильтрами), то можно влететь в очень сильные проблемы с производительностью на слабом железе. И никакие хаки с GPU тут не помогут - все равно будет тормозить. В такой ситуации может иметь смысл не просто писать на JS, но и подключить WebGL и все делать руками на шейдерах.

    В остальных случаях стоит смотреть по ситуации - разные :hover / :focus эффекты обычно легко реализуются на CSS, и, если это так, то зачем что-то придумывать? CSS в последнее время очень даже неплох. Но если, например, в проекте вся анимация делается на JS, то может иметь смысл продолжать делать так же, сохраняя единообразие в коде.
    Ответ написан
    Комментировать
    Комментировать

  • Неплохо знаю WP но зарабатываю мало, что делаю не так?

    stk
    @stk
    Начните работать на Upwork.com. Там очень много работы по вордпрессу. Работайте с западными заказчиками ( желательно западня Европа, США, Австралия; индийский/арабские/азиатские заказчики - не стоит ).
    Становитесь профи. Ставьте себе задачи сами, тренируйтесь. Смотрите ленут предложений, чтоб понять какие задачи встречаются, и снова тренируйтесь.
    Нет такой штуки, как цена за какую-то конкретную работу. Это самый большой психологический барьер. С опытом понимаете, что хороший клиент платит не только за результат, а за комфорт работы с вами, простоту в общении, умении задавать правильные вопросы и не надоедать излишними вопросами, за умении быть на связи, отвечать быстро, кратко, четко, делать работу так, чтоб потом не приходилось дофига фиксить и доводить.
    Не работйте с плохими клиентами, которые считают что вы им что-то должны, не ценят ваше время и т.д. Во время контракта - вы профессионал, который оказывает квалифицированную помощь тому, кто в ней нуждается, а не просто наемный хз-кто. Вы работаете "с кем-то", а не "под кем-то". Учитесь отказывать плохим клиентам, говорить "нет"; не объясняться, а говорить об условиях, на которых согласны работать.
    Для начала поставьте себе рейт $12 в час ( и теперь сравните сколько это выйдет за тот же объем работы, за который вы получаете 12к рублей сейчас ). В зависимости от успехов, кол-ва заказов и качества отзывов за полгода-год рейт можно поднять до $25-40 в час ( и это не предел, я видел ВП-про, которые берут $65-80 за ВП ).

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

    И самое главное - верьте в себя. Если кто-то другой может, вы и тоже можете. Все получится.
    Удачи =)
    Ответ написан
    2 комментария
    2 комментария

  • С чего начать и как себя рекламировать веб-мастеру?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Для начала, перестать называть себя "веб-мастер". Это термин из 90х, и лично у меня закладывается подозрение, что человек владеет технологиями именно того периода. Нынче есть модный термин full-stack developer. Впрочем, и понятие full-stack сейчас не очень-то хорошо на себя натягивать. Ибо тот, кто делает только одно (фронт, бек и тд), как правило прокачивает скилы до более высоких уровней, чем эникейщик, который умеет всего понемножку. И хоть уметь во все в нашей сфере необходимо, должен быть фокус. Именно фокус на чем-то одном приводит к работе над хорошими проектами с хорошими бюджетами. Со временем, естественно. Опыт - все.

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

    Теперь по вопросам:

    Какие сайты выбирать для фриланса по веб-составляющей, популярные или нет?

    Upwork

    Стоит ли вкладываться в покупку премиум-аккаунтов на таких сайтах и окупятся ли они?

    Если собираешься работать там фуллтайм и долго - да и да.

    Нужно ли продвигать себя в контекстной рекламе, группах вк за деньги?

    Не думаю. Хотя, если твоя целевая аудитория там - тогда да. Но нет.

    Долго ли заняло ваше продвижение, и много ли у вас заказов теперь?

    Сложно сказать где и когда наступил тот момент, когда "продвижение" было достигнуто, ну или как еще это сформулировать. Скажу лучше так - я в это сфере с 1997 года, и до сих пор "продвигаюсь". Потому что точка Б как таковая отсутствует. Это вечный процесс движения вверх, местами проседая вниз, местами плато, местами снова вверх... Далее - количество заказов не столь важно. Важно их качество, бюджеты, ну и, как результат, соотношение количества к бюджетам. Грубо говоря, можно за 6 месяцев сделать один проект с бюджетом $10-30-50к, а можно все эти 6 месяцев пилить 20 проектов по $500.

    Какая среда разработки удобнее для вас? (имею под владением сразу mac, windows и ubuntu)

    В принципе она не важна, "на скорость не влияет". Лично мне - mac, ну и ubuntu/debian/centos/freebsd на серверах.
    Ответ написан
    Комментировать
    Комментировать

  • Чистый CSS для анимации или gsap?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    есть микрофризы и фреймрейт скачет где-то. Стоит ли в таких случаях полностью переходить на js-движок типа GSAP ?

    Важно понимать, что GSAP, Anime.js или еще что-то похожее - это инструменты, которые не приносят ничего принципиально нового в плане технологий. Они просто дают удобный интерфейс, через который мы можем менять значения свойств CSS или каких-то атрибутов SVG. Не более того. Соответственно если у вас есть нормально написанная анимация на чистом CSS/JS и она тормозит, то GSAP ее особо не ускорит.

    есть микрофризы и фреймрейт скачет

    Если есть проблемы с текущими анимациями, то стоит проверить, что:
    - Везде используется transform, а не изменения width, height, top, bottom, margin, background-position и.т.д.
    - По возможности не запускается более одной CSS-анимации в единицу времени.
    - Все js-анимации собраны в один requestAnimationFrame.
    - Все CSS/SVG фильтры по возможности заменены на шейдеры. Советую почитать введение в эту тему и еще примеры.
    - Изменение теней в анимациях по возможности заменено на появление псевдоэлементов с такими фонами.
    - CSS-свойство will-change используется по назначению.
    Ответ написан
    1 комментарий
    1 комментарий

  • Jquery, чему равен this?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Потому что forEach массива и each объекта jQuery - это никак не связанные между собой вещи.
    Потому что так захотели создатели jQuery.
    Ответ написан
    Комментировать
    Комментировать

  • Как можно нарисовать кривую линию от точки А в точку Б?

    AngReload
    @AngReload
    Кратко о себе
    Это кривые безье, генерируй их и вставляй в SVG таким кодом:
    function makePath(x1, y1, x2, y2) {
  const weight = 0.3;
  const dx = (x2 - x1) * weight;
  const c1 = x1 + dx;
  const c2 = x2 - dx;
  return `<path d="M${x1},${y1} C${c1},${y1} ${c2},${y2} ${x2},${y2}" stroke="black" fill="transparent"/>`;
}

    x1, y1 - начальная точка
    x2, y2 - конечная точка
    weight - жёсткость

    Ответ написан
    4 комментария
    4 комментария

  • Почему анимация проходит моментально?

    0xD34F
    @0xD34F Куратор тега CSS
    Во-первых - ошиблись с именем класса (это вы могли бы и сами обнаружить).

    Во-вторых - браузер стремится оптимизировать внесение изменений в DOM-дерево, так что свежесозданные элементы анимироваться не будут. Чтобы анимация выполнилась, нужен дополнительный reflow, для чего можно либо обернуть добавление класса в setTimeout, либо перед добавлением класса обратиться к одному из свойств, расчёт которых вызывает reflow. Как-то так.
    Ответ написан
    Комментировать
    Комментировать

  • Стрелочки между блоками?

    @hesrun
    repeat linaer gradient? Вместо картинки пошел бы...
    Ответ написан
    2 комментария
    2 комментария

  • Как сделать такой прямоугольник?

    Exploding
    @Exploding
    wtf?
    Ну и я вдогонку:
    Ответ написан
    2 комментария
    2 комментария

  • Как масштабировать SVG так, чтобы сохранить радиус окружностей?

    @softshape Автор вопроса
    Все-таки вариант Moskus с "ужасно короткой линией" - а точнее, с линией нулевой длины - оказывается в итоге наименее извращенным из всех возможных типов извращений. Circle заменяется на:

    <line x1="x" y1="y" x2="x" y2="y" style="stroke:#00a7e1;stroke-linecap:round;stroke-width:13px;vector-effect:non-scaling-stroke" />

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

  • Должен ли дизайнер отдавать папку с файлами вместе с макетом "по умолчанию"?

    0example
    @0example
    Как уже говорили, что указано в ТЗ, то и делается. Но расскажу так, как это должно быть по-правильному, с моей точки зрения:
    1. Большинство иконок сейчас берутся с flaticon и тд. Там можно взять любое разрешение иконки. Как только диз добавляет иконку, он ее сразу же добавляет в папку с иконками, чтобы не пришлось ее скачивать.
    2. Все изображения, которые в макете проскакивают, добавляются в папку оригиналами.
    3. Шрифты добавлются так же в папку, только если их нельзя подключить с гугл фонта и не они не являются стандартными.
    Ответ написан
    Комментировать
    Комментировать

  • Как верстать изображения с выносными названиями её элементов?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Можно картинкой вставить. Просто. Быстро. Размер шрифта начинает отличаться от остальной страницы при адаптивном уменьшении картинки. Печаль для дизайнера-перфекциониста. А еще буквы могут начать мылиться. Это вообще печаль. Если нужно добавить/убрать стрелки - придется перерисовывать картинку. Это неприемлемо, если к ним привязана какая-то еще логика и они показываются не всегда.

    Можно использовать связку SVG+CSS:
    - Берется SVG с viewbox='0 0 100 100'.
    - Основная картинка вставляется в виде image.
    - Стрелки рисуем в векторе (это просто дуги из одной точки в другую с маркером на конце).
    - Если нужно сделать их двухцветными, как в вашем примере - делаем маску по картинке и применяем ее к стрелкам.
    - Надписи верстаем отдельно (div`ами) и абсолютно позиционируем сверху. Координаты будут соответствовать им же в svg (от 0 до 100). Это нужно для того, чтобы сохранять размер шрифта при адаптивном уменьшении всего этого.

    Дальше при необходимости мы можем легко из css или js показывать или скрывать надписи и стрелки.
    Ответ написан
    5 комментариев
    5 комментариев

  • Как сверстать непростую рамку?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Элементарно, через border-image градиентом

    border: 3px solid transparent;
  border-image: linear-gradient(to bottom,#adf2f7 10px,  transparent 20px, transparent calc(100% - 20px), #adf2f7  calc(100% - 10px));
  border-image-slice: 1;

    https://jsfiddle.net/kv26e0fu/
    Значения для разрыва и размытия подберите сами.

    Для адптива можно разбить на 2 части, верхнюю и нижнюю и поместить в before и after. Так можно добиться независимости от размера шрифта и количества строк.
    Ответ написан
    Комментировать
    Комментировать

  • Выбор курсов для front-end. Treehouse, Udemy и т.д?

    tv_dakota
    @tv_dakota
    Backend developer
    День добрый, знаешь почему не чувствуешь себя готовым?)
    есть пару сверстанных проектов
    сверстай пару десятков и будет тебе счастье). Чаще всего наблюдения не приводят ни к чему хорошему, надо поставить цель и достигнуть ее путем труда, боли и страданий.
    https://themeforest.net/ посмотри примеры, выбери может что приглянется и вперед верстать.
    P.S. мое ИМХО только работать а не наблюдать, особенно если
    У меня есть хорошие базовые знания
    Ответ написан
    2 комментария
    2 комментария

  • Почему не работает SVG-анимация, если ее добавлять средствами JavaScript?

  • Можно ли сделать прокрутку при наведении?

    @SunUp
    Я не волшебник, я ещё только учусь
    Такой вариант https://codepen.io/Minobi/pen/pZgmKK без использования JavaScript
    Ответ написан
    Комментировать
    Комментировать

  • Восстановить после remove()?

    leni_m
    @leni_m
    ЧупаКобрус
    запомнить например
    var block = $('#block');
$('#btn').click(function (){
   $('#block').remove();
});

    а далее вставляйте переменную block куда вам надо.
    Ответ написан
    Комментировать
    Комментировать

  • С помощью чего можно реализовать подобный эффект?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Эффект зума элементарно transform:scale
    с табами вроде тоже всё просто, тот же transform:translateX
    Картинку мотоцикла пилим на две части. На бэк подкладываем цельную, сверху точно переднюю половину, у нее в фотошопе плавно обрезаем левый край. Между ними втыкаем svg-график. Анимация самого графика довольно проста - transform:scaleY

    Вот так, разложив анимашку на составляющие, видим, что самое сложное там — поработать в фотошопе с мотоциклом (ну для меня по крайней мере) =)
    Ответ написан
    1 комментарий
    1 комментарий

  • Как исправить ошибку в slick слайдере?

    Elwen
    @Elwen
    Попробуйте отключить у слайдера с превью centerMode, что бы слик не выпихивал активный слайд в центр.
    Ответ написан
    Комментировать
    Комментировать

  • Как позиционировать БЭМ блок являющиийся дочерним к тегу main? Как позиционировать блок header который является дочерним к body?

    delphinpro
    @delphinpro
    frontend developer
    Вопрос немного странный. БЭМ вполне четко и однозначно всё предписывает. Проще некуда.
    Я конечно не знаю вашей структуры, но в принципе это может быть что-то вроде этого:
    <div class="site">
        <header class="site__header"></header>
        <main class="site__main page">
            <div class="page__breadcrumb breadcrumb"></div>
            <article class="page__article">
                <div class="page__title"><h1></h1></div>
                <div class="page__content"></div>
                <footer class="page__footer"></footer>
                <aside class="page__meta-information"></aside>
            </article>
        </main>
        <footer class="site__footer"></footer>
    </div>


    В любом случае жестких рамок нет, просто соблюдайте общие рекомендации методологии.
    Ответ написан
    6 комментариев
    6 комментариев