Пишите HTML-код быстрее
Пишите HTML-код быстрее

Современные веб-сайты требуют много HTML-кода. Сложные макеты с несколькими различными представлениями и состояниями могут быть трудны для создания с помощью простого текстового редактора. К счастью, существует множество инструментов для генерации HTML, с которыми можно работать. Здесь мы кратко рассмотрим два наиболее популярных инструмента – Emmet и Pug.

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

Генерация HTML на лету

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

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

    - Пишите HTML-код быстрее

    Ускорьте свой рабочий процесс HTML и CSS с Emmet (Изображение предоставлено emmet.io)

    Как использовать Эммет

    Чтобы уменьшить вероятность этого, вы можете использовать таланты Эммет. Это инструмент, который сэкономит вам много текста и значительно улучшит ваш рабочий процесс HTML и CSS. Emmet позволяет создавать элементы, печатая CSS-подобный селектор. Затем он проанализирует и расширит этот элемент в обычный HTML. Ниже представлен оригинальный элемент, созданный в Emmet.

    nav>ul>li*3>a.chapter{Chapter $ of 3}

    Emmet обнаружит этот элемент, проанализирует его и затем преобразует элемент в стандартный HTML, как показано ниже. Беглый взгляд на элемент Emmet показывает, что

  • умножается на (* 3) и каждый
  • Экземпляр будет называться Глава, за которым следует соответствующий номер (до 3).Обратите внимание, сколько символов содержит элемент Emmet и сколько содержит стандартный HTML. Даже этот небольшой фрагмент кода демонстрирует, сколько времени можно сэкономить, используя сокращение Emmet.

    Эммет также знает о контексте. Например, если мы редактируем

    скорее всего, мы захотим(это строки) элементы для его заполнения. Все, что нам нужно сделать, это указать, сколько нам нужно.Это всего лишь быстрый пример того, что может сделать Emmet, но доступно гораздо больше вариантов конфигурации. К ним относятся редактирование CSS, создание класса BEM (Block Element Modifier) ​​и даже есть генератор Lorem Ipsum. Используйте мопса для динамического контентаШаг вперед Мопс. Это шаблонный инструмент для HTML. Вы можете писать страницы в формате «.pug», и Pug будет читать этот файл, вставлять в него динамические данные и возвращать стандартный HTML. В следующем примере показано, как написать код на Pug для создания того же HTML-кода, что и в примере с Emmet (выше).Файл Pug использует только отступ для обозначения вложенности. Он может перебирать значения для генерации большого количества HTML за один проход. Эти файлы «.pug» предназначены для многократного использования в проекте.

 

  • ul each val in (1, 2, 3) li a(href=””, class=”chapter”) Chapter #{val} of 3
  • Хотя Emmet идеально подходит для статического контента, что произойдет, если контент должен быть более динамичным? Например, нам может потребоваться создать персонализированные домашние страницы, сложные таблицы заказов или повторить общие блоки HTML. Это все возможно в JavaScript, но, предварительно выполнив рендеринг этого контента, мы можем получить дополнительное повышение скорости, не полагаясь на браузер пользователя.
  • Стоит также отметить, что большинство редакторов кода либо имеют встроенный Emmet, либо поддерживают его через плагины. Вы можете узнать больше об этом на странице документации Emmet.
Интерактивная карта Ведьмака - это действительно красота
Интерактивная карта Ведьмака – это действительно красиво

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

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

- Интерактивная карта Ведьмака - это действительно красиво

Перетащите временную шкалу, чтобы показать ключевые точки сюжета и информацию о событии. (Изображение предоставлено: witchernetflix.com)

Временная шкала разделена на четыре трека, посвященных различным элементам истории: пользователи могут следить за ведущими героями, Геральтом, Йеннефером или Цири, или исследовать общую историю волшебного мира. Все четыре трека сходятся, когда временная шкала перетаскивается до 1250 года, при рождении Цири. Ключевые точки на временной шкале оживляют, чтобы сообщить пользователю, что есть что почитать: всплывающее окно выдвигается, чтобы показать событие, и, что более полезно для любителей ведьм, в каком эпизоде ​​и в каком году происходит ключевая сюжетная линия.

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

- Интерактивная карта Ведьмака - это действительно красиво

Поиск информации о ваших любимых персонажах (Изображение предоставлено: witchernetflix.com)

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

Веб-сайт «Карты континента» Ведьмака – прекрасный пример того, как объединить различные медиа для создания полного и убедительного опыта рассказывания историй. Сайт использует тонкие и умные анимации пользовательского интерфейса, чтобы привлечь пользователей и предоставить пользователям информацию, которую они хотят. Он заимствован из известных повседневных элементов (таких как Google Maps), чтобы обеспечить интуитивно понятный и чрезвычайно приятный опыт.

Сделайте карьеру в области данных с помощью этих профессиональных советов и хитростей
Сделайте карьеру в области данных с помощью этих профессиональных советов и хитростей

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

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

В преддверии своего выступления на GenerateJS, конференции, помогающей вам создать лучший JavaScript, 2 апреля в Лондоне Бремер рассказывает, как она прошла путь от астрономии до данных, а именно (узнайте больше о визуализации данных здесь), ее инструментах перехода и как она видит, как дисциплина развивается в будущем.

- Сделайте карьеру в области данных с помощью этих профессиональных советов и хитростей

Эти данные, а именно Бремер работал над Google News Lab, исследует самые популярные вопросы, которые люди задают в Google, чтобы лучше понять своих кошек и собак. (Изображение предоставлено Google News Labs)

Не могли бы вы кратко представиться кому-то, кто вас не знает?

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

Я работаю фрилансером под именем Visual Cinnamon почти три года. Я работаю в основном над предметами, которые используются для маркетинга – как внутри компании, так и за ее пределами, – используются для статей (в печатном или онлайн), пресс-релизов или, может быть, даже для некоторых графических изображений в офисе.

Как вы попали в визуализацию данных?

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

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

Во время конференции по науке о данных в 2014 году на первом слайде спикер Майк Фриман назвал себя «специалистом по визуализации данных». И тут меня ударило, как молния: «Вы можете сделать данные, как отдельную вещь ?!»

Так что же такого в данных, которые вызвали такой аккорд?

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

 

- Сделайте карьеру в области данных с помощью этих профессиональных советов и хитростей

Созданный для совместной работы над эскизами данных, который Бремер сделал с Ширли Ву, Olympic Feathers представляет всех золотых медалистов летних Олимпийских игр с первых игр 1896 года. (Фото предоставлено Надей Бремер / Ширли Ву)

Вы стали фрилансером в 2017 году. Как развивалась ваша карьера с тех пор?

Переход на фриланс – один из лучших профессиональных шагов, которые я когда-либо делал; Я ни разу не пожалел об этом. У меня была возможность работать с клиентами, о которых я думал, что могу только мечтать, таких как Google, ЮНЕСКО и New York Times. Я также наслаждаюсь широким спектром клиентов и наборов данных, с которыми я теперь работаю, от небольших стартапов до громких имен, от журналов или некоммерческих организаций до корпораций.

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

Каковы ваши инструменты перехода?

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

Я занимаюсь дизайном с помощью простой ручки и бумаги или с помощью приложения Tayasui Sketches на моем iPad Pro а также Яблочный карандаштаким образом, проекты действительно остаются грубыми. Затем я перехожу к Visual Studio Code для программирования визуализации данных с помощью d3.js и JavaScript.

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

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

Какие наибольшие ошибки люди делают при создании визуализации данных?

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

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

- Сделайте карьеру в области данных с помощью этих профессиональных советов и хитростей

Этот визуальный фильм, созданный для страницы «Наука о графике» в журнале «Scientific American», показывает различные сезонные модели, появляющиеся при рождении детей в США (Изображение предоставлено Scientific American)

Что вам больше всего нравится в вашей работе, и какие части являются наименее веселыми?

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

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

Какой момент в твоей карьере был самым гордым?

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

Как изменится визуализация данных в течение следующих 10 лет?

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

Так что бы вы хотели увидеть?

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

Jamstack: создавайте более быстрые и эффективные веб-сайты сегодня
Jamstack: создавайте более быстрые и эффективные веб-сайты

Jamstack – это метод создания и обслуживания веб-сайтов с минимальной нагрузкой, необходимой для сервера. Он получил свое название от технологий, используемых в процессе сборки, Javascript, API и разметки. Страницы создаются на языке разметки заранее и используются в качестве статических HTML-файлов по запросу пользователя. Для создания сайта и объединения этих технологий вам нужны правильные инструменты. Обязательно ознакомьтесь с нашей статьей о лучших редакторах кода, которая поможет выбрать лучшую среду разработки для вас.

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

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

01. Скачать необходимые инструменты

Скачать копию Victor Hugo – это один из нескольких стартовых наборов, позволяющих быстро оторваться от земли. Также убедитесь, что у вас установлен узел в вашей среде разработки.
https://gohugo.io/tools/starter-kits/

https://github.com/netlify-templates/victor-hugo

02. Создайте рабочий каталог и установите Hugo

Создайте каталог и назовите его Jamstack, Здесь мы будем работать над нашей машиной для разработки. Распакуйте загруженные файлы для Hugo в этот каталог и откройте его в командной строке. Чтобы установить все зависимости, откройте командную строку или терминал в папке Jamstack и запустите установка npm

npm install

03. Запустите сервер

- Jamstack: создавайте более быстрые и эффективные веб-сайты

(Изображение предоставлено Джозефом Фордом)

Как только зависимости закончатся, запустите npm start. На сервере разработки теперь работает локальная копия Victor Hugo, доступная по умолчанию на localhost: 3000 – при открытии этой ссылки должен появиться экран приветствия, если все прошло успешно. После проверки нажмите Ctrl + С остановить сервер.

04. Добавить страницу и пост

- Jamstack: создавайте более быстрые и эффективные веб-сайты

(Изображение предоставлено Джозефом Фордом)

Измените каталог на папку сайта, затем, используя Хьюго Нью команда, добавить page-one.md и post-one.md, Разработчикам, работающим в Windows, необходимо скачать файл hugo.exe и добавить путь, чтобы заставить его работать, но на веб-сайте hugo есть простая документация.

hugo new page-one.md hugo new post/post-one.md

05. Добавить контент на страницу и опубликовать

В целях тестирования, некоторый контент должен быть добавлен к новому сообщению и странице. Откройте каталог для проекта в файловом браузере и перейдите к Jamstack / Site / Content. В этой папке файл page-one.md теперь должен существовать. Существует также папка с именем после который содержит post-one.md. Откройте оба этих файла и добавьте некоторый контент в markdown ниже — (или в некоторых случаях +++)

# Lorem ipsum dolor sit amet ## Consectetur adipiscing *elit* Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

06. Добавьте тему как субмодуль

- Jamstack: создавайте более быстрые и эффективные веб-сайты

(Изображение предоставлено Джозефом Фордом)

Текст, введенный в предыдущих файлах, нельзя просмотреть без темы. В качестве примера будет использована тема Ananke. Удалить содержимое текущего сайт / макеты папка, оставляя ее пустой. Создайте новый каталог в папке сайта с именем темы, затем перейдите к нему и запустите следующий код, чтобы импортировать тему как подмодуль git. Примечание: обычное клонирование несовместимо с Netlify.

mkdir themes cd themes git submodule add https://github com// https://github.com/budparr/gohugo-theme ananke.git themes/ananke

07. Настройте тему и запустите сервер

Скопируйте содержимое site / themes / gohugo-theme ananke / exampleSite / config.toml более одного в папке сайта. В верхней части страницы замените базовый URL-адрес на ‘и удали строку themesDir = ‘../ ..’ , Сохраните файл конфигурации, откройте терминал и запустите начало вечера команда. Вы также можете изменить название сайта (если хотите), заменив заглавие ценность.

cd site npm start

08. Тест в браузере

открыто HTTP: // локальный: 3000 / страниц один /чтобы увидеть тему, отображающую разметку страницы как полностью стилизованную страницу. Открыв домашнюю страницу, первое сообщение теперь будет видно. Это означает, что генератор статического сайта теперь работает.

09. Настройте меню

- Jamstack: создавайте более быстрые и эффективные веб-сайты

(Изображение предоставлено Джозефом Фордом)

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

TOML +++ menu = “main” +++ YAML --- menu: “main” ---

10. Вставьте файлы в GitHub

Затем анимируйте круг, чтобы реагировать на клики пользователей. Теперь статический сайт запущен и работает, он должен быть доступен на сервере разработки. Первый шаг – отправить код на GitHub. Создайте новый репозиторий на GitHub, а затем либо используйте командную строку, чтобы вытолкнуть код из папки проекта или настольного приложения GitHub.

git remote add origin https://github.com/(githubusername)/jamstacktutorial.git git push -u origin master

11. Подключитесь к Netlify

Netlify соберет все воедино, создаст сайт и будет обслуживать его на временном домене. Начните с создания учетной записи на Netlify и свяжите ее с учетной записью GitHub. Как только все настроено, нажмите Новый сайт от Git,

12. Подключитесь к Github

Для непрерывного развертывания нажмите Github, затем выберите репо, которое было сделано ранее в этом уроке. Netlify должен автоматически определить лучшие варианты сборки для проекта. Следует читать npm run build, Если все хорошо, нажмите кнопку развернуть.

- Jamstack: создавайте более быстрые и эффективные веб-сайты

(Изображение предоставлено Джозефом Фордом)

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

14. Внесите изменения в тестовое развертывание.

Сайт теперь загружается через JAMStack. это молниеносно, и он автоматически обновляется, когда совершается коммит в github. Чтобы проверить это, вернитесь в локальную среду разработки и запустите Hugo Новая страница- three.mdиз каталога сайта. Затем откройте созданный файл, добавьте контент, нажмите «Сохранить» и передайте файл в репозиторий. Через несколько секунд вы заметите, что обновление доступно по ссылке netlify.

15. Добавьте CMS на ваш статический сайт

Работа в простой разметке и использование командной строки для создания страниц не подойдет большинству клиентов. Чтобы сделать сайт более дружелюбным, установите систему управления контентом. Forestry.io идеально подходит для текущей настройки. Зайдите на сайт и создайте аккаунт с помощью github.

16. Настройка лесного хозяйства

Нажмите добавить новый сайт, затем выберите Hugo в качестве генератора статического сайта, git в качестве поставщика и заполните информацию в следующих формах. Нажмите «отправить», и новая CMS загрузится, готовая к изменениям содержимого. Теперь страницы можно просто редактировать с боковой панели, а также посты и множество других опций.

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

- Jamstack: создавайте более быстрые и эффективные веб-сайты

Узнайте, как создать лучший JavaScript на GenerateJS (Изображение предоставлено Future / Remy Sharp / Phil Hawksworth / Джереми Китом / Nadieh Bremer / Toa Heftiba, Unsplash)

Присоединяйтесь к нам в апреле 2020 года с нашей суперзвездой JavaScript на GenerateJS – конференции, которая поможет вам улучшить JavaScript. Забронировать сейчас на generateconf.com

Do NOT follow this link or you will be banned from the site!
WeCreativez WhatsApp Support
Наша служба поддержки клиентов готова ответить на ваши вопросы.
Привет, чем я могу помочь?