Библиотека фронтендера | 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
加入频道
💡 Непрямоугольные текстовые блоки (Non-rectangular Text Block)

Простой способ использования CSS-свойства shape-outside для создания обтекания текста вокруг фигур нестандартной формы.

В Firefox DevTools есть интерактивный инструмент для редактирования/отладки контуров фигур, созданных с использованием свойств shape-outside/clip-path.

#css #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
🖼️ Предложение ECMAScript по экранированию регулярных выражений

RegExp.escape()функция для создания экранированной версии переданного текста, которая будет соответствовать исходному тексту при интерпретации в качестве регулярного выражения. Dr. Axel Rauschmayer также написал реализацию на чистом JavaScript, чтобы понять принцип работы.

> RegExp.escape('(*)')
'\\(\\*\\)'

> '\\(\\*\\)' === String.raw`\(\*\)`
true

> RegExp.escape('_abc123')
'_abc123'
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Результаты опроса State of React 2024

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

Вы узнаете, что forwardRef и memo являемся двумя главными «болевыми точками» среди разработчиков React, Redux продолжает лидировать среди библиотек управления состоянием, а SPA продолжают составлять большинство юзкеймов React на данный момент.

👉 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
Самые полезные каналы для программистов в одной подборке!

Сохраняйте себе, чтобы не потерять 💾

🔥Для всех

Библиотека программиста — новости, статьи, досуг, фундаментальные темы
Книги для программистов
IT-мемы
Proglib Academy — тут мы рассказываем про обучение и курсы
Азбука айтишника — здесь мы познаем азы из мира программирования

🤖Про нейросети
Библиотека робототехники и беспилотников | Роботы, ИИ, интернет вещей
Библиотека нейрозвука | Транскрибация, синтез речи, ИИ-музыка
Библиотека нейротекста | ChatGPT, Gemini, Bing
Библиотека нейровидео | Sora AI, Runway ML, дипфейки
Библиотека нейрокартинок | Midjourney, DALL-E, Stable Diffusion

#️⃣C#

Книги для шарпистов | C#, .NET, F#
Библиотека шарписта — полезные статьи, новости и обучающие материалы по C#
Библиотека задач по C# — код, квизы и тесты
Библиотека собеса по C# — тренируемся отвечать на каверзные вопросы во время интервью и технического собеседования
Вакансии по C#, .NET, Unity Вакансии по PHP, Symfony, Laravel

☁️DevOps

Библиотека devops’а — полезные статьи, новости и обучающие материалы по DevOps
Вакансии по DevOps & SRE
Библиотека задач по DevOps — код, квизы и тесты
Библиотека собеса по DevOps — тренируемся отвечать на каверзные вопросы во время интервью и технического собеседования

🐘PHP

Библиотека пхпшника — полезные статьи, новости и обучающие материалы по PHP
Вакансии по PHP, Symfony, Laravel
Библиотека PHP для собеса — тренируемся отвечать на каверзные вопросы во время интервью и технического собеседования
Библиотека задач по PHP — код, квизы и тесты

🐍Python

Библиотека питониста — полезные статьи, новости и обучающие материалы по Python
Вакансии по питону, Django, Flask
Библиотека Python для собеса — тренируемся отвечать на каверзные вопросы во время интервью и технического собеседования
Библиотека задач по Python — код, квизы и тесты

Java

Книги для джавистов | Java
Библиотека джависта — полезные статьи по Java, новости и обучающие материалы
Библиотека Java для собеса — тренируемся отвечать на каверзные вопросы во время интервью и технического собеседования
Библиотека задач по Java — код, квизы и тесты
Вакансии для java-разработчиков

👾Data Science

Книги для дата сайентистов | Data Science
Библиотека Data Science — полезные статьи, новости и обучающие материалы по Data Science
Библиотека Data Science для собеса — тренируемся отвечать на каверзные вопросы во время интервью и технического собеседования
Библиотека задач по Data Science — код, квизы и тесты
Вакансии по Data Science, анализу данных, аналитике, искусственному интеллекту

🦫Go

Книги для Go разработчиков
Библиотека Go разработчика — полезные статьи, новости и обучающие материалы по Go
Библиотека Go для собеса — тренируемся отвечать на каверзные вопросы во время интервью и технического собеседования
Библиотека задач по Go — код, квизы и тесты
Вакансии по Go

🧠C++

Книги для C/C++ разработчиков
Библиотека C/C++ разработчика — полезные статьи, новости и обучающие материалы по C++
Библиотека C++ для собеса — тренируемся отвечать на каверзные вопросы во время интервью и технического собеседования
Библиотека задач по C++ — код, квизы и тесты
Вакансии по C++

💻Другие каналы

Библиотека фронтендера
Библиотека мобильного разработчика
Библиотека хакера
Библиотека тестировщика
Библиотека разработчика игр | Gamedev, Unity, Unreal Engine
Вакансии по фронтенду, джаваскрипт, React, Angular, Vue
Вакансии для мобильных разработчиков
Вакансии по QA тестированию
InfoSec Jobs — вакансии по информационной безопасности

📁Чтобы добавить папку с нашими каналами, нажмите 👉сюда👈

Также у нас есть боты:
Бот с IT-вакансиями
Бот с мероприятиями в сфере IT

Мы в других соцсетях:
🔸VK
🔸YouTube
🔸Дзен
🔸Facebook *
🔸Instagram *

* Организация Meta запрещена на территории РФ
👩‍💻 Как начать React-проект в 2025 году

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

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

1️⃣ React + Vite
2️⃣ React + Next
3️⃣ React + Astro
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
📊 Как себя чувствует IT-рынок в 2025 году?

Друзья, запускаем важное исследование рынка труда в IT!

Нам очень важно понять:
• Как изменились зарплаты
• Что происходит с наймом
• Есть ли сокращения или рост

🔐 Опрос полностью анонимный
⏱️ Займёт всего 3-5 минут
📈 Результаты опубликуем в подробной статье

Ваши ответы помогут составить реальную картину происходящего в индустрии.

👉 Пройти опрос
🎮 Three.js с нуля на практике: как за несколько часов создать аркадную 3D-игру

Кристина Янович, фронтенд-разработчик в юните спецпроектов KTS, делится опытом создания 3D-анимации на практике.

➡️ Первая часть из цикла статей посвящена разработке простой игры, в которой нужно строить башню из блоков. Вы познакомитесь с основными понятиями в Three.js, научитесь анимировать 3D-объекты и напишете логику игры.
Please open Telegram to view this post
VIEW IN TELEGRAM
🎙 462-й выпуск подкаста «Веб-стандарты»

Кого слушаем:
Вадим Макеев, Алексей Симоненко.

⏱️ Таймкоды:

00:01:07 Анонсы State of
00:02:37 CSS-функции
00:23:27 Zed и Zeta
00:38:25 Ленивые картинки
00:49:12 Interop 2025
01:24:18 Ответы на вопросы

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

#подкасты #новости
Please open Telegram to view this post
VIEW IN TELEGRAM
⚒️ Ohm — набор инструментов для синтаксического анализа JavaScript и TypeScript

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

💻 Подробнее
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👨‍💻 Одна React-задача, демонстрирующая ключевые навыки на собеседовании

Андрей Чмелёв, Tech Lead и Full Stack-разработчик, подробно разбирает один из любимых вопросов по фронтенд-разработке на собесе.

Вопрос посвящён созданию небольшого React-компонента, который асинхронно получает данные на основе пропса username. Он кажется простым, но на самом деле показывает много нюансов понимания кандидатом хуков React, сайд-эффектов, race conditions и компромиссов в дизайне.

👉 Читать
💡 console.context() в действии

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

console.context() может помочь в этом. Он является экспериментальным и доступен только в браузерах на базе Chromium, но это хороший шаг в правильном направлении.

1️⃣ Создайте конкретный инстанс логгера для части вашего приложения:

const myComponentLogger = console.context("name-of-my-component");


2️⃣ Затем логируйте сообщения в обычном режиме, используя ваш новый логгер:

myComponentLogger.log("This is a log message from my component");

myComponentLogger.warn("This is a warning message from my component");


3️⃣ При просмотре логов в консоли отфильтруйте сообщения по названию контекста.

#devtools #tip
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🍰 15 полезных JavaScript сниппетов на все случаи жизни

Начинающим разработчикам часто приходится искать быстрые решения для типичных задач, таких как копирование текста в буфер обмена, обработка URL-параметров или управление элементами DOM.

В этой статье мы собрали 15 полезных JavaScript сниппетов, которые помогут значительно упростить работу и ускорить разработку: эти небольшие, но эффективные фрагменты кода пригодятся почти в любом проекте.

🔗 Читать статью
🔗 Зеркало
💡 Три подхода к использованию селектора & в CSS

& — селектор в CSS, теперь поддерживаемый через CSS Nesting, позволяет вкладывать стили в родительский селектор без необходимости использования препроцессоров вроде Sass. Под катом — некоторые нюансы его использования.

👉 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
Interop 2️⃣0️⃣2️⃣5️⃣: функции, на которых разработчики браузеров сосредоточатся в этом году

Interop — это непрерывный процесс, в ходе которого разработчики браузеров совместно работают над улучшением функций, чтобы больше пользователей могли быстрее их использовать.

В этом году основное внимание уделяется Storage Access API, событиям указателя/мыши, отказу от старых событий мутации, событию scrollend, URLPattern и более тесной интеграции JS/WASM.

➡️ Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
🖼️ Чеклист для tsconfig.json

Перевод гайда Dr. Axel Rauschmayer о настройках TypeScript, определяемых в файле tsconfig.json. Автор затрагивает настройку проектов, в которых все локальные модули являются ESM.

👉 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
🧑‍💻 Тестирование 10 JavaScript-фреймворков на соответствие HTML

Автор статьи, будучи сторонником чистого HTML, решил проверить корректность HTML-кода, который создают популярные JavaScript-фреймворки. Для этого он запустил 10 фреймворков в базовой конфигурации, оценил HTML-код и выявил ошибки.

🤔 Что в итоге? HTML-код в некоторых фреймворках далек от идеала, но не все так плохо, ведь большинство проблем легко исправить.