Статьи

Сетки CSS, Flexbox, столбцы, фигуры и области, с Рэйчел Эндрю

Октябрь 11, 2018

Рэйчел Эндрю на Выставке Версионирования

В этом выпуске Showing Version к Тиму и Дэвиду присоединилась Рэйчел Эндрю, со-создатель Perch CMS и ведущий эксперт по CSS Grid Layouts. Рэйчел демонстрирует свои танцевальные навыки, когда она скользит от своего окуня, пируэтов по сеткам CSS, лунных походов по осям Flexbox и колесных колес через выравнивания ящиков CSS, мультиколонки, формы и регионы.

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

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

Я делал это так долго, что я не боюсь смотреть на что-то и говорить: « Ну, если мне нужно узнать об этом, я посмотрю на это, когда мне нужно будет знать об этом, и не почувствую» что я пропускаю, или что люди будут думать, что я глуп, потому что я не знаю этого, или что-то еще, потому что слишком много всего.

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

Неважно, если вам 18, или вам 65 или что-то еще. У вас есть вещи, которые вы знаете, и которыми вы можете поделиться, и вы можете научить. Неважно, если вы только начали в отрасли.

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

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

Рэйчел Эндрю на Выставке Версионирования

расшифровка

Тим:

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

Дэвид:

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

Тим:

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

Дэвид:

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

Тим:

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

Рейчел:

Да, это здорово быть здесь. У меня все в порядке.

Дэвид:

Одна из вещей, которые нам нравится делать, прежде чем мы начнем с шоу, мы хотели бы задать всем нашим гостям философский вопрос. Твой философский вопрос дня таков, Рейчел: в твоей нынешней карьере, какая у тебя версия и почему?

Рейчел:

Ooh. Какая у меня версия? Я не знаю. Это действительно странный вопрос. Хотя, это заставило меня задуматься, и это хорошо. Я не знаю. Я чувствую, что я один из тех релизов, которые заканчиваются в точке 343, потому что я действительно делал то же самое очень долгое время, но это сильно изменилось. Тем не менее, есть все эти вещи о том, что я делаю, которые в значительной степени совпадают с тем, что я делал 15 лет назад. Да, я думаю, что я одна из тех версий, которая похожа на 2.7968, и ты думаешь, что нам стоит перейти к третьей версии. [Смеется]

Тим:

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

Дэвид:

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

Рейчел:

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

Дэвид:

Раз вы упомянули об этом, почему бы вам не рассказать нашим слушателям, что такое Perch и что вы с ним делаете?

Рейчел:

Все в порядке. Изначально Perch был небольшим CMS-продуктом, который мы запустили около семи лет назад, в качестве редактора контента. Мы уже семь лет с продуктом. Теперь у нас есть два продукта. У нас есть Perch, который, по сути, все еще является редактором контента, хотя он делает гораздо больше, чем у нас, и у нас есть Perch Runway , который является действительно полнофункциональной системой управления контентом для сайтов на основе контента — сайтов, которые действительно хотят иметь много структурированного контента, а также не хотеть, чтобы что-то смешалось с их разметкой; это оставляет все это дизайнеру и разработчику, а не CMS, решающему, что он собирается выводить материал. Так что это в основном то, что мы делаем.

Дэвид:

Безусловно, существует множество систем CMS, которые были несколько лет назад и до сих пор существуют. Что заставило вас почувствовать необходимость построить что-то вроде Perch? Для чего это было нужно?

Рейчел:

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

У нас не было ничего, что можно было бы порекомендовать — ничего, что подходило бы к структурированному контентному подходу, который мы сделали с нашей структурой. Вот откуда появился Perch — он сказал: « Ну, мы можем сделать что-то такое, что шаблоны так хорошо работают, но это что-то вроде вставки, которую может реализовать любой веб-дизайнер? Вот откуда это пришло. Там не было ничего подобного. Мы только что основывались на этом и строили из того, о чем нас просили клиенты.

Дэвид [4:00]:

Это интересно. Я думаю, что природа перча — это то, с чем люди могут быть не знакомы. Как это удобно заехать?

Рейчел:

