Статьи

Анимация с помощью CSS, JS и SVG и предотвращение выгорания с Сарой Драснер

Сентябрь 27, 2018

Сара Драснер на выставке версий

В этом эпизоде ​​Showing Version к Тиму и Дэвиду присоединяется Сара Драснер, учитель, автор, консультант и штатный сотрудник CSS-Tricks. Они обсуждают анимацию с помощью CSS, JavaScript и SVG, преимущества анимации с помощью SVG по сравнению со статической графикой, SVG 2 и градиенты сетки, предотвращение выгорания, публичные выступления и написание, лучшее понимание посредством обучения, оплачиваемую и общественную работу, обучение на греческих островах и рисование змей и ящериц и мертвых вещей для энциклопедий.

Показать заметки

Основные моменты разговора

то, что я напомнил себе, когда начал заниматься консалтингом, было наихудшим сценарием, я получил работу. Это не значит, что нет никаких инженерных работ там или там для моего набора навыков, особенно моего опыта. Худший сценарий просто возвращался к тому, что я делал. Это было не так уж плохо.

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

Чтобы избежать выгорания, на выходных я делал для себя небольшие проекты. Я просто сказал: «Хорошо. Это воскресенье днем. У меня мимоза. Мы с моей второй половиной собираемся потусоваться и посмотреть телевизор. Я просто собираюсь написать глупую SVG-анимацию ».

Мир SVG открывает двери для множества вещей, которые либо сложно, либо невозможно сделать со статической графикой — особенно для анимации UI / UX.

Я начинал как научный иллюстратор, а это значит, что я рисовал змей, ящериц и мертвых вещей для энциклопедий.

Я всегда стараюсь им напоминать о том, что я не так долго выступал с речью. Это просто превращается в катящийся шар, и им не должно быть плохо, если у них нет такого большого опыта, потому что это то, что вы всегда можете получить.

Я бы что-нибудь узнал или начал бы что-то изучать, и затем, если бы я мог записать это для других людей, у меня были эти две птицы с одним каменным предметом, я не только мог понять это лучше, но и другие люди могли бы делать с этим тоже. И это супер захватывающе для меня

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

Часть градиента сетки — это «Ах, какой может быть сеть». Для меня, как для человека из SVG, это эквивалентно тому, кто работает в CSS Grid. Это похоже на тотальное изменение игры.

Сара Драснер на выставке версий

расшифровка

Тим:

Эй, как дела у всех? Это Тим Эвко …

Дэвид:

… а это М. Дэвид Грин …

Тим:

… и вы слушаете выпуск № 31 подкаста версий.

Дэвид:

Это место, где мы собираемся вместе, чтобы обсудить индустрию Интернета от разработки до дизайна, с некоторыми из людей, которые делают это сегодня, и планируют, к чему это приведет в следующей версии.

Тим:

Сегодня мы говорим с Сарой Драснер, которая является автором CSS-Tricks. Она является автором, консультантом и дает довольно отличные доклады о SVG и анимации. Мы собираемся поговорить с ней сегодня обо всех этих вещах и многом другом. Итак, давайте продолжим и начнем эту версию.

Дэвид:

Привет, Сара. Добро пожаловать на шоу.

Сара:

Здравствуй. Спасибо, что приняли меня.

Дэвид:

Спасибо, что присоединились к нам. Это шоу версий, и мы обычно хотели бы начать шоу с философского вопроса. И ваш философский вопрос на этот день: в вашей нынешней карьере, какая у вас версия и почему?

Сара:

Ну, это хороший вопрос. Я думаю, что я, вероятно, пережил переломные изменения в какой-то момент. [Смех] Это, вероятно, 2.0 или что-то, или 3.0, но не потому, что он супер продвинутый, а просто потому, что они ломали версии.

Дэвид:

Как вы описываете свою карьеру в эти дни? Потому что ты делаешь много разных вещей.

Сара:

Да я. Мне это нравится. Я естественно любопытный человек. Я был разработчиком и дизайнером в течение 15 лет, поэтому я начал, когда эти вещи не были очень отдельными, на самом деле, и все было сделано в таблицах и во всех вещах, связанных с бородой. С тех пор я работаю. Большую часть моего времени, работая в качестве разработчика, я был по-настоящему универсалом и занимался чем угодно, от разработки тем на WordPress до управления гигантскими библиотеками компонентов, до того, чтобы быть ведущим клиентом. Проекты варьируются от… для типичных задач переднего конца, и немного бэкенда, но не супер полный стек или что-то еще.

В прошлом году я уволился с работы в Трулии. Я был там менеджером UX-дизайна и инжиниринга и решил стать консультантом-фрилансером, потому что я работал над многими вещами, и у меня появилось много возможностей, и я очень рад этому, и бизнес процветает. Так что это довольно мило. Я работаю над разными проектами. Мне все время любопытно, поэтому я постоянно пробую разные вещи, которые мне действительно нравятся.

Дэвид:

Это здорово. Вы в основном переиздали себя как фрилансера в мире?

Сара:

Да. Я сделал это около года назад.

Тим:

Это был сложный процесс для вас?

Сара:

