Делаем форму обратного звонка: лендинг, Go и SMS-уведомления

Классный туториал от Екатерины Саяпиной для вашего портфолио. Форма обратного звонка довольно часто используется на сайтах, поэтому умение делать её крайне полезно и может быть отмечено при трудоустройстве.

В этом руководстве вы научитесь не просто верстать блок обратной связи, но и делать бэкенд-часть на Go, работать с Callback и SMS API. Отдельный плюс — для этого вам не нужны сложные фреймворки — только HTML, Go и чуть-чуть JavaScript.

Старт по ссылке: https://habr.com/ru/companies/ru_mts/articles/856232/

#туториал #golang #javascript #html

Платформер в жанре rogue-like размеров в 13KB

Продолжаем тему ультралёгких игр. На этот раз возьмём игру потяжелее (если так можно сказать про 13KB), но зато гораздо сложнее, чем змейка.

Space Huggers — это проект, созданный в рамках популярного соревнования JS13K Games, где люди соревнуются в создании игр, чей размер не превышает 13 килобайт. Эта игра представляет собой платформер, объединяющий сразу два жанра — roguelike и run and gun. В этой статье рассказана история создания игры, движка для неё и который стал самостоятельной библиотекой.

Рекомендуем к прочтению, если хотите вдохновиться или просто интересно провести время.

#gamdev #javascript

Telegram Mini App. Как создать Web App с нуля

Mini Apps (или же Web Apps) — это удобный способ добавления веб-приложения прямо в интерфейсе Telegram. Используя JavaScript, становится возможным создавать бесконечное множество интерфейсов, которые смогут заменить полноценный веб-сайт и привычные мобильные приложения.

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

#telegram #miniapp #javascript

Область видимости в JavaScript

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

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

Более детально узнать, что это такое и на примерах рассмотреть то, как работает эта область, вы сможете в этой статье.

#javascript

10 библиотек JavaScript, которые можно забыть в 2025 году

Когда начинаешь изучать какое-то новое направление, например программирование на JS, то глаза могут разбегаться от обилия нюансов, инструментов и библиотек. Новичку может быть сложно понять на что стоит обратить внимание, а что можно смело пропускать.

Например, jQuery — когда-то крайне популярная библиотека, которую до сих пор можно встретить в старых проектах, сегодня уже не актуальна и тратить время на изучение её возможностей нет никакого смысла. И таких библиотек много. О десяти из них мы рассказали в новой статье.

#javascript

Флексим и создаём GUI на Python с веб-технологиями рендеренига

В этом нам поможет Flexx — набор инструментов, сделанных на чистом Python. Он позволяет писать код графических интерфейсов прямо на питоне и на ходу генерировать JavaScript с помощью транслятора PScript.

Узнать подробности о возможностях и изучить инструкцию можно на странице проекта.

#инструменты #python #javascript #gui

Отладка JavaScript в Chrome DevTools для начинающих фронтендеров

Поиск и исправление ошибок в JS может быть весьма ресурсозатратным мероприятием. Новичкам этот процесс может показаться неподъёмным камнем.

Но только до знакомства с отладкой в инструментах разработчика, встроенных в браузер. О ней вы узнаете в этой статье. Причём не о привычной всем console.log, а куда более эффективной альтернативе.

#javascript #qa

Области видимости в JavaScript

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

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

А более детально узнать что это такое и на примерах рассмотреть то, как работает эта область, вы сможете в этой статье.

#javascript

Изучаем JavaScript, создавая игру

Погрузитесь в JavaScript, создавая 2D-игру с нуля. Этот бесплатный курс поможет вам освоить основы программирования через практику.

#javascript #gamedev

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

#javascript #шпаргалка

​Создаём портфолио в формате 2D-игры на JavaScript

Это один из креативных способом показать свои скилы и впечатлить рекрутера/тимлида/интервьюера.

Гайд по разработке: https://youtu.be/wy_fSStEgMs
Демо: https://jslegenddev.github.io/portfolio/
Исходники: https://github.com/JSLegendDev/2d-portfolio-kaboom

#javascript

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

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

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

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

LocalStorage в JavaScript: полный гид для ваших первых проектов

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

В этом гайде вы узнаете:

— как правильно записывать и читать данные (setItem, getItem);
— зачем нужно удалять ненужные ключи и очищать localStorage;
— как хранить не только строки, а полноценные объекты через JSON;
— и как проверить объём хранилища и обработать ошибки переполнения.

#javascript #веб

Алгоритмы и структуры данных на JavaScript

Если вы пишете код на JavaScript и хотите глубже понять, как эффективно обрабатывать данные и решать классические задачи — этот обзор даст ясное представление. Вы изучите популярные алгоритмы поиска, сортировки, кеширования, обхода графов, деревьев и рассмотрите основные структуры данных: массивы, списки, деревья, стек, очередь, set и map.

#javascript #алгоритмы #структурыданных

Что такое прототипное наследование в JavaScript?

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

В других языках (например, Java или C#) есть классы — «шаблоны», по которым создаются объекты, и у которых можно наследовать методы и свойства.

В JavaScript всё устроено немного иначе — он изначально не был «классовым», и вместо этого использует **прототипы**.

В JavaScript **каждый объект внутри себя хранит ссылку на другой объект — прототип**.

Если вы обращаетесь к свойству или методу, которого нет в текущем объекте, JavaScript заглянет в его прототип. Не нашёл там? Пойдёт дальше — в прототип прототипа.

Эта цепочка называется **прототипной цепочкой**.

const animal = {
  eats: true
};

const rabbit = {
  jumps: true
};

rabbit.__proto__ = animal;

console.log(rabbit.jumps); // true (есть в самом объекте)
console.log(rabbit.eats);  // true (нашёлся в прототипе)

Здесь rabbit не хранит eats напрямую, но когда вы к нему обращаетесь — движок пойдёт по цепочке в animal и найдёт.

**Почему это удобно?**

1. Можно «раздавать» общие методы всем объектам через прототип — не дублируя код.
2. Можно строить целые цепочки наследования без классов.
3. Всё это гибко и динамично.

Сейчас в JavaScript уже появились **классы**, но внутри они всё равно реализованы через прототипы — просто это более привычный синтаксис для тех, кто приходит из других языков.

Так что прототипное наследование — это способ объектов «подглядывать» в другие объекты за свойствами и методами. И именно так устроен весь JavaScript под капотом.

#javascript

new Date("wtf") — квиз по датам, который взорвёт вам мозг

Если вы хоть раз пытались работать с датами в JavaScript, то уже знаете — там творится какая‑то магия и абсурд вперемешку. Именно об этом и напоминает этот квиз.

Он предлагает вам проверить (и заодно посмеяться над) своим знанием (или незнанием) того, как JavaScript работает с датами и временем. Здесь странные кейсы и неожиданные результаты. Будет и полезно, и весело — особенно если вы уже пару раз рвали волосы из‑за Date.

Попробуйте пройти и проверьте: кто вы — мастер календарей или жертва часовых поясов.

#javascript #квиз

Hack Frontend: тренируйтесь для собеседования с огоньком

Если вы мечтаете прокачать фронтенд‑скиллы и спокойно заходить на тех‑интервью — обратите внимание на Hack Frontend. Это платформа, где вы сможете отточить навыки и подготовиться к успешному собеседованию.

Что внутри:

— Современный фронтенд‑стек и лучшие практики.
— Задания, которые реальнее всего встретить на интервью.
— Построено для реализации — вы сразу тренируетесь на реальных примерах, не просто читаете теорию.

#фронтенд #тренажер #javascript

Как создать настольное приложение с помощью Electron. Руководство для начинающих

Эта статья в первую очередь будет полезна веб-разработчикам. Electron позволяет превращать проекты, написанные с помощью HTML, CSS и JavaScript в полноценные приложения для разных платформ. Многие такие приложения вы знаете: Skype, Discord, ваш любимый VS Code и так далее.

Как создать такое же приложение, вы можете узнать в этом руководстве.

#javascript #electron #руководство

Пишем игру на JS/TS и развиваем навык работы с кодом

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

Сохраните, чтобы не потерять: https://tproger.ru/articles/pet-proekt-pishem-igru-na-js-ts-i-razvivaem-navyk-raboty-s-kodom/

#typescript #javascript #петпроект

Криптобот для Telegram Mini Apps: как собрать за выходные и не сломать мозг

Задумывались, как сделать обмен крипты простым и быстрым прямо в Telegram? Пользователь нашего сайта задумался и даже реализовал идею. Он сделал мини апп для телеги и показал весь путь — от настройки бота через BotFather до интеграции с веб-приложением. А ещё поделился лайфхаками по архитектуре, выбору стека и тонкостям UX, чтобы даже новичок справился.

Не упустите возможность узнать из первых уст обо всех подводных камнях и рекомендациях. Подробности по ссылке.

#telegram #javascript