Кто объяснит почему не сработает, у того снизится количество багов в коде на 20%. Отвечаю

Учимся работать с DOM в JS

Урок для начинающих, который поможет вам разобраться, как работать с элементами DOM-дерева в JavaScript. За полчаса вы пройдёте 26 упражнений, где вы научитесь:

— создавать и удалять элементы на нашей странице;
— динамически создавать HTML-разметку;
— добавлять классы к элементам;
— использовать обработчики событий на созданных элементах
и многому другому.

Смотреть можно здесь или на YouTube.

#видео #javascript #начинающим

Разница между @media и @container

Оба эти инструмента помогают сделать сайт удобным на разных экранах, но реагируют на разное.

@media — смотрит на экран

Тут меняются стили в зависимости от размера окна браузера. Например, на большом экране карточки стоят в ряд, а на мобильном одна под другой.

@media (max-width: 600px) {
  .card {
    font-size: 14px;
  }
}

Тут если окно меньше 600px, текст уменьшается.

@container — смотрит на блок, внутри которого элемент

Иногда размер окна большой, но карточку зажали в узкую колонку. Тогда @media не поможет — ведь окно-то широкое. Но тут спасает @container.

Сначала говорим контейнеру, что он может влиять на детей:

.card-container {
  container-type: inline-size;
}

А теперь следим за его размером:

@container (max-width: 400px) {
  .card {
    font-size: 14px;
  }
}

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

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

Даже грибки не спят, чтоб успеть к дедлайну. Будь как грибки

ИИ-агент на PHP

Не знаю как вы, а я, когда думаю о том, на чем сделан тот или иной ИИ-проект, сразу думаю про JS и Python. Но никак про PHP. Хотя для него есть хороший фреймворк, который даёт те же возможности, что и другие языки. Называется он Neuron — первый enterprise‑ready агентный фреймворк на PHP.

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

#php #ml

— Насколько хорошо вы умеете работать с CSS?
— Настолько, что рисую на CSS картины.
— Что?
— Что?

Целый аккаунт с похожими работами: https://twitter.com/asyrafhussin4

#css @tproger_web

5 вещей, которые нужно знать фронтенд-разработчику про Docker

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

Хотя Podman и наступает на пятки Docker, второй всё ещё остаётся стандартом индустрии. Поэтому в этой статье мы пройдёмся по основам: от создания образа и управления контейнерами до настройки полноценного стека с бэкендом при помощи Docker Compose.

#docker

Предатель получается

Вышла версия Jeasx 2.1.0 — серверного фреймворка на основе JSX и Fastify

Этот фреймворк объединил простоту JSX и удобство SSR без необходимости использовать кучу разных инструментов. Он использует современные HTML и CSS, дополняя их асинхронным JSX на стороне сервера.

В последнем обновлении он получил:

— Node 24 (LTS) по умолчанию,
— улучшенный процесс заполнения среды приложения,
— и поддержку файлов .env.js.

Пробовали этот фреймворк?

#новости #ssr #jeasx

Сильно продающий баннер

Кладбище сайтов: цифровой некрополь эпохи веб 2.0

Вы вспоминаете старый форум, забавную флеш-игру или сайт любимой группы. Кликаете по сохранённой в закладках ссылке или находите адрес в поиске. В ответ — ошибка 404. Страница не найдена. Такая ситуация знакома каждому. Десятки тысяч сайтов исчезли — их больше нет в доступе.

Что происходит с веб-наследием? Почему сайты превращаются в цифровых зомби или вовсе исчезают без следа? Можно ли вернуть их из небытия? И кто за всем этим стоит? Это расследование проведёт вас по лабиринтам старых мёртвых доменов и покажет реальную картину интернет-кладбища.

CSS лифт: конечный автомат на CSS для навигации между этажами

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

Рекомендую изучить, если хотите лучше понимать всю мощь CSS.

#css

Во-первых, это красиво

Автор этого codepen-проекта создал реально красивую анимированную кнопку закладки. Может вы и не найдёте ей применения у себя, но, как минимум, полюбоваться ей приятно.

#codepen

5 трендов в технической веб-разработке, за которыми стоит следить в 2025 году

Несмотря на то, что ИИ сильно меняет подход к разработке, современные тренды связаны не только с ним. Например, разработчики заново открывают для себя ванильный JS, отказываясь от использования фреймворков там, где без них можно обойтись. Это даёт и более глубокие знания, и больший контроль над кодом.

Также популярность набирают кастомные портфолио с Three.js, навыки обеспечения безопасности, локальные ИИ-помощники и использование Low-Code и No-code платформ. Подробнее обо всём в статье.

Вот непонятно — ему стало лучше или хуже. Ваши версии?

Как с помощью JavaScript убрать ботов, чтобы A/B-тесты были точнее

Боты сильно могут искажать реальные данные в любой сфере — будь то каналы в Telegram (знаю по себе) или статистика сайта. Поэтому важно иметь возможность исключить этих ботов из общей выборки.

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

#javascript

С кем знакомятся типичные программисты: 2D-тян или живая девушка?

Согласно недавним исследованиям Vantage Point Counseling Services, треть американцев хотя бы раз состояла в романтических отношениях с ИИ. Появилось даже приложение Loverse для виртуальных знакомств, где вместо реальных людей роль партнёров выполняют чат-боты с искусственным интеллектом.

Мы решили провести своё исследование и выяснить где и с кем сегодня знакомятся пользователи стран СНГ. Пожалуйста, пройдите наш небольшой опрос. Это поможет нашему исследованию.

Пройти опрос.

Только посмотрите, что творит эта библиотека

TypeGPU — это модульный и открытый набор инструментов для WebGPU с расширенным выводом типов и возможностью писать шейдеры на TypeScript. То есть вы можете использовать возможности GPU для вашего сайта, не погружаясь в нюансы низкоуровневого API.

Ключевая фишка — директива 'use gpu', которая компилирует JS в WSGL для запуска на графическом процессоре.

Подробнее о библиотеке можно почитать здесь.

#javascript #typescript #библиотека