Поначалу я думаю, что это было немного страшно, потому что я получал много предложений сделать работу консультанта, и Вэл Хэд и я основали компанию под названием Web Animations Workshop , где мы собирались начать проводить семинары вместе. Это было похоже на то, что у меня сейчас есть работа, но что будет через четыре месяца, когда я этого не сделаю? В то время это было немного пугающим, но на самом деле это была противоположная проблема, когда у меня было больше работы, с которой я знаю, что делать, — это хорошая проблема. Я был приятно удивлен тем, как все прошло. Я думаю, что единственным неприятным сюрпризом являются мои налоги. Консультант налоги — спойлер оповещения! — это действительно сложно. [Смеется]

Дэвид:

Мы могли бы сделать целое шоу о том, как управлять своим бизнесом в качестве независимого консультанта!

Сара:

Это правда.

Дэвид:

Одна приятная вещь о том, как вы работаете сейчас — вы отбросили иллюзию безопасности, возникающую при работе с компанией, потому что, работаете ли вы на большой бренд или малый, вы никогда не узнаете, в ближайшие четыре месяца Там будет больше работы для вас, или если компания пойдет в другом направлении.

Сара:

Полностью. Я работал в гигантских компаниях, но я также работал в небольших стартапах, где это звучит так: «О, у нас есть начальный этап. Пока это хорошо ». [Смеется]. Такова природа бизнеса, но я думаю, что я напомнил себе, когда начал заниматься консалтингом, был наихудший сценарий — я получил работу. Это не значит, что нет никаких инженерных работ там или там для моего набора навыков, особенно моего опыта. Худший сценарий просто возвращался к тому, что я делал. Это было не так уж плохо.

Давид [4:13] :

Это очень верно. Это тоже захватывающе, потому что вы сами отвечаете за свою карьеру. Я действительно заинтересован в этих семинарах по веб-анимации.

Сара:

По сути, мы с Вэл ездим … Раньше это было по всей стране, а теперь, когда мы поедем в Париж в этом году, это будет по всему миру. Проведите эти двухдневные семинары или однодневные семинары, где у нас есть множество материалов, которые мы освещаем. Мы похожи на диаграмму интересов и способностей Венна, когда дело доходит до веб-анимации. Мы просто естественно заметили, что склонны к большому согласию во всем. Это пришло естественно. Сначала мы были друзьями, и начали говорить о веб-анимации, и когда мы тусовались и все такое, мы говорим: «Чувак, мы действительно тесно связаны по многим вещам». Так что семинар на самом деле было довольно легко провести вместе.

Дэвид:

Что влечет за собой семинар?

Сара:

Мы покрываем гамму. Мы начнем с некоторой теории. Она рассказывает о теории анимации в целом и о том, что можно узнать из истории анимации, а также о том, что можно узнать об истории ослаблений и временных интервалов, интервалов и тому подобного. Я склонен вдаваться в некоторые аспекты UI / UX для анимации. Мы немного поговорим об участии в проекте или интеграции в систему дизайна.

Затем мы начинаем использовать CSS-анимацию, а затем переходим к анимации JavaScript с помощью GreenSock . Затем мы делаем mo.js , затем реализуем React, и затем мы говорим о производительности веб-анимации. И если у нас есть время, у нас есть слайды и прочее для API веб-анимаций, а также D3 , но мы склонны переходить к одному из них, а не к другому. У нас есть тонны материала.

Тим:

Я собирался сказать, похоже, что на самом деле не так много всего, чтобы покрыть.

[Посмеивается]

Сара:

Есть много, что нужно учитывать. О, мы также говорим о React-Motion и SVG-анимации. Боже, мне не хватает целых рядов нашей мастерской. Мы рассмотрим, каково это анимировать SVG, оптимизировать и все такое.

Тим:

Это очень интересно, учитывая, что есть так много материала об анимации, чтобы перейти. Потому что, по моему опыту, я ведущий инженер, где я сейчас работаю. Я реализую все эти проекты, которые я получаю от нашей команды дизайнеров, но всегда кажется, что анимация никогда не задумывается.

Сара:

Вот почему мы сосредотачиваемся на этом, и поэтому говорим об этом, потому что на самом деле анимация, когда все сделано хорошо, действительно, очень эффективна, чтобы направлять ваших пользователей. На самом деле вы можете изменить конверсию потенциальных клиентов, поскольку загрузчики оказывают огромное влияние на воспринимаемую производительность. Там просто масса причин. Пользователи строят пространственную осведомленность. Если вы можете скрывать и отображать вещи по мере необходимости, вы очищаете пространство, вы делаете его более привлекательным для них. Но когда это делается плохо, это может вызывать раздражение, и я думаю, почему иногда это плохо звучит.

Поэтому очень важно делать это хорошо, и это то, что мы изучаем. В анимации также важно то, что вам действительно нужно использовать подходящий инструмент для работы. Если вы работаете с CSS-анимацией, когда CSS-анимация просто не собирается ее обрезать, и вам нужно перейти на JavaScript, это то, с чем вам придется работать.

