Решаем судоку на 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

JSON в веб‑разработке: как работать правильно и не ломать данные

JSON — один из самых популярных форматов обмена данными между клиентом и сервером, но даже опытные разработчики порой совершают с ним досадные ошибки.

В статье собраны советы и примеры: как парсить и сериализовать данные без потерь, избегать ловушек с undefined и циклическими ссылками, и что учесть при работе с большими файлами.

Признавайтесь, косячили с JSON?

#фронтенд #бэкенд #json

Apple Lisa в браузере: почувствуйте революцию интерфейсов 80‑х

В 1983‑м Apple выпустила Lisa — первый коммерческий компьютер с графическим интерфейсом. Тогда он стоил почти $10 000 и казался фантастикой.

Теперь ту самую Lisa можно запустить прямо в браузере: эмулятор на чистом JavaScript воспроизводит интерфейс до мелочей. Всё как в оригинале: при перетаскивании движется только рамка, потому что мощности «железа» не хватало, чтобы рендерить содержимое в реальном времени.

Сейчас проект ещё в альфе, но уже отлично показывает, какой была революция интерфейсов 80‑х и первый графический опыт на ПК.

Подробности о проекте и ссылка на эмулятор здесь.

#историяit #apple #javascript

Что работает на лендингах для разработчиков в 2025: разбор 100+ страниц

Evil Martians проанализировали больше сотни лендингов девтулов и собрали рецепт, который действительно привлекает внимание разработчиков. В статье — наглядные примеры, какие паттерны заголовков, CTA и иллюстраций срабатывают, как оформлять секции «features» и «community» так, чтобы не потерять доверие и не выглядеть как маркетинговый шум. Короче, это то, что сегодня продаёт инструменты, которые выбираете вы

#дизайн #маркетинг #devtools