FrontendBlok

30 полезных сервисов для изучения JavaScript и работы с ним

30 полезных сервисов, если вы работаете с JavaScript или пока только учите его

Прокачайте свою разработку с этими полезными ресурсами — от синтаксиса до паттернов проектирования. Каждая шпаргалка поможет тебе работать быстрее и увереннее. Обязательно сохраните себе эту подборку. Погнали! 👇

1. JavaScript Cheatsheet

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

2. OverAPI — JS Cheatsheet

Объединяет множество JavaScript-методов, операторов и встроенных функций. Простой и быстрый доступ к нужному синтаксису.

3. DevDocs

Документация в одном флаконе. Работает офлайн, супербыстро, и включает не только JS, но и многие другие технологии.

4. Cheatography — JavaScript Cheat Sheet

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

5. JavaScript.info Summary Tables

На сайте есть таблицы-сводки по темам, таким как типы данных, операторы, промисы и прочее. Упорядочено и логично.

6. Frontend Checklist

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

7. 30 Seconds of Code

Коллекция коротких JavaScript-сниппетов, которые можно изучать и применять сразу. Идеально для повседневных задач.

8. JavaScript Regex Cheatsheet

Регулярки — боль. Но с этой шпаргалкой они становятся понятными. Примеры, синтаксис и визуализация.

9. Can I Use

Проверка совместимости JS-фич и API в разных браузерах. Просто маст-хэв при использовании новых возможностей языка.

10. Patterns.dev — Design Patterns in JavaScript

Шпаргалка по паттернам проектирования с примерами на JS. Отлично помогает писать более архитектурно грамотный код.

11. MDN Web Docs

Каноническая документация по JavaScript от Mozilla. Пояснения, примеры, интерактивные песочницы и статьи от базы до продвинутого уровня.

12. JavaScript Algorithms and Data Structures

Коллекция алгоритмов и структур данных, реализованных на JS. Подходит для подготовки к собеседованиям и общего апгрейда навыков.

13. W3Schools JavaScript Tutorial

Подходит новичкам. Примеры, объяснения и песочницы прямо в браузере.

14. CodeCombat

Игра, где ты управляешь героем с помощью JavaScript-кода. Пошаговые уровни, прокачка и квесты — идеально для начинающих и школьников.

15. CheckiO

Решай головоломки с помощью JavaScript. Красивый интерфейс и веселые, иногда нетривиальные задачки. Подходит для развития алгоритмического мышления.

16. Untrusted

Уникальная игра, где ты «взламываешь» саму игру, редактируя её JavaScript-код. Смешение квеста и JS-хакерства — очень оригинально!

17. CodinGame

Играешь в настоящие визуальные мини-игры, управляя персонажами или логикой с помощью кода. Поддерживает JS и другие языки. Весело, соревновательно и полезно.

18. ESLint Playground

Онлайн-инструмент для проверки стиля и поиска ошибок в JS-коде. Позволяет тестировать кастомные конфиги.

19. Prettier Playground

Форматирование кода по правилам Prettier. Смотри результат до и после прямо онлайн.

20. JavaScript Tutor

Визуализация исполнения JavaScript-кода построчно. Помогает понять, как работает стек вызовов и переменные.

21. Elevator Saga

Минималистичная, но увлекательная игра, где ты пишешь JavaScript-код, чтобы управлять лифтами в здании. Нужно оптимизировать логику, скорость и эффективность. Прокачивает навыки асинхронного мышления и алгоритмов.

22. CodeMonkey

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

23. ES6 Cheatsheet

Всё, что нужно знать по современному JavaScript (ES6+): стрелочные функции, модули, spread/rest, классы и т.д.

24. Regex101 (JS mode)

Мощный инструмент для создания, тестирования и отладки регулярных выражений на JavaScript.

25. Codewars

Задачи (ката) для прокачки JS-скиллов. Геймификация, уровни и сообщество. Втягивает!

26. JavaScript Event KeyCodes

Быстрый способ узнать, какой keyCode у клавиши. Удобно для создания горячих клавиш и UI-обработки.

27. Web.dev (JavaScript Performance)

Учебник от Google по современному JS с акцентом на производительность, асинхронность и лучшие практики.

28. TypeScript Playground

Если ты переходишь на TypeScript (а пора бы) — это песочница покажет тебе разницу между типами и их влияние на код.

29. JavaScript Obfuscator

Инструмент для запутывания JavaScript-кода. Иногда нужно спрятать логику от копипастеров.

30. JSDelivr

CDN для быстрой доставки JS-библиотек. Альтернатива unpkg и npm для подключения через <script>.

А на этом курсе вы можете изучить JavaScript с нуля или систематизировать свои знания.

💬 Какие шпаргалки используете Вы? Делись в комментариях!

Интернет-журнал от FrontendBlok для фронтендеров и не только