• Можно ли использовать единицы измерения rem (root em) вообще для всего в CSS?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Делаю вот так:
    html, body {
      font-size: 62.5%; // 1rem = 10px и никакой попаболи как с EM
    }

    И верстаю все только в rem уже более полугода (за исключение тонких бордеров в 2-3px и подобных микро-вещей, которые при снижении font-size для html, body могут выдавать становиться тоньше, чем надо).
    Главная фишка - возможность скейлить всю верстку под разные разрешения. Хочется сделать все на 25% больше для мониторов шире 1600px? Просто пишешь:
    html, body {
      @media (min-width: 1600px) {
        font-size: 78.125%;
      }
    }

    И вся верстка магическим образом идеально скейлится. Тоже самое касается и понижения, очень удобно в адаптивной верстке.
    Недостатки у rem есть, но они безобидные для нормальных людей - ie9+ и баг с небольшой неточностью приема 62.5% в каких-то версиях ie (вроде как в 10), что в общем то не заслуживает внимания.
    Ответ написан
    4 комментария
  • Какая цена будет справделивой?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    15 страниц верстки с нуля (как вы выше в комментах уточнили) и за 40$ баксов В СУММЕ? WAT????? Вы не ошиблись ноликом?
    Ответ написан
    1 комментарий
  • Есть ли фриланс ближе к 30?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Максимально быстрый вариант - выбираете весьма узкую специализацию (в моем случае это фронт-энд с уклоном в верстку и анимации) и с головой ныряете. Но этот вариант работает только при полной самоотдаче. То есть для того, чтобы в будущем можно было работать по 4 часа в день и чувствовать себя комфортно, в первые год-два вам надо будет пахать по 50-65 часов в неделю. Но тут есть очень важный момент - из этих 50-65 часов, максимум половину вы будете уделять непосредственной работе. Все остальное - саморазвитие. Чтение всех возможных статей, книг, чужих библиотек и прочих вещей. И обязательное запиливание пет-проджектов/демок. Я так год на удаленке работал (с хорошей для региона зп, но крошечной для столицы). 15-20 часов в неделю - непосредственная работа. И еще сверху 30-45 часов - чтение интернетов и запиливание демок на кодпене. Сейчас, имея за плечами целых полтора года опыта работы (и знания программирования вообще), я работаю с рейтом в 30$ в час (и планирую выйти на ~50-60$ через 6-12 месяцев). В данный момент вот пилю два проекта, по которым люди сами на меня выходили, я даже никому никуда не писал.
    Ответ написан
    1 комментарий
  • Стоит ли переводиться на заочку и пойти работать?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    >С работой удаленно тоже сомневаюсь: думаю не много кому нужен недо-джун, работающий 20 часов в неделю да еще и удаленно.
    Бред. Я с 5 месяцами опыта устроился по удаленке работать. В первый месяц работал по 30 часов в неделю, в основном ради того, чтобы произвести впечатление. Потом в течении года работал по 15-20 часов в неделю, проблем вообще никаких не было. Главное найти такую вакансию (естественно платить будут немного по меркам москвапитера, но для региона отлично). Самый простой вариант - поддержка проектов и ленивое запиливание новых. Периодически просматривайте Brainstorage, что-нибудь да найдете.
    Ах да, работодателю совершенно не обязательно знать вашу выработку в часах (если речь идет о фиксированной зп). Вы выполняете задачи - все довольны - никто ничего не спрашивает и вы получаете деньги + опыт.
    Ответ написан
    3 комментария
  • Вам известны какие-нибудь ресурсы по поиску удаленной работы в США?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    А чем вас не устраивают фриланс биржы? На всяких одесках частенько ищут людей на полноценную удаленку. +никто не мешает сделать качественно какой-нибудь проект, чтобы заказчик от радости описался, и он потом вас будет кормить заказами так, что это будет аналогично удаленке.
    Ну и к тому же 8$ в час это индус левел (хотя и больше, чем уровень многих нестоличных вебстудий), и если ваши умения соответствуют этому рейту, то на одеск конечно пока рановато.
    Ну и вообще, я слышал что гугл помогает:
    skillcrush.com/2014/10/10/sites-finding-remote-work
    Ответ написан
    3 комментария
  • Какие знания необходимы чтобы создать такой сайт?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Вырвиглазное, кривое и плохо-анимированное говно на флеше. Просто жуть.
    Я не большой любитель флеша, но нормальные люди там умеют делают приличные вещи. То что вы линканули - сделано какими-то криворукими людьми. На html5+css3 сейчас делают намного более красивые вещи.
    Ответ написан
    2 комментария
  • Как временно убрать css transition?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Мой ответ является расширенной версией ответа Илья Шатохин про добавление класса .no-transition.
    И он в общем то полагается на костыль, но не настолько ужасный как setTimeout.
    .no-transition {
      transition: none !important;
    }

    Затем в js пишем нечто подобное
    elem.classList.add("no-transition");
    var triggerLayout = elem.offsetHeight;
    // действия с элементом которые произойдут мгновенно

    Суть такова, что работа с DOM в браузере оптимизирована таким образом, что он "группирует" все изменения и потом применяет их одновременно. Но, если в js коде обращаться к свойстам элементов, которые триггерят лэйаут, эти группы будут "дробиться" в этом месте вызова. В итоге вот эта самая строчка "var triggerLayout = elem.offsetHeight;" вызывает триггер лэйаута и операция с элементом происходит уже так, словно к нему добавлен класс без транзишена. Точно таким же образом например анимируются элементы с display: none, которые надо показать с помощью изменения opacity. Вначале вы меняете свойство display, затем триггерите лэйаут, затем добавляете класс изменяющий опасити - у вас происходит анимация. Без триггера элемент просто моментально появится.
    Таблицу css триггеров можно найти тут - csstriggers.com
    + вот тут еще пишут про это gent.ilcore.com/2011/03/how-not-to-trigger-layout-...
    Сам по себе лэйаут нужно триггерить только тогда, когда это является лучшим способом реализации анимации, ибо это влияет на производительность. На эту тему (и многие другие вещи) вам сюда - https://developers.google.com/web/fundamentals/per...
    Ответ написан
  • Цена верстки на фрилансе?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Вам надо определиться со своим часовым рейтом (относительно ваших навыков/крутости/известности) и работать по этому рейту. Конкуренция за то, чтобы сверстать говношаблон для вп за 1к рублей (условно), это путь вникуда (если только вы не являетесь голодным студентом без опыта).
    Ответ написан
    Комментировать
  • Как задать анимацию блоку?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    codepen.io/suez/pen/dcbdd6e94968897628766796c3956fa6
    Первый блок со старта имеет размеры 600х300, но невидим, ибо уменьшен с помощью transform: scale(0);
    Этот метод работает быстро и он никак не будет задевать рядом стоящие элементы (они со старта будут расположены так, как будто рядом с ними стоит блок 600х300), то есть минимум нагрузки при анимации. Но из-за этого вы получите sub-pixel rendering неточность, и границы будут чуточку размытыми. Так же важно уточнить, что я использую transform-origin: 0 0; для того чтобы анимация увеличения происходила с левого верхнего угла. Если этот параметр убрать, то увеличение будет происходить относительно центра.
    Второй блок имеет на старте ширину/высоту по нулям и при наведении на картинку происходит транзишен этих параметров до заданных величин. Соответственно этот процесс будет задевать все элементы в своем потоке + транзишен размеров само по себе затратное затратное действие и если внутри будет текст, то во время анимации с ним будут происходить страшные вещи.
    Ответ написан
    Комментировать
  • Как не волноваться на собеседовании?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Вам надо приходить на собеседование вот с таким настроем, если другие варианты не помогают:
    Осторожно, маты
    Ответ написан
    1 комментарий
  • Где найти бесплатные фотографии для коммерческого использования для сайта?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Юзаю вот это allthefreestock.com
    Ответ написан
    Комментировать
  • Как быстро войти в технологический пик html5 верстки?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Вариант с обучением через верстку .psd макетов вас до "пика" не доведет. Максимум до уровня рядового "верстальщика". Сверстать статику может каждый второй, кто хоть иногда этим занимается. Если вы нацелены на реальный "пик", то вам надо учиться на основе живых примеров уровня www.awwwards.com www.cssdesignawards.com и www.thefwa.com
    Копайтесь, смотрите что как сделано, пытайтесь сами воссоздавать отдельные куски "не смотря под капот" (то есть только на основе того, что вы видите, не залезая в F12). Но перед этим вам надо будет нагнать основы, то есть все что связано с css трансформами, нестандартными лэйаутами и другими трендами дизайна, а то иначе когнетивный диссонанс вам обеспечен. После этого будете долго практиковать анимации, свг, 2d-canvas и в самом конце возможно даже WebGL. Обязателен к употреблению codepen.io
    Ну а если прочитав все это вы вдруг поняли, что вас на самом деле не интересуют всякие нестандартные промо-сайты, а вам просто надо уметь верстать странички для стандартных интернет-магазинов или еще чего подобного, то вам достаточно будет потратить 1-2 месяца на чтение вводных статей и начать штамповать сайты на бутстрапе. Вот.
    Ответ написан
    3 комментария
  • Нужны ли углубленные знания javascript angular-разработчику?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Если речь идет о чем то примитивном, типа вывести данные в шаблон и забыть, то с таким кто угодно справится, ибо изначально ангулярчик был запилен с расчетом на дизайнеров и бэкендщиков. Но как только потребуется написание чего-то сложного, изменение некоторых кусков фреймворка под себя, уверенной работы с директивами и так далее, то пиши пропало. С ангуларом очень легко начать, но потом оказывается что там все нихрена не просто и без пол-литра не разобраться (и постоянно надо воевать с фреймворком). Так что с 99% вероятностью ты превратишь проект в jQuery-лапшу уже через неделю, и любой нормальный разработчик, заглянувший внутрь, захочет повеситься.
    И вообще, уровень js-garden это прям совсем дно дна, рановато вам еще пользоваться фреймворками.
    Ответ написан
    Комментировать
  • Какие ресурсы (желательно на русском) можно использовать для изучения применения svg в веб-разработке?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    По собственному опыту скажу, что с русскими ресурсами по свг все плохо. Знаю что Yoksel иногда пишет про свг вот тут (css.yoksel.ru) и знаю такую вот вводную.
    По англоязычным источникам:
    1) Сборная солянка №1
    2) Сборная солянка №2
    3) tutorials.jenkov.com/svg/index.html - много раз выручал этот сайт. Правда попадал я на него обычно с гугла, полностью все не читал.
    4) sarasoueidan.com/articles/index.html - ищите по SVG. Есть очень много отличнейших статей, прям эталон.
    5) Статьи на https://css-tricks.com/
    6) Конечно же великий tympanus.net/codrops
    7) Ну и самое самое важное - постоянно пилить демки и смотреть как пилят другие. Чекайте awwwards и подобные сайты, просматривайте codepen. На правах саморекламы - codepen.io/suez/tag/svg (изучаю свг третий месяц, полет нормальный).
    Ответ написан
    Комментировать
  • Тяжело ли, зная язык программирования на уровне джуниора, найти удаленную работу?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Конкретно удаленку (а не фриланс) найти просто. Причем даже не нужны какие-то крутые знания, просто ищите работу "мастера на все руки". Будете поддерживать сайты, пилить новые и все такое (о том как при этом развиваться, написано ниже). Только платить будут мало. Точнее будут платить мало по меркам москвапитера, но для какого-нибудь небольшого городка вы будете чувствовать себя чуть ли не богачем на фоне большинства знакомых, и при этом работать по 3-6 часов в день.
    По поводу развития - все зависит от вас. Если вы жить не можете без постоянной помощи более опытных сотрудников, то вам будет тяжело. Если же вы умеете гуглить (а это на самом деле немногие умеют), любите читать все возможные статьи/книги/обсуждения и имеете тягу к запиливанию демок/велосипедов, то "прокачка" будет идти намного быстрее чем в какой-нибудь стандартной "местной веб-студии". Говорю это по своему опыту. Еще год назад я покинул местную "топовую веб-студии города" (топ40 студий по битриксу в России если не ошибаюсь, хотя на деле там печально) будучи зеленым джуном с 5 месяцами опыта работы, тут же устроился по удаленке (прям тем же вечером), а сейчас я бывшим коллегам каждую неделю показываю свои фронт-энд демки и они считают меня магистром (правда тут важно уточнить, что работая по удаленке, я вообще не напрягался, пахал по 10-20 часов в неделю и большую часть времени тратил на саморазвитие, ибо задачи там были тоже не особо развивающие).
    Так что мое мнение таково, что будучи джуном вам важно лишь думать об эффективности своего развития, и если работа по удаленке кажется вам удобным вариантом роста, то ищите не раздумывая.
    Ответ написан
    4 комментария
  • Как сделать тень у div четырехугольника?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Если вы хотите использовать нестандартные формы, да еще и при этом делать для них правильные тени, то вам поможет только svg. Я не уверен насчет того, можно ли это реализовать с помощью какого-нибудь svg-mask, но вот для отдельного svg элемента тень делается легко.
    Так что в вашем случае это скорее всего выглядит как явный оверкилл, и эту самую тень лучше симулировать с помощью :before допустим.
    На случай если вам интересна тема с свг, я вот даже недавно делал демку с динамической тенью для svg (треугольник по центру) - codepen.io/suez/pen/GgGMGo
    *Примечание для комментаторов оригинального сообщения: нет, box-shadow не поможет для элемента, со скошенными углами, сделанными с помощью border. Тень будет рендерится прямоугольной, относительно width/height объекта.
    Ответ написан
    8 комментариев
  • Как решить проблему с SVG?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    По ходу нашел решение на основе этого stackoverflow.com/questions/19076655/svg-sprite-ba...
    В общем в background-size: необходимо указывать не только x но и y величину. На основе того, что у вашего оригинального svg спрайта (gamma.antikvarus.ru/themes/frontend_v2/images/svg/...) значения 960/560 (основываясь на viewBox), а на сайте у вас background-size: 424px; то в итоге получил такое значение
    background-size: 424px 247px;
    Как только его поставил, позиция svg стала одинаковой в хроме и фф, а если точнее, то стала как в ff, то есть смещенная вверх.
    Тестировал на основе иконки логина (Вход), у которой по умолчанию было background-position: -65px -28px;
    Вот так с измененными значениями (-22px вместо -28) выглядит в хроме
    XXAwS7e.png
    а так в FF
    IwmW7BX.png

    Так что просто добавляете y значение для background-size и увеличиваете y значение background-position на 6px.
    Ответ написан
    2 комментария
  • Почему не работает filter invert в IE11?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Да потому-что он там и не работает caniuse.com/#feat=css-filters
    С помощью css не решите проблему для 11 осла, вам нужна какая-нибудь либа для работы с изображения на канвасе.
    Ответ написан
    2 комментария
  • Есть ли библиотеки для организации интерактивных подсказок в интерфейсе?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    bootstraptour.com
    usablica.github.io/intro.js - с оврелеем.
    + на каком-то сайте видел тур как во втором примере, но с красивыми и реалистичными кривыми стрелочками на канвасе. Но боюсь что там было свое решение.
    Ответ написан
    Комментировать
  • Как убрать тормоза в прорисовке блоков с большими картинками в chrome?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Пятиминутка оптимизации:
    1) У вас нигде не включена 3д акселерация. Необходимо использовать либо will-change, либо translateZ(). Проще наверное will-change.
    а) Добавьте will-change: width, left; для .side
    б) Добавьте will-change: transform, width, opacity; для .img
    Вот так выглядит таймлайн у меня без твиков:
    pq5WvkG.png
    А вот так выглядит с моими твиками
    rAxTkFy.png
    Как видите до твиков средний фпс был около 30-40 и иногда стабильно проваливался до 20, что в общем то хреново. После твиков 50-60 с джанками на js/layout. Их я уже оптимизировать тут не буду, мне лень :)
    2) У вас .side изменяет свойство left, это весьма затратная херня. Постарайтесь переписать с использованием translateX. Это даст буст по производительности
    3) Изменение width для фуллскрин элементов это жутко затратное действие, так что ничего удивительного что без твиков у вас все тормозило.

    UPDATE: таймлайны приведены из хрома, если это кого интересует. В изначальном виде сайт одинаково ужасно тормозил на chrome/ff. При этом в ie11 все смотрелось весьма неплохо :) Конкретно сказать почему все именно так - не в состоянии, ибо уже сто лет не делал анимацию без акселерации. Обычно всегда побеждает хром, ибо в нем все работает и анимируется плавно, потом идет фф, где почти все работает, но зачастую идет проседание по производительности, и замыкает тройку ослик11, в котором зачастую много-чего не пашет (но при этом то что пашет, работает быстрее чем в фф).
    Ответ написан
    1 комментарий