Макеты CSS: сетки, регионы и @Supports, с Джен Симмонс

В этом эпизоде ​​Showing Version к Тиму и Дэвиду присоединяются Джен Симмонс, дизайнерский адвокат в Mozilla, отмеченный наградами подкастер и постоянный ведущий конференции. Они обсуждают будущее макетов CSS с сетками, регионами и @supports, будучи бунтарями с причиной на рабочем месте, и изобретая французские жареные чизбургеры с Гудини.

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

• Джен в Твиттере: @jensimmons
• JenSimmons.com
• Подкаст Джен Сеть Впереди
• Лаборатория экспериментальных макетов Джен: labs.jensimmons.com
• CSS Регионы
• Рабочая группа CSS
• Регионы CSS считаются вредными
• Safari Technology Preview
• Houdini
• Чистая премия за подкаст года
• CodePen Radio
• Дополнительные ссылки в Твиттере: @mdavidgreen | @tevko | @versioningshow | @sitepointdotcom

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

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

Я сказал: «О, я думал, что у меня будут проблемы!» Но вместо этого я получу повышение по службе…

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

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

Я думаю, в какой-то момент, если вы действительно находитесь в таком месте, где вы несчастны, и окружающие вас люди делают дерьмовую работу, и что бы вы ни делали, вы не сможете лучше работать, может быть, вы хотите выйти, верно?

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

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

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

расшифровка

Тим:

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

Дэвид:

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

Тим:

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

Дэвид:

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

Тим:

С нами сегодня у нас есть Джен Симмонс, и мы собираемся поговорить о ее шоу, The Web Ahead , CSS и обо всем, что еще мы можем подумать. Итак, мы собираемся пойти дальше и начать эту версию.

Джен, спасибо, что присоединились к нам. Как у тебя сегодня дела?

Джен:

Хорошо.

Дэвид:

Отлично, мы очень рады, что вы здесь. И прежде чем мы начнем, одна из вещей, которые нам нравится делать со всеми нашими гостями, это задавать философский вопрос. Поскольку это версия Versioning Show, в вашей нынешней карьере, какой версией вы себя считаете и почему?

Джен:

Я не знаю, версия 15, 17? Я не знаю, что-то довольно высокое.

Дэвид:

Это поразительно! Как ты получил это высоко?

Джен:

Я запускал новую версию довольно много раз.

Тим:

Не могли бы вы дать нам представление о некоторых вещах, в которые вы вовлечены?

Джен:

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

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

Дэвид:

Ну, очевидный вопрос: как вы думаете, куда мы пойдем в будущем?

Джен:

В самом начале мы не делали никакой разметки на веб-страницах; там действительно не было никаких инструментов, чтобы сделать это.

А потом мы начали использовать таблицы для разметки. Может быть, некоторые из ваших слушателей помнят времена, когда мы использовали HTML-таблицы, чтобы размещать объекты на странице и размещать их там, где нам нужно, на странице. Но есть веские причины никогда этого не делать. На самом деле нам нужно отделить стили от реального контента или от содержимого самой страницы: оно должно быть в HTML, а стили должны быть в CSS.

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

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

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

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

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

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

Дэвид [4:08] :

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

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

Джен:

Да, сеть развивалась в течение последних 25 лет. Это не то, что было раньше. В некотором смысле, это чудо, особенно в HTML и CSS.

Из-за природы языков — потому что они являются декларативными языками программирования — есть способ, которым мы можем продолжать добавлять новый синтаксис, новые свойства к этим языкам и работать со старыми веб-сайтами. Вы не видите этого много в разработке программного обеспечения. Если вы хотите загрузить приложение для iPhone с 2009 года, оно не будет работать на вашем текущем iPhone 2016. Или наоборот: вы не можете взять свое приложение iPhone 2016 и запустить его на iPhone 2009 — или не забыть запустить это приложение на устройстве Android или другом телефоне. Есть способ, которым каждая часть программного обеспечения в этом контексте написана специально для определенного устройства, с определенным номером версии, в определенное время. И потом, если вы попытаетесь поместить его в другое место, это просто не сработает.

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

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

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

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

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

Ничего страшного, это не сломает сайт: люди все еще могут забронировать авиабилет, они могут прочитать новостную статью, они могут отправить сообщение другу — они могут сделать это с помощью квадратного угла вместо закругленного угол, верно?

Итак, с помощью Grid — с полным макетом страницы — вы можете подумать: «Ну, что мы будем делать для всего макета страницы?» И я думаю, что мы пройдем через период, когда мы будем в состоянии написать довольно простой код для браузеров, которые не понимают Grid — возможно, сделать макет одного столбца, сделать что-то вроде не сложного — и затем поместить в Grid-код для браузеров, которые понимают, и взять этот код вместе с любым другим кодом это должно быть связано с этим — может быть, вы используете разные поля или разные виды топографии — и оберните все это в запрос функции.

Этот синтаксис @supports Если это так, запустите весь этот код; если нет, пропустите весь этот код ».

Давид [8:16] :

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

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

Джен:

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

Все используют разные компьютеры, чтобы зайти на ваш сайт. Некоторые люди даже не смотрят на сайт; некоторые люди только собираются услышать сайт. Некоторые люди будут читать его визуально, но они не получат никакой стилизации, потому что они нажали кнопку и отправили ее в Instapaper или Pocket, или «Читать позже», или переключили браузер в режим чтения.

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

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

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

Возможно, вы находитесь в другом цветовом пространстве, особенно если вы забыли добавить RGB в цветовое пространство CMYK или что-то в этом роде. Ни для кого, для 0% вашей аудитории, действительно легко получить такой же опыт, как и у вас, когда вы смотрите на документ Photoshop.

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

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

Тим:

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

Джен:

Да.

Тим:

Затем добавьте все те изменения на лету, которые мы, разработчики, так любим. [Смеется]

Джен:

Да, я думаю, что как внешние разработчики иногда — особенно в те дни, когда весь дизайн приходит в виде PDF в электронном письме —

Тим:

Бог!

Джен:

— и вы должны перепроектировать с этими картинами, что это должно быть; Вы должны выяснить, каким должен быть веб-сайт, основываясь на этих фотографиях.

И вы начинаете реверс-инжиниринг, и да, вы говорите: «Подождите, вы использовали текст lorem ipsum, и в каждом из этих примеров у вас точно такое же количество символов. Что происходит, когда оно длиннее, что происходит, когда оно короче, что происходит, когда фотография не соответствует соотношению сторон? Мы разрабатываем систему, которая учитывает эти вещи, или мы разрабатываем систему, которая заставляет людей всегда делать свои фотографии именно с таким соотношением сторон? »

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

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

Тим [12:50] :

Да, очень верно. Итак, говоря о дизайне, не могли бы вы немного рассказать о том, как вы начинали в этой сфере карьеры, а также о том, что значит быть сторонником дизайна для Mozilla?

Джен:

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

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

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

Проделал некоторую работу для Google, я разработал дизайн интерфейса для CERN, новые веб-сайты CERN. Я не знаю, куча клиентов, слишком много, чтобы помнить в данный момент. А потом, да, в прошлом году я получил эту работу в Mozilla в команде разработчиков. Поэтому некоторые из моих коллег называют себя «защитниками разработчиков»; «Евангелисты-разработчики» иногда называют должность.

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

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

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

Дэвид:

Я согласен на 100%. И особенно в наши дни термин «дизайнер» так сильно расширяется. Раньше это означало, что вы думаете, просто визуальный дизайн или графический дизайнер. И теперь «дизайнер» часто вовлекается во все аспекты — от тестирования пользовательского опыта, до запуска и до конца, чтобы убедиться, что продукт действительно соответствует потребностям бизнеса.

