Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
21.5K subscribers
3.04K photos
221 videos
51 files
5.3K links
Все самое полезное для фронтенда в одном канале.

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
🖍 Публичный URL для localhost за минуту

Нужно показать фронт с localhost — без деплоя и с HTTPS? Делается одной командой:


brew install cloudflared
cloudflared tunnel --url http://localhost:3000


Что получаете:

— публичный HTTPS-адрес
— работает для OAuth, cookies и mobile-тестов
— без регистрации и бесплатно

Удобная альтернатива ngrok для демо и локальной разработки фронта 💃

📍 Навигация: [Вакансии]

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

#stack
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥16🥰42
🔍 Узнам, кто занял порт


lsof -i :3000


Показывает какой процесс держит порт 3000: команду и PID.

🔤 Типичный кейс:

— dev-сервер не стартует
— ошибка EADDRINUSE
— порт «занят», но непонятно кем

🔴 Пример вывода:


node 48231 user TCP *:3000 (LISTEN)


node — процесс
48231 — PID
LISTEN — порт реально используется

🔢 Если процесс лишний:


kill 48231


📍 Навигация: [Вакансии]

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

#readme
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰5👍2🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
🧩 Как собрать портфолио в виде 2D-игры

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

ℹ️ Как это работает:

— Персонаж перемещается по комнатам
— Подходит к объектам (компьютер, книжная полка, постеры)
— При взаимодействии появляется информация: навыки, описание проектов, ссылки на GitHub

Используется стек: JavaScript, Kaboom.js, Vite, HTML/CSS. Автор разбирает: настройку проекта, карту, коллизии, анимации, диалоги.

📎 Ссылка на GitHub

📍 Навигация: [Вакансии]

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

#read_watch
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥74🥰2
«Этот манёвр будет стоить нам 51 год...»

— или 20% от стоимости обучения, если отложить прокачку скиллов до понедельника. Пока фронтенд-фреймворки рождаются и умирают, фундаментальные знания алгоритмов и архитектуры остаются единственной константой.

Успейте зайти на курсы Proglib Academy по старым ценам и укрепить свой бэкграунд:

— Разработка ИИ-агентов
— Математика для разработки AI-моделей
— ML для старта в Data Science
— Математика для Data Science
— Специалист по ИИ
— Алгоритмы и структуры данных
— Программирование на Python
— Основы IT для непрограммистов
— Архитектуры и шаблоны проектирования

Забрать курс по старой цене

⚠️ Повышение стоимости — 19 января
3🥰2👾1
📱 CSS: колонки без горизонтального скролла

В Chrome 145 появились column-wrap и column-height. Теперь multi-column может переносить колонки вниз, а не вправо.

Раньше:
— фиксированная высота → колонки вправо
— горизонтальный скролл


Теперь:
— задаёте высоту ряда
— переполнение уходит вниз
— нормальный UX для текста


Где полезно:
— статьи и документация
— контентные блоки
— вертикальные «карусели»


⚠️ Без визуальных разделителей легко сломать чтение; не замена Grid/Flex, а инструмент под контент.

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

#release_digest
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰6👍32
🔍 React Scan — автоматический поиск проблем производительности в React

Удобный инструмент для React-разработчиков, который визуально показывает, какие компоненты тормозят ваше приложение.

Главные фичи:

— Не требует изменений в коде
— Подсвечивает компоненты, которые нужно оптимизировать
— Работает везде: script tag, npm, Next.js, Vite, Remix

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

Просто добавьте один script tag:


<script src="//unpkg.com/react-scan/dist/auto.global.js"></script>


🔗 Cсылка на GitHub

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

#stack #react
Please open Telegram to view this post
VIEW IN TELEGRAM
10🥰3👏2
🤯 React до сих пор веет безумием, но все молчат

Автор вернулся к React после перерыва. И вот что его поразило:

🔴 «Архитектура» на компонентах

Любой компонент может использовать любое состояние через хуки. По сути — глобальные переменные с красивым названием «редьюсер». Назвали заумно — и вдруг это стало Good Architecture?


🔴 useEffect — король хаков

Хук для «побочных эффектов» используется для инициализации компонентов. Но постойте... он же ещё и состояние меняет! А если нужна зависимость? Добавляем ещё один useEffect.

Результат? Цепочки асинхронных функций, которые надо читать снизу вверх. Ад обратных вызовов отдыхает.


🔴 «Паттерны» вместо простоты

Обещали простоту в Hello World. На практике — статьи про сложнейшие паттерны просто для отрисовки элементов на экране. И никто даже не признаёт безумие происходящего!


ℹ️ Но вот что интересно:

Автор считает, что виноват не React. И не Angular. И не jQuery. Проблема в том, что создание интерактивного UI, где любой компонент может обновлять любой другой — это один из сложнейших аспектов разработки ПО.

Сравните: у крана 2 входа и 1 выход. У UI — потенциально бесконечное число входов и выходов.

🖍 Решение:

Меньше кнопок
SSR везде, где возможно
React только «островками интерактивности»


P.S. Если бэкенд-инженер смотрит на ваш код и спрашивает «Неужели нельзя проще?» — возможно, он прав.

📍 Навигация: [Вакансии]

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

#code_battle
Please open Telegram to view this post
VIEW IN TELEGRAM
8🥱6👍2🥰2🤔1
👋 Легендарный код Konami в CSS и JavaScript

Помните чит-код ↑↑↓↓←→←→BA из игр 90-х? Создали интерактивную визуализацию этой культовой комбинации.

Что внутри:

— Стилизованные D-pad клавиши с градиентами
— Отслеживание последовательности нажатий
— Визуальная подсветка при правильном вводе
— Чистый CSS без фреймворков


Технически:

— Event listeners для keyboard input
— Валидация через массив
— CSS-анимации для обратной связи

🔗 Ссылка на CodePen

📍 Навигация: [Вакансии]

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

#readme #css
Please open Telegram to view this post
VIEW IN TELEGRAM
😁4🥰2👏1
npm install старая_цена

С 20 января деплоим новые условия, а текущие помечаем как deprecated. Успейте сегодня забрать свой курс, так как завтра прайс обновится.

Смержить профильные знания в свой стек
4❤‍🔥3👾3🥰2😁2
🔗 Как работать с датами в JavaScript и не словить баг

Даты в JS — частая ловушка. На собеседованиях про них спрашивают регулярно, а в продакшене ошибки всплывают из-за таймзон, форматирования и странного поведения Date.

В карточках:
— что реально умеет Date
— когда нужен Intl
— зачем брать библиотеки
— к чему ведёт новый стандарт

📍 Навигация: [Вакансии]

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

#career_merge
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🥰3
🔴 Легенда обновилась: jQuery 4.0

Первый мажорный апдейт почти за 10 лет и аккурат к 20-летию проекта.

Коротко по фактам:

— Убрана поддержка IE 10 и ниже, старых Edge, Android Browser
— Добавлены Trusted Types и улучшена работа с CSP
— Исходники переведены на ES modules, сборка через Rollup
— Вырезаны deprecated API (isArray, trim, parseJSON и др.)
— Размер стал меньше (–3 KB gzipped)
— События focus/blur теперь строго по W3C
— Slim-версия ещё легче: без Deferred и Callbacks


🔗 Ссылка на релиз

📍 Навигация: [Вакансии]

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

#release_digest
Please open Telegram to view this post
VIEW IN TELEGRAM
🌚4