React-Motion действительно хорош в определенном типе движения, которое прерывается, это один жест, но он не хорош в последовательном движении, и это является частью способа, которым его разработал автор. Мы переходим, когда использовать что, где: это действительно хорошо для такого рода вещей, это действительно хорошо для этого стека текста. Возьми в свои руки, поработай над этим немного. Студенты могут сами понять, что мы имеем в виду, когда говорим это. Это не просто «Поверьте нам на слово». Это как «Хорошо. Вы играете с этим, смотрите, что вы думаете », потому что есть много соображений. Вы не хотите вкладывать огромные средства в библиотеку или вкладывать туда средства и понимать, что это неправильный выбор для ваших нужд или потребностей ваших клиентов.

Тим [8:16] :

Это очень, очень хороший совет. Меня не раз укусили, когда я подходил к анимации с неправильной стратегией с самого начала. Мне любопытно, однако, как вы попали в тему анимации для начала?

Сара:

Это на самом деле интересно. Я был ведущим клиентом, а также управлял гигантскими библиотеками компонентов, и время от времени я был бы измотан — не только потому, что нужно было так много работать, а просто гигантские системы были сложными, и у вас была социальная политика между дизайном и разработкой. ориентироваться, если вы собираетесь работать с обоими мирами. Чтобы избежать выгорания, на выходных я делал для себя небольшие проекты. Я просто сказал: «Хорошо. Это воскресенье днем. У меня мимоза. Мы с моей второй половиной собираемся потусоваться и посмотреть телевизор. Я просто собираюсь написать глупую SVG-анимацию ».

Это было сначала, мне было просто любопытно и просто интересно, а потом я заметил, что это действительно помогло. Несмотря на то, что я работал на выходных, я возвращался на работу с чувством супер джаза. Вы думаете, это не совсем имеет смысла. Вы могли бы подумать, что чем больше у вас свободного времени, тем лучше вы будете себя чувствовать, но я заметил, что даже если бы я взял отпуск, я почувствовал бы себя немного лучше, а затем начал чувствовать: «Тьфу». Снова скоро, две недели спустя, три недели спустя. Чего мне действительно не хватало, так это волнения.

Этот прилив допамина вроде «Вау. Я заставил эту вещь работать, и она очень странная и, может быть, немного нелепая ». Я думаю, что изначально я начал заниматься этим из-за этого, а также из-за проблем UX и UI. Было так много вещей, которые нужно учитывать, когда мы работали с анимацией на работе, и я действительно хотел сделать это хорошо. Я думаю, что некоторые из этих вещей немедленно перевели на что-то, что я мог бы использовать на своей работе, и это было как двойное вознаграждение. Я делаю что-то смешное и глупое на выходных, а затем я могу применить это, как только доберусь до работы и скажу: «Смотри, все. Мы можем сделать это сейчас ». Они как« Вау. Ладно, круто ». Это было, наверное, одно из самых больших изменений в моей карьере.

Дэвид:

Все, кто только что слышал это: SVG анимация вызывает привыкание.

Сара:

Это определенно вызывает привыкание!

[Смех]

Дэвид:

Это забавно, потому что я думаю о SVG прежде всего как о — это масштабируемом, основанном на векторах способе представления изображений на экране, но я не думаю об этом сразу как об альтернативе анимации. И все же, он предлагает ряд преимуществ в определенных контекстах. Мне любопытно, в чем вы обнаружили преимущества анимации SVG?

Сара:

SVG анимация не является альтернативой анимации. SVG анимация — это анимация, в которой используются те же инструменты. Но у вас разные проблемы с SVG. Если вы манипулируете <div> Дело в том, что они плоские. Если вам нужно передвигаться по определенным фрагментам JPEG, например, предположим, что у вас есть океанская сцена с лодкой в ​​ней, вам придется на самом деле отрезать лодку от моря и перемещать их отдельно, что-то вроде этого.

Это становится немного хакерским. Вы должны сделать некоторое позиционирование. Может быть, у вас есть position: relative У вас есть position: absolute SVG — это изображение с навигационным DOM. Он построен с математикой. Существует возможность погрузиться прямо в него, схватить его и переместить так, как это не может сделать статическая графика. Это открывает двери для доступности. Вы можете играть с ним как с фрагментом строки, потому что у вас есть буквально такие безье, которые являются командами кривой, которыми вы можете манипулировать с помощью requestAnimationFrame()

Есть так много крутых и интересных вещей, которые вы можете сделать с ним. Все, что вы знаете о CSS-анимации или JavaScript-анимации, можно применить к SVG-анимации. Это не две разные вещи. Но мир SVG открывает двери для множества вещей, которые либо сложно, либо невозможно сделать со статической графикой — особенно для анимации UI / UX. Если мы говорим <canvas>

Давид [12:52] :

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

Тим:

Также я очень надеюсь, что кто-то сделает футболку с надписью «SVG, она построена с математикой», потому что я куплю пять из них.

[Смех]

Сара:

Это было бы действительно забавно. Если бы у вас был дизайнер, который мог бы создавать действительно сумасшедшую математику, это было бы неплохо.

Дэвид:

Может быть, кто-то, кто имел опыт в научном дизайне.

Сара:

Это правда.

