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

👩‍💻 10 лучших библиотек для разработки React-приложений в 2025 году

Представляем подборку библиотек, необходимых для создания современных приложений на React. Независимо от того, работаете ли вы над панелями управления, таймлайнами, функциями перетаскивания или управлением API, они сэкономят ваше время и усилия.

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

🔝 Как расти во фронтенде

Чтобы стать джуном, достаточно знать основы HTML и CSS, синтаксис и конструкции JavaScript, понимать устройство DOM, освоить один из популярных фреймворков и базовые команды Git, а также разобраться с инструментами отладки кода в браузере.

💬 А как происходит дальнейший рост? Поделитесь в комментариях своим опытом👇

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

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

❣️ Компилятор TypeScript станет в 10 раз быстрее. Команда TypeScript в Microsoft планирует портировать текущую кодовую базу на Go и к середине 2025 года представить нативную реализацию tsc с возможностью проверки типов в командной строке, а к концу года — полноценное решение для сборки проектов.

❣️ Refractor 5.0: надежное виртуальное выделение синтаксиса с помощью Prism — использует мощный синтаксический анализатор Prism для вывода объектов вместо строки HTML, чтобы вы могли манипулировать и отображать их по своему усмотрению (например, в VDOM или в терминале). Lowlight, от того же автора, предлагает ту же функциональность, но основан на highlight.js.

❣️ Node.js v20.19.0 (LTS) — примечательный выпуск для ветки поддержки Node, т. к. было сделано исключение из политики поддержки для обратной совместимости require(esm). Теперь она включена по умолчанию.

❣️ Последняя версия Chrome (и предварительные версии Firefox и Safari) поддерживает два новых HTML-атрибута, command и commandfor, для добавления декларативных действий к HTML-кнопкам без непосредственного использования JavaScript.

❣️ Nuxt 3.16 — популярный метафреймворк Vue. Теперь с новым инструментом create-nuxt для запуска проектов.

❣️ Bun 1.2.5 — теперь с гораздо лучшей совместимостью с Node-API, генерацией и проверкой CSRF, а также многочисленными улучшениями и исправлениями.

❣️ Melange 5 — компилятор OCaml в JavaScript.

❣️ Gleam 1.9 — типобезопасный язык функционального программирования, ориентированный как на виртуальную машину Erlang, так и на рантайм JavaScript.

❣️ <css-doodle> 0.42 — веб-компонент для рисования узоров с помощью CSS.

❣️ Faker 9.6 — создавайте вымышленные данные в любых количествах.

❣️ Choices 11.1 — настраиваемый плагин для выбора/ввода текста.

❣️ Spacetime 7.8 — облегченная библиотека часовых поясов.

❣️ Ink 5.2 — используйте React для создания CLI-приложений.

❣️ Astro 5.5, Transformers.js 3.4, Capacitor 7.1, Nuxt UI 3.

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

🚀 Оптимизация ленивой загрузки видео с автозапуском

Убираем лишнюю автозагрузку видео и включаем только тогда, когда пользователь его видит. Это ускоряет производительность и уменьшает потребление трафика без ухудшения UX.

🔗 Источник

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

👩‍💻 Selectel выпустил бесплатный базовый курс по JavaScript

В Академии Selectel появился бесплатный курс для желающих освоить JS: «Основы JavaScript: от переменных до функций». Все обучающие материалы доступны бесплатно, регистрироваться и оставлять свои данные не нужно. На изучение курса уйдет около полутора часов.

➡️ С чего начать изучение:

🟡 Как использовать типы данных в JavaScript? Переменные, ввод и вывод информации

🟡 Функции в JavaScript: учимся писать структурированные программы

🟡 Как создавать HTML-элементы в JavaScript

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

💡Шпаргалка для изучения разницы между Object.seal и Object.freeze в JavaScript

🔗 Источник

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

😧 58% IT-специалистов страдают: психология успеха и борьба с синдромом самозванца

Синдром самозванца — не просто модный термин, а реальная проблема, с которой сталкиваются даже опытные разработчики. Почему так происходит и как с этим бороться? Разбираемся в причинах «стандартной болезни айтишников»

➡️ Читайте в статье

Спойлер: дело не в навыках, а в психологии успеха

🐸Библиотека шарписта

💬 Как оставлять комментарии в чате нашего канала

В нашем чате работает бот Shieldy — он защищает от спама, запрашивая у новых участников решение простой капчи.

⚠️ Проблема, с которой сталкиваются многие: вы нажимаете под постом «Прокомментировать», пишете что-то, а потом получаете бан и не можете писать комментарии.

❓Почему так: Shieldy отправляет капчу в сам чат, а не в комментарии под конкретный пост. Из-за этого капчу можно не увидеть, не отправить ответ на нее, и бот автоматически заблокирует вас.

✅ Как присоединиться к чату, чтобы бот вас не забанил

— Зайдите в описание канала с телефона и нажмите кнопку Discuss / Чат
— Нажмите Join / Присоединиться
— Сразу обратите внимание на сообщение от бота Shieldy
— Решите простой пример и отправьте ответ в чат

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

❗️ Если вас все-таки забанили

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

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

👾 Спасибо, что активно участвуете в обсуждении наших постов!

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

Ниже описали первичные этапы разработки 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 хуков и других автоматизированных процессов.
🔵 Прост в интеграции — можно внедрить в существующую кодовую базу.

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