Простой пример страницы html: Простая html страница код пример

Содержание

Что такое и зачем нужны шаблонизаторы HTML / Хабр

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

Шаблонизаторы для HTML — один из таких способов.

Что такое шаблонизаторы

Шаблонизатор — это инструмент, который позволяет проще писать разметку, делить её на компоненты и связывать с данными.

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

Зачем нужны шаблонизаторы

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

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

Какие проблемы решают шаблонизаторы?

При вёрстке шаблонов принято выделять повторяющиеся блоки в компоненты, чтобы использовать их на других страницах, но иногда один из них требуется изменить. Если речь идёт о внешнем виде компонента, всё просто: вы меняете его CSS-код, и он обновляется везде. Но как быть, если нужно переделать HTML-код сложного компонента? Сначала придётся внести правку в код на одной странице, а затем найти все подобные компоненты и провести аналогичные изменения с каждым.

Простой пример — страница с карточками товаров. Если вы вносите правку в одну карточку, то вам придётся исправлять и остальные — вручную. Просто удалить старые и скопировать новые с уже заполненными данными не получится.

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

Эти ситуации не катастрофичны, но приводят к следующим проблемам:

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

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

Как шаблонизаторы помогают решать проблемы?

Рассказывать про работу шаблонизаторов будем на примере принципа их работы, без отсылки к конкретному инструменту.

Создание шаблонов

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

Рассмотрим это на условном, несуществующем синтаксисе.

Файл раскладки

<!-- layout.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Сайт про сайт</title>
</head>
<body>
  <header>
    <!-- шапка сайта -->
  </header>
  <main>
    <include content />
  </main>
  <footer>
    <!-- подвал сайта -->
  </footer>
</body>
</html>

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

Файл каталога и новостей

<!-- страница каталога -->
<use layout.html />
<h2>Страница каталога</h2>
<div>
  <div>Карточка 1</div>
  <div>Карточка 2</div>
  <div>Карточка 3</div>
</div>
<!-- страница новостей -->
<use layout.html />
<h2>Страница новостей</h2>
<div>
  <div>Новость 1</div>
  <div>Новость 2</div>
  <div>Новость 3</div>
</div>

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

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

Создание компонентов

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

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

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

В качестве примера абстрактной реализации рассмотрим реализацию каталога.

В отдельном файле описываем саму карточку товара со всей структурой.

<!-- описание компонента card-->
<div>
  <div><img src="" alt=""></div>
  <h3></h3>
  <p></p>
  <a href=""></a>
</div>

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

<!-- использование компонента карточки-->
<h2>Каталог магазина</h2>
<div>
  <use card>
  <use card>
  <use card>
</div>

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

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

Работа с данными

Не может же быть так, чтобы при вставке девяти карточек проекта они все стали одинаковыми? Что делать, если мы хотим видеть разный контент в одинаковых компонентах?

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

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

При описании компонента мы говорим, что его контент не статичный, а берётся из объекта с данными, которые будут в него переданы.

<!-- описание компонента card-->
<div>
  <div><img src={data.src} alt={data.alt}></div>
  <h3>{data.title}</h3>
  <p>{data.description}</p>
  <a href={data.
  href}>{data.btn}</a>
</div>

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

<!-- использование компонента карточки-->
<h2>Каталог магазина</h2>
<div>
  <use card src="image.png" alt="Фотография кота" title="Плюшевый кот">
  <use card src="image-dog.png" alt="Фотография собаки" title="Плюшевая собака">
</div>

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

Интерактивность

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

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

Циклические конструкции освобождают от копирования повторяющихся компонентов. Вы указываете данные, которые надо перебрать, и компонент, в который их надо вывести. На выходе вы получаете нужное количество данных в нужном компоненте. Это удобно при создании карточек товаров и списков — новостных и прочих.

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

Какие шаблонизаторы бывают

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

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

Pug — написан на Node.js и компилирует строгий синтаксис в конечный HTML-файл. То есть он не работает на лету и по факту всё равно превращается в HTML. Его надо собирать через сборщик. Инструмент представляет собой довольно нестандартный синтаксис, который непривычен в начале, но быстро осваивается и даёт хороший профит.

Twig — шаблонизатор, написанный на PHP, часто используется при вёрстке шаблонов. Он собирается на сервере и не требует предварительной сборки, но работает в окружении локального сервера.

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

