​​5 архитектурных ошибок, которые мы совершаем при старте проектов

Многие из нас с головой уходят в реализацию идеи, не задавая себе главный вопрос: а что будет, когда проект вырастет? 

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

В статье Tproger 5 самых частых архитектурных ошибок, которые мешают проектам расти и развиваться.

#основы
@zen_of_python
🙊 — Если сам так писал

ECMAScript 2025: что нового появилось в JavaScript

Очередная версия языка уже одобрена и теперь настала пора познакомиться с новинками этого года. В статье — обзор ключевых фич ECMAScript 2025, которые действительно пригодятся в работе: импорт атрибутов, Promise.try(), экранирование регулярок, помощники итераторов и многое другое.

#javascript #фронтенд #es2025

Подключаем оплату на сайте за 7 шагов — просто, быстро и безопасно

Если вы — веб‑разработчик, добавляющий оплату в проект или SaaS-продукт, этот материал станет настоящим гайдом. В нём пошагово рассказано, как выбрать платёжный агрегатор, пройти верификацию, получить API-доступ и интегрировать форму оплаты без боли и путаницы.

Вы узнаете о:

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

#бэкенд #платежи

Автоматический деплой Next.js на VPS с CI/CD + E2E тесты

Наконец-то появился видеоурок, который показывает всю мощь Next.js не на теоретических задачах, а на вполне «боевом» проекте. Здесь автор показал, как настроить от начала до конца деплой приложения на Next.js на собственный VPS: от базовой конфигурации до автоматизации с GitHub Actions, включая настройку CI/CD и написание тестов через Jest и Playwright.

Полный стек проекта: React, Next.js app router, FSD архитектура, postgresql, prisma, zod, @tanstack/react-query, react-hook-form, Tailwind CSS, shadcn/ui, next-auth, jest , @testing-library/react, playwright

#фуллстек #nextjs

Создание доступных табов пользовательского интерфейса в JavaScript

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

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

https://blog.logrocket.com/build-accessible-user-interface-tabs-javascript/

#javascript

Мяу-мяу пианино

Этот милый codepen-проект предлагает вам поиграть на «мяукающем» пианино. Нажимать на клавиши вы будете не каким-нибудь курсором, а кошачьей лапкой, извлекая из инструмента соответствующие звуки.

Попробовать поиграть и посмотреть код проекта можно тут:

https://codepen.io/laurenvast/pen/jOrWXej

#codepen

CSS‑функция scroll() — новый способ задавать позиционирование

Вместо того чтобы вычислять координаты через JavaScript и вручную высчитывать положение пользователя на странице для создания полосы прокрутки, теперь можно задать позицию элемента прямо в CSS всего лишь с помощью scroll(). Эта функция — часть CSS Anchor Positioning и позволяет точно управлять тем, как элемент ведёт себя в зависимости от положения якоря.

Здесь вы узнаете, как работает scroll(), какие у неего параметры и как он вписывается в современную систему позиционирования.

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

ReactBits — большая библиотека сниппетов и анимаций для React

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

Посмотреть все эффекты можно здесь: https://reactbits.dev/components/circular-gallery

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

Скелетон: как сделать загрузку визуально приятной

Для загрузки контента на сайте или в приложении требуется время — иногда долисекунд, а иногда гораздо больше. Во втором случае нужно дать пользователю понять, что всё идет по плану, сайт не сломался и контент вот-вот будет. Для этого используются скелетоны — анимированные заглушки вместо контента до момента его загрузки. Они показывают не только, что идет загрузка, но и то где и даже какой контент будет загружен — картинка или текст. Это воспринимается лучше, чем обычный спиннер и делает интерфейс чище.

Я нашёл для вас гайд, как сверстать такой скелетон для карточки статьи за несколько минут. Демонстрируется HTML-код и CSS-стили с переменными, чтобы сразу получать плавную анимацию и адаптивную структуру без кучи лишнего кода.

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

Как работает CSS Flexbox: элегантная система макетов с визуальным разбором

Для новичков в вебе стоит сказать, что CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. О самой технологии можно прочитать здесь.

Мы же решили объяснить возможности CSS Flexbox с использованием гифок, чтобы получилась настоящая наглядная flex-шпаргалка. Что получилось, можно увидеть в статье: https://tproger.ru/translations/how-css-flexbox-works

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

Зато порог входа низкий

Где жить знаниям: 6 альтернатив Notion для команд

Чем больше знаний накапливается у команды, тем важнее становится наличие удобного инструмента для их хранения. Раньше многие пользовались Notion, но из-за санкций им стало сложнее пользоваться. Да и подходит он не всем. Где-то тормозит, где-то — неудобен для технарей.

В статье мы собрали 6 альтернатив, которые подойдут для разных сценариев и команд:

— если нужна база под Markdown и git;
— если хочется вики с правами и тегами;
— если нужен локальный и безопасный вариант.

#инструменты

Функциональное программирование от А до Я на примере JavaScript: монады, функторы, каррирование, композиция

Если интересовались функциональное программированием, это видео для вас. В нем разобрали декларативность, чистые функции и сайд-эффекты, иммутабельность (неизменяемость), функции первого класса, функции высшего порядка, композицию/конвейер, частичное применение и каррирование, контейнеры, функторы и другие темы.

Сохраните, чтобы не потерять: https://www.youtube.com/watch?v=ScgmlDb5ed4

#javascript #лучшиепрактики

MetaExplorer — наглядный просмотр мета-тегов любого сайта

Этот инструмент показывает, как сайт выглядит для соцсетей, мессенджеров и поисковых систем. Работает прямо в браузере в качестве расширения. Просто нажмите на иконку и получите наглядную раскладку всех мета-тегов: title, description, Open Graph, Twitter-карточки, favicons и прочее. Также показывает проблемы: битые ссылки, дубли, проблемы с доступностью и так далее.

Если хотите убедиться, что ваш сайт работает как надо с точки зрения SEO, то стоит попробовать.

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

Инструменты, которые снимают рутину с команды разработчиков и помогают управлению

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

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

Подробнее в подборке.

#инструменты

Когда попросил нейронку навайбкодить тебе сайт:

Какой российский хостинг выбрать в 2025 году: подборка с примерами и нюансами

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

В этой подборке мы собрали актуальных российских провайдеров на любой случай: для сайтов на CMS, pet‑проектов, корпоративных порталов, бэкапов и даже VPS с ручной настройкой. У каждого — свои условия, бонусы и ограничения.

#подборка #хостинг