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

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
😎 Топ-вакансий для фронтендеров за неделю

Frontend Engineer — от 3000 $, удаленно (Лондон)

Middle React Native разработчик — офис (Москва)

Frontend Developer (React JS) Middle — 1 100 $, удаленно (Астана)

Frontend разработчик на Angular — от 100 000 до 200 000 ₽, офис (Казань)

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

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

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

#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
3🥱2🔥1
🌸 Box Model, с которым не больно верстать

— display, float, clear, width/height, margin — простые, но коварные

— auto, %, inherit — ведут себя по-разному в зависимости от контекста

— даже один auto может всё сломать, если не учесть родителя

📌 На картинке — та самая шпаргалка, которую стоит сохранить, чтобы не гуглить в самый неудобный момент.

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4🌚4👍1
🙂 Вайб-кодинг: модный тренд или путь к деградации

ИИ всё глубже проникает в код — и с этим уже никто не спорит. Но что, если вы почти не пишете код руками, а просто даtте команды нейросети?

В карточках:

➡️ Что такое вайб-кодинг на самом деле

➡️ Почему его обожают новички и выгоревшие синьоры

➡️ Какие риски он влечёт за собой

➡️ Что думают разработчики и работодатели

🔗 Полный текст статьи — по ссылке

🐸 Библиотека фронтендера
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8👾41🔥1
🐟 Как оптимизировать фронтенд с помощью Web Vitals

Web Vitals — это метрики от Google, которые измеряют реальное восприятие производительности пользователями.

Особенно важны:

* LCP — скорость загрузки главного контента

* INP — отзывчивость при взаимодействии

* CLS — стабильность интерфейса

Зачем прокачивать Web Vitals:

📍 Сайт загружается быстрее — пользователь видит контент без ожидания

📍 Интерфейс становится стабильным — ничего не дергается и не мешает восприятию

📍 Растёт SEO-трафик — Google любит быстрые и стабильные страницы

Как внедрить в проект:

1️⃣ Отслеживание метрик в коде:


import { getCLS, getINP, getLCP } from 'web-vitals';

getCLS(console.log);
getINP(console.log);
getLCP(console.log);


2️⃣ Анализ с помощью Lighthouse:

— Откройте DevTools → вкладка Lighthouse

— Запустите аудит и смотрите рекомендации по улучшению

3️⃣ Улучшения в реальном коде:

— Используйте loading="lazy" для изображений

— Добавьте font-display: swap к шрифтам

— Минимизируйте и разбивай JS на чанки

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥53
👍 Промпт, который превращает макет в HTML + CSS

ChatGPT с этим промптом превращается в мощный парсинг-инструмент: скрин → код.

Что нужно сделать:

➡️ Загрузить скриншот интерфейса, макета или сайта

➡️ Вставить промпт ниже

Промпт:

You're a professional web developer and UI/UX expert.

I’m going to upload an image of a website design or component. Please:
1. Analyze the layout and design from the image.
2. Generate clean, responsive HTML and CSS (Tailwind is fine too).
3. Add comments in the code to explain your logic.
4. Ask me any questions if something in the image isn’t clear.

Output everything inside code blocks and make sure it's mobile-friendly.


Работает отлично для:

— hero‑секций
— форм логина/регистрации
— табличек с ценами
— админок и портфолио

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥322
🫠 Как я отловил «утечку» стилей через CSS-in-JS в крупном SPA

Наш подписчик работал над крупным корпоративным SPA на React с использованием Emotion для стилизации компонентов. В какой-то момент приложение стало заметно «тормозить» после нескольких переключений между разделами:

«Заглянув в DevTools, увидел, что <head> заполняется дублирующимися <style>-тегами. Оказалось, я каждый раз создавал новый Emotion-cache при рендере, и старые стили не удалялись — вечером перенёс провайдер кеша в корень приложения, и лаги исчезли.»


А вы сталкивались с такими «утечками»?

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

#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
1🤔1👾1
Proglib Academy — это место, где вы превращаете теорию в практику. Здесь ваши знания становятся проектами для портфолио, а вы — более уверенным специалистом.

Выберите курс, который поможет сделать следующий шаг ⬇️

🚀 Для тех, кто начинает путь в IT:

Основы IT для непрограммистов
Программирование на Python (обновлённый)
Frontend-разработчик с нуля: HTML, CSS, JavaScript

🧠 Для будущих и настоящих Data Scientist'ов:

ML для старта в Data Science (начинается в сентябре)
Базовые модели ML и приложения
Математика для Data Science
AI-агенты для DS-специалистов (скоро второй поток)

🛠️ Для опытных разработчиков, готовых к росту:

Алгоритмы и структуры данных
Архитектуры и шаблоны проектирования

Независимо от вашей цели, у нас есть курс, который поможет её достичь. Переходите в Proglib Academy, выбирайте свой путь и инвестируйте в навыки, которые всегда будут в цене!
👍2😁1