Подготовка к работе с шаблонизаторами

Шаблонизаторы не выглядят сложным инструментом, но с ними всё не так просто.

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

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

Какие выводы можно сделать

Шаблонизаторы делают написание кода проще и избавляют разработчика от хранения в голове большого количества контекста. Это позволяет тратить силы на более полезные вещи.

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

Главное — использовать шаблонизаторы правильно, чтобы действительно оптимизировать работу.

Использование HTML и CSS. Турбо‑страницы для контентных сайтов

Поддерживаемые теги
Пример HTML

Пример CSS
Пример результата
Пример RSS-канала

Для своих Турбо-страниц вы можете использовать один из режимов обработки HTML:

режим по умолчанию — в этом режиме атрибуты class, id будут проигнорированы, исходная структура тегов может быть изменена. См. пример RSS-канала для данного режима.
режим с применением turbo:extendedHtml — в этом режиме используются атрибуты class, id и сохраняется исходная структура тегов. См. примеры ниже для данного режима.

Примечание. Пользовательские HTML и CSS не работают внутри блоков RSS-канала.

Все перечисленные теги при использовании параметра turbo:extendedHtml поддерживают атрибуты class, id.

Блочные: main, div, footer, aside, section, pre, h2—h6, hr, blockquote, table.
Строчные: ins, del, small, big, u, abbr, span, a.
Форматирования: b, strong, i, em, sub, sup, code.
Списков: ol, ul.

Внимание. Теги span, aside, main, footer,section будут перенесены на Турбо-страницу, если включен параметр turbo:extendedHtml .

<header>
    <h2><span>Ресторан «Полезный завтрак»</span></h2>
</header>
<div>Вкусно и полезно</div>
<div>
    <div>
        <img src="https://avatars.mds.yandex.net/get-turbo/1683990/rthbee79622d4d555cff702b7d5d1e52287/orig">
    </div>
    <div>
        <img src="https://avatars. mds.yandex.net/get-turbo/3611801/rthb52c0e885feecd3c3b4f65b93b387bd2/orig">
    </div>
    <div>
        <img src="https://avatars.mds.yandex.net/get-turbo/2916822/rthaff163472730718b6eae066a7904c301/orig">
    </div>
    <div>
        <img src="https://avatars.mds.yandex.net/get-turbo/2799516/rth0b82b0afdb2dc030e328bf1cb983cf05/orig">
    </div>
</div>
<div>
    <a href="https://example.com/">Cайт</a>
</div>
<p>Как хорошо начать день? Вкусно и полезно позавтракать!</p>
<p>Приходите к нам на завтрак. Фотографии наших блюд ищите <a href="#">на нашем сайте</a>.</p>
<h3>Меню</h3>
<figure>
    <img src="https://avatars.mds.yandex.net/get-sbs-sd/369181/49e3683c-ef58-4067-91f9-786222aa0e65/orig">
    <figcaption>Омлет с травами</figcaption>
</figure>
<p>В нашем меню всегда есть свежие, вкусные и полезные блюда.</p>
<p>Убедитесь в этом сами.
  </p>
<button formaction="tel:+7(123)456-78-90" data-background-color="#5B97B0" data-color="white"
        data-primary="true">Заказать столик</button>
<p>Наш адрес: <a href="#">Nullam dolor massa, porta a nulla in, ultricies vehicula arcu.</a></p>
<p>Фотографии — http://unsplash.com</p>

.title {
    text-align: center;
}
.custom.subtitle {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-size: 25px;
    text-align: center;
    padding: 25px;
}
.image-grid {
    line-height: 0;
    padding-bottom: 20px;
}
.image-grid .cell {
    display: inline-block;
    width: 49%;
}
.user .img-wrapper {
    width: 100px;
    min-width: 100px;
}
.user .img-wrapper .turbo-image {
    border-radius: 50%;
}
.site {
    width: 75px;
    height: 75px;
    position: fixed;
    bottom: 15px;
    right: 15px;
    background-color: #eee;
    border-radius: 50%;
    box-shadow: 0 0 5px #aaa;
    z-index: 100;
}
. site .site-link {
    position: relative;
    top: 25px;
    display: block;
    text-align: center;
}

<item turbo="true">
    <title>Заголовок страницы</title>
    <turbo:extendedHtml>true</turbo:extendedHtml>
    <link>https://example.com/restoran</link>
    <turbo:content>
        <![CDATA[
        <header>
            <h2><span>Ресторан «Полезный завтрак»</span></h2>
        </header>
        <div>Вкусно и полезно</div>
        <div>
            <div>
                <img src="https://avatars.mds.yandex.net/get-turbo/1683990/rthbee79622d4d555cff702b7d5d1e52287/orig">
            </div>
            <div>
                <img src="https://avatars.mds.yandex.net/get-turbo/3611801/rthb52c0e885feecd3c3b4f65b93b387bd2/orig">
            </div>
            <div>
                <img src="https://avatars. mds.yandex.net/get-turbo/2916822/rthaff163472730718b6eae066a7904c301/orig">
            </div>
            <div>
                <img src="https://avatars.mds.yandex.net/get-turbo/2799516/rth0b82b0afdb2dc030e328bf1cb983cf05/orig">
            </div>
        </div>
        <div>
            <a href="https://example.com/">Cайт</a>
        </div>
        <p>Как хорошо начать день? Вкусно и полезно позавтракать!</p>
        <p>Приходите к нам на завтрак. Фотографии наших блюд ищите <a href="#">на нашем сайте</a>.</p>
        <h3>Меню</h3>
        <figure>
            <img src="https://avatars.mds.yandex.net/get-sbs-sd/369181/49e3683c-ef58-4067-91f9-786222aa0e65/orig">
            <figcaption>Омлет с травами</figcaption>
        </figure>
        <p>В нашем меню всегда есть свежие, вкусные и полезные блюда.</p>
        <p>Убедитесь в этом сами. </p>
        <button formaction="tel:+7(123)456-78-90"
                data-background-color="#5B97B0"
                data-color="white"
                data-primary="true">Заказать столик</button>
        <p>Наш адрес: <a href="#">Nullam dolor massa, porta a nulla in, ultricies vehicula arcu.</a></p>
        <p>Фотографии — http://unsplash.com</p>
        ]]>
    </turbo:content>
</item>

Написать в службу поддержки

Была ли статья полезна?

примеров | HTML Собака

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

Посмотрите на них в действии и поэкспериментируйте — поиграйте с кодом и посмотрите, что получится.

Текст

Заголовки: от h2 до h6 в стиле по умолчанию.
Размер не имеет значения: создание заголовков любого размера с помощью CSS.
Полужирный, курсив, регистр и высота строки: с использованием font-weight , font-style , font-variant , text-transform и line-height .
Семейства шрифтов: списки семейств шрифтов и общие резервные семейства шрифтов.
Размеры шрифта: абсолютные и относительные единицы.
Интервал текста: text-align , text-indent , word-spacing и letter-spacing свойства.
Вертикальное выравнивание: свойство вертикального выравнивания .
Нижний и верхний индекс: использование позиционирования в качестве альтернативы свойству вертикального выравнивания .
Текстовые тени: Тени. По тексту.
Простые буквицы: простой способ добиться общего эффекта.
Причудливые буквицы: оживление этой первой буквы.
Графические буквицы: использование изображений.
Буквица первого абзаца: ориентация на первую букву первого абзаца.
Котировки по запросу 1: Простая структура котировок по запросу.
Цитаты 2: Добавляем немного стиля.
Pull quotes 3: Более сложный стиль.

Звенья

Подчеркивание: различные способы подчеркивания (обычно ссылки), с использованием text-decoration , border-bottom и background-image .
Якоря и цели: ссылки на части страницы и их стиль с использованием псевдокласса :target .
Rollovers 1: графические ссылки, которые меняются при наведении на них курсора с помощью : наведите курсор на .
Rollovers 2: Дополнительные интерактивные эффекты с использованием псевдокласса :active .
Опрокидывание 3: Постепенное появление и исчезновение.
Ролловер 4: Вращение с использованием преобразования .
Простые переходы CSS: тонкая анимация текстовых ссылок при наведении на них курсора.
Дополнительные переходы CSS: использование радиуса границы и цветов RGBa.
Функции синхронизации перехода CSS: обработка ускорения и замедления анимированных переходов.

Цвета, изображения и фоны

Цвета: цвета CSS с использованием свойств color и background-color .
HTML-изображения: элемент img .
Фоновые изображения: свойство CSS background-image .
Позиционирование фона: использование свойства background-position .
Повторяющиеся фоновые изображения: использование свойства background-repeat .
Фоновое вложение: как фон ведет себя при прокрутке содержимого.
Размер фонового изображения: используется background-size .
Несколько фонов: Наслоение фонов внутри одного блока.
Линейные градиенты: создание градиентных фонов с помощью CSS.
Радиальные градиенты: круговые и эллиптические градиентные фоны.
Непрозрачность: прозрачность коробки.

Макет

Ширина и высота: ширина , высота , максимальная ширина , минимальная высота и так далее.
Границы: толстые, тонкие, такого цвета, такого цвета, сплошные, пунктирные, пунктирные…
Закругленные углы: использование свойства border-radius .
Box shadows: добавление всплывающих окон.
Схлопывание полей: то, как вертикальные поля сливаются или «схлопываются» друг в друга.
Очертания: «Границы», граничащие с границами.
Переполнение: Управление частями содержимого, которые не помещаются в поле.
Блочный и встроенный 1: изменение поведения блоков с помощью свойства display .
Блочный и встроенный 2: больше различий между блочными и встроенными блоками.
Блочный и встроенный 3: Применение отображения : встроенный блок .
Позиционирование: статическое: соответствует нормальному потоку.
Позиционирование: относительное: Смещение от исходного положения блока.
Позиционирование: абсолютное 1: Позиционирование относительно контейнера коробки.
Позиционирование: абсолютное 2: Внутри позиционированного блока.
Позиционирование: фиксированное: относительно области просмотра.
Z-индекс: штабелирование позиционированных ящиков.
Плавающий 1: Простой плавающий ящик.
Плавающий 2: два плавающих ящика.
Плавающий 3: Очистка плавающих ящиков.
Макет страницы 1: два столбца. Шаг 1: размещение столбца навигации.
Макет страницы 2: Два столбца. Шаг 2: использование поля для выталкивания содержимого из-под столбца навигации.
Макет страницы 3: использование рамки для создания фона для столбца.
Макет страницы 4: три столбца.
Макет страницы 5: Добавление заголовка.
Макет страницы 6: нижние колонтитулы не всегда будут работать со столбцами с абсолютным позиционированием…
Макет страницы 7: добавление нижнего колонтитула с использованием плавающих столбцов.
Чарльз Дарвин: стилизованная версия основных принципов предыдущих примеров.
2D-преобразования: изменение размера, формы и положения блоков с помощью преобразовать свойство.
Начало преобразования: изменение точки, от которой отсчитываются преобразования.

Списки и навигация

Основные списки: ul , ol и li элементы.
Вложенные списки: списки внутри списков.
Списки описаний: dl , dt и dd .
Маркеры списка: изменение маркеров и нумерации с использованием типа списка .
Изображения в качестве маркеров элементов списка: Использование list-style-image .
Внутренние и внешние маркеры списка: Использование list-style-position .
Раскрывающиеся списки 1: основы раскрывающегося меню.
Раскрывающиеся списки 2: Простое многоуровневое раскрывающееся меню.
Раскрывающиеся списки 3: Многоуровневое раскрывающееся меню с более подробным дизайном.
Встроенные вкладки: базовая навигация по вкладкам с использованием свойства display .
Плавающие вкладки: основные вкладки с использованием float свойство.
Больше вкладок: Делаем вкладки более похожими на вкладки.
Еще больше вкладок: Альтернативный стиль вкладок.
Узкие вкладки: использование простых подчеркиваний.
Причудливые вкладки: сходите с ума с помощью CSS.
Показать/скрыть навигацию (JavaScript): переключение отображения с помощью JavaScript.
Показать/скрыть навигацию (цель): переключение отображения с помощью псевдокласса :target .

Столы

Базовая таблица: таблица , tr и td элементы.
ячеек заголовка: th элементов.
Объединение ячеек 1: атрибут rowspan .
Объединение ячеек 2: атрибут colspan .
Схлопывание границ 1: Свертывание границ ячеек таблицы.
Свертывание границ 2: Свертывание границ ячеек таблицы и границ таблицы.
Группы столбцов: col и colgroup элементов.
Пустые ячейки: Использование empty-cells свойство, чтобы указать, как должны отображаться пустые ячейки.
Автоматическая компоновка таблицы: Алгоритм компоновки по умолчанию, используемый таблицами.
Фиксированная компоновка таблицы: задается с помощью свойства table-layout .

Формы

Текстовые поля: Текст и пароль типа ввода элементов.
Флажки и переключатели: больше типов элементов ввода .
Ввод файла: для загрузки.
Текстовые области: элемент textarea .
: Основное использование элементов select и option .
Группы опций поля выбора: использование элемента optgroup .
Поля выбора множественного выбора: использование атрибута множественного .

Создание веб-сервера с помощью Node.js для обслуживания простого HTML | Эми Ли

Создание веб-сервера с использованием Node.js для обслуживания простого HTML | Эми Ли | Level Up CodingОткрыть в приложении

Mastodon

Понять, как работает веб-сервер, создав его с нуля.

Опубликовано в

Чтение: 3 мин.

3 сентября 2022 г.

0002 Что такое Node.js?

Node.js — это среда веб-сервера с открытым исходным кодом.
Он может запускать JavaScript вне браузера.

В этом посте давайте напишем веб-сервер, используя Node.js для обслуживания простых файлов HTML.

Требование: установите Node.js

Рекомендуется версия LTS.

Шаг 1: Создайте index.html для обслуживания

Шаг 2: напишите код сервера, используя модуль http

Шаг 3: запустите сервер

 $ node server. js

Тогда ваша страница index.html будет доступен по URL-адресу: http://localhost:8080

Наш сервер Node может обслуживать различный HTML-контент на основе разных HTTP-запросов. Итак, мы можем написать наш сервер так:

И вот результаты:

localhost:8080/localhost:8080/aboutНе обработанный HTTP-запрос

Шаг 1: Установите

http-сервер

 $ sudo npm install http-server$ cd node_modules/

$ cd http-server

Шаг 2 : создать HTML-файл внутри каталога:

node_modules/http-server/bin

 $ cd bin 
 $ vim index.html

Шаг 3: Запустите сервер

 $ node http-server. /* запустить сервер в текущем каталоге*/

Вы можете получить доступ к файлу HTML через три вышеуказанных адреса. Например:

Кроме того, имя вашей машины в качестве имени хоста. В моем случае:

 $ hostname

Помимо html-файла, веб-сервер Node также может обслуживать код JavaScript.

Присоединяйтесь к Medium по моей реферальной ссылке — Эми Ли

Прочитайте все истории от Эми Ли (и тысяч других авторов на Medium). Ваш членский взнос напрямую поддерживает Эми Ли…

medium.com

Веб-разработка

Nodejs

Написано Эми Ли

816 Последователи

·Писатель для

Разработчик программного обеспечения | Кандидат наук. в медицине. Я пишу о программировании, продуктивности, личном развитии и предпринимательстве. https://www.youtube.com/@amyjuanli

Еще от Эми Ли и Level Up Coding

Эми Ли

ILLUMINATION

2 Большие проблемы с системой образования: как учиться эффективно?

Поможет ли образование нашей карьере?

·чтение через 6 мин·23 апр.

Санджай Приядарши

Я провел 14 дней, изучая программиста, который построил компанию стоимостью 167 миллиардов долларов — «Вот его странные правила…

Украсть план этого программиста 9 0441

·11 минут чтения·23 апреля

Нитин Шарма

AutoGPT захватывает Интернет: вот невероятные варианты использования, которые поразят вас

От работы в качестве стажера до автоматизации вашей работы в Discord.

·6 мин чтения·25 апреля

Эми Ли

Пошаговое руководство по настройке LSP в Neovim для написания кода в Next.js

9044 0 Интеллектуальное завершение кода, красивая диагностика, авто Форматирование и т. д.

·10 минут чтения·14 октября 2022 г.

Дорожная карта разработчиков Nodejs 2023

Изучите дорожную карту разработчика Node.js на 2023 год. Пошаговое руководство о том, как стать разработчиком Node.js, расширить свои знания в качестве разработчика Node.js

·7 мин чтения·29 января

Разван Л.

в 9000 3

Дев Genius

Обслуживание HTTPS с помощью Node.js и Nginx

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

·4 мин чтения· 27 ноября 2022 г.

Списки

Истории, которые помогут вам расти как разработчику программного обеспечения

19 историй·43 сохранения

Выбор персонала

307 историй·75 сохранений

Себастьян

CodingTheSmartWay