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

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
加入频道
🤔 Опыт использования Next.js App Router: путь в будущее или поворот не туда

Два года назад команда Next.js представила новый подход к роутингу, который должен был стать заменой так называемому Pages Router, вместе с тем добавив ряд принципиально нового функционала.

Фронтенд-разработчик Александр Савельев делится опытом работы с Next.js и рассказывает личное мнение о причинах этого шага, возможностях и проблемах.
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔53🔥1
📌 Подборка докладов с двух последних митапов:

🌐 В погоне за HTTP / Сергей Иванов
🌐 FSD при переходе на новый стек / Михаил Дмитриевский, фронтенд-разработчик, лид команды UI и фронтенд-сообщества YADRO
🌐 Упрощаем CI/CD на примере github-actions / Алексей Николаев, тимлид в Sendsay
🌐 Странное браузерное API / Антон Ленёв, CTO Viewst
🌐 Универсальная линейка уровней / Павел Франков, разработчик в VK
🌐 Growth mindset или гибкое сознание / Анастасия Бондаренко
🌐 По ту сторону собеседования / Ангелина Купцова, фронтенд-разработчица в КОРУС Консалтинг
🌐 С завода во фронтенд / Дмитрий Зорка, фронтенд-разработчик в «Максимум Авто»

#чтопроисходит
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16
🔥 Глубокое погружение в веб-компоненты

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

Пример приложения в данном случае простой, но законченный, и, что самое главное, автор демонстрирует реалии использования веб-компонентов👇

🔗 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
👍101
🤔 Как начать React-проект в 2024 году

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

📌 Небольшой спойлер для тех, кто не хочет читать весь текст:

Если вы только начинаете изучать React, придерживайтесь использования Vite с React, потому что это наиболее близко соответствует основам React. То же самое верно, если вы ищете легковесное решение для SPA/CSR.
Если вы ищете мнение о фреймворке на основе React, который включает в себя несколько техник рендеринга (и инфраструктуру), используйте Next с React как наиболее зрелое решение со всеми его преимуществами и недостатками.
Если Next.js не соответствует вашим потребностям, но вы все еще ищете комплексный фреймворк SSR, обратите внимание на Remix с React.
Если вы хотите создать сайт, ориентированный на контент, рассмотрите возможность использования Astro с React.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🎉133
This media is not supported in your browser
VIEW IN TELEGRAM
🤔🚜 Попытка убедить клиента, что его одностраничному сайту нужен Kubernetes

#юмор
🔥22😁54🤔1
🌟 Что нового в DevTools Chrome 121: на заметку фронтенд-разработчику

1. Улучшения в панели Elements:

🔧 Поддержка @font-palette-values для настройки значений свойства font-palette.
🔧 Теперь можно использовать одно кастомное свойство CSS в качестве запасного значения для другого кастомного свойства.

2. Улучшенная поддержка source map: включена по умолчанию опция "Resolve variable names in expressions using source maps" для отладки исходного кода в Sources и Scope.

3. Улучшения в панели Performance:

🔧 Расширенный трек взаимодействий с индикаторами задержек ввода и отображения.
🔧 Новые кнопки для продвинутой фильтрации во вкладках Bottom-Up, Call Tree и Event Log.

4. Маркеры отступов в панели Sources: в редакторе кода теперь отображаются вертикальные линии для блоков с отступами.
5. Полезные подсказки для переопределенных заголовков и содержимого в панели Network.
6. Новые опции в Command Menu для добавления и удаления шаблонов блокировки запросов.
7. Удалён экспериментальный раздел нарушений CSP.
8. Lighthouse обновлён до версии 11.3.0.
9. Улучшения доступности: улучшенная навигация и взаимодействие в различных панелях.

... и многое другое
👍144
💡Псевдоэлемент ::marker в действии, или Как легко изменить стиль маркера/номера списка с помощью CSS

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

#css #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
24👍15
🧰 Использование прозрачных градиентов в CSS для создания эффекта затухания текста

Недавно некто Amit Merchant написал несколько полезных заметок о методе затемнения текста с помощью наложенного элемента, основанного на дизайне Trunk.io.

Эффект выглядит великолепно, но у него есть два недостатка:

☑️ Текст за градиентом больше нельзя выделить.
☑️ Эффект работает только на сплошных цветах фона.

Первую проблему легко решить, добавив к наложенному элементу:

user-select: none;


Для решения второй проблемы необходимо заставить текст исчезать, а не выглядеть так, будто он исчезает. Реализовать это можно с помощью mask-image или background-clip. Подробнее о реализации и подводных камнях читайте в статье.
9🔥2
🧑‍💻 Статьи для IT: как объяснять и распространять значимые идеи

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

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

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

👉Материалы регулярно дополняются, обновляются и корректируются. А еще мы отвечаем на все учебные вопросы в комментариях курса.
1
💡Быстрый способ доступа к результату последнего выражения в консоли Chrome: на заметку фронтенд-разработчику

#devtool #tip by Shripal Soni
👍27🥱42
🔥 Представлена бета-версия TypeScript 5.4

📌 Что нового:

☑️ Preserved Narrowing в Closures Following Last Assignments: улучшенный анализ типов.

☑️ The NoInfer Utility Type: новый тип NoInfer<T> предотвращает автоматический вывод типов в определенных ситуациях.

☑️ Object.groupBy и Map.groupBy: добавлены новые статические методы для группировки элементов в объектах и мапах.

☑️ Поддержка для require() calls в --moduleResolution bundler и --module preserve: расширена поддержка синтаксиса require() в опциях moduleResolution и module, что облегчает интеграцию с различными модульными системами и бандлерами.

☑️ Checked Import Attributes и Assertions: теперь checked import attributes проверяются на соответствие глобальному типу ImportAttributes.

☑️ В TypeScript 5.4 добавлено быстрое исправление для добавления недостающих параметров в функции.

☑️ Определены устаревшие функции и опции, которые будут удалены в TypeScript 5.5.

☑️ Введены изменения, которые могут повлиять на существующие проекты.
👍103🥰1🌚1