🧑‍💻 Пошаговый гайд для фронтенд-разработчика

Ниже описали первичные этапы разработки API, а полностью гайд читайте здесь 👈

✳️ Создание проекта:

npx create-next-app@latest --api

Флаг --api автоматически добавит файл route.ts в директорию app/ с примером создания API-эндпоинта.

✳️ Различия между Pages Router и App Router:

— Pages Router (pages/api/*) — старый метод, использует Node.js API.
— App Router (по умолчанию) — новый метод, использующий стандарты Web API (Request/Response).

Почему новый лучше? Он работает на веб-API, а не на специфичных для Node.js инструментах; упрощает изучение, снижает зависимость от Express-подобных решений

✳️ Основные кейсы использования API в Next.js:

— Публичный API для разных клиентов (веб, мобильные приложения).
— Прокси к бэкенду — скрытие внутренних сервисов за единым API.
— Прием вебхуков (например, Stripe, GitHub, Twilio).
— Аутентификация — работа с токенами, сессиями.

Если вам нужно просто получать данные в Next.js, можно использовать Server Components вместо создания API.

✳️ Создание API в App Router. В app/ создайте директорию api/users/ и внутри route.ts:

app
└── api
    └── users
        └── route.ts

☝️ Теперь можно экспортировать обработчики для разных HTTP-методов.

🐸 Библиотека фронтендера #буст

💬 А ваш? Пишите в комменты 👇

🐸 Библиотека фронтендера #развлекалово

📝 Промпт для создания анимированных карточек погоды

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

Простой промпт для Claude Sonnet 3.7:

Create a single HTML file containing CSS and JavaScript to generate an animated weather card. The card should visually represent the following weather conditions with distinct animations: Wind: (e.g., moving clouds, swaying trees, or wind lines) Rain: (e.g., falling raindrops, puddles forming) Sun: (e.g., shining rays, bright background) Snow: (e.g., falling snowflakes, snow accumulating) Show all the weather card side by side The card should have a dark background. Provide all the HTML, CSS, and JavaScript code within this single file. The JavaScript should include a way to switch between the different weather conditions (e.g., a function or a set of buttons) to demonstrate the animations for each.

⚡️ Как вам? Делитесь в комментариях👇

🐸 Библиотека фронтендера #буст

🔤💫 Текст, который «вау»

Ваш текст может быть намного круче, чем просто слова на экране! В статье собрали 28 CSS-анимаций, которые превратят обычные буквы в главную фишку вашего сайта.

🔗 Читать статью
🔗 Зеркало

🧑‍💻 Что, по вашему мнению, должен изучать фронтендер в 2025 году?

🔘Какие технологии вы считаете основными для фронтендеров в 2025 году?
🔘Какие новые инструменты или фреймворки стоит освоить?
🔘Какие языки и библиотеки должны быть в арсенале каждого фронтендера?

💭 Поделитесь мнением и опытом👇

🐸 Библиотека фронтендера #междусобойчик

👩‍💻 Подборка полезных расширений VS Code для фронтенд-разработчика

🟡Auto Rename Tag
🟡Auto Close Tag
🟡Autoprefixer
🟡Code Spell Checker
🟡CSS Peek
🟡DotENV или ENV
🟡Console Ninja
🟡Nested Comments
🟡Highlight Counter
🟡Error Lens
🟡ESLint
🟡File Utils
🟡GitLens
🟡HTML Boilerplate
🟡HTML CSS Support
🟡Import Cost
🟡Live Server
🟡Markdown Preview Enhanced
🟡Path Intellisense
🟡Prettier
🟡Project Manager
🟡REST Client
🟡Trailing Spaces
🟡Turbo Console Log
🟡Version Lens
🟡Angular Language Service
🟡ES7/React/Redux/React Native snippets
🟡Docker

💬А какие ваши любимые расширения? Делитесь в комментариях👇

🐸 Библиотека фронтендера #буст

🔥 Гайд для начинающих фронтенд-разработчиков

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

🔗 Читать гайд

💬 Фронтендеры, жизненно?

🐸 Библиотека фронтендера #развлекалово

🥷🏿 Кроссворд для фронтенд-разработчика: 6 понятий, которые знакомы каждому

➡️ По горизонтали:
1. Фреймворк от Google с полной экосистемой.

4. Компилирует компоненты в оптимизированный JavaScript-код, что обеспечивает высокую производительность приложений.

➡️ По вертикали:
2. Легко интегрируемый фреймворк с простой синтаксической моделью.

3. Библиотека, которая притворяется фреймворком. Использует компонентную модель и виртуальный DOM для создания масштабируемых и быстрых веб-приложений.

5. Реализует шаблон MVC и нацелен на упрощение создания масштабируемых одностраничных веб-приложений.

6. Декларативная JavaScript-библиотека для создания UI.

Делитесь своими ответами в комментариях, скрывая их под спойлер 👇

🐸 Библиотека фронтендера #междусобойчик

🔥 Дайджест новостей за неделю: свежие анонсы и ключевые обновления во фронтенд-разработке с упором на JavaScript

❣️ Rsdoctor 1.0 — универсальный, интеллектуальный анализатор сборки, облегчающий выявление узких мест и оптимизацию производительности. Он входит в то же семейство инструментов, что и Rspack, но полностью совместим с Webpack.

❣️ Parcel 2.14.0 — zero-config сборщик, добавляющий новый CLI для создания scaffold приложений, поддержку MDX и бета-поддержку компонентов React Server.

❣️ Reveal.js 5.2 — позволяет создавать элегантные презентации любому пользователю веб-браузера. В версии 5.2 добавлена возможность запускать «лайтбоксы», где зрители могут просматривать изображения и видео таким образом, чтобы они выделялись больше всего.

❣️ Ionic 8.5 – кроссплатформенная платформа разработки JS-приложений.

❣️ Billboard.js 3.15.0 – библиотека диаграмм JS на базе D3.

❣️ Typist 8.0 — компонент редактора Rich Text на основе Tiptap.

❣️ Gridstack.js 11.5 — быстрое создание адаптивных интерактивных панелей мониторинга.

❣️ Repomix 0.3 — упакуйте весь репозиторий в один файл, удобный для ИИ.

❣️ DOCX 9.3 — создание файлов .docx (Word) из JavaScript.

❣️ Parvus 3.0 — управление лайтбоксами изображений без зависимостей.

❣️ BlockNote 0.26 — блочный редактор в стиле Notion.

❣️ wllama 2.3 — привязка WebAssembly для  llama.cpp.

❣️ Pixi.js 8.9 — быстрый и гибкий 2D-рендерер WebGL.

❣️ React Router 7.4

🐸 Библиотека фронтендера #свежак

⚛️ Простые приемы для фронтенд-разработчика

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

🔗 Читать статью
🔗 Зеркало

🐸 Библиотека фронтендера #свежак

👩‍💻 Как добавить типы в конфигурации

Typeconf — инструмент для типизированной работы с конфигурациями, который позволяет:

🔵 Определять схему конфигурации с помощью TypeSpec.
🔵 Устанавливать значения конфигурации в TypeScript и генерировать валидный JSON-файл, готовый к использованию в сервисе.
🔵 На стороне сервиса автоматически получать типизированный интерфейс конфигурации, чтобы исключить ошибки при чтении JSON.

🔥 Зачем использовать Typeconf?

🔵 Конфигурации как код — управление через TypeScript.
🔵 Удобное повторное использование конфигов между проектами (через NPM).
🔵 Идеально подходит для CI/CD, pre-commit хуков и других автоматизированных процессов.
🔵 Прост в интеграции — можно внедрить в существующую кодовую базу.

🐸 Библиотека фронтендера #свежак

💡 Две строки CSS, которые сделают любой блочный элемент изменяемым по размеру

С помощью всего двух CSS-свойств — resize и overflow — можно позволить пользователю изменять размер (ширину/высоту) любого блочного элемента на странице:

p, div, th {
  resize: horizontal;  /* или vertical, both, none */
  overflow: auto;       /* важно: не должно быть visible */
}

