Библиотека фронтендера | 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
加入频道
Viselect: позвольте пользователям визуально выбирать элементы DOM

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

Может использоваться стандартным способом или с интеграцией для React/Preact/Vue.js. Вот только некоторые преимущества:

🔩Маленький размер
☑️Отсутствие внешних зависимостей
📱Поддержка мобилок и сенсорного ввода
🖱 Поддержка вертикальной и горизонтальной прокрутки
👌Простота использования и многое другое

🔗GitHub & Сайт
🗺️ Дорожная карта: что это, как ее составить и почему она обязательно нужна разработчику

Откройте для себя секретное оружие успешного программиста — дорожную карту, которая поможет составить пошаговый план действий на ближайшие несколько лет. В данной статье разберемся, зачем она нужна, как правильно ее составить и где «подглядеть» роадмап для айтишников всех направлений 🤫

📌 Примеры дорожных карт и полезные материалы по теме:

🤩 Подборка дорожных карт для разработчиков
👉 Дорожная карта Frontend-разработчика в 2022 году
🏃 8 шагов от новичка до профессионала: дорожная карта разработчика на C#
👨‍💻 Как стать фрилансером и где найти первый заказ: дорожная карта
🍏 Карьерный гид от новичка до профи: дорожная карта iOS-разработчика
Дорожная карта Java-разработчика в 2023 году
🧔 Повышение до тимлида: дорожная карта
🐍 Дорожная карта Python-разработчика
🤝 5 soft skills, которые помогут тебе дорасти до Senior-разработчика
389. Firefox, CSS-нестинг, HTML-заголовки, text-wrap, Фотошоп в…
Веб-стандарты
🎙Свежий выпуск подкаста «Веб-стандарты»: Никита Дубко, Вадим Макеев, Алексей Симоненко про Firefox 118, CSS-нестинг, HTML-заголовки, text-wrap, Фотошоп в вебе, Google Fonts через Cloudflare, картинки, LCP и Tailwind.

00:02:02 Firefox 118
00:11:51 Тюнинг CSS-нестинга
00:31:50 HTML-заголовки
00:55:38 Порядок в text-wrap
01:02:52 Фотошоп в вебе
01:19:59 Google Fonts через Cloudflare
01:29:53 Картинки и LCP
01:43:31 Tailwind тоже прав
02:02:22 Ответы на вопросы

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

#подкасты
This media is not supported in your browser
VIEW IN TELEGRAM
🤩 Быстро измените содержимое страницы и посмотрите, как будет выглядеть UI, включив designMode.

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

#javascript #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
🤩👩‍💻 Коллекция ресурсов и расширений для VS Code, большинство из которых подкреплены скриншотами и анимациями (можно сразу увидеть расширение в деле)

📌 Что есть интересного?

👉 Расширения для JavaScript/TypeScript/CSS, средства отладки для Chrome, интересные темы и многое другое.
Please open Telegram to view this post
VIEW IN TELEGRAM
🧑‍💻 Статьи для IT: как объяснять и распространять значимые идеи

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

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

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

👉Материалы регулярно дополняются, обновляются и корректируются. А еще мы отвечаем на все учебные вопросы в комментариях курса.
🤔Наверняка многие разрабы сталкивались с ситуацией, когда очень сложно погрузиться в кодовую базу проекта, особенно если речь идёт про легаси. Дело в том, что в такой команде нет единого стиля оформления кода.

📝Соня Гусева, фронтенд-разработчик в Яндекс Практикуме, погружается в этот вопрос и делится опытом создания гайда с правилами оформления кода для всей команды. Соня рассказывает, от каких проблем вас сможет защитить такой гайд, и приводит подробную инструкцию по его внедрению.

📌 Вот только некоторые преимущества, которые дает гайд по стилю:
• Упрощает онбординг сотрудников
• Ускоряет код-ревью
• Упрощает тестирование кода

🔗 Читать & Смотреть
☝️🚀 Рейтинг open source инструментов сборки JavaScript за последние 28 дней

🔝Топ-5:

🔧Bun — быстрый JavaScript runtime, сборщик пакетов, средство запуска тестов и менеджер пакетов. Все в одном.
🔧Vite — новое поколение инструментов, которое значительно улучшает процесс разработки фронта.
🔧Nx — умная, быстрая и расширяемая система сборки с поддержкой монорепозиториев и мощной интеграцией.
🔧Turbo — инкрементный сборщик и система сборки, оптимизированная для JavaScript/TypeScript и написанная на Rust.
🔧Esbuild — быстрый сборщик, основными приоритетами которого являются производительность и скорость.
Please open Telegram to view this post
VIEW IN TELEGRAM
Самые полезные каналы для программистов в одной подборке!

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

🔥Для всех

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

🐘PHP

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

🐍Python

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

Java

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

👾Data Science

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

🦫Go

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

🧠C++

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

💻Другие профильные каналы

Библиотека фронтендера
Библиотека шарписта
Библиотека мобильного разработчика
Библиотека хакера
Библиотека devops’a
Библиотека тестировщика

💼Каналы с вакансиями

Вакансии по фронтенду, джаваскрипт, React, Angular, Vue
Вакансии по C#, .NET, Unity Вакансии по PHP, Symfony, Laravel
Вакансии по DevOps & SRE
Вакансии для мобильных разработчиков
Вакансии по QA тестированию
InfoSec Jobs — вакансии по информационной безопасности

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

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

Мы в других соцсетях:
🔸VK
🔸YouTube
🔸Дзен
🔸Facebook
🔸Instagram
👩‍💻 Вышел Chrome 118: разбираемся, что нового доступно для разработчиков

👉 Улучшения панели source в DevTools, scripting и мультимедийные функции prefers-reduced-transparency

👉 Правило CSS @scope at-rule позволяет разработчикам распространять правила стилей на заданный корень описания и стилизовать элементы в соответствии с близостью к этому корню

👉 WebUSB API теперь доступен для Service Workers, зарегистрированных расширениями браузеров, что позволяет разработчикам использовать API при реагировании на события расширений

👉 Цикл выпуска Chrome становится короче, стабильные версии будут выходить каждые три недели, начиная с Chrome 119, который появится через три недели

👀 Читайте или смотрите подробнее
Please open Telegram to view this post
VIEW IN TELEGRAM
📖В MDN Web Docs с недавних пор появились отдельные страницы для каждой функции регулярных выражений JavaScript с более полной информацией о синтаксисе и семантике, включая информацию о совместимости браузеров.

📌Гайды
Assertions
Character classes
Groups and backreferences
Quantifiers
A cheat sheet

📌Справочные страницы
Creating regular expressions
Flags
Assertions
Atoms
Other features

👉Разбираемся подробнее, как организована информация и как новая документация может помочь вам писать регулярные выражения на JavaScript.
This media is not supported in your browser
VIEW IN TELEGRAM
🛞Учитель из России Татьяна Ерухимова уехала в США и занимается тем, чем должен заниматься любой нормальный учитель — прививает любовь к знаниям своим ученикам.

💬Всем бы таких учителей… А вы помните своего любимого учителя и предмет, который больше всего на вас повлиял?

#холивар
👩‍💻 Женщины в ИТ: проблемы и преимущества сложной профессии

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

🔗 Читать статью
🔗 Зеркало
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
☑️Почему наследование должно влиять на вашу архитектуру кастомных свойств