OK. Если у вас есть сайт со множеством статических файлов, основной потребностью была ситуация, когда дизайнер — и это было, вероятно, более распространено семь лет назад — создавал полностью статичный сайт. Тогда их клиент сказал бы: « О, это замечательно, но мы могли бы просто сделать домашнюю страницу, чтобы я мог ее отредактировать?» На самом деле, то, что было их вариантом на тот момент, было перестроить все это, скажем, в WordPress. Это займет целую кучу времени. Вам придется создавать темы и так далее.

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

Дэвид:

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

Рейчел:

Да. Это значит, что люди могут просто строить вещи. У нас есть клиенты, которые используют всевозможные платформы для создания вещей, и они знают, что могут просто добавить тег Perch, и это не повлияет на то, что они сделали. Если они хотят использовать Dreamweaver, или они даже используют один из этих инструментов типа веб-компоновщика. Мы видим людей, которые использовали Adobe Muse и все такое. Тогда у нас есть люди, которые полностью, тщательно, вручную создают сайт, и просто не хотят, чтобы CMS возилась с ним. Таким образом, у нас есть целый ряд пользователей.

Тим:

Говоря с точки зрения проектирования внутри CMS, одна из вещей, на которых я заметил, что вы также склонны уделять много внимания, это CSS и CSS макет. На Showing Versioning мы обычно не говорим о трендовых технологиях, но я хотел бы немного поговорить о макетах CSS, особенно потому, что вижу направление развития — будущее написания макетов в CSS. Хотите ли вы уделить минуту, чтобы поговорить о некоторых новых функциях макета CSS, на которых вы сосредоточены и в восторге?

Рейчел:

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

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

Я думаю, что спецификация существует уже около четырех лет. Это на самом деле исходило от Microsoft, с такой версией. Хотя некоторые идеи существовали в спецификации дольше, чем это. Microsoft внедрила его раннюю версию в IE10, и с тех пор она разрабатывалась как спецификация, и теперь стоит за флагами в Chrome, Firefox и Safari (в предварительной версии для разработчиков).

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

Тим [7:53]:

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

Рейчел:

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

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

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

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

Тим:

Это очень захватывающая перспектива. Вы на самом деле написали книгу под названием « Подготовьтесь к CSS Grid Layout» с «A Book Apart». Что-нибудь интересное, захватывающее или неожиданное вы узнали о Grid Layout во время написания этого?

Рейчел:

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

Так что это было не так уж удивительно. Я думаю, что меня волнует спецификация, так это когда я представляю ее людям. В начале я упоминал, что много путешествую, и многое из этого рассказывает о таких вещах, как An Event Apart и так далее, о CSS Grid Layout, и показывает людям примеры.

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

Дэвид:

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

Рейчел:

Это приходит все время. Эти спецификации являются дополнительными. Они для двух разных вещей. Как я уже говорил, большая разница в том, что Flexbox является одномерным, а Grid — двухмерным. Другой способ взглянуть на это состоит в том, что если у вас есть куча элементов — скажем, какая-то навигация или что-то еще — и все, что вас действительно волнует, так это то, что метод компоновки смотрит на то, насколько они велики, и хорошо разносит их, что ж чехол для Flexbox. Если вы хотите создать сетку, а затем бросить на нее элементы и сказать: « Теперь вам нужно соответствовать линиям этой сетки, для этого и нужна сетка». Flexbox — это скорее подход, основанный на контенте, а Grid говорит: вот структура, и этот материал должен в нее вписаться и в нее вписаться.

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

Там много общего. Есть спецификация, называемая Box Alignment , которая по сути представляет собой все приятные элементы выравнивания, которые есть во Flexbox, но вынесены в отдельную спецификацию. Grid Layout использует эту спецификацию для выравнивания, поэтому свойства выравнивания точно совпадают для слегка разных имен, потому что очевидно, что у нас нет Flex-контейнеров в Grid Layout, но как они работают одинаково для двух методов компоновки.

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

Тим [12:14]:

Есть ли связь между Grid Layout и CSS3 Multi-column Layout ?

Рейчел:

