• Верстка страницы с фонами неправильной формы?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    codepen.io/suez/pen/29eaa4dc2230b58280b1bee92a8a64cb - пример на коленке, сделанный с помощью transform: skewY. Можно без проблем еще сделать с помощью rotate. В обоих случаях контент внутри блока нужно будет поворачивать на противоположное количество градусов, чтобы он выглядел как обычно.
    Вариант с трансформами оправдан только для тех случаев, когда пространство с этими срезанными углами должно быть "живым". То есть там будет виден какой-то контент/неоднородный бэкграунд и все такое. Если бг будет тупо черным, то проще сделать это на основе :before/:after.
    Ответ написан
  • Python/Django-кидди, SQL-мартышка, Web-негр — что перспективнее (Ага, «Pre-Junior»)?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Если у вас нету реального опыта над "боевыми" сайтами и подобными вещами, то одназначно 1 вариант. Можно сколько угодно читать книжки и заниматься самообразованием, но без старта в офисе под присмотром более опытных коллег, результаты будут плачевными скорее всего. Это просто аксиома, надо поработать вначале 4-12 месяцев в офисе, пиля живые сайты/проекты и впитывая знания от "старших", а дальше будет намного проще.
    2 вариант подходит только если вас действительно к этому тянет.
    3 вариант звучит крайне сомнительно, ибо опыта для полноценного фриланса у вас по сути дела нет. С проектом то вы может и справитесь, но что вы будете делать после его окончания? Этот же заказчик вряд ли завалит вас новой работой, а скиллами для эффективного фриланса за 1 проект вы точно не обзаведетесь. Есть риск после этого погрязнуть в болоте под названием "русские фриланс биржи", где вы с большой вероятностью будете биться на смерть со школьниками за самые примитивные и убогие задачи, типа "сверстайте 10 страниц и натяните их на вордпресс за 5к рублей".
    Вначале надо выбирать такую работу, где собственно будет много этой самой работы и развития (не без помощи более опытных коллег). А после получения стартового буста сориентироваться будет намного проще.
    Ах да, если вы действительно хотите работать 5-7 лет в Краснодаре, то это эээ... весьма мрачное виденье своего будущего. Через 1.5-3+ года (зависит от области) можно будет без проблем начинать думать о фрилансе в валюте (при учете интенсивного развития).
    Ответ написан
    4 комментария
  • Как сверстать волнистую линию?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Если эта штука будет абсолютно статичной - то делайте картинкой и не парьтесь.
    Если хочется чтобы эффекты можно было присобачить - делайте свг.
    tympanus.net/Development/TextInputEffects/index2.html - чекните Nao и Shoko, там при фокусе/блюре как раз идет анимация волнистой линии. Правда там линии изначально прямые, а кривая часть спрятана в оверфлоу и видна только во время анимации. У вас по виду так же красиво не получится сделать.
    Ответ написан
    Комментировать
  • Как сверстать данный (нестандартный) блок?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    clip-path: polygon для современных вебкитов/блинков. Весьма легко кастомизировать, можно всякие параллаксы сделать и при этом производительность будет хорошая.
    Svg clippath для более серьёзной поддержки.
    Можно нашаманить что-нибудь с transform: skew, но чую что решение будет похоже на один большой хак + будет пиксельная лесенка.
    P.S. - все написанное выше подразумевает, что вам это обязательно надо сверстать не с помощью картинки, то есть в этом должен быть какой-то смысл (эффекты/параллакс/что-то еще). Если то, что изображено на скриншоте, будет статичным (я про эти полигональные фоны), то проще сделать картинкой, у которой нижняя левая часть (там где обычный светлый фон) будет прозрачной.
    Ответ написан
    7 комментариев
  • Через что делать анимацию при наведении курсора (hover): transition или @keyframes?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Кейфреймы нужны для цикличной , "односторонней" или сложной (множество шагов с множеством изменений разных свойств) анимации. Например shine эффект для кнопки, когда проносится полупрозрачный элемент под наклоном, создающий эффект сияния. Если делать транзишеном - после убирания мыши с элемента, сияющий блок поедет обратно. А с кейфреймом он при каждом наведении будет 1 раз проезжать слева направо. https://cssanimation.rocks/pseudo-elements/ - вот собственно пример.
    Транзишены соответственно юзаются когда, например, надо поменять свойства элемента при наведении или добавлении класса. При этом при добавлении/убирании разных классов можно настраивать везде свои удобные тайминги/задержки на то, как свойства будут меняться. В общем удобная декларативность во по всем фронтам.
    Ах да, еще кейфреймы нужны когда необходимо врубить анимацию на старте страницы, не прибегая при этом к js.
    https://cssanimation.rocks/transition-vs-animation/ - вот это еще можете чекнуть.
    Ответ написан
    Комментировать
  • Производительность canvas анимации?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    codepen.io/suez/pen/2ab9aaf1b3290ea5ebdcbaee61898f64 - похоже на необходимый эффект?
    В общем перепробовал массу способов, вариант с margin самый адекватный. При использовании translate все дергается при анимации, видимо из-за sub-pixel rendering.
    Я естественно позволил себе сделать прототип с использованием вьюпорт едениц, но по виду и вы их юзать можете, раз уж вы пытались юзать clip-path с куда более скромной поддержкой :)
    Для того чтобы расположить элементы не в % величинах (там где у меня юзается left: 20% например), надо будет либо хардкодить свои цифры, либо просто юзать calc(), считая отступ центра кружка относительно вертикального центра страницы.
    Ответ написан
    Комментировать
  • Работа без высшего образования, это реально?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Вышка желательна/возможно даже обязательна, если:
    1) Вы захотите самостоятельно свалить в какую-нибудь цивилизованную страну. Причем не абы как на полгода пожить и выежать/заежать туда сюда, а полноценно иммигрировать туда как белый человек.
    2) Вы вдруг захотите работать в каких-нибудь гос-конторах. Там любят бумажки.
    3) Вы вдруг захотите попасть в крутую ит-корпорацию за рубежом. Есть конечно исключение, если вдруг вы будете настолько круты, что за вами рекретеры будут гоняться день и ночь, но на такое лучше точно не расчитывать.
    4) Вам припрет заняться машинным обучением/бигдатой/%другим_математическим_хардкором%. Причем вышка тут уже нужна будет не для корочки, а для реальных знаний. Возможен конечно вариант с серьёзным самообучением, но это уже скорее из разряда исключений.
    Ответ написан
    Комментировать
  • Angularjs и получение переменной?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    В контроллере, где вы хотите получить этот id, вам надо вставить $routeParams как зависимость, и тогда вы получите id вот так - $routeParams.id
    Ответ написан
    Комментировать
  • Использовать али нет единицы REM в CSS, как правильно использовать (три вопроса)?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    По вопросам:
    1) Однозначно вариант 2.
    2) Это всего лишь мнение. Не бывает серебрянных пуль. Бегло пробежался глазами по статье, в основном увидел ругания em, про rem ничего путнего не нашел, только упоминание ie8 и создание нового уровня абстракции.
    3) Выглядит как какой-то жуткий костыль и извращение, я бы прошел мимо такого.
    Ответ написан
    Комментировать
  • Почасовая оплата или фиксированная?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Лично я думаю, что мелкие проекты по почасовой ставке следует делать только тогда, когда вы уверены что разбираетесь в теме и считаете себя профессионалом. Тогда почасовая ставка позволит нивелировать все проблемы связанные с невнятным объяснением задачи заказчиком и его небольшими хотелками. 1 час меняли цвет кнопочки? Плати.
    А если опыта у вас немного, то лучше работать по фиксу, предварительно у себя в голове расчитав выгоден ли этот фикс, умножив вашу желаемую часовую ставку на предпологаемое время выполнения задачи. Ибо из-за неопытности есть риск потратить на задачу намного больше времени. И в случае с фиксом, для сохранения своей репутации, вы посидите до ночи и все допилите. А вот если вы с почасовой факапнетесь, то осадочек останется не только у вас, но и у заказчика. А если вы задачу сделаете быстрее, чем ожидали, то тогда вообще радость будет.
    Ответ написан
    1 комментарий
  • Какие преимущества фриланс имеет над работой в офисе?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Описываю по себе:
    1) Возможность создать свой собственный режим сна. Для меня вставать в 8-9 утра это настоящая боль. Уже год+ засыпаю между 3-4 часами ночи и просыпаюсь между 11-12. То есть абсолютно всегда сплю свою норму в 8 часов, для того чтобы чувствовать себя нормально и не пить никаких кофе.
    2) Отсутствие временных/моральных/физических затрат на дорогу до работы. Конкретно мне жаловаться не приходилось, ибо первое место работы было в 10 минутах ходьбы от дома, но вот люди в больших городах от этого явно страдают.
    3) Возможность жить и работать так, как это удобно ТЕБЕ. Вот сижу я днем, дописал только-что какой-то кусок проекта и смотрю в окно, а там солнышко светит и птички поют. Ну я беру и иду бегать на стадионе. И это все происходит в 2 часа дня. А что в офисе? Ходить проветривать мозги на улицу на официальных перерывах? А если заработался и пропустил перерыв, то что? Во многих компаниях придется сидеть дальше тупить.
    4) Возможность работать тогда, когда это наиболее удобно и эффективно для тебя. Один из самых важных пунктов. В офисе пришел и сидишь 8-часовой рабочий день. И ты же не можешь подойти к начальнику и сказать, что у тебя сейчас мозги не работают, и тебе бы хотелось свалить домой вообще. Ну может 1-2 раза отпустят, а что делать если тебя в каждый второй день после обеда парализует на пару часов? Будешь в итоге сидеть и накручивать спагетти-код на вилку. А потом его рефакторить, матерясь. Мне вот например ночью нравится работать, но где вы видели офисы, в которых вам позволят одну половину дня работать там, а другую ночью дома?
    5) Отсутствие привязанности к каким-то предпочтениям фирмы. Вот попали вы в веб-студию, делающую сайты на битриксе. И представим чисто теоретически что вам там платят нормальные деньги. А дальше что? Ну полгода вы попилите магазинчики. А потом еще полгода. И еще. Ну конечно не везде так уныло, но своих "особенностей" хватает во всех компаниях.
    6) Отсутствие видимого потолка по заработку. В стандартной компании вас посадят на оклад, +небольшие премиальные если вся команда в сроки будет сдавать проект например и нарисуют вам роадмап, по которому вы будете строить планы на жизнь. Аля "через полгода сдам 7 проектов и меня повысят, увеличив зп на 15%". А потом в один прекрасный вечер после работы вы сядите изучать что-то интересное дома. И будете изучать недели-месяцы. И вот приходите вы однажды на работу, с кучей новых знаний, а у вас в голове стойкое ощущение того, что сейчас вы достойны не то что этой прибавки в +15%, а вы на все 30% тяните. Но вам никто этого не даст. Просто потому-что обычные офисы живут по другим правилам.
    Ответ написан
    11 комментариев
  • Из гуманитария в программисты, или как найти работу?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Предложу чуточку нестандартный вариант, вдруг поможет:
    1) Находите интересующие вас компании, где вы бы хотели теоретически работать. Естественно никаких гуглов/ораклов, что-нибудь местное или по удаленке.
    2) Находите собственно их почтовый ящик, на который они принимают письма общего/рекрутингового плана.
    3) Строчите туда письмо "от души". То есть хороший, красивый, структурированный текст, в котором в кратце даете понять что вы из себя представляете, как бы быстро обучаетесь, проводите параллели со своей бывшей работой рекламщика, рассказываете о былых невероятных заслугах и тд и тп. Ну в общем пишите письмо так, что если бы оно пришло например к вам на ящик, то вы бы его полностью прочитали, даже не понимая зачем вам его вообще читать.
    4) Надеетесь на лучшее. И даже если никто не возьмет к себе, то по-любому кто-то любезно ответит "простите, вы конечно классный, но совсем уж новички нам сейчас не нужны". И их можно будет сразу заносить в список, на случай смены работы, когда вы уже наконец-то поработаете на первой работе. + это хорошо повлияет на моральное состояние, ибо все эти топорные отказы по сухим резюме/или вообще отсутствие даже отказов, могут вгонять в депрессию поначалу.
    Ответ написан
    Комментировать
  • Как сделать смену текста на лендинге по таймеру?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    2 варианта, придуманных за полминуты:
    1) Если слоганы не будут менять/добавлять (или будут делать это очень редко) и не нужна будет смена слоганов по клику юзера, то создаешь блоки со слоганами в html, ставишь их в одном месте через position: absolute (например внутри основного контейнера слоганов) и затем пилишь keyframes анимации на css, которые циклично будут показывать/прятать нужные блоки изменяя opacity и прочие штуки, типа трансформов.
    2) Если слоганы надо подгружать с бэкенда где их будут часто менять/добавлять, то так же запихиваешь их в разметку, добавляя первому элементу со старта класс active, затем на js через $(".text-block").length получаешь их количество, создаешь переменную инкременту и setInterval. Внутри интервала с нужным тебе шагом увеличиваешь инкременту, и к нужному блоку добавляешь класс active, убирая его же с других блоков. То есть что-то такое в итоге:
    var len = $(".text-block").length;
    var intervalCounter = 1;
    setInterval(function() {
      intervalCounter++;
      if (intervalCounter > len) intervalCounter = 1;
      $(".text-block").removeClass("active");
      $(".text-block").eq(intervalCounter - 1).addClass("active");
    }, 5000);

    Если потребуется реализация смены слоганов при клике юзера, то заменяешь интервал на setTimeout, который вызывает сам себя, а на click биндишь очистку таймаута, изменение инкременты, смену классов и запуск таймаута. Часть этого кода тогда лучше будет обернуть в отдельную функцию.
    Анимации соответственно будут реализованы с помощью css transition, и будут срабатывать при добавлении/убирании класса.
    Ответ написан
    Комментировать
  • Нормальные ли это цены за час работы?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Более чем уверен, что эта группа фрилансеров работает по бизнес-модели веб-студий. То есть все полученные деньги, пилятся между людьми. Это я к тому, что сам верстальщик на руки вряд ли получает больше 500-600 руб/час. И вы тут скорее платите за "результат команды". Правда результат этот может быть весьма плачевным в таком случае, ибо 1к/час с текущим курсом рубля, это весьма низкий уровень с точки зрения командной разработки.
    Ответ написан
    Комментировать
  • Как переквалифицироваться из эникейщика в программиста?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    23 года? И столько тлена в словах? Ну ловите мою кулстори, у меня тлена в 23 было куда больше...
    Чуть менее двух лет назад, летом 2013, мне было 23, и я имел НОЛЬ опыта работы (если не считать 2 месяца стажерства в магазине комп техники по практике от универа). Кое-как устроился seo-шником в местную веб-студию, даже не зная что это за работа, во время отправления резюме (гуглил после уже). Конечно, как только приступил к работе, сразу понял что seo это не мое, но это помогло мне через 3 месяца на том же месте стать веб-джуниором. И вот я стал джуном, имея за плечами 4 курса на codecademy и одну, плохо прочитанную, книгу. С космической зп в 12к рублей! Через 5 месяцев я уже приступил к работе по удаленке с другими людьми, где платили 30к, и при этом можно было работать по 15-25 часов в неделю. Это позволило мне читать все интернеты на тему фронтенда, а потом, самое важное, пилить демки на кодпене, засиживаясь до ночи. В марте уволился, отдохнул, и в апреле начал очень лениво заполнять профили на зарубежных фриланс биржах. А потом на меня внезапно свалилось подобие сарафана из-за моих демок, и люди просто стали писать мне с предложением что-нибудь запилить, хотя профили я так и не запилил на биржах. Сейчас пилю 2 проекта, с рейтом в 30$/h, для клиентов пустяковая цифра, а для моего Архангельска это вообще какой-то криминал :)
    Ну а вам, с вашим имеющимся бэкграундом, вообще не знаю чего бояться. Проблемы могут быть, только если окажется что программирование это "не ваше". Если же вы любите это дело, то просто садитесь, и начинайте пахать. В первую очередь на свое саморазвитие, поначалу я бы даже посоветовал искать что-то с удобным графиком/местом работы, ибо "неудобная" офисная жизнь убивает весь энтузиазм как правило. А без энтузиазма на старте никуда не уехать.
    Ответ написан
    16 комментариев
  • Почему не работает массив ссылок jquery?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Вы отменяете стандартное действие по клику на span (которого в общем то и нет), и затем идет всплытие ивента, которое триггерит стандартный ивент при клике на анкор. Вам либо надо предотвращать всплытие, с помощью e.stopPropagation(), либо биндить перехват ивента конкретно на a, а не на спан внутри a.
    Ну и к тому же конструкция с toArray.forEach кривая, вам надо делать как написано в ответе Kir ---
    Ответ написан
    Комментировать
  • Зачем нужна конструкция var App = App || {} в JavaScript?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    stackoverflow.com/questions/6439579/what-does-var-... - вот тут хорошо отвечено.
    Если в кратце, то допустим у вас один используемый namespace в двух файлах. При инициализации кода из 1 файла вы не находите такой объект и создаете новый, добавляя в него функцию1. Затем инициализируется второй файл, видит что объект уже создан и просто добавляет в него функцию2.
    Ответ написан
    2 комментария
  • Как отменить прокрутку страницы наверх при клике по пустой ссылке?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Это напрямую связано с тем, что ваши радио кнопки имеют такие стили:
    input[type="radio"] {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    При клике на них, браузер пытается перевести окно к их положению.
    Задайте им примерно такие стили:
    .hidden-radio {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      z-index: -9999;
    }

    Опасити спрячет кнопку визуально, отрицательный z-index сделает их некликабельными/неактивными для hover'а.
    Ответ написан
    1 комментарий
  • Как сделать эффект нажатия частей картинки?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Вариант номер 1 - найти какое-нибудь полуготовое решение для работы с такими вещами. Думаю что на d3js.org такое уже сто раз решали, и есть какие-то готовые плагины.
    Вариант номер 2 - по идее, если такую карту нарисовать в каком-нибудь Иллюстраторе, то там же можно будет её экспортировать в виде svg. После этого лишь надо будет "подчистить" этот свг и затем для областей (отдельные path элементы) добавлять класс через js, который будет их как то перекрашивать и делать прочую нужную вам магию (с возможностью использования transition и так далее).
    Ответ написан
    Комментировать
  • Как разрабатывать при помощи bem-core и bem-tools?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Как по мне, дак для личного проекта или проекта где вы единственный фронтендер, юзать интструменты для БЭМА это извращение. Просто пишите классы по методологии, адаптировав её немного под себя, и не издевайтесь над собой.
    Ответ написан
    Комментировать