Дэвид:

Который я полагаю, является одним из ваших фонов.

Тим:

Я собирался сказать, говоря о происхождении, я думаю, что нам еще предстоит услышать о вашем.

Сара:

О, да. Я начинал как научный иллюстратор, а это значит, что я рисовал змей, ящериц и мертвых вещей для энциклопедий. Мои родители — ученые, и в то время я увлекался искусством, так что это был мой способ восстать. Но, конечно, способ быть самым занудным, насколько это возможно во время рисования, — это научный иллюстратор. Вы не можете получить это далеко от своих родителей. Я начал работать в Полевом музее в Чикаго. Это Полевой Музей Естествознания. Они действительно классный музей. У них есть эта гигантская вещь Сью Т-Рекс.

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

Но я им понравился, я думаю. Они говорили: «О, мы хотим держать тебя в курсе. Вы можете создавать веб-сайты? »Это в 2000 году. Это было давно. Это было в те времена, когда вы могли взять книгу типа HTML для чайников и поучиться на выходных. Технический стек не был сложным; это было действительно очень просто. Это были сервировки стола. Это был встроенный JavaScript — что опять здорово! Люди даже не были — в музее в то время — люди еще даже не использовали CSS. Это было еще вроде как, «Это спорно.» [Хихикает]

Я начал изучать макеты столов, но веб-мастер научил меня больше и научил меня общепринятым практикам и прочим вещам. Я начал создавать сайты для них, а затем я создавал сайты для… Когда я был в научном сообществе, люди знали обо мне, поэтому я создавал сайты для UCSF и Стэнфорда и, как пару других занудных мест. Затем я пошел в аспирантуру, а затем стал профессором на греческих островах. Я был там преподавателем за границей в течение четырех лет, водил студентов по разным островам, учил их истории и проводил некоторые цифровые исследования.

Я все еще занимался веб-сайтом, потому что мне платили 10 тысяч долларов в год, как, впрочем, и очень низкая зарплата учителя. Оказывается, вы не можете не платить за студенческие ссуды так долго. В конце концов мне пришлось устроиться на настоящую работу. Я вернулся в Штаты и начал работать в агентстве здесь. Тогда я только что работал на технической сцене в Сан-Франциско.

Тим [16:35] :

Я должен сказать, что в 31 серии это, вероятно, одна из самых интересных историй о происхождении, которые мы слышали до сих пор.

Сара:

[Хихикает] Я немного старше, поэтому у меня больше времени для создания историй.

Дэвид:

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

Сара:

Да. Я думаю, что это действительно только началось в прошлом году или около того. Это получилось очень быстро. Меня сейчас приглашают ко многим вещам, и это действительно здорово, но когда меня спрашивают о… Многие люди связываются со мной, желая говорить, особенно, как женщины в области технологий, а также для совета и наставничества. Я всегда стараюсь им напоминать о том, что я не так долго выступал с речью. Это просто превращается в катящийся шар, и им не должно быть плохо, если у них нет такого большого опыта, потому что это то, что вы всегда можете получить. Поместите это слово, что, если вы хотите говорить, определенно продолжайте пытаться. Это не так, как в первый раз, когда вы отправляете, вы получаете все выступления. Это как будто ты пытаешься, а потом ты обнаруживаешь это, и это приходит, как только идет.

Дэвид:

Я знаю, что ты тоже пишешь немного дольше, правда?

Сара:

Я думаю, что написание и преподавание для меня всегда были способом лучше понять вещи. Я был профессором раньше, поэтому я знаком с форматом обучения. И что я заметил, так это то, что я понимаю концепцию гораздо больше, когда мне приходится ее записывать. Когда я работал в крупных компаниях, это было не раз в форме документирования того, что я делал — например, написание кучки кода, затем документирование того, что мы делали для гигантской системы или чего-то в этом роде.

Когда дело дошло до общественной работы, то, что я думал, было круто, было то, что я узнал что-то или начал бы что-то изучать, и затем, если бы я мог записать это для других людей, у меня были эти две птицы с одной каменной вещью не только Могу ли я понять это лучше, но другие люди тоже могут с этим что-то делать. И это очень здорово для меня, особенно когда я вижу SVG-анимацию и кто-то говорит: «Я узнал об этом, прочитав материал Сары». Это самое крутое чувство в мире — что кто-то может что-то сделать из-за того, чему вы его научили Тем более, что сообщество научило меня лично многим вещам.

Переполнение стека — я обязан им всю оставшуюся жизнь, и то же самое с CSS-трюками и то же самое с блогом Дэвида Уолша . Есть так много концепций, которые я изучил, потому что сообщество настолько открыто, что отдача чувствовала себя довольно хорошо.

Дэвид:

Похоже, это может вызвать привыкание тоже.

Сара:

Определенно да.

Дэвид:

Какие проблемы вы видите, что люди приходят к вам по тем вопросам, которым вы учите?

Сара [19:36] :