🔗 Источник

🐸 Библиотека фронтендера #буст

👩‍💻 Анонс Motion для Vue

Motion — популярная и мощная библиотека анимации, которая чаще всего ассоциируется с React, теперь появилась новая версия Vue, и ее функциональность тоже полностью реализована.

Ее легко запустить и интересно освоить, ее уникальный гибридный движок сочетает производительность аппаратно-ускоренных браузерных API с безграничным потенциалом JavaScript.

<template>
  <motion.div
    :initial="{ opacity: 0, scale: 0 }"
    :animate="{ opacity: 1, scale: 1 }"
  />
</template>

🔗 Подробнее

🐸 Библиотека фронтендера #буст

👨🏻‍💻 Исследование IT-аудитории Proglib 2025: зарплаты, технологии, профессии

Кто такой современный разработчик в 2025 году? Актуальное исследование портрета IT-специалистов: зарплаты, технологии, специализации и демография разработчиков.

➡️ Вся статистика и детали — здесь

Библиотека программиста #свежак

💬 Единоборства? Ваши варианты 👇

🐸 Библиотека фронтендера #междусобойчик

🎧 467-й выпуск подкаста «Веб-стандарты»

Кого слушаем: Юлия Миоцен, Никита Дубко, Алексей Симоненко, Вадим Макеев.

