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

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
加入频道
👩‍💻 Оценка поддержки браузерами: практические советы для фронтенд-разраба

Если вы пытаетесь понять, где провести черту, когда речь заходит о поддержке браузерами, опытный фронтендер Joshua Comeau может дать вам несколько советов.

Он делится факторами, которые использует при принятии решений, когда дело касается функций CSS. И хотя в этой статье основное внимание уделяется CSS, структура применима и к современным функциям JavaScript и HTML.

👉 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔍📊 10 методов SEO-оптимизации JavaScript, которые должен знать каждый фронтендер

Веб-приложения часто используют JavaScript для динамического создания контента и удобного взаимодействия с пользователем. Но поисковые роботы не всегда могут правильно прочитать и проиндексировать такой контент — в итоге сайт теряет посетителей. На помощь придут 10 способов SEO-оптимизации для JavaScript.

👉 Читать статью
👉 Зеркало
⚒️ Perfectionist 4 — плагин ESLint для сортировки элементов в вашем коде

Ему всё равно, что вы хотите сортировать (свойства, импорт, типы, декораторы, модули...) но если вы хотите принудительно отсортировать что-то с помощью ESLint, то этот инструмент для вас.

Он поддерживает алфавитную и естественную сортировку, а также сортировку по длине строки, что приводит к такому эстетичному результату.

👩‍💻 GitHub
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🎨 Подпишись на нашу еженедельную email-рассылку, чтобы быть в курсе новостей и лучших практик в области фронтенда.

В еженедельных письмах ты найдешь:
● Современные JavaScript-фреймворки и библиотеки
● HTML5 и CSS3: новые возможности и трюки
● Оптимизация производительности веб-приложений
● Тестирование и отладка кода
● UX/UI лучшие практики
● Новые веб-стандарты и браузерные технологии
● Тренды в веб-дизайне и интерфейсах
● Прогрессивные веб-приложения (PWA)

👉Подписаться👈
📊 Tremor — компоненты React для создания панелей мониторинга

Под капотом у tremor React, Tailwind CSS и Radix UI. Вы можете копировать и вставлять компоненты, либо использовать npm-пакет.

Что внутри? Все типичные элементы UI панели мониторинга, такие как диаграммы, индикаторы прогресса, трекеры активности, аккордеоны, таблицы и т. д.

👉 Сайт & GitHub
This media is not supported in your browser
VIEW IN TELEGRAM
💡Простой способ анимации иконки при нажатии/фокусе: на заметку фронтенд-разработчику

👉 Поиграть можно здесь

#css #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
🧑‍💻 Статьи для IT: как объяснять и распространять значимые идеи

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

Что: семь модулей, посвященных написанию, редактированию, иллюстрированию и распространению публикаций.

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

👉Материалы регулярно дополняются, обновляются и корректируются. А еще мы отвечаем на все учебные вопросы в комментариях курса.
🎙️ 451-й выпуск подкаста «Веб-стандарты»: Вадим Макеев и Алексей Симоненко про адвент-календари, Firefox, сложности Interop, новые фичи, Zed и как отобрать JavaScript у Oracle.

⏱️ Таймкоды:
00:01:15 Адвент-календари
00:04:44 Firefox 132 и 133
00:34:05 Сложности Interop
00:55:04 Когда радоваться новым фичам
01:11:14 Zed и внешние контексты
01:27:55 Отобрать JavaScript у Oracle

▶️ YouTube | Сайт подкаста

#подкасты #новости
🎨 5 CSS-приемов, которые нужно знать каждому фронтендеру

5 мощных CSS-техник для современной веб-разработки: селектор :has(), компактные медиазапросы, решение проблемы с порядком правил и другие приемы для профессиональных фронтенд-разработчиков.

🔗 Читать статью
🔗 Зеркало
🎨 CSS впервые за свою историю обзавелся официальным логотипом

Логотип был представлен в проекте logo.css, который создан с учетом философии самого CSS — простоты, гибкости и универсальности.

Новый логотип также несет глубокий символизм. Как пишет автор Joacod на Dev.to, дизайн отдает дань уважения историческому цвету CSS — Rebecca Purple. Этот цвет был добавлен в спецификацию CSS в честь дочери одного из создателей веб-стандартов Эрика Мейера.
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Самая сложная директива Taiga UI

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

Под катом — исследование директивы ActiveZone, которая используется в библиотеке компонентов Taiga UI. Она полагается на два инструмента Angular: Dependency Injection и RxJS. Вам понадобится глубокое понимание нативных событий DOM. Как бы ни был далек Angular от чистого JavaScript и DOM, он все равно полагается на старые добрые Web API, поэтому важно качать свои знания и в области ванильного фронтенда.

👉 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
Привет, друзья! 👋

2024-й год подходит к концу, и пока LLM не написали за нас все программы, а квантовые компьютеры не взломали все пароли, самое время подвести итоги.

Какие технологии действительно «выстрелили», а какие не оправдали ожиданий? Что изменилось в работе разработчиков, и какие навыки оказались самыми востребованными?

💻 Поделитесь своим мнением, и самое важное и интересное войдет в нашу статью. 🏆
💡 Простая формула для вычисления радиуса вложенной границы: на заметку фронтенд-разработчику

👉 Поиграть можно здесь

#css #tip by Shripal Soni
5 HTML-атрибутов для улучшения пользовательского опыта и SEO

Разбираем мощные, но часто игнорируемые атрибуты HTML, способные значительно улучшить пользовательский опыт и SEO вашего сайта. От многоязычности до удобства заполнения форм — все, что нужно современному разработчику.

🔗 Читать статью
🔗 Зеркало
🥊 Deno против Oracle: отмена прав на товарный знак JavaScript

Знаете ли вы, что Oracle официально владеет товарным знаком JavaScript? На протяжении многих лет предпринимались попытки изменить это, но Oracle не прислушивалась к ним, поэтому команда Deno официально подала ходатайство об отмене прав на товарный знак.

⚖️ И, судя по тому, что недавно происходило, Oracle, похоже, готовится к защите.

💭 Как думаете, чем все закончится?
Please open Telegram to view this post
VIEW IN TELEGRAM
🎙 452-й выпуск подкаста «Веб-стандарты»: Никита Дубко и Андрей Мелихов про новинки CSS 2024, require ES-модулей, TypeScript 5.7, слоистую спекуляцию и усталость от React.

⏱️ Таймкоды:
00:01:07 Новинки CSS 2024
00:33:51 Require ES-модулей
00:48:44 TypeScript 5.7
01:02:31 Слоистая спекуляция
01:17:55 Усталость от React

▶️ YouTube | Сайт подкаста

#подкасты #новости
Please open Telegram to view this post
VIEW IN TELEGRAM
🎨 Новый канал для вдохновения — UX in GIF

Мы запустили свежий канал, где делимся идеями для дизайна интерфейсов. Всё самое стильное, оригинальное и вдохновляющее теперь в одном месте.

📌 Чем полезен канал?

→ Идеи для дизайна интерфейсов.
→ Анимации, которые можно повторить или адаптировать.
→ Лёгкий способ искать вдохновение перед новым проектом.

👉 Подписывайтесь и вдохновляйтесь: UX in GIF
Please open Telegram to view this post
VIEW IN TELEGRAM
🧬 Как реализовать наследование в JavaScript: 7 способов

Исчерпывающий гайд по всем существующим способам организации наследования в JavaScript. Разберем сильные и слабые стороны каждого подхода и научимся выбирать оптимальный метод для твоих задач.

👉 Читать статью
👉 Зеркало