Люди приходят ко мне с кучей разных вещей. Я бы сказал, что работа, с которой они приходят ко мне для работы по контракту, немного отличается от работы в сообществе, которую я выполняю. Что касается работы по контракту, обычно это либо то, как мне вставить анимацию в эту гигантскую систему, и можете ли вы прийти и научить нас, как это сделать, и каковы проблемы. Иногда люди нанимают меня, чтобы рассказать им о SVG, или иногда люди придумывают анимацию SVG для клиента, а затем не могут понять, как это сделать.

Иногда меня вызывают как последнюю вещь, чтобы исправить вещь. Я получаю множество вещей, и некоторые из них — просто анимационные пользовательские потоки, микровзаимодействия. Общественная работа, которую люди обычно просят меня, больше похожа на то, как кто-то пишет мне в 2 часа ночи: «Я не могу этого понять. Я не знаю, почему инсульта нет. Это должно быть отправлено на производство завтра. Пожалуйста помоги. Вот CodePen.

Это немного больше похоже на крошечные кусочки ошибок или крошечные кусочки взаимодействия, которые они не совсем получили, или что-то в этом роде. Я бы сказал, что, конечно, вещи, на которые меня нанимают, — это большие проекты, и вещи, которые люди просят в сообществе, просто уточнить что-то или отладить что-то.

Тим:

Я послал это, пожалуйста, помогите мне с этим твитом SVG, я думаю, Джони Тритхоллу, по крайней мере, дважды.

[Смех]

Сара:

Да, она тоже замечательная, и Амелия Беллами-Ройдс . Она, наверное, самый умный человек, которого я знаю. Она делала технические изменения для моей книги, и было сотня вещей, написанных ею, которые были не совсем точными, и в течение дня я говорил: «Что я здесь не так понял? Я не понимаю Не может быть, чтобы Амелия ошибалась », потому что она буквально никогда не ошибается. Она просто супер на этом все время, и может очень хорошо копать и отлаживать.

Тим:

Итак, говоря об этой книге, которую вы написали, не могли бы вы дать нам немного больше информации о том, что это такое, о процессе и всех этих вещах?

Сара:

Конечно да Это просто вышло пару недель назад. Я в полном восторге. Если вы подписаны на меня в Твиттере, извините, потому что я все время делаю ретвиты и пишу об этом, и я знаю, что на данный момент я, вероятно, раздражаю людей, но я никогда раньше не писал книги, и я Я действительно рад видеть это. Твиты людей, получающих его, меня тоже очень волнуют. Я работал над этим два года. На самом деле демонстрации в нем — это целый другой год работы, так что на самом деле это похоже на совместные усилия большого количества времени.

Я очень, очень старался охватить весь спектр технологий, целый ряд методов и решить некоторые проблемы, которые возникают у дизайнеров по поводу оптимизации и того, как вы работаете с этим материалом, чтобы уменьшить пути и сделать его более эффективным. А потом разработчики расскажут о том, как анимировать все доступные вам инструменты. Я бегу от того, как вы работаете с ним в Illustrator, до того, как здесь работать с этими инструментами, к простой реализации с просто requestAnimationFrame() Я пытался сделать это как можно более сплоченным.

Дэвид:

Звучит довольно всесторонне. Я собирался спросить вас, где вы порекомендуете людям посмотреть, чтобы начать изучать эти вещи, но я думаю, что знаю ответ на этот вопрос сейчас.

Сара:

Я имею в виду, что я пытался сделать это тем, на что я мог бы указать, когда у людей тоже есть вопросы и прочее, потому что я часто получаю этот вопрос. Мол, я хочу начать изучать это, но я не уверен, как. Книга действительно предназначена, чтобы взять вас в это путешествие.

Тим:

Я думаю, у меня есть актуальный технический вопрос, и этот вопрос, что случилось с SVG 2?

Сара [23:37] :

Ах, я могу ответить на это, на самом деле. Так же, как и многие спецификации браузера, он был предложен. Люди на самом деле не видели смысла в этом, потому что это своего рода ловушка-22. Есть много вещей, которые действительно супер… вы не будете знать, что вам это нужно, если вы действительно не супер в SVG, который по праву был похож на браузеры… людей на самом деле еще нет. Однако есть одна часть спецификации, которую мне грустно не пройти, или я надеюсь, что она будет реализована в конечном итоге, и это градиент сетки.

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

Он действительно очень маленький и очень богатый. Это та часть, о которой я плачу из-за того, что не являюсь … Я думаю, что остальная часть SVG 2, я взволнована этим, но ничто не собирается делать или разрушать мою жизнь. Часть градиента сетки — это «Ах, какой может быть сеть». Для меня, как для человека из SVG, это эквивалентно тому, кто работает в CSS Grid. Это похоже на тотальное изменение игры. Есть такая загвоздка-22 вроде «Ну, никто не использует ее», но нет реализации, поэтому никто не может ее использовать. Эта часть немного сложна для меня.

Дэвид:

Я думаю, что это правда о каждом веб-стандарте. Вы не можете знать, собирается ли кто-нибудь использовать это, пока это не там и это доступно.

Сара:

Точно, точно. Это даже не то, что доступно под флагом или доступно в каком-либо браузере. Это нигде не доступно.

Дэвид:

Как люди могут найти вас, узнать больше о том, чему вы учили, и найти вашу книгу?

