Создание интерактивных карт на базе JS API

В продолжение разговора про API: классный пример визуализации данных на карте от Яндекс Еды.

Ребята собрали лендинг с исследованием популярной еды в России. Для наглядности сделали кастомную интерактивную карту на базе JavaScript API от API Яндекс Карт. Получилось интересно

🔜 Пост про API: тык
🔜 Пример кастомной карты: тык

👉 Гайды по JavaScript | дать буст

Этот ресурс для программистов на JavaScript просто замечательный.

Здесь сравнивается скорость работы различных JS-кодов.

И подсказывает, какой из них работает быстрее:

→ https://perf.link

👉 Гайды по JavaScript | дать буст

Javascript - Методы работы с картами.

Создание Map – объявление deploymentMap с начальными значениями.

Методы Map – добавление, получение, проверка, удаление, очистка и определение размера.

Итераторы Map – работа с keys(), values(), entries().

Использование forEach – вывод пар ключ-значение в консоль.

Преобразование Map в массив – использование Array.from().

Создание Map из объекта – с помощью Object.entries().

👉 Гайды по JavaScript | дать буст

Чистая архитектура в FrontEnd.

✓ Случаи использования, сервисы, репозитории...
✓ Понимание слоев архитектуры.
✓ Не использовать классы, только функции.
✓ С TypeScript

⏩ читать

👉 Гайды по JavaScript | дать буст

Это круто!!! Вы можете открыть Jupyter Notebook в Colab прямо с GitHub.

Просто добавьте "tocolab" в URL после "github", и блокнот откроется прямо в Colab.

Нет необходимости скачивать блокнот!

👉 Гайды по JavaScript | дать буст

Когда дело доходит до Full Stack,

❯ Full Stack
https://youtube.com/playlist?list=PLZlA0Gpn_vH8jbFkBjOuFjhxANC63OmXM

❯ Node.js
https://youtube.com/playlist?list=PLZlA0Gpn_vH_uZs4vJMIhcinABSTUH2bY

❯ JavaScript
https://youtube.com/playlist?list=PLZlA0Gpn_vH9k5ju1yq9qCDqvtuTVgTr6

❯ TypeScript
https://youtube.com/playlist?list=PLZlA0Gpn_vH_z2fqIg50_POJrUkJgBu7g

❯ HTML
https://youtube.com/playlist?list=PLZlA0Gpn_vH8BoXcpCUvdmdPZFuR5y2lV

❯ CSS
https://youtube.com/playlist?list=PLZlA0Gpn_vH9D0J0Mtp6lIiD_8046k3si

❯ React
https://youtube.com/playlist?list=PLZlA0Gpn_vH_NT5zPVp18nGe_W9LqBDQK

❯ Next.js
https://youtube.com/playlist?list=PLZlA0Gpn_vH8Bqoo3cG2tpSwiZ2VZyu51

❯ Узнай X за Y минут
https://youtube.com/playlist?list=PLZlA0Gpn_vH85jM1TWO6TdCtSr6ruglWn

👉 Гайды по JavaScript | дать буст

JAVASCRIPT ФОРМЫ ШПАРГАЛКИ.

⏩Выбор элементов формы: Получение формы и элементов по ID, имени, CSS-селектору.

⏩Свойства и методы формы: Работа с коллекцией элементов, методами отправки и сброса формы.

⏩Доступ к значениям формы: Получение и установка значений элементов, работа с выпадающими списками и чекбоксами.

⏩События формы: Обработка событий отправки, изменения, фокуса и потери фокуса.

⏩Валидация формы: Встроенная HTML5 валидация и JavaScript валидация.

⏩Объект FormData: Создание и управление данными формы.

⏩AJAX-отправка формы: Использование Fetch API и XMLHttpRequest для отправки данных формы.

👉 Гайды по JavaScript | дать буст

💡 Подсказка Javascript

При преобразовании объекта JavaScript в строку JSON вы можете использовать функцию replacer с JSON.stringify для фильтрации свойств или изменения значений.

👉 Гайды по JavaScript | дать буст

Структура папок в приложении React. На случай, если вам понадобятся идеи:

👉 Гайды по JavaScript | дать буст

Каким будет вывод следующего кода JavaScript?

👉 Гайды по JavaScript | дать буст

Ищете хостинг для размещения базы данных?

Тогда держите:

✓ 500 баз данных
✓ 5 ГБ хранилища
✓ 500 миллионов чтений
✓ Векторная поддержка искусственного интеллекта

Совместимость с Python, TypeScript, Rust и другими языками:

→ turso․tech

👉 Гайды по JavaScript | дать буст

Как структурировать папки в проекте?

Неважно, используешь ли ты React, Vue, TypeScript или JavaScript.

Существует множество стратегий и мнений по этому поводу. Я расскажу тебе о нескольких интересных вариантах! ↓

1. По типу

Это самый простой и распространенный способ. Подходит для небольших проектов.

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

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

2. По типу и функционалу

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

☑ Плюс: становится проще ориентироваться.
❌ Минус: возможное дублирование одних и тех же "фич" в разных папках.

3. Screaming Architecture (Кричащая архитектура)

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

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

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

Какая структура лучше? 🤔

Зависит от размера и длительности проекта.

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

👉 Гайды по JavaScript | дать буст

💡 Полезный совет: используйте Performance Monitor в Chrome DevTools — это помогает анализировать загрузку процессора и использование памяти на сайте!

👉 Гайды по JavaScript | дать буст

Javascript - Использование Promise.all

🍩 checkDeploymentStatus(app) - функция, которая возвращает Promise, имитирующий проверку статуса деплоя:

- Через 2 секунды (setTimeout) случайным образом (80% успех, 20% провал) возвращает статус

- При успехе вызывает resolve, при ошибке - reject

🍩Пример одиночной проверки:

- Проверяет статус для "sevalla-web"

- Выводит успешный статус или ошибку

🍩checkMultipleDeployments() - проверка нескольких приложений параллельно:

- Использует Promise.all для одновременной проверки 3 приложений

- Выводит общий результат, если все успешны

- Или первую ошибку, если хотя бы один деплой провален

👉 Гайды по JavaScript | дать буст

Типы функций Javascript

- Обычное объявление функции (Regular Function Declaration)

- Функциональное выражение (Function Expression, анонимная функция)

- Именованное функциональное выражение (Named Function Expression)

- Стрелочная функция (Arrow Function)

- Стрелочная функция с несколькими операторами (Arrow Function with Multiple Statements)

- Немедленно вызываемое функциональное выражение (Immediately Invoked Function Expression, IIFE)

- Асинхронная функция (Asynchronous Function)

👉 Гайды по JavaScript | дать буст

Основы Git

1. Создание репозитория

git init, git add, git commit, git remote add, git push

2. Работа с локальными изменениями

git status, git add, git commit

3. Просмотр истории

git log, git blame

4. Ветвление и слияние

git branch, git checkout, git merge

5. Отмена изменений

git reset, git checkout, git revert

* Дополнительные команды

Клонирование, обновление (git pull), отправка изменений (git push), работа с stash, тегами, сравнением (git diff), удаление веток и управление удалёнными репозиториями.

👉 Гайды по JavaScript | дать буст

Быстрый совет JavaScript!

Как найти максимальное и минимальное значение в массиве? Без циклов!

👉 Гайды по JavaScript | дать буст

Возвращает ли это "try" или "finally" в JavaScript?

👉 Гайды по JavaScript | дать буст

Огромный выбор инструментов для веб-разработки

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

Этот список включает в себя иконки, палитры, шаблоны кода, инструменты для дизайна, JS-фреймворки и многое другое

Ссылка: тут

👉 Гайды по JavaScript

💡 Совет JavaScript - используйте уменьшение для группировки элементов

👉 Гайды по JavaScript | дать буст