Ответы пользователя Nikolay Talanov

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

Nikolay Talanov @Ronnie_Gardocki

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

Вы <textarea> закрыли тегом </textarea>?

Ответ написан более трёх лет назад

2 комментария

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

Nikolay Talanov @Ronnie_Gardocki

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

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

Ответ написан более трёх лет назад

6 комментариев

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

Nikolay Talanov @Ronnie_Gardocki

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

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

Ответ написан более трёх лет назад

1 комментарий

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

Nikolay Talanov @Ronnie_Gardocki

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

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

Ответ написан более трёх лет назад

Комментировать

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

Nikolay Talanov @Ronnie_Gardocki

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

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

Ответ написан более трёх лет назад

Комментировать

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

Nikolay Talanov @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 комментариев

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

Nikolay Talanov @Ronnie_Gardocki

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

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

Ответ написан более трёх лет назад

12 комментариев

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

Nikolay Talanov @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?

Nikolay Talanov @Ronnie_Gardocki

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

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

Ответ написан более трёх лет назад

1 комментарий

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

Nikolay Talanov @Ronnie_Gardocki

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

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

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

Ответ написан более трёх лет назад

1 комментарий

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

Nikolay Talanov @Ronnie_Gardocki

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

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

Ответ написан более трёх лет назад

Комментировать

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

Nikolay Talanov @Ronnie_Gardocki

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

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

Ответ написан более трёх лет назад

1 комментарий

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

Nikolay Talanov @Ronnie_Gardocki

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

Под ваше описание подходит второй пример из этого гсап плагина - https://greensock.com/draggable
Если я конечно правильно понял что вам необходимо.

Ответ написан более трёх лет назад

2 комментария

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

Nikolay Talanov @Ronnie_Gardocki

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

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

Ответ написан более трёх лет назад

Комментировать

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

Nikolay Talanov @Ronnie_Gardocki

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

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

Ответ написан более трёх лет назад

2 комментария

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

Nikolay Talanov @Ronnie_Gardocki

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

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

Ответ написан более трёх лет назад

1 комментарий

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

Nikolay Talanov @Ronnie_Gardocki

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

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

Ответ написан более трёх лет назад

10 комментариев

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

Nikolay Talanov @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();и все.
Это то что вам необходимо?

Ответ написан более трёх лет назад

Комментировать

Реализация блочного скролла?

Nikolay Talanov @Ronnie_Gardocki

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

Как называется такая прокрутка контента? - вот здесь я давал ответ по точно такому же вопросу.

Ответ написан более трёх лет назад

1 комментарий

Программируете ли вы в свободное время?

Nikolay Talanov @Ronnie_Gardocki

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

Да, пилю демки на кодпене. Раньше для себя кодил чуть ли не больше чем по работе (за которую мало платили) и реализовывал любую визуальщину, которая лезла мне в голову. Сейчас завален работой с нормальной оплатой, так что выделаю время лишь на "оживление" гифок с дриббла, ибо они красивые и предоставляют суровый такой челлендж, за счет которого я продолжаю совершенствовать свои навыки и не отставать от передовой прогресса.

Ответ написан более трёх лет назад

1 комментарий

Войдите на сайт