​«Всё это время я создавал формы в React.js неправильно»

Если вы тоже при создании форм в React.js сталкивались с тем, что ваш код — это куча useStates и обработчиков onChange для них, то этот материал для вас.

Разработчик рассказывает, как сделать код создания форм чище и понятнее: https://tprg.ru/OgMZ

#javascript

​Решаем популярные задачи с асинхронным кодом на JavaScript: часть первая

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

Преподаватель Elbrus Bootcamp Денис Образцов выбрал несколько популярных задач, с которыми выпускники буткемпа часто сталкиваются на интервью, и разобрал логику их решения. Подробнее у нас на сайте:

https://tprg.ru/4uZU

#веб #javascript

​Решаем популярные задачи с асинхронным кодом на JavaScript: часть вторая

Первая часть ждёт вас здесь. А здесь собрали для вас ещё несколько интересных задач с асинхронным кодом! Переходите по ссылке и попробуйте решить их все:

https://tprg.ru/REZG

#javascript #веб

​Что будет, если взять известную игру сапëр и изменить игровой процесс на обратный?

Автор статьи задался таким вопросом и создал необычный пет-проект с игрой «Минёр». В отличие «Сапёра» здесь игроку доступна сразу вся информация об игровом поле.

Не баг, а фича, получается. А ещё отличный проект, чтобы потренироваться в разработке на JavaScript.

В статье подробнее о процессе разработке: https://habr.com/ru/articles/408169/
Исходники есть на гитхабе: github.com/schibir/mineslitter
А здесь небольшая демка, чтобы поиграться: schibir.github.io/mineslitter

#gamedev #javascript #веб

​Код, написанный на JavaScript, обрабатывается движком. Но как именно это происходит «под капотом» и какие процессы в этом задействованы?

В общих чертах и с очень наглядными анимациями

А если решили погрузиться серьёзно, вот огромный цикл статей, которые раскроют внутреннее устройство Java Script лучше любой книги:

1. Обзор движка, механизмов времени выполнения, стека вызовов

2. О внутреннем устройстве V8 и оптимизации кода

3. Управление памятью, четыре вида утечек памяти и борьба с ними

4. Цикл событий, асинхронность и пять способов улучшения кода с помощью async/await

5. WebSocket и HTTP/2+SSE — что выбрать

6. Особенности и сфера применения WebAssembly

7. Веб-воркеры и пять сценариев их использования

8. Сервис-воркеры

9. Веб push-уведомления

10. Отслеживание изменений в DOM с помощью MutationObserver

11. Движки рендеринга веб-страниц и советы по оптимизации их производительности

12. Сетевая подсистема браузеров, оптимизация её производительности и безопасности

13. Анимация средствами CSS и JavaScript

14. Абстрактные синтаксические деревья, парсинг и его оптимизация

15. Классы и наследование, транспиляция в Babel и TypeScript

16. Системы хранения данных

17. Технология Shadow DOM и веб-компоненты

18. WebRTC и механизмы P2P-коммуникаций

19. Пользовательские элементы

20. Паттерны и анти-паттерны

21. JavaScript ES8 и переход на async/await

#javascript #веб

Пользовательские директивы во Vue

Во Vue директивы представляют собой специальные html-атрибуты, позволяющие манипулировать DOM-элементами. Все директивы обычно начинаются с буквы v, а затем через дефис идет название директивы.

Помимо встроенных директив (таких как v-model и v-show), Vue также позволяет регистрировать ваши собственные пользовательские директивы. Подробнее о том, как можно создать свои директивы, вы сможете узнать в этом подробном уроке.

#js #vue #веб #фронтенд

Интерактивный курс по JavaScript

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

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

@prog_point #javascript

Челлендж-тренажёр нативного JavaScript

Если вы уже прошли какие-то курсы по JS, но вам не хватает мотивации попрактиковаться, то держите решение.

Это 30-дневный челледж, в котором вам предстоит ежедневно разрабатывать небольшие проекты на чистом JS. Вместе с заданием идёт и видео, где показывается реализация задания. Так что если зайдёте в тупик — не беда. Среди заданий: простые игры, звуковые синтезаторы, визуальные эффекты и многое другое.

@prog_point #javascript #web

ООП в JavaScript на примерах с Фредди Меркьюри

ООП в JavaScript можно представить как конструктор LEGO. Вы создаете кучу кубиков (объектов), каждый со своими специальными функциями и свойствами. А знание ООП помогает вам строить более крепкие и крутые конструкции, используя эти кубики как основные блоки.

Держите простую статью, которая наконец поможет разобраться в основных концепциях ООП на примере с Фредди Меркьюри. Всё с подробными объяснениями и примерами кода.

@prog_point #oop #javascript #теория

NPM для новичков — что такое и зачем это знать?

NPM (Node Package Manager) — это инструмент для управления пакетами в JavaScript. Он помогает разработчикам легко находить, устанавливать и обновлять библиотеки и инструменты, необходимые для создания приложений.

Представьте себе большой магазин, где есть много полезных модулей, которые можно добавить в ваш проект, чтобы не писать весь код с нуля — это и есть NPM. Он нужен всем, кто работает с JavaScript, особенно если используется платформа Node.js.

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

@prog_point #web #javascript