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

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

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

Наши каналы: https://yangx.top/proglibrary/9197

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
加入频道
👩‍💻 Женщины в ИТ: проблемы и преимущества сложной профессии

Айтишницы поделились профессиональным опытом и рассказали о стереотипах и сложностях, с которыми им пришлось столкнуться на карьерном пути.

🔗 Читать статью
🔗 Зеркало
This media is not supported in your browser
VIEW IN TELEGRAM
📌 Новости и обновления популярных инструментов: подборка для фронтенд-разработчика

Вышел Chrome 118. Подробнее о нововведениях читайте здесь.
Доступен корректирующий выпуск Firefox 118.0.2, в котором представлены некоторые исправления.
Представлены Node 20.8.0 и Node 18.18.1 (LTS)

🔸Electron 27: набор инструментов для кроссплатформенных десктопных приложений получает поддержку Chromium 118, Node.js 18.17.1 и V8 11.8, но теряет поддержку macOS 10.13/14.
🔸Fresh 1.5: нативный фреймворк Deno для создания полнофункциональных веб-приложений. В версии 1.5 добавлена ​​поддержка partials (возможность обновить часть существующей страницы).
🔸Parcel 2.10: zero-config инструмент сборки получил серьезные улучшения производительности (в 7 раз быстрее в крупных проектах). Devon Govett погрузился в эту тему подробнее в треде.
🔸Bun 1.0.5: исправлены ошибки и представлены небольшие улучшения для рантайма JS.
🔸Payload 2.0: Postgres, Live Preview, Lexical RTE и многое другое
🔸Ionic 7.5: добавлена поддержка автономных компонентов Angular, Datetime, Toast и многого другого.

🔹Solid 1.8 — реактивная JavaScript-библиотека для создания UI без использования виртуальной DOM.
🔹Hotkey 2.1.1 — инструмент для добавления сочетания клавиш на страницы с помощью HTML-атрибутов (например, data-hotkey="Meta+d").
🔹React-Menu 4.1 — компонент для создания доступных меню и раскрывающихся списков.
🔹pnpm 8.9 — альтернативный эффективный менеджер пакетов.
🔹Highlight.js 11.9 — популярная библиотека подсветки синтаксиса JS.

#чтопроисходит
This media is not supported in your browser
VIEW IN TELEGRAM
🤩GitHub опубликовала результаты ежегодного конкурса js13kGames по разработке онлайн-игр, в котором участникам предлагается создать тематическую HTML5-игру.

Читайте подробнее о 13-ти играх с самым высоким рейтингом — все они бесплатны, в них можно играть в браузере, а размер занимает ≤ 13 КБ 🤯
Please open Telegram to view this post
VIEW IN TELEGRAM
Интересный кейс использования градиентов CSS для реализации эффекта наведения, влияющего на внешний вид других элементов вокруг наведенного элемента.

👉 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
🧰Prismane — современная и многофункциональная универсальная библиотека React UI, которая предоставляет красивый и настраиваемый набор инструментов для создания UI.

📌Что внутри:

🚀Индивидуальная система стилей
🚀Встроенная поддержка темных и светлых тем
🚀107+ React-компонентов
🚀20+ кастомных хуков
🚀27+ кастомных валидаторов форм

🔗 Сайт & GitHub
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
💡Простой совет по анимации иконки: на заметку фронтенд-разработчику

#css #tip by Shripal Soni
Вероятно, вы ежедневно используете кастомные свойства CSS. Но знаете ли вы, как они работают под капотом, особенно когда речь идет о каскаде и наследовании?

Stephanie Eckles более 15 лет работала фронтенд-разработчиком, а теперь делится опытом. Она рассказывает об использовании кастомных свойств и эффективном устранении неполадок, рассматривая:

☑️Как браузер определяет значения для любого свойства
☑️Про Computed value time
☑️Подводные камни при использовании кастомных свойств с помощью современного CSS
☑️Почему наследование должно влиять на вашу архитектуру кастомных свойств
390. Safari, бета Chrome 119, Divtober, пересмотр Baseline, новинки…
Веб-стандарты
🎙Свежий выпуск подкаста «Веб-стандарты»: Андрей Мелихов, Юля Миоцен, Вадим Макеев про Safari TP, бету Chrome 119, Divtober, пересмотр Baseline, новинки WCAG 2.2 и Closure Compiler.

00:01:08 Новинки Safari
00:22:26 Бета Chrome 119
00:50:01 Divtober
00:56:29 Пересмотр Baseline
01:08:03 Новинки WCAG 2.2
01:15:01 Closure Compiler

YouTube | Apple Подкасты | Google Подкасты | Яндекс Музыка | Сайт подкаста

#подкасты
Почему экосистема фронтенда настолько сложна?

📌Основные тезисы из статьи, которая подчеркивает боль всех фронтендеров:

🤯Нет единой системы импортов: ESModules, CommonJS, Asynchronous Module Definition (AMD), Universal Module Definition (UMD)
🤯Многочисленные шаги минификации, траспиляции
🤯Совершенно разные условия запуска кода: разные версии браузеров, server side, client side и т. д.
🤯Слишком многие фронтенд-инструменты полагаются на определенную структуру файлов в проекте
🤯Configuration hell: огромное количество инструментов, которые нужно как-то подружить между собой
🤯Из-за множества слоёв преобразования затруднён hot reload

