⚡️ WEB-СЕРВЕР: СОЗДАНИЕ ⚡️

➡️ Давайте создадим простой веб-сервер на Node.js.

➡️ Для разработки приложений вы можете использовать стандартные конструкции языка JavaScript.

‼️ Поскольку ваше приложение будет выполняться на сервере, а не в браузере, DOM и объекты, такие как window или document, будут недоступны.

➡️ Сначала создадим каталог для приложения на жестком диске.

➡️ Допустим, у нас есть каталог /projects/node-app, и в нем у нас будет файл app.js:

javascript
const http = require("http");

http.createServer(function(request, response) {
    response.end("Hello Node.js!");
}).listen(3000, "127.0.0.1", function() {
    console.log("Сервер начал прослушивание запросов на порту 3000");
});

✔️ Итоги:

1️⃣ Мы подключили модуль http, который необходим для создания сервера, используя функцию require().

2️⃣ С помощью метода createServer() создали новый сервер для обработки входящих запросов. В этом методе мы передали функцию с двумя параметрами: request с информацией о запросе и response для отправки ответа.

3️⃣ Метод http.createServer() лишь создает сервер. Чтобы начать прослушивание подключений, мы использовали метод listen(), указав номер порта и функцию обратного вызова для отображения сообщения о начале прослушивания.

➡️ Чтобы запустить сервер, вам необходимо выполнить команду node app.js в директории с проектом.

➡️ После запуска сервера, откройте браузер и перейдите по адресу http://localhost:3000, чтобы увидеть сообщение "Hello Node.js!".

CodeBase | Frontend

💎 ТОП-3 ЗАДАЧИ ДЛЯ ПРОКАЧКИ JS 💎

1️⃣ Напишите однострочное решение, которое вычисляет сумму квадратных корней для всех чётных чисел целочисленного массива.

2️⃣ Яблоко стоит 1.15, апельсин стоит 2.30. Сколько они стоят вместе – чему равна сумма 1.15 + 2.30 с точки зрения JavaScript?

3️⃣ Чему равен typeof null в режиме use strict?

CodeBase | Frontend

⚡️ ТОПовая библиотека иконок ⚡️

🔵 Содержит более 27 000 привлекательных иконок.
🔵 Более 3800 иконок доступны бесплатно для коммерческого использования.
🔵 Предоставляются в форматах SVG, React, React Native, npm, CDN и других.

🔗 Ссылка

CodeBase | Frontend

⚡️ Крутое CSS решение ⚡️

➡️ Реализовано с помощью HTML/CSS.

🔗 Ссылка

CodeBase | Frontend

✅ Вопрос на собеседовании ✅

❓ Какие различия существуют между map и set в JavaScript?

Ответ:

➡️ Map и Set - это две разные структуры данных в JavaScript, предназначенные для хранения уникальных значений.

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

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

CodeBase | Frontend

🔥Макет сайта: Игровой сервис🔥

🔵 Тематика: Гейминг
🔵 Страницы: многостраничный
🔵 Адаптив: нет
🔵 Технологии: HTML/CSS, JS

🔗 Ссылка

CodeBase | Frontend

⚡️ Макет сайта: Activitar ⚡️

➡️ Activitar-это выдающийся красивый и впечатляющий дизайн сайта фитнес-клуба.

🔵 Страницы: Одностраничный
🔵 Технологии: HTML/CSS, Bootstrap, JS

CodeBase | Frontend

🔥 Quokka.js 🔥

⚡️ Quokka.js - это инструмент для JavaScript и TypeScript, который выводит результаты выполнения кода непосредственно в редакторе во время его написания. Попробуйте его сами!

➡️После установки плагина:

🔵 нажмите Ctrl/Cmd(⌘) + Shift + P, чтобы открыть палитру команд редактора,
🔵 затем введите Quokka, чтобы увидеть доступные команды плагина.

➡️ Выберите и запустите команду New JavaScript File или используйте сочетание клавиш ⌘ + K + J для создания нового файла.

➡️ Весь введенный код будет немедленно выполнен и отображен.

🔗 Ссылка

CodeBase | Frontend

⚡️ Remix.js ⚡️

➡️Remix - это фреймворк, разработанный для построения клиент-серверных веб-приложений с использованием JavaScript (React) с интегрированной поддержкой TypeScript.

🟢 Remix позволяет разрабатывать PESPA (Progressive Enhancement Single Page Apps) - одностраничные приложения с возможностями прогрессивного улучшения.

Это означает следующее:

🟢 Большая часть кода приложения размещается на сервере.
🟢 Приложение остается функциональным даже без JavaScript.
🟢 JavaScript используется исключительно для постепенного улучшения пользовательского опыта (UX).

🔗 Документация

CodeBase | Frontend

👩‍💻 Веб-скрейпинг с Crawlee 👩‍💻

- npm install crawlee playwright

⚡️ Crawlee - это библиотека для веб-скрейпинга и автоматизации браузеров для Node.js, которая позволяет создавать надежных веб-пауков.

🟠 Она написана на JavaScript и TypeScript. Crawlee обеспечивает извлечение данных для AI, LLM, RAG или GPT и также может загружать HTML, PDF, JPG, PNG и другие файлы с веб-сайтов.

🟠 Работает с Puppeteer, Playwright, Cheerio, JSDOM и чистым HTTP. Предоставляет возможность работы в режимах headful и headless.

CodeBase | Frontend

✅ Card Hover Interaction - элегантные карты с анимированным показом информации при наведении курсора.

🟢 Реализованы с использованием CSS.

🔗 Ссылка

CodeBase | Frontend

🔥 Chart.js 🔥

⚡️ Chart.js представляет собой интуитивно понятную и легко настраиваемую библиотеку для создания графиков на современных веб-сайтах.

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

🔗 Документация

CodeBase | Frontend

👩‍💻 Node.js против Django 👩‍💻

⚡️ Прежде всего, хочу подчеркнуть, что наша цель здесь - не выбирать победителя.

✅Django и Node.js оба отлично подходят для создания сложных веб-приложений.

🟡 Django - лучший выбор для поклонников Python, предоставляя инструменты для разработки бэкенда.

🟡 Node.js, в свою очередь, представляет инструмент для запуска JavaScript на сервере, обеспечивая удобство использования одного языка программирования для фронтенда и бэкенда.

🟢 Оба инструмента обладают своими преимуществами и особенностями, которые стоит рассмотреть.

🟡 Django - универсальный и обладает широкими функциями, в то время как Node.js основан на событийной архитектуре, идеальной для реального времени.

✅ Какой выбрать - зависит от ваших целей и требований проекта. ✅

🔗 Django Documentation

🔗 Node.js Documentation

Если понравился такой формат, добавь 🔥🔥🔥

CodeBase | Frontend

👩‍💻 Плагин для VS Code: eCSStractor 👩‍💻

🔹 eCSStractor — позволяет автоматически выделять участки HTML-кода с определенными классами и вставлять соответствующие селекторы в CSS.

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

🔗 Ссылка

CodeBase | Frontend