Frontend разработчик

Совет по CSS! ✨ Вы можете сделать стили компонентов портативными с помощью контейнерных запросов 😎 Изменение макета карты в зависимости от размера 🔥 Удаление текста кнопки, если она маленькая 🤏 .card {container-type: inline-size;} @ container (min-width: 50ch) {.info { grid-column: 2; }} https://codepen.io/jh3y/pen/JjZavRJ 👉 @frontend_1

Один цвет для светлого, другой для темного? 🌗 Используйте CSS light-dark в сочетании с color-scheme 🤙. [data-theme=light] { color-scheme: light; } [data-theme=dark] { color-scheme: dark; } h1 { color: light-dark(var(--red), var(--orange)); } 👉 @frontend_1

Представьте, что вы хотите создавать мощные и интерактивные веб-приложения, но каждый раз сталкиваетесь с трудностями в структуре кода и управлении компонентами. Вы чувствуете, что ваши текущие знания и навыки недостаточны для достижения результата. А теперь представьте, что вы без труда создаете современные веб-приложения с помощью Angular, успешно используя компоненты, TypeScript, RxJS и Reactive Programming. Вы уверенно разрабатываете интерфейсы, которые нравятся пользователям и используете передовые инструменты для упрощения разработки. Хотите это реализовать? Приглашаем вас на практический открытый урок «Angular Framework: работа с Компонентами» 24 июня в 20:00 мск. На вебинаре мы разберём структуру фреймворка Angular и научимся использовать компоненты для создания приложений. А еще создадим приложение при помощи ng терминала, поставляемого Angular, и компоненты, которые отобразим на странице. Этот урок специально разработан для junior-разработчиков, которые хотят познакомиться с фреймворком Angular. Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://vk.cc/cxNkqP Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Как проверить, что страница открыта из кэша Edge Cache на Vercel 👉 @frontend_1

Создаем dropzone с помощью HTML, CSS и JavaScript 🚀 https://github.com/atherosai/ui/tree/main/dropzone-03 👉 @frontend_1

👩‍💻 Хотите научиться создавать API с использованием GraphQL и NestJS? Ждём вас на открытом практическом уроке от OTUS, где вы получите теоретические знания о GraphqL и NestJS и практические навыки по созданию и интеграции GraphQL с NestJS. Спикер Николай Лапшин — опытный разработчик на нескольких языках, архитектор, тимлид и преподаватель. Встречаемся 25 июня в 20:00 мск в преддверии старта курса «JavaScript Developer. Professional». Все участники вебинара получат специальную цену на обучение! ➡️ Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://vk.cc/cxKIWJ 🎁 Только до 23 июня скидка 10%, подробности у наших менеджеров. Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Spectral.js - это библиотека для смешивания красок, использующая теорию Кубелки-Мунка. Используя возможности теории Кубелки-Мунка, надежной научной модели, имитирующей взаимодействие света с краской, Spectral.js гарантирует, что ваши проекты будут иметь яркие и реалистичные цвета. Благодаря использованию 7 различных спектральных каналов, включая белый, голубой, пурпурный, желтый, красный, зеленый и синий, Spectral.js может быть эффективно использован в различных веб-проектах, таких как: Веб-дизайн: Насыщайте свои веб-дизайны реалистичными цветовыми палитрами благодаря способности Spectral.js к реалистичному смешиванию цветов. Графика: Повысьте качество графики, используя реалистичное смешивание цветов, которое точно отражает взаимодействие света с различными оттенками. Генеративное искусство: Создавайте захватывающее генеративное искусство, используя мощные возможности смешивания цветов Spectral.js, в результате чего получаются визуально ошеломляющие и динамичные творения. Воспользуйтесь гибкостью и точностью, которые предлагает Spectral.js, и преобразуйте свои проекты с помощью обширной и яркой цветовой палитры, имитирующей реальное взаимодействие цветов. https://github.com/rvanwijnen/spectral.js 👉 @frontend_1

Совет по CSS 💡 Несмотря на некоторые ограничения в отдельных браузерах, мы можем изменять размеры любого блочного элемента, а не только textarea! 🤯 👉 @frontend_1

Интерактивное объяснение CSS calc() 👉 @frontend_1

Полный гайд по CSS Flexbox с примерами из практики Это первая статья по HTML&CSS из серии. И начать я решил именно с Flexbox. В интернете уже довольно много гайдов по Flexbox в CSS. Но чаще всего это шпаргалки, которые не сильно помогают разобраться как на самом деле все работает. Я постараюсь раскрыть тему на реальных примерах. А в конце статьи поделюсь лайфхаками, которыми сам постоянно пользуюсь в работе. Если вам больше нравится воспринимать информацию в видео-формате, то можете посмотреть ролик. https://habr.com/ru/articles/816349/ 👉 @frontend_1