Всех с наступающим новым годом 😚
Веб-разработка Ворота
@devgatewayweb
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки
Веб-разработка Ворота (Russian)
Добро пожаловать в канал 'Веб-разработка Ворота'! Если вы заинтересованы в фронтенд-разработке, то этот канал идеально подойдет для вас. Здесь вы найдете самые актуальные новости, советы и рекомендации по созданию веб-сайтов. Наш канал @devgatewayweb приглашает всех желающих погрузиться в захватывающий мир веб-разработки. Мы делимся опытом работы с различными языками программирования, инструментами и технологиями, чтобы помочь вам стать успешным в этой области. Присоединяйтесь к нам прямо сейчас и станьте частью сообщества, где ценится креативность и стремление к самосовершенствованию.
Веб-разработка Ворота
29 Dec, 10:17
Нашел для вас пять классных ресурсов, которые помогут разобраться в GIT
🔜 Learn Git Branching — это интерактивный учебник по Git, направленный на закрепление теории прохождением наглядной практики.
🔜 Oh My Git! — игра для обучения Git. Там визуализируются внутренние структуры репозиториев. Игра опенсорс, так что можно покопаться в исходниках
🔜 Git How To — это интерактивный тур, который познакомит вас с основами Git
🔜 Pro Git book — онлайн учебник по Git, который предлагает подробные руководства и документацию по всем аспектам работы с системой контроля версий
🔜 Git Gud — CLI-игра с различными уровнями сложности, которая поможет освоить Git от базового уровня до профи
➡️ | #resourse
🔜 Learn Git Branching — это интерактивный учебник по Git, направленный на закрепление теории прохождением наглядной практики.
🔜 Oh My Git! — игра для обучения Git. Там визуализируются внутренние структуры репозиториев. Игра опенсорс, так что можно покопаться в исходниках
🔜 Git How To — это интерактивный тур, который познакомит вас с основами Git
🔜 Pro Git book — онлайн учебник по Git, который предлагает подробные руководства и документацию по всем аспектам работы с системой контроля версий
🔜 Git Gud — CLI-игра с различными уровнями сложности, которая поможет освоить Git от базового уровня до профи
➡️ | #resourse
Веб-разработка Ворота
29 Dec, 07:45
Готовишься к собеседованию в IT?
Разбираем для тебя самые актуальные вопросы для подготовки
Выбирай направление:
👩💻 Frontend
👩💻 Python
👩💻 Go
👩💻 Java
👩💻 C/C++
👩💻 C#
👩💻 PHP
👩💻 QA
📊 SQL
👩💻 Git
Разбираем для тебя самые актуальные вопросы для подготовки
Выбирай направление:
👩💻 Frontend
👩💻 Python
👩💻 Go
👩💻 Java
👩💻 C/C++
👩💻 C#
👩💻 PHP
👩💻 QA
📊 SQL
👩💻 Git
Веб-разработка Ворота
29 Dec, 06:56
Battery Status API
Через Battery Status API можно получить доступ к информации о батарее устройства
Интерфейс BatteryManager позволяет взаимодействовать с Battery Status API и предоставляет доступ к информации об уровне заряда батареи устройства. Метод navigator.getBattery() возвращает промис, содержащий объект типа BatteryManager
Полный код — Codepen
Подробнее — Статья
➡️ | #js
Через Battery Status API можно получить доступ к информации о батарее устройства
navigator.getBattery().then((batteryManager) => console.log(batteryManager));
Интерфейс BatteryManager позволяет взаимодействовать с Battery Status API и предоставляет доступ к информации об уровне заряда батареи устройства. Метод navigator.getBattery() возвращает промис, содержащий объект типа BatteryManager
Полный код — Codepen
Подробнее — Статья
➡️ | #js
Веб-разработка Ворота
28 Dec, 16:22
Хочешь применить неоновый эффект к своим текстам?
→ Тебе нужен только HTML, чтобы добавить атрибут data-text, и CSS, чтобы стилизовать эффект.
→ Этот атрибут позволяет добавлять дополнительное содержимое к элементу, что идеально подходит для визуальных эффектов.
Пример: https://codepen.io/carmenansio/pen/XWBKLqm
✔️ #tip by Cosmic Red
➡️
→ Тебе нужен только HTML, чтобы добавить атрибут data-text, и CSS, чтобы стилизовать эффект.
→ Этот атрибут позволяет добавлять дополнительное содержимое к элементу, что идеально подходит для визуальных эффектов.
Пример: https://codepen.io/carmenansio/pen/XWBKLqm
✔️ #tip by Cosmic Red
➡️
Веб-разработка Ворота
28 Dec, 14:38
🎄Как стать айтишником в 2025 году?
Можно самому пытаться найти крупицы полезной инфы через сломанный поиск Гугла, можно получать ответы от ChatGPT с ошибками...
А можно воспользоваться Базой Знаний, где опытные айтишники уже отобрали за вас все материалы. И для вашего удобства поделили их на категории:
👩💻 Все языки:
🖥 Python:
👩💻 Frontend:
👩💻 Backend:
🎨 Дизайн:
📊 Архив:
⏲️ Ссылки будут активны 48 часов — успей начать Новый год правильно вместе с Базой Знаний 🚀
Можно самому пытаться найти крупицы полезной инфы через сломанный поиск Гугла, можно получать ответы от ChatGPT с ошибками...
А можно воспользоваться Базой Знаний, где опытные айтишники уже отобрали за вас все материалы. И для вашего удобства поделили их на категории:
👩💻 Все языки:
🖥 Python:
👩💻 Frontend:
👩💻 Backend:
🎨 Дизайн:
📊 Архив:
⏲️ Ссылки будут активны 48 часов — успей начать Новый год правильно вместе с Базой Знаний 🚀
Веб-разработка Ворота
27 Dec, 09:42
Устанавливаем пользовательские стили для полосы прокрутки
СCS:
Поддержка псевдоэлемента ::-webkit-scrollbar составляет 94.42%, а ::-webkit-scrollbar-thumb и ::-webkit-scrollbar-track — 80.29%
➡️ |
СCS:
/* Вся полоса прокрутки */
::-webkit-scrollbar {
width: 20px;
}
/* Дорожка полосы прокрутки */
::-webkit-scrollbar-track {
background-color: #fff;
}
/* Перетаскиваемый маркер прокрутки */
::-webkit-scrollbar-thumb {
background-color: red;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(34, 250, 88);
}
Поддержка псевдоэлемента ::-webkit-scrollbar составляет 94.42%, а ::-webkit-scrollbar-thumb и ::-webkit-scrollbar-track — 80.29%
➡️ |
Веб-разработка Ворота
27 Dec, 06:17
Добавьте анимации на ваш сайт с одной строкой кода 😌
Это библиотека, которая буквально одной строкой добавляет анимации на ваш сайт
✓ Работает с React, Vue, Angular, Svelte...
✓ Автоматически анимирует элементы
✓ Использует CSS для лучшей производительности
✓ Нулевая настройка
Никакой сложной настройки или кучи кода — всё максимально просто и быстро
👉 Пользуйтесь: https://auto-animate.formkit.com/
➡️ | #resourse
Это библиотека, которая буквально одной строкой добавляет анимации на ваш сайт
✓ Работает с React, Vue, Angular, Svelte...
✓ Автоматически анимирует элементы
✓ Использует CSS для лучшей производительности
✓ Нулевая настройка
Никакой сложной настройки или кучи кода — всё максимально просто и быстро
👉 Пользуйтесь: https://auto-animate.formkit.com/
➡️ | #resourse
Веб-разработка Ворота
26 Dec, 17:23
HTML атрибут translate
Указывает, переводить содержимое на другой язык или оставить без изменения.
Может иметь одно из двух значений: yes или no
Очень полезно для брендов или названий компаний:
➡️ | #HTML
Указывает, переводить содержимое на другой язык или оставить без изменения.
Может иметь одно из двух значений: yes или no
Очень полезно для брендов или названий компаний:
<footer>
<p translate="no"> Company Name </p>
</footer>
➡️ | #HTML
Веб-разработка Ворота
26 Dec, 15:19
Господи, да в чём проблема стать фронтендером?
Подписался на эти три канала:
👉 Фронтенд
👉 Верстка
👉 Node.JS
Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ!
Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.
Подписался на эти три канала:
👉 Фронтенд
👉 Верстка
👉 Node.JS
Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ!
Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.
Веб-разработка Ворота
26 Dec, 10:39
Наткнулся на прикольный React-компонент — spoiled
Он прячет текст или элементы под облаком частиц, которое рассеивается при наведении, как в Telegram.
Использует CSS Painting API для реалистичного рендеринга, есть fallback для неподдерживаемых браузеров
Поддерживает тёмную/светлую темы, анимации переходов и гибкие настройки (FPS, плотность, цвет)
Установить можно через npm:
Подробнее: https://github.com/molefrog/spoiled
➡️ | #resourse
Он прячет текст или элементы под облаком частиц, которое рассеивается при наведении, как в Telegram.
Использует CSS Painting API для реалистичного рендеринга, есть fallback для неподдерживаемых браузеров
Поддерживает тёмную/светлую темы, анимации переходов и гибкие настройки (FPS, плотность, цвет)
Установить можно через npm:
$ npm i spoiled
Подробнее: https://github.com/molefrog/spoiled
➡️ | #resourse
Веб-разработка Ворота
26 Dec, 08:41
Мы собрали для вас лучшие TG для web разработчиков! 😎
Подписывайся скорее, пока доступ не заблокировали! 🔥
• Рецепты кода
• Мемы
• Интересные статьи и факты
• Викторины
• Макеты
• Иконки
• Полезные ссылки
Пссс... А в этом сервисе (klicks.ru ) ты можешь сократить ссылку, поделиться файлом или текстом, ставить пароли, отслеживать статистику по переходам, включать автоудаление - и всё это бесплатно!
Подписывайся скорее, пока доступ не заблокировали! 🔥
• Рецепты кода
• Мемы
• Интересные статьи и факты
• Викторины
• Макеты
• Иконки
• Полезные ссылки
Веб-разработка Ворота
26 Dec, 06:42
🖥 Docker — это платформа, основанная на контейнеризации вашего приложения, чтобы оно одинаково работало везде, где установлен Docker 🤩
❕Примечание:
Для простоты объяснения я не углублялся в технические детали. Заметьте, что контейнер — это выполняющийся экземпляр "образа контейнера", который и является тем, что вы будете распространять.
Некоторые связанные концепции:
🔹 Dockerfile
Это файл, написанный вами, содержащий набор инструкций о том, как создать контейнер. Docker использует его для создания образа контейнера.
🔹 Docker Hub
Это онлайн-репозиторий (похожий на npm для Node.js), где хранятся контейнеры, созданные другими пользователями, и которые вы можете использовать. Существуют официальные образы контейнеров для популярных технологий, таких как базы данных, языки программирования и т.д.
🔹 Docker Compose
Это способ построения всей вашей инфраструктуры из отдельных контейнеров. Он описывает, какие контейнеры вы используете и как они взаимодействуют друг с другом (используя виртуальную сеть).
➡️ ...
❕Примечание:
Для простоты объяснения я не углублялся в технические детали. Заметьте, что контейнер — это выполняющийся экземпляр "образа контейнера", который и является тем, что вы будете распространять.
Некоторые связанные концепции:
🔹 Dockerfile
Это файл, написанный вами, содержащий набор инструкций о том, как создать контейнер. Docker использует его для создания образа контейнера.
🔹 Docker Hub
Это онлайн-репозиторий (похожий на npm для Node.js), где хранятся контейнеры, созданные другими пользователями, и которые вы можете использовать. Существуют официальные образы контейнеров для популярных технологий, таких как базы данных, языки программирования и т.д.
🔹 Docker Compose
Это способ построения всей вашей инфраструктуры из отдельных контейнеров. Он описывает, какие контейнеры вы используете и как они взаимодействуют друг с другом (используя виртуальную сеть).
➡️ ...
Веб-разработка Ворота
25 Dec, 11:26
Ищете SVG-иконки для своих проектов?
На сайте svgl.app вы найдете десятки иконок с различными вариантами экспорта и настройки
➡️ | #resourse
На сайте svgl.app вы найдете десятки иконок с различными вариантами экспорта и настройки
➡️ | #resourse
Веб-разработка Ворота
25 Dec, 09:38
👩💻 Программирование — В С Ё
В 2024 году на кодинге уже не вывезешь, перспектива года - Информационная Безопасность.
Ловите полезные каналы, которые помогут ворваться в новое направление.
👍 ZeroDay - Уроки, эксплуатация уязвимостей с нуля
👍 Белый Хакер - Свежие новости из мира ИБ
😎 Арсенал Безопасника - Все необходимые инструменты
😎 Бункер Хакера - Статьи, книги, шпаргалки и хакинг
👨💻 Серверная Админа - Настройка и уроки по компьютерным сетям
📂Вступай и изучай новое направление!
В 2024 году на кодинге уже не вывезешь, перспектива года - Информационная Безопасность.
Ловите полезные каналы, которые помогут ворваться в новое направление.
👍 ZeroDay - Уроки, эксплуатация уязвимостей с нуля
👍 Белый Хакер - Свежие новости из мира ИБ
😎 Арсенал Безопасника - Все необходимые инструменты
😎 Бункер Хакера - Статьи, книги, шпаргалки и хакинг
👨💻 Серверная Админа - Настройка и уроки по компьютерным сетям
📂Вступай и изучай новое направление!
Веб-разработка Ворота
25 Dec, 07:48
Еще один пост из серии про HTTPS 📝
Transport Layer Security (TLS) обеспечивает безопасную связь между клиентом и сервером.
Когда мы говорим "сервер", это понятие становится размытым. Сервер обычно не является одной машиной. Он может представлять собой сложную архитектуру из прокси-серверов, балансировщиков нагрузки и самого веб-приложения🦍
TLS-разгрузка используется в сложных, высоконагруженных сетях, где сервер приложения не может позволить себе обрабатывать TLS-шифрование/дешифрование, так как это требует значительных ресурсов процессора
➡️ | #разное
Transport Layer Security (TLS) обеспечивает безопасную связь между клиентом и сервером.
Когда мы говорим "сервер", это понятие становится размытым. Сервер обычно не является одной машиной. Он может представлять собой сложную архитектуру из прокси-серверов, балансировщиков нагрузки и самого веб-приложения🦍
TLS-разгрузка используется в сложных, высоконагруженных сетях, где сервер приложения не может позволить себе обрабатывать TLS-шифрование/дешифрование, так как это требует значительных ресурсов процессора
➡️ | #разное
Веб-разработка Ворота
16 Dec, 06:38
Zustand vs Redux
Обе библиотеки популярны для управления состоянием в React, каждая со своими уникальными особенностями и сценариями использования
➡️ | #разное
Обе библиотеки популярны для управления состоянием в React, каждая со своими уникальными особенностями и сценариями использования
➡️ | #разное
Веб-разработка Ворота
14 Dec, 06:25
Различные компоненты URL 🔥
Хотя мы воспринимаем URL как единое целое, они разбиваются на несколько частей, каждая из которых выполняет свою роль и имеет свою видимость.
➡️ | #разное
Хотя мы воспринимаем URL как единое целое, они разбиваются на несколько частей, каждая из которых выполняет свою роль и имеет свою видимость.
➡️ | #разное
Веб-разработка Ворота
13 Dec, 07:15
Простое и понятное объяснение, что такое API, чтобы даже ребёнок разобрался
Метафоры, схемы и даже мем с разоблачением "стартапов" — всё подано максимально понятно и с долей юмора
Надеюсь, теперь API стал чуть понятнее, а не ещё загадочнее 😐.
➡️ | #разное
Метафоры, схемы и даже мем с разоблачением "стартапов" — всё подано максимально понятно и с долей юмора
Надеюсь, теперь API стал чуть понятнее, а не ещё загадочнее 😐.
➡️ | #разное
Веб-разработка Ворота
06 Nov, 06:15
👩💻 Vue.js 3 Design Patterns and Best Practices
Сайт предоставляет перевод книги, посвященной лучшим практикам и шаблонам проектирования в Vue.js 3. В книге рассматриваются основные принципы работы с фреймворком, инструменты разработки (Pinia, Router, Vite и др.) и эффективные подходы к созданию веб-приложений
Книга ориентирована на разработчиков, знакомых с Vue и JavaScript
⛓ Ссылка: https://vue-faq.org/ru/book/
➡️ | #Vue #resourse
Сайт предоставляет перевод книги, посвященной лучшим практикам и шаблонам проектирования в Vue.js 3. В книге рассматриваются основные принципы работы с фреймворком, инструменты разработки (Pinia, Router, Vite и др.) и эффективные подходы к созданию веб-приложений
Книга ориентирована на разработчиков, знакомых с Vue и JavaScript
⛓ Ссылка: https://vue-faq.org/ru/book/
➡️ | #Vue #resourse
Веб-разработка Ворота
05 Nov, 20:32
Держите 3 классных эффекта при наведении для ваших изображений 🔥
Сохраняйте их для своего следующего проекта
➡️ | #tutorial
Сохраняйте их для своего следующего проекта
➡️ | #tutorial
Веб-разработка Ворота
05 Nov, 20:32
⚡️ Экс-сотрудник лаборатории Касперского создал два канала по IT и кибербезопасности
▪️ Пакет безопасности
▪️ Культ безопасности
Здесь вы узнаете ТОП-10 IT-гигантов в России с самой слабой защитой от взломов, какие компании «барыжат» вашими персональными данными и как этому противостоять.
Для людей из индустрии: полезный софт, ИИшки для работы, новости из сферы и куча полезностей, которые не найдёте в других каналах.
Подписывайтесь: раз и два.
▪️ Пакет безопасности
▪️ Культ безопасности
Здесь вы узнаете ТОП-10 IT-гигантов в России с самой слабой защитой от взломов, какие компании «барыжат» вашими персональными данными и как этому противостоять.
Для людей из индустрии: полезный софт, ИИшки для работы, новости из сферы и куча полезностей, которые не найдёте в других каналах.
Подписывайтесь: раз и два.
Веб-разработка Ворота
05 Nov, 12:00
Определяем в CSS, что элемент пустой
Псевдокласс :empty используется для выбора пустых элементов. Пустыми считаются элементы без потомков и текста.
В реальных проектах этот селектор сильно помогает, когда нет возможности управлять элементом, но точно знаешь, что иногда он может быть пустым. Использование псевдокласса :empty позволяет убрать лишние отступы или рамки, которые могут быть у пустого элемента
➡️ |
Псевдокласс :empty используется для выбора пустых элементов. Пустыми считаются элементы без потомков и текста.
В реальных проектах этот селектор сильно помогает, когда нет возможности управлять элементом, но точно знаешь, что иногда он может быть пустым. Использование псевдокласса :empty позволяет убрать лишние отступы или рамки, которые могут быть у пустого элемента
➡️ |
Веб-разработка Ворота
04 Nov, 09:10
⚡️ Функция minmax в CSS гридах
В этом примере мы задали ширину первого столбца (sidebar) как minmax с нижней границей 14rem и верхней границей 30%.
Как мы видим, ширина будет стремиться к 30% от ширины родительского контейнера, но не будет меньше 14rem
➡️ |
В этом примере мы задали ширину первого столбца (sidebar) как minmax с нижней границей 14rem и верхней границей 30%.
Как мы видим, ширина будет стремиться к 30% от ширины родительского контейнера, но не будет меньше 14rem
➡️ |
Веб-разработка Ворота
04 Nov, 07:33
✍️ Простые советы для тех, кто столкнулся с высшей математикой:
1) Помните, что математика — это не какой-то набор формул. Это язык, который описывает мир вокруг нас.
2) Используйте знания в повседневной жизни.
3) Читайте канал преподавателя по высшей математике - он понятным языком объяснит все сложные вещи.
Вас ждут бесплатные практикумы на различные темы, готовые шпаргалки уроков и активное комьюнити 🔥
Приятный бонус - вы всегда можете обратиться за помощью с учёбой или решением задач.
Не теряйте 👉
1) Помните, что математика — это не какой-то набор формул. Это язык, который описывает мир вокруг нас.
2) Используйте знания в повседневной жизни.
3) Читайте канал преподавателя по высшей математике - он понятным языком объяснит все сложные вещи.
Вас ждут бесплатные практикумы на различные темы, готовые шпаргалки уроков и активное комьюнити 🔥
Приятный бонус - вы всегда можете обратиться за помощью с учёбой или решением задач.
Не теряйте 👉
Веб-разработка Ворота
04 Nov, 06:01
🈳 useEffect vs useLayoutEffect
➡️ | #react
useEffect: асинхронный и не задерживает отрисовку DOM в браузере.useLayoutEffect: синхронный, и он задерживает отрисовку DOM для браузера. Он выполняет свой код непосредственно перед отрисовкой в браузере.➡️ | #react
Веб-разработка Ворота
03 Nov, 06:17
Эта история про «Netflix отказался от React» все еще распространяется спустя годы, и она по-прежнему вводит в заблуждение
это было в 2017 году и только для лендинга 🤣
➡️
это было в 2017 году и только для лендинга 🤣
➡️
Веб-разработка Ворота
02 Nov, 09:53
⚡️ Домены .new (введенные Google) полезны для быстрого доступа к определенным приложениям
➡️ | #разное
➡️ | #разное
Веб-разработка Ворота
01 Nov, 10:44
🌟 Простой трюк для добавления градиентной заливки к тексту в CSS
Задаем тексту фоновый градиент с помощью свойства background-clip с значением text. Чтобы эффект был виден, установите цвет текста элемента прозрачным color: transparent;
➡️ | #tutorial
Задаем тексту фоновый градиент с помощью свойства background-clip с значением text. Чтобы эффект был виден, установите цвет текста элемента прозрачным color: transparent;
➡️ | #tutorial
Веб-разработка Ворота
01 Nov, 08:54
⚡️ Шпаргалка по Nuxt.js от Vue Mastery: на заметку фронтенд-разработчику
Этот файл подходит для быстрого ознакомления с основными функциями Nuxt.js и может быть полезен разработчикам, которые только начинают работать с фреймворком, а также тем, кто хочет быстро вспомнить ключевые особенности и команды
➡️ | #шпора
Этот файл подходит для быстрого ознакомления с основными функциями Nuxt.js и может быть полезен разработчикам, которые только начинают работать с фреймворком, а также тем, кто хочет быстро вспомнить ключевые особенности и команды
➡️ | #шпора
Веб-разработка Ворота
31 Oct, 14:10
⭐️ Полезный репозиторий для тренировки по JavaScript
Сохраняйте подборку вопросов по JS, в которой можно проверить и освежить свои знания или подготовиться к собеседованию. Список вопросов обновляется и сейчас там 155 пунктов.
🔜 Забираем здесь
➡️ | #resourse
Сохраняйте подборку вопросов по JS, в которой можно проверить и освежить свои знания или подготовиться к собеседованию. Список вопросов обновляется и сейчас там 155 пунктов.
🔜 Забираем здесь
➡️ | #resourse
Веб-разработка Ворота
31 Oct, 10:15
⚡️ Новый синтаксис медиа-запросов CSS — Range Syntax
Поддержка на данный момент составляет 89.94%
➡️ |
Поддержка на данный момент составляет 89.94%
➡️ |
Веб-разработка Ворота
28 Oct, 17:09
Обводка текста с помощью CSS-свойства text-stroke
Свойство определяет ширину и цвет обводки текстовых символов. Это сокращенная форма записи для следующих свойств:
🔜 Поддержка свойства составляет 94.93%
➡️ |
Свойство определяет ширину и цвет обводки текстовых символов. Это сокращенная форма записи для следующих свойств:
webkit-text-stroke-width
webkit-text-stroke-color
🔜 Поддержка свойства составляет 94.93%
➡️ |
Веб-разработка Ворота
28 Oct, 07:21
⚡️ Преобразование текста в речь
SpeechSynthesis - это интерфейс Web Speech API, который используется для перевода текста в речь. Он содержит содержимое, которое должен прочитать речевой сервис, и информацию о том, как его читать (например, язык, высота тона и громкость)
В этом примере я создал простое поле ввода и вызываю данный фрагмент во время события клика на соседнюю кнопку
⏩ Этот API также поддерживает преобразование речи в текст!
🔜 Подробнее — Cтатья
➡️ | #js
SpeechSynthesis - это интерфейс Web Speech API, который используется для перевода текста в речь. Он содержит содержимое, которое должен прочитать речевой сервис, и информацию о том, как его читать (например, язык, высота тона и громкость)
В этом примере я создал простое поле ввода и вызываю данный фрагмент во время события клика на соседнюю кнопку
⏩ Этот API также поддерживает преобразование речи в текст!
🔜 Подробнее — Cтатья
➡️ | #js
Веб-разработка Ворота
27 Oct, 16:38
Использование CSS-градиента для затемнения картинки
Одним из способов затемнения изображений с помощью CSS является использование градиентов. Этот метод позволяет более гибко настроить эффект, а также добавить различные переходы и цветовые комбинации
СSS:
➡️ | #tutorial
Одним из способов затемнения изображений с помощью 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
Веб-разработка Ворота
27 Oct, 14:45
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
Успей подписаться❗️ —
Устали от 100500➕ бесконечного множества каналов, в поисках полезного материала и новостей из мира 🤩 ? Добро пожаловать в наш проект CodHub l Программирование — Мы собираем для вас все лучшие материалы любых направлений в одном канале:
📱 — Frontend 👩💻 — C+
📱 — Python 🤔 — Hacking
📱 — Java 👩💻 — Golang
📱 — C# 👩💻 — Linux
👩💻 — Lua 👩💻 — php
👩💻 — Kotlin 👩💻 — Git
👩💻 — Assembler 👩💻 — Swift
🖥 — SQL 👩💻 — Mob. Develop
👣 — Backend 🐞— Qa Automation
Успей подписаться❗️ —
Веб-разработка Ворота
26 Oct, 08:14
Псевдоэлемент ::selection
Применяет стиль к выделенному пользователем тексту
В правилах стилей допускается использовать следующие свойства:
➡️ |
Применяет стиль к выделенному пользователем тексту
::selection {
background-color: green;
color: yellow;
}В правилах стилей допускается использовать следующие свойства:
color, background-color, cursor, caret-color, outline, text-decoration, text-emphasis-color, text-shadow➡️ |
Веб-разработка Ворота
25 Oct, 15:54
💡 Однотонные серые логотипы для темной и светлой темы
Используя комбинации различных фильтров в CSS, мы можем конвертировать цветные логотипы в однотонные серые для темного и светлого режима
🔜 Поиграть можно здесь
✔️ #tip by Shripal Soni
➡️ |
Используя комбинации различных фильтров в 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
➡️ |
Веб-разработка Ворота
25 Oct, 13:44
🌡 10ТБ Отбороного контента по программированию и дизайну примо в Telegram
👩💻 Дизайн
👩💻 Программирование
👩💻 Системное администрирование
➡️ Подпишись, время ограничено!!
👩💻 Дизайн
👩💻 Программирование
👩💻 Системное администрирование
➡️ Подпишись, время ограничено!!
Веб-разработка Ворота
25 Oct, 09:41
Веб-разработка Ворота
24 Oct, 18:35
Необычные приёмы отладки, которые браузер от вас скрывает
Перевод списка неочевидных, но при этом полезных хаков, которые позволят использовать отладчик вашего браузера более полноценно. Автор оригинала — Alan Norbauer, фронтенд-разработчик в Netflix
Для понимания материала статьи потребуется как минимум средний уровень владения инструментами разработчика
🔜 Читать
➡️ | #article
Перевод списка неочевидных, но при этом полезных хаков, которые позволят использовать отладчик вашего браузера более полноценно. Автор оригинала — Alan Norbauer, фронтенд-разработчик в Netflix
Для понимания материала статьи потребуется как минимум средний уровень владения инструментами разработчика
🔜 Читать
➡️ | #article
Веб-разработка Ворота
24 Oct, 16:31
Хочу порекомендовать вам отличный эфир для программистов, которые хотят начать зарабатывать на фрилансе, даже если у вас нет отзывов и кажется, что конкуренция слишком большая
25 октября в 18:30 по МСК в Telegram-канале Андрея Шопинского пройдет эфир, где он вместе с гостем расскажет, как с нуля выйти на фриланс и найти первых клиентов.
Вас ждут полезные советы, личный опыт и реальные стратегии — всё без воды!
🔜 Подписывайся на , чтобы не пропустить
25 октября в 18:30 по МСК в Telegram-канале Андрея Шопинского пройдет эфир, где он вместе с гостем расскажет, как с нуля выйти на фриланс и найти первых клиентов.
Вас ждут полезные советы, личный опыт и реальные стратегии — всё без воды!
🔜 Подписывайся на , чтобы не пропустить
Веб-разработка Ворота
24 Oct, 10:36
🌟 3 разных способа достичь общей цели - добавить градиент в качестве границы к элементам
🔜 Способ 1:
Использовать встроенное свойство border-image и задать градиент в качестве изображения. Необходимо также указать значения для свойства slice, чтобы добиться нужного эффекта
🔜 Способ 2:
Создать псевдоэлемент и поместить его под основной элемент. Этот псевдоэлемент будет чуть больше по размеру и с фоном в виде градиента, чтобы создать иллюзию градиентной рамки у основного элемента.
🔜 Способ 3:
Добавить настоящую рамку, но при этом использовать два фона для элемента: сплошной фон, который будет до padding box(content and padding), и градиент, который будет растягиваться до области border box (content, padding и border), при этом сплошной фон будет сверху
➡️ |
🔜 Способ 1:
Использовать встроенное свойство border-image и задать градиент в качестве изображения. Необходимо также указать значения для свойства slice, чтобы добиться нужного эффекта
🔜 Способ 2:
Создать псевдоэлемент и поместить его под основной элемент. Этот псевдоэлемент будет чуть больше по размеру и с фоном в виде градиента, чтобы создать иллюзию градиентной рамки у основного элемента.
🔜 Способ 3:
Добавить настоящую рамку, но при этом использовать два фона для элемента: сплошной фон, который будет до padding box(content and padding), и градиент, который будет растягиваться до области border box (content, padding и border), при этом сплошной фон будет сверху
➡️ |
1,620
subscribers
725
photos
121
videos
