• Почему не работает плавная css анимация с градиентом?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Ну потому что css транзишены не работают с градиентами. Самый простой трюк - создаете псевдоэлемент :before/:after с фоном и его показываете через изменение opacity от 0 до 1 (таким же способом например "анимируют" переход от одного градиента к другому).
    Ответ написан
  • Как писать грамотный css код?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    >не могу ни добавлять классы, ни менять их названия в html
    >должен поддерживать работу ie8
    >дизайн сайтов делается без дизайнера
    >не могу использовать js

    Как там в аду, неплохо живется?
    Тут работу другую искать надо, а не деградировать в болоте, издеваясь на собой. Грамотный css невозможен без контроля над html и без адекватного дизайна (и общения с дизайнером, если речь идет о чем то сложнее говнолендинга). Ну а ие8 это вообще все равно что гроб засыпать не землей а говном. Я ие11 уже полгода+ не открывал и Edge чекаю "по желанию".
    Ответ написан
  • LinkedIn, есть ли польза?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Линкедин это по большей части для западного рынка, когда вы уже поработали в нескольких неплохих компаниях, написали у себя в истории крутые должности с красивыми и офигенными описаниями и параллельно со всем этим обмазались всякими "коннекшенами" со всех тех же мест где вы работали (или с кем пиво на конференции пили). В общем такой себе Circle Jerk, на котором вас в основном будут находить ушлые HR, отправляющие слегка измененную копипасту с описанием вакансии.

    Не то чтобы это прям бяка жуткая, но активно профилем заниматься стоит только всяким менеджерам/бизнесменам и эйчарам, которым как бы без связей любых мастей далеко не ухать по карьерной лестнице.

    Я, как обычный разраб, просто принимаю почти все входящие коннект реквесты и любезно отвечаю эйчарам "сейчас позиция не интересует, но потом если что возможно напишу", ибо план B лишним не бывает (хотя, по ощущениям, все равно будет проще найти работу через друзей или какой-нибудь Hired если приспичет, чем ползти в эту жуть).
    Ответ написан
  • Нюансы верстки email-письма?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Если требуется во всех почтовых клиентах (допустим Outlook 2011+), то офк онли таблички с инлайн стилями. Респонсив поддерживается адекватно только в эпл почте + имеется гибридный подход для gmail, но он геморойный.
    Вообще норм люди делают подобные вещи с помощью вот таких штук foundation.zurb.com/emails.html
    Руками только наркоманы все верстают, ибо повесится можно.
    Ответ написан
  • Зачем нужна концепция mobile first?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Mobile First хорош для контент-ориентированных сайтов. Блоги, интернет-магазины, всякие там соц-сети/форумы и новостные сайты. В общем для всех тех сайтов, на которые юзер будет заходить более 1 раза в своей жизни с телефона. Делать вообще все сайты в режиме mobile first - полный бред. Если у вас на руках проект для разработки промо-сайта со свистелками и перделками на канвасе/webGL, свг анимациями то вам необходимо будет сосредоточить все свои силы на этих тяжеловесных вещах для десктопа, и потом при понижении до планшета/телефона выпиливать все эти монструозные вещи без особых сожалений.

    Если же вы раз за разом мучаетесь с адаптацией десктоп версии контент-сайта под телефоны, то вам надо подойти к дизайнеру и побить его. И вообще в любом месте (даже не добавляю слово "нормальном") всегда делают макеты как минимум под десктоп+телефон (и в идеале еще под сорт-оф планшеты и большие десктопы).
    Ответ написан
  • Сколько верстальщиков на фрилансе с Mac OS?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Зачем верстальщику мак то для этого. Существует https://zeplin.io/ специально чтобы люди не мучались с макетами и кроссплатформенностью. Открыл сайтик и у тебя макеты с циферками и всякими плюшками перед глазами. Если весь дизайн будет ваш, то заводите себе аккаунт (платный офк, но там копейки) и просто приглашаете людей в определенные проекты, расшаривая им нужные макеты.
    Уже год+ не открывал софта наподобие фотошопа/скетча и надеюсь так всегда и будет далее.
    Причем зеплин умеет и в фотошоп и в скетч.
    Ответ написан
  • Как определить производительность клиента (компьютера)? Свести к удобству нагрузку сайта скриптами?

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

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Немного пооффтоплю (но реленвантно в рамках "Карьеры"), но идти !тестировщиком! в какую-то очередную унылую снг контору и строить планы чтобы через ДВА-ТРИ года стать каким-то унылым "руководителем" это просто такая нереальная печаль, что мне даже стало интересно как вообще у людей настолько ужасные планы в жизни то появляются. За 2-3 года можно стать норм спецом, свалить из страны и получать в несколько раз больше, чем получает очередной мамкин руководитель отдела в фирме "рога и копыта". И уже потом там, в цивилизации, можно будет легко вырасти до какого-нибудь руководителя, если вы без подобных амбизиций не видите себя в этой жизни.
    Ответ написан
  • Как сделать такой скролл?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Куча свг, анимация которых привязана к текущему "прогрессу" (скроллу страницы). Такое например можно замутить с помощью GSAP Timeline, создаете таймлайн, запихиваете вагон всех возможных анимаций, грамотно расставленных на определенных этапах и потом меняете прогресс таймлайна относительно отношения позиции скролла к общей высоте скролла.

    Могу с уверенностью сказать что на создание этого сайта ушло много слез разработчиков и дизайнеров.
    Ответ написан
  • Как сделать такой эффект слайдера?

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

    Я почти 2 недели назад сделал такую демку - codepen.io/suez/pen/AXQaEg, тут все намного плавнее и красивее, да еще и все реализовано с помощью css, js лишь 2 класса добавляет, но у меня правда отсутствует функционал слайдера, ибо концепт другой. Но можете изучить css чтобы понять как это дело работает.
    Ответ написан
  • От чего зависит плавность работы анимации на сайте?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Вам необходимость использовать Timeline в Chrome DevTools для профилирования производительности анимаций и не только.

    Хотите знать основы оптимизации рендеринга - вам сюда https://www.udacity.com/course/browser-rendering-o...

    Причин плохой оптимизации может быть вагон и маленькая тележка. У вас там могут огромные элементы анимироваться с помощью top/left вместо transform: translate, у вас при каждом скролле может идти repaint огромных картинок, забирая по 60-100мс на каждый шаг и так далее. Скорее всего причины крайне простые и связаны с использованием древних и убогих методик для анимаций, аля jQuery.animate (который до 3й версии юзает setTimeout вместо requestAnimationFrame под капотом).
    Ответ написан
  • Какой выбрать фреймворк для сложных веб-анимаций (с примером)?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Варианта 2 почти всегда:
    1) Greensock (GSAP). Самая крутая либа для анимаций, умеет наверное все, кроме разве что канваса/webgl (для этого обычно уже юзают threejs или ручками что-то пишут).
    2) Bodymovin. На второй гифке например последовательная анимация, не требующая интеракций от юзера, но содержащая при этом множество деталей и микродвижений. Пилить такое руками - ОЧЕНЬ много часов (разница между похожим прототипом и прототипом на 90% схожим с гифком - колоссальная). В то время как с bodymovin вы просто экспортируете всю анимацию из after effects и запустите ее на клиенте. Есть конечно же свои плохие стороны, отсутствие гибкости и весьма немалое количество кода, экспортируемого из AE, но обычно в таких ситуациях других способов не бывает.
    Ответ написан
  • Каков по-вашему наиболее оптимальный возраст для профессиональной миграции программиста?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Мне 25, я в Сингапур приехал в марте. В компании (стартап, 20+ человек) почти самый молодой (моложе только стажер вроде как). Было много комментариев по поводу моего возраста, что я такой вот молодой. На всяких попойках с друзьями компании все тоже удивляются что мне всего лишь 25, то есть для большинства это возраст еще вчерашнего студента, у которого жизнь только началась.

    Так что выкиньте из вашей головы эти странные мысли и газуйте куда вам хочется.
    Ответ написан
  • Какие есть интересные блоги современных JavaScript ниндзя?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Блоги не надо мониторить, надо подписаться на пачку дайджестов, и там вы найдете ссылочки на почти все достойные статьи, включая менее известных (но не менее крутых) товарищей.
    Получать 5-10 писем с кучей ссылок в неделю намного проще и эффективнее, нежели чем чекать 10+ блогов, где апдейты бывают раз в 1-6 месяцев.
    Ответ написан
  • Как оптимизировать последовательность свойств в классе css?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Я делаю так:
    1) Z-index
    2) Display (flex и так далее)
    3) Позиционированние (position: absolute; left: 50%; top: 50%;)
    4) Padding
    5) Margin
    6) Border&border-radius
    7) Background/box-shadow и подобные свойства
    8) Шрифты/цвет и подобные вещи относящиеся к тексту
    9) Composite Layer Stuff (perspective/transforms/opacity и так далее)
    10) Cursor: pointer;
    Ответ написан
  • Как разобраться с позиционирование элементов со свойством transform-style: preserve-3d в Mozille?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    К сожалению никак. Баг старый, и его по виду вообще фиксить не пытаются даже.
    Вот мой вопрос на SO из февраля прошлого года - stackoverflow.com/questions/28751990/firefox-bug-w...
    Сам спросил, сам кое-как хакнул (в комментах пояснил + в ласт комменте ссылка на демку, там вроде тоже комментарии оставлены).
    Я уже делал много демок с 3д трансформациями и множественным вложением элементов с transform-style: preserve-3d и каждый раз наступал на одни и те же грабли. Вот еще демка, в которой хакнуть не получилось, в итоге в фф все сломанное - codepen.io/suez/pen/WvaKpy А потом люди продолжают говорить что фф это хороший браузер для веб-разработчиков, что вызывает у меня больной смех.

    Что касается вашей конкретной ситуации, то вам надо просто избегать нестинга элементов и разделять их по своим отдельным контейнерам с перспективой и так далее. То есть вам нет смысла держать 3 блока в 1 контейнере, просто сделайте 3 контейнера, задайте нужные z-index, а внутри каждого сделайте 3д-эффекта и они по идее не будут друг с другом пересекаться. Вообще с трансформами, z-index и сочетанием прочих свойств часто имеются проблемы, самый простой способ фиксинга это увеличение количества враппер-контейнеров. Лень вдаваться в детали, просто поверьте наслово, у меня большой опыт страданий в этой области :)
    Ответ написан
  • Svg иконки в SPA?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    SVG не поддерживает динамическое изменение xlink:href аттрибута, по-этому для таких иконок надо писать отдельный мини-компонент, который будет просто динамически вставлять элемент с линком внутри в страницу. Так по итогам даже проще будет, ибо вы сможете присобачить кучу своих кастомных аттрибутов к этому компоненту, чтобы потом все это дело легко стилизовать, не заставляя себя на каждом шагу запихивать убогую конструкцию в виде
    <svg>
      <use blah blah>
    </svg>


    Ну и для поддержки ИЕ9+ юзайте это https://github.com/Keyamoon/svgxuse (просто подключили на страницу и все работает).

    Тут вот статья по иконкам в реакте - https://www.sitepoint.com/a-working-svg-workflow-f...
    В ней в комментах имеется описание моего подхода (особенно пункт 4) - https://www.sitepoint.com/a-working-svg-workflow-f...
    Ответ написан
  • Как потоково работать с аудио из браузера?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    https://developer.mozilla.org/en-US/docs/Web/API/M... (navigator.getUserMedia устарел, по инфе мдн).
    И с этим связано куча другой фигни. Надо просто как следует погуглить (по английски конечно же).
    Изучал эту тему полгода назад, без проблем смог найти пачку гайдов по стримингу аудио/видеопотоков на бэкенд, с последующей обработкой и отправкой юзеру обратно в измененном виде.

    Вот какой-то рандомный гайд - https://subvisual.co/blog/posts/39-tutorial-html-a...
    Гуглите что-то типа "javascript stream audio to server"
    Ответ написан
  • Как на jquery указываются координаты и прочие опции svg path?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Щито?
    JQ вообще почти не дружит с svg. И вообще сформулируйте вопрос нормально, а то за "это надо в джейквери" хочется расстрелять.
    Ответ написан