WebDev+ | Веб-разработка

Хочешь аккуратные, пиксельно-точные SVG-флаги стран? Есть отличный ресурс с коллекцией профессионально прорисованных флагов. Можно просто скопировать SVG-код и сразу вставлять в проект. Идеально подходит для веб-разработчиков и дизайнеров, которые ценят качество и скорость. Источник : nucleoapp.com/svg-flag-icons Берите на заметку 📸 @WebDev_Plus

Этот HTML-тег никто не использует, а он реально крутой @WebDev_Plus

HTML Tip 🌟 Какие есть применения у thead, tbody и tfooter? Чтобы применять общие стили к шапке, подвалу или основной части таблицы. Чтобы при печати таблицы на каждой странице отображались шапка и подвал. Пример: thead — секция заголовков (шапка таблицы) tbody — основное содержимое таблицы tfoot — подвал таблицы @WebDev_Plus

Немного фана вам в ленту 🙂 @WebDev_Plus

Появилась библиотека компонентов для веба, которая позволяет собирать интерфейсы с настоящим мобильным ощущением. Она поддерживает React, Vue, Svelte и другие фреймворки, а в комплекте идёт множество элементов в стиле iOS и Material. Такой подход делает веб-приложения похожими на нативные. Особенно это актуально для PWA, гибридных приложений на Ionic или Capacitor и мобильных сайтов. Пользователи получают привычный мобильный UX, а конверсия растёт. Источник: konstaui.com @WebDev_Plus

Новый инструмент для фронтендеров и дизайнеров Появился сервис gradient.style , который позволяет в пару кликов собирать CSS-градиенты с тонкой настройкой. Инструмент даёт массу вариантов кастомизации и помогает быстро создавать стильные переходы для сайтов и приложений. Источник: gradient.style 🤩 @WebDev_Plus

CSSBattle набирает популярность среди разработчиков. Это онлайн-платформа в стиле Code Golfing, где игроки со всего мира соревнуются в умении воспроизвести заданные «таргеты» минимальным количеством кода на CSS. Для участников доступен общий рейтинг с топовыми результатами, что добавляет азарт и дух соревнования. https://cssbattle.dev/ @WebDev_Plus

👩‍💻 Всем программистам посвящается! Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования: Выбирай своё направление: 👩‍💻 Python — t.me/python_ready 🤔 InfoSec & Хакинг — t.me/hacking_ready 🖥 SQL & Базы Данных — t.me/sql_ready 👩‍💻 Linux — t.me/linux_ready 🖼️ DevOps — t.me/devops_ready 🤖 Нейросети — t.me/neuro_ready 👩‍💻 C/C++ — https://t.me/cpp_ready 👩‍💻 C# & Unity — t.me/csharp_ready 👩‍💻 Java — t.me/java_ready 📖 IT Книги — t.me/books_ready 👩‍💻 Frontend — t.me/frontend_ready 📱 JavaScript — t.me/javascript_ready 👩‍💻 Backend — t.me/backend_ready 📱 GitHub & Git — t.me/github_ready 👩‍💻 Весь IT — t.me/it_ready 👩‍💻 Bash & Shell — t.me/bash_ready 🖥 Design — t.me/design_ready 📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

Разработчик поделился новыми экспериментами с CSS и JavaScript Как вам? 😳 @WebDev_Plus

Вышел курс по Three.js — библиотеке для 3D-рендеринга прямо в браузере. На практике через пять проектов показывают, как работать с текстурами, подключать GeoJSON-данные и настраивать динамические партиклы. @WebDev_Plus

Вышла новая библиотека для пользователей Tailwind CSS. В ней собраны готовые анимации, которые можно применять без написания собственного CSS. Достаточно скопировать нужный фрагмент и вставить его в проект. Библиотека подойдёт для тех, кто хочет быстро добавить анимацию в интерфейс. Доступна по ссылке: tailwindcss-animations.vercel.app @WebDev_Plus

Типы ввода HTML @WebDev_Plus

⚡️Бесплатное обучение фронтенд-разработке с нуля с личной поддержкой от наставника На канале Интенсивный JavaScript разработчик и действующий тимлид помогает изучить фронтенд на практике Когда-то он работал крупье в казино, а сейчас помогает новичкам попасть в IT и собеседует людей в свою команду С 30 августа по 2 сентября он проводит бесплатный интенсив, где поможет разобраться во фронтенде с нуля Что получите на интенсиве ✅ Напишете свой проект на JS: сайт с аниме ✅ Узнаете, как вам сейчас попасть в сферу, каких ошибок избегать ✅ Что делать с ИИ: стоит ли заходить в ИТ, или уже поздно, и нас всех заменят ✅ и получите пошаговый план изучения фронтенда с нуля до трудоустройства или стабильных 50 тысяч на фрилансе Интенсив подойдёт, даже если вы новичок — всё объясняют так, чтобы поняла даже ваша бабушка Подписывайтесь, осталось 27 мест Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 📌 Если вы уже пробовали изучать фронтенд, но каждый шаг — это гуглинг, страдание и тысяча вкладок, — приходите на интенсив. Увидите путь от вёрстки до Angular и сможете продолжать изучать фронтенд без хаоса в голове. 👉Участвовать бесплатно 🔥Первый урок уже доступен

Хочешь добавить AI-чатботов в проекты на React? 🤖 Есть опенсорсная библиотека для React, которая позволяет быстро собирать свои чатботы. Её можно подключить к разным LLM, включая OpenAI и другие. Поддерживает кучу кастомизаций, темы и гибкие настройки. Где пригодится: - поддержка пользователей прямо в приложении - встроенные AI-ассистенты - эксперименты с интеграцией LLM Установка: npm install react-chatbotify react-chatbotify.com @WebDev_Plus

Совет по CSS Не нужно готовить отдельные версии логотипа в градациях серого для тёмной и светлой темы. Это легко делается с помощью CSS-фильтров.

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

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

То есть, не нужно хранить отдельные изображения для светлого и тёмного режима — фильтры решают эту задачу. @WebDev_Plus

Это нереально крутая React-библиотека для создания высокопроизводительных 3D-приложений 🤯 - Лёгкая и быстрая - Без проблем работает с React - Идеальна для интерактивных 3D-опытов - Если ты занимаешься 3D-разработкой для веба — стоит попробовать Источник: github.com/playcanvas/react Ставь лайк, пригодится ✅ @WebDev_Plus

Бесплатный AI-инструмент от Google теперь в NotebookLM умеет делать из любой статьи или ссылки полноценный видео-туториал. Раньше были только текстовые конспекты и аудио, теперь — видео-объяснения за секунды. Я протестил на статье про JavaScript-функции с MDN — получилось готовое видео. Образование станет проще и доступнее :) @WebDev_Plus

La Liga блокирует сайты, которые используют Cloudflare, но их собственная антипиратская страница работает через CDN Cloudflare. 🤡 @WebDev_Plus

Как открыть SVG как код в VS Code @WebDev_Plus

Инструмент, который наглядно показывает, как движок JavaScript выполняет твой код. Есть пошаговая визуализация и таймлайн выполнения - просто тянешь за угол экрана. Жаль, что у меня такого не было, когда я начинал учить JS. Это сильно помогает понять, что происходит «под капотом». Источник: jsviz.klve.nl @WebDev_Plus