JavaScript заметки

Добавление WebAuthn в веб-приложение

В этой статье мы научимся добавлять WebAuthn в веб‑приложения со стороны frontend‑разработчика. WebAuthn представляет собой новый метод аутентификации, который обеспечивает более высокий уровень безопасности, заменяя устаревшие пароли и SMS‑подтверждения на аутентификацию на основе публичных ключей. Это не только повышает защиту от несанкционированного доступа, но и упрощает вход для пользователей. Например VK и другие компании уже переходят на подобные технологии, отходя от обычных паролей.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

⚡️ Бесплатное обучение фронтенд-разработке с нуля: HTML/CSS, JavaScript, Next.js — с поддержкой от наставника

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

На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить

С 8 ноября стартует новое бесплтаное обучение, где он на практике поможет разобраться во фронтенде: новичкамм в HTML/CSS и JavaScript, а тем, кто с опытом — Next.js

Всего сделаете три проекта:
💡 сайт услуг сборки ПК
💡 фронтенд для магазина на Next.js
💡 и ещё один проект полностью самостоятельно в формате соревнования с другими участниками

Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля

🔖Ещё автор регулярно набирает людей в свою команду, проводит собесы и знает, почему прилетают отказы большинству джунов

Что будет кроме уроков:

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

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

Подписывайтесь, чтобы участвовать, осталось 39 мест

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

➡️Участвовать бесплатно

Работа с объектом FormData для отправки данных формы

Объект FormData упрощает сбор и отправку данных формы на сервер.

#полезное

React + Three.js. Создаём собственный 3D шутер

В современной веб-разработке границы между классическими и веб-приложениями стираются с каждым днём. Сегодня мы можем создавать не только интерактивные сайты, но и полноценные игры прямо в браузере. Одним из инструментов, который делает это возможным, является библиотека React Three Fiber - мощное средство для создания 3D-графики на основе Three.js с использованием технологии React.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Использование Map для хранения ключ-значение

Объект Map предоставляет структуру для хранения уникальных ключей и связанных с ними значений.

#полезное

Кулинарный гид по Vue.js: всё о props

В этой статье разберемся, как frontend-разработчику готовить на «кухне» props. Выбирайте подходящий уровень сложности: джуны-поварята смогут лучше разобраться в работе и применении props на фреймворке Vue.js, а еще мы затронем тему валидации. Для мидлов и более опытных специалистов — настоящих шеф-поваров мы приготовили продвинутые кулинарные техники props, где можно освежить в памяти некоторые детали или решить проектную проблему, если замылился глаз. 

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Использование метода bind() для установки контекста функции

Метод bind() используется для создания новой функции с определенным контекстом выполнения.

#полезное

Раскрываем силу JavaScript: сокращение размера пакета NPM на 99%

Ищете пути повышения производительности приложения? Ознакомьтесь со способами значительного улучшения метрик в Lighthouse и FCP в проектах с использованием пакета дизайн-системы.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Использование JavaScript WebRTC API для передачи потоков данных в реальном времени

WebRTC API используется для захвата и передачи потоков аудио и видео в реальном времени между пользователями.

#полезное

Сборка мусора в JavaScript

Каждый из нас, хотя бы раз, слышал о сборке мусора. Мы знаем, что где-то там работает сборщик мусора, убирая за нами ненужные объекты. Но сколько из нас знают, как он устроен под капотом?
В этой статье мы заглянем под капот этого процесса, поймем, как работает память, и изучим алгоритм сборки мусора.
Поехали убираться!

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Использование JavaScript WeakMap для привязки данных к объектам без утечек памяти

WeakMap хранит ключи в виде объектов, которые могут быть удалены сборщиком мусора, предотвращая утечки памяти.

#полезное

Валидация формы с помощью AJV, Vue.js и TypeScript

Валидация форм является важной частью frontend-разработки, которая помогает улучшить пользовательский опыт и предотвратить ошибки при отправке данных на сервер. В этой статье мы рассмотрим, как использовать библиотеку AJV совместно с Vue.js и TypeScript для создания мощной системы валидации формы.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Использование JavaScript Generators для создания ленивых итераторов

Генераторы позволяют создавать функции, которые могут "запоминать" свое состояние, возвращая значения с помощью yield.

#полезное

Не бойтесь генераторов JavaScript

Все еще пренебрегаете генераторами JavaScript? И совершенно напрасно. Узнайте, как использовать эти мощные средства для управления асинхронным программированием, создания итерируемых объектов и выдачи нескольких значений.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Использование JavaScript Reflect для работы с объектами

Reflect предоставляет удобные методы для работы с объектами, такие как доступ к свойствам, их установка, удаление и проверка существования.

#полезное

Циклы в JavaScript

Рассмотрим циклы JavaScript, их типы, примеры использования и лучшие практики. Это поможет успешно управлять ходом выполнения программ, эффективно решая повторяющиеся задачи.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Использование JavaScript Proxy для создания оберток вокруг объектов

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

#полезное

Как добавить несколько товаров в Shopify корзину одним кликом?

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Работа с датами и временем: использование объекта Date и библиотек для работы с датами

Работа с датами и временем является неотъемлемой частью разработки веб-приложений, особенно при работе с расписаниями, сроками и другими временными данными. Для работы с датами в JavaScript мы можем использовать встроенный объект Date, который предоставляет функциональность для работы с датами и временем.

В данном примере мы создаем объект Date с помощью конструктора new Date(), который инициализирует его текущей датой и временем.

Затем мы используем различные методы объекта Date, такие как getFullYear(), getMonth(), getDate(), getHours(), getMinutes() и getSeconds(), чтобы получить текущие значения года, месяца, дня, часа, минуты и секунды.

Мы также форматируем дату и время, используя шаблон строки и значения, полученные от объекта Date. В данном примере мы форматируем дату в формате "день.месяц.год" и время в формате "часы:минуты:секунды".

#полезное

Один компонент, 20+ фич, A/B-тесты: Поможет ли машина состояний?

Сталкивались ли вы с проблемой возникновения багов из-за пересечения включенных фичей в приложении? Или, возможно, была необходимость одновременно проводить большое число A/B-экспериментов в одном компоненте? 

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью