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

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
加入频道
Шаблоны реактивности с помощью современного ванильного JavaScript

Реактивность — это то, как система реагирует на изменения данных. И хотя многие библиотеки и фреймворки вроде React/Vue предлагают реактивные решения из коробки, вы также можете сделать все это с помощью стандартного JavaScript. Разбираемся на примерах, как именно👇

🔗 Читать
🥱С каждым днем в мире фронтенд-разработки появляется все больше и больше инструментов, библиотек и фреймворков. Время, когда выбор стоял между jQuery и чистым JavaScript, давно прошло. Сейчас у нас есть React, Vue, Angular, Svelte и множество других.

🤦‍♂️Каждый из них обещает улучшить наш рабочий процесс, сделать код более чистым и упростить разработку. Но такое изобилие выбора иногда приводит к ощущению, что ты постоянно упускаешь что-то новое и важное.

💬А как вы относитесь к такому многообразию? Это дает вам свободу выбора и возможность находить наилучший инструмент для конкретной задачи? Или же это создает стресс и ощущение постоянного отставания от индустрии? Как вы принимаете решение о том, на какой фреймворк или библиотеку стоит обратить внимание?

#холивар
Please open Telegram to view this post
VIEW IN TELEGRAM
📊 Как я входил в IT? Результаты опроса «Библиотеки программиста»

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

Читать статью
💪Уверенное обновление зависимостей: гайд для фронтенд-разработчика

Тесты часто позволяют увидеть, работает ли логика в наших приложениях так, как мы ожидаем, но что, если компонент внешнего интерфейса отображается неправильно?

Визуальное регрессионное тестирование спешит на помощь! Sébastien Lorber, хорошо известный своей работой над Docusaurus, делится рабочим процессом, основанным на GitHub Actions, Playwright и Argos (коммерческий инструмент, но с уровнем бесплатного пользования, подходящим для этой задачи).

👀 Читать
📌 Новости и обновления популярных инструментов: подборка для фронтенд-разработчика

Релиз Safari 17.0. Возможности WebKit в новой версии:

Начальная поддержка font-size-adjust, позволяющая легко сделать одинаковым визуальный размер разных шрифтов
​​Поддержка text-transform: full-width и text-transform: full-size-kana.
Новый элемент поиска <search>, атрибут popover и многое другое

Релиз Firefox 118:

В CSS добавлено 10 новых математических функций
В CSS-свойстве font-size-adjust реализован параметр "from-font", указывающий об использовании метрик шрифта, взятых из первого доступного шрифта
В HTTP-заголовке Permissions-Policy добавлена поддержка значения publickey-credentials-get
По умолчанию включён механизм ORB, позиционируемый как замена механизма CORB для блокирования загрузки ресурсов при запросе со стороннего домена
Включена по умолчанию система машинного перевода и многое другое

🔸Shoelace 2.9 — набор компонентов, не зависящих от фреймворка.
🔸Dependency Cruiser 14.0 — инструмент для визуализации и проверки зависимостей.
🔸Ember 5.3 — амбициозный фреймворк для создания современных веб-приложений.
🔸pnpm 8.8 — менеджер пакетов для JavaScript.
🔸Bit 1.0 — инструмент для изоляции, версионирования и повторного использования компонентов кода.
🔸n64js — эмулятор Nintendo 64 на JavaScript.
🔸Chardet 2.0 — библиотека для определения кодировки символов.
🔸React Chrono 2.3 — современный React-компонент для рендеринга временных шкал.
🔸Sonner 1.0 — компонент всплывающих уведомлений для React.
🔸React PDF 7.4 — инструмент для отображения PDF-файлов в React-приложении.
🔸React Bootstrap 2.9 — компоненты Bootstrap, созданные для React.
🔸React Native VisionCamera 3.1 — мощная и высокопроизводительная React-библиотека для управления камерой.
🔸ip-address 9.0 — библиотека для парсинга и управления адресами IPv4 и IPv6 в JavaScript.
🔸Jazzer.js 2.0 — фаззер для Node.js.
🔸Preact 10.18.0
🔸esbuild 0.19.4

#чтопроисходит
🚀Паша Востриков, фронтенд-разработчик в «Лаборатории Касперского», делится богатым опытом отладки JavaScript-приложений

Паша затронул большинство важных тем, связанных с отдадкой JS, в частности:

1. Отладка фронта
2. Отладка Node.js
3. Observability: логи, трейсы, метрики (вдогонку можно посмотреть доклад «Логи, трейсы, метрики: как не заблудиться в собственном приложении»)
4. Стенды для отладки
5. Опыт команды и многое другое
🤔Искали площадку, где можно закрепить навыки разработки? Встречайте: bigfrontend.dev.

🫶Это платформа для
отработки навыков фронтенд-разработки, подготовки к собеседованию и общения с разработчиками по всему миру. Одним словом, LeetCode для фронтендера.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔧Один аспект, который вам никто не объяснил о TypeScript

Автор Mock Service Worker приводит веские аргументы в пользу создания отдельного tsconfig.json для каждого окружения, в которой выполняется ваш код👇

❗️«У вас должно быть столько конфигураций TypeScript, сколько слоев есть в вашем проекте: исходный код, тестирование Node.js, тестирование в браузере, сторонние инструменты и т. д.».

🔗 Подробнее
👀 Повышаем качество код-ревью: 7 полезных советов

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

🔗Читать статью
🔗Зеркало
💡Новый способ замены элемента в массиве

Актуальные версии всех браузеров поддерживают метод with(index, value) для создания копии массива с заменой одного элемента.

▶️ Подробнее

#javascript #tip by Shripal Soni
👀 driver.js — легковесная библиотека, которая позволяет пошагово познакомить пользователя с продуктом или просто сосредоточить внимание на странице. Без лишних зависимостей, работает с любым фреймворком, написана на TypeScript.

🔗 Сайт & GitHub
🥅Можете попрощаться с неровными макетами, ведь CSS Subgrid завезли во все стабильные версии браузеров

🔸CSS grid — мощный инструмент для создания макетов, но row и column, созданные на родительской сетке, могут использоваться только для позиционирования прямых потомков контейнера сетки.

🔸Любые области и линии сетки, определенные автором, не применяются к элементам, не являющимся прямыми потомками. С помощью subgrid размеры треков, шаблоны и имена могут быть общими для вложенных сеток. В статье как раз объясняется, как это работает.

👀 Читать