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

Nikolay Talanov

Я у мамы фронтендщик.
Ответы

  • Где взять ссылки на красивые анимированные лендинги для образца?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Почти вся годнота проскакивает тут:
    www.cssdesignawards.com/wotd-award-winners
    www.awwwards.com/awards-of-the-day
    www.thefwa.com (у них неудобный просмотр)
    Соответственно можете и по месяцам/годам чекнуть.
    Вот несколько примеров, которые я скоро буду пристально изучать:
    https://www.chelseacollective.com/
    www.lempens-design.com

    Не относится к лендингам, но недавно около часа изучал его сайт и работы, очень крутой чувак:
    https://caferati.me/
    Ответ написан
    1 комментарий
    1 комментарий

  • Стоит ли использовать SASS (libsass) версию для node.js?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Ну так то юзают сейчас libsass везде. Он быстрее руби версии почти в десятки раз на некоторых тестах и при этом не надо ставить руби с гемом.
    Сам год+ назад юзал ruby sass, компиляция на лайврелоаде была заметно медленней того, что я сейчас имею с libsass.
    Ответ написан
    1 комментарий
    1 комментарий

  • После textarea сайт обрывается, что делать?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Вы <textarea> закрыли тегом </textarea>?
    Ответ написан
    2 комментария
    2 комментария

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

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Хотите денег - делайте себе имя. Пилите вещи для опенсорса (гитхаб и подобное)/демки и какие-нибудь статьи (с этим чуть посложнее, ибо нужен норм английский, либо можно писать по-русски и потом переводить с чьей то помощью). Параллельно с этим будете получать заказы на фрилансе (клиенты сами будут на вас выходить) для повышения квалификации, портфолио и естественно получения адекватных денег. В отличии от стандартной офисной работы в снг, рост тут далеко не линейный. В снг офисе (не компании топ уровня, хотя и там не уверен что все сладко) зачастую с трудом можно получать прибавку в 10-30% раз в 4-12 месяцев, а иногда вообще единственный способ повышения зп это переход в офис другой компании. На том фрилансе, который я описал выше, никто не мешает повышать часовой рейт по 5 баксов каждый раз после выполнения 1/2 проектов. 3 месяца назад стартовал с 30, сейчас веду проекты по 35, следующие будут по 40. К концу года планирую дойти до 50+.
    Ну а если фриланс вам не интересен в долгосрочной перспективе, то имея за плечами некий вклад в коммьюнити и неплохое портфолио, будет не особо тяжело найти работу в какой-нибудь зарубежной компании.
    Ну и само собой вам надо быть хорошим специалистом :)
    Ответ написан
    6 комментариев
    6 комментариев

  • Как такое сверстать, затемненный фон с прозрачной областью?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Обычно подобные "подсвечивающие оверлеи" делаются под прямоугольные варианты, и тогда просто 4 оверлей-дива ставятся вокруг области и получается нужный эффект. Но так как у вас круг, то в голову лезут такие варианты:
    1) Что-то на канвасе. Тут кодом не помогу, с канвасом слабо дружу.
    2) Svg маски, возможно css blend-modes (не уверен).
    3) Создать глобальный overlay с z-index: 1. Создать блок, в него положить клон всего этого грида. Этот блок сделать таким вот круглым, задать ему z-index: 2. При движении этого блока, клон грида внутри двигаем в противоположном направлении. В итоге будет получаться эффект подсветки.
    4) Еще наверняка возможные какие-нибудь варианты с псевдоэлементами, svg, и оверлеем, состоящим из кусков, но у меня сейчас воображения на такое не хватит.
    Ответ написан
    1 комментарий
    1 комментарий

  • Минимальные версии браузеров?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Спрашивайте у клиента. Если сам клиент точно не знает - узнаете какая примерно у него аудитория. Если вы делаете какую-нибудь "онлайн-бухгалтерию", как выше в примере привели, то придется мучатся с каким-нибудь 8 осликом. Если вы делаете какой-нибудь визуально-навороченный сайт, который явно не ориентирован на странных людей с древними ИЕ, то клиент с легкостью может сказать "ие10+ нам подойдет", ибо затраты ради полноценного graceful degradation под ие9- попросту будут не оправданы из-за отсутствия надобности в таких сомнительных клиентах.
    + если клиент наобум говорит "ие8+, да чтоб даже какие-то эффекты работали" без дополнительной информации почему так, то вам надо изучить этот вопрос и предоставить ему статистику. Я просто сразу говорю что из-за отсутствия многих фич, разработка под такое старье будет сжирать на 20-50% больше времени и сильно деморализует меня, и после этого клиент внезапно начинает думать головой.
    Ответ написан
    Комментировать
    Комментировать

  • Как вы (кто на фрилансе) показываете заказчику сделанную работу (сайт), которая ещё не оплачена (полностью)?

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

  • Как лучше анимировать svg?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Зависит от того, что именно вы хотите анимировать в svg. Кому то трансформаций хватит, а кому-то нужны сложные анимации для path со всякими кастомными приблудами.
    Универсальные варианты - GSAP и D3. Гсап чисто заточен под анимации, и там имеется большое количество готовых решений/плагинов для свг. Если вам необходимо сделать крутую и комплексную анимацию, то это наверное самый оптимальный вариант. D3 тоже хорош, но он больше рассчитан на работу с данными, и для всяких красивяшек-анимашек не особо подойдет.
    Есть еще velocityJS и подобные либы, но они все по сути дела являются лайт-версиями Гсапа (при том что у самого гсапа есть более легкие его версии).
    CSS умеет многое, с ним можно даже анимировать отрисовку path и подобные штуки, но он вообще не дружит ни с какими ИЕ, когда дело касается работы с path (+ в ФФ имеются проблемы с transform-origin). Примеры баловства с svg лоадерами на чистом css:
    codepen.io/suez/pen/myvgdg
    codepen.io/suez/pen/ogmMOM
    codepen.io/suez/pen/MwJdRy

    Если вам необходимо сделать что-то совсем уж кастомное и крутое, и при этом вы совершенно не уверены что либы в этом вам помогут (либо нет такого функционала, либо пока научитесь его юзать - сойдете с ума), то придется писать велосипеды на js. requestAnimationFrame и в бой. Вот два велосипеда для примера - codepen.io/suez/pen/oXLroX и codepen.io/suez/pen/emjwvP

    Ах да, еще есть SMIL анимации (которые прямо внутри SVG описываются) и они умеют очень многое (во многом даже удобнее js получаются, без потери в функциональности), но от них уже медленно отказываются современные браузеры (да и к тому же они никогда не поддерживались в IE). Так что их можете обходить стороной.
    Ответ написан
    12 комментариев
    12 комментариев

  • Верно ли начал использовать SASS(scss)?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    1) Вкладывать селекторы более чем на 1 уровень - ад и израиль. Вообще вложенные селекторы должны очень редко использоваться, в основном когда дело доходит до глобального изменения состояния какого-нибудь компонента (например добавили класс к блоку, и относительно этого класса изменили стили вложенных элементов блока). Изучите BEM или другие CSS методологии, и проблем станет меньше.
    2) Использовать теги в качестве селекторов это почти всегда плохо. Как только вам придется вносить изменения и например то, что раньше у вас было "a" должно будет превратиться в "li", вы резко сядете в лужу со своими тегами. Тут вам снова поможет какая-нибудь css методология.
    3) Использование конструкций типа font: {} очень сильно затрудняет чтение стилей, ибо поначалу создается впечатление что это очередной вложенный селектор. Юзайте обычные font-size/font-weight, и если вам очень хочется все это компоновать в один font в финальных стилях, то юзайте плагин для gulp/grunta который будет это делать.
    Ответ написан
    12 комментариев
    12 комментариев

  • Как сделать такой паралакс?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Писать код очень лень, напишу примерно возможные варианты:
    1) Использование css blend-modes. Но мне кажется что с неоднородной картинкой не прокатит такое.
    2) Дублировать этот заголовок, поменять его цвет, поместить его внутрь скошенного контейнера, повернуть его в обратную сторону с помощью skew (вы ведь скошенный контейнер через skew будете делать) и с помощью translateY все это дело двигать (аля контейнер двигается вверх, а заголовок вниз). В виде описания возможно выглядит сложно, но как только вы накидаете какой-нибудь кривой пример, станет куда проще.
    Вот например 2 демки с похожим эффектом маски (только без скошенных углов, но это по сути дела 1 свойство добавить):
    codepen.io/suez/pen/XJGOyL - здесь текст в пунктах меню "перекрашивается" в белый, хотя на самом деле внутри перемещающегося блока просто расположен дубликат списка, который движется в обратную сторону, во время движения самого блока.
    codepen.io/suez/pen/kqlIJ - моя самая первая демка на эту тему, код там скорее всего жутковатый, но зато можно легко понять как работает этот mask эффект через F12.
    Ответ написан
    Комментировать
    Комментировать

  • Чем заняться на html/css?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Ну если речь идет о саморазвитии в свободное время и интересует вас при этом именно визуальщина, то либо всякие плагины/либы на гитхаб, либо демки на codepen.io пилить.
    Про гитхаб я не советчик, а вот по кодпену шарю. Заходите каждый день - смотрите чужие работы из picked/popular - ставите себе цель, делать не менее крутые штуки в будущем. Начать можете с форков чужих работ (там имеется крайне удобный для этого функционал) и ковыряния в них, дабы понять, что за магию люди делают. И параллельно с этим пилите свои демки на каждый чих. Каждый раз когда у вас в голове появляется мысль о реализации какого-то эффекта/лэйаута/компонента, лезете туда и пытаетесь это быстро накодить. На старте будут получаться некрасивые и кривые штуки, но потом очень быстро (при постоянной практике) уровень начнет серьёзно расти. Главное поначалу не задумываться о практическом применении таких поделок и просто делать то, что вам нравится.
    Сам начал на кодпене заниматься фигней год+ назад. Вначале просто пилил по 1 демке в неделю, чтобы друзьям в пятницу перед обедом показывать, типа "смотрите поцаны, какие штуки новые умею делать!". Тогда же в августе мой первый пен попал в picked pens. Ну а после этого понеслось. Вчера перешагнул отметку в 800 фолловеров (codepen.io/suez). Так же последние 3 месяца работаю исключительно по сарафану с кодпена с нормальным валютным рейтом.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как заставить 'reduce' изменять 'this' а не возвращать новый объект?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Почему бы не написать что-то такое:
    beers.reduceBeers = function () {
    return this.filter(function(el) {return el === 'domestic'});
    };

    Конкретно у вас ошибка в том, что вы на сам this никак не влияете. То что вы там юзаете reduce, это никак не затрагивает this за рамками самого reduce. Вот если бы вы юзали splice например, то тогда данные бы менялись.
    В моем примере делается все тоже что и у вас, только правильным методом (тут явно нужен фильтр, а не редьюс, который юзается для всяких сумм и прочих вещей) и изменяется сам this, который тут же возвращается.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как вы решаете вопрос с постоянными правками после сдачи проекта?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Если правки надо делать исключительно из-за ваших косяков (и правки критичные) то делаете бесплатно, или на худой конец за половину часовой ставки.
    Во всех остальных случаях все должно делаться по часовой ставке, как обычная работа.
    Если проект был по фиксу, который вы 100% закончили (то есть на приемке сказали что все ок), и заказчик не хочет оплачивать правки по часовой ставке, то это исключительно ваша проблема, что вы продолжаете допиливать такие вещи забесплатно (или за копейки).
    Ответ написан
    Комментировать
    Комментировать

  • Обязательное "непревзойденное" знание фреймворков?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Стандартная тема для снг, требуй дофига, плати нифига. Я раз в месяц стабильно лезу читать вакансии на brainstorage/hh для поднятия настроения.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать анимацию окружности-крутилки?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Под ваше описание подходит второй пример из этого гсап плагина - https://greensock.com/draggable
    Если я конечно правильно понял что вам необходимо.
    Ответ написан
    2 комментария
    2 комментария

  • Верстка нетривиального вида блока?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    codepen.io/suez/pen/14fc61c2e5f637b27464dab3c3ca8ad9 - топорный вариант сделанный на коленке. Координаты path полигона юзаются в clippath и в path с нужным вам stroke и stroke-color.
    В современных браузерах (кроме ие и еще каких-то инвалидов) можно юзать css clip-path, вот примеры codepen.io/dubrod/details/myNNyW
    Ответ написан
    Комментировать
    Комментировать

  • Как отслеживать коллизии SVG объектов?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    https://greensock.com/draggable - вот это посмотрите. Сам не юзал, но по описанию подходит. + мне знающие люди советовали это в некоторых случаях.
    Ответ написан
    2 комментария
    2 комментария

  • Что лучше для svg-анимаций snap.svg или velocity.js,?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Velocity это по сути дела лайтовая надстройка над jQuery. В плане фич/производительности она с лихвой проигрывает Snap/GSAP. Лучше всего юзать GSAP, ибо эта либа подходит для анимации вообще всего, а не только svg.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как лучше подключать стили - через link или @import?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Использование Dmitrijs Balcers это вредная практика. Мне сейчас в 4 часа ночи лень искать пруфлинки, но про это писали уже миллион раз.
    Речь конечно же идет об импорте as is. Если же на проекте имеется склеивание стилей, то там только импорт и юзается наверное в главном файле стилей.
    А вообще в 2015 такие вопросы задавать некорректно, ибо фронтенд у вас должен автоматизированно собираться на проекте.
    Ответ написан
    10 комментариев
    10 комментариев

  • Как правильно вызывать функции по ресайзу Javascript?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Не до конца понял что конкретно требуется, но обычно все делаю так:
    1) Создается функция, внутри которой лежит логика ресайза, и эта функция оборачивается в debounce функцию
    // обычно беру debounce функцию отсюда http://davidwalsh.name/javascript-debounce-function
// ибо подключать ради неё какой-нибудь underscore/lodash это overkill
function debounce(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};
};

var resizeFn = debounce(function() { /* your logic */ }, 100); // 100 это собственно таймер дебаунса, то есть функция будет срабатывать только тогда, когда после последнего её вызова прошло минимум 100ms
// прикрепляем функцию к обработчику события
$(window).on("resize", resizeFn);

    2) Ну и так как вам необходимо все это дело триггернуть на загрузке страницы, то просто пишите resizeFn();и все.
    Это то что вам необходимо?
    Ответ написан
    Комментировать
    Комментировать