⏱️ Таймкоды:

00:01:00 Дэшборд веб-платформы
00:11:54 Бэкпорт require(esm) в Node.js 20
00:31:26 Рамки в сетках
00:55:47 Всего 14 SVG-фильтров
01:17:33 Styled-components всё
01:37:31 Подчёркивание ссылок
01:58:40 Ответы на вопросы

▶️ Сайт подкаста

🐸 Библиотека фронтендера #буст

💡 Copy styles в действии

С помощью данной фичи Chrome DevTools можно быстро скопировать все CSS-стили (включая inline, external, inherited), применённые к конкретному HTML-элементу.

🔗 Источник

🐸 Библиотека фронтендера #буст

💬 Нет, ну а как еще подтвердить?

🐸 Библиотека фронтендера #развлекалово

TypeScript 🆚 JavaScript

Еще в 2023 году вышла статья Ditching TypeScript for JavaScript, где автор делится опытом отказа от TS в пользу JS. Он утверждает, что TypeScript решает проблемы, которых у него никогда не было, а в реальности часто усложняет процесс разработки — особенно в маленьких командах или библиотеках.

💬 А что вы думаете по этому поводу?

🐸 Библиотека фронтендера #междусобойчик

🔥 Дайджест новостей за неделю: свежие анонсы и ключевые обновления во фронтенд-разработке

⭕️ Элемент <select> теперь можно настраивать с помощью CSS: теперь есть доступный стандартизированный способ создания настраиваемых элементов <select> — благодаря appearance: base-select.

⭕️ Поддержка логических сокращений в CSS: рабочая группа CSS недавно решила добавить сокращение для установки ширины и высоты элемента.

⭕️ Оформление пробелов: новый способ рисования разделителей в CSS. Kevin Babbitt, Principal Software Engineer, объясняет принципы оформления пробелов в CSS и представляет новое предложение, над которым работает команда для добавления и расширения возможностей тонкой настройки оформления пробелов.

⭕️ Fancy Components: растущая библиотека готовых к использованию анимированных компонентов React — включает в себя множество компонентов для создания различных текстовых анимаций, а также компоненты для фона, анимации, связанной с физикой, SVG-фильтры и многое другое.

⭕️ Вот что нового в WebGPU в Chrome 135, включая экспериментальное тестирование WebXR.

⭕️ Сравните, как ведущие мировые сайты в различных нишах ранжируются по показателям производительности Core Web Vitals.

⭕️ Если вам когда-нибудь понадобится вдохновение в области типографики, Fonts In Use — хороший архив с примерами использования в реальном мире.

⭕️ Parvus 3.0 — доступный лайтбокс без зависимостей. Пример на CodePen.

🐸 Библиотека фронтендера #свежак