#простымисловами: Как устроен и зачем нужен async/await

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

async/await решает эту проблему. Это синтаксис, который позволяет писать асинхронный код в привычной пошаговой форме, но под капотом он остаётся неблокирующим.

Как это работает

Чтобы использовать async/await, достаточно объявить функцию с ключевым словом async. Это значит, что она всегда вернёт промис. Внутри такой функции можно применять await, чтобы дождаться завершения промиса перед выполнением следующей инструкции.

Пример:

async function fetchData() {
  const response = await fetch('/data.json');
  const data = await response.json();
  console.log(data);
}

Такой код легко читать и поддерживать — он идёт по шагам и не содержит вложенных .then() и .catch().

Преимущества по сравнению с коллбэками и промисами:

— Нет вложенных функций и «пирамид ада» из коллбэков.
— Ошибки можно обрабатывать привычным try/catch, как в синхронном коде.
— Логика программы остаётся линейной и предсказуемой.

Коллбэки и промисы по‑прежнему работают и подходят для некоторых случаев, но async/await значительно облегчает написание и поддержку асинхронного кода.

Если вы всё ещё используете цепочки .then() или длинные коллбэки — попробуйте переписать их с async/await. Код станет чище, а ошибки — легче отлавливать.

#javascript

Честный ресёрч найма в IT прямо с рынка

Вместе с Proglib мы разобрали, почему айтишники реально уходят с работы, по каким признакам вычислить токсичный коллектив и какие HR-трюки бесят разработчиков больше всего. Если ещё не читали — советуем это исправить❤️

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

Сохраняйте и кидайте коллегам!

Ngrok: безопасный туннель к локальному серверу за пару секунд

Когда нужно показать локальный проект клиенту или протестировать вебхук от стороннего сервиса, поднимать полноценный сервер в интернете — избыточно. Ngrok решает эту задачу: за секунды пробрасывает туннель из интернета к вашему локальному серверу, выдавая публичный URL. Поддерживает HTTPS, защищённые токены, инспекцию трафика и работает на всех популярных ОС.

Так, вы можете безо всякого труда прямо в VS Code расшарить свой localhost, чтобы похвастаться другу или обсудить детали с клиентом.

#бэкенд #инструменты

Решаем судоку на JavaScript: хэш‑карты + рекурсия

Как заставить JavaScript разгадывать судоку? В статье показан простой и понятный подход: доска представляется в виде двумерного массива, а для проверки допустимости ходов используются хэш‑карты. Решатель построен на рекурсивном переборе возможных значений с откатом, пока не найдётся правильное заполнение всей сетки.

#javascript #алгоритмы

6 технологий для хранения данных в браузере

Данные пользователя можно хранить не только на сервере. В статье разобраны 6 актуальных способов сохранить информацию прямо в браузере: от привычных cookies и localStorage до более продвинутых IndexedDB, OPFS и WASM SQLite.

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

#фронтенд #браузер

Когда решил быстро навайбкодить что-нибудь

Как сделать кастомный Semi Donut Chart с помощью SVG

Semi Donut Chart — одна из форм представления отчётов в виде полукруглой диаграммы. Используется в том случае, когда важна не математическая точность, а наглядность.

Если вы хотите сделать интересный Semi Donut Chart без использования библиотек по типу Chart.js, то этот туториал для вас.

#vue #html #charts

CSS Loaders: готовые анимации загрузки без JS

Когда нужно быстро добавить симпатичный индикатор загрузки — не обязательно писать его с нуля. На css-loaders.com собраны десятки готовых CSS‑анимаций: спиннеры, полоски, точки, волны и даже креативные 3D‑эффекты. Все варианты работают без JavaScript и легко кастомизируются под ваш дизайн. Просто копируйте код и вставляйте в проект.

#фронтенд #css #ui

Кроссплатформенные приложения на Python: весь путь от API до десктопа и веба

Не обязательно учить полдюжины языков и городить велосипед, чтобы собрать работающий кроссплатформенный продукт. В этой статье автор делится практическим опытом: как на одном только Python собрать backend на FastAPI, фронтенд на Flet, задеплоить всё это в облако и собрать под десктоп и веб.

По дороге — много интересных наблюдений и подводных камней: чем Flet радует, а где его кроссплатформенность пока только на бумаге, почему простые вещи лучше делать «без заморочек», а фанатам стоит готовить десятки гигабайт SDK и терпение.

Если вы уже освоились с Python и хотите попробовать собрать свой первый «всё‑в‑одном» проект, материал очень пригодится — от шаблонов кода до тонкостей деплоя и сборки.

А вы бы рискнули собрать свой API и фронт на Python, или сразу пошли бы во Flutter?

❤️ — «да, попробую»
🗿 — «лучше Flutter»!

#python #flet #fastapi #кроссплатформенность #разработка

От React веет безумием, но все об этом молчат

Многие привыкли считать React эталоном фронтенда. Но если приглядеться, он вызывает много вопросов: рекурсивные хуки, запутанные деревья состояний, неочевидное смешение UI и побочных эффектов в одном месте.

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

Что вас больше всего раздражает в React-проектах? Расскажите в комментариях!

#фронтенд@tproger_web #react@tproger_web

Что такое enterkeyhint и зачем он нужен?

На смартфонах и планшетах клавиша Enter на виртуальной клавиатуре по умолчанию просто показывает «Enter» или «Go». Но иногда полезно дать пользователю понять, что именно произойдёт при нажатии: отправится форма, будет выполнен поиск, добавится новая строка…

Атрибут enterkeyhint — это способ подсказать браузеру, какую подпись показать на клавише Enter на экранной клавиатуре.

Работает в <input> или <textarea>.

Пример:

<input type="text" enterkeyhint="search" /> //На экранной клавиатуре вместо обычного Enter отобразится «Поиск».

Какие значения можно указать:

— enter — стандартная клавиша Enter
— done — завершить ввод
— go — перейти
— next — перейти к следующему полю
— previous — вернуться к предыдущему полю
— search — выполнить поиск
— send — отправить

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

#html #простымисловами

Partial Keyframes: анимация в CSS без лишней работы

Иногда нужно анимировать только одно свойство, оставив остальные нетронутыми. В статье объясняется техника partial keyframes, которая позволяет писать ключевые кадры для одного свойства, оставляя, например, изначальное значение нетронутым. Это упрощает код и делает анимации более гибкими. С примерами кода и визуальными иллюстрациями — всё понятно даже тем, кто только начинает осваивать CSS‑анимации.

#фронтенд #css #анимация

А у вас какая любимая IDE?

Astro: как сделать сайт молниеносным и приятным

Думали, что фронтенд сегодня — это обязательно килобайты JS и бесконечные SPA? Необязательно. В видео автор показывает, как с помощью Astro и архитектуры островов собрать адаптивный, быстрый и красивый сайт: с Tailwind, React или Vue-компонентами там, где нужна интерактивность, и минимальным JavaScript или максимальным TypeScript в остальном.

Пошагово: от создания проекта до интеграции динамических роутов, работы с серверными данными и оптимизации загрузки. И всё это — за один вечер.

#фронтенд #astro #оптимизация

SEO от А до Я для веб-разработчиков

В этом ролике рассмотрели основные принципы SEO-оптимизации для веб-разработчиков. Основы SEO-оптимизации, мета теги, чпу, open graph seo, canonical ссылки, sitemap, robots.txt, микроразметка, краулинговый бюджет, ssr vs spa.

#spa #seo

6 сервисов для запуска рекламы в РФ — быстро и выгодно

Если вы запускаете личные продукты, сайд‑проекты или SaaS-сервис — знать, куда пристроить рекламу, чтобы привлечь клиентов без переплат, важно. В свежем материале мы собрали шесть лучших платформ для запуска рекламы в РФ с понятной аналитикой и удобным интерфейсом для веб-разработчиков и команд.

Уже запускали рекламу? Сколько потратили и что выбрали — поделитесь с нами в комментариях.

#маркетинг

Что такое прототипное наследование в 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

Figma во всю готовится к выходу iOS 26

Команда выпустила огромную библиотеку ассетов в стиле Liquid Glass. Там всё, что может вам потребоваться: кнопки, меню, обои и прочее.

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

#дизайн #figma