Совет по CSS 💡

Одно правило CSS для отображения звездочки (*) для всех обязательных полей

👉 @frontend_1

Примитивы Radix

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

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

https://github.com/radix-ui/primitives

👉 @frontend_1

Паттерны реактивности в современном JavaScript

"Реактивность" — это то, как системы реагируют на обновление данных. Существуют разные типы реактивности, но в рамках этой статьи, реактивность — это когда мы что-то делаем в ответ на изменение данных.

Rus https://habr.com/ru/articles/757770/

Eng https://frontendmasters.com/blog/vanilla-javascript-reactivity/

👉 @frontend_1

Совет по CSS 💡

Преобразуйте цветные изображения логотипов в однородные полутоновые изображения для темного/светлого режима с помощью фильтров CSS.

Для этого не нужно генерировать отдельные изображения ✨

👉 @frontend_1

Шпаргат CSS Grid 🔥

👉 @frontend_1

Подборка Telegram каналов для программистов

Системное администрирование 📌
https://www.tg-me.com/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://www.tg-me.com/sysadminof Книги для админов, полезные материалы
https://www.tg-me.com/i_odmin Все для системного администратора
https://www.tg-me.com/i_odmin_book Библиотека Системного Администратора
https://www.tg-me.com/i_odmin_chat Чат системных администраторов
https://www.tg-me.com/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.
https://www.tg-me.com/sysadminoff Новости Линукс Linux


https://www.tg-me.com/tikon_1 Новости высоких технологий, науки и техники💡
https://www.tg-me.com/mir_teh Мир технологий (Technology World)

https://www.tg-me.com/rust_lib Полезный контент по программированию на Rust
https://www.tg-me.com/golang_lib Библиотека Go (Golang) разработчика

https://www.tg-me.com/itmozg Программисты, дизайнеры, новости из мира IT.
https://www.tg-me.com/phis_mat Обучающие видео, книги по Физике и Математике

https://www.tg-me.com/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻
https://www.tg-me.com/nodejs_lib Подборки по Node js и все что с ним связано
https://www.tg-me.com/ruby_lib Библиотека Ruby программиста

1C разработка 📌
https://www.tg-me.com/odin1C_rus Cтатьи, курсы, советы, шаблоны кода 1С

Программирование C++📌
https://www.tg-me.com/cpp_lib Библиотека C/C++ разработчика
https://www.tg-me.com/cpp_knigi Книги для программистов C/C++
https://www.tg-me.com/cpp_geek Учим C/C++ на примерах

Программирование Python 📌
https://www.tg-me.com/pythonofff Python академия. Учи Python быстро и легко🐍
https://www.tg-me.com/BookPython Библиотека Python разработчика
https://www.tg-me.com/python_real Python подборки на русском и английском
https://www.tg-me.com/python_360 Книги по Python Rus

Java разработка 📌
https://www.tg-me.com/BookJava Библиотека Java разработчика
https://www.tg-me.com/java_360 Книги по Java Rus
https://www.tg-me.com/java_geek Учим Java на примерах

GitHub Сообщество 📌
https://www.tg-me.com/Githublib Интересное из GitHub

Базы данных (Data Base) 📌
https://www.tg-me.com/database_info Все про базы данных

Мобильная разработка: iOS, Android 📌
https://www.tg-me.com/developer_mobila Мобильная разработка
https://www.tg-me.com/kotlin_lib Подборки полезного материала по Kotlin

Фронтенд разработка 📌
https://www.tg-me.com/frontend_1 Подборки для frontend разработчиков
https://www.tg-me.com/frontend_sovet Frontend советы, примеры и практика!
https://www.tg-me.com/React_lib Подборки по React js и все что с ним связано

Разработка игр 📌
https://www.tg-me.com/game_devv Все о разработке игр

Вакансии 📌
https://www.tg-me.com/sysadmin_rabota Системный Администратор
https://www.tg-me.com/progjob Вакансии в IT

Чат программистов📌
https://www.tg-me.com/developers_ru

Библиотеки 📌
https://www.tg-me.com/book_for_dev Книги для программистов Rus
https://www.tg-me.com/programmist_of Книги по программированию
https://www.tg-me.com/proglb Библиотека программиста
https://www.tg-me.com/bfbook Книги для программистов
https://www.tg-me.com/books_reserv Книги для программистов

БигДата, машинное обучение 📌
https://www.tg-me.com/bigdata_1 Data Science, Big Data, Machine Learning, Deep Learning

Программирование 📌
https://www.tg-me.com/bookflow Лекции, видеоуроки, доклады с IT конференций
https://www.tg-me.com/coddy_academy Полезные советы по программированию

QA, тестирование 📌
https://www.tg-me.com/testlab_qa Библиотека тестировщика

Шутки программистов 📌
https://www.tg-me.com/itumor Шутки программистов

Защита, взлом, безопасность 📌
https://www.tg-me.com/thehaking Канал о кибербезопасности
https://www.tg-me.com/xakep_1 Статьи из "Хакера"

Книги, статьи для дизайнеров 📌
https://www.tg-me.com/ux_web Статьи, книги для дизайнеров

Английский 📌
https://www.tg-me.com/UchuEnglish Английский с нуля

Математика 📌
https://www.tg-me.com/Pomatematike Канал по математике

Excel лайфхак📌
https://www.tg-me.com/Excel_lifehack

Все хуки и концепты React в одной статье

В первую очередь React это JS библиотека, а не полноценный фреймворк, так что для создания полноценного веб приложения тебе нужно знать много дополнительных вещей, чтобы использовать их вместе с React. В этой статье пойдет речь о React концептах, хуках и, конечно 😊 , хороших практиках.

Мы используем React для создания переиспользуемых компонентов, которые могут логично использоваться для создания UI. Создание компонентов в React также просто, как и создание функций 🤩 .

Для примера 👇🏻, ниже показан простой react компонент, в который мы отправляем данные как аргумент, который можно легко указать внутри функции.

function Component(props){
return <h1>{props.text}</h1>
}

https://habr.com/ru/articles/660573/

original https://dev.to/nyctonio/all-react-hooks-and-concepts-in-a-single-post-1daf

✍️ @React_lib

Кривые Безье

Кривые Безье были постоянной темой в моей карьере фронтенд-инженера. Я широко использовал их в своей работе - в анимации и SVG-путях иллюстраций и иконок. Однако только недавно я заинтересовался пониманием логики, лежащей в основе их поведения. Эта статья раскрыла для меня тайны, связанные с использованием команд кривых путей, и дала мне более глубокое понимание веб-анимации. В этой статье я поделюсь своими интересными открытиями в области кривых Безье.

В CSS-анимации функции смягчения задают скорость изменения свойства с течением времени. Существует 3 типа функций смягчения - линейная, ступенчатая и кубическая кривая Безье.

https://blog.richardekwonye.com/bezier-curves

👉 @frontend_1

Роадмэп по современному фронтенду от KTS

Перед одним из потоков курса «Начинающий React-разработчик» мы провели вебинар, на котором рассказали, что из себя представляет современный фронтенд и какие знания нужны для востребованности на рынке труда. После вебинара мы решили написать цельный план развития во фронтенде.

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

Статья подойдет как для начинающих специалистов, так и для более опытных, которые хотели бы получить какой-то ориентир для дальнейшего развития.

https://habr.com/ru/companies/kts/articles/775948/

👉 @frontend_1

Советы по Javascript 💡

👉 @frontend_1

Совет по CSS 💡

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

👉 @frontend_1

Создаем свойства карточек с помощью HTML, CSS и JavaScript 🚀

Код 👨‍💻 https://github.com/atherosai/ui/tree/main/cards-05

👉 @frontend_1

Совет по CSS 💡

Знаете ли вы, что мы можем определить и min-width, и width, используя всего одну строку кода? 🤩

👉 @frontend_1

Совет по CSS 💡

Легко создайте градиентную обводку текста с помощью CSS 🎨

👉 @frontend_1

Скрытые возможности элемента <input>

Элемент <input> в HTML самый интересный.

Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента <input> может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид (зачастую в ущерб стилистике).

Элемент <input> отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме. В этой статье я опишу не только различные типы <input>, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях. Приступим!

Rus https://habr.com/ru/companies/ruvds/articles/785690/

Eng https://www.htmhell.dev/adventcalendar/2023/8/

👉 @frontend_1

Совет по работе с Chrome Dev Tools 💡

Знаете ли вы об этом ярлыке, позволяющем быстро очистить консоль при работе с Chrome Dev Tools? ✨

👉 @frontend_1

Frontend Portal — канал каждого уважающего себя frontend-разработчика, там вы найдете:

— Полезные ресурсы и шпаргалки
— Разбор вопросов с собеседований
— Задачи и викторины с объяснением

👉 Подпишитесь на @FrontendPortal и станьте частью дружного frontend-комьюнити!

Несколько интересных способов использования теней

Мы часто думаем о тенях в CSS как о чем-то, что нужно использовать, когда мы хотим придать дизайну глубину. Тень придает элементу возвышенность, придавая странице еще одно измерение. Но тени можно использовать не только для придания глубины. Давайте поэкспериментируем с различными тенями - двумя CSS-свойствами и фильтром - чтобы создать интересные эффекты наведения, различные стили текста и даже отбрасывание теней на другие тени.

https://www.smashingmagazine.com/2023/08/interesting-ways-use-css-shadows/

👉 @frontend_1

Совет по CSS 💡

Изменение цвета фавикона для темного/светлого режима с помощью CSS 🤩

👉 @frontend_1

Создание анимированной боковой панели с помощью HTML, CSS и JavaScript 👨‍💻🚀

https://github.com/atherosai/ui/tree/main/sidebar-07

👉 @frontend_1