💬Согласны с автором?

👍 — в точку
🤔 — нет, я не испытываю таких проблем при разработке
Говорят, что слепой десятипальцевый метод печати на клавиатуре повышает производительность и позволяет не отвлекаться на клавиатуру. А вы им владеете?
Anonymous Poll
25%
Да, это действительно повышает производительность
16%
Да, но он не сильно влияет на производительность
24%
Нет, но хочу освоить
17%
Нет, не вижу в нем смысла
17%
Посмотреть результаты
🖼 Vue.js 3 Design Patterns and Best Practices

В сети появился перевод книги автора Pablo Garaguso, которая будет полезна не только разработчикам на Vue, но и на других фронтенд-фреймворках. На текущий момент доступно две главы:

📖Глава 1. Фреймворк Vue 3

В главе представлены наиболее важные аспекты фреймворка и другие ключевые понятия.

📖Глава 2. Принципы и шаблоны проектирования программного обеспечения

В главе рассказывается о принципах и шаблонах проектирования ПО и приводятся примеры реализации на JavaScript/Vue 3.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
🤩 Пример реализации эффекта всплывающего изображения с прокруткой с помощью анимации CSS и без использования JS.

.pop {
view-timeline-name: --pop;
}
img {
animation: slide both;
animation-timeline: --pop;
animation-range: entry 100% cover 50%;
}
.skateboarder {
--x: 0;
--y: -45%;
}
@ keyframes slide {
to { translate: var(--x) var(--y); }
}


Небольшая хитрость заключается в том, чтобы сложить два элемента изображения и оставить одно из них скрытым за пределами контейнера.

👉 Поиграть можно здесь (используйте Chrome)

#css #tip by Jhey
Please open Telegram to view this post
VIEW IN TELEGRAM
👀 Довольно любопытная (в формате notebook) демонстрация практики обнаружения объектов на стороне клиента на изображениях, используя только JavaScript и нейронную сеть.

🧰Под капотом — @Xenova/detra-resnet-50, источник вдохновения — этот твит. Не забываете, что этот функционал потребляет много ресурсов процессора и может замедлить работу браузера.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
🤩Ищите вдохновение для дизайна футера? Тогда ловите ресурс с множеством идей, на котором можно фильтроваться по стилю и типу.
Please open Telegram to view this post
VIEW IN TELEGRAM
💬 Что думаете о WebAssembly? Какие дальнейшие перспективы у низкоуровневого бинарного формата для веба?

🤦‍♂️Из-за повышения индекса цитируемости Wasm в сети некоторые новички думают, что учить JS нет никакого смысла.

#холивар
Please open Telegram to view this post
VIEW IN TELEGRAM
📊 ApexCharts — современная JavaScript-библиотека, которая позволяет создавать интерактивные визуализации данных с помощью простого API и более 100 готовых к использованию примеров.

🔝Библиотека включает более десятка типов диаграмм, которые обеспечивают красивую и адаптивную визуализацию в ваших приложениях и на информационных панелях.

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

👉 GitHub
Please open Telegram to view this post
VIEW IN TELEGRAM
keyboard-shortcuts-linux.pdf
144.4 KB
👩‍💻 Visual Studio Code: советы и трюки для разработчика

💡Тот самый раздел, который позволит вам сразу приступить к продуктивной работе с VS Code.

#инструменты #шпаргалки
Please open Telegram to view this post
VIEW IN TELEGRAM
🤩Подборка для фронтенд-разработчика:

🌐 CSS in JS или самая противоречивая техника стилизации веба / Ильдар Муллахметов, Авито Тех

Почему CSS in JS библиотеки вызывают так много противоречий среди frontend разработчиков?
Как влияют на производительность, поддерживаемость кода, девелопер экспириенс?
Как браузер обрабатывает styled, как влияет на семантику, работает с props и theme?

🌐 Что такое Sentry и почему без него тяжело / Кирилл Логачев, Level Travel

Как правильно настраивать, использовать и мониторить Sentry?
Что поможет уменьшить количество ошибок в продакшене?
Как определять и быстро устранять просочившиеся с релизом ошибки?

🌐 По ту сторону WebView / Максим Лавренюк, UZUM TECHNOLOGIES

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

🌐 Web3 для фронтенд-разработчика / Назим Гафаров, Based link

Какие возможности предоставляет web3 именно для фронтенд-разработчика?
Какие популярные пакеты можно использовать вместе с React для взаимодействия с Ethereum-кошельками и смарт-контрактами?
С какими проблемами можно столкнуться при переходе на web3?

📺Смотреть весь митап

#чтопроисходит
Please open Telegram to view this post
VIEW IN TELEGRAM
🧰Практика и подводные камни base64 кодирования/декодирования строк в JavaScript: на заметку фронтенд-разработчику.

👉Читать
Please open Telegram to view this post
VIEW IN TELEGRAM