​«Всё это время я создавал формы в 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

Быстрый курс по Node.js для начинающих

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

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

Держите ролик, в котором автор за час рассказывают всю базу по node.js. После неё вы сможете создавать свои первые сервера и переходить к более сложным темам:

https://youtu.be/3aGSqasVPsI?si=qBs0ERgcGd_YWy8O

@prog_point #web #backend #nodejs #javascript

Большой вводный курс по Vue.js

Vue.js — одна из самых популярных JS-библиотек для создания пользовательских интерфейсов.

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

https://youtu.be/6wYu4_6hcDY?si=8NtjdhNADwnzkYzL

@prog_point #web #frontend #vue #javascript

Детальный справочник для веб-разработчиков от А до Я

Если вы искали ресурс, где в одном месте собрано всё, что нужно знать по фронтенд-разработке, то рекомендуем вам Дока. Здесь собрана информация как по основам вёрстки, так и по фреймворкам, JS и TS. Абсолютно бесплатно!

https://doka.guide/

#шпаргалка #веб #javascript #html #css

Делаем просто калькулятор на JavaScript за 25 минут

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

https://youtu.be/WA3EFIB8-wU

#видео #javascript

ASMR программирование: делаем приложение для погоды на JavaScript

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

Вместо этого вы можете под звуки хорошей механической клавиатуры наблюдать за пошаговым созданием приложения без лишних слов. Или даже повторят за автором.

Так как с YouTube сейчас могут быть проблемы, мы загрузили видео сюда. Если нужен оригинал, то он доступен по ссылке: https://youtu.be/iILFBGm_I9M

#видео #javascript