Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
22.6K subscribers
2.41K photos
146 videos
38 files
4.8K links
Все самое полезное для фронтенда в одном канале.

По рекламе: @proglib_adv

Учиться у нас: https://proglib.io/w/77178ed4

Для обратной связи: @proglibrary_feeedback_bot

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
🔥 Знакомьтесь, преподаватель нашего нового курса по ML — Мария Жарова.

В карточках рассказали, чем Мария занимается и какие советы даёт тем, кто хочет расти в IT и Data Science ☝️

А если вы уже поняли, что тянуть нечего, начните свой путь в ML правильно: с реальной практикой, поддержкой ментора и видимым результатом.

👉 Записывайтесь на курс
👏4
🔍 Soft skills для фронтендера

Веб-разработка требует не только технических навыков, но и умения эффективно коммуницировать, управлять задачами и работать с клиентами. Но на самом деле это так важно?

Когда soft skills полезны:

— Командная синергия: четкая коммуникация помогает быстрее понять требования и избежать ошибок.

— Гибкость в сроках: грамотное общение с клиентом помогает находить компромиссы по времени и функциональности.

— Междисциплинарное сотрудничество: понимание особенностей других команд улучшает совместную работу и ускоряет процесс.

Когда это не так важно:

— Фокус на коде: иногда важно просто погружаться в работу и не отвлекаться на обсуждения.

— Качество кода важнее: когда решение принято, главное — не общение, а правильная реализация.

💬 А как вы думаете? Нужны ли фронтендерам soft skills или достаточно быть крутым кодером?

Поделитесь мнением в комментариях! ✏️

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

#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔4
📌 Lighthouse под капотом

Актуальные статьи для тех, кто не просто запускает Lighthouse, а понимает, как он работает внутри.

1. Web Perf в 2025: дальше, чем Lighthouse

➡️ Как современные фреймворки (Qwik, Astro) обходят классические проблемы TBT и LCP через островную архитектуру. Почему просто «100 баллов» больше не спасает.

2. Lighthouse 2025: полный редизайн

➡️ Chrome 137+ перейдёт на модуль Lighthouse Insights. Старые SEO-аудиты и части performance метрик заменят более гибкой архитектурой.

3. Что поменяют в Lighthouse-аудитах

➡️ Объединят CLS‑Culprits, уберут устаревшие проверки вроде passive listeners. Плюс подробный таймлайн изменений.

4. Что важно знать SEO и фронту

➡️ SearchEngineJournal объясняет, как изменения Lighthouse повлияют на ваши метрики и CI-пайплайны.

5. Локальные тесты с Lighthouse в CI

➡️ Гайд от NitroPack: как гонять Lighthouse через npm, настраивать кастомные аудиты и встраивать в CI/CD.

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

#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
3🔥1
🔥 Вы ещё можете застать старый добрый Proglib — с вечным доступом к курсам.

С 1 августа всё меняется: навсегда — останутся только те, кто успел купить сейчас.

-40% на все курсы. Включая обновлённый Python (кроме курса по AI-агентам)

Это не просто распродажа. Это — последняя точка входа в Proglib Academy по старым правилам.

📚 Выбрать и забрать свой курс навсегда → https://clc.to/TBtqYA
🔥2😁2
😶 Задача: интерфейс реагирует не так, как ожидалось

Вы получаете баг-репорт:

«Кнопка ‘Продолжить’ не нажимается в Safari на iOS, хотя в других браузерах всё работает.»

Проверяете верстку и видите, что кнопка абсолютно позиционирована внутри div, у которого z-index: 10. Поверх неё расположен прозрачный div (opacity: 0, z-index: 20, pointer-events: auto).

Что с наибольшей вероятностью мешает клику по кнопке

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

#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔7
😎 Топ-вакансий для фронтендеров за неделю

Senior Frontend Developer — до 380 000 ₽, удаленно (Казань)

Senior Frontend разработчик — до 250 000 ₽, офис (Москва)

Middle + Frontend-разработчик (Vue) — до 200 000 ₽, удаленно (Москва)

Frontend программист — от 200 000 до 300 000 ₽, удаленно (Москва)

Frontend-разработчик (React) — от 1500 до 2000 $

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

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

#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
4🔥1
⭐️ Упрощаем валидацию и типизацию с помощью Zod

Zod — библиотека для TypeScript, которая позволяет описывать схемы данных, валидировать их и сразу получать типы — без дублирования кода.

Почему это удобно:

➡️ Схема данных работает и как валидатор, и как источник типов через z.infer. Один раз описали — используете везде.

➡️ Zod использует декларативный синтаксис. Пример:


const User = z.object({
id: z.number(),
name: z.string(),
email: z.string().email()
})


➡️ Поддержка вложенных объектов, массивов, union-типов, optional, nullable, enum — можно описать практически любую структуру.

➡️ Используется для проверки request.body в Express, данных из форм или внешнего API.

➡️ Отлично сочетается с React Hook Form, tRPC, Next.js API routes и другими TypeScript-first решениями.

Как использовать:

1) Установите:


npm install zod


2) Опишите схему:


const Product = z.object({
title: z.string(),
price: z.number().positive()
})


3) Проверьте данные:


const result = Product.safeParse(input)
if (!result.success) {
console.error(result.error)
}


4) Получите типы:


type Product = z.infer<typeof Product>


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

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
6🔥6🤔1
🚀 Как OpenAPI упрощает работу фронтендера

Сегодня в мире быстрого цикла разработки важно сокращать время на рутинные задачи.

OpenAPI — это не просто спецификация, а реальный инструмент для автоматизации, который позволяет ускорить большинство процессов.

Что в карточках:

➡️ Как OpenAPI ускоряет интеграцию и генерирует код

➡️ Как моки и типизация повышают точность и скорость

➡️ Инструменты для быстрой работы с OpenAPI

➡️ Роль ИИ в создании UI-прототипов по спецификации

🔗 Все примеры и подробности — в статье по ссылке

🐸 Библиотека фронтендера
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM