Роман =): Возможно через пару часов скину, мне надо будет отрубить синхронизацию скролла&навигации, а то если зайдет одновременно несколько юзеров, там будет твориться ад.
Я конечно не уверен, но у вас эта иконка по виду сделана в виде двухстороннего path с stroke-width="1" stroke="#000", который потом заливается fill="#000". Хотите сделать реал-тайм отрисовку закрашенной линии - найдите иконку, которая сделана одним жирным path элементом, а не обводкой по краям.
А можно подробнее про paypal? Начиная с каких-циферок можно начинать бояться? Сейчас в среднем приходит по 1к$ раз в пару-тройку недель.
Просто я планировал держать доллары на пэйпале как раз (именно доллары, без конвертации, ибо верификацию прошел), чтобы в следующем покинуть страну и пользоваться ими без проблем.
Паттернов и всяких способов организации кода в модуль для написания таких плагинов - вагон и маленькая тележка. Сяду писать днем - выберу один паттерн, сяду писать вечером/ночью - в голову взбредет что-то другое. Искать один единственный подход на все случаи жизни - бесполезная затея.
Просто изучайте популярные плагины из новых, которые уже успели собрать по 500+ звезд и извлекайте для себя все то, что покажется вам полезным и интересным. Ну и параллельно пытайтесь писать свою лапшу и по пути же её рефакторить.
trafic:
>Вы наверное до этого математику учили профильно
Я дружил с математикой в школе/первых 3х курсах универа, но потом я тупо почти все забыл. Так что почти всему обучался снова по ходу (ну или вспоминал). Конкретно самой математики там не много, половину вещей найдете в готовом виде. А вот с чем много геморроя, дак это с тригонометрией. Вот её я вообще полностью всю забыл со школьных времен, в итоге некоторые демки делал чувствуя себя дауном, вспоминая разницу между косинусом и синусом :)
По поводу статей - я сам их не пишу сейчас, недостаточно уверенный английский для того чтобы можно было в полной мере гордиться написанным (хотя меня приглашали писать гайды на codrops и другие крутые порталы для фронтендеров). Думал на хабр что-то писать, но потом стало лень, да и тяжело бывает все мысли воедино собрать.
По поводу того где писать - есть 3 варианта:
1) Свой блог. Вариант подойдет если не будет лень им заниматься и если вы там будете писать большие тексты, со вставкой всяких айфреймов с демками и так далее. Я планирую в ближайшие полгода себе запилить сайт-портфолио, где заодно еще и будет раздел под блог. Думаю писать там фривольные гайды "как я пилил эту демку".
2) Медиум. Вариант для хипстеров. У них там хорошая система редактирования контента, + есть шансы быть зафичеренным. Обычно медиум выбирают те, кому лень пилить свой блог.
3) Гостевые посты на крутых сайтах/блогах (codrops/css-tricks/adobe и так далее). Это наверное самый престижный вариант, если только ваш блог не имеет каких-то крутых циферок посещаемости. Написать естественно позволят по инвайту или если вы какую-то годноту предложите.
Для первых двух вариантов, при учете отсутствия популярности блога/вашего твиттера, нужно будет молиться чтобы вас ретвитнули какие-нибудь популярные персоны. 1 ретвит Крис Коейра/Сары Соуедан += сотни/тысячи просмотров и сильно увеличенные шансы попасть во всякие дайджесты. У меня вот так 1 демку ретвитнули крутые люди 2 месяца назад, дак до сих пор активность в твиттере вокруг неё происходит...
svgishe: Просто есть ооооочень большая разница между "красивой и статичной" страницей и "красивой и динамичной". Первый вариант сможет сверстать почти любом индус с адаптивом и чтобы в ие8-9 работало. Во втором случае, при наличии весьма нетривиальных эффектов и всяких мелких но красивых анимаций (которые вы возможно не замечаете как юзер, ибо в этом вся суть) сложность возрастает просто в разы. И я говорю лишь о прототипе под хром. Добавляйте к этому адаптив, дофига часов на оптимизацию (очень сложный процесс) и кроссбраузерность с graceful degradation и получите то, за что компании интерактивным агенствам и крутым фрилансерам платят нехилые деньги за весьма немалые количества наработанных часов.
Я сейчас пилю фронтенд китайского интернет-магазина для фешен-стартапа. В статике все макеты весьма простые, но как только дело доходит до "давайте сделаем вот тут крутую анимацию" к рабочему времени начинают неистово прибавляться рабочие часы :) А если еще и у заказчика нету дизайнеров, способных сделать прототипы анимаций в каком-нибудь After Effects, то там можно спокойно 2-4 часа делать красивую анимацию для какого-нибудь фильтра грида продуктов, ибо будут всякие подгоны и "а можно сделать чтобы %магическое описание%?".
>Верстка еще около часа, может больше
Это все сейчас о всем том сайте в целом? Потому что на их главную был потрачен не один десяток часов (с учетом js конечно же).
У SMIL есть много хороших качеств, но:
1) Это полная декларативка. То есть сразу забываем про любые сложные вещи, завязанные с действиями юзера (положение мыши, свайпы и прочие штуки).
2) Все это дело оседает внутри svg, из-за чего порой туда страшно даже смотреть. + понимать как работает анимация на SMIL чисто зрительно намного сложнее, в сравнении с js-версией на основе либы.
3) Нулевая поддержка ИЕ и еще каких-то инвалидных браузеров.
Ну и прибавляем к этому то, что современные браузеры вскоре полностью откажутся от SMIL и получаем то, что новичку к этой штуке вообще лучше не притрагиваться.
svgishe: По поводу второй демки с pull down to refresh - там весят хендлеры на mousedown/touchstart, которые при активации врубают хендлеры на mousemove/touchmove и при mouseup/touchend их соответственно снимают. На собственно хендлерах отслеживания движений весит логика, которая в зависимости от пройденного расстояния мышью/пальцем меняет параметры свг элементов (наклоняет деревья, двигает горы и так далее). Когда заканчиваете ивент движения с достаточно пройденным растоянием, срабатывает функция возврата элементов в исходной состояние, которая это все дело анимирует, применяя определенные изинги (тайминг функции для анимаций). То есть можно увидеть, как после максимального оттягивания вниз и отпускания, деревья начинают очень сильно качаться в стороны туда сюда. Это elastic easing.
По поводу ссылки на сайт - видел давно его, очень крутой. Правда за пару часов вы далеко не уедете с свг, тут все не так просто, как кажется :)
svgishe: Ну в css из событий обычно юзается только :hover. Можно конечно всякие :focus/active юзать, но это уже такое себе дело.
По поводу этой демки - имеется свг с множеством элементов внутри (много path/g элементов, у которых есть человекопонятные имена классов), для каждого элемента в css я присобачиваю css @keyframes анимацию, которая что-то делает, стартует сама при рендере документа и повторяется до бесконечности (infinite). Внутри этих кейфреймов описаны изменения элементов, будь там отрисовка path (изменение stroke-dashoffset) или какое-нибудь opacity/transform. То есть по большому счету там анимируется одновременно 10+ элементов.
Synoptic: если человек будет работать с legacy кодом, то значит что он будет работать по устоявшимся на том проекте стайлгайдам. Так что это никак не относится к этому обсуждению. Мы тут обсуждаем как новые здания строить, а не как ремонт и запиливание балкона в конкретном доме делать.
По поводу БЭМ для всех - никто не мешает адаптировать методологию под себя с допущениями под определенный проект.
Synoptic: БЭМ - официальная рекомендация гугла. То есть не только "какого-то там яндекса". Так что нынче православно все делать классами и об этом твердят на каждом шагу.
У них там сетка в стиле Masonry, то есть все элементы расположены с помощью абсолютного позиционирования и js. Так что теги html/css у вас тут не к месту.
Такую сетку можно попытаться сделать с помощью флексбокса, но я на 90% уверен что она будет проигрывать по фичам и кроссбраузернсти варианту на js.
