Что такое 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

Front-End Checklist: не забудьте про важные мелочи перед релизом

Этот инструмент спасёт ваши нервы перед запуском проекта. На frontendchecklist.io собран список обязательных пунктов для фронтенд-разработчика: SEO, доступность, производительность, лучшие практики, безопасность и так далее. Всё разбито по категориям и уровням приоритета, так что можно пройтись по чеклисту и убедиться, что ничего не упущено.

#фронтенд #инструменты

Почему push() может навредить вашему коду — и как писать лучше

На первый взгляд безобидный метод массива push() может испортить данные, запутать логику и вызвать баги. Особенно это заметно в React и других реактивных средах. В статье — наглядно и с примерами: чем опасна мутация массивов, как это приводит к скрытым ошибкам и какой подход используют опытные разработчики вместо push().

А вы отказались от push() или всё ещё используете?

#javascript #фронтенд

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

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

Что внутри:

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

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

Пользуемся ИИ ИИ без регистрации и VPN

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

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

А что предпочитаете вы?

❤️ — ChatGPT
👍 — Claude
😂 — Gemini

#chatgpt #claude #ИИ

Псевдоэлемент vs Псевдокласс: Практические советы для реальных проектов

Что такое псевдоэлемент?
Псевдоэлемент позволяет добавить виртуальный элемент внутрь выбранного, не изменяя HTML-разметку. Это похоже на добавление штампа к документу: элемент остаётся прежним, а его оформление дополняется декоративными деталями, например, первой буквой абзаца или декоративной линией.

Пример:

p::first-letter {
  font-size: 2em;
  color: red;
}

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

Псевдоэлементы бывают следующими:

— ::before — добавляет контент перед содержимым элемента.
— ::after — добавляет контент после содержимого.
— ::first-letter — стилизует первую букву элемента.
— ::first-line — оформляет первую строку текста.
— ::grammar-error — позволяет оформить часть документа, содержащую грамматическую ошибки, подсвеченную браузеров.
— ::marker — стилизует поле маркера пункта, как маркированного, так и нумерованного.
— ::selection — соответствует части документа, которая была выбрана.
— ::spelling-error — как и ::grammar-error выделяет ошибку, отмеченную браузером, но уже орфографическую

Что такое псевдокласс?
Псевдокласс меняет внешний вид элемента в зависимости от состояния, как будто элемент «перевоплощается» в зависимости от вашего взаимодействия с ним. Это работает, когда пользователь наводит курсор, активирует элемент или переводит его в фокус.

Пример:

a:hover {
  color: green;
}

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

Псевдоклассов очень много. Вот некоторые популярные виды псевдоклассов:
— :hover — применяется при наведении курсора.
— :active — активируется во время нажатия.
— :focus — используется, когда элемент находится в фокусе (например, форма ввода).
— :visited — для посещённых ссылок.
— :not() — позволяет исключить элементы из селектора.

Когда использовать каждый вариант?
Псевдоэлементы добавляют декоративные или вспомогательные элементы визуально, не нарушая структуру HTML. Если вам нужно, чтобы страница выглядела ярче или содержала дополнительные визуальные подсказки (например, стрелочки, рамки, иконки), выбирайте псевдоэлементы.

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

Важные моменты и подводные камни
При использовании этих инструментов важно учитывать совместимость браузеров: некоторые старые версии могут не поддерживать все возможности.

Также будьте внимательны к вопросам доступности: добавляемый декоративный контент не должен нарушать читаемость страницы или мешать пользователям с ограниченными возможностями. Кроме того, чрезмерное использование может усложнить поддержку кода, поэтому старайтесь использовать именно те варианты, которые действительно улучшают интерфейс и не дублируют функционал HTML.

Как вы применяете псевдоэлементы и псевдоклассы в своих проектах? Поделитесь опытом в комментариях!

#простымисловами #фронтенд #css

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

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

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

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

«Разработку не вели...» с Леонидом Каневским

Асинхронная итерация по-новому: как работает Array.fromAsync в JavaScript

Асинхронные задачи — это обычное дело во фронтенде. Но лаконичного способа обработать их сразу пакетами до недавнего времени не было. Array.fromAsync — свежий инструмент для простого и элегантного обхода промисов в массивах.

В статье — нюансы работы метода, примеры из жизни и сценарии, где он может здорово сэкономить нервы и строчки кода.

#javascript #фронтенд