Джен:

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

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

Дизайнеры действительно думают об аудитории этого сайта; а что им нужно? Чего они хотят? Как мы собираемся донести это до них? И отчасти это то, как мы можем донести историю, которую хотим донести, используя визуальную графику — через художественное руководство, через шрифты и цвета и тому подобное?

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

Они получают представление о том, где они основаны на этом стиле. Но это всего лишь один маленький кусочек дизайна — макет страницы, контент, выбор того, каким будет контент. И интерфейсы: где кнопки? Кто они такие? Сколько у нас кнопок? Как работает навигация? У нас есть навигация? Где это? Все эти решения влияют на дизайн.

Тим [16:51] :

Итак, вы упомянули множество решений проблем, таких как переброска PDF через забор или получение пяти шрифтов в файле PSD или Sketch.

Какой совет вы бы дали разработчикам или дизайнерам, которые оказались в атмосфере или в компаниях, где эти проблемы, как правило, сохраняются?

Джен:

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

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

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

Но то, что я мог сделать, это встать со своего стола и пройти к людям, которые собирались добавлять контент на сайт — потому что они были фактически на том же этаже, они были в том же здании, на том же этаже, что и мы были. И я бы спросил их: «Как вы хотите, чтобы это было названо?»

И я знал, что влиял только на свою работу, и не влиял на всю команду, но я хотел бы спросить их, и я бы просто сказал: «Ну, это для вас всех».

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

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

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

Я сказал: «О, я думал, что у меня будут проблемы!» Но вместо этого я получил бы повышение, если бы находился в ситуации, когда я мог бы получить повышение, чего не было, но я не знать.

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

Дэвид:

Я думаю, что это отличный совет.

Джен:

Я думаю, в какой-то момент, если вы действительно находитесь в таком месте, где вы несчастны, и окружающие вас люди делают дерьмовую работу, и что бы вы ни делали, вы не сможете лучше работать, может быть, вы хотите выйти, верно?

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

Дэвид [19:54] :

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

Джен:

Я чувствую себя очень счастливым прямо сейчас. Я могу сидеть сложа руки и составлять примеры. Я просто делал это вчера вечером: если вы зайдете на labs.jensimmons.com , у меня действительно будет целая куча набросков — и под набросками я имею в виду не в Photoshop или в программе Sketch, а в коде идей для макеты. Некоторые из них — отработанные простые примеры: «Вот как работают формы CSS; Послушай, ты можешь взять свой текст и обвести его вокруг круглого объекта по кругу, а не по квадрату. Слушай, вау, не удивительно, что ты можешь сделать это в Интернете.

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

Прошлой ночью я работал над некоторыми идеями, которые у меня были в течение последних двух лет, но у меня не было возможности кодировать их до прошлой недели. Если вы открываете журнал (или газету), статьи располагаются в столбцах . А в Интернете у нас действительно только один столбец, и мы переехали в этот мир, где мы делаем макеты — вы видите много работы, которая просматривает статью на medium.com, где есть столбец текста, который начинается в верхней части страницы (потому что мы говорим по-английски, слева направо), по центру (это не обязательно должно быть по центру; может быть немного не по центру), но в основном вам не нужен текст идти очень широко. Таким образом, ограниченная хорошая длина строки облегчает чтение. И у вас могут быть большие картинки или большая графика: New York Times много сделала, Atlantic тоже отлично работает в Интернете. Некоторые красивые макеты, где другие вещи помимо текста выложены интересными способами, и помогают немного разбить текст. Простые цитаты, которые наполовину торчат в текстовом столбце, и некоторые возможности. Но мы все еще застряли в столбце текста.

Так что я в этом стремлении выяснить, что нужно, чтобы дать нам реальные инструменты, чтобы мы могли создавать несколько столбцов. И вы можете видеть там (это трудно описать на аудиоподкасте), но вы можете увидеть в этом исследовании некоторые другие возможности. Многостолбцовый макет является отличным способом размещения текста, если у вас есть небольшие объемы текста. Вы можете быстро разложить его по столбцам, и он будет работать прекрасно — он будет перевариваться при необходимости.

Но для длинной статьи, я не знаю, действительно ли это сработает? Я не уверен. Поэтому я думаю, что нам нужна технология, которая была предложена, под названием « Регионы ». Все производители браузеров еще не согласились. Рабочая группа CSS еще не согласилась, что это хорошая идея. Есть люди, которые думают, что это действительно плохой способ сделать такой инструмент. И я в порядке: нам может понадобиться другой код, я не знаю, нам нужен лучший инструмент. Но я думаю, что в результате нам нужно что-то, что могло бы дать нам тот результат, который я смог кодировать вчера.

И причина, по которой я это написал, заключается в том, что некоторые из этих идей о новых технологиях CSS есть в некоторых браузерах. Так что примеры, которые я сделал, работают только в Safari Technology Preview , потому что люди, стоящие за Safari, помещают Регионы в Safari, а также имеют Grid, которого нет в некоторых других браузерах. Вам нужна эта комбинация. Они не единственный браузер с регионами, но они единственный браузер с сеткой и регионами.

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

Тим [24:02] :

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

Последний вопрос от меня. Есть ли у вас какие-либо мысли по поводу проекта Houdini, поскольку он касается макета CSS?

Джен:

Гудини! Я все еще узнаю много нового о Гудини и о том, что я думаю о Гудини. Я немного обеспокоен — не из-за Гудини, потому что Гудини — просто технология.

Я думаю, что классная вещь — когда Houdini появится в браузерах — будет такой, я думаю, мы должны объяснить это людям, которые не знают. По сути, это был бы способ для группы или действительно умных инженеров сказать: «Эй, я хотел бы, чтобы и то, и другое были в: я хочу гамбургер» (я не знаю, это плохое слово, потому что мы уже сделали это)… » Французская картошка фри! Я хочу французский жареный чизбургер. Я собираюсь изобрести французский жареный чизбургер, я хочу, чтобы каждый браузер поддерживал французский жареный чизбургер, потому что я могу делать эту классную вещь в CSS, а никто этого не делает. Поэтому вместо того, чтобы просто говорить об этом или писать спецификацию или идти в рабочую группу и надеяться, что они напишут спецификацию, я собираюсь реализовать ее с использованием JavaScript и этого API Houdini ».

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

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

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

Дэвид:

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

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

Джен:

Да, так что иди на JenSimmons.com . Это штаб-квартира всего, над чем я работаю.

Также у меня есть подкаст под названием The Web Ahead , который, если бы люди его не слушали, я бы хотел, чтобы вы его проверили. Существует более 100 эпизодов по различным технологиям, в которых мы говорим: «Что это за технология? Как это можно использовать? Для чего это? Для чего это не хорошо? »Иногда мы больше говорим о философских проблемах сети, о том, что означает новая технология, а также об истории сети.

Так что это на thewebahead.net , и, как я сказал, labs.jensimmons.com — это место, где я ставлю все свои эксперименты в эти дни. Следуйте за мной в Твиттере, @jensimmons . Я в Твиттере довольно много.

Дэвид:

Очень круто. Что ж, большое спасибо за то, что присоединились к нам на Showing Version. Мы также обязательно добавим ссылки на них в примечаниях к шоу.

Джен:

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

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

Тим:

Так что это довольно забавно — одна из вещей, о которой мы забыли спросить Джен, заключалась в том, что она выиграла Net Award за Подкаст года в прошлом году. И это шло вразрез с некоторыми довольно большими подкастами, такими как CodePen Radio и некоторыми другими, которые действительно хороши.

Дэвид:

Я знаю — она ​​даже не упоминала об этом, она так скромна в этом.

Тим:

Определенно да. А ее подкасты — это просто богатство, полное интересной и просто забавной информации. Поэтому я определенно призываю любого из наших слушателей, которые заинтересованы в макете CSS и — я не знаю — разработке веб-сайтов для CERN [смеется], посмотреть некоторые из этих эпизодов.

Дэвид [28:00] :

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

Тим:

Да, я спросил о Гудини, и она подняла очень хороший момент — где Гудини позволяет вам в значительной степени создать, как браузер будет отображать CSS. Таким образом, вы можете «взломать» движок рендеринга CSS. И это может быть немного страшной вещью, потому что что мешает вам на самом деле писать CSS и, вы знаете, просто держать стандарты и вещи обновленными и спецификациями? Я хочу напомнить всем нам, что это должно использоваться очень ответственно. Не пропускайте хорошие стандарты CSS в целом, потому что при этом вы как бы создаете черную коробку для любой разработки и просто продолжаете правильно использовать стандарты CSS таким образом. Если вы пишете свой собственный движок рендеринга, вы не дадите браузерам оснований продолжать поддерживать и улучшать CSS в глобальном пространстве.

Дэвид:

Считаете ли вы, что Гудини действительно будет актуален — как вы думаете, действительно ли это то, что взлетает, или вы думаете, что это своего рода аромат месяца с точки зрения философии, но не обязательно то, что люди будете думать через год?

Тим:

Это отличный вопрос. Я думаю, что это волнует некоторых более интеллектуальных и философских разработчиков — некоторых из людей, которые фактически потратили время на чтение и работу над спецификацией. И я думаю, что это волнует их, потому что они могут думать об этом с точки зрения, о, IE, или, хорошо, я не должен больше говорить IE — Safari делает это ужасно с помощью CSS в их браузере Chrome для iOS. Итак, давайте перепишем, как спецификация работает в этом конкретном параметре для этого свойства. Затем я вижу некоторых крупных игроков в игре, таких как Facebook, которые говорят: «Мы хотим, чтобы CSS вел себя так. Так что давайте — потому что мы можем — написать наш собственный движок рендеринга CSS на JavaScript, чтобы поддержать более похожий на React / Redux подход ». И вот тут я вижу, что вещи начинают рушиться.

Дэвид:

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

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

Тим:

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

Намного сложнее копаться, намного сложнее увидеть, что происходит. И скажем, например, вам удается написать что-то с помощью API Houdini, что удивительно и прекрасно, и делает именно то, что вам и тысячи других людей. Давайте внесем это в спецификацию, давайте сделаем это реальным.

Давайте не будем делать это библиотекой, которую я затем добавлю на свой сайт, увеличивая накладные расходы, замедляя производительность, и все такое. Я предпочел бы видеть, что это поставляется с браузерами как нативная функция, а не теперь все должны: «О, вы хотите это? Ну, просто сделай это сам сейчас, потому что у тебя есть инструменты.

Дэвид:

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

Тим:

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

Дэвид:

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

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

Тим:

Звучит отлично. Вы не можете проиграть с этой стратегией.

Дэвид:

Точно!

Я был очень впечатлен присутствием Джен здесь, а также тем, что Mozilla действительно ставит перед собой задачу поддержки дизайнеров, о чем я часто слышу и, конечно, недостаточно.

Тим:

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

Дэвид:

Это интересно, потому что я был большим пользователем Firefox, а теперь я в основном пользователь Chrome. И мне на самом деле было бы любопытно, что делают наши слушатели, как складываются отношения между Mozilla и Firefox, и как это работает для них.

Тим:

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

Дэвид:

Не беги к нам на улицу. Я склонен бить, когда я поражен. Но пишите нам в Твиттере @VersioningShow .

Тим:

Чирикать лучше.

[Смех]

Дэвид:

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

---

Тим:

Всем большое спасибо за внимание. Нам всегда нравится говорить со всеми вами о технологиях.

Дэвид:

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

Дайте нам знать, как у нас дела.

Тим:

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