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

Yandex B2B Tech разработал ИИ-агента для аналитики данных «Нейроаналитик»

Нейроаналитик скоро появится в Yandex DataLens. Кроме того, что он ускоряет подготовку отчётов примерно на 30%, новый ИИ-ассистент умеет:

— отвечать на запросы на русском языке
— перестраивать графики и таблицы
— искать скрытые закономерности в данных
— обновлять визуализации по текстовым запросам
— проверять гипотезы и находить инсайты
— редактировать сложные отчёты

Внутри Яндекса агент уже работает: команды Яндекс Еды анализируют воронку регистрации курьеров, а Yandex Cloud готовит отчёты в пару кликов. Для внешних пользователей Нейроаналитик (облако и on-premises) заработает в сентябре 2025 года, но записаться в лист ожидания можно уже сейчас!

Реклама. ООО «Яндекс.Облако», ИНН 7704458262, erid: 2SDnjeWgFgr

Пишем игру на 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 #фронтенд

Привет, на связи Tproger!

Мы хотим лучше понять нашу аудиторию и её интересы. Помогите нам — пройдите небольшой опрос по ссылке.

Спасибо и отличного дня!

Вопросы с собеседований: что такое специфичность CSS-селекторов и как она работает?

Типы селекторов расположены по возрастанию специфичности:
— Селекторы типов элементов (например, h1) и псевдоэлементов (например, ::before).
— Селекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдоклассов (например, :hover)
— Селекторы идентификаторов (например, #example).

Универсальный селектор (*), комбинаторы (+, >, ~, ' ') и отрицающий псевдокласс (:not()) не влияют на специфичность. Но селекторы, объявленные внутри :not(), влияют.

Стили, обьявленные в элементе (например, style="font-weight:bold"), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

Расчёт специфичности:
— тег и псевдоэлемент имеют специфичность 0001;
— класс, псевдокласс, атрибут — 0010;
— id имеет специфичность 0100;
— инлайновый стиль имеет приоритет 1000.

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

Nuxt JS - Vue + SSR: вводный курс за 70 минут

Nuxt JS — это фреймворк, который ещё больше упрощает создание веб-приложений с помощью Vue.js. В этом небольшом видео вы изучите основы работы с технологией и сможете создавать свои собственные проекты на Vue с сервер-сайд рендерингом.

#видео #nuxtjs #vue

kiro.dev | IDE для вайб-кодинга

Убийца Cursor по версии Amazon, на сей раз с поддержкой MCP (Model Context Protocol — «щупалец» LLM). Покуда проект на стадии Preview, многие фичи достаются задаром. Если вовремя подбирать такие аналоги, наверное, можно и не платить никому по $20 ежемесячно 😜

Цена: пока бесплатно
Сайт проекта
@prog_tools
💊 — Если после этого нужна таблетка

Друзья, пора забыть о JS. И вот аргумент:

WHIP — стандартный протокол общения WebRTC приложений

WebRTC — это протокол удалённой передачи аудио и видео в реальном времени, сконструированный специально, чтобы работать в ненадёжных сетях без специального оборудования или ПО, прямо из браузера. Без него ваши привычные сервисы для созвонов просто не работали бы как надо.

В этой статье вы узнаете не только подробности о WebRTC, но и познакомитесь со стандартами WHEP/WHIP.

#webrtc

Возможно, что эти HTML- и CSS-ошибки есть в вашем коде

Казалось бы, основные грабли веб-верстки давно известны, но ловушки ждут в деталях — от неожиданных эффектов font-size в rem и px до проблем с outline и адаптацией стилей к accessibility.

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

https://habr.com/ru/companies/ruvds/articles/928018/

Я вот не задумывался о некоторых нюансах, описанных в статье. А вы?

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

Эффект пикселизации с помощью CSS и JS

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

Код можно посмотреть здесь.

#codepen