Ниже описали первичные этапы разработки API, а полностью гайд читайте здесь 👈
npx create-next-app@latest --api
Флаг
--api
автоматически добавит файл route.ts
в директорию app/
с примером создания API-эндпоинта.— Pages Router (pages/api/*) — старый метод, использует Node.js API.
— App Router (по умолчанию) — новый метод, использующий стандарты Web API (Request/Response).
Почему новый лучше? Он работает на веб-API, а не на специфичных для Node.js инструментах; упрощает изучение, снижает зависимость от Express-подобных решений
— Публичный API для разных клиентов (веб, мобильные приложения).
— Прокси к бэкенду — скрытие внутренних сервисов за единым API.
— Прием вебхуков (например, Stripe, GitHub, Twilio).
— Аутентификация — работа с токенами, сессиями.
Если вам нужно просто получать данные в Next.js, можно использовать Server Components вместо создания API.
app/
создайте директорию api/users/
и внутри route.ts
:app
└── api
└── users
└── route.ts
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
This media is not supported in your browser
VIEW IN TELEGRAM
📝 Промпт для создания анимированных карточек погоды
Сколько раньше требовалось времени, чтобы сверстать анимированные карточки с примера выше? Зависит от многих факторов, но сейчас это можно сделать за минуту.
Простой промпт для Claude Sonnet 3.7:
⚡️ Как вам? Делитесь в комментариях👇
🐸 Библиотека фронтендера #буст
Сколько раньше требовалось времени, чтобы сверстать анимированные карточки с примера выше? Зависит от многих факторов, но сейчас это можно сделать за минуту.
Простой промпт для 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.
⚡️ Как вам? Делитесь в комментариях
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15👍7❤1🌚1
🔤💫 Текст, который «вау»
Ваш текст может быть намного круче, чем просто слова на экране! В статье собрали 28 CSS-анимаций, которые превратят обычные буквы в главную фишку вашего сайта.
🔗 Читать статью
🔗 Зеркало
Ваш текст может быть намного круче, чем просто слова на экране! В статье собрали 28 CSS-анимаций, которые превратят обычные буквы в главную фишку вашего сайта.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13
🧑💻 Что, по вашему мнению, должен изучать фронтендер в 2025 году?
🔘 Какие технологии вы считаете основными для фронтендеров в 2025 году?
🔘 Какие новые инструменты или фреймворки стоит освоить?
🔘 Какие языки и библиотеки должны быть в арсенале каждого фронтендера?
💭 Поделитесь мнением и опытом👇
🐸 Библиотека фронтендера #междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
🥱4👍3❤1😁1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7❤1
🥷🏿 Кроссворд для фронтенд-разработчика: 6 понятий, которые знакомы каждому
➡️ По горизонтали:
1. Фреймворк от Google с полной экосистемой.
4. Компилирует компоненты в оптимизированный JavaScript-код, что обеспечивает высокую производительность приложений.
➡️ По вертикали:
2. Легко интегрируемый фреймворк с простой синтаксической моделью.
3. Библиотека, которая притворяется фреймворком. Использует компонентную модель и виртуальный DOM для создания масштабируемых и быстрых веб-приложений.
5. Реализует шаблон MVC и нацелен на упрощение создания масштабируемых одностраничных веб-приложений.
6. Декларативная JavaScript-библиотека для создания UI.
Делитесь своими ответами в комментариях, скрывая их под спойлер 👇
🐸 Библиотека фронтендера #междусобойчик
1. Фреймворк от Google с полной экосистемой.
4. Компилирует компоненты в оптимизированный JavaScript-код, что обеспечивает высокую производительность приложений.
2. Легко интегрируемый фреймворк с простой синтаксической моделью.
3. Библиотека, которая притворяется фреймворком. Использует компонентную модель и виртуальный DOM для создания масштабируемых и быстрых веб-приложений.
5. Реализует шаблон MVC и нацелен на упрощение создания масштабируемых одностраничных веб-приложений.
6. Декларативная JavaScript-библиотека для создания UI.
Делитесь своими ответами в комментариях, скрывая их под спойлер 👇
Please open Telegram to view this post
VIEW IN TELEGRAM
🥱5😁1🤔1
llama.cpp
.Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
⚛️ Простые приемы для фронтенд-разработчика
React.js — мощная библиотека для создания пользовательских интерфейсов, но многие начинающие разработчики не используют его на полную силу. В этой статье разберем 5 полезных хаков, которые помогут вам писать более чистый, производительный и удобный в поддержке код.
🔗 Читать статью
🔗 Зеркало
🐸 Библиотека фронтендера #свежак
React.js — мощная библиотека для создания пользовательских интерфейсов, но многие начинающие разработчики не используют его на полную силу. В этой статье разберем 5 полезных хаков, которые помогут вам писать более чистый, производительный и удобный в поддержке код.
Please open Telegram to view this post
VIEW IN TELEGRAM
😁7❤2🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Typeconf — инструмент для типизированной работы с конфигурациями, который позволяет:
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5
This media is not supported in your browser
VIEW IN TELEGRAM
С помощью всего двух CSS-свойств —
resize
и overflow
— можно позволить пользователю изменять размер (ширину/высоту) любого блочного элемента на странице:p, div, th {
resize: horizontal; /* или vertical, both, none */
overflow: auto; /* важно: не должно быть visible */
}
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥16👍6❤3🥱1
Motion — популярная и мощная библиотека анимации, которая чаще всего ассоциируется с React, теперь появилась новая версия Vue, и ее функциональность тоже полностью реализована.
Ее легко запустить и интересно освоить, ее уникальный гибридный движок сочетает производительность аппаратно-ускоренных браузерных API с безграничным потенциалом JavaScript.
<template>
<motion.div
:initial="{ opacity: 0, scale: 0 }"
:animate="{ opacity: 1, scale: 1 }"
/>
</template>
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14
Forwarded from Библиотека программиста | программирование, кодинг, разработка
👨🏻💻 Исследование IT-аудитории Proglib 2025: зарплаты, технологии, профессии
Кто такой современный разработчик в 2025 году? Актуальное исследование портрета IT-специалистов: зарплаты, технологии, специализации и демография разработчиков.
➡️ Вся статистика и детали — здесь
Библиотека программиста #свежак
Кто такой современный разработчик в 2025 году? Актуальное исследование портрета IT-специалистов: зарплаты, технологии, специализации и демография разработчиков.
Библиотека программиста #свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3👍2😁1
🎧 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 Ответы на вопросы
▶️ Сайт подкаста
🐸 Библиотека фронтендера #буст
Кого слушаем: Юлия Миоцен, Никита Дубко, Алексей Симоненко, Вадим Макеев.
⏱️ Таймкоды:
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 Ответы на вопросы
▶️ Сайт подкаста
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
С помощью данной фичи Chrome DevTools можно быстро скопировать все CSS-стили (включая inline, external, inherited), применённые к конкретному HTML-элементу.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16
TypeScript 🆚 JavaScript
Еще в 2023 году вышла статья Ditching TypeScript for JavaScript, где автор делится опытом отказа от TS в пользу JS. Он утверждает, что TypeScript решает проблемы, которых у него никогда не было, а в реальности часто усложняет процесс разработки — особенно в маленьких командах или библиотеках.
💬 А что вы думаете по этому поводу?
🐸 Библиотека фронтендера #междусобойчик
Еще в 2023 году вышла статья Ditching TypeScript for JavaScript, где автор делится опытом отказа от TS в пользу JS. Он утверждает, что TypeScript решает проблемы, которых у него никогда не было, а в реальности часто усложняет процесс разработки — особенно в маленьких командах или библиотеках.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍28😁19🥱7🤔3🌚1
<select>
— благодаря appearance: base-select
.Please open Telegram to view this post
VIEW IN TELEGRAM
👍6