Веб-разработка Ворота

👩‍💻 Vue.js 3 Design Patterns and Best Practices

Сайт предоставляет перевод книги, посвященной лучшим практикам и шаблонам проектирования в Vue.js 3. В книге рассматриваются основные принципы работы с фреймворком, инструменты разработки (Pinia, Router, Vite и др.) и эффективные подходы к созданию веб-приложений

Книга ориентирована на разработчиков, знакомых с Vue и JavaScript

⛓ Ссылка: https://vue-faq.org/ru/book/

➡️ | #Vue #resourse

Держите 3 классных эффекта при наведении для ваших изображений 🔥

Сохраняйте их для своего следующего проекта

➡️ | #tutorial

⚡️ Экс-сотрудник лаборатории Касперского создал два канала по IT и кибербезопасности

▪️ Пакет безопасности
▪️ Культ безопасности

Здесь вы узнаете ТОП-10 IT-гигантов в России с самой слабой защитой от взломов, какие компании «барыжат» вашими персональными данными и как этому противостоять.

Для людей из индустрии: полезный софт, ИИшки для работы, новости из сферы и куча полезностей, которые не найдёте в других каналах.

Подписывайтесь: раз и два.

Определяем в CSS, что элемент пустой

Псевдокласс :empty используется для выбора пустых элементов. Пустыми считаются элементы без потомков и текста.

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

➡️ |

⚡️ Функция minmax в CSS гридах

В этом примере мы задали ширину первого столбца (sidebar) как minmax с нижней границей 14rem и верхней границей 30%.

Как мы видим, ширина будет стремиться к 30% от ширины родительского контейнера, но не будет меньше 14rem

➡️ |

✍️ Простые советы для тех, кто столкнулся с высшей математикой:

1) Помните, что математика — это не какой-то набор формул. Это язык, который описывает мир вокруг нас.

2) Используйте знания в повседневной жизни.

3) Читайте канал преподавателя по высшей математике - он понятным языком объяснит все сложные вещи.

Вас ждут бесплатные практикумы на различные темы, готовые шпаргалки уроков и активное комьюнити 🔥

Приятный бонус - вы всегда можете обратиться за помощью с учёбой или решением задач.

Не теряйте 👉

🈳 useEffect vs useLayoutEffect

useEffect: асинхронный и не задерживает отрисовку DOM в браузере.

useLayoutEffect: синхронный, и он задерживает отрисовку DOM для браузера. Он выполняет свой код непосредственно перед отрисовкой в браузере.

➡️ | #react

Эта история про «Netflix отказался от React» все еще распространяется спустя годы, и она по-прежнему вводит в заблуждение

это было в 2017 году и только для лендинга 🤣

➡️

⚡️ Домены .new (введенные Google) полезны для быстрого доступа к определенным приложениям

➡️ | #разное

🌟 Простой трюк для добавления градиентной заливки к тексту в CSS

Задаем тексту фоновый градиент с помощью свойства background-clip с значением text. Чтобы эффект был виден, установите цвет текста элемента прозрачным color: transparent;

➡️ | #tutorial

⚡️ Шпаргалка по Nuxt.js от Vue Mastery: на заметку фронтенд-разработчику

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

➡️ | #шпора

⭐️ Полезный репозиторий для тренировки по JavaScript

Сохраняйте подборку вопросов по JS, в которой можно проверить и освежить свои знания или подготовиться к собеседованию. Список вопросов обновляется и сейчас там 155 пунктов.

🔜 Забираем здесь

➡️ | #resourse

⚡️ Новый синтаксис медиа-запросов CSS — Range Syntax

Поддержка на данный момент составляет 89.94%

➡️ |

Обводка текста с помощью CSS-свойства text-stroke

Свойство определяет ширину и цвет обводки текстовых символов. Это сокращенная форма записи для следующих свойств:

webkit-text-stroke-width
webkit-text-stroke-color

🔜 Поддержка свойства составляет 94.93%

➡️ |

⚡️ Преобразование текста в речь

SpeechSynthesis - это интерфейс Web Speech API, который используется для перевода текста в речь. Он содержит содержимое, которое должен прочитать речевой сервис, и информацию о том, как его читать (например, язык, высота тона и громкость)

В этом примере я создал простое поле ввода и вызываю данный фрагмент во время события клика на соседнюю кнопку

⏩ Этот API также поддерживает преобразование речи в текст!

🔜 Подробнее — Cтатья

➡️ | #js

Использование CSS-градиента для затемнения картинки

Одним из способов затемнения изображений с помощью CSS является использование градиентов. Этот метод позволяет более гибко настроить эффект, а также добавить различные переходы и цветовые комбинации

СSS:

background: linear-gradient(
to right,
rgb(0 0 0 / 0.5),
rgb(0 0 0 / 0)
), url("img.jpg") 100%/cover no-repeat;

➡️ | #tutorial

CodHub теперь в Telegram❗️

Устали от 100500➕ бесконечного множества каналов, в поисках полезного материала и новостей из мира 🤩 ? Добро пожаловать в наш проект CodHub l Программирование — Мы собираем для вас все лучшие материалы любых направлений в одном канале:

📱 — Frontend 👩‍💻 — C+
📱 — Python 🤔 — Hacking
📱 — Java 👩‍💻 — Golang
📱 — C# 👩‍💻 — Linux
👩‍💻 — Lua 👩‍💻 — php
👩‍💻 — Kotlin 👩‍💻 — Git
👩‍💻 — Assembler 👩‍💻 — Swift
🖥 — SQL 👩‍💻 — Mob. Develop
👣 — Backend 🐞— Qa Automation


Успей подписаться❗️ —

Псевдоэлемент ::selection

Применяет стиль к выделенному пользователем тексту

::selection {
  background-color: green;
  color: yellow;
}

В правилах стилей допускается использовать следующие свойства: color, background-color, cursor, caret-color, outline, text-decoration, text-emphasis-color, text-shadow

➡️ |

➡️ | #memes

💡 Однотонные серые логотипы для темной и светлой темы

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

/* Для светлой темы */
.logos img {
  filter: brightness(0);
  opacity: 0.6;
}

/* Для темной темы */
.logos img {
  filter: invert(1) saturate(0) brightness(4);
  opacity: 0.6;
}

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

✔️ #tip by Shripal Soni

➡️ |

🌡 10ТБ Отбороного контента по программированию и дизайну примо в Telegram

👩‍💻 Дизайн

👩‍💻 Программирование

👩‍💻 Системное администрирование

➡️ Подпишись, время ограничено!!

🌟 Простой гайд по созданию изображения, которое отображает надпись при наведении

➡️ | #tutorial

Необычные приёмы отладки, которые браузер от вас скрывает

Перевод списка неочевидных, но при этом полезных хаков, которые позволят использовать отладчик вашего браузера более полноценно. Автор оригинала — Alan Norbauer, фронтенд-разработчик в Netflix

Для понимания материала статьи потребуется как минимум средний уровень владения инструментами разработчика

🔜 Читать

➡️ | #article

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

25 октября в 18:30 по МСК в Telegram-канале Андрея Шопинского пройдет эфир, где он вместе с гостем расскажет, как с нуля выйти на фриланс и найти первых клиентов.

Вас ждут полезные советы, личный опыт и реальные стратегии — всё без воды!

🔜 Подписывайся на , чтобы не пропустить

😁

🌟 3 разных способа достичь общей цели - добавить градиент в качестве границы к элементам

🔜 Способ 1:

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

🔜 Способ 2:

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

🔜 Способ 3:

Добавить настоящую рамку, но при этом использовать два фона для элемента: сплошной фон, который будет до padding box(content and padding), и градиент, который будет растягиваться до области border box (content, padding и border), при этом сплошной фон будет сверху

➡️ |