Сара:

Я в твиттере. Я @Sarah_Edo , EDO, в Твиттере. Сара с буквой H. Я чирикаю там так же, как чирикаю свои статьи, свои выступления или любые ресурсы, над которыми я работаю, или ресурсы других людей, которые я считаю крутыми. Моя книга доступна на Amazon или O’Reilly. Либо один работает. Он называется SVG Animation , поэтому его довольно легко найти. Я также пишу для CSS-хитрости. Я вышел с постом сегодня. Я выхожу с одним или двумя в месяц. Несколько месяцев я схожу с ума и пишу пять, и я писал о Vue , на которой сейчас надета футболка, которая является фреймворком JavaScript, в который я влюблен.

Дэвид:

Представлять.

Сара:

Да, я люблю это Мне также нравится React. Люди склонны думать, что это что-то или иное, но это не так. Да, и CodePen, конечно. Я выполняю тонны и тонны работы с открытым исходным кодом над CodePen и создаю тонны демонстраций, чтобы вы могли исследовать код и попытаться собрать там много ресурсов.

Дэвид:

Так много разных мест, что вы сами о них забыли.

Сара:

Обычно это первый, который я упоминаю. Я не могу поверить, что я забыл это.

Дэвид:

Это впечатляющее портфолио, и я знаю, что люди будут там искать все ваши вещи. Большое спасибо за то, что присоединились к нам сегодня на шоу.

Сара:

Да. Спасибо, что приняли меня.

[Музыкальная интерлюдия]

Дэвид:

Теперь я рад сообщить вам о новом спонсоре шоу HelloSign с его API-интерфейсом eSignature, ориентированным на разработчиков.

Давно прошли те дни, когда вам приходилось отправлять по почте или по факсу контракт или соглашение клиенту, партнеру или новому сотруднику, ждать дни или недели, чтобы подтвердить, что все были на одной странице.

Благодаря платформам, таким как HelloSign, вы можете получить документы по электронной почте, подписать и проекты в кратчайшие сроки.

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

Интеграция быстрая, документация чистая, и вы можете встроить документы в свой сайт или приложение с помощью всего лишь нескольких строк кода. Теперь вы можете воспользоваться преимуществами реализации HelloSign eSignature, занявшей первое место в G2Crowd, с лучшей поддержкой API, которая вам когда-либо понадобится.

Перейдите на hellosign.com/api , зарегистрируйтесь, получите подпись и начните работу.

Давид [28:20] :

Вау. Она потрясающая. Она делает так много, что сама не может отследить все это.

Тим:

Да. Было невероятно слышать ее историю. Во-первых, я не знал, что существует такая вещь, как … каков был термин? Научный иллюстратор. Я правильно понял?

Дэвид:

Я действительно не слышал об этом, пока не прочитал ее биографию, но как только она описала это, это имело смысл.

Тим:

В этом есть необходимость, верно, в какой-то момент? Потому что, когда вы думаете о старых энциклопедиях и тому подобных вещах, вы можете представить себе такие рисунки.

Дэвид:

Она тоже учила меня на SVG.

Тим:

Прежде всего, я должен сделать большое признание на моей стороне. Я на самом деле не так много анимации с SVG. На самом деле, это не то, что я избегаю этого… Ну, может быть, потому, что я никогда не делал анимацию SVG, как для развлечения, потому что она звучит так тяжело. Я имею в виду, действительно, когда вы сначала смотрите на SVG, это похоже на то, что вы ударили по лицу математикой. Там просто цифры везде. Есть некоторые люди, которые могут буквально писать SVG вручную, что … даже не заводит меня на это.

Но это такая пугающая вещь, когда смотришь на это. Это просто набор десятичных знаков и есть пути и тому подобное, но это много утомительных вещей. Есть странные свойства, которые используются в SVG и тому подобное. Но кажется, что Сара действительно смогла сделать это настолько легко усваиваемой и, смею сказать, забавной вещью.

Дэвид:

Если она может сделать это забавным … Я уверен, что она может, и я пойду за ее книгой, и я собираюсь попробовать, потому что, когда я смотрю на SVG, вещь, которая пугает меня и мешает мне двигаться вперед с этим все… В основном это возвращает меня к ранним временам XML, когда у вас есть вся эта сложная структура, и она отличается. Он отделен от структуры, имеющейся в вашем HTML-документе, и существуют отдельные свойства CSS, которые применяются к типам элементов, которые живут внутри SVG, и которые выглядят так же, как и свойства в CSS. Элементы DOM, но они делают то же самое с элементом SVG, поэтому это другое свойство. Я люблю CSS, поскольку он относится к HTML. Я увлечен этим. Мне это нравится. Но потом я думаю: «Боже мой. Я должен выучить еще один?

Тим:

Время от времени я буду дурачиться в инструментах разработчика. В части CSS вы нажимаете одну клавишу, и она автоматически заполняется для вас. Время от времени я случайно нажимаю Q или что-то в этом роде и получаю свойство CSS и спрашиваю: «Для чего это нужно?» Конечно, это нечто вроде, применимое только к SVG.

Дэвид:

Иногда я волнуюсь, когда вижу эти вещи, и думаю, что, может быть, я смогу сделать что-то с CSS для элемента HTML, чего я не знал, что смогу. Нет, оказывается, это было только на SVG.

Тим:

На самом деле Сара Соуэйдан много говорит об этом — во многих случаях SVG лучше, чем хаки CSS, которые мы обычно используем. Например, треугольник как украшение. SVG справляется с этим намного лучше и намного проще, чем псевдоатрибут CSS. Но мы не часто достигаем этого в первую очередь, потому что… и, возможно, это только часть того, что вы были в отрасли достаточно рано, чтобы знать, что такое XML. Я имею в виду, что он действительно ассоциируется, по крайней мере, в моей голове с XML, и когда я думаю о двух вещах, я думаю, ну, я действительно не хочу касаться этого, потому что это просто сложно, странно и чуждо.

Дэвид [32:07] :

Дело не только в том, что это сложно, странно и чуждо, но некоторые из нас были в отрасли достаточно долго, чтобы поддержка SVG в браузерах была очень сомнительной.

Тим:

Да, это очень верно. Это одна из причин, почему я спросил Сару о SVG 2, потому что… Единственная причина, по которой я на самом деле знаю об этом, это то, что я хотел лучше изучить SVG, может быть, год или два назад, и я начал писать мини-библиотеку, которая поможет Вы делаете некоторые вещи SVG проще с JavaScript. Я начал делать определенные функции, и вы добавляете этот метод, и вы получаете это свойство из SVG.

Я начал изучать, что еще можно сделать с SVG для этой библиотеки. Так что я поднял MDN и, конечно же, увидел целую кучу вещей, которые не имели поддержки и были просто … это просто в спецификации. Это может быть позже. Существует целый ряд очень интересных, но сложных и непонятных вещей, которые SVG 2 сможет сделать. Я имею в виду, что я точно не помню ничего о градиентах сетки. Я смотрел на это в течение нескольких минут, и я был, как нет. Ни за что. Я не собираюсь делать что-либо из этого.

Тем не менее, проблема поддержки браузера вызывает разочарование, потому что есть свойства, где … Конечно, никто не интересуется его вещью, потому что мы не знаем, что это возможно. Никто даже не пытался использовать это раньше. Если производители браузеров реализуют его, это изменит то, как мы работаем с Интернетом. Как вы решаете эту проблему? Потому что вы просто не можете пойти и построить polyfill для градиентов сетки.

Дэвид:

В течение многих лет наша отрасль решает эту проблему: некоторые разработчики браузеров решают, что они будут первыми, кто это осуществит, и, если они Microsoft, возможно, они сделают это, исключая другие компании, которые также есть браузеры, и попытаться заставить людей использовать их браузер исключительно. Я не уверен, что они все еще делают это, но они делали это в прошлом. Затем этот стандарт будет реализован в одном месте. Они убеждают разработчиков начать использовать его. Люди видят, что это работает, и думают, что могут использовать это в другом месте. Это терпит неудачу в другом месте, и тогда другие разработчики браузера должны играть в догонялки. Я не уверен, что это действительно хороший подход.

Тим:

Теперь, когда вы упомянули об этом, именно это и произошло с адаптивными изображениями. На самом деле Йоаву Вейссу дали толпу, чтобы буквально написать коммит для Blink, чтобы включить адаптивные изображения в соответствии со спецификацией. Это было, может быть, несколько лет назад, но для всех нас, ботаников, это было очень волнующее время, и оно сработало. Может быть, мы сможем пригласить Йоава на шоу и убедить его сделать это снова и снова. Я уверен, что это был очень напряженный и тяжелый труд, но, возможно, мы сможем это сделать.

Дэвид:

Это немного страшно, но на самом деле это может быть единственным способом, которым вы можете сделать что-то подобное, если хотите действительно навязать это сообществу.

Тим:

Кроме того, Йоав, если ты слушаешь, я прошу прощения. Я не имею в виду, что это должен быть ты. Йоав отличный парень. Однажды он ехал домой с конференции, я думаю, со своей семьей где-то в Европе, и я написал ему в Твиттере вопрос, и я не уверен, правильно ли я это помню. Я думаю, что он остановился на обочине дороги, чтобы ответить на мой твит, о котором я чувствовал себя ужасно, но это случилось. Это тот тип человека, который требуется, чтобы просто пойти самостоятельно и добавить новую функцию в сеть для всего мира.

Дэвид:

И Тим, ты делаешь себе репутацию со всеми, как с парнем, который пишет в Твиттере на этот вопрос.

Тим:

Вот как я попал сюда сегодня. Вот так я и попал в положение, в котором я нахожусь. Я просто чирикаю нужным людям в самые случайные моменты времени.

Дэвид:

Я думаю, что мне больше нравится метод Сары. Она нашла вещи, которыми она увлекалась, она погрузилась в это, она начала создавать эти вещи, которые были забавными, и получила этот небольшой прилив допамина. Между прочим, я должен признать, что я говорил это раньше, что я получаю немного острых ощущений, когда я заставляю CSS работать так, как я хочу, чтобы он работал, но то, как она это описала, было похоже, что она моя душа и говорю: «О да. Эта захватывающая личность, которая у вас есть, имеет практическое применение, и вот она ».

Тим [36:23] :

Фактически, она сгруппировала выгорание с работой над чем-то другим, как сгорание от излечения, и я думаю, когда она упомянула это, обе наши головы наклонились в сторону, как: «Подождите. Какая? Вы были измотаны, а затем работали над тем, что вы делаете на работе, что-то помогло вам в этом? »Но теперь, когда я думаю об этом больше, я сделал то же самое. На самом деле, иногда, когда я прихожу домой с работы или даже по выходным, иногда мы с женой выезжаем на Лонг-Айленд по выходным, и я беру с собой ноутбук, а в свободное время я прячусь на GitHub. Я строил глупую игру с линкорами. Это полностью клиентская часть, сервисный работник и все такое, но так весело решать эти задачи. Я никогда не делал игры раньше. Возможно, все неправильно, но код выглядит очень красиво. Это освежает по какой-то причине.

Дэвид:

Я могу понять, что. У меня был точно такой же опыт. Я сам работаю над небольшой анимацией, а не над тем, что могу опубликовать, а над тем, что нуждается в живом генеративном компоненте, а также в визуально привлекательном и привлекательном. Что-то, что привлекает вас. Вы обнаружите, что работа над чем-то вроде этого — в отличие от работы над проектом, который вы выполняете для чьего-то контракта, который вы должны завершить в определенный срок в соответствии с чьими-то спецификациями, — это совсем другой опыт , Он массажирует различные узлы в вашем мозгу.

Тим:

Я думаю, что можно много говорить о том, чтобы снова быть взволнованным, как лекарство от выгорания.

Дэвид:

Сара является хорошим воплощением этого. Вы можете видеть энтузиазм, который она привносит в свою работу вплоть до плача по градиентам сетки.

Тим:

Да. Я, наверное, плакал о многих вещах в сети, но градиенты сетки не были одним из них.

Дэвид:

Теперь, когда я знаю о них, может быть, я буду знать, потому что это звучит так, как будто это довольно крутая концепция.

Тим:

Особенно учитывая, как мало вы можете получить с этими градиентами сетки. Я не видел эту концепцию вытянутой, но то, как ее описала Сара, звучит так, словно может начать конкурировать с реальными не векторными изображениями.

Дэвид:

Я видел градиенты сетки. Я сам использовал их в Adobe Illustrator, и я знаю, насколько мощными они могут быть в плане моделирования реальных текстур. Идея, что вы можете сделать это динамически в очень маленьком файле, используя SVG 2 — поговорить с вами, ребята, которые контролируют стандарты … [прочищает горло]

Тим:

Те из вас, кто слушает нас, бродят.

Дэвид:

[Смех]

Они там, поверь мне. Это звучит очень убедительно, и я могу понять, почему это было бы важно.

Тим:

Письмо. Чувак, каждый раз, когда я слышу, как кто-то говорит о том, как много они пишут, я чувствую себя немного осужденным, потому что я знаю, что должен быть, и я на самом деле … Я сказал, что хочу этого, Дэвид, и я довел это до конца. Я запустил свой блог , но пока у него есть только один пост, и этот пост говорит, что я запустил блог.

Дэвид:

Это первый шаг. Есть и другие блоги, в которых есть только один пост, но ваш блог не будет одним из них.

Тим:

Нет. Фактически, когда я закончу игру, которой я сейчас тороплюсь, это будет мой второй пост, подробно рассказывающий о том, как я создал эту штуку. Надеюсь, это будет хорошо выглядеть. Тогда, надеюсь, я получу третий пост, объясняющий мою первую попытку анимировать SVG.

Дэвид:

Я бы порекомендовал сделать несколько небольших постов, рассказывающих о разочарованиях, с которыми вы столкнулись в процессе создания своей игры, потому что я думаю, что сейчас у нас есть пара людей, которые могут быть заинтересованы в поиске о том, как вы создали игру на линкорах, и на что они наткнутся, пытаясь это сделать.

Тим:

Да, безусловно. Это очень, очень хороший момент. Возможно я доберусь до работы.

Дэвид:

Ладно все. Иди туда и следи за блогом Тима, потому что ты многому научишься.

Тим:

Или нет. Просто забудь об этом.

Дэвид:

Вы хотите, чтобы я отредактировал это вне шоу?

Тим:

Нет. Вы должны оставить это ради подлинности.

Дэвид:

Хорошо, достаточно справедливо.

Тим:

Ну, спасибо всем за внимание, все. Мы всегда говорим о технологиях со всеми вами.

Дэвид:

Мы также хотели бы поблагодарить SitePoint.com и наших продюсеров, Адама Робертса и Офели Лехат, за помощь в производстве от Ральфа Мейсона. Пожалуйста, не стесняйтесь, присылайте нам свои комментарии в Twitter — @versioningshow — и дайте нам оценку на iTunes, чтобы сообщить нам, как мы делаем.

Тим:

Увидимся в следующий раз и надеемся, что вам понравилась эта версия.

41
Share: