Автоматический деплой 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-javanoscript/

#javanoscript

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

Этот милый 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5 VPS-хостингов в 2025, которые держат нагрузку

Сегодня любой рабочий или MVP-проект может столкнуться с пиками нагрузки, которые нужно выдержать. Это касается как физических, так и виртуальных серверов. Поэтому важно уметь правильно выбрать подходящий.

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

#хостинг #vps

Создание приложения для macOS с React Native — пошаговое руководство

Хотите научиться создавать продвинутые приложения для macOS?

В курсе по ссылке вы узнаете, как с помощью React Native разработать приложение для поиска и управления книгами, используя Google Books API.

Вы также интегрируете ИИ для создания автоматических аннотаций и освоите навигацию и управление состоянием.

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

https://youtu.be/-kizZZrh1zM?si=aObldPOK4RWkjGku

#видео #reactnative

Полный курс Tailwind CSS v4 с нуля

Если вы уже знакомы с HTML и CSS и готовы освоить Tailwind — этот видеокурс идеален. В нём собраны все ключевые темы — от установки и настройки до работы с утилитами, адаптивностью и тёмной темой. Более 20 важных тем, включая Flex, Grid, фильтры и новые возможности версии v4 — всё доступно в формате одного ролика.

#tailwindcss #фронтенд #видео

Навыки фронтендера, которые не заменит ИИ

AI автоматизирует всё — от генерации кода до тестов. И многое не без оснований переживают о своём будущем. Кто-то считает, что ИИ заменит людей, а другие препочитают думать, что людей заменяет люди, использующие ИИ. Оба варианта выглядят не слишком привлекательно.

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

#фронтенд #ии

Что новенького есть в CSS в 2025 году

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

В этой статье автор разобрал актуальные фишки CSS, о которых вы могли не знать.

#css #фронтенд