🖥 Генераторы в JavaScript

С момента появления в JavaScript функций-генераторов прошло немало времени, но многие разработчики все еще относятся к этой звездочке (астериск) с некоторой опаской.

Функция-генератор представляет собой обычную функцию, которую можно приостановить в любой момент для получения промежуточного значения с помощью метода next().

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

function* greeter() {
  yield 'Hi';
  yield 'How are you?';
  yield 'Bye';
}

const greet = greeter();

console.log(greet.next().value);
// 'Hi'

console.log(greet.next().value);
// 'How are you?'

console.log(greet.next().value);
// 'Bye'

console.log(greet.next().value);
// undefined

🗣Но никто не мешает зациклить функцию для бесконечной генерации значений:

function* idCreator() {
  let i = 0;
  while (true)
    yield i++;
}

const ids = idCreator();

console.log(ids.next().value);
// 0

console.log(ids.next().value);
// 1

console.log(ids.next().value);
// 2
// etc...

👀 Обратите внимание, что при первом вызове функции происходит лишь создание объекта-генератора с методом next(), но сама функция не возвращает никакого значения.

CodeBase | Frontend

💩Coderbyte - это платформа, где доступно более 200 задач, которые вы можете решать прямо в онлайн-режиме на одном из 10 языков программирования.

CodeBase | Frontend

🖼️ React.js - это фреймворк JavaScript с открытым исходным кодом, для создания пользовательских интерфейсов.

✔️ Установка

➡️ React.js требует Node.js, поэтому начните с установки Node.js с официального сайта.

Node.js также поставляется с пакетным менеджером npm, который вам также понадобится.

➡️ Откройте терминал или командную строку и перейдите в директорию, где вы хотите создать новый проект с React.js.

➡️ Для удобства рекомендуется использовать инструмент Create-React-App, который позволяет легко создать новый проект React.

➡️ Установите Create-React-App, выполнив следующую команду в терминале:

npx create-react-app my-react-app

где my-react-app - название вашего проекта.
Дождитесь завершения установки.

➡️ Запуск приложения: После установки выполните следующие команды в терминале:

cd my-react-app
npm start

где my-react-app - название вашего проекта.
После запуска, ваше React-приложение будет доступно по адресу http://localhost:3000/.

🙂 Поздравляю, вы справились с установкой React.js!
Теперь можно приступать к созданию вашего проекта!

CodeBase | Frontend

👩‍💻 Vue.js - прогрессивный JavaScript фреймворк для создания пользовательских интерфейсов и одностраничных приложений.

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

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

✔️ Установка

💩 Vue.js требует Node.js для работы. Сначала убедитесь, что у вас установлена Node.js на вашем компьютере.
Скачать — Node.js

💩 Рекомендуется установить Vue CLI (интерфейс командной строки) для создания и управления проектами Vue.js.

💩 Вы можете установить Vue CLI глобально с помощью npm (Node Package Manager), выполнив следующую команду в терминале или командной строке:

   npm install -g @vue/cli

💩 После установки Vue CLI вы можете создать новый проект Vue.js с помощью команды:

   vue create ИМЯ_ПРОЕКТА

💩 Следуйте инструкциям по созданию проекта, выбирая опции по вашему усмотрению.

💩 После создания проекта перейдите в его директорию и запустите его с помощью команды:

   cd ИМЯ_ПРОЕКТА
   npm run serve

💩 Проект будет доступен по адресу, указанному в выводе команды.

Поздравляю! Вы успешно установили и запустили свой проект на Vue.js.

CodeBase | Frontend

💡 Идея пет-проекта: таймер обратного отсчета на JS

Сложность: 🌟⭐️⭐️⭐️⭐️

⚡️ Для улучшения ваших навыков в работе с JavaScript важно изучить разнообразные концепции и функции языка с помощью практических проектов.

⚡️ Создание целевых проектов позволит вам применить полученные знания на практике, освоить основные элементы и овладеть конкретными концепциями, прежде чем приступать к более сложным задачам.

⚡️ Вы можете играть с внешним видом по своему вкусу. С помощью этого проекта вы познакомитесь и сможете использовать различные функции времени в JavaScript.

💻 Технологии:

- HTML/CSS
- JavaScript

🔗 Исходный код

CodeBase | Frontend

Макет сайта "Aperture"

Сложность: ⭐️⭐️⭐️⭐️⭐️

Красивый макет сайта фото студии. Простенький макет, но очень красивый.

🔗 Ссылка на макет