Опять же, другой метод размещения. Это другой способ размещения контента. Есть некоторые сходства, и у нас есть grid-gapcolumn-gaprow-gapcolumn-gap Это совершенно разные вещи. Multi-column делает то, что нужно, просто передавая содержимое и перенаправляя его в зависимости от того, сколько столбцов входит, таким образом, это немного другой способ работы. Я думаю, что все эти вещи будут работать вместе, в зависимости от того, какую схему вы пытаетесь достичь.

Тим:

Это определенно увлекательно и, несомненно, облегчит мою повседневную работу.

Рейчел:

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

Дэвид:

Я думаю, что это то, что держит нас всех в игре — тот факт, что она постоянно меняется, и постоянно появляются новые вещи.

Рейчел:

Да.

Тим:

Говоря о давних временах, вы хотите немного рассказать о том, как вы начали работать в отрасли?

Рейчел:

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

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

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

Мне повезло, потому что в то время вы очень быстро стали человеком, который знал о веб-сайтах. Друг, у которого была благотворительная организация, сказал: « О, не могли бы вы помочь нам и создать нам сайт? так я и сделал. Эти вещи привели к различным низкооплачиваемым частям внештатной работы, но в конечном итоге привели к возможности получить работу в отрасли, фактически работая в компании доткомов еще в 2000 году. Именно так все и началось.

Дэвид:

Я люблю это. Это соответствует истории многих людей. Все начинали как танцор.

[Смех]

Рейчел:

Просто действительно очевидный ход, да.

Дэвид:

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

Рейчел:

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

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

Тим [16:28]:

Считаете ли вы когда-либо, что труднее идти в ногу со временем, поскольку веб-платформа набирает обороты и продолжает двигаться с постоянно растущими темпами?

Рейчел:

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

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

Дэвид:

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

Рейчел:

Да. Есть множество презентаций на конференциях и тому подобное. Теперь люди просто публикуют их на Vimeo и YouTube, даже если вы не можете попасть на конференции. Они могут быть действительно хорошим способом просто получить обзор — как, например, одна из моих бесед о Grid Layout. Вы могли бы смотреть это — смотреть час видео — и иметь достаточно идеи, что да, я знаю, как это работает. Я знаю, какие проблемы он собирается решить, и у меня есть идея.

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

Дэвид:

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

Рейчел:

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

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

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

Давид [20:14]:

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

Рейчел:

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

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

Тим:

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

Рейчел:

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

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

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

Тим:

Это очень хороший совет, и определенно то, что я слышал от многих людей в отрасли. Изучите основы в первую очередь. Это вам очень поможет. Приятно слышать, и я думаю, отличный совет для многих наших слушателей. Через год-два, CSS Grid Layout, все его используют, все любят. Что дальше для вас?

Рейчел [23:38]:

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

Конечно, это спецификации уровня 1 — Grid, Flexbox и так далее. Это первая из них, по сути. Вполне возможно, что мы переходим к рассмотрению того, что входит в Уровень 2 Flexbox и Grid. Есть, конечно, вещи, которые обсуждали люди, которые могут в конечном итоге в этих спецификациях.

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

Дэвид:

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

Рейчел:

Хм [утвердительно] .

Дэвид:

Где наши слушатели могут узнать больше о вас в Интернете и узнать, как увидеть ваши презентации в Grid и других вещах?

Рейчел:

Я @rachelandrew в Твиттере. Это обычно, где я склонен публиковать вещи в первую очередь. Мой сайт это rachelandrew.co.uk , и именно там я веду блог и публикую вещи. Вы найдете мои презентации и так далее.

На gridbyexample.com есть много и много примеров CSS Grid Layout, который является моим хранилищем кусочков и кусочков Grid, которые я строю , работая над спецификацией.

Дэвид:

Фантастический. Большое спасибо за участие в шоу сегодня.

Рейчел:

Было здорово быть здесь.

Дэвид:

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

Тим:

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

Дэвид:

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

Тим:

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

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

Дэвид:

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

Тим:

Да. Я точно так же поступаю, особенно работая над продуктом, который должен работать не только с вечнозелеными браузерами. Я думаю, что мне действительно нужно просто запрыгнуть на CodePen, возможно, в Firefox или Internet Explorer, чего я никогда не говорил в своей жизни, потому что это имеет лучшую поддержку, и просто начните играть с этим. Я думаю, что мы оба точно знаем, что довольно скоро это будет единственный способ написания макета в CSS.

Дэвид [27:52]:

Я взволнован, чтобы видеть это прибытие, и способ, которым это выходит. Похоже, на этот раз появляется новый стандарт, который дорабатывается и согласовывается до того, как он начнет просачиваться в код. Мне неприятно это говорить, но я думаю, что это происходит из-за того, что он управляется Microsoft и Internet Explorer — то, что большинство разработчиков, вероятно, не захотят попробовать, пока не получат доверие к тому, чтобы стать частью Chrome и Firefox.

Тим:

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

Дэвид:

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

Тим:

Да. Определенно с Flexbox, особенно потому, что в какой-то момент было почти два совершенно разных синтаксиса с Flexbox. Я помню это. Фактически, если вы используете Autoprefixer для CSS и поддерживаете что-то вроде трех или четырех версий назад, вы пишете display: flexflex Это был просто странный способ сделать это. Я, конечно, рад видеть, что этого не случится с Гридом.

То, что я хотел бы видеть, и мне любопытно, если это существует, потому что я ненавижу делать то, что я включаю флаги браузера, чтобы я мог просто поиграть с чем-то. Мне бы хотелось узнать, есть ли в Grid многозаполнение JavaScript, которое позволит мне написать, что будет синтаксисом Grid, так что мне не придется в Chrome включать флаг, прежде чем я смогу его использовать. Если это существует — я, вероятно, должен был спросить Рэйчел — но если это существует, и вы, дорогой слушатель, знаете об этом, пожалуйста, дайте нам знать, и мы обязательно поделимся этим со всеми остальными.

Дэвид:

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

Тим:

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

Дэвид:

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

Тим:

Да, это, безусловно, одна из проблем, с которыми я сталкиваюсь — и я не говорю все, потому что я не мог этого знать, — но с большим количеством учебных лагерей, когда они учат разработчиков. Они начинаются примерно с недели каждого HTML, CSS, JavaScript и бума. Хорошо, теперь мы собираемся изучать Ruby on Rails и React. Это как: «Подожди секунду, ты не мог бы выучить все эти вещи достаточно, чтобы иметь возможность исследовать интеллектуально, инструменты, библиотеки и фреймворки, с тем небольшим количеством времени, потраченным на каждую из этих вещей. Мне повезло в этом, когда я начал изучать HTML, CSS и JavaScript, я действительно не знал об инструментах, библиотеках или фреймворках. Я был достаточно наивен, чтобы думать, что все просто пишут простой HTML, CSS, JavaScript и PHP и так работает весь интернет.

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

Дэвид [33:08]:

Интересно, как это будет для тех людей, как 19-летний, который делал презентацию, от которой Рэйчел хотела чему-то научиться. Эти люди, они как жертвенные агнцы на алтаре новых рамок. Я думаю, в конце концов, в какой-то момент своей карьеры они придут к тому, что они поймут, о, вы знаете, ту структуру, которой я был экспертом в прошлом году, теперь она полностью изменилась, и это совсем другое. Сейчас я делаю эту новую вещь. Что постоянное? Что лежит в основе всех этих вещей? Тогда они также заметят, что да, семантический HTML, основной CSS, ванильный JavaScript, это то, что мне нужно знать, если я хочу продолжать принимать следующую инфраструктуру, следующую библиотеку, которая собирается помочь мне. Честно говоря, в наши дни вы должны уметь принимать эти вещи с комфортом, не забывая об основах.

Тим:

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

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

Дэвид:

Абсолютно. Это дает вам возможность переориентироваться. Это почти как медитация, чтобы вернуться к базовым семантическим аргументам: какой это должен быть элемент HTML? Что это представляет и почему? Если вы не можете ответить на этот вопрос разумно, то вы не понимаете своих основ.

Тим:

Мне вспоминается притча о том, как строить свой дом на фундаменте из песка, а не строить свой дом на основании из камня. Это то, что мне напоминает.

Дэвид:

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

Тим:

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

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

Дэвид:

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

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

Тим:

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

38
Share: