CSS для внешнего интерфейса немного похож на Xiamen в мире ИТ: знакомый, но немного нишевый. Так сможет ли 4-я конференция CSS, состоявшаяся в Сямэне, объединиться и столкнуться, чтобы создать новые искры? Подпишитесь на этого фотографа, работающего неполный рабочий день, чтобы посмотреть~
В субботу утром в кинотеатре с гигантским экраном официально стартовала эта конференция CSS. В условиях текущей тенденции появления все большего количества деревьев навыков во фронтенде, фронтенд, который может только писать код, может не быть отличным фронтендом. Например, у нашей отличной фронтенд-барыши есть свои навыки пения перед открытием 👏
Перед открытием наблюдал за заведением, там действительно много девушек😏
В заголовок. Мы открыли первый обмен «Отзывчивыми компонентами» от сингапурских студентов.
Содержание этого выступления вращается вокруг того, как создавать и писать расширяемый CSS. Честно говоря, наверное, это не новая тема. Однако, поскольку это было первое выступление в аудитории, присутствующие студенты слушали очень внимательно и даже записывали:
Что касается конкретного контента, то больше всего меня впечатлило то, что макет демо-версии довольно тонкий... Стиль контента, вероятно, примерно такой:
Если вы уже знакомы с набором цепочек инструментов CSS в текущей экосистеме внешнего интерфейса, вы можете почувствовать, что этот набор вещей уже обсуждался полностью или даже не нужен: определение компонуемых малых и больших кнопок сегодня Имя класса , я думаю, это должны быть базовые навыки первокурсников, верно? Кроме того, возможно, ограниченное названием конференции «CSS», обсуждение лектором компонентов, кажется, сосредоточено только на уровне CSS, что действительно актуально, но, к сожалению, будет своего рода сожаление, что в таблице блюд не хватает некоторых мясные блюда. Может быть, из-за нехватки времени, этот обмен пропускает сессию вопросов и ответов, и мы сразу переходим к теме, поднятой следующим гостем, Пифагором.
Тема, поднятая г-ном Пифагорейцем, называется «Предварительное исследование CSS Houdini», которая представляет собой набор базовых API-интерфейсов CSS, которые скоро появятся. Если первый обмен похож на безболезненную прелюдию, то масштаб информации в этом обмене гораздо больше, не будет преувеличением сказать, что он освежил мое личное понимание слова рендер. Вот простой второй проход (ан) трансляции (ли) в сочетании с личным пониманием, пожалуйста, поправьте меня, если я неправильно понимаю.
Традиционно JS и DOM настолько тесно связаны, что мы можем подумать, что пока у нас есть контроль над DOM в сочетании с независимым CSS, выразительность достаточно сильна.
Когда вы видите JavaScript, вы сразу же думаете о браузерах, вы сразу же думаете о DOM, вы сразу же думаете о манипулировании DOM, вы сразу думаете о побочных эффектах и сразу же думаете о грязи.
Воображение фронтенд-программистов может сделать такой скачок только на этом уровне.
—— Лу Синь
Но контроль DOM над рендерингом — это еще не все. За исключением Canvas, студенты, работающие с фронтендом, почти не имеют возможности контролировать отображаемый контент на уровне пикселей в JS: например,Вы можете получить доступ к любой странице с JS(x, y)Координатный цвет пикселя?Я считаю, что каждый студент, который хочет автоматически тестировать результаты рендеринга пользовательского интерфейса или выполнять требования к снимкам экрана, поймет эту боль.
Чтобы добиться более тонкого контроля над процессом рендеринга в JS, в дополнение кgetComputedStyleа такжеel.style.width = xxxКакой более прямой механизм существует, кроме такого рода операций через DOM?
Только в прошлом году основные браузеры обычно предоставлялиCSS-переменные, что позволяет вам объявить в CSS что-то вроде--fooа также--barизпользовательские свойства, а затем черезvar()Функция оценивает переменную. Вы можете думать об этом механизме как о родной упрощенной версии переменных Less/Sass, но он недоступен через DOM API выше. И, благодаря гибкости правил CSS, парсинг его значения в реальном времени во время анимации невозможен.очень сложноиз.
Появление Paint API и Animation Worklet в CSS Houdini значительно расширило внешний контроль над анимацией CSS: если ваши переменные CSS используются для свойств, которые поддерживают изображения, такие как фон, вы можетеИспользуйте Canvas в качестве значения этого свойства CSS в JS, и соответствующий процесс перехода автоматически обновляется браузером.!
Эффект кнопки волны воды в стиле Material Design, основанный на этом API, был продемонстрирован на месте, а код реализации в сочетании с Canvas и CSS очень прост. Код выглядит следующим образом:
CSS Houdini на самом деле представляет собой набор богатого API, помимо упомянутых выше Paint и Web Animation, есть еще возможности. Например, если вы хотите реализовать "Заголовок сначала адаптивно увеличивается, затем прилипает к верху и, наконец, исчезает при прокрутке.», традиционно требует использования JS для достижения очень точного управления и подвержен проблемам с производительностью. И CSS Houdini предоставляет некоторые новые концепции, объединенные возможности позволяют нам легко решить эту проблему:
Анимация - это зрелая система анимации, временная шкала может указывать, «что делать в секундах», а эффекты ключевого кадра могут указывать, «какие специальные эффекты добавляются в какие кадры». Соединив их, мы получимнепосредственно связанный с прокруткойAPI анимации тоже. Эти функции реализованы не полностью, почему они здесь специально упомянуты?
На самом деле лично я в ближайшее время подкину веб видеоредактор, как быть с "Будет меняться со временем и будет интерактивным в любое времяUI становится серьезной проблемой. Что делает меня самым интересным и стыдным, так это то, что API, который я реализовал, очень близок к набору временной шкалы + ключевой кадр, который я только что обнаружил сегодня, и цель состоит в том, чтобы, наконец, иметь возможность передавать форму, напримерplay(0.5)илиstop(0.2)способ поддержатьНачинайте и останавливайте взаимодействие с любым прогрессом на временной шкале.. Хотя это подтверждает, что текущее направление реализации в основном надежно, мне стыдно, что я только сегодня узнал, что снова изобрел велосипед...
Наконец, взгляд в будущее, эволюция Тройки:
- HTML→ Веб-компоненты
- JS→ Веб-сборка
- CSS→CSS Houdini
Стоит отметить, что в конце есть очень интересный One More Thing, надеюсь увидеть эту сущность в следующий раз на CSS Conf👇 (он тоже появляется на картинке ниже, это тоже One More Thing)
После Pythagorean Гу Илин поделился «Дизайн CSS-интерфейса повторно используемых компонентов»,
Эта тема начинается со спецификации стилей в древние времена и пересматривает эволюцию CSS. Например, следующее предложение Netscape, которое, наконец, умерло, похоже на то, что React пережил 20 лет:
Следующее содержание в основном вращается вокруг выбора схемы стиля при разработке библиотеки компонентов. По сравнению с размахом в Vue, схема стилей React действительно представляет собой сотню цветов. Но вне зависимости от конкретных соображений выбора, этот принцип один и тот же:
Различая внутренние и внешние API, достигайтеОткрыт для расширения, закрыт для модификацииКонцепция современного уровня техники действительно является инженерно осуществимой и надежной практикой. Но для CSS, языка, у которого даже нет области видимости, непросто отличить общедоступное от частного. С этой точки зрения, CSS-in-JS — хорошее решение для того, чтобы сделать CSS более современными языковыми функциями, и в него стоит инвестировать. И (всегда спорный) BEM больше похож на венгерскую нотацию в ассемблере и ранний C, чем на эти более современные решения, эквивалентные введению, которое нужно вводить только тогда, когда вообще нет механизма определения области видимости.соглашение, в то время как нестрогим соглашениям всегда трудно следовать.
Пока он говорил, бог-мужчина представил свой собственный дизайн библиотеки компонентов Вот очень красивый метод, который заключается в ограничении количества публичных API-состояний компонентов с помощью структуры данных, показанной ниже. Здесь вставлено рекламное объявление.Если вы хотите проверить данные такой структуры данных во время выполнения и вам не нравится громоздкость схемы JSON, вы также можете знать, что я сохранил.SuperstructХа 😀
После трех официальных сессий обмена утром был короткий «молниеносный обмен», и гостем обмена был большой парень из Toutiao.
К сожалению, из-за того, что я ненадолго ушел со сцены, я не знал, о чем он говорил, когда вернулся... Я расспросил нескольких одноклассников и запутался 😅 Это лучше, чем PWA, путем модификации исходного кода. Поддержка веб-приложений просто потрясающая. Хотя там не так много впечатляющего контента, но стиль PPT сфотографирован, и каждый может испытать это на себе. (Я чувствую, что этот стиль также является заголовком, ха-ха)
На этом утренний шеринг подходит к концу, а в перерыве я сделала групповое фото мистера Хэ 😅
Первое сообщение во второй половине дня — «Лидер, я не хочу писать CSS» г-на Чжана Синьсюя. Содержание очень ясное, и оно вращается вокруг «как сделать CSS более приятным для написания»:
Содержание довольно краткое.В дополнение к волне плагинов и фрагментов редактора Amway, в нем также упоминается сверхкраткая версия синтаксиса Qcss, заново изобретенная самим автором. Он имеет сложную операцию по анализу стилей на стороне браузера через Service Worker, тем самым уменьшая размер таблицы стилей почти на 50%. Это очень интересно, но в то время я так волновался, что было два слота, которые я хотел вырвать...
- Если объем CSS страницы уменьшается на 50%, это влияет на производительность, то при высокой сложности макета страницы предполагается, что будет больше узких мест производительности в статических ресурсах и бизнес-логике, которые можно оптимизировать 🤔
- Почему я рекомендую Less вместо Sass: «Меньше грамматики может написать меньше скобок»… Я без ума от Stylus, и я даже не могу писать фигурные скобки, точки с запятой и двоеточия 😅
Пожалуйста, не обращайте внимания на мои жалобы, в конце концов, атмосфера обмена большим парнем все еще очень активна, и весь процесс на самом деле в этом счастливом стиле:
Далее г-н Да Мо поделился «Изучением режима разработки динамических эффектов». Когда дело доходит до динамических эффектов, хотя все в первую очередь думают о реализации CSS, паттерн, которым поделился г-н Дамо, явно этим не ограничивается, и он гораздо более амбициозен, чем предполагалось:
При совместном использовании большое внимание уделяется концепциям поддержки инструментов проектирования, управления материалами и разработки эффектов движения на основе данных.Конечным результатом является то, что студенты, работающие с интерфейсом, могут реализовать идеи студентов-дизайнеров без кодирования или только кодирования бизнес-логики ( вместо самих эффектов движения). Инструментальная цепочка, стоящая за этим, довольно длинная:
Прежде всего, он должен поддерживать форматы основных инструментов редактирования, таких как AE и Dragon Bone.Хотя Bodymovin от Airbnb довольно мощный в этом отношении, есть еще много мест, которые можно заполнить. И часть внешнего рендеринга намного больше, чем я думал:
Увидев там некоторые очень рады, что они не начали заполнять шейдер с самого начала, чтобы написать Renderer яму, и она еще слишком молода ах.
Затем наступил перерыв на чай, и у болельщиков рядом с мистером Дамо, похоже, было больше всего вопросов:
Я также просто воспользовался этим временем, чтобы уловить волну энтузиазма и задать большому парню несколько вопросов о поддержке области действия CSS. Так уж получилось, что этот вопрос имеет некоторые корни с веб-компонентом и Vue, и восторженное решение (а) ответ (ли) больших парней запаздывает. Ладно, я здесь только для того, чтобы сфоткать кстати(
Потерев картинку, я обнаружил, что в качестве фронтенда конференции организатор был очень политкорректен:
- Зелёный ремешок (Vue) — это лектор.
- Подвешивание синего (React) ремешка — это то, чего я жду от любителей дыни.
- Висячие красные (угловые) лямки являются заниженными штатными.
хммм...
После того, как я вернулся на место встречи, я обнаружил, что, похоже, пропустил обмен черными технологиями CSS с братом из гусиной фабрики ... Давайте добавим картинку, чтобы все почувствовали. Эффект водной ряби, нарисованный div с живым кодированием, довольно интересен 😀
Потом была младшая сестра, которая не видела женскую одежду, злилась и не слушала (на самом деле атмосфера была очень активной, и было много студентов, задающих вопросы). К сожалению, мое понимание мобильных терминалов относительно невелико, и я не могу задать какие-либо содержательные вопросы...
Последняя публикация — это черная магия CSS от руководителя нашей команды управления городским хозяйством (Happy Shopping)😏
На самом деле мой уровень CSS в основном только на уровне флекса и строительных блоков.Я никогда не слышал о многих "хитростях и уловках", выброшенных руководством города.Череда черной магии заставляет меня полностью осознавать свою посуду в команде Куриный уровень XD
В отличие от предыдущего объяснения специальных эффектов CSS, которые, как правило, основаны на идеях обмена идеями на основе демонстрации, введение городского управления больше фокусируется на проблемах, решаемых с использованием навыков CSS в реальных проектах. Ведь с фактическим одобрением кейса мы будем более «безопасно» внедрять эти навыки в проект. Сам проект редактора был реализован, вы можетекликните сюдаПочувствуй это.
Еще одно интересное место — это изображение CSS Zen Garden.
CSS Zen Garden должен больше соответствовать первоначальному замыслу веб-документов. В эту эпоху развития веб-приложений о Саде дзен, похоже, постепенно забыли... Я скучаю по красиво напечатанному «Саду дзен CSS» в университетской библиотеке, который также является одним из моих начальных просветительских чтений.
Кстати, руководство города все-таки привезло на встречу его семью.Можно сказать, что он победитель по жизни...
На этом обмен информацией о конференции CSS подошёл к концу. В качестве небольшого резюме, мое личное впечатление таково, что CSS действительно достаточно зрелый, и круг чистого CSS не настолько велик, чтобы методы, используемые многими говорящими, более или менее пересекались. Более того, первоначальным замыслом CSS должен быть DSL для набора текста, но его функции с годами настолько развились, что появились всевозможные ослепительные чёрные чары. Тем не менее, из-за ограниченности его первоначальных целей дизайна, было бы круто найти определенный хак с непопулярным атрибутом для создания магического эффекта, но вы не можете гарантировать, что в следующий раз вы найдете аналогичный магический атрибут для удовлетворения бесконечных интерактивных потребностей: это делает передний конец не хватает немного чувства безопасности.
К счастью, на этой конференции мы увидели такие усилия, как CSS Houdini, по внедрению дополнительных настроек в процесс рендеринга, выходящих за рамки традиционных декларативных стилей. В прошлом процесс поиска свойств черной магии чем-то напоминал поиск дифференциальных уравнений.специальное решение, в то время как более сильная выразительность и более полная цепочка инструментов подобны поиску универсальногоОбщее решение. Если мы сможем найти общий способ разработки для различных сложных спецэффектов, я считаю, что контент, который можно будет размещать в сети, будет еще более потрясающим🌈
Напоследок групповое фото наших маленьких друзей (Happy Shopping), есть несколько фигурок, которые появились раньше 😉
И еще кое-что: на самом деле вы, возможно, обнаружили, что техническая конференция в кругу передовых специалистов, вероятно, предназначена не только для того, чтобы слушать, как люди говорят о PPT, но и для общения (йе), общения (ху) и потока (чуй). серьезное дело:
"Я использую тебяfont-spiderрасти"
"Я смотрю на тебяблограсти"
😅