CodeBase | Frontend

⚡️ Vertical TimeLine — универсальный элемент вашего проекта.
Реализован с помощью HTML & CSS.

Сложность: ⭐️⭐️⭐️⭐️⭐️

🔗 Ссылка на код

CodeBase | Frontend

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

💩 Это делает сайт более удобным для пользователей, независимо от устройства и позволяет эффективно управлять отображением элементов.
💩 Подходы Mobile First и Desktop First имеют свои особенности и могут быть применены в зависимости от проекта.
💩 Пользование логических операторов позволяет создавать более сложные и адаптивные стили, что улучшает пользовательский опыт и SEO-оптимизацию сайта.
💩 Внедряйте адаптивный дизайн осознанно, делая ваш сайт доступным и удобным для всех пользователей.

🔗 Читать подробнее

CodeBase | Frontend

⚡️⚡️ У НАС ЕСТЬ ЧАТ ⚡️⚡️

Тут вы можете:

🔥 общаться,
🔥 задавать вопросы,
🔥 предлагать идеи для постов
🔥 развиваться вместе с нами!!

🟢 Админ всегда читает коменты) 🟢

Всем хорошего настроения и продуктивной работы!))

Присоединяйтесь к нашему сообществу!))

Ссылка на ЧАТ

CodeBase | Frontend

🗣 Интернет-магазин сырной продукции

🗂 Категория: Интернет-магазин
💵 Сложность: Очень сложный
📱 Адаптив: ✅
📄 Страницы макета: 17

CodeBase | Frontend

💩 ЛАЙФХАКИ ВЕРСТАЛЬЩИКА 💩

⚡️ Подготовил для вас небольшой список годных ресурсов.

➡️ How To Center in CSS – центрируйте всё

➡️ CodeHouse – крутые подборки готовых решений на CSS и jQuery без плагинов

➡️ Learn Git Branching – интерактивный учебник по Git

➡️ Генератор Flexbox верстки – Конструктор Flexbox

➡️ Генератор Grid верстки – Конструктор Grid

🟢 Сохрани, чтобы не потерять 🟢

CodeBase | Frontend

⚡️ БИБЛИОТЕКИ JAVASCRIPT ⚡️

💻 Библиотека — набор кода, который интегрируется в приложение и выполняет определенные функции в соответствии с задачами, порученными разработчикам.

➡️ Обычно библиотека содержит классы и/или функции, которые могут быть использованы разработчиками в своем приложении. Например:

1️⃣ jQuery предоставляет набор функций для работы с DOM, обработки событий и обеспечения клиент-серверного взаимодействия.

🟢 Скачать jQuery с офф сайта библиотеку jQuery

🟢 Забросить в папку на сервере

🟢 Прописать новый путь до вашей библиотеки jQuery

➡️ Пример:

<script src="/___dwweb_ru/__template/js/jquery-3.3.1.min.js"></script>

2️⃣ D3 - это библиотека, которая позволяет создавать визуализации, используя SVG.

🔵 Загрузите и распакуйте d3.zip

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

🔵 Ссылка на d3.js (для разработки) или d3.min.js (для производства) в вашем HTML:
<script type="text/javascript" src="scripts/d3/d3.js"></script>

3️⃣ React - это библиотека для отображения данных и управления DOM-структурой.

➡️ Установка React локально.

npm install react react-dom

➡️ Полный алгоритм действий выглядит так:

🟠 Устанавливаем Node.js на свой компьютер.

🟠 Открываем командную строку / терминал.

🟠 Переходим в папку, где хотим создать свой проект на React.

🟠 Вводим команду npm install react react-dom и нажимаем 'Enter'.

🟠 Установка запущена.

🟠 По окончанию, можно начинать работать с React!

CodeBase | Frontend

🖼️ Фреймворк VUE.JS 🖼️

Vue — это JavaScript фреймворк для разработки пользовательских интерфейсов, основанный на стандартах HTML, CSS и JavaScript.

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

✔️ Установка

➡️ Предварительно установите Node.js

➡️ Прямое включение CDN-файла:

<script src="https://unpkg.com/vue@next"></script>

➡️ Через NPM:

npm -v — проверка наличия npm
npm install vue — установка последней версии vue

➡️ Использование CLI:

npm install -g @vue/cli;

🟢 Пример:

1️⃣ vue create myproject — создание проекта

2️⃣ cd myproject — войдите в папку

3️⃣ npm run dev — локальный запуск вашего проекта